@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropFields.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as b, useContext as I, createContext as w } from "react";
+import a from "./BackdropFields.module.css.js";
+import { cx as p } from "./cx.js";
+import { AlertCircle as B, Circle as $, CheckCircleFilled as g, Search as T, Close as R, ChevronDown as D } from "./icons.js";
+import { BackdropIconTile as S } from "./BackdropDisplay.js";
+const k = w(null);
+function f(...c) {
+  const n = c.filter(Boolean).join(" ");
+  return n === "" ? void 0 : n;
+}
+function x(c, n) {
+  const i = I(k);
+  return {
+    id: c.id ?? (i == null ? void 0 : i.controlId),
+    "aria-describedby": f(i == null ? void 0 : i.describedBy, n, c["aria-describedby"]),
+    "aria-invalid": c["aria-invalid"] ?? (i != null && i.invalid ? !0 : void 0)
+  };
+}
+function W({ label: c, children: n, optionalLabel: i, hint: d, error: s, controlId: r, className: l, ...h }) {
+  const o = b(), m = r ?? `${o}-control`, u = `${m}-hint`, N = `${m}-error`, v = s != null && s !== !1, F = v ? N : d !== void 0 ? u : void 0;
+  return /* @__PURE__ */ t("div", { className: p(a.field, l), ...h, children: [
+    /* @__PURE__ */ t("label", { htmlFor: m, className: a.label, children: [
+      c,
+      i !== void 0 && /* @__PURE__ */ t("span", { className: a.optional, children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "·" }),
+        " ",
+        i
+      ] })
+    ] }),
+    /* @__PURE__ */ e(k.Provider, { value: { controlId: m, describedBy: F, invalid: v }, children: n }),
+    v ? /* @__PURE__ */ t("p", { id: N, className: a.error, children: [
+      /* @__PURE__ */ e("span", { className: a.errorIcon, children: /* @__PURE__ */ e(B, {}) }),
+      /* @__PURE__ */ e("span", { children: s })
+    ] }) : d !== void 0 && /* @__PURE__ */ e("p", { id: u, className: a.hint, children: d })
+  ] });
+}
+function E({ leadingIcon: c, suffix: n, focusFlow: i = !1, className: d, type: s = "text", ...r }) {
+  const l = `${b()}-suffix`, h = n != null, o = x(r, h ? l : void 0);
+  return /* @__PURE__ */ t("span", { className: p(a.control, i && a.focusFlow, d), children: [
+    c !== void 0 && /* @__PURE__ */ e("span", { className: a.leading, "aria-hidden": "true", children: c }),
+    /* @__PURE__ */ e("input", { type: s, ...r, ...o, className: a.input }),
+    h && /* @__PURE__ */ e("span", { id: l, className: a.suffix, children: n })
+  ] });
+}
+function O({ className: c, rows: n = 3, size: i = "md", footer: d, ...s }) {
+  const r = x(s), l = d != null && d !== !1;
+  return i !== "lg" && !l ? /* @__PURE__ */ e("textarea", { rows: Math.max(3, n), ...s, ...r, className: p(a.textarea, c) }) : /* @__PURE__ */ t("div", { className: p(a.textareaBox, i === "lg" && a.textareaBoxLg, c), children: [
+    /* @__PURE__ */ e("textarea", { rows: Math.max(3, n), ...s, ...r, className: a.textareaBare }),
+    l && /* @__PURE__ */ e("div", { className: a.textareaFooter, children: d })
+  ] });
+}
+function A({ appearance: c = "field", focusFlow: n = !1, className: i, children: d, ...s }) {
+  const r = x(s), l = c === "pill";
+  return /* @__PURE__ */ t("span", { className: p(a.selectWrap, l && a.selectWrapPill, i), children: [
+    /* @__PURE__ */ e("select", { ...s, ...r, className: p(a.select, l ? a.selectPill : n && a.focusFlow), children: d }),
+    /* @__PURE__ */ e("span", { className: a.chevron, "aria-hidden": "true", children: /* @__PURE__ */ e(D, {}) })
+  ] });
+}
+function q({ label: c, clearLabel: n, size: i = "lg", className: d, ...s }) {
+  const r = x(s);
+  return /* @__PURE__ */ t("span", { className: p(a.control, a.search, i === "md" && a.searchMd, d), children: [
+    /* @__PURE__ */ e("span", { className: a.leading, "aria-hidden": "true", children: /* @__PURE__ */ e(T, { size: 16 }) }),
+    /* @__PURE__ */ e("input", { type: "search", "aria-label": c, ...s, ...r, className: a.input }),
+    n !== void 0 && /* @__PURE__ */ e("button", { type: "button", "aria-label": n, className: a.clear, children: /* @__PURE__ */ e(R, { size: 16 }) })
+  ] });
+}
+function H({ label: c, description: n, className: i, id: d, ...s }) {
+  const r = b(), l = d ?? `${r}-switch`, h = `${l}-description`, o = n != null;
+  return /* @__PURE__ */ t("span", { className: p(a.switchRow, i), children: [
+    /* @__PURE__ */ t("span", { className: a.switchTrackSlot, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "checkbox",
+          role: "switch",
+          id: l,
+          ...s,
+          "aria-describedby": f(o && h, s["aria-describedby"]),
+          className: a.switchInput
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: a.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: a.switchThumb }) })
+    ] }),
+    /* @__PURE__ */ t("span", { className: a.switchText, children: [
+      /* @__PURE__ */ e("label", { htmlFor: l, className: a.switchLabel, children: c }),
+      o && /* @__PURE__ */ e("span", { id: h, className: a.switchDescription, children: n })
+    ] })
+  ] });
+}
+const y = w(null);
+function C({
+  legend: c,
+  name: n,
+  hint: i,
+  error: d,
+  children: s,
+  className: r,
+  listClassName: l,
+  listStyle: h,
+  ...o
+}) {
+  const m = b(), u = `${m}-hint`, N = `${m}-error`, v = d != null && d !== !1;
+  return /* @__PURE__ */ t(
+    "fieldset",
+    {
+      ...o,
+      "aria-describedby": f(v ? N : i !== void 0 && u, o["aria-describedby"]),
+      className: p(a.fieldset, r),
+      children: [
+        /* @__PURE__ */ e("legend", { className: a.legend, children: c }),
+        /* @__PURE__ */ e(y.Provider, { value: { name: n, invalid: v }, children: /* @__PURE__ */ e("div", { className: l, style: h, children: s }) }),
+        v ? /* @__PURE__ */ t("p", { id: N, className: a.error, children: [
+          /* @__PURE__ */ e("span", { className: a.errorIcon, children: /* @__PURE__ */ e(B, {}) }),
+          /* @__PURE__ */ e("span", { children: d })
+        ] }) : i !== void 0 && /* @__PURE__ */ e("p", { id: u, className: a.hint, children: i })
+      ]
+    }
+  );
+}
+function J(c) {
+  return /* @__PURE__ */ e(C, { ...c, listClassName: a.radioList });
+}
+function K({ label: c, description: n, className: i, id: d, ...s }) {
+  const r = I(y), l = b(), h = d ?? `${l}-radio`, o = `${h}-description`, m = n != null;
+  return /* @__PURE__ */ t("span", { className: p(a.radioRow, i), children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "radio",
+        id: h,
+        name: s.name ?? (r == null ? void 0 : r.name),
+        ...s,
+        "aria-invalid": s["aria-invalid"] ?? (r != null && r.invalid ? !0 : void 0),
+        "aria-describedby": f(m && o, s["aria-describedby"]),
+        className: a.radio
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: a.radioText, children: [
+      /* @__PURE__ */ e("label", { htmlFor: h, className: a.radioLabel, children: c }),
+      m && /* @__PURE__ */ e("span", { id: o, className: a.radioDescription, children: n })
+    ] })
+  ] });
+}
+function Q({ columns: c = 1, ...n }) {
+  const i = Math.max(1, Math.floor(c));
+  return /* @__PURE__ */ e(
+    C,
+    {
+      ...n,
+      listClassName: a.cardList,
+      listStyle: i > 1 ? { "--backdrop-radio-card-columns": i } : void 0
+    }
+  );
+}
+function U({ title: c, description: n, icon: i, className: d, id: s, ...r }) {
+  const l = I(y), h = b(), o = s ?? `${h}-card`, m = `${o}-title`, u = `${o}-description`, N = n != null;
+  return /* @__PURE__ */ t("label", { htmlFor: o, className: p(a.card, d), children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "radio",
+        id: o,
+        name: r.name ?? (l == null ? void 0 : l.name),
+        ...r,
+        "aria-labelledby": r["aria-labelledby"] ?? m,
+        "aria-invalid": r["aria-invalid"] ?? (l != null && l.invalid ? !0 : void 0),
+        "aria-describedby": f(N && u, r["aria-describedby"]),
+        className: a.cardInput
+      }
+    ),
+    i !== void 0 && /* @__PURE__ */ e(S, { children: i }),
+    /* @__PURE__ */ t("span", { className: a.cardText, children: [
+      /* @__PURE__ */ e("span", { id: m, className: a.cardTitle, children: c }),
+      N && /* @__PURE__ */ e("span", { id: u, className: a.cardDescription, children: n })
+    ] }),
+    /* @__PURE__ */ t("span", { className: a.cardIndicator, "aria-hidden": "true", children: [
+      /* @__PURE__ */ e("span", { className: a.cardIndicatorOff, children: /* @__PURE__ */ e($, { size: 20 }) }),
+      /* @__PURE__ */ e("span", { className: a.cardIndicatorOn, children: /* @__PURE__ */ e(g, { size: 20 }) })
+    ] })
+  ] });
+}
+export {
+  W as BackdropField,
+  E as BackdropInput,
+  K as BackdropRadio,
+  U as BackdropRadioCard,
+  Q as BackdropRadioCardGroup,
+  J as BackdropRadioGroup,
+  q as BackdropSearchField,
+  A as BackdropSelect,
+  H as BackdropSwitch,
+  O as BackdropTextarea
+};
+//# sourceMappingURL=BackdropFields.js.map

