@efolusi/meridian 1.5.0

package/forms/ButtonTile.js

@@ -0,0 +1,69 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+const CSS = `
+.ef-tilegroup{display:grid;gap:10px}
+.ef-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-card);cursor:pointer;text-align:left;font-family:var(--font-sans);color:var(--text-primary);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-tile:hover:not(:disabled){border-color:var(--sand-400)}
+.ef-tile:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-tile:disabled{opacity:.45;cursor:not-allowed}
+.ef-tile--on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
+.ef-tile__icon{display:inline-flex;color:var(--text-secondary)}
+.ef-tile--on .ef-tile__icon{color:var(--text-primary)}
+.ef-tile__title{font-size:var(--text-md);font-weight:var(--weight-semibold)}
+.ef-tile__desc{font-size:var(--text-sm);color:var(--text-muted);line-height:1.45}
+.ef-tile__check{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-contrast);opacity:0;transform:scale(.6);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-tile--on .ef-tile__check{opacity:1;transform:scale(1)}
+`;
+export function ButtonTile({
+  icon,
+  title,
+  description,
+  selected,
+  disabled,
+  onClick,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-tile', CSS);
+  return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
+    className: `ef-tile${selected ? ' ef-tile--on' : ''}${className ? ' ' + className : ''}`,
+    disabled: disabled,
+    "aria-pressed": !!selected,
+    onClick: onClick,
+    style: style
+  }), icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-tile__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 20
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-tile__title"
+  }, title), description ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-tile__desc"
+  }, description) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-tile__check"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: 11,
+    strokeWidth: 3
+  })));
+}
+export function ButtonTileGroup({
+  columns = 3,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-tile', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-tilegroup${className ? ' ' + className : ''}`,
+    style: {
+      gridTemplateColumns: `repeat(${columns},1fr)`,
+      ...style
+    }
+  }), children);
+}

package/forms/Checkbox.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: React.ReactNode;
+  /** Muted second line under the label */
+  description?: string;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/forms/Checkbox.js

@@ -0,0 +1,52 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none}
+.ef-check--disabled{opacity:.45;cursor:not-allowed}
+.ef-check__input{position:absolute;opacity:0;width:0;height:0}
+.ef-check__box{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--accent-contrast);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-check__box svg{opacity:0;transform:scale(.5);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-check__input:checked+.ef-check__box{background:var(--accent);border-color:var(--accent)}
+.ef-check__input:checked+.ef-check__box svg{opacity:1;transform:scale(1)}
+.ef-check:active .ef-check__box{transform:scale(.95)}
+.ef-check__input:focus-visible+.ef-check__box{box-shadow:var(--focus-ring)}
+.ef-check__label{font-size:var(--text-md);color:var(--text-primary);line-height:1.4}
+.ef-check__desc{display:block;font-size:var(--text-sm);color:var(--text-muted)}
+`;
+export const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox({
+  label,
+  description,
+  disabled,
+  style,
+  className,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-check', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  return /*#__PURE__*/React.createElement("label", {
+    className: `ef-check${disabled ? ' ef-check--disabled' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
+    type: "checkbox",
+    className: "ef-check__input",
+    disabled: disabled
+  }, rest, field.controlProps)), /*#__PURE__*/React.createElement("span", {
+    className: "ef-check__box"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: 13,
+    strokeWidth: 3
+  })), label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-check__label"
+  }, label, description ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-check__desc"
+  }, description) : null) : null);
+});

package/forms/Combobox.d.ts

