@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,159 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t, responsiveVars as n } from "../../../utils/responsive.js";
+import { hiddenInputs as r, useControllableValue as i, useFocusLeave as a } from "./choice.js";
+import { FieldContext as o, markFieldAware as s, useResolvedField as c } from "../internal/FieldContext.js";
+import l from "../internal/messages.module.js";
+import { Checkbox as u } from "../Checkbox/Checkbox.js";
+import d from "./CheckboxGroup.module.js";
+import { Children as f, createContext as p, forwardRef as m, isValidElement as h, useCallback as g, useContext as _, useId as v, useMemo as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/inputs/CheckboxGroup/CheckboxGroup.tsx
+var S = p(null);
+function C({ label: t, description: n, disabled: r, readOnly: i, size: a, checked: o, onCheckedChange: s, id: c, className: f, select: p }) {
+	let m = v(), h = c ?? `${m}checkbox`, g = `${h}-description`;
+	return /* @__PURE__ */ x("div", {
+		className: e(d.item, f),
+		"data-disabled": r || void 0,
+		"data-select-all": p ? !0 : void 0,
+		children: [/* @__PURE__ */ b("span", {
+			className: d.slot,
+			children: /* @__PURE__ */ b(u, {
+				id: h,
+				size: a,
+				checked: o,
+				disabled: r,
+				readOnly: i,
+				"aria-describedby": n == null ? void 0 : g,
+				onCheckedChange: (e) => {
+					s(e === !0);
+				}
+			})
+		}), /* @__PURE__ */ x("span", {
+			className: d.text,
+			children: [/* @__PURE__ */ b("label", {
+				htmlFor: h,
+				className: d.label,
+				children: t
+			}), n == null ? null : /* @__PURE__ */ b("span", {
+				id: g,
+				className: l.description,
+				children: n
+			})]
+		})]
+	});
+}
+function w({ value: e, label: t, description: n, disabled: r = !1, id: i, className: a }) {
+	let o = _(S);
+	if (!o) throw Error("CheckboxGroup.Item must be rendered inside a CheckboxGroup");
+	return /* @__PURE__ */ b(C, {
+		id: i,
+		className: a,
+		label: t,
+		description: n,
+		disabled: o.disabled || r,
+		readOnly: o.readOnly,
+		size: o.size,
+		checked: o.values.includes(e),
+		onCheckedChange: (t) => {
+			o.toggle(e, t);
+		}
+	});
+}
+function T(e) {
+	let t = [];
+	return f.forEach(e, (e) => {
+		h(e) && typeof e.props.value == "string" && t.push({
+			value: e.props.value,
+			disabled: e.props.disabled === !0
+		});
+	}), t;
+}
+var E = (e) => `repeat(${String(e)}, minmax(0, 1fr))`, D = [], O = m(function({ options: s, children: l, value: u, defaultValue: f, onValueChange: p, orientation: m = "vertical", columns: h, selectAllLabel: _, name: v, disabled: O, readOnly: k, invalid: A, size: j = "md", className: M, style: N, onBlur: P, "aria-describedby": F, "aria-invalid": I, "aria-labelledby": L, ...R }, z) {
+	let B = c({
+		describedBy: F,
+		invalid: A,
+		ariaInvalid: I,
+		disabled: O,
+		readOnly: k
+	}), [V, H] = i(u, f ?? D, p && ((e) => {
+		p([...e]);
+	}), B.readOnly), U = a(P), W = y(() => s ? s.map((e) => ({
+		value: e.value,
+		disabled: e.disabled === !0
+	})) : T(l), [s, l]), G = g((e, t) => {
+		let n = t ? V.includes(e) ? [...V] : [...V, e] : V.filter((t) => t !== e), r = W.map((e) => e.value);
+		n.sort((e, t) => {
+			let n = r.indexOf(e), i = r.indexOf(t);
+			return (n === -1 ? Infinity : n) - (i === -1 ? Infinity : i);
+		}), H(n);
+	}, [
+		V,
+		H,
+		W
+	]), K = y(() => ({
+		values: V,
+		toggle: G,
+		disabled: B.disabled,
+		readOnly: B.readOnly,
+		size: j
+	}), [
+		V,
+		G,
+		B.disabled,
+		B.readOnly,
+		j
+	]), q = null;
+	if (_ != null) {
+		let e = W.filter((e) => !e.disabled).map((e) => e.value), t = e.filter((e) => V.includes(e)).length, n = e.length > 0 && t === e.length || t > 0 && "indeterminate";
+		q = /* @__PURE__ */ b(C, {
+			select: !0,
+			label: _,
+			disabled: B.disabled || e.length === 0,
+			readOnly: B.readOnly,
+			size: j,
+			checked: n,
+			onCheckedChange: () => {
+				let t = V.filter((t) => !e.includes(t));
+				H(n === !0 ? t : [...t, ...e]);
+			}
+		});
+	}
+	let J = h === void 0 ? m : "columns";
+	return /* @__PURE__ */ x("div", {
+		ref: z,
+		role: "group",
+		className: e(d.group, M),
+		"data-orientation": m,
+		"data-size": j,
+		"data-invalid": B.invalid || void 0,
+		"data-disabled": B.disabled || void 0,
+		"data-readonly": B.readOnly || void 0,
+		"aria-labelledby": L ?? (R["aria-label"] ? void 0 : B.groupLabelId),
+		"aria-describedby": B.describedBy,
+		"aria-invalid": B.invalid || void 0,
+		"aria-busy": B.busy || void 0,
+		style: t(n("checkbox-group-columns", h, E), N),
+		onBlur: U,
+		...R,
+		children: [/* @__PURE__ */ b(o.Provider, {
+			value: null,
+			children: /* @__PURE__ */ x(S.Provider, {
+				value: K,
+				children: [q, /* @__PURE__ */ b("div", {
+					className: d.items,
+					"data-layout": J,
+					children: s ? s.map((e) => /* @__PURE__ */ b(w, {
+						value: e.value,
+						label: e.label,
+						description: e.description,
+						disabled: e.disabled
+					}, e.value)) : l
+				})]
+			})
+		}), r(v, V, B.disabled)]
+	});
+}), k = s(Object.assign(O, { Item: w }));
+//#endregion
+export { k as CheckboxGroup };
+
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/inputs/CheckboxGroup/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","names":["styles","messageStyles","messages_module_default","CheckboxGroup_module_default","GroupContext","createContext","ItemView","idProp","autoId","useId","id","descriptionId","cx","className","disabled","select","Checkbox","description","state","label","CheckboxGroupItem","group","useContext","value","checked","childOptions","found","Children","children","isValidElement","child","tracks","n","EMPTY","CheckboxGroupRoot","forwardRef","valueProp","disabledProp","readOnlyProp","invalidProp","describedByProp","ariaInvalid","labelledByProp","rest","field","useResolvedField","values","setValues","useControllableValue","defaultValue","onValueChange","next","handleBlur","useFocusLeave","onBlur","all","useMemo","options","o","toggle","useCallback","v","x","order","ia","a","ib","b","context","size","selectAll","selectAllLabel","enabled","checkedCount","locked","layout","columns","orientation","mergeStyles","responsiveVars","style","FieldContext","hiddenInputs","name","CheckboxGroup","markFieldAware"],"sources":["../../../../src/components/inputs/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport type { Size } from '#utils/tokens'\nimport { Checkbox } from '#components/inputs/Checkbox'\nimport {\n  FieldContext,\n  markFieldAware,\n  useResolvedField,\n} from '#components/inputs/internal/FieldContext'\nimport messageStyles from '#components/inputs/internal/messages.module.css'\nimport { hiddenInputs, useControllableValue, useFocusLeave, type ChoiceOption } from './choice'\nimport styles from './CheckboxGroup.module.css'\n\nexport type CheckboxGroupColumns = 1 | 2 | 3\n\nexport interface CheckboxGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Options as data. Alternatively pass `<CheckboxGroup.Item>` children. */\n  options?: readonly ChoiceOption[]\n  children?: ReactNode\n  /** Controlled checked values. */\n  value?: readonly string[]\n  defaultValue?: readonly string[]\n  onValueChange?: (value: string[]) => void\n  /** `vertical` (default) stacks the options; `horizontal` runs them in a wrapping row. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Lay the options out in 1–3 equal columns (wins over `orientation`). Responsive. */\n  columns?: Responsive<CheckboxGroupColumns>\n  /** Adds a tri-state \"select all\" checkbox above the options, with this label. */\n  selectAllLabel?: string\n  /** Emits one hidden input per checked value, so FormData sees every choice. */\n  name?: string\n  disabled?: boolean\n  /** Focusable but not editable: every box sets `aria-readonly` and clicks are ignored. */\n  readOnly?: boolean\n  /** Critical edge on the unchecked boxes. Inside a `<Fieldset error>` this is set for you. */\n  invalid?: boolean\n  size?: Size\n}\n\nexport interface CheckboxGroupItemProps {\n  value: string\n  label: ReactNode\n  description?: ReactNode\n  disabled?: boolean\n  /** Id for the checkbox. Defaults to a generated one. */\n  id?: string\n  className?: string\n}\n\ninterface GroupContextValue {\n  values: readonly string[]\n  toggle: (value: string, checked: boolean) => void\n  disabled: boolean\n  readOnly: boolean\n  size: Size\n}\n\nconst GroupContext = createContext<GroupContextValue | null>(null)\n\ninterface ItemViewProps {\n  label: ReactNode\n  description?: ReactNode\n  disabled: boolean\n  readOnly: boolean\n  size: Size\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (checked: boolean) => void\n  id?: string\n  className?: string\n  select?: boolean\n}\n\nfunction ItemView({\n  label,\n  description,\n  disabled,\n  readOnly,\n  size,\n  checked,\n  onCheckedChange,\n  id: idProp,\n  className,\n  select,\n}: ItemViewProps) {\n  const autoId = useId()\n  const id = idProp ?? `${autoId}checkbox`\n  const descriptionId = `${id}-description`\n  return (\n    <div\n      className={cx(styles.item, className)}\n      data-disabled={disabled || undefined}\n      data-select-all={select ? true : undefined}\n    >\n      <span className={styles.slot}>\n        <Checkbox\n          id={id}\n          size={size}\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-describedby={description != null ? descriptionId : undefined}\n          onCheckedChange={(state) => {\n            onCheckedChange(state === true)\n          }}\n        />\n      </span>\n      <span className={styles.text}>\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n        {description != null ? (\n          <span id={descriptionId} className={messageStyles.description}>\n            {description}\n          </span>\n        ) : null}\n      </span>\n    </div>\n  )\n}\n\n/** One option. Must be a direct child of `CheckboxGroup` (so \"select all\" can count it). */\nfunction CheckboxGroupItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  id,\n  className,\n}: CheckboxGroupItemProps) {\n  const group = useContext(GroupContext)\n  if (!group) throw new Error('CheckboxGroup.Item must be rendered inside a CheckboxGroup')\n  return (\n    <ItemView\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      disabled={group.disabled || disabled}\n      readOnly={group.readOnly}\n      size={group.size}\n      checked={group.values.includes(value)}\n      onCheckedChange={(checked) => {\n        group.toggle(value, checked)\n      }}\n    />\n  )\n}\n\nfunction childOptions(children: ReactNode): { value: string; disabled: boolean }[] {\n  const found: { value: string; disabled: boolean }[] = []\n  Children.forEach(children, (child) => {\n    if (\n      isValidElement<Partial<CheckboxGroupItemProps>>(child) &&\n      typeof child.props.value === 'string'\n    ) {\n      found.push({ value: child.props.value, disabled: child.props.disabled === true })\n    }\n  })\n  return found\n}\n\nconst tracks = (n: CheckboxGroupColumns): string => `repeat(${String(n)}, minmax(0, 1fr))`\nconst EMPTY: readonly string[] = []\n\n/**\n * Several independent choices from a short list (\"Notify me about\"). A `role=\"group\"`\n * labelled by the surrounding `<Fieldset>` legend (or `<Field>` label, or `aria-label`);\n * each option is a real checkbox, so Tab visits each one and Space toggles it.\n *\n * <Fieldset legend=\"Notify me about\">\n *   <CheckboxGroup name=\"notify\" options={topics} selectAllLabel=\"Everything\" />\n * </Fieldset>\n */\nconst CheckboxGroupRoot = forwardRef<HTMLDivElement, CheckboxGroupProps>(function CheckboxGroup(\n  {\n    options,\n    children,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    orientation = 'vertical',\n    columns,\n    selectAllLabel,\n    name,\n    disabled: disabledProp,\n    readOnly: readOnlyProp,\n    invalid: invalidProp,\n    size = 'md',\n    className,\n    style,\n    onBlur,\n    'aria-describedby': describedByProp,\n    'aria-invalid': ariaInvalid,\n    'aria-labelledby': labelledByProp,\n    ...rest\n  },\n  ref,\n) {\n  const field = useResolvedField({\n    describedBy: describedByProp,\n    invalid: invalidProp,\n    ariaInvalid,\n    disabled: disabledProp,\n    readOnly: readOnlyProp,\n  })\n  const [values, setValues] = useControllableValue<readonly string[]>(\n    valueProp,\n    defaultValue ?? EMPTY,\n    onValueChange &&\n      ((next) => {\n        onValueChange([...next])\n      }),\n    field.readOnly,\n  )\n  const handleBlur = useFocusLeave(onBlur)\n\n  const all = useMemo(\n    () =>\n      options\n        ? options.map((o) => ({ value: o.value, disabled: o.disabled === true }))\n        : childOptions(children),\n    [options, children],\n  )\n\n  const toggle = useCallback(\n    (v: string, checked: boolean) => {\n      const next = checked\n        ? values.includes(v)\n          ? [...values]\n          : [...values, v]\n        : values.filter((x) => x !== v)\n      // Keep option order, whatever order they were ticked in.\n      const order = all.map((o) => o.value)\n      next.sort((a, b) => {\n        const ia = order.indexOf(a)\n        const ib = order.indexOf(b)\n        return (ia === -1 ? Infinity : ia) - (ib === -1 ? Infinity : ib)\n      })\n      setValues(next)\n    },\n    [values, setValues, all],\n  )\n\n  const context = useMemo<GroupContextValue>(\n    () => ({\n      values,\n      toggle,\n      disabled: field.disabled,\n      readOnly: field.readOnly,\n      size,\n    }),\n    [values, toggle, field.disabled, field.readOnly, size],\n  )\n\n  let selectAll: ReactNode = null\n  if (selectAllLabel != null) {\n    const enabled = all.filter((o) => !o.disabled).map((o) => o.value)\n    const checkedCount = enabled.filter((v) => values.includes(v)).length\n    const state =\n      enabled.length > 0 && checkedCount === enabled.length\n        ? true\n        : checkedCount > 0\n          ? 'indeterminate'\n          : false\n    selectAll = (\n      <ItemView\n        select\n        label={selectAllLabel}\n        disabled={field.disabled || enabled.length === 0}\n        readOnly={field.readOnly}\n        size={size}\n        checked={state}\n        onCheckedChange={() => {\n          // Disabled options keep whatever state they had.\n          const locked = values.filter((v) => !enabled.includes(v))\n          setValues(state === true ? locked : [...locked, ...enabled])\n        }}\n      />\n    )\n  }\n\n  const layout = columns !== undefined ? 'columns' : orientation\n\n  return (\n    // aria-invalid on the group, not on each checkbox: the error belongs to the set.\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <div\n      ref={ref}\n      role=\"group\"\n      className={cx(styles.group, className)}\n      data-orientation={orientation}\n      data-size={size}\n      data-invalid={field.invalid || undefined}\n      data-disabled={field.disabled || undefined}\n      data-readonly={field.readOnly || undefined}\n      aria-labelledby={labelledByProp ?? (rest['aria-label'] ? undefined : field.groupLabelId)}\n      aria-describedby={field.describedBy}\n      aria-invalid={field.invalid || undefined}\n      aria-busy={field.busy || undefined}\n      style={mergeStyles(responsiveVars('checkbox-group-columns', columns, tracks), style)}\n      onBlur={handleBlur}\n      {...rest}\n    >\n      {/* Options wire their own ids and descriptions; they must not inherit the Field's. */}\n      <FieldContext.Provider value={null}>\n        <GroupContext.Provider value={context}>\n          {selectAll}\n          <div className={styles.items} data-layout={layout}>\n            {options\n              ? options.map((o) => (\n                  <CheckboxGroupItem\n                    key={o.value}\n                    value={o.value}\n                    label={o.label}\n                    description={o.description}\n                    disabled={o.disabled}\n                  />\n                ))\n              : children}\n          </div>\n        </GroupContext.Provider>\n      </FieldContext.Provider>\n      {hiddenInputs(name, values, field.disabled)}\n    </div>\n  )\n})\n\nexport const CheckboxGroup = markFieldAware(\n  Object.assign(CheckboxGroupRoot, { Item: CheckboxGroupItem }),\n)\n\n// Re-exported so consumers of the choice controls can type their option lists.\nexport type { ChoiceOption } from './choice'\n"],"mappings":"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"}

package/dist/components/inputs/CheckboxGroup/CheckboxGroup.module.js

@@ -0,0 +1,13 @@
+//#region src/components/inputs/CheckboxGroup/CheckboxGroup.module.css
+var e = "kiln-CheckboxGroup__group", t = "kiln-CheckboxGroup__items", n = "kiln-CheckboxGroup__item", r = "kiln-CheckboxGroup__label", i = "kiln-CheckboxGroup__slot", a = "kiln-CheckboxGroup__text", o = {
+	group: e,
+	items: t,
+	item: n,
+	label: r,
+	slot: i,
+	text: a
+};
+//#endregion
+export { o as default, e as group, n as item, t as items, r as label, i as slot, a as text };
+
+//# sourceMappingURL=CheckboxGroup.module.js.map

package/dist/components/inputs/CheckboxGroup/CheckboxGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.module.js","names":["group","items","item","label","slot","text","CheckboxGroup_module_default"],"sources":["../../../../src/components/inputs/CheckboxGroup/CheckboxGroup.module.css"],"sourcesContent":["/*\n * A list of checkboxes. No box — the group is grouping, not a surface.\n *\n * [■] Select all             ← optional; sits over a hairline, apart from the options\n * ─────────────\n * [✓] Mentions\n *     When someone tags you in a comment\n * [ ] Assigned tasks\n *\n * Component tokens:\n *   --checkbox-group-gap       default var(--space-3) — between options\n *   --checkbox-group-rule      default var(--color-line) — under \"select all\"\n * Invalid re-points Checkbox's public `--control-border` token for the unchecked boxes\n * (checked boxes use `--control-checked-border`, so they keep the accent).\n *\n * Responsive `columns`: see layout/Stack/Stack.module.css for the pattern.\n */\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-inline-size: 0;\n}\n\n.group[data-invalid] {\n  --control-border: var(--tone-critical);\n}\n\n.items {\n  --_gap: var(--checkbox-group-gap, var(--space-3));\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--_gap);\n}\n\n.items[data-layout='horizontal'] {\n  flex-direction: row;\n  flex-wrap: wrap;\n  column-gap: var(--space-5);\n}\n\n.items[data-layout='columns'] {\n  display: grid;\n  grid-template-columns: var(--_cols);\n  column-gap: var(--space-5);\n  row-gap: var(--_gap);\n}\n\n/*\n * The registered --checkbox-group-columns-* inputs don't inherit, so they resolve here on\n * the root (where the component writes them) into --_cols, which .items reads.\n */\n.group {\n  --_cols: var(--checkbox-group-columns-base, minmax(0, 1fr));\n}\n@media (min-width: 40em) {\n  .group {\n    --_cols: var(--checkbox-group-columns-sm, minmax(0, 1fr));\n  }\n}\n@media (min-width: 48em) {\n  .group {\n    --_cols: var(--checkbox-group-columns-md, minmax(0, 1fr));\n  }\n}\n@media (min-width: 64em) {\n  .group {\n    --_cols: var(--checkbox-group-columns-lg, minmax(0, 1fr));\n  }\n}\n@media (min-width: 80em) {\n  .group {\n    --_cols: var(--checkbox-group-columns-xl, minmax(0, 1fr));\n  }\n}\n\n.item {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  column-gap: var(--space-3);\n  align-items: start;\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n}\n.group[data-size='sm'] .item {\n  font-size: var(--text-sm);\n}\n.group[data-size='lg'] .item {\n  font-size: var(--text-lg);\n}\n\n/* \"Select all\" governs the list below it: a hairline separates the two, one step of air. */\n.item[data-select-all] {\n  padding-block-end: var(--space-3);\n  border-block-end: var(--border-width) solid var(--checkbox-group-rule, var(--color-line));\n}\n.item[data-select-all] .label {\n  font-weight: var(--label-weight);\n}\n\n/* One line tall, so the box centres on the label's first line however long it wraps. */\n.slot {\n  display: flex;\n  align-items: center;\n  block-size: 1lh;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.label {\n  color: var(--color-ink);\n  cursor: pointer;\n}\n.item[data-disabled] .label {\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n.group[data-readonly] .label {\n  cursor: default;\n}\n"],"mappings":""}

package/dist/components/inputs/CheckboxGroup/choice.d.ts

@@ -0,0 +1,33 @@
+import { type FocusEventHandler, type ReactNode } from 'react';
+import type { FieldLabelProps } from '../Field/index.js';
+import type { FieldsetProps } from '../Fieldset/index.js';
+/** One option in a choice control. `value` is always a string (Radix items are string-keyed). */
+export interface ChoiceOption {
+    value: string;
+    label: ReactNode;
+    /** Secondary line, linked to the option with `aria-describedby`. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+/**
+ * Controlled/uncontrolled state in one hook. `value === undefined` means uncontrolled
+ * (so `null` is a real controlled value). With `readOnly`, `set` is a no-op: the control
+ * stays focusable but its value never moves.
+ */
+export declare function useControllableValue<T>(value: T | undefined, defaultValue: T, onValueChange: ((next: T) => void) | undefined, readOnly?: boolean): [T, (next: T) => void];
+/**
+ * Wrap a group's `onBlur` so it fires once, when focus leaves the whole group — not on
+ * every hop between its options (React's `onBlur` bubbles like `focusout`).
+ */
+export declare function useFocusLeave<E extends HTMLElement>(onBlur: FocusEventHandler<E> | undefined): FocusEventHandler<E> | undefined;
+/**
+ * One `<input type="hidden">` per value, so a native form submit / FormData sees them.
+ * `disabled` disables them too: a disabled control submits nothing.
+ */
+export declare function hiddenInputs(name: string | undefined, values: readonly string[], disabled?: boolean): ReactNode;
+/**
+ * Map a group field's `FieldLabelProps` onto `<Fieldset>`: `label` → `legend`,
+ * `labelHidden` → `legendHidden`, `hint` → `description`; `layout` passes straight through
+ * (`inline` hides the legend inside Fieldset).
+ */
+export declare function toFieldsetProps({ label, description, hint, labelHidden, layout, ...rest }: FieldLabelProps): Omit<FieldsetProps, 'children'>;

package/dist/components/inputs/CheckboxGroup/choice.js

@@ -0,0 +1,41 @@
+import { useLatest as e } from "../internal/useLatest.js";
+import { useCallback as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/inputs/CheckboxGroup/choice.tsx
+function i(r, i, a, o = !1) {
+	let [s, c] = n(i), l = r !== void 0, u = l ? r : s, d = e(a);
+	return [u, t((e) => {
+		o || (l || c(e), d.current?.(e));
+	}, [
+		l,
+		o,
+		d
+	])];
+}
+function a(e) {
+	return t((t) => {
+		let n = t.relatedTarget;
+		n instanceof Node && t.currentTarget.contains(n) || e?.(t);
+	}, [e]);
+}
+function o(e, t, n = !1) {
+	return e ? t.map((t) => /* @__PURE__ */ r("input", {
+		type: "hidden",
+		name: e,
+		value: t,
+		disabled: n || void 0
+	}, t)) : null;
+}
+function s({ label: e, description: t, hint: n, labelHidden: r, layout: i, ...a }) {
+	return {
+		...a,
+		legend: e,
+		description: t ?? n,
+		legendHidden: r === !0,
+		layout: i
+	};
+}
+//#endregion
+export { o as hiddenInputs, s as toFieldsetProps, i as useControllableValue, a as useFocusLeave };
+
+//# sourceMappingURL=choice.js.map

package/dist/components/inputs/CheckboxGroup/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","names":["useControllableValue","uncontrolled","setUncontrolled","useState","defaultValue","controlled","value","current","onChangeRef","useLatest","onValueChange","useCallback","readOnly","next","useFocusLeave","event","onBlur","hiddenInputs","name","values","v","disabled","toFieldsetProps","rest","label","description","hint","labelHidden"],"sources":["../../../../src/components/inputs/CheckboxGroup/choice.tsx"],"sourcesContent":["import {\n  useCallback,\n  useState,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ReactNode,\n} from 'react'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport type { FieldsetProps } from '#components/inputs/Fieldset'\nimport { useLatest } from '#components/inputs/internal/useLatest'\n\n/*\n * Shared plumbing for the choice controls (CheckboxGroup, ChoiceCards, ChipGroup, Rating,\n * Slider…). Internal — not exported from the package; import via\n * `#components/inputs/CheckboxGroup/choice`.\n */\n\n/** One option in a choice control. `value` is always a string (Radix items are string-keyed). */\nexport interface ChoiceOption {\n  value: string\n  label: ReactNode\n  /** Secondary line, linked to the option with `aria-describedby`. */\n  description?: ReactNode\n  disabled?: boolean\n}\n\n/**\n * Controlled/uncontrolled state in one hook. `value === undefined` means uncontrolled\n * (so `null` is a real controlled value). With `readOnly`, `set` is a no-op: the control\n * stays focusable but its value never moves.\n */\nexport function useControllableValue<T>(\n  value: T | undefined,\n  defaultValue: T,\n  onValueChange: ((next: T) => void) | undefined,\n  readOnly = false,\n): [T, (next: T) => void] {\n  const [uncontrolled, setUncontrolled] = useState<T>(defaultValue)\n  const controlled = value !== undefined\n  const current = controlled ? value : uncontrolled\n  const onChangeRef = useLatest(onValueChange)\n  const set = useCallback(\n    (next: T) => {\n      if (readOnly) return\n      if (!controlled) setUncontrolled(next)\n      onChangeRef.current?.(next)\n    },\n    [controlled, readOnly, onChangeRef],\n  )\n  return [current, set]\n}\n\n/**\n * Wrap a group's `onBlur` so it fires once, when focus leaves the whole group — not on\n * every hop between its options (React's `onBlur` bubbles like `focusout`).\n */\nexport function useFocusLeave<E extends HTMLElement>(\n  onBlur: FocusEventHandler<E> | undefined,\n): FocusEventHandler<E> | undefined {\n  return useCallback(\n    (event: FocusEvent<E>) => {\n      const next = event.relatedTarget\n      if (next instanceof Node && event.currentTarget.contains(next)) return\n      onBlur?.(event)\n    },\n    [onBlur],\n  )\n}\n\n/**\n * One `<input type=\"hidden\">` per value, so a native form submit / FormData sees them.\n * `disabled` disables them too: a disabled control submits nothing.\n */\nexport function hiddenInputs(\n  name: string | undefined,\n  values: readonly string[],\n  disabled = false,\n): ReactNode {\n  if (!name) return null\n  return values.map((v) => (\n    <input key={v} type=\"hidden\" name={name} value={v} disabled={disabled || undefined} />\n  ))\n}\n\n/**\n * Map a group field's `FieldLabelProps` onto `<Fieldset>`: `label` → `legend`,\n * `labelHidden` → `legendHidden`, `hint` → `description`; `layout` passes straight through\n * (`inline` hides the legend inside Fieldset).\n */\nexport function toFieldsetProps({\n  label,\n  description,\n  hint,\n  labelHidden,\n  layout,\n  ...rest\n}: FieldLabelProps): Omit<FieldsetProps, 'children'> {\n  return {\n    ...rest,\n    legend: label,\n    description: description ?? hint,\n    legendHidden: labelHidden === true,\n    layout,\n  }\n}\n"],"mappings":";;;;AA+BA,SAAgBA,EACd,GACA,GACA,GACA,IAAW,IACa;CACxB,IAAM,CAACC,GAAcC,KAAmBC,EAAYC,CAAY,GAC1DC,IAAaC,MAAU,KAAA,GACvBC,IAAUF,IAAaC,IAAQL,GAC/BO,IAAcC,EAAUC,CAAa;CAS3C,OAAO,CAACH,GARII,GACT,MAAY;EACX,AAAIC,MACCP,KAAYH,EAAgBW,CAAI,GACrCL,EAAY,UAAUK,CAAI;CAC5B,GACA;EAACR;EAAYO;EAAUJ;CAAW,CAEnB,CAAG;AACtB;AAMA,SAAgBM,EACd,GACkC;CAClC,OAAOH,GACJ,MAAyB;EACxB,IAAME,IAAOE,EAAM;EACnB,AAAIF,aAAgB,QAAQE,EAAM,cAAc,SAASF,CAAI,KAC7DG,IAASD,CAAK;CAChB,GACA,CAACC,CAAM,CACT;AACF;AAMA,SAAgBC,EACd,GACA,GACA,IAAW,IACA;CAEX,OADKC,IACEC,EAAO,KAAK,MACjB,kBAAC,SAAD;EAAe,MAAK;EAAe;EAAM,OAAOC;EAAG,UAAUC,KAAY,KAAA;CAAY,GAAzED,CAAyE,CACtF,IAHiB;AAIpB;AAOA,SAAgBE,EAAgB,EAC9B,UACA,gBACA,SACA,gBACA,WACA,GAAGC,KACgD;CACnD,OAAO;EACL,GAAGA;EACH,QAAQC;EACR,aAAaC,KAAeC;EAC5B,cAAcC,MAAgB;EAC9B;CACF;AACF"}

package/dist/components/inputs/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './CheckboxGroup.js';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupColumns, ChoiceOption, } from './CheckboxGroup.js';

package/dist/components/inputs/CheckboxGroupField/CheckboxGroupField.d.ts

@@ -0,0 +1,12 @@
+import { type CheckboxGroupProps } from '../CheckboxGroup/index.js';
+import type { FieldLabelProps } from '../Field/index.js';
+export interface CheckboxGroupFieldProps extends FieldLabelProps, Omit<CheckboxGroupProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A `CheckboxGroup` under a `<Fieldset>` legend, with help, warning and error for the
+ * group as a whole. `className`/`style` go to the fieldset; `ref`, `id` and the rest go to
+ * the group.
+ *
+ * <CheckboxGroupField label="Notify me about" name="notify" options={topics} error={errors.notify} />
+ */
+export declare const CheckboxGroupField: import("react").ForwardRefExoticComponent<CheckboxGroupFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/CheckboxGroupField/CheckboxGroupField.js

@@ -0,0 +1,24 @@
+import { toFieldsetProps as e } from "../CheckboxGroup/choice.js";
+import { Fieldset as t } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as n } from "../internal/fieldProps.js";
+import { CheckboxGroup as r } from "../CheckboxGroup/CheckboxGroup.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/inputs/CheckboxGroupField/CheckboxGroupField.tsx
+var o = i(function(i, o) {
+	let [s, { className: c, style: l, disabled: u, ...d }] = n(i);
+	return /* @__PURE__ */ a(t, {
+		...e(s),
+		disabled: u,
+		className: c,
+		style: l,
+		children: /* @__PURE__ */ a(r, {
+			ref: o,
+			...d
+		})
+	});
+});
+//#endregion
+export { o as CheckboxGroupField };
+
+//# sourceMappingURL=CheckboxGroupField.js.map

package/dist/components/inputs/CheckboxGroupField/CheckboxGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupField.js","names":["CheckboxGroupField","forwardRef","fieldProps","groupProps","splitFieldLabelProps","props","Fieldset","toFieldsetProps","CheckboxGroup"],"sources":["../../../../src/components/inputs/CheckboxGroupField/CheckboxGroupField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { CheckboxGroup, type CheckboxGroupProps } from '#components/inputs/CheckboxGroup'\nimport { toFieldsetProps } from '#components/inputs/CheckboxGroup/choice'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface CheckboxGroupFieldProps\n  extends FieldLabelProps, Omit<CheckboxGroupProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A `CheckboxGroup` under a `<Fieldset>` legend, with help, warning and error for the\n * group as a whole. `className`/`style` go to the fieldset; `ref`, `id` and the rest go to\n * the group.\n *\n * <CheckboxGroupField label=\"Notify me about\" name=\"notify\" options={topics} error={errors.notify} />\n */\nexport const CheckboxGroupField = forwardRef<HTMLDivElement, CheckboxGroupFieldProps>(\n  function CheckboxGroupField(props, ref) {\n    const [fieldProps, { className, style, disabled, ...groupProps }] = splitFieldLabelProps(props)\n    return (\n      <Fieldset\n        {...toFieldsetProps(fieldProps)}\n        disabled={disabled}\n        className={className}\n        style={style}\n      >\n        <CheckboxGroup ref={ref} {...groupProps} />\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAiBA,IAAaA,IAAqBC,EAChC,SAA4B,GAAO,GAAK;CACtC,IAAM,CAACC,GAAY,EAAE,cAAW,UAAO,aAAU,GAAGC,OAAgBC,EAAqBC,CAAK;CAC9F,OACE,kBAACC,GAAD;EACE,GAAIC,EAAgBL,CAAU;EACpB;EACC;EACJ;EAEP,UAAA,kBAACM,GAAD;GAAoB;GAAK,GAAIL;EAAa,CAAA;CAClC,CAAA;AAEd,CACF"}

package/dist/components/inputs/CheckboxGroupField/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxGroupField } from './CheckboxGroupField.js';
+export type { CheckboxGroupFieldProps } from './CheckboxGroupField.js';

package/dist/components/inputs/ChipGroupField/ChipGroupField.d.ts

@@ -0,0 +1,12 @@
+import { type ChipGroupMultipleProps, type ChipGroupProps, type ChipGroupSingleProps } from '../../actions/ChipGroup/index.js';
+import type { FieldLabelProps } from '../Field/index.js';
+type Shared = Omit<ChipGroupProps, 'invalid' | 'type' | 'value' | 'defaultValue' | 'onValueChange' | keyof FieldLabelProps>;
+export type ChipGroupFieldProps = FieldLabelProps & Shared & (ChipGroupSingleProps | ChipGroupMultipleProps);
+/**
+ * A `ChipGroup` under a `<Fieldset>` legend, with help, warning and error for the group.
+ * `className`/`style` go to the fieldset; `ref`, `id`, `name` and the rest go to the group.
+ *
+ * <ChipGroupField type="multiple" label="Deploy alerts" name="alerts" options={alerts} />
+ */
+export declare const ChipGroupField: import("react").ForwardRefExoticComponent<ChipGroupFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/inputs/ChipGroupField/ChipGroupField.js

@@ -0,0 +1,24 @@
+import { toFieldsetProps as e } from "../CheckboxGroup/choice.js";
+import { ChipGroup as t } from "../../actions/ChipGroup/ChipGroup.js";
+import { Fieldset as n } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as r } from "../internal/fieldProps.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/inputs/ChipGroupField/ChipGroupField.tsx
+var o = i(function(i, o) {
+	let [s, c] = r(i), { className: l, style: u, disabled: d, ...f } = c;
+	return /* @__PURE__ */ a(n, {
+		...e(s),
+		disabled: d,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ a(t, {
+			ref: o,
+			...f
+		})
+	});
+});
+//#endregion
+export { o as ChipGroupField };
+
+//# sourceMappingURL=ChipGroupField.js.map

package/dist/components/inputs/ChipGroupField/ChipGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroupField.js","names":["ChipGroupField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","groupProps","Fieldset","toFieldsetProps","ChipGroup"],"sources":["../../../../src/components/inputs/ChipGroupField/ChipGroupField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport {\n  ChipGroup,\n  type ChipGroupMultipleProps,\n  type ChipGroupProps,\n  type ChipGroupSingleProps,\n} from '#components/actions/ChipGroup'\nimport { toFieldsetProps } from '#components/inputs/CheckboxGroup/choice'\nimport type { FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\ntype Shared = Omit<\n  ChipGroupProps,\n  'invalid' | 'type' | 'value' | 'defaultValue' | 'onValueChange' | keyof FieldLabelProps\n>\n\nexport type ChipGroupFieldProps = FieldLabelProps &\n  Shared &\n  (ChipGroupSingleProps | ChipGroupMultipleProps)\n\n/**\n * A `ChipGroup` under a `<Fieldset>` legend, with help, warning and error for the group.\n * `className`/`style` go to the fieldset; `ref`, `id`, `name` and the rest go to the group.\n *\n * <ChipGroupField type=\"multiple\" label=\"Deploy alerts\" name=\"alerts\" options={alerts} />\n */\nexport const ChipGroupField = forwardRef<HTMLDivElement, ChipGroupFieldProps>(\n  function ChipGroupField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { className, style, disabled, ...groupProps } = rest\n    return (\n      <Fieldset\n        {...toFieldsetProps(fieldProps)}\n        disabled={disabled}\n        className={className}\n        style={style}\n      >\n        <ChipGroup ref={ref} {...(groupProps as ChipGroupProps)} />\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;AA2BA,IAAaA,IAAiBC,EAC5B,SAAwB,GAAO,GAAK;CAClC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,cAAW,UAAO,aAAU,GAAGC,MAAeH;CACtD,OACE,kBAACI,GAAD;EACE,GAAIC,EAAgBN,CAAU;EACpB;EACC;EACJ;EAEP,UAAA,kBAACO,GAAD;GAAgB;GAAK,GAAKH;EAAgC,CAAA;CAClD,CAAA;AAEd,CACF"}

package/dist/components/inputs/ChipGroupField/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipGroupField } from './ChipGroupField.js';
+export type { ChipGroupFieldProps } from './ChipGroupField.js';

package/dist/components/inputs/ChoiceCards/ChoiceCards.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type ChoiceOption } from '../CheckboxGroup/choice.js';
+export interface ChoiceCardOption extends ChoiceOption {
+    /** A figure or short fact set at the foot of the card — `<Amount value={10} />`, "Most picked". */
+    meta?: ReactNode;
+}
+export type ChoiceCardsColumns = 1 | 2 | 3 | 4;
+interface ChoiceCardsBaseProps {
+    options: readonly ChoiceCardOption[];
+    /** Fixed column count, 1–4. Responsive. Default: as many ~12rem cards as fit. */
+    columns?: Responsive<ChoiceCardsColumns>;
+    /** Emits one hidden input per selected value, for native form submission. */
+    name?: string;
+    disabled?: boolean;
+    /** Focusable but not editable: selection changes are ignored. */
+    readOnly?: boolean;
+    /** Critical edge on the unselected cards + `aria-invalid`. Set for you inside a `<Fieldset error>`. */
+    invalid?: boolean;
+}
+export interface ChoiceCardsSingleProps {
+    /** One card — the cards are radios (arrow keys move and select; one tab stop). */
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface ChoiceCardsMultipleProps {
+    /** Any number of cards — the cards are checkboxes (each a tab stop; Space toggles). */
+    type: 'multiple';
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ChoiceCardsProps = ChoiceCardsBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> & (ChoiceCardsSingleProps | ChoiceCardsMultipleProps);
+/**
+ * Choices as cards — for a handful of options that each need a sentence or a figure to
+ * choose between ("Plan": £5 / £10 / £20). The whole card is the hit target; the
+ * selected card takes the accent edge and nothing else.
+ *
+ * `type="single"` — Radix RadioGroup; the cards are the radios.
+ * `type="multiple"` — each card is a checkbox inside a `role="group"`.
+ *
+ * Label it with a `<Fieldset legend>` (see `ChoiceCardsField`), a `<Field>` or `aria-label`.
+ * `onBlur` fires once, when focus leaves the whole set.
+ *
+ * <ChoiceCards type="single" aria-label="Plan" name="plan" options={plans} columns={{ base: 1, sm: 3 }} />
+ */
+export declare const ChoiceCards: import("react").ForwardRefExoticComponent<ChoiceCardsProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/inputs/ChoiceCards/ChoiceCards.js

@@ -0,0 +1,130 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t } from "../../../icons/icons.js";
+import { mergeStyles as n, responsiveVars as r } from "../../../utils/responsive.js";
+import { hiddenInputs as i, useControllableValue as a, useFocusLeave as o } from "../CheckboxGroup/choice.js";
+import { joinIds as s } from "../internal/refs.js";
+import { markFieldAware as c, useResolvedField as l } from "../internal/FieldContext.js";
+import u from "./ChoiceCards.module.js";
+import { forwardRef as d, useId as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Checkbox as g, RadioGroup as _ } from "radix-ui";
+//#region src/components/inputs/ChoiceCards/ChoiceCards.tsx
+var v = [], y = (e) => `repeat(${String(e)}, minmax(0, 1fr))`;
+function b({ option: e, ids: n, kind: r }) {
+	return /* @__PURE__ */ h(p, { children: [
+		/* @__PURE__ */ h("span", {
+			className: u.head,
+			children: [/* @__PURE__ */ m("span", {
+				id: n.label,
+				className: u.label,
+				children: e.label
+			}), /* @__PURE__ */ m("span", {
+				className: u.mark,
+				"data-kind": r,
+				"aria-hidden": "true",
+				children: r === "checkbox" ? /* @__PURE__ */ m(t, { className: u.check }) : null
+			})]
+		}),
+		e.description == null ? null : /* @__PURE__ */ m("span", {
+			id: n.description,
+			className: u.description,
+			children: e.description
+		}),
+		e.meta == null ? null : /* @__PURE__ */ m("span", {
+			id: n.meta,
+			className: u.meta,
+			children: e.meta
+		})
+	] });
+}
+function x(e, t) {
+	return {
+		label: `${e}card${String(t)}-label`,
+		description: `${e}card${String(t)}-description`,
+		meta: `${e}card${String(t)}-meta`
+	};
+}
+function S(e, t) {
+	return {
+		"aria-labelledby": t.label,
+		"aria-describedby": s(e.description != null && t.description, e.meta != null && t.meta)
+	};
+}
+var C = c(d(function(t, s) {
+	let { type: c, value: d, defaultValue: p, onValueChange: C, options: w, columns: T, name: E, disabled: D, readOnly: O, invalid: k, id: A, className: j, style: M, onBlur: N, "aria-describedby": P, "aria-invalid": F, "aria-labelledby": I, ...L } = t, R = f(), z = l({
+		id: A,
+		describedBy: P,
+		invalid: k,
+		ariaInvalid: F,
+		disabled: D,
+		readOnly: O
+	}), B = o(N), V = (e) => e === void 0 ? void 0 : typeof e == "string" ? e ? [e] : v : e, H = C ? (e) => {
+		C(c === "single" ? e[0] ?? "" : [...e]);
+	} : void 0, [U, W] = a(V(d), V(p) ?? v, H, z.readOnly), G = {
+		ref: s,
+		id: z.id,
+		className: e(u.cards, j),
+		style: n(r("choice-cards-columns", T, y), M),
+		"data-type": c,
+		"data-columns": T !== void 0 || void 0,
+		"data-invalid": z.invalid || void 0,
+		"data-disabled": z.disabled || void 0,
+		"data-readonly": z.readOnly || void 0,
+		"aria-labelledby": I ?? (L["aria-label"] ? void 0 : z.groupLabelId),
+		"aria-describedby": z.describedBy,
+		"aria-invalid": z.invalid || void 0,
+		"aria-busy": z.busy || void 0,
+		onBlur: B,
+		...L
+	};
+	return c === "single" ? /* @__PURE__ */ h(_.Root, {
+		...G,
+		value: U[0] ?? "",
+		onValueChange: (e) => {
+			W(e ? [e] : v);
+		},
+		disabled: z.disabled,
+		"aria-required": z.required || void 0,
+		"aria-readonly": z.readOnly || void 0,
+		children: [w.map((e, t) => {
+			let n = x(R, t);
+			return /* @__PURE__ */ m(_.Item, {
+				value: e.value,
+				disabled: e.disabled,
+				className: u.card,
+				...S(e, n),
+				children: /* @__PURE__ */ m(b, {
+					option: e,
+					ids: n,
+					kind: "radio"
+				})
+			}, e.value);
+		}), i(E, U, z.disabled)]
+	}) : /* @__PURE__ */ h("div", {
+		role: "group",
+		...G,
+		children: [w.map((e, t) => {
+			let n = x(R, t), r = U.includes(e.value);
+			return /* @__PURE__ */ m(g.Root, {
+				checked: r,
+				disabled: z.disabled || e.disabled,
+				"aria-readonly": z.readOnly || void 0,
+				className: u.card,
+				...S(e, n),
+				onCheckedChange: (t) => {
+					let n = t === !0;
+					W(w.map((e) => e.value).filter((t) => t === e.value ? n : U.includes(t)));
+				},
+				children: /* @__PURE__ */ m(b, {
+					option: e,
+					ids: n,
+					kind: "checkbox"
+				})
+			}, e.value);
+		}), i(E, U, z.disabled)]
+	});
+}));
+//#endregion
+export { C as ChoiceCards };
+
+//# sourceMappingURL=ChoiceCards.js.map

package/dist/components/inputs/ChoiceCards/ChoiceCards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceCards.js","names":["_Fragment","styles","RadixRadioGroup","RadixCheckbox","ChoiceCards_module_default","Fragment$1","EMPTY","tracks","n","CardBody","ids","option","kind","CheckIcon","cardIds","base","index","cardAria","joinIds","ChoiceCards","markFieldAware","forwardRef","valueProp","disabledProp","readOnlyProp","invalidProp","idProp","describedByProp","ariaInvalid","labelledByProp","rest","props","autoId","useId","field","useResolvedField","handleBlur","useFocusLeave","onBlur","toArray","v","emit","onValueChange","type","next","values","setValues","useControllableValue","defaultValue","rootProps","cx","className","mergeStyles","responsiveVars","columns","style","RadioGroup","options","i","o","hiddenInputs","name","checked","Checkbox","on","state","x"],"sources":["../../../../src/components/inputs/ChoiceCards/ChoiceCards.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { Checkbox as RadixCheckbox, RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { CheckIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport {\n  hiddenInputs,\n  useControllableValue,\n  useFocusLeave,\n  type ChoiceOption,\n} from '#components/inputs/CheckboxGroup/choice'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport styles from './ChoiceCards.module.css'\n\nexport interface ChoiceCardOption extends ChoiceOption {\n  /** A figure or short fact set at the foot of the card — `<Amount value={10} />`, \"Most picked\". */\n  meta?: ReactNode\n}\n\nexport type ChoiceCardsColumns = 1 | 2 | 3 | 4\n\ninterface ChoiceCardsBaseProps {\n  options: readonly ChoiceCardOption[]\n  /** Fixed column count, 1–4. Responsive. Default: as many ~12rem cards as fit. */\n  columns?: Responsive<ChoiceCardsColumns>\n  /** Emits one hidden input per selected value, for native form submission. */\n  name?: string\n  disabled?: boolean\n  /** Focusable but not editable: selection changes are ignored. */\n  readOnly?: boolean\n  /** Critical edge on the unselected cards + `aria-invalid`. Set for you inside a `<Fieldset error>`. */\n  invalid?: boolean\n}\n\nexport interface ChoiceCardsSingleProps {\n  /** One card — the cards are radios (arrow keys move and select; one tab stop). */\n  type: 'single'\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport interface ChoiceCardsMultipleProps {\n  /** Any number of cards — the cards are checkboxes (each a tab stop; Space toggles). */\n  type: 'multiple'\n  value?: readonly string[]\n  defaultValue?: readonly string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ChoiceCardsProps = ChoiceCardsBaseProps &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> &\n  (ChoiceCardsSingleProps | ChoiceCardsMultipleProps)\n\nconst EMPTY: readonly string[] = []\nconst tracks = (n: ChoiceCardsColumns): string => `repeat(${String(n)}, minmax(0, 1fr))`\n\nfunction CardBody({\n  option,\n  ids,\n  kind,\n}: {\n  option: ChoiceCardOption\n  ids: CardIds\n  kind: 'radio' | 'checkbox'\n}) {\n  return (\n    <>\n      <span className={styles.head}>\n        <span id={ids.label} className={styles.label}>\n          {option.label}\n        </span>\n        <span className={styles.mark} data-kind={kind} aria-hidden=\"true\">\n          {kind === 'checkbox' ? <CheckIcon className={styles.check} /> : null}\n        </span>\n      </span>\n      {option.description != null ? (\n        <span id={ids.description} className={styles.description}>\n          {option.description}\n        </span>\n      ) : null}\n      {option.meta != null ? (\n        <span id={ids.meta} className={styles.meta}>\n          {option.meta}\n        </span>\n      ) : null}\n    </>\n  )\n}\n\ninterface CardIds {\n  label: string\n  description: string\n  meta: string\n}\n\nfunction cardIds(base: string, index: number): CardIds {\n  return {\n    label: `${base}card${String(index)}-label`,\n    description: `${base}card${String(index)}-description`,\n    meta: `${base}card${String(index)}-meta`,\n  }\n}\n\n/** The card is named by its label and described by its description and meta. */\nfunction cardAria(option: ChoiceCardOption, ids: CardIds) {\n  return {\n    'aria-labelledby': ids.label,\n    'aria-describedby': joinIds(\n      option.description != null && ids.description,\n      option.meta != null && ids.meta,\n    ),\n  }\n}\n\n/**\n * Choices as cards — for a handful of options that each need a sentence or a figure to\n * choose between (\"Plan\": £5 / £10 / £20). The whole card is the hit target; the\n * selected card takes the accent edge and nothing else.\n *\n * `type=\"single\"` — Radix RadioGroup; the cards are the radios.\n * `type=\"multiple\"` — each card is a checkbox inside a `role=\"group\"`.\n *\n * Label it with a `<Fieldset legend>` (see `ChoiceCardsField`), a `<Field>` or `aria-label`.\n * `onBlur` fires once, when focus leaves the whole set.\n *\n * <ChoiceCards type=\"single\" aria-label=\"Plan\" name=\"plan\" options={plans} columns={{ base: 1, sm: 3 }} />\n */\nexport const ChoiceCards = markFieldAware(\n  forwardRef<HTMLDivElement, ChoiceCardsProps>(function ChoiceCards(props, ref) {\n    const {\n      type,\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      options,\n      columns,\n      name,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      invalid: invalidProp,\n      id: idProp,\n      className,\n      style,\n      onBlur,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-labelledby': labelledByProp,\n      ...rest\n    } = props\n    const autoId = useId()\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const handleBlur = useFocusLeave(onBlur)\n\n    const toArray = (v: string | readonly string[] | undefined): readonly string[] | undefined =>\n      v === undefined ? undefined : typeof v === 'string' ? (v ? [v] : EMPTY) : v\n    const emit = onValueChange\n      ? (next: readonly string[]) => {\n          if (type === 'single') onValueChange(next[0] ?? '')\n          else onValueChange([...next])\n        }\n      : undefined\n    const [values, setValues] = useControllableValue<readonly string[]>(\n      toArray(valueProp),\n      toArray(defaultValue) ?? EMPTY,\n      emit,\n      field.readOnly,\n    )\n\n    const rootProps = {\n      ref,\n      id: field.id,\n      className: cx(styles.cards, className),\n      style: mergeStyles(responsiveVars('choice-cards-columns', columns, tracks), style),\n      'data-type': type,\n      'data-columns': columns !== undefined || undefined,\n      'data-invalid': field.invalid || undefined,\n      'data-disabled': field.disabled || undefined,\n      'data-readonly': field.readOnly || undefined,\n      'aria-labelledby': labelledByProp ?? (rest['aria-label'] ? undefined : field.groupLabelId),\n      'aria-describedby': field.describedBy,\n      'aria-invalid': field.invalid || undefined,\n      'aria-busy': field.busy || undefined,\n      onBlur: handleBlur,\n      ...rest,\n    }\n\n    if (type === 'single') {\n      return (\n        <RadixRadioGroup.Root\n          {...rootProps}\n          value={values[0] ?? ''}\n          onValueChange={(v) => {\n            setValues(v ? [v] : EMPTY)\n          }}\n          disabled={field.disabled}\n          aria-required={field.required || undefined}\n          aria-readonly={field.readOnly || undefined}\n        >\n          {options.map((o, i) => {\n            const ids = cardIds(autoId, i)\n            return (\n              <RadixRadioGroup.Item\n                key={o.value}\n                value={o.value}\n                disabled={o.disabled}\n                className={styles.card}\n                {...cardAria(o, ids)}\n              >\n                <CardBody option={o} ids={ids} kind=\"radio\" />\n              </RadixRadioGroup.Item>\n            )\n          })}\n          {hiddenInputs(name, values, field.disabled)}\n        </RadixRadioGroup.Root>\n      )\n    }\n\n    return (\n      <div role=\"group\" {...rootProps}>\n        {options.map((o, i) => {\n          const ids = cardIds(autoId, i)\n          const checked = values.includes(o.value)\n          return (\n            <RadixCheckbox.Root\n              key={o.value}\n              checked={checked}\n              disabled={field.disabled || o.disabled}\n              aria-readonly={field.readOnly || undefined}\n              className={styles.card}\n              {...cardAria(o, ids)}\n              onCheckedChange={(state) => {\n                const on = state === true\n                // Keep option order, whatever order the cards were picked in.\n                setValues(\n                  options\n                    .map((x) => x.value)\n                    .filter((v) => (v === o.value ? on : values.includes(v))),\n                )\n              }}\n            >\n              <CardBody option={o} ids={ids} kind=\"checkbox\" />\n            </RadixCheckbox.Root>\n          )\n        })}\n        {hiddenInputs(name, values, field.disabled)}\n      </div>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;AAuDA,IAAMM,IAA2B,CAAC,GAC5BC,KAAU,MAAkC,UAAU,OAAOC,CAAC,EAAE;AAEtE,SAASC,EAAS,EAChB,WACA,QACA,WAKC;CACD,OACE,kBAAAT,GAAA,EAAA,UAAA;EACE,kBAAC,QAAD;GAAM,WAAWC,EAAO;GAAxB,UAAA,CACE,kBAAC,QAAD;IAAM,IAAIS,EAAI;IAAO,WAAWT,EAAO;IACpC,UAAAU,EAAO;GACJ,CAAA,GACN,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAM,aAAWW;IAAM,eAAY;IACxD,UAAAA,MAAS,aAAa,kBAACC,GAAD,EAAW,WAAWZ,EAAO,MAAQ,CAAA,IAAI;GAC5D,CAAA,CACF;;EACLU,EAAO,eAAe,OAInB,OAHF,kBAAC,QAAD;GAAM,IAAID,EAAI;GAAa,WAAWT,EAAO;GAC1C,UAAAU,EAAO;EACJ,CAAA;EAEPA,EAAO,QAAQ,OAIZ,OAHF,kBAAC,QAAD;GAAM,IAAID,EAAI;GAAM,WAAWT,EAAO;GACnC,UAAAU,EAAO;EACJ,CAAA;CAER,EAAA,CAAA;AAEN;AAQA,SAASG,EAAQ,GAAc,GAAwB;CACrD,OAAO;EACL,OAAO,GAAGC,EAAK,MAAM,OAAOC,CAAK,EAAE;EACnC,aAAa,GAAGD,EAAK,MAAM,OAAOC,CAAK,EAAE;EACzC,MAAM,GAAGD,EAAK,MAAM,OAAOC,CAAK,EAAE;CACpC;AACF;AAGA,SAASC,EAAS,GAA0B,GAAc;CACxD,OAAO;EACL,mBAAmBP,EAAI;EACvB,oBAAoBQ,EAClBP,EAAO,eAAe,QAAQD,EAAI,aAClCC,EAAO,QAAQ,QAAQD,EAAI,IAC7B;CACF;AACF;AAeA,IAAaS,IAAcC,EACzBC,EAA6C,SAAqB,GAAO,GAAK;CAC5E,IAAM,EACJ,SACA,OAAOC,GACP,iBACA,kBACA,YACA,YACA,SACA,UAAUC,GACV,UAAUC,GACV,SAASC,GACT,IAAIC,GACJ,cACA,UACA,WACA,oBAAoBC,GACpB,gBAAgBC,GAChB,mBAAmBC,GACnB,GAAGC,MACDC,GACEC,IAASC,EAAM,GACfC,IAAQC,EAAiB;EAC7B,IAAIT;EACJ,aAAaC;EACb,SAASF;EACT;EACA,UAAUF;EACV,UAAUC;CACZ,CAAC,GACKY,IAAaC,EAAcC,CAAM,GAEjCC,KAAW,MACfC,MAAM,KAAA,IAAY,KAAA,IAAY,OAAOA,KAAM,WAAYA,IAAI,CAACA,CAAC,IAAIlC,IAASkC,GACtEC,IAAOC,KACR,MAA4B;EAC3B,AAAuBA,EAAnBC,MAAS,WAAwBC,EAAK,MAAM,KAC7B,CAAC,GAAGA,CAAI,CAAC;CAC9B,IACA,KAAA,GACE,CAACC,GAAQC,KAAaC,EAC1BR,EAAQjB,CAAS,GACjBiB,EAAQS,CAAY,KAAK1C,GACzBmC,GACAP,EAAM,QACR,GAEMe,IAAY;EAChB;EACA,IAAIf,EAAM;EACV,WAAWgB,EAAGjD,EAAO,OAAOkD,CAAS;EACrC,OAAOC,EAAYC,EAAe,wBAAwBC,GAAS/C,CAAM,GAAGgD,CAAK;EACjF,aAAaZ;EACb,gBAAgBW,MAAY,KAAA,KAAa,KAAA;EACzC,gBAAgBpB,EAAM,WAAW,KAAA;EACjC,iBAAiBA,EAAM,YAAY,KAAA;EACnC,iBAAiBA,EAAM,YAAY,KAAA;EACnC,mBAAmBL,MAAmBC,EAAK,gBAAgB,KAAA,IAAYI,EAAM;EAC7E,oBAAoBA,EAAM;EAC1B,gBAAgBA,EAAM,WAAW,KAAA;EACjC,aAAaA,EAAM,QAAQ,KAAA;EAC3B,QAAQE;EACR,GAAGN;CACL;CAiCA,OA/BIa,MAAS,WAET,kBAACzC,EAAgB,MAAjB;EACE,GAAI+C;EACJ,OAAOJ,EAAO,MAAM;EACpB,gBAAgB,MAAM;GACpB,EAAUL,IAAI,CAACA,CAAC,IAAIlC,CAAK;EAC3B;EACA,UAAU4B,EAAM;EAChB,iBAAeA,EAAM,YAAY,KAAA;EACjC,iBAAeA,EAAM,YAAY,KAAA;EARnC,UAAA,CAUGuB,EAAQ,KAAK,GAAG,MAAM;GACrB,IAAM/C,IAAMI,EAAQkB,GAAQ0B,CAAC;GAC7B,OACE,kBAACxD,EAAgB,MAAjB;IAEE,OAAOyD,EAAE;IACT,UAAUA,EAAE;IACZ,WAAW1D,EAAO;IAClB,GAAIgB,EAAS0C,GAAGjD,CAAG;IAEnB,UAAA,kBAACD,GAAD;KAAU,QAAQkD;KAAQ;KAAK,MAAK;IAAS,CAAA;GACzB,GAPfA,EAAE,KAOa;EAE1B,CAAC,GACAC,EAAaC,GAAMhB,GAAQX,EAAM,QAAQ,CACtB;MAKxB,kBAAC,OAAD;EAAK,MAAK;EAAQ,GAAIe;EAAtB,UAAA,CACGQ,EAAQ,KAAK,GAAG,MAAM;GACrB,IAAM/C,IAAMI,EAAQkB,GAAQ0B,CAAC,GACvBI,IAAUjB,EAAO,SAASc,EAAE,KAAK;GACvC,OACE,kBAACxD,EAAc,MAAf;IAEW;IACT,UAAU+B,EAAM,YAAYyB,EAAE;IAC9B,iBAAezB,EAAM,YAAY,KAAA;IACjC,WAAWjC,EAAO;IAClB,GAAIgB,EAAS0C,GAAGjD,CAAG;IACnB,kBAAkB,MAAU;KAC1B,IAAMsD,IAAKC,MAAU;KAErB,EACER,EACG,KAAK,MAAMS,EAAE,KAAK,CAAC,CACnB,QAAQ,MAAO1B,MAAMmB,EAAE,QAAQK,IAAKnB,EAAO,SAASL,CAAC,CAAE,CAC5D;IACF;IAEA,UAAA,kBAAC/B,GAAD;KAAU,QAAQkD;KAAQ;KAAK,MAAK;IAAY,CAAA;GAC9B,GAjBbA,EAAE,KAiBW;EAExB,CAAC,GACAC,EAAaC,GAAMhB,GAAQX,EAAM,QAAQ,CACvC;;AAET,CAAC,CACH"}