@mitcsutt/kiln-ui 0.1.0

package/dist/components/actions/Button/Button.js

@@ -0,0 +1,47 @@
+import { cx as e } from "../../../utils/cx.js";
+import { visibilityClass as t } from "../../../utils/visibility.js";
+import { Spinner as n } from "../../feedback/Spinner/Spinner.js";
+import r from "./Button.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Slot as s } from "radix-ui";
+//#region src/components/actions/Button/Button.tsx
+var c = i(function({ variant: i = "solid", tone: c = "accent", size: l = "md", leadingIcon: u, trailingIcon: d, loading: f = !1, fullWidth: p = !1, asChild: m = !1, disabled: h, hideBelow: g, hideAbove: _, className: v, children: y, type: b, ...x }, S) {
+	let C = m ? s.Root : "button";
+	return /* @__PURE__ */ o(C, {
+		ref: S,
+		className: e(r.button, t({
+			hideBelow: g,
+			hideAbove: _
+		}), v),
+		"data-variant": i,
+		"data-tone": c,
+		"data-size": l,
+		"data-loading": f || void 0,
+		"data-full-width": p || void 0,
+		"aria-busy": f || void 0,
+		disabled: m ? void 0 : !!h || f,
+		"aria-disabled": m && (h || f) ? !0 : void 0,
+		type: m ? void 0 : b ?? "button",
+		...x,
+		children: [
+			u ? /* @__PURE__ */ a("span", {
+				className: r.icon,
+				children: u
+			}) : null,
+			/* @__PURE__ */ a(s.Slottable, { children: y }),
+			d ? /* @__PURE__ */ a("span", {
+				className: r.icon,
+				children: d
+			}) : null,
+			f ? /* @__PURE__ */ a("span", {
+				className: r.spinner,
+				children: /* @__PURE__ */ a(n, { label: null })
+			}) : null
+		]
+	});
+});
+//#endregion
+export { c as Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/actions/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["styles","Button_module_default","Button","forwardRef","rest","Comp","asChild","Slot","cx","visibilityClass","className","variant","tone","size","loading","fullWidth","disabled","type","leadingIcon","trailingIcon","Spinner"],"sources":["../../../../src/components/actions/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport { Spinner } from '#components/feedback/Spinner'\nimport styles from './Button.module.css'\n\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost'\nexport type ButtonTone = 'accent' | 'neutral' | 'critical'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VisibilityProps {\n  /** Visual weight. One `solid` per view is the norm — it *is* the primary action. */\n  variant?: ButtonVariant\n  /** Colour intent. `critical` is for destructive actions only. */\n  tone?: ButtonTone\n  size?: Size\n  /** Icon before the label. Pass a library icon or any SVG node. */\n  leadingIcon?: ReactNode\n  /** Icon after the label. Not a decorative \"→\" — only when it adds meaning (e.g. external). */\n  trailingIcon?: ReactNode\n  /** Shows a spinner, sets `aria-busy` and disables interaction while keeping the width. */\n  loading?: boolean\n  /** Stretch to the container's width. */\n  fullWidth?: boolean\n  /**\n   * Render the single child element instead of a <button>, merging props and styles.\n   * Use for links: `<Button asChild><Link to=\"/work\">Work</Link></Button>`.\n   */\n  asChild?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'solid',\n    tone = 'accent',\n    size = 'md',\n    leadingIcon,\n    trailingIcon,\n    loading = false,\n    fullWidth = false,\n    asChild = false,\n    disabled,\n    hideBelow,\n    hideAbove,\n    className,\n    children,\n    type,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'button'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.button, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-variant={variant}\n      data-tone={tone}\n      data-size={size}\n      data-loading={loading || undefined}\n      data-full-width={fullWidth || undefined}\n      aria-busy={loading || undefined}\n      disabled={asChild ? undefined : Boolean(disabled) || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      type={asChild ? undefined : (type ?? 'button')}\n      {...rest}\n    >\n      {leadingIcon ? <span className={styles.icon}>{leadingIcon}</span> : null}\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {trailingIcon ? <span className={styles.icon}>{trailingIcon}</span> : null}\n      {loading ? (\n        <span className={styles.spinner}>\n          <Spinner label={null} />\n        </span>\n      ) : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;;;AAgCA,IAAaE,IAASC,EAA2C,SAC/D,EACE,aAAU,SACV,UAAO,UACP,UAAO,MACP,gBACA,iBACA,aAAU,IACV,eAAY,IACZ,aAAU,IACV,aACA,cACA,cACA,cACA,aACA,SACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGR,EAAO,QAAQS,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EACjF,gBAAcC;EACd,aAAWC;EACX,aAAWC;EACX,gBAAcC,KAAW,KAAA;EACzB,mBAAiBC,KAAa,KAAA;EAC9B,aAAWD,KAAW,KAAA;EACtB,UAAUR,IAAU,KAAA,IAAY,EAAQU,KAAaF;EACrD,iBAAeR,MAAYU,KAAYF,KAAW,KAAO,KAAA;EACzD,MAAMR,IAAU,KAAA,IAAaW,KAAQ;EACrC,GAAIb;EAZN,UAAA;GAcGc,IAAc,kBAAC,QAAD;IAAM,WAAWlB,EAAO;IAAO,UAAAkB;GAAkB,CAAA,IAAI;GACpE,kBAACX,EAAK,WAAN,EAAiB,YAAyB,CAAA;GACzCY,IAAe,kBAAC,QAAD;IAAM,WAAWnB,EAAO;IAAO,UAAAmB;GAAmB,CAAA,IAAI;GACrEL,IACC,kBAAC,QAAD;IAAM,WAAWd,EAAO;IACtB,UAAA,kBAACoB,GAAD,EAAS,OAAO,KAAO,CAAA;GACnB,CAAA,IACJ;EACA;;AAEV,CAAC"}

package/dist/components/actions/Button/Button.module.js

@@ -0,0 +1,10 @@
+//#region src/components/actions/Button/Button.module.css
+var e = "kiln-Button__button", t = "kiln-Button__spinner", n = "kiln-Button__icon", r = {
+	button: e,
+	spinner: t,
+	icon: n
+};
+//#endregion
+export { e as button, r as default, n as icon, t as spinner };
+
+//# sourceMappingURL=Button.module.js.map

package/dist/components/actions/Button/Button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.js","names":["button","spinner","icon","Button_module_default"],"sources":["../../../../src/components/actions/Button/Button.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --button-radius   default var(--radius-action)\n *   --button-shadow   default var(--shadow-surface) for solid/outline\n *   --button-weight   default var(--label-weight)\n */\n.button {\n  --_bg: transparent;\n  --_bg-hover: var(--_bg);\n  --_ink: var(--color-ink);\n  --_border: transparent;\n  --_shadow: none;\n  --_h: var(--control-md);\n  --_px: var(--space-4);\n  --_fs: var(--text-sm);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--button-radius, var(--radius-action));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--button-weight, var(--label-weight));\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n/* Sizes */\n.button[data-size='sm'] {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-xs);\n}\n.button[data-size='lg'] {\n  --_h: var(--control-lg);\n  --_px: var(--space-5);\n  --_fs: var(--text-md);\n}\n\n/* Tone → which colour family the variant draws with */\n.button[data-tone='accent'] {\n  --_c: var(--color-accent);\n  --_c-hover: var(--color-accent-hover);\n  --_c-ink: var(--color-accent-ink);\n  --_c-text: var(--color-accent-text);\n  --_c-soft: var(--color-accent-soft);\n}\n.button[data-tone='neutral'] {\n  --_c: var(--color-surface-inverse);\n  --_c-hover: var(--color-ink-muted);\n  --_c-ink: var(--color-ink-inverse);\n  --_c-text: var(--color-ink);\n  --_c-soft: var(--color-surface-sunken);\n}\n.button[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_c-hover: var(--tone-critical-text);\n  --_c-ink: var(--tone-critical-ink);\n  --_c-text: var(--tone-critical-text);\n  --_c-soft: var(--tone-critical-soft);\n}\n\n/* Variants */\n.button[data-variant='solid'] {\n  --_bg: var(--_c);\n  --_bg-hover: var(--_c-hover);\n  --_ink: var(--_c-ink);\n  --_border: var(--button-solid-border, var(--_c));\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-variant='outline'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-tone='neutral'][data-variant='outline'] {\n  --_bg: var(--color-surface);\n}\n.button[data-variant='ghost'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n}\n\n@media (hover: hover) {\n  .button:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--_bg-hover);\n  }\n}\n\n.button:active:not(:disabled, [aria-disabled='true']) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.button[data-variant='ghost']:active:not(:disabled) {\n  translate: none;\n  box-shadow: none;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled,\n.button[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.button[data-loading] {\n  cursor: progress;\n  opacity: 1;\n  /* Bare text children aren't elements, so hide the label via colour, not visibility */\n  color: transparent;\n}\n.button[data-loading] > :not(.spinner) {\n  visibility: hidden;\n}\n\n.button[data-full-width] {\n  display: flex;\n  inline-size: 100%;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline: -0.1em;\n}\n\n.spinner {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: var(--_ink);\n}\n"],"mappings":""}

package/dist/components/actions/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonTone } from './Button.js';

package/dist/components/actions/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChoiceOption } from '../../inputs/CheckboxGroup/choice.js';
+export interface ChipOption extends ChoiceOption {
+    /** A leading glyph. One icon per chip at most — and only when it carries meaning. */
+    icon?: ReactNode;
+    /** How many items the chip matches, in tabular figures after the label. */
+    count?: number;
+}
+export type ChipGroupSize = 'sm' | 'md';
+interface ChipGroupBaseProps {
+    options: readonly ChipOption[];
+    size?: ChipGroupSize;
+    disabled?: boolean;
+    /** Critical edge on the resting chips + `aria-invalid`. Set for you inside a `<Fieldset error>`. */
+    invalid?: boolean;
+    /** Focusable but not editable: presses are ignored. */
+    readOnly?: boolean;
+    /** Emits one hidden input per selected value, for native form submission. */
+    name?: string;
+}
+export interface ChipGroupSingleProps {
+    /** One chip at most; pressing the selected chip clears it (`''`). */
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface ChipGroupMultipleProps {
+    /** Any number of chips. */
+    type: 'multiple';
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ChipGroupProps = ChipGroupBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> & (ChipGroupSingleProps | ChipGroupMultipleProps);
+/**
+ * A set of chips that together make one answer — "Email alerts", "Labels". The chips look
+ * exactly like `ToggleChip` (they share its style module) but behave as a group (Radix
+ * ToggleGroup): one tab stop, arrow keys move between chips, Space/Enter presses.
+ *
+ * `type="multiple"` — any number pressed; chips are toggle buttons in a `role="group"`.
+ * `type="single"`   — at most one; chips are radios in a `role="radiogroup"`.
+ *
+ * Label it with a `<Fieldset legend>` (see `ChipGroupField`), a `<Field>` or `aria-label`.
+ * `onBlur` fires once, when focus leaves the whole group.
+ *
+ * <ChipGroup type="multiple" aria-label="Email alerts" options={alerts} defaultValue={['mentions']} />
+ */
+export declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/actions/ChipGroup/ChipGroup.js

@@ -0,0 +1,104 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "../ToggleChip/chip.module.js";
+import { hiddenInputs as n, useControllableValue as r, useFocusLeave as i } from "../../inputs/CheckboxGroup/choice.js";
+import { markFieldAware as a, useResolvedField as o } from "../../inputs/internal/FieldContext.js";
+import s from "../../inputs/internal/messages.module.js";
+import c from "./ChipGroup.module.js";
+import { forwardRef as l, useId as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ToggleGroup as m } from "radix-ui";
+//#region src/components/actions/ChipGroup/ChipGroup.tsx
+var h = [];
+function g({ option: e }) {
+	return /* @__PURE__ */ p(d, { children: [
+		e.icon ? /* @__PURE__ */ f("span", {
+			className: t.icon,
+			"aria-hidden": "true",
+			children: e.icon
+		}) : null,
+		/* @__PURE__ */ f("span", {
+			className: t.label,
+			children: e.label
+		}),
+		e.count === void 0 ? null : /* @__PURE__ */ f("span", {
+			className: t.count,
+			children: e.count
+		})
+	] });
+}
+var _ = a(l(function(a, l) {
+	let { type: d, value: _, defaultValue: v, onValueChange: y, options: b, size: x = "md", disabled: S, invalid: C, readOnly: w, name: T, id: E, className: D, onBlur: O, "aria-describedby": k, "aria-invalid": A, "aria-labelledby": j, ...M } = a, N = u(), P = o({
+		id: E,
+		describedBy: k,
+		invalid: C,
+		ariaInvalid: A,
+		disabled: S,
+		readOnly: w
+	}), F = i(O), I = (e) => e === void 0 ? void 0 : typeof e == "string" ? e ? [e] : h : e, L = y ? (e) => {
+		y(d === "single" ? e[0] ?? "" : [...e]);
+	} : void 0, [R, z] = r(I(_), I(v) ?? h, L, P.readOnly), B = b.map((e) => e.value), V = b.map((e, n) => {
+		let r = `${N}chip${String(n)}-description`;
+		return /* @__PURE__ */ f(m.Item, {
+			value: e.value,
+			disabled: e.disabled,
+			className: t.chip,
+			"data-size": x,
+			"data-invalid": P.invalid || void 0,
+			"aria-describedby": e.description == null ? void 0 : r,
+			children: /* @__PURE__ */ f(g, { option: e })
+		}, e.value);
+	}), H = b.some((e) => e.description != null) ? /* @__PURE__ */ f("span", {
+		className: s.visuallyHidden,
+		children: b.map((e, t) => e.description == null ? null : /* @__PURE__ */ f("span", {
+			id: `${N}chip${String(t)}-description`,
+			children: e.description
+		}, e.value))
+	}) : null, U = {
+		ref: l,
+		id: P.id,
+		className: e(c.group, D),
+		disabled: P.disabled,
+		"data-size": x,
+		"data-invalid": P.invalid || void 0,
+		"data-readonly": P.readOnly || void 0,
+		"aria-labelledby": j ?? (M["aria-label"] ? void 0 : P.groupLabelId),
+		"aria-describedby": P.describedBy,
+		"aria-invalid": P.invalid || void 0,
+		"aria-busy": P.busy || void 0,
+		onBlur: F,
+		...M
+	};
+	return d === "single" ? /* @__PURE__ */ p(m.Root, {
+		...U,
+		type: "single",
+		role: "radiogroup",
+		"aria-required": P.required || void 0,
+		"aria-readonly": P.readOnly || void 0,
+		value: R[0] ?? "",
+		onValueChange: (e) => {
+			z(e ? [e] : h);
+		},
+		children: [
+			V,
+			H,
+			n(T, R, P.disabled)
+		]
+	}) : /* @__PURE__ */ p(m.Root, {
+		...U,
+		type: "multiple",
+		role: "group",
+		value: [...R],
+		onValueChange: (e) => {
+			z([...e].sort((e, t) => B.indexOf(e) - B.indexOf(t)));
+		},
+		children: [
+			V,
+			H,
+			n(T, R, P.disabled)
+		]
+	});
+}));
+//#endregion
+export { _ as ChipGroup };
+
+//# sourceMappingURL=ChipGroup.js.map

package/dist/components/actions/ChipGroup/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","names":["_Fragment","chipStyles","messageStyles","styles","chip_module_default","messages_module_default","ChipGroup_module_default","Fragment$1","EMPTY","ChipContent","option","ChipGroup","markFieldAware","forwardRef","valueProp","disabledProp","invalidProp","readOnlyProp","idProp","describedByProp","ariaInvalid","labelledByProp","rest","props","autoId","useId","field","useResolvedField","handleBlur","useFocusLeave","onBlur","toArray","v","emit","onValueChange","type","next","values","setValues","useControllableValue","defaultValue","order","options","o","items","descriptionId","i","ToggleGroup","size","descriptions","common","cx","className","hiddenInputs","name","a","b"],"sources":["../../../../src/components/actions/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { ToggleGroup } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport chipStyles from '#components/actions/ToggleChip/chip.module.css'\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 messageStyles from '#components/inputs/internal/messages.module.css'\nimport styles from './ChipGroup.module.css'\n\nexport interface ChipOption extends ChoiceOption {\n  /** A leading glyph. One icon per chip at most — and only when it carries meaning. */\n  icon?: ReactNode\n  /** How many items the chip matches, in tabular figures after the label. */\n  count?: number\n}\n\nexport type ChipGroupSize = 'sm' | 'md'\n\ninterface ChipGroupBaseProps {\n  options: readonly ChipOption[]\n  size?: ChipGroupSize\n  disabled?: boolean\n  /** Critical edge on the resting chips + `aria-invalid`. Set for you inside a `<Fieldset error>`. */\n  invalid?: boolean\n  /** Focusable but not editable: presses are ignored. */\n  readOnly?: boolean\n  /** Emits one hidden input per selected value, for native form submission. */\n  name?: string\n}\n\nexport interface ChipGroupSingleProps {\n  /** One chip at most; pressing the selected chip clears it (`''`). */\n  type: 'single'\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport interface ChipGroupMultipleProps {\n  /** Any number of chips. */\n  type: 'multiple'\n  value?: readonly string[]\n  defaultValue?: readonly string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ChipGroupProps = ChipGroupBaseProps &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> &\n  (ChipGroupSingleProps | ChipGroupMultipleProps)\n\nconst EMPTY: readonly string[] = []\n\nfunction ChipContent({ option }: { option: ChipOption }) {\n  return (\n    <>\n      {option.icon ? (\n        <span className={chipStyles.icon} aria-hidden=\"true\">\n          {option.icon}\n        </span>\n      ) : null}\n      <span className={chipStyles.label}>{option.label}</span>\n      {option.count !== undefined ? <span className={chipStyles.count}>{option.count}</span> : null}\n    </>\n  )\n}\n\n/**\n * A set of chips that together make one answer — \"Email alerts\", \"Labels\". The chips look\n * exactly like `ToggleChip` (they share its style module) but behave as a group (Radix\n * ToggleGroup): one tab stop, arrow keys move between chips, Space/Enter presses.\n *\n * `type=\"multiple\"` — any number pressed; chips are toggle buttons in a `role=\"group\"`.\n * `type=\"single\"`   — at most one; chips are radios in a `role=\"radiogroup\"`.\n *\n * Label it with a `<Fieldset legend>` (see `ChipGroupField`), a `<Field>` or `aria-label`.\n * `onBlur` fires once, when focus leaves the whole group.\n *\n * <ChipGroup type=\"multiple\" aria-label=\"Email alerts\" options={alerts} defaultValue={['mentions']} />\n */\nexport const ChipGroup = markFieldAware(\n  forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(props, ref) {\n    const {\n      type,\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      options,\n      size = 'md',\n      disabled: disabledProp,\n      invalid: invalidProp,\n      readOnly: readOnlyProp,\n      name,\n      id: idProp,\n      className,\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    // Normalise both modes to an array internally.\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    const order = options.map((o) => o.value)\n\n    const items = options.map((o, i) => {\n      const descriptionId = `${autoId}chip${String(i)}-description`\n      return (\n        <ToggleGroup.Item\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={chipStyles.chip}\n          data-size={size}\n          data-invalid={field.invalid || undefined}\n          aria-describedby={o.description != null ? descriptionId : undefined}\n        >\n          <ChipContent option={o} />\n        </ToggleGroup.Item>\n      )\n    })\n\n    // Descriptions live outside the chips: inside, they'd become part of each chip's name.\n    const descriptions = options.some((o) => o.description != null) ? (\n      <span className={messageStyles.visuallyHidden}>\n        {options.map((o, i) =>\n          o.description != null ? (\n            <span key={o.value} id={`${autoId}chip${String(i)}-description`}>\n              {o.description}\n            </span>\n          ) : null,\n        )}\n      </span>\n    ) : null\n\n    const common = {\n      ref,\n      id: field.id,\n      className: cx(styles.group, className),\n      disabled: field.disabled,\n      'data-size': size,\n      'data-invalid': field.invalid || 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    return type === 'single' ? (\n      <ToggleGroup.Root\n        {...common}\n        type=\"single\"\n        role=\"radiogroup\"\n        aria-required={field.required || undefined}\n        aria-readonly={field.readOnly || undefined}\n        value={values[0] ?? ''}\n        onValueChange={(v) => {\n          setValues(v ? [v] : EMPTY)\n        }}\n      >\n        {items}\n        {descriptions}\n        {hiddenInputs(name, values, field.disabled)}\n      </ToggleGroup.Root>\n    ) : (\n      <ToggleGroup.Root\n        {...common}\n        type=\"multiple\"\n        role=\"group\"\n        value={[...values]}\n        onValueChange={(v) => {\n          setValues([...v].sort((a, b) => order.indexOf(a) - order.indexOf(b)))\n        }}\n      >\n        {items}\n        {descriptions}\n        {hiddenInputs(name, values, field.disabled)}\n      </ToggleGroup.Root>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/actions/ChipGroup/ChipGroup.module.js

@@ -0,0 +1,6 @@
+//#region src/components/actions/ChipGroup/ChipGroup.module.css
+var e = "kiln-ChipGroup__group", t = { group: e };
+//#endregion
+export { t as default, e as group };
+
+//# sourceMappingURL=ChipGroup.module.js.map

package/dist/components/actions/ChipGroup/ChipGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.module.js","names":["group","ChipGroup_module_default"],"sources":["../../../../src/components/actions/ChipGroup/ChipGroup.module.css"],"sourcesContent":["/*\n * A wrapping run of chips. The chips themselves are styled by the shared\n * actions/ToggleChip/chip.module.css, so a ChipGroup chip and a ToggleChip are identical.\n *\n * Component tokens:\n *   --chip-group-gap   default var(--space-2)\n */\n.group {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--chip-group-gap, var(--space-2));\n  min-inline-size: 0;\n}\n\n/* Read-only: chips stay focusable but don't invite a press. */\n.group[data-readonly] > * {\n  cursor: default;\n}\n"],"mappings":""}

package/dist/components/actions/ChipGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipGroup } from './ChipGroup.js';
+export type { ChipGroupProps, ChipGroupSingleProps, ChipGroupMultipleProps, ChipGroupSize, ChipOption, } from './ChipGroup.js';

package/dist/components/actions/IconButton/IconButton.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '../Button/index.js';
+export type IconButtonShape = 'auto' | 'round' | 'square';
+export interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIcon' | 'fullWidth' | 'aria-label'> {
+    /**
+     * Accessible name — required, because there is no visible text. Say what it does
+     * ("Close", "Copy link"), not what it looks like ("X").
+     */
+    label: string;
+    /** The glyph. A library icon or any SVG node; it is hidden from assistive tech. */
+    icon: ReactNode;
+    /**
+     * `auto` (default) follows the theme's action radius — a circle where actions are
+     * pills, a small square in Ledger. `round` forces a circle; `square` uses the field radius.
+     */
+    shape?: IconButtonShape;
+    /** Also set the native `title`, so pointer users get the name on hover. Default `false`. */
+    showTitle?: boolean;
+}
+/**
+ * A square, icon-only Button. Shares Button's variants, tones, sizes, `asChild` and
+ * `loading` — it *is* a Button with the padding taken out — so the two always match.
+ * Defaults to the quiet `ghost` + `neutral` pairing used in toolbars and headers.
+ *
+ * <IconButton label="Close" icon={<CloseIcon />} />
+ * <IconButton asChild label="GitHub" icon={<ArrowUpRightIcon />}><a href="…" /></IconButton>
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/actions/IconButton/IconButton.js

@@ -0,0 +1,28 @@
+import { cx as e } from "../../../utils/cx.js";
+import { Button as t } from "../Button/Button.js";
+import n from "./IconButton.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/actions/IconButton/IconButton.tsx
+var a = r(function({ label: r, icon: a, shape: o = "auto", showTitle: s = !1, variant: c = "ghost", tone: l = "neutral", title: u, className: d, children: f, ...p }, m) {
+	return /* @__PURE__ */ i(t, {
+		ref: m,
+		variant: c,
+		tone: l,
+		className: e(n.iconButton, d),
+		"data-shape": o,
+		"aria-label": r,
+		title: u ?? (s ? r : void 0),
+		leadingIcon: /* @__PURE__ */ i("span", {
+			className: n.glyph,
+			"aria-hidden": "true",
+			children: a
+		}),
+		...p,
+		children: f
+	});
+});
+//#endregion
+export { a as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/actions/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["styles","IconButton_module_default","IconButton","forwardRef","rest","Button","cx","className","shape","label","title","showTitle","icon"],"sources":["../../../../src/components/actions/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { Button, type ButtonProps } from '#components/actions/Button'\nimport styles from './IconButton.module.css'\n\nexport type IconButtonShape = 'auto' | 'round' | 'square'\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'leadingIcon' | 'trailingIcon' | 'fullWidth' | 'aria-label'\n> {\n  /**\n   * Accessible name — required, because there is no visible text. Say what it does\n   * (\"Close\", \"Copy link\"), not what it looks like (\"X\").\n   */\n  label: string\n  /** The glyph. A library icon or any SVG node; it is hidden from assistive tech. */\n  icon: ReactNode\n  /**\n   * `auto` (default) follows the theme's action radius — a circle where actions are\n   * pills, a small square in Ledger. `round` forces a circle; `square` uses the field radius.\n   */\n  shape?: IconButtonShape\n  /** Also set the native `title`, so pointer users get the name on hover. Default `false`. */\n  showTitle?: boolean\n}\n\n/**\n * A square, icon-only Button. Shares Button's variants, tones, sizes, `asChild` and\n * `loading` — it *is* a Button with the padding taken out — so the two always match.\n * Defaults to the quiet `ghost` + `neutral` pairing used in toolbars and headers.\n *\n * <IconButton label=\"Close\" icon={<CloseIcon />} />\n * <IconButton asChild label=\"GitHub\" icon={<ArrowUpRightIcon />}><a href=\"…\" /></IconButton>\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  {\n    label,\n    icon,\n    shape = 'auto',\n    showTitle = false,\n    variant = 'ghost',\n    tone = 'neutral',\n    title,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      tone={tone}\n      className={cx(styles.iconButton, className)}\n      data-shape={shape}\n      aria-label={label}\n      title={title ?? (showTitle ? label : undefined)}\n      leadingIcon={\n        <span className={styles.glyph} aria-hidden=\"true\">\n          {icon}\n        </span>\n      }\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n})\n"],"mappings":";;;;;;AAmCA,IAAaE,IAAaC,EAA+C,SACvE,EACE,UACA,SACA,WAAQ,QACR,eAAY,IACZ,aAAU,SACV,UAAO,WACP,UACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACC,GAAD;EACO;EACI;EACH;EACN,WAAWC,EAAGN,EAAO,YAAYO,CAAS;EAC1C,cAAYC;EACZ,cAAYC;EACZ,OAAOC,MAAUC,IAAYF,IAAQ,KAAA;EACrC,aACE,kBAAC,QAAD;GAAM,WAAWT,EAAO;GAAO,eAAY;GACxC,UAAAY;EACG,CAAA;EAER,GAAIR;EAEH;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/actions/IconButton/IconButton.module.js

@@ -0,0 +1,9 @@
+//#region src/components/actions/IconButton/IconButton.module.css
+var e = "kiln-IconButton__iconButton", t = "kiln-IconButton__glyph", n = {
+	iconButton: e,
+	glyph: t
+};
+//#endregion
+export { n as default, t as glyph, e as iconButton };
+
+//# sourceMappingURL=IconButton.module.js.map

package/dist/components/actions/IconButton/IconButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.js","names":["iconButton","glyph","IconButton_module_default"],"sources":["../../../../src/components/actions/IconButton/IconButton.module.css"],"sourcesContent":["/*\n * Layered on top of Button (same element): Button owns colour, tone, variant, press and\n * focus; this module only makes it square and sizes the glyph.\n *\n * Component tokens:\n *   --icon-button-radius   default var(--button-radius, var(--radius-action)) for shape=auto\n */\n.iconButton[data-shape] {\n  --_glyph: 1.25rem;\n\n  inline-size: var(--_h);\n  block-size: var(--_h);\n  min-inline-size: var(--_h);\n  padding: 0;\n  flex: none;\n  border-radius: var(--icon-button-radius, var(--button-radius, var(--radius-action)));\n}\n.iconButton[data-shape='round'] {\n  border-radius: 50%;\n}\n.iconButton[data-shape='square'] {\n  border-radius: var(--radius-field);\n}\n\n.iconButton[data-size='sm'] {\n  --_glyph: 1rem;\n}\n.iconButton[data-size='lg'] {\n  --_glyph: 1.5rem;\n}\n\n/* Glyph sizes are icon geometry, not type — fixed so a 20px-grid icon lands on whole pixels. */\n.glyph {\n  display: inline-flex;\n  font-size: var(--_glyph);\n  line-height: 0;\n}\n"],"mappings":""}

package/dist/components/actions/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps, IconButtonShape } from './IconButton.js';

package/dist/components/actions/ModeToggle/ModeToggle.d.ts

@@ -0,0 +1,28 @@
+import type { Size } from '../../../utils/tokens.js';
+import { type IconButtonProps } from '../IconButton/index.js';
+export type ModeToggleVariant = 'icon' | 'segmented';
+export interface ModeToggleProps {
+    /**
+     * `icon` (default): one IconButton that cycles light → dark → system.
+     * `segmented`: all three modes visible at once, for settings pages and footers.
+     */
+    variant?: ModeToggleVariant;
+    size?: Size;
+    /** Segmented only: show icons without labels (labels stay as accessible names). */
+    iconOnly?: boolean;
+    /** Icon only: button styling, forwarded to IconButton. Default `ghost`. */
+    buttonVariant?: IconButtonProps['variant'];
+    /** Accessible name for the segmented group. Default "Colour mode". */
+    'aria-label'?: string;
+    className?: string;
+    id?: string;
+}
+/**
+ * Reads and sets the colour mode from `useTheme()`. **Requires `<ThemeProvider>`** —
+ * like `useTheme`, it throws outside one, because a mode toggle that silently does
+ * nothing is worse than a loud error.
+ *
+ * The icon shows the *current* mode; the accessible name says what it is and what
+ * a press will switch to.
+ */
+export declare const ModeToggle: import("react").ForwardRefExoticComponent<ModeToggleProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/actions/ModeToggle/ModeToggle.js

@@ -0,0 +1,63 @@
+import { useTheme as e } from "../../../theme/context.js";
+import { MoonIcon as t, SunIcon as n, SystemIcon as r } from "../../../icons/icons.js";
+import { IconButton as i } from "../IconButton/IconButton.js";
+import { SegmentedControl as a } from "../SegmentedControl/SegmentedControl.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/actions/ModeToggle/ModeToggle.tsx
+var c = [
+	"light",
+	"dark",
+	"system"
+], l = {
+	light: {
+		label: "Light",
+		icon: /* @__PURE__ */ s(n, {})
+	},
+	dark: {
+		label: "Dark",
+		icon: /* @__PURE__ */ s(t, {})
+	},
+	system: {
+		label: "System",
+		icon: /* @__PURE__ */ s(r, {})
+	}
+}, u = o(function({ variant: t = "icon", size: n = "md", iconOnly: r = !1, buttonVariant: o = "ghost", "aria-label": u, className: d, id: f }, p) {
+	let { mode: m, setMode: h } = e();
+	if (t === "segmented") return /* @__PURE__ */ s(a, {
+		ref: p,
+		id: f,
+		className: d,
+		"aria-label": u ?? "Colour mode",
+		size: n,
+		iconOnly: r,
+		value: m,
+		onValueChange: (e) => {
+			h(e);
+		},
+		options: c.map((e) => ({
+			value: e,
+			label: l[e].label,
+			icon: l[e].icon
+		}))
+	});
+	let g = c[(c.indexOf(m) + 1) % c.length] ?? "light";
+	return /* @__PURE__ */ s(i, {
+		ref: p,
+		id: f,
+		className: d,
+		variant: o,
+		size: n,
+		label: u ?? `Colour mode: ${l[m].label}. Switch to ${l[g].label.toLowerCase()}`,
+		title: `Colour mode: ${l[m].label}`,
+		icon: l[m].icon,
+		"data-mode-value": m,
+		onClick: () => {
+			h(g);
+		}
+	});
+});
+//#endregion
+export { u as ModeToggle };
+
+//# sourceMappingURL=ModeToggle.js.map

package/dist/components/actions/ModeToggle/ModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeToggle.js","names":["ORDER","MODE_META","SunIcon","MoonIcon","SystemIcon","ModeToggle","forwardRef","ariaLabel","useTheme","variant","SegmentedControl","mode","v","m","next","IconButton","buttonVariant"],"sources":["../../../../src/components/actions/ModeToggle/ModeToggle.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef, type ReactNode } from 'react'\nimport { useTheme, type ColorMode } from '#theme'\nimport { MoonIcon, SunIcon, SystemIcon } from '#icons'\nimport type { Size } from '#utils/tokens'\nimport { IconButton, type IconButtonProps } from '#components/actions/IconButton'\nimport { SegmentedControl } from '#components/actions/SegmentedControl'\n\nexport type ModeToggleVariant = 'icon' | 'segmented'\n\nconst ORDER: readonly ColorMode[] = ['light', 'dark', 'system']\n\nconst MODE_META: Record<ColorMode, { label: string; icon: ReactNode }> = {\n  light: { label: 'Light', icon: <SunIcon /> },\n  dark: { label: 'Dark', icon: <MoonIcon /> },\n  system: { label: 'System', icon: <SystemIcon /> },\n}\n\nexport interface ModeToggleProps {\n  /**\n   * `icon` (default): one IconButton that cycles light → dark → system.\n   * `segmented`: all three modes visible at once, for settings pages and footers.\n   */\n  variant?: ModeToggleVariant\n  size?: Size\n  /** Segmented only: show icons without labels (labels stay as accessible names). */\n  iconOnly?: boolean\n  /** Icon only: button styling, forwarded to IconButton. Default `ghost`. */\n  buttonVariant?: IconButtonProps['variant']\n  /** Accessible name for the segmented group. Default \"Colour mode\". */\n  'aria-label'?: string\n  className?: string\n  id?: string\n}\n\n/**\n * Reads and sets the colour mode from `useTheme()`. **Requires `<ThemeProvider>`** —\n * like `useTheme`, it throws outside one, because a mode toggle that silently does\n * nothing is worse than a loud error.\n *\n * The icon shows the *current* mode; the accessible name says what it is and what\n * a press will switch to.\n */\nexport const ModeToggle = forwardRef<HTMLElement, ModeToggleProps>(function ModeToggle(\n  {\n    variant = 'icon',\n    size = 'md',\n    iconOnly = false,\n    buttonVariant = 'ghost',\n    'aria-label': ariaLabel,\n    className,\n    id,\n  },\n  ref,\n) {\n  const { mode, setMode } = useTheme()\n\n  if (variant === 'segmented') {\n    return (\n      <SegmentedControl\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        id={id}\n        className={className}\n        aria-label={ariaLabel ?? 'Colour mode'}\n        size={size}\n        iconOnly={iconOnly}\n        value={mode}\n        onValueChange={(v) => {\n          setMode(v as ColorMode)\n        }}\n        options={ORDER.map((m) => ({\n          value: m,\n          label: MODE_META[m].label,\n          icon: MODE_META[m].icon,\n        }))}\n      />\n    )\n  }\n\n  const next = ORDER[(ORDER.indexOf(mode) + 1) % ORDER.length] ?? 'light'\n  return (\n    <IconButton\n      ref={ref as ForwardedRef<HTMLButtonElement>}\n      id={id}\n      className={className}\n      variant={buttonVariant}\n      size={size}\n      label={\n        ariaLabel ??\n        `Colour mode: ${MODE_META[mode].label}. Switch to ${MODE_META[next].label.toLowerCase()}`\n      }\n      title={`Colour mode: ${MODE_META[mode].label}`}\n      icon={MODE_META[mode].icon}\n      data-mode-value={mode}\n      onClick={() => {\n        setMode(next)\n      }}\n    />\n  )\n})\n"],"mappings":";;;;;;;AASA,IAAMA,IAA8B;CAAC;CAAS;CAAQ;AAAQ,GAExDC,IAAmE;CACvE,OAAO;EAAE,OAAO;EAAS,MAAM,kBAACC,GAAD,CAAU,CAAA;CAAE;CAC3C,MAAM;EAAE,OAAO;EAAQ,MAAM,kBAACC,GAAD,CAAW,CAAA;CAAE;CAC1C,QAAQ;EAAE,OAAO;EAAU,MAAM,kBAACC,GAAD,CAAa,CAAA;CAAE;AAClD,GA2BaC,IAAaC,EAAyC,SACjE,EACE,aAAU,QACV,UAAO,MACP,cAAW,IACX,mBAAgB,SAChB,cAAcC,GACd,cACA,SAEF,GACA;CACA,IAAM,EAAE,SAAM,eAAYC,EAAS;CAEnC,IAAIC,MAAY,aACd,OACE,kBAACC,GAAD;EACO;EACD;EACO;EACX,cAAYH,KAAa;EACnB;EACI;EACV,OAAOI;EACP,gBAAgB,MAAM;GACpB,EAAQC,CAAc;EACxB;EACA,SAASZ,EAAM,KAAK,OAAO;GACzB,OAAOa;GACP,OAAOZ,EAAUY,EAAE,CAAC;GACpB,MAAMZ,EAAUY,EAAE,CAAC;EACrB,EAAE;CACH,CAAA;CAIL,IAAMC,IAAOd,GAAOA,EAAM,QAAQW,CAAI,IAAI,KAAKX,EAAM,WAAW;CAChE,OACE,kBAACe,GAAD;EACO;EACD;EACO;EACX,SAASC;EACH;EACN,OACET,KACA,gBAAgBN,EAAUU,EAAK,CAAC,MAAM,cAAcV,EAAUa,EAAK,CAAC,MAAM,YAAY;EAExF,OAAO,gBAAgBb,EAAUU,EAAK,CAAC;EACvC,MAAMV,EAAUU,EAAK,CAAC;EACtB,mBAAiBA;EACjB,eAAe;GACb,EAAQG,CAAI;EACd;CACD,CAAA;AAEL,CAAC"}

package/dist/components/actions/ModeToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { ModeToggle } from './ModeToggle.js';
+export type { ModeToggleProps, ModeToggleVariant } from './ModeToggle.js';

package/dist/components/actions/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { ToggleGroup } from 'radix-ui';
+import { type Responsive } from '../../../utils/responsive.js';
+import type { Size } from '../../../utils/tokens.js';
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+type RootPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof ToggleGroup.Root>, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'children' | 'asChild'>;
+export interface SegmentedControlProps extends RootPrimitiveProps {
+    /** Segments as data. Alternatively pass `SegmentedControl.Item` children. */
+    options?: readonly SegmentedControlOption[];
+    children?: ReactNode;
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value when uncontrolled. Defaults to the first segment. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Control size. Responsive: `{ base: 'lg', md: 'md' }` for a bigger touch target on phones. */
+    size?: Responsive<Size>;
+    /**
+     * Stretch to the container's width. Segments are always equal widths. Responsive:
+     * `{ base: true, md: false }` fills a phone screen and sits inline from `md` up.
+     */
+    fullWidth?: Responsive<boolean>;
+    /** Show only icons; labels become each segment's accessible name. */
+    iconOnly?: boolean;
+    /** Emits a hidden input with the selected value, for native form submission. */
+    name?: string;
+    /** Critical edge + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    /** Focusable but not editable: sets `aria-readonly` and ignores selection changes. */
+    readOnly?: boolean;
+}
+export interface SegmentedControlItemProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup.Item>, 'children'> {
+    value: string;
+    /** Visible label (or accessible name when the control is `iconOnly`). */
+    children: ReactNode;
+    icon?: ReactNode;
+}
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<SegmentedControlItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/actions/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,109 @@
+import { cx as e } from "../../../utils/cx.js";
+import { BREAKPOINTS as t, mergeStyles as n } from "../../../utils/responsive.js";
+import { useFocusLeave as r } from "../../inputs/CheckboxGroup/choice.js";
+import { markFieldAware as i, useResolvedField as a } from "../../inputs/internal/FieldContext.js";
+import o from "./SegmentedControl.module.js";
+import { Children as s, createContext as c, forwardRef as l, isValidElement as u, useCallback as d, useContext as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { ToggleGroup as g } from "radix-ui";
+//#region src/components/actions/SegmentedControl/SegmentedControl.tsx
+var _ = c(!1), v = l(function({ icon: t, className: n, children: r, ...i }, a) {
+	let s = f(_);
+	return /* @__PURE__ */ h(g.Item, {
+		ref: a,
+		className: e(o.item, n),
+		...i,
+		children: [t ? /* @__PURE__ */ m("span", {
+			className: o.icon,
+			"aria-hidden": "true",
+			children: t
+		}) : null, /* @__PURE__ */ m("span", {
+			className: s ? o.srOnly : o.label,
+			children: r
+		})]
+	});
+});
+function y(e, n, r) {
+	if (typeof n != "object") return { [`data-${e}`]: r(n) };
+	let i = {}, a = n.base;
+	i[`data-${e}`] = a === void 0 ? void 0 : r(a);
+	for (let r of t) {
+		let t = n[r];
+		r !== "base" && t !== void 0 && (i[`data-${e}-${r}`] = String(t));
+	}
+	return i;
+}
+function b(e) {
+	let t = [];
+	return s.forEach(e, (e) => {
+		u(e) && typeof e.props.value == "string" && t.push(e.props.value);
+	}), t;
+}
+var x = l(function({ options: t, children: i, value: s, defaultValue: c, onValueChange: l, size: u = "md", fullWidth: f = !1, iconOnly: x = !1, name: S, invalid: C, readOnly: w, disabled: T, id: E, onBlur: D, className: O, style: k, "aria-describedby": A, "aria-invalid": j, "aria-labelledby": M, ...N }, P) {
+	let F = a({
+		id: E,
+		describedBy: A,
+		invalid: C,
+		ariaInvalid: j,
+		disabled: T,
+		readOnly: w
+	}), I = r(D), L = t ? t.map((e) => e.value) : b(i), [R, z] = p(c ?? L[0]), B = s ?? R, V = d((e) => {
+		e && !F.readOnly && (s === void 0 && z(e), l?.(e));
+	}, [
+		s,
+		l,
+		F.readOnly
+	]), H = B === void 0 ? -1 : L.indexOf(B), U = {
+		"--_count": Math.max(L.length, 1),
+		"--_index": Math.max(H, 0)
+	};
+	return /* @__PURE__ */ m(_.Provider, {
+		value: x,
+		children: /* @__PURE__ */ h(g.Root, {
+			ref: P,
+			type: "single",
+			role: "radiogroup",
+			value: B ?? "",
+			onValueChange: V,
+			id: F.id,
+			disabled: F.disabled,
+			"aria-labelledby": M ?? (N["aria-label"] ? void 0 : F.labelId),
+			"aria-describedby": F.describedBy,
+			"aria-invalid": F.invalid || void 0,
+			"aria-required": F.required || void 0,
+			"aria-readonly": F.readOnly || void 0,
+			"aria-busy": F.busy || void 0,
+			"data-invalid": F.invalid || void 0,
+			"data-readonly": F.readOnly || void 0,
+			onBlur: I,
+			className: e(o.root, O),
+			...y("size", u, String),
+			...y("full-width", f, (e) => e ? "" : void 0),
+			"data-icon-only": x || void 0,
+			style: n(U, k),
+			...N,
+			children: [
+				H >= 0 ? /* @__PURE__ */ m("span", {
+					className: o.indicator,
+					"aria-hidden": "true"
+				}) : null,
+				t ? t.map((e) => /* @__PURE__ */ m(v, {
+					value: e.value,
+					icon: e.icon,
+					disabled: e.disabled,
+					children: e.label
+				}, e.value)) : i,
+				S && B ? /* @__PURE__ */ m("input", {
+					type: "hidden",
+					name: S,
+					value: B,
+					disabled: F.disabled || void 0
+				}) : null
+			]
+		})
+	});
+}), S = i(Object.assign(x, { Item: v }));
+//#endregion
+export { S as SegmentedControl };
+
+//# sourceMappingURL=SegmentedControl.js.map