@@ -0,0 +1,17 @@
+export interface ComboOption { value: string; label: string; icon?: string; }
+export interface ComboboxProps {
+  label?: string;
+  hint?: string;
+  /** Options as strings or {value,label,icon} */
+  options: Array<string | ComboOption>;
+  /** Selected value (single) or values (multiple) */
+  value?: string | string[] | null;
+  onChange?: (value: any) => void;
+  /** Multi-select with removable chips */
+  multiple?: boolean;
+  /** @default 'Search…' */
+  placeholder?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Combobox(props: ComboboxProps): React.JSX.Element;

package/forms/Combobox.js

@@ -0,0 +1,162 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { Tag } from "../display/Tag.js";
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+import { Portal, useAnchoredStyle } from "../overlay/Portal.js";
+const CSS = `
+.ef-combo{position:relative}
+.ef-combo__control{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:var(--control-h-md);padding:4px 32px 4px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);cursor:text;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-combo__control:hover{border-color:var(--sand-400)}
+.ef-combo--open .ef-combo__control{border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-combo__input{flex:1;min-width:80px;border:none;outline:none;background:none;font-family:var(--font-sans);font-size:var(--text-md);color:var(--text-primary);height:26px;padding:0 4px}
+.ef-combo__input::placeholder{color:var(--text-muted)}
+.ef-combo__chevron{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:inline-flex;pointer-events:none}
+.ef-combo__panel{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:240px;overflow-y:auto;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;z-index:var(--z-dropdown);animation:ef-combo-in var(--dur-fast) var(--ease-out)}
+@keyframes ef-combo-in{from{opacity:0;transform:translateY(-3px)}}
+.ef-combo__opt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary)}
+.ef-combo__opt--hi{background:var(--surface-sunken)}
+.ef-combo__opt__check{margin-left:auto;color:var(--accent);display:inline-flex}
+.ef-combo__empty{padding:14px 10px;font-size:var(--text-sm);color:var(--text-muted);text-align:center}
+`;
+export function Combobox({
+  label,
+  hint,
+  options,
+  value,
+  onChange,
+  multiple,
+  placeholder = 'Search…',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-combo', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const [open, setOpen] = React.useState(false);
+  const [q, setQ] = React.useState('');
+  const [hi, setHi] = React.useState(0);
+  const ref = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const {
+    style: anchored
+  } = useAnchoredStyle(ref, panelRef, {
+    open,
+    placement: 'bottom',
+    align: 'start',
+    matchWidth: true
+  });
+  const sel = multiple ? value || [] : value != null ? [value] : [];
+  const opts = options.map(o => typeof o === 'string' ? {
+    value: o,
+    label: o
+  } : o);
+  const shown = opts.filter(o => o.label.toLowerCase().includes(q.toLowerCase()) && (!multiple || !sel.includes(o.value)));
+  React.useEffect(() => {
+    if (!open) return;
+    const away = e => {
+      const inControl = ref.current && ref.current.contains(e.target);
+      const inPanel = panelRef.current && panelRef.current.contains(e.target);
+      if (!inControl && !inPanel) setOpen(false);
+    };
+    document.addEventListener('mousedown', away);
+    return () => document.removeEventListener('mousedown', away);
+  }, [open]);
+  const pick = v => {
+    if (multiple) {
+      onChange && onChange([...sel, v]);
+      setQ('');
+    } else {
+      onChange && onChange(v);
+      setQ('');
+      setOpen(false);
+    }
+  };
+  const unpick = v => onChange && onChange(multiple ? sel.filter(x => x !== v) : null);
+  const key = e => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHi(h => Math.min(h + 1, shown.length - 1));
+      setOpen(true);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHi(h => Math.max(h - 1, 0));
+    } else if (e.key === 'Enter' && open && shown[hi]) {
+      e.preventDefault();
+      pick(shown[hi].value);
+    } else if (e.key === 'Escape') setOpen(false);else if (e.key === 'Backspace' && !q && multiple && sel.length) unpick(sel[sel.length - 1]);
+  };
+  const control = /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: `ef-combo${open ? ' ef-combo--open' : ''}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-combo__control",
+    onClick: () => {
+      setOpen(true);
+      ref.current.querySelector('input').focus();
+    }
+  }, multiple && sel.map(v => {
+    const o = opts.find(x => x.value === v);
+    return /*#__PURE__*/React.createElement(Tag, {
+      key: v,
+      onRemove: () => unpick(v)
+    }, o ? o.label : v);
+  }), /*#__PURE__*/React.createElement("input", _extends({}, field.controlProps, {
+    className: "ef-combo__input",
+    role: "combobox",
+    "aria-expanded": open,
+    placeholder: sel.length && multiple ? '' : !multiple && sel.length ? (opts.find(x => x.value === sel[0]) || {}).label : placeholder,
+    value: q,
+    onChange: e => {
+      setQ(e.target.value);
+      setOpen(true);
+      setHi(0);
+    },
+    onFocus: () => setOpen(true),
+    onKeyDown: key
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-combo__chevron"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 16
+  }))), open && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: "ef-combo__panel",
+    role: "listbox",
+    style: anchored
+  }, shown.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "ef-combo__empty"
+  }, "Nothing matches \u201C", q, "\u201D."), shown.map((o, i) => /*#__PURE__*/React.createElement("button", {
+    key: o.value,
+    role: "option",
+    "aria-selected": !multiple && sel.includes(o.value),
+    className: `ef-combo__opt${i === hi ? ' ef-combo__opt--hi' : ''}`,
+    onMouseEnter: () => setHi(i),
+    onClick: () => pick(o.value)
+  }, o.icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: o.icon,
+    size: 15
+  }) : null, o.label, !multiple && sel.includes(o.value) ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-combo__opt__check"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: 15
+  })) : null)))));
+  if (!label && !hint) return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: className,
+    style: style
+  }), control);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }), label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__label"
+  }, label) : null, control, hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__hint"
+  }, hint) : null);
+}

package/forms/DigitEntry.d.ts

@@ -0,0 +1,15 @@
+export interface DigitEntryProps {
+  /** Number of cells @default 6 */
+  length?: number;
+  /** Controlled value (digits only) */
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Fires when all cells are filled */
+  onComplete?: (value: string) => void;
+  label?: string;
+  invalid?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function DigitEntry(props: DigitEntryProps): React.JSX.Element;

package/forms/DigitEntry.js

@@ -0,0 +1,88 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "./Button.js";
+import { useFieldProps } from "./FormField.js";
+const CSS = `
+.ef-digits{display:flex;gap:8px}
+.ef-digits__cell{width:44px;height:52px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-mono);font-size:22px;font-weight:600;text-align:center;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-digits__cell:hover:not(:disabled){border-color:var(--sand-400)}
+.ef-digits__cell:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-digits__cell:disabled{background:var(--surface-sunken);cursor:not-allowed}
+.ef-digits--invalid .ef-digits__cell{border-color:var(--danger-600)}
+`;
+export function DigitEntry({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  label,
+  invalid,
+  disabled,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-digits', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    invalid,
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const [inner, setInner] = React.useState('');
+  const v = value != null ? value : inner;
+  const refs = React.useRef([]);
+  const set = next => {
+    next = next.replace(/\D/g, '').slice(0, length);
+    if (value == null) setInner(next);
+    if (onChange) onChange(next);
+    if (next.length === length && onComplete) onComplete(next);
+  };
+  const keyAt = (i, e) => {
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      if (v[i]) set(v.slice(0, i) + v.slice(i + 1));else if (i > 0) {
+        set(v.slice(0, i - 1) + v.slice(i));
+        refs.current[i - 1] && refs.current[i - 1].focus();
+      }
+    } else if (e.key === 'ArrowLeft' && i > 0) refs.current[i - 1].focus();else if (e.key === 'ArrowRight' && i < length - 1) refs.current[i + 1].focus();
+  };
+  const inputAt = (i, e) => {
+    const ch = e.target.value.replace(/\D/g, '');
+    if (!ch) return;
+    const next = (v.slice(0, i) + ch + v.slice(i + ch.length)).slice(0, length);
+    set(next);
+    const to = Math.min(i + ch.length, length - 1);
+    refs.current[to] && refs.current[to].focus();
+  };
+  const cells = Array.from({
+    length
+  }, (_, i) => /*#__PURE__*/React.createElement("input", _extends({
+    key: i
+  }, i === 0 ? field.controlProps : null, {
+    ref: el => refs.current[i] = el,
+    className: "ef-digits__cell",
+    inputMode: "numeric",
+    autoComplete: i === 0 ? 'one-time-code' : 'off',
+    maxLength: length,
+    value: v[i] || '',
+    disabled: disabled,
+    "aria-label": `Digit ${i + 1} of ${length}`,
+    onChange: e => inputAt(i, e),
+    onKeyDown: e => keyAt(i, e),
+    onFocus: e => e.target.select()
+  })));
+  const group = /*#__PURE__*/React.createElement("div", {
+    className: `ef-digits${invalid ? ' ef-digits--invalid' : ''}`
+  }, cells);
+  if (!label) return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: className,
+    style: style
+  }), group);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__label"
+  }, label), group);
+}

package/forms/FormField.d.ts

@@ -0,0 +1,39 @@
+export interface FieldWiring {
+  /** The control's id. `null` in `group` mode, where no single child owns it. */
+  id: string | null;
+  invalid: boolean;
+  required: boolean;
+  /** Spread on the real control element, after `{...rest}`. */
+  controlProps: {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    'aria-required'?: true;
+  };
+}
+export interface FormFieldProps {
+  /** Rendered as `<label htmlFor>`, or a `<span id>` when `group`. */
+  label?: React.ReactNode;
+  /** Muted helper text below the control. Hidden while `error` is set. */
+  hint?: React.ReactNode;
+  /** Error message below the control. Truthy implies invalid. */
+  error?: React.ReactNode;
+  /** Invalid state with no message. @default false */
+  invalid?: boolean;
+  /** Red asterisk plus aria-required on the control. @default false */
+  required?: boolean;
+  /** Label a set of controls: role="group" + aria-labelledby. @default false */
+  group?: boolean;
+  /** The control's id. Generated with React.useId() when omitted. */
+  id?: string;
+  /** A control, or a function receiving the wiring to spread yourself. */
+  children?: React.ReactNode | ((field: FieldWiring) => React.ReactNode);
+  style?: React.CSSProperties;
+  className?: string;
+}
+/**
+ * Label / hint / error / required chrome around a control, and the owner of the
+ * id linking them. Design-system controls pick the wiring up from context; for
+ * anything else, pass a function and spread `controlProps` on the control.
+ */
+export declare function FormField(props: FormFieldProps): React.JSX.Element;

package/forms/FormField.js

@@ -0,0 +1,127 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+const CSS = `
+.ef-field{display:flex;flex-direction:column;gap:6px}
+.ef-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-field__req{color:var(--danger-600);margin-left:2px}
+.ef-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
+.ef-field__error{font-size:var(--text-xs);color:var(--danger-600);display:flex;align-items:center;gap:4px}
+`;
+
+// Module-private, never exported: a control outside a FormField simply sees
+// null and behaves standalone. Same shape as GroupCtx in Toggle.jsx.
+const FieldCtx = /*#__PURE__*/React.createContext(null);
+
+/**
+ * How a control joins an enclosing FormField.
+ *
+ * Lowercase, so it stays off the public namespace. That is deliberate: no
+ * consumer needs it — design-system controls are wired by their own props, and
+ * anything else is wired through FormField's render prop — and keeping it
+ * unreachable stops a seventh field dialect being invented in a showcase.
+ */
+export function useFieldProps(own = {}) {
+  const ctx = React.useContext(FieldCtx);
+  const invalid = !!(own.invalid || own.error || ctx && ctx.invalid);
+  const required = own.required != null ? !!own.required : !!(ctx && ctx.required);
+  const describedBy = [own['aria-describedby'], ctx && ctx.describedBy].filter(Boolean).join(' ');
+  const id = own.id || ctx && ctx.id || undefined;
+  // Keys are added conditionally, never assigned undefined: a control spreads
+  // {...rest} and then {...controlProps}, and an always-present key would reset
+  // a caller's own aria-invalid back to absent.
+  const controlProps = {};
+  if (id) controlProps.id = id;
+  if (describedBy) controlProps['aria-describedby'] = describedBy;
+  if (invalid) controlProps['aria-invalid'] = true;
+  if (required) controlProps['aria-required'] = true;
+  return {
+    inField: !!ctx,
+    id: id || null,
+    invalid,
+    required,
+    controlProps
+  };
+}
+
+/**
+ * Label, hint, error and required chrome around any control, and the owner of
+ * the id that ties them together.
+ *
+ * Wrap a control as children and design-system controls pick the wiring up
+ * automatically. For anything else — a third-party input, a control with no
+ * label prop — pass a function and spread the wiring yourself.
+ */
+export function FormField({
+  label,
+  hint,
+  error,
+  invalid,
+  required,
+  group,
+  id,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-field', CSS);
+  const uid = React.useId();
+  const controlId = id || uid + 'c';
+  const labelId = uid + 'l';
+  const noteId = uid + 'n';
+  const hasError = error != null && error !== false && error !== '';
+  const hasHint = !hasError && hint != null && hint !== false && hint !== '';
+  const note = hasError ? 'error' : hasHint ? 'hint' : null;
+  const bad = !!(invalid || hasError);
+  const ctx = React.useMemo(() => ({
+    // In group mode no single child owns the id — five radios cannot share one —
+    // so the group element carries the label and description instead.
+    id: group ? null : controlId,
+    describedBy: note && !group ? noteId : undefined,
+    invalid: bad,
+    required: !!required
+  }), [group, controlId, note, noteId, bad, required]);
+  const wiring = React.useMemo(() => {
+    const p = {};
+    if (ctx.id) p.id = ctx.id;
+    if (ctx.describedBy) p['aria-describedby'] = ctx.describedBy;
+    if (bad) p['aria-invalid'] = true;
+    if (required) p['aria-required'] = true;
+    return {
+      id: ctx.id,
+      invalid: bad,
+      required: !!required,
+      controlProps: p
+    };
+  }, [ctx, bad, required]);
+  const star = required ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-field__req",
+    "aria-hidden": "true"
+  }, "*") : null;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: group ? 'group' : undefined,
+    "aria-labelledby": group && label ? labelId : undefined,
+    "aria-describedby": group && note ? noteId : undefined,
+    className: `ef-field${className ? ' ' + className : ''}`,
+    style: style
+  }), label ? group ? /*#__PURE__*/React.createElement("span", {
+    id: labelId,
+    className: "ef-field__label"
+  }, label, star) : /*#__PURE__*/React.createElement("label", {
+    htmlFor: controlId,
+    className: "ef-field__label"
+  }, label, star) : null, /*#__PURE__*/React.createElement(FieldCtx.Provider, {
+    value: ctx
+  }, typeof children === 'function' ? children(wiring) : children), hasError ? /*#__PURE__*/React.createElement("span", {
+    id: noteId,
+    className: "ef-field__error"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "circle-alert",
+    size: 13
+  }), error) : hasHint ? /*#__PURE__*/React.createElement("span", {
+    id: noteId,
+    className: "ef-field__hint"
+  }, hint) : null);
+}

package/forms/IconButton.d.ts

@@ -0,0 +1,11 @@
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Lucide icon name */
+  icon: string;
+  /** Accessible label (required — rendered as aria-label + title) */
+  label: string;
+  /** @default 'quiet' */
+  variant?: 'quiet' | 'outline' | 'solid';
+  /** @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+}
+export declare function IconButton(props: IconButtonProps): React.JSX.Element;

package/forms/IconButton.js

@@ -0,0 +1,41 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "./Button.js";
+const CSS = `
+.ef-iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
+.ef-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-iconbtn:active:not(:disabled){transform:scale(.96)}
+.ef-iconbtn:disabled{opacity:.45;cursor:not-allowed}
+.ef-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
+.ef-iconbtn--md{width:var(--control-h-md);height:var(--control-h-md)}
+.ef-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
+.ef-iconbtn--quiet:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}
+.ef-iconbtn--outline{border-color:var(--border-strong);background:transparent;color:var(--text-primary)}
+.ef-iconbtn--outline:hover:not(:disabled){background:var(--surface-sunken)}
+.ef-iconbtn--solid{background:var(--accent);color:var(--accent-contrast)}
+.ef-iconbtn--solid:hover:not(:disabled){background:var(--accent-hover)}
+`;
+export function IconButton({
+  icon,
+  label,
+  variant = 'quiet',
+  size = 'md',
+  disabled,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-iconbtn', CSS);
+  const isz = size === 'sm' ? 16 : size === 'lg' ? 20 : 18;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    "aria-label": label,
+    title: label,
+    className: `ef-iconbtn ef-iconbtn--${variant} ef-iconbtn--${size}${className ? ' ' + className : ''}`,
+    disabled: disabled,
+    style: style
+  }, rest), /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: isz
+  }));
+}

package/forms/Input.d.ts

@@ -0,0 +1,14 @@
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Field label rendered above */
+  label?: string;
+  /** Muted helper text below */
+  hint?: string;
+  /** Error message below — also sets invalid styling */
+  error?: string;
+  /** Lucide icon name inside the field, left */
+  iconLeft?: string;
+  /** @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  invalid?: boolean;
+}
+export declare function Input(props: InputProps): React.JSX.Element;