package/dist/components/Backdrop/BackdropFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropFields.js","sources":["../../../src/components/Backdrop/BackdropFields.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, useId } from 'react'\nimport type {\n  CSSProperties,\n  FieldsetHTMLAttributes,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react'\nimport styles from './BackdropFields.module.css'\nimport { cx } from './cx'\nimport { AlertCircle, CheckCircleFilled, ChevronDown, Circle, Close, Search } from './icons'\nimport { BackdropIconTile } from './BackdropDisplay'\n\n/*\n * Batch 2 · Fields. The form controls every product's settings, dialogs and\n * focus flows are built from (N9-N13). Stage A: static and presentational.\n *\n * Every control renders the NATIVE element (<input>, <textarea>, <select>, a\n * checkbox with role=\"switch\", a radio) and spreads the remaining native\n * attributes onto it, so a consumer passes value / defaultValue / onChange /\n * name / disabled the ordinary way and Stage B has nothing to restructure. No\n * component here holds state or owns a handler. A selected radio card or an\n * \"on\" switch is drawn from the native :checked state in CSS, not from a prop.\n *\n *   Field        label above, optional suffix, hint below, error replacing the hint.\n *   Input        text input, 40 (44 in focus flows), leading icon, trailing unit.\n *   Textarea     the input's ring, radius and padding; three rows at least.\n *   Select       native select with a 16px chevron; `pill` for the list filter.\n *   Search field in-page search: 16px lens, optional clear button.\n *   Switch       34x20 track, label right, optional description.\n *   Radio group  plain radios in a fieldset with a legend.\n *   Radio card   a selectable card; grouped stacked or N across.\n *\n * Sizes are ADR-0017's: input 40 / 44 and radius 10 (D9), input edge\n * --backdrop-line-strong (D8), card radius 16 (D2), icons 16 (D17).\n */\n\n/* ── Field ─────────────────────────────────────────────────────────────── */\n\ninterface FieldContextValue {\n  controlId: string\n  /** The hint's or the error's id: whichever is showing. */\n  describedBy?: string\n  invalid: boolean\n}\n\n/* A field hands its control the ids that wire label, hint and error to it.\n   Context, not state: nothing here changes after the first render. */\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/** Joins the ids that describe a control, dropping the empty ones. */\nfunction joinIds(...ids: Array<string | undefined | false>): string | undefined {\n  const joined = ids.filter(Boolean).join(' ')\n  return joined === '' ? undefined : joined\n}\n\n/** The props a native control takes from the field it sits in, merged with its own. */\nfunction useFieldWiring(own: { id?: string; 'aria-describedby'?: string; 'aria-invalid'?: InputHTMLAttributes<HTMLInputElement>['aria-invalid'] }, extraDescribedBy?: string) {\n  const field = useContext(FieldContext)\n  return {\n    id: own.id ?? field?.controlId,\n    'aria-describedby': joinIds(field?.describedBy, extraDescribedBy, own['aria-describedby']),\n    'aria-invalid': own['aria-invalid'] ?? (field?.invalid ? true : undefined),\n  }\n}\n\nexport interface BackdropFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** \"Company name\". Programmatically tied to the control inside. */\n  label: ReactNode\n  /** The control: a BackdropInput, BackdropTextarea, BackdropSelect or BackdropSearchField. */\n  children: ReactNode\n  /** The muted suffix after the label: \"optional\" (drawn \"· optional\"). */\n  optionalLabel?: string\n  /** One line of help under the control. Hidden while there is an error. */\n  hint?: ReactNode\n  /** What is wrong, in the danger colour with the warning icon. Replaces the hint and marks the control invalid. */\n  error?: ReactNode\n  /** The control's id. Generated when omitted. */\n  controlId?: string\n}\n\n/*\n * Label 13/18 500 above the control, hint 13/18 muted below it. An error takes\n * the hint's place rather than stacking under it, so the field does not grow\n * by a line when it goes wrong; the hint is the thing the error corrects.\n */\nexport function BackdropField({ label, children, optionalLabel, hint, error, controlId, className, ...rest }: BackdropFieldProps) {\n  const generated = useId()\n  const id = controlId ?? `${generated}-control`\n  const hintId = `${id}-hint`\n  const errorId = `${id}-error`\n  const hasError = error !== undefined && error !== null && error !== false\n  const describedBy = hasError ? errorId : hint !== undefined ? hintId : undefined\n  return (\n    <div className={cx(styles.field, className)} {...rest}>\n      <label htmlFor={id} className={styles.label}>\n        {label}\n        {optionalLabel !== undefined && (\n          <span className={styles.optional}>\n            <span aria-hidden=\"true\">·</span> {optionalLabel}\n          </span>\n        )}\n      </label>\n      <FieldContext.Provider value={{ controlId: id, describedBy, invalid: hasError }}>{children}</FieldContext.Provider>\n      {hasError ? (\n        <p id={errorId} className={styles.error}>\n          <span className={styles.errorIcon}>\n            <AlertCircle />\n          </span>\n          <span>{error}</span>\n        </p>\n      ) : (\n        hint !== undefined && (\n          <p id={hintId} className={styles.hint}>\n            {hint}\n          </p>\n        )\n      )}\n    </div>\n  )\n}\n\n/* ── Input ─────────────────────────────────────────────────────────────── */\n\nexport interface BackdropInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** A 16px icon before the text (ADR-0017, D17). Decorative. */\n  leadingIcon?: ReactNode\n  /** A unit after the text: \"€\", \"staff\", \"per channel\". Read out with the field as its description. */\n  suffix?: ReactNode\n  /** 44px instead of 40, for focus flows only (ADR-0017, D9). */\n  focusFlow?: boolean\n}\n\n/*\n * The box is a span around the native input, so the leading icon and the unit\n * sit inside the ring. It draws the focus ring when the input inside has\n * keyboard-or-text focus (:focus-visible), the read-only and disabled looks\n * from the input's own attributes, and the danger edge from aria-invalid.\n */\nexport function BackdropInput({ leadingIcon, suffix, focusFlow = false, className, type = 'text', ...rest }: BackdropInputProps) {\n  const suffixId = `${useId()}-suffix`\n  const hasSuffix = suffix !== undefined && suffix !== null\n  const wiring = useFieldWiring(rest, hasSuffix ? suffixId : undefined)\n  return (\n    <span className={cx(styles.control, focusFlow && styles.focusFlow, className)}>\n      {leadingIcon !== undefined && (\n        <span className={styles.leading} aria-hidden=\"true\">\n          {leadingIcon}\n        </span>\n      )}\n      <input type={type} {...rest} {...wiring} className={styles.input} />\n      {hasSuffix && (\n        <span id={suffixId} className={styles.suffix}>\n          {suffix}\n        </span>\n      )}\n    </span>\n  )\n}\n\n/* ── Textarea ──────────────────────────────────────────────────────────── */\n\n/**\n * `md` (default) is the form textarea. `lg` is the free-writing box at the\n * head of a create page (Content \"New post\", Off-market \"New introduction\"):\n * 20/32 text, radius 16, roomier padding (Batch 4, N27).\n */\nexport type BackdropTextareaSize = 'md' | 'lg'\n\nexport interface BackdropTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: BackdropTextareaSize\n  /**\n   * Content inside the box's ring, under the text: an \"Add a link or file\"\n   * text link, a block of pasted details. With it, or with `size=\"lg\"`, the\n   * ring moves from the <textarea> to a box around it; `className` then goes\n   * on that box and every other prop still reaches the <textarea>.\n   */\n  footer?: ReactNode\n}\n\n/** The input's ring, radius and padding. Three rows at least; it grows by hand (resize: vertical). */\nexport function BackdropTextarea({ className, rows = 3, size = 'md', footer, ...rest }: BackdropTextareaProps) {\n  const wiring = useFieldWiring(rest)\n  const hasFooter = footer !== undefined && footer !== null && footer !== false\n  if (size !== 'lg' && !hasFooter) {\n    return <textarea rows={Math.max(3, rows)} {...rest} {...wiring} className={cx(styles.textarea, className)} />\n  }\n  /* The box draws the ring, the focus outline (from the <textarea>'s\n     :focus-visible), the invalid and disabled looks; the <textarea> inside is\n     bare. The footer is content, not a control of the field's own. */\n  return (\n    <div className={cx(styles.textareaBox, size === 'lg' && styles.textareaBoxLg, className)}>\n      <textarea rows={Math.max(3, rows)} {...rest} {...wiring} className={styles.textareaBare} />\n      {hasFooter && <div className={styles.textareaFooter}>{footer}</div>}\n    </div>\n  )\n}\n\n/* ── Select ────────────────────────────────────────────────────────────── */\n\n/**\n * `field` is the 40px form select, drawn exactly like the input. `pill` is the\n * list filter (\"All types\", \"Last 12 weeks\"): the filter chip's 34px height and\n * full radius, so it sits level in a row of chips (ADR-0017, D11).\n */\nexport type BackdropSelectAppearance = 'field' | 'pill'\n\nexport interface BackdropSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  appearance?: BackdropSelectAppearance\n  /** 44px instead of 40, for focus flows only. `field` only. */\n  focusFlow?: boolean\n  /** <option> elements. */\n  children: ReactNode\n}\n\n/*\n * A native <select>. The browser's own arrow is removed and the package's 16px\n * chevron drawn over the box's right edge, under the pointer so a click still\n * reaches the select. The open list is the platform's, in Stage A and after.\n */\nexport function BackdropSelect({ appearance = 'field', focusFlow = false, className, children, ...rest }: BackdropSelectProps) {\n  const wiring = useFieldWiring(rest)\n  const pill = appearance === 'pill'\n  return (\n    <span className={cx(styles.selectWrap, pill && styles.selectWrapPill, className)}>\n      <select {...rest} {...wiring} className={cx(styles.select, pill ? styles.selectPill : focusFlow && styles.focusFlow)}>\n        {children}\n      </select>\n      <span className={styles.chevron} aria-hidden=\"true\">\n        <ChevronDown />\n      </span>\n    </span>\n  )\n}\n\n/* ── Search field ──────────────────────────────────────────────────────── */\n\nexport interface BackdropSearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  /**\n   * The field's accessible name when it has no visible label (\"Search\n   * companies\"). Inside a BackdropField the field's label names it instead.\n   */\n  label?: string\n  /**\n   * Draws the clear button (×) at the end, named by this: \"Clear search\".\n   * Stage A: markup only. The press is wired in Stage B.\n   */\n  clearLabel?: string\n  /**\n   * `lg` (default) is the 40px input (D9). `md` is 34, with 14/20 text, for\n   * the bar above a list, where it sits beside the 34px filter button, chips\n   * and pill select (Jamal at the Batch 3 gate, 11 Nov). Form fields stay 40.\n   */\n  size?: 'lg' | 'md'\n}\n\n/** An in-page search box: the input's box with a 16px lens before the text. */\nexport function BackdropSearchField({ label, clearLabel, size = 'lg', className, ...rest }: BackdropSearchFieldProps) {\n  const wiring = useFieldWiring(rest)\n  return (\n    <span className={cx(styles.control, styles.search, size === 'md' && styles.searchMd, className)}>\n      <span className={styles.leading} aria-hidden=\"true\">\n        <Search size={16} />\n      </span>\n      <input type=\"search\" aria-label={label} {...rest} {...wiring} className={styles.input} />\n      {clearLabel !== undefined && (\n        <button type=\"button\" aria-label={clearLabel} className={styles.clear}>\n          <Close size={16} />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/* ── Switch ────────────────────────────────────────────────────────────── */\n\nexport interface BackdropSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> {\n  /** \"Email me when a meeting is booked\". 14/20 500, right of the track. */\n  label: ReactNode\n  /** One muted line under the label. */\n  description?: ReactNode\n}\n\n/*\n * A native checkbox with role=\"switch\", so on/off is the platform's checked\n * state and the keyboard (Space) is the platform's too. The input lies over\n * the 34x20 track at zero opacity; the track and thumb follow :checked.\n */\nexport function BackdropSwitch({ label, description, className, id, ...rest }: BackdropSwitchProps) {\n  const generated = useId()\n  const inputId = id ?? `${generated}-switch`\n  const descriptionId = `${inputId}-description`\n  const hasDescription = description !== undefined && description !== null\n  return (\n    <span className={cx(styles.switchRow, className)}>\n      <span className={styles.switchTrackSlot}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          id={inputId}\n          {...rest}\n          aria-describedby={joinIds(hasDescription && descriptionId, rest['aria-describedby'])}\n          className={styles.switchInput}\n        />\n        <span className={styles.switchTrack} aria-hidden=\"true\">\n          <span className={styles.switchThumb} />\n        </span>\n      </span>\n      <span className={styles.switchText}>\n        <label htmlFor={inputId} className={styles.switchLabel}>\n          {label}\n        </label>\n        {hasDescription && (\n          <span id={descriptionId} className={styles.switchDescription}>\n            {description}\n          </span>\n        )}\n      </span>\n    </span>\n  )\n}\n\n/* ── Radio group ───────────────────────────────────────────────────────── */\n\ninterface RadioGroupContextValue {\n  name?: string\n  invalid: boolean\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\ninterface BackdropRadioGroupBase extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'children'> {\n  /** The question: \"Who can see this?\". Drawn as the field label (13/18 500). */\n  legend: ReactNode\n  /** The radios' shared `name`, handed to every radio inside. */\n  name?: string\n  /** One line of help under the options. Hidden while there is an error. */\n  hint?: ReactNode\n  /** What is wrong. Replaces the hint and marks every radio invalid. */\n  error?: ReactNode\n  children: ReactNode\n}\n\nfunction RadioFieldset({\n  legend,\n  name,\n  hint,\n  error,\n  children,\n  className,\n  listClassName,\n  listStyle,\n  ...rest\n}: BackdropRadioGroupBase & { listClassName: string | undefined; listStyle?: CSSProperties }) {\n  const generated = useId()\n  const hintId = `${generated}-hint`\n  const errorId = `${generated}-error`\n  const hasError = error !== undefined && error !== null && error !== false\n  return (\n    <fieldset\n      {...rest}\n      aria-describedby={joinIds(hasError ? errorId : hint !== undefined && hintId, rest['aria-describedby'])}\n      className={cx(styles.fieldset, className)}\n    >\n      <legend className={styles.legend}>{legend}</legend>\n      <RadioGroupContext.Provider value={{ name, invalid: hasError }}>\n        <div className={listClassName} style={listStyle}>\n          {children}\n        </div>\n      </RadioGroupContext.Provider>\n      {hasError ? (\n        <p id={errorId} className={styles.error}>\n          <span className={styles.errorIcon}>\n            <AlertCircle />\n          </span>\n          <span>{error}</span>\n        </p>\n      ) : (\n        hint !== undefined && (\n          <p id={hintId} className={styles.hint}>\n            {hint}\n          </p>\n        )\n      )}\n    </fieldset>\n  )\n}\n\nexport type BackdropRadioGroupProps = BackdropRadioGroupBase\n\n/** Plain radios, one size, stacked, in a fieldset whose legend asks the question. */\nexport function BackdropRadioGroup(props: BackdropRadioGroupProps) {\n  return <RadioFieldset {...props} listClassName={styles.radioList} />\n}\n\nexport interface BackdropRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** \"Only my team\". 14/20 500. */\n  label: ReactNode\n  /** One muted line under the label. */\n  description?: ReactNode\n}\n\n/** One plain radio: an 18px circle (the checkbox's size), ink dot when chosen. */\nexport function BackdropRadio({ label, description, className, id, ...rest }: BackdropRadioProps) {\n  const group = useContext(RadioGroupContext)\n  const generated = useId()\n  const inputId = id ?? `${generated}-radio`\n  const descriptionId = `${inputId}-description`\n  const hasDescription = description !== undefined && description !== null\n  return (\n    <span className={cx(styles.radioRow, className)}>\n      <input\n        type=\"radio\"\n        id={inputId}\n        name={rest.name ?? group?.name}\n        {...rest}\n        aria-invalid={rest['aria-invalid'] ?? (group?.invalid ? true : undefined)}\n        aria-describedby={joinIds(hasDescription && descriptionId, rest['aria-describedby'])}\n        className={styles.radio}\n      />\n      <span className={styles.radioText}>\n        <label htmlFor={inputId} className={styles.radioLabel}>\n          {label}\n        </label>\n        {hasDescription && (\n          <span id={descriptionId} className={styles.radioDescription}>\n            {description}\n          </span>\n        )}\n      </span>\n    </span>\n  )\n}\n\n/* ── Radio card ────────────────────────────────────────────────────────── */\n\nexport interface BackdropRadioCardGroupProps extends BackdropRadioGroupBase {\n  /** 1 stacks the cards; 2 or more lays them out that many across, equal widths. */\n  columns?: number\n}\n\n/** Radio cards in a fieldset: stacked by default, or `columns` across. */\nexport function BackdropRadioCardGroup({ columns = 1, ...props }: BackdropRadioCardGroupProps) {\n  const across = Math.max(1, Math.floor(columns))\n  return (\n    <RadioFieldset\n      {...props}\n      listClassName={styles.cardList}\n      listStyle={across > 1 ? ({ '--backdrop-radio-card-columns': across } as CSSProperties) : undefined}\n    />\n  )\n}\n\nexport interface BackdropRadioCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'title'> {\n  /** \"Pay as you go\". 14/20 600. */\n  title: ReactNode\n  /** One or two muted lines. */\n  description?: ReactNode\n  /** An 18px icon, drawn in the 36px row tile (BackdropIconTile). Decorative. */\n  icon?: ReactNode\n}\n\n/*\n * The whole card is the radio's <label>, so a press anywhere on it chooses it.\n * Its name is the title alone (aria-labelledby); the description describes it.\n * Unchosen: a 1px hairline ring and an empty circle. Chosen: the selected stat\n * tile's 1.5px ink ring and a filled check. Both follow the native :checked\n * state, so a defaultChecked card renders chosen with no prop of ours.\n */\nexport function BackdropRadioCard({ title, description, icon, className, id, ...rest }: BackdropRadioCardProps) {\n  const group = useContext(RadioGroupContext)\n  const generated = useId()\n  const inputId = id ?? `${generated}-card`\n  const titleId = `${inputId}-title`\n  const descriptionId = `${inputId}-description`\n  const hasDescription = description !== undefined && description !== null\n  return (\n    <label htmlFor={inputId} className={cx(styles.card, className)}>\n      <input\n        type=\"radio\"\n        id={inputId}\n        name={rest.name ?? group?.name}\n        {...rest}\n        aria-labelledby={rest['aria-labelledby'] ?? titleId}\n        aria-invalid={rest['aria-invalid'] ?? (group?.invalid ? true : undefined)}\n        aria-describedby={joinIds(hasDescription && descriptionId, rest['aria-describedby'])}\n        className={styles.cardInput}\n      />\n      {icon !== undefined && <BackdropIconTile>{icon}</BackdropIconTile>}\n      <span className={styles.cardText}>\n        <span id={titleId} className={styles.cardTitle}>\n          {title}\n        </span>\n        {hasDescription && (\n          <span id={descriptionId} className={styles.cardDescription}>\n            {description}\n          </span>\n        )}\n      </span>\n      <span className={styles.cardIndicator} aria-hidden=\"true\">\n        <span className={styles.cardIndicatorOff}>\n          <Circle size={20} />\n        </span>\n        <span className={styles.cardIndicatorOn}>\n          <CheckCircleFilled size={20} />\n        </span>\n      </span>\n    </label>\n  )\n}\n"],"names":["FieldContext","createContext","joinIds","ids","joined","useFieldWiring","own","extraDescribedBy","field","useContext","BackdropField","label","children","optionalLabel","hint","error","controlId","className","rest","generated","useId","id","hintId","errorId","hasError","describedBy","jsxs","cx","styles","jsx","AlertCircle","BackdropInput","leadingIcon","suffix","focusFlow","type","suffixId","hasSuffix","wiring","BackdropTextarea","rows","size","footer","hasFooter","BackdropSelect","appearance","pill","ChevronDown","BackdropSearchField","clearLabel","Search","Close","BackdropSwitch","description","inputId","descriptionId","hasDescription","RadioGroupContext","RadioFieldset","legend","name","listClassName","listStyle","BackdropRadioGroup","props","BackdropRadio","group","BackdropRadioCardGroup","columns","across","BackdropRadioCard","title","icon","titleId","BackdropIconTile","Circle","CheckCircleFilled"],"mappings":"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"}

