/* GENERATED — do not edit by hand.
* Classic-script mirror of /components for the UI kits: the same sources with their
* module syntax removed, each file kept in its own scope, exposed as window.FF.
* Regenerate after changing any component. If a compiled design-system bundle is already
* loaded on the page, its namespace wins and nothing here is used.
*/
var Icon = (function () {
/**
* Fair Farms Icon — Lucide glyph, masked so it always paints in currentColor.
* 1.5px stroke, never filled, never in a coloured circle.
*/
function Icon({ name, size = 20, style, title, ...rest }) {
const url = `https://unpkg.com/lucide-static@0.544.0/icons/${name}.svg`;
// The mask arrives asynchronously; until it does the box would paint as a solid
// rectangle, so hold it transparent until the glyph is decoded.
const [ready, setReady] = React.useState(false);
React.useEffect(() => {
let live = true;
const img = new Image();
img.onload = () => live && setReady(true);
img.onerror = () => live && setReady(true);
img.src = url;
return () => { live = false; };
}, [url]);
return (
);
}
return Icon;
})();
var Button = (function () {
/**
* Fair Farms Button — square-shouldered (4px), ink-and-pepper.
*
* Variants:
* - "primary" : pepper fill, the page's single most important action
* - "secondary" : hairline ink outline, transparent
* - "ghost" : text only
* - "inverse" : paper fill on ink bands
*/
function Button({
children,
variant = 'primary',
size = 'md',
icon,
iconAfter,
href,
disabled = false,
full = false,
onClick,
type = 'button',
style,
...rest
}) {
const sizes = {
sm: { minHeight: 'var(--control-h-sm, 32px)', padding: '0 12px', fontSize: 13, gap: 6 },
md: { minHeight: 'var(--control-h, 40px)', padding: '0 18px', fontSize: 15, gap: 8 },
lg: { minHeight: 'var(--control-h-lg, 48px)', padding: '0 24px', fontSize: 16, gap: 10 },
};
const variants = {
primary: {
background: 'var(--action-primary-bg, #A93425)',
color: 'var(--action-primary-fg, #FFF9F2)',
borderColor: 'transparent',
'--hover': 'var(--action-primary-bg-hover, #8F2A1D)',
'--press': 'var(--action-primary-bg-press, #781F15)',
},
secondary: {
background: 'transparent',
color: 'var(--action-secondary-fg, #17140F)',
borderColor: 'var(--action-secondary-border, #17140F)',
'--hover': 'var(--action-secondary-bg-hover, rgba(23,20,15,.06))',
'--press': 'rgba(23,20,15,.12)',
},
ghost: {
background: 'transparent',
color: 'var(--action-ghost-fg, #332E24)',
borderColor: 'transparent',
'--hover': 'var(--action-ghost-bg-hover, rgba(23,20,15,.05))',
'--press': 'rgba(23,20,15,.1)',
},
inverse: {
background: 'var(--ff-paper, #F7F2E8)',
color: 'var(--ff-ink, #17140F)',
borderColor: 'transparent',
'--hover': '#FFFDF8',
'--press': '#EFE7D8',
},
};
const v = variants[variant] || variants.primary;
const base = {
display: full ? 'flex' : 'inline-flex',
width: full ? '100%' : undefined,
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'var(--ff-font-sans, Archivo, sans-serif)',
fontWeight: 600,
lineHeight: 1.1,
letterSpacing: '0.005em',
textAlign: 'center',
textDecoration: 'none',
borderRadius: 'var(--radius-sm, 4px)',
borderWidth: 1,
borderStyle: 'solid',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: 'var(--transition-control, all 140ms ease)',
...sizes[size],
...(disabled
? {
background: 'var(--action-disabled-bg, #EFE7D8)',
color: 'var(--action-disabled-fg, #8A8271)',
borderColor: 'transparent',
}
: { background: v.background, color: v.color, borderColor: v.borderColor }),
};
const Comp = href && !disabled ? 'a' : 'button';
const tagProps = href && !disabled ? { href } : { type, disabled };
const setBg = (el, val) => {
if (variant === 'secondary' || variant === 'ghost') el.style.backgroundColor = val === 'rest' ? 'transparent' : val;
else el.style.backgroundColor = val === 'rest' ? v.background : val;
};
return (
!disabled && setBg(e.currentTarget, v['--hover'])}
onMouseLeave={(e) => {
if (disabled) return;
setBg(e.currentTarget, 'rest');
e.currentTarget.style.transform = 'translateY(0)';
}}
onMouseDown={(e) => {
if (disabled) return;
setBg(e.currentTarget, v['--press']);
e.currentTarget.style.transform = 'translateY(1px)';
}}
onMouseUp={(e) => {
if (disabled) return;
setBg(e.currentTarget, v['--hover']);
e.currentTarget.style.transform = 'translateY(0)';
}}
>
{icon ? : null}
{children}
{iconAfter ? : null}
);
}
return Button;
})();
var IconButton = (function () {
/** Square icon-only control — toolbars, table rows, dialog close, mobile nav. */
function IconButton({ icon, label, size = 'md', variant = 'ghost', onClick, disabled = false, style, ...rest }) {
const box = { sm: 32, md: 40, lg: 44 }[size] || 40;
const glyph = { sm: 16, md: 20, lg: 22 }[size] || 20;
const skins = {
ghost: { background: 'transparent', color: 'var(--action-ghost-fg, #332E24)', border: '1px solid transparent', hover: 'var(--action-ghost-bg-hover, rgba(23,20,15,.05))' },
outline: { background: 'var(--surface-card, #FFFDF8)', color: 'var(--text-strong, #17140F)', border: '1px solid var(--border-hairline, #E4D9C5)', hover: 'var(--surface-sunken, #EFE7D8)' },
solid: { background: 'var(--action-primary-bg, #A93425)', color: 'var(--action-primary-fg, #FFF9F2)', border: '1px solid transparent', hover: 'var(--action-primary-bg-hover, #8F2A1D)' },
};
const s = skins[variant] || skins.ghost;
return (
);
}
return IconButton;
})();
var Card = (function () {
/**
* Hairline card — 6px radius, 1px paper-3 border, no resting shadow.
* Interactive cards lift with shadow-2 on hover; static cards never move.
*/
function Card({ children, as = 'div', href, padding = 'md', tone = 'card', interactive = false, style, ...rest }) {
const pads = { none: 0, sm: 'var(--space-4, 16px)', md: 'var(--space-6, 24px)', lg: 'var(--space-7, 32px)' };
const tones = {
card: { background: 'var(--surface-card, #FFFDF8)' },
sunken: { background: 'var(--surface-sunken, #EFE7D8)' },
accent: { background: 'var(--surface-accent-soft, #F6E4DF)' },
hatch: { background: 'var(--hatch, #EFE7D8)' },
};
const Comp = href ? 'a' : as;
return (
{
if (!interactive && !href) return;
e.currentTarget.style.boxShadow = 'var(--shadow-2, 0 2px 10px rgba(23,20,15,.08))';
e.currentTarget.style.borderColor = 'var(--border-strong, #CBBBA0)';
}}
onMouseLeave={(e) => {
if (!interactive && !href) return;
e.currentTarget.style.boxShadow = 'none';
e.currentTarget.style.borderColor = 'var(--border-hairline, #E4D9C5)';
}}
>
{children}
);
}
return Card;
})();
var Badge = (function () {
/** Status pill: certification and lot state. Always carries a word, never colour alone. */
function Badge({ children, tone = 'neutral', icon, size = 'md', style, ...rest }) {
const tones = {
neutral: { color: 'var(--text-body, #332E24)', background: 'var(--surface-sunken, #EFE7D8)' },
organic: { color: 'var(--status-organic, #46603A)', background: 'var(--status-organic-soft, #E4EADD)' },
fair: { color: 'var(--status-fair, #C4703A)', background: 'var(--status-fair-soft, #F7E7DA)' },
info: { color: 'var(--status-info, #245F58)', background: 'var(--status-info-soft, #DDE9E6)' },
warning: { color: 'var(--status-warning, #B98829)', background: 'var(--status-warning-soft, #F7EBD2)' },
danger: { color: 'var(--status-danger, #A93425)', background: 'var(--status-danger-soft, #F6E4DF)' },
ink: { color: 'var(--ff-paper, #F7F2E8)', background: 'var(--ff-ink, #17140F)' },
};
const t = tones[tone] || tones.neutral;
return (
{icon ? : null}
{children}
);
}
return Badge;
})();
var Tag = (function () {
/** Filter / attribute chip. Square-ish, hairline, optionally selectable or removable. */
function Tag({ children, selected = false, onClick, onRemove, style, ...rest }) {
const clickable = Boolean(onClick);
return (
{children}
{onRemove ? (
{ e.stopPropagation(); onRemove(e); }}
style={{ display: 'inline-flex', cursor: 'pointer', opacity: 0.7 }}
>
) : null}
);
}
return Tag;
})();
var Seal = (function () {
const ART = {
ink: 'assets/logos/fair-farms-seal-ink.svg',
paper: 'assets/logos/fair-farms-seal-paper.svg',
pepper: 'assets/logos/fair-farms-seal-pepper.svg',
};
/**
* The Fair Farms seal — the brand's authority stamp.
* One colour, no shadow, never rotated or cropped. Clear space = 25% of diameter.
* `lockup` adds the wordmark; `assetBase` prefixes the SVG path when the consuming
* page sits in a subdirectory (e.g. assetBase="../../").
*/
function Seal({ size = 64, colour = 'ink', lockup = false, tagline, assetBase = '', href, style, ...rest }) {
const src = assetBase + (ART[colour] || ART.ink);
const mark = (
);
if (!lockup) {
const Wrap = href ? 'a' : 'span';
return (
{mark}
);
}
const Wrap = href ? 'a' : 'span';
return (
{mark}
Fair Farms
{tagline ? (
{tagline}
) : null}
);
}
return Seal;
})();
var CertBadge = (function () {
/**
* Certification lockup — licensed mark plus its machine-readable evidence.
* A mark on its own is decoration; this pairs it with number and date.
*/
function CertBadge({ name, art, number, date, note, height = 44, layout = 'row', assetBase = '', style, ...rest }) {
const stack = layout === 'stack';
return (
{art ? (
) : (
mark pending
)}
{name}
{number ? (
{number}
) : null}
{date ? (
{date}
) : null}
{note ? (
{note}
) : null}
{label ? (
) : null}
{prefix ? (
{prefix}
) : null}
{ e.currentTarget.style.borderColor = 'var(--border-focus, #245F58)'; e.currentTarget.style.boxShadow = '0 0 0 3px var(--ff-sea-tint, #DDE9E6)'; }}
onBlur={(e) => { e.currentTarget.style.borderColor = invalid ? 'var(--status-danger, #A93425)' : 'var(--border-strong, #CBBBA0)'; e.currentTarget.style.boxShadow = 'none'; }}
/>
{suffix ? (
{suffix}
) : null}
{hint || error ? (
{error || hint}
) : null}
{label ? (
) : null}
{hint || error ? (
{error || hint}
) : null}
);
}
return Select;
})();
var Checkbox = (function () {
/** Square 18px checkbox with ink fill when checked. */
function Checkbox({ label, hint, checked, defaultChecked, onChange, disabled = false, id, style, ...rest }) {
const uid = id || React.useId();
const [inner, setInner] = React.useState(Boolean(defaultChecked));
const isOn = checked === undefined ? inner : checked;
return (
);
}
return Checkbox;
})();
var Radio = (function () {
/** Radio row. Group them with a shared `name`; one visible label each. */
function Radio({ label, hint, name, value, checked, onChange, disabled = false, id, style, ...rest }) {
const uid = id || React.useId();
return (
);
}
return Radio;
})();
var Switch = (function () {
/** Switch — for settings that apply immediately (notifications, language sync). */
function Switch({ label, hint, checked, defaultChecked, onChange, disabled = false, id, style, ...rest }) {
const uid = id || React.useId();
const [inner, setInner] = React.useState(Boolean(defaultChecked));
const isOn = checked === undefined ? inner : checked;
return (
);
}
return Switch;
})();
var Tabs = (function () {
/** Underlined tabs — 2px pepper rule marks the selected tab. */
function Tabs({ items = [], value, onChange, style, ...rest }) {
const [inner, setInner] = React.useState(items[0] && (items[0].value || items[0]));
const active = value === undefined ? inner : value;
const pick = (v) => { if (value === undefined) setInner(v); onChange && onChange(v); };
return (
{items.map((raw) => {
const it = typeof raw === 'string' ? { value: raw, label: raw } : raw;
const on = it.value === active;
return (
);
})}
);
}
return Tabs;
})();
var Dialog = (function () {
/** Modal panel: ink scrim, 10px radius, 12px rise. Escape and scrim both close. */
function Dialog({ open = false, title, description, onClose, footer, children, width = 520, style, ...rest }) {
React.useEffect(() => {
if (!open) return;
const onKey = (e) => e.key === 'Escape' && onClose && onClose();
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}
{...rest}
style={{
width: '100%', maxWidth: width, maxHeight: '86vh', overflowY: 'auto',
background: 'var(--surface-card, #FFFDF8)',
border: '1px solid var(--border-hairline, #E4D9C5)',
borderRadius: 'var(--radius-lg, 10px)',
boxShadow: 'var(--shadow-3, 0 18px 44px -14px rgba(23,20,15,.28))',
animation: 'ff-rise var(--dur-base, 220ms) var(--ease-standard, ease)',
...style,
}}
>
{title}
{description ?
{description}
: null}
{onClose ? : null}
{children}
{footer ? (
) : null}
);
}
return Dialog;
})();
var Toast = (function () {
/** Ink toast, bottom-left, 4s auto-dismiss. Confirmation only — errors stay inline. */
function Toast({ open = true, message, detail, tone = 'default', onClose, duration = 4000, style, ...rest }) {
React.useEffect(() => {
if (!open || !onClose || !duration) return;
const t = setTimeout(onClose, duration);
return () => clearTimeout(t);
}, [open, onClose, duration]);
if (!open) return null;
const icons = { default: 'check', saved: 'check', warning: 'alert-triangle', danger: 'alert-circle' };
const accents = { default: 'var(--ff-leaf, #46603A)', saved: 'var(--ff-leaf, #46603A)', warning: 'var(--ff-gold, #B98829)', danger: 'var(--ff-pepper, #A93425)' };
return (
{message}
{detail ? {detail} : null}
{onClose ? : null}
);
}
return Toast;
})();
var Tooltip = (function () {
/** Hover/focus tooltip on ink. Short factual labels only — never essential content. */
function Tooltip({ label, placement = 'top', children, style, ...rest }) {
const [on, setOn] = React.useState(false);
const pos = {
top: { bottom: '100%', left: '50%', transform: 'translate(-50%, -8px)' },
bottom: { top: '100%', left: '50%', transform: 'translate(-50%, 8px)' },
left: { right: '100%', top: '50%', transform: 'translate(-8px, -50%)' },
right: { left: '100%', top: '50%', transform: 'translate(8px, -50%)' },
};
return (
setOn(true)}
onMouseLeave={() => setOn(false)}
onFocus={() => setOn(true)}
onBlur={() => setOn(false)}
>
{children}
{on ? (
{label}
) : null}
);
}
return Tooltip;
})();
var Table = (function () {
/**
* Data table: horizontal rules only, no zebra, no vertical grid.
* 40px rows, uppercase 12px heads, mono for codes and numbers.
*/
function Table({ columns = [], rows = [], caption, dense = false, style, ...rest }) {
const rowH = dense ? 36 : 44;
return (
{caption ? (
{caption}
) : null}
{columns.map((c) => (
|
{c.header}
|
))}
{rows.map((r, i) => (
(e.currentTarget.style.background = 'var(--surface-sunken, #EFE7D8)')}
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
>
{columns.map((c) => (
|
{c.render ? c.render(r) : r[c.key]}
|
))}
))}
);
}
return Table;
})();
var LotCode = (function () {
/** Traceability code chip — mono, uppercase, copyable. The system's fingerprint. */
function LotCode({ code, label, size = 'md', copyable = false, style, ...rest }) {
const [copied, setCopied] = React.useState(false);
const copy = () => {
if (!copyable || !navigator.clipboard) return;
navigator.clipboard.writeText(code).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 1600);
});
};
return (
{label ? {label} : null}
{code}
{copied ? copied : null}
);
}
return LotCode;
})();
var DataList = (function () {
/** Label/value spec list — product specs, shipment details, audit facts. */
function DataList({ items = [], columns = 1, dense = false, style, ...rest }) {
return (
{items.map((it, i) => (
- {it.label}
-
{it.value}
))}
);
}
return DataList;
})();
var Textarea = (function () {
/** Multi-line field — enquiry notes, delivery remarks. Same shell as Input; the counter is optional and never blocks typing. */
function Textarea({
label, hint, error, id, rows = 4, required = false, disabled = false, maxLength, value,
style, containerStyle, ...rest
}) {
const uid = id || React.useId();
const invalid = Boolean(error);
const used = typeof value === 'string' ? value.length : null;
return (
{label ? (
) : null}