package/dist/components/Backdrop/BackdropFields.module.css.js

@@ -0,0 +1,104 @@
+const t = "_field_85y0y_5", c = "_label_85y0y_15", _ = "_legend_85y0y_16", o = "_optional_85y0y_24", r = "_hint_85y0y_30", e = "_error_85y0y_31", a = "_errorIcon_85y0y_50", s = "_control_85y0y_61", i = "_focusFlow_85y0y_76", n = "_input_85y0y_80", y = "_leading_85y0y_135", d = "_suffix_85y0y_146", l = "_search_85y0y_154", h = "_clear_85y0y_158", x = "_searchMd_85y0y_163", w = "_textarea_85y0y_200", p = "_textareaBox_85y0y_248", f = "_textareaBoxLg_85y0y_266", T = "_textareaBare_85y0y_272", u = "_textareaFooter_85y0y_323", I = "_selectWrap_85y0y_332", L = "_selectWrapPill_85y0y_339", b = "_select_85y0y_332", g = "_selectPill_85y0y_369", B = "_chevron_85y0y_400", D = "_switchRow_85y0y_416", k = "_switchTrackSlot_85y0y_424", F = "_switchInput_85y0y_433", O = "_switchTrack_85y0y_424", P = "_switchThumb_85y0y_458", R = "_switchText_85y0y_492", W = "_radioText_85y0y_493", m = "_switchLabel_85y0y_501", v = "_radioLabel_85y0y_502", M = "_switchDescription_85y0y_509", S = "_radioDescription_85y0y_510", j = "_radioRow_85y0y_517", q = "_radio_85y0y_493", z = "_fieldset_85y0y_524", A = "_radioList_85y0y_540", C = "_cardList_85y0y_597", E = "_card_85y0y_597", G = "_cardInput_85y0y_621", H = "_cardText_85y0y_654", J = "_cardTitle_85y0y_662", K = "_cardDescription_85y0y_668", N = "_cardIndicator_85y0y_678", Q = "_cardIndicatorOff_85y0y_683", U = "_cardIndicatorOn_85y0y_688", V = {
+  field: t,
+  label: c,
+  legend: _,
+  optional: o,
+  hint: r,
+  error: e,
+  errorIcon: a,
+  control: s,
+  focusFlow: i,
+  input: n,
+  leading: y,
+  suffix: d,
+  search: l,
+  clear: h,
+  searchMd: x,
+  textarea: w,
+  textareaBox: p,
+  textareaBoxLg: f,
+  textareaBare: T,
+  textareaFooter: u,
+  selectWrap: I,
+  selectWrapPill: L,
+  select: b,
+  selectPill: g,
+  chevron: B,
+  switchRow: D,
+  switchTrackSlot: k,
+  switchInput: F,
+  switchTrack: O,
+  switchThumb: P,
+  switchText: R,
+  radioText: W,
+  switchLabel: m,
+  radioLabel: v,
+  switchDescription: M,
+  radioDescription: S,
+  radioRow: j,
+  radio: q,
+  fieldset: z,
+  radioList: A,
+  cardList: C,
+  card: E,
+  cardInput: G,
+  cardText: H,
+  cardTitle: J,
+  cardDescription: K,
+  cardIndicator: N,
+  cardIndicatorOff: Q,
+  cardIndicatorOn: U
+};
+export {
+  E as card,
+  K as cardDescription,
+  N as cardIndicator,
+  Q as cardIndicatorOff,
+  U as cardIndicatorOn,
+  G as cardInput,
+  C as cardList,
+  H as cardText,
+  J as cardTitle,
+  B as chevron,
+  h as clear,
+  s as control,
+  V as default,
+  e as error,
+  a as errorIcon,
+  t as field,
+  z as fieldset,
+  i as focusFlow,
+  r as hint,
+  n as input,
+  c as label,
+  y as leading,
+  _ as legend,
+  o as optional,
+  q as radio,
+  S as radioDescription,
+  v as radioLabel,
+  A as radioList,
+  j as radioRow,
+  W as radioText,
+  l as search,
+  x as searchMd,
+  b as select,
+  g as selectPill,
+  I as selectWrap,
+  L as selectWrapPill,
+  d as suffix,
+  M as switchDescription,
+  F as switchInput,
+  m as switchLabel,
+  D as switchRow,
+  R as switchText,
+  P as switchThumb,
+  O as switchTrack,
+  k as switchTrackSlot,
+  w as textarea,
+  T as textareaBare,
+  p as textareaBox,
+  f as textareaBoxLg,
+  u as textareaFooter
+};
+//# sourceMappingURL=BackdropFields.module.css.js.map

package/dist/components/Backdrop/BackdropFields.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropFields.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropFlows.d.ts

@@ -0,0 +1,128 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { BackdropPageAction } from './BackdropPage';
+import { BackdropStep } from './BackdropGlobalPanels';
+/**
+ * `columns` (default): the label in a 200px column beside the control
+ * (--backdrop-settings-label-width). `stacked`: the label above the control,
+ * for a container too narrow for a column (a 480px form dialog).
+ */
+export type BackdropSettingsRowLayout = 'columns' | 'stacked';
+export interface BackdropSettingsRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The setting's name: "Daily limit". 15/22, semibold. */
+    label: ReactNode;
+    /** One line under the name: "Messages sent per channel each day." 14/20, muted. */
+    description?: ReactNode;
+    /**
+     * The id of the control this row labels. With it the name renders as a
+     * `<label htmlFor>`, so a native control is named by it, and the row is not
+     * also a group (the name would be read twice). The description's id is then
+     * `${htmlFor}-description`, for the control's `aria-describedby`. Without it
+     * the name is a plain span and the row names itself as a group, described
+     * by the description.
+     */
+    htmlFor?: string;
+    /** The control: an input, a select, a switch, a value. */
+    children?: ReactNode;
+    /** One trailing action after the control: "Change", "Disconnect". An outline button at 34px. */
+    action?: BackdropPageAction;
+    layout?: BackdropSettingsRowLayout;
+    /**
+     * `center` (default) centres the label on the control, right for a 40px
+     * input or a switch. `start` tops them, for a tall control (a text area).
+     */
+    align?: 'center' | 'start';
+    linkComponent?: ElementType;
+}
+export declare function BackdropSettingsRow({ label, description, htmlFor, children, action, layout, align, linkComponent, className, ...rest }: BackdropSettingsRowProps): import("react").JSX.Element;
+export interface BackdropSettingsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** The section's name: "Sending". Drawn by BackdropSectionHeader. */
+    title: ReactNode;
+    /** One line under the name: "Added to the end of every email." 14/20, muted. */
+    description?: ReactNode;
+    /** A trailing link in the header: "Reset to defaults". */
+    action?: BackdropPageAction;
+    /** 2 under a page title (default), 3 inside a settings dialog, whose title is the h2. Size does not change. */
+    level?: 2 | 3;
+    /** BackdropSettingsRow elements. */
+    children: ReactNode;
+    linkComponent?: ElementType;
+}
+/** A `<section>` named by its heading, holding a run of ruled rows. */
+export declare function BackdropSettingsSection({ title, description, action, level, children, linkComponent, className, ...rest }: BackdropSettingsSectionProps): import("react").JSX.Element;
+export interface BackdropSaveFooterProps {
+    /** "Cancel": a ghost button. */
+    cancel: BackdropPageAction;
+    /** "Save": ink by default, the primary inside a dialog. */
+    save: BackdropPageAction;
+    /**
+     * `ink` (default) as in a dialog. `primary` is the screen's one orange
+     * action, for a settings page with no other primary on it.
+     */
+    emphasis?: 'ink' | 'primary';
+    /** A short fact at the start of the bar: "Unsaved changes". Muted. */
+    status?: ReactNode;
+    /** The save is in progress: Save shows the button's spinner and `aria-busy`. */
+    busy?: boolean;
+    /** Nothing to save yet. */
+    saveDisabled?: boolean;
+    /**
+     * `bar` (default): its own white bar with a hairline above, padded 16 / 24.
+     * `plain`: the two buttons only, to pass as BackdropDialog's `footer`, which
+     * draws the bar itself.
+     */
+    appearance?: 'bar' | 'plain';
+    /** `bar` only: stick to the bottom of the scrolling container. */
+    sticky?: boolean;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropSaveFooter({ cancel, save, emphasis, status, busy, saveDisabled, appearance, sticky, linkComponent, className, }: BackdropSaveFooterProps): import("react").JSX.Element;
+export interface BackdropFlowHeaderProps {
+    /** The app's 32px mark. Decorative: the flow's name follows it. */
+    mark?: ReactNode;
+    /** The flow's name: "Outbound setup". */
+    flowName: ReactNode;
+    /** The steps, drawn by BackdropStepList as the horizontal stepper in the bar's middle. */
+    steps?: BackdropStep[];
+    /** The stepper's accessible name ("Setup steps"). Required with `steps`. */
+    stepsLabel?: string;
+    /** The position, formatted by the caller: "Step 2 of 4". Above the title. */
+    stepText?: ReactNode;
+    /** The step's title. The page's one h1, at the 40px focus-flow size (ADR-0017, D1). */
+    title?: ReactNode;
+    /** One line under the title. */
+    description?: ReactNode;
+    /** The exit button's name ("Exit setup"). Omit to draw no exit. Stage B wires it. */
+    exitLabel?: string;
+    className?: string;
+}
+export declare function BackdropFlowHeader({ mark, flowName, steps, stepsLabel, stepText, title, description, exitLabel, className, }: BackdropFlowHeaderProps): import("react").JSX.Element;
+/** The outcome's tone, in the status pill's colours (ADR-0017, D7). */
+export type BackdropResultTone = 'success' | 'danger' | 'neutral';
+/** One line of the details card: "Amount" · "€1,200.00". */
+export interface BackdropResultDetail {
+    key: string;
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface BackdropResultProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    tone?: BackdropResultTone;
+    /** 20px (ADR-0017, D17), drawn in the 48px circle: a check, a cross, an hourglass. Decorative. */
+    icon: ReactNode;
+    /** "Payment received". The page's h1 by default. */
+    title: ReactNode;
+    /** One line: "€1,200 is now in your wallet." */
+    body?: ReactNode;
+    /** Key-value lines in a flat card under the body. */
+    details?: BackdropResultDetail[];
+    /** The details list's accessible name ("Payment details"). */
+    detailsLabel?: string;
+    /** The main next step: the screen's orange button. */
+    primaryAction?: BackdropPageAction;
+    /** A second, quieter step: an outline button after the first. */
+    secondaryAction?: BackdropPageAction;
+    /** 1 (default) on its own page; 2 inside a dialog or under another title. Size does not change. */
+    headingLevel?: 1 | 2;
+    linkComponent?: ElementType;
+}
+export declare function BackdropResult({ tone, icon, title, body, details, detailsLabel, primaryAction, secondaryAction, headingLevel, linkComponent, className, ...rest }: BackdropResultProps): import("react").JSX.Element;