@eifi1/ui-kit 0.21.0 → 0.22.0

package/dist/components/settings-fields.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aQ as SelectProps } from '../kit-labels-D1J2_jyD.js';
+import { bg as SelectProps } from '../kit-labels-R8mIAc9N.js';
 import { ThemePreference } from '../theme/theme-store.js';
-import './data-table-labels.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -25,7 +27,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -33,11 +34,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -56,14 +56,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
 import 'zustand/middleware';
 import 'zustand';
 

package/dist/components/share-card.d.ts

@@ -1,14 +1,13 @@
 import 'react';
 import './account-chips.js';
 import './dialog-frame.js';
-export { U as DEFAULT_SHARE_CARD_LABELS, aR as ShareAddRequest, aS as ShareCandidate, aT as ShareCard, aU as ShareCardLabels, aV as ShareCardProps, aW as ShareDialog, aX as ShareDialogProps, aY as ShareGrantee, aZ as SharePanel, a_ as SharePanelProps, a$ as SharePendingGrant, b0 as ShareRole } from '../kit-labels-D1J2_jyD.js';
+export { a7 as DEFAULT_SHARE_CARD_LABELS, bh as ShareAddRequest, bi as ShareCandidate, bj as ShareCard, bk as ShareCardLabels, bl as ShareCardProps, bm as ShareDialog, bn as ShareDialogProps, bo as ShareGrantee, bp as SharePanel, bq as SharePanelProps, br as SharePendingGrant, bs as ShareRole } from '../kit-labels-R8mIAc9N.js';
 import 'lucide-react';
 import '../lib/format.js';
 import './chip.js';
-import '../data-table-3mi2R3so.js';
+import '../data-table-labels-B7OdnM0S.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
-import './data-table-labels.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './mini-calendar.js';
@@ -31,16 +30,14 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -62,3 +59,8 @@ import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';

package/dist/components/sign-chip.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+
+/** The words a {@link SignChip} says — the `signChip` namespace of
+ *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */
+interface SignChipLabels {
+    /** The chip's text while the figure is negative — money going out. */
+    outflow: string;
+    /** The chip's text while the figure is positive — money coming in. */
+    inflow: string;
+    /** The chip's accessible name and its tooltip: the state it is in, and what a press
+     *  turns it into — `current` and `next` are the two words above. The other option is
+     *  nowhere on screen to be read, so the name has to say both. */
+    direction: (current: string, next: string) => string;
+}
+declare const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels;
+interface SignChipProps {
+    /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s
+     *  `negative` is, so one state feeds both: `<AmountInput negative={neg}
+     *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}
+     *  onNegativeChange={setNeg} />`. */
+    negative: boolean;
+    /** A press: the other direction. */
+    onNegativeChange: (negative: boolean) => void;
+    disabled?: boolean;
+    /** Per-chip overrides of the `signChip` namespace. */
+    labels?: Partial<SignChipLabels>;
+    /** On the chip. Place it in its row from here — keksdose's form passes `self-end`
+     *  to sit it on the display figure's baseline strip. */
+    className?: string;
+}
+/**
+ * The SIGN of an amount, as one chip that shows only the state it is in — keksdose
+ * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,
+ * so the figure and its direction come from one package and wear one palette.
+ *
+ * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width
+ * telling you what the figure is NOT, and at a phone's width it was the widest thing on
+ * the form after the figure itself (#417). This sits beside the amount and reads as one
+ * phrase with it — "−42,50 Outflow" — and a press flips it. Hiding the alternative costs
+ * discoverability, so two things pay it back: the ± glyph and the swap arrows say "this
+ * is a control", not a badge; and the name and tooltip spell out both the current state
+ * and what a press will do.
+ *
+ * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its
+ * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it
+ * is an action button with no `aria-pressed`: "Direction: Inflow, not pressed" would
+ * name no on-state for "not pressed" to be the absence of. The name changing under
+ * focus is the echo.
+ *
+ * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same
+ * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the
+ * figure with (dev#434): only the text and the border carry the tint, on a neutral
+ * surface, because a filled pill next to a tinted figure reads as one smear.
+ *
+ * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no
+ * field height to match — and from `md` up exactly a labelled field's 42px, so it never
+ * stands taller than the fields in its grid row (#431).
+ *
+ * An exported chip rather than an `AmountInput signControl` slot: the slot would have
+ * to own the row the two share, and every form lays that row out differently (beside
+ * the figure on a phone, in a grid column on a desktop). The chip is the part that was
+ * being re-written; the row stays the form's.
+ */
+declare function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps): react.JSX.Element;
+
+export { DEFAULT_SIGN_CHIP_LABELS, SignChip, type SignChipLabels, type SignChipProps };

package/dist/components/sign-chip.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpDown, Minus, Plus } from "lucide-react";
+import { Chip } from "./chip.js";
+import { Tooltip } from "./tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_SIGN_CHIP_LABELS = {
+  outflow: "Outflow",
+  inflow: "Inflow",
+  direction: (current, next) => `Direction: ${current} \u2014 switch to ${next}`
+};
+function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }) {
+  const labels = useKitLabels("signChip", DEFAULT_SIGN_CHIP_LABELS, labelsProp);
+  const current = negative ? labels.outflow : labels.inflow;
+  const next = negative ? labels.inflow : labels.outflow;
+  const name = labels.direction(current, next);
+  return /* @__PURE__ */ jsx(Tooltip, { label: name, lazy: true, children: /* @__PURE__ */ jsxs(
+    Chip,
+    {
+      size: "lg",
+      tone: negative ? "expense" : "income",
+      icon: negative ? Minus : Plus,
+      onClick: () => onNegativeChange(!negative),
+      disabled,
+      "aria-label": name,
+      className: cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", className),
+      children: [
+        current,
+        /* @__PURE__ */ jsx(ArrowUpDown, { className: "ms-1.5 inline size-3.5 align-[-0.2em] opacity-60", "aria-hidden": true })
+      ]
+    }
+  ) });
+}
+export {
+  DEFAULT_SIGN_CHIP_LABELS,
+  SignChip
+};
+//# sourceMappingURL=sign-chip.js.map

package/dist/components/sign-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sign-chip.tsx"],"sourcesContent":["import { ArrowUpDown, Minus, Plus } from \"lucide-react\";\nimport { Chip } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words a {@link SignChip} says — the `signChip` namespace of\n *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */\nexport interface SignChipLabels {\n  /** The chip's text while the figure is negative — money going out. */\n  outflow: string;\n  /** The chip's text while the figure is positive — money coming in. */\n  inflow: string;\n  /** The chip's accessible name and its tooltip: the state it is in, and what a press\n   *  turns it into — `current` and `next` are the two words above. The other option is\n   *  nowhere on screen to be read, so the name has to say both. */\n  direction: (current: string, next: string) => string;\n}\n\nexport const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {\n  outflow: \"Outflow\",\n  inflow: \"Inflow\",\n  direction: (current, next) => `Direction: ${current} — switch to ${next}`,\n};\n\nexport interface SignChipProps {\n  /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s\n   *  `negative` is, so one state feeds both: `<AmountInput negative={neg}\n   *  onNegativeChange={setNeg} />` and `<SignChip negative={neg}\n   *  onNegativeChange={setNeg} />`. */\n  negative: boolean;\n  /** A press: the other direction. */\n  onNegativeChange: (negative: boolean) => void;\n  disabled?: boolean;\n  /** Per-chip overrides of the `signChip` namespace. */\n  labels?: Partial<SignChipLabels>;\n  /** On the chip. Place it in its row from here — keksdose's form passes `self-end`\n   *  to sit it on the display figure's baseline strip. */\n  className?: string;\n}\n\n/**\n * The SIGN of an amount, as one chip that shows only the state it is in — keksdose\n * K15, its `DirectionToggle` (feedback #417, #430, #431, dev#434) made a kit piece,\n * so the figure and its direction come from one package and wear one palette.\n *\n * WHY A CHIP, NOT A SEGMENTED CONTROL. A two-option toggle spends half its width\n * telling you what the figure is NOT, and at a phone's width it was the widest thing on\n * the form after the figure itself (#417). This sits beside the amount and reads as one\n * phrase with it — \"−42,50 Outflow\" — and a press flips it. Hiding the alternative costs\n * discoverability, so two things pay it back: the ± glyph and the swap arrows say \"this\n * is a control\", not a badge; and the name and tooltip spell out both the current state\n * and what a press will do.\n *\n * NOT A PRESSED/UNPRESSED TOGGLE. A {@link Chip} toggle has a FIXED label naming its\n * on-state, with `aria-pressed` carrying the state. Here the word IS the state, so it\n * is an action button with no `aria-pressed`: \"Direction: Inflow, not pressed\" would\n * name no on-state for \"not pressed\" to be the absence of. The name changing under\n * focus is the echo.\n *\n * THE COLOUR is the money pairing — the chip's `expense` / `income` tones, the same\n * `--money-expense` / `--money-income` that {@link AmountInput}'s `tone` paints the\n * figure with (dev#434): only the text and the border carry the tint, on a neutral\n * surface, because a filled pill next to a tinted figure reads as one smear.\n *\n * SIZE. `lg` on a phone — the 44px touch target beside a display figure that has no\n * field height to match — and from `md` up exactly a labelled field's 42px, so it never\n * stands taller than the fields in its grid row (#431).\n *\n * An exported chip rather than an `AmountInput signControl` slot: the slot would have\n * to own the row the two share, and every form lays that row out differently (beside\n * the figure on a phone, in a grid column on a desktop). The chip is the part that was\n * being re-written; the row stays the form's.\n */\nexport function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps) {\n  const labels = useKitLabels(\"signChip\", DEFAULT_SIGN_CHIP_LABELS, labelsProp);\n  const current = negative ? labels.outflow : labels.inflow;\n  const next = negative ? labels.inflow : labels.outflow;\n  const name = labels.direction(current, next);\n  return (\n    <Tooltip label={name} lazy>\n      <Chip\n        size=\"lg\"\n        tone={negative ? \"expense\" : \"income\"}\n        icon={negative ? Minus : Plus}\n        onClick={() => onNegativeChange(!negative)}\n        disabled={disabled}\n        aria-label={name}\n        // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every\n        // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the\n        // hairline border is the 42px a labelled field measures (#431).\n        className={cn(\"shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5\", className)}\n      >\n        {current}\n        {/* The swap arrows after the word, in the label's own row: decoration (the\n            name already says what a press does), set a little apart from the word. */}\n        <ArrowUpDown className=\"ms-1.5 inline size-3.5 align-[-0.2em] opacity-60\" aria-hidden />\n      </Chip>\n    </Tooltip>\n  );\n}\n"],"mappings":";AAmFM,SAeE,KAfF;AAnFN,SAAS,aAAa,OAAO,YAAY;AACzC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAiBtB,MAAM,2BAA2C;AAAA,EACtD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW,CAAC,SAAS,SAAS,cAAc,OAAO,qBAAgB,IAAI;AACzE;AAmDO,SAAS,SAAS,EAAE,UAAU,kBAAkB,UAAU,QAAQ,YAAY,UAAU,GAAkB;AAC/G,QAAM,SAAS,aAAa,YAAY,0BAA0B,UAAU;AAC5E,QAAM,UAAU,WAAW,OAAO,UAAU,OAAO;AACnD,QAAM,OAAO,WAAW,OAAO,SAAS,OAAO;AAC/C,QAAM,OAAO,OAAO,UAAU,SAAS,IAAI;AAC3C,SACE,oBAAC,WAAQ,OAAO,MAAM,MAAI,MACxB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,WAAW,YAAY;AAAA,MAC7B,MAAM,WAAW,QAAQ;AAAA,MACzB,SAAS,MAAM,iBAAiB,CAAC,QAAQ;AAAA,MACzC;AAAA,MACA,cAAY;AAAA,MAIZ,WAAW,GAAG,4EAA4E,SAAS;AAAA,MAElG;AAAA;AAAA,QAGD,oBAAC,eAAY,WAAU,oDAAmD,eAAW,MAAC;AAAA;AAAA;AAAA,EACxF,GACF;AAEJ;","names":[]}

package/dist/components/swatch-picker.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { TileSize } from './tile-radio.js';
 
 interface SwatchPickerLabels {
@@ -62,6 +62,31 @@ interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithout
     tileClassName?: string;
     disabled?: boolean;
     labels?: Partial<SwatchPickerLabels>;
+    /**
+     * An 11px static label in a strip over the swatches, named by it (keksdose K2): the
+     * transaction row's flag picker stands between labelled fields and hand-builds this
+     * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.
+     * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the
+     * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a
+     * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an
+     * explicit `aria-label` / `aria-labelledby` still names the group instead.
+     */
+    label?: ReactNode;
+    /** A {@link FieldHint} beside the label. Only with `label`. */
+    hint?: ReactNode;
+    /**
+     * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for
+     * a picker that saves itself on change (keksdose K3, the flag picker in a row a
+     * read-only viewer may see). The swatches stay reachable and the arrow keys still
+     * walk them, but nothing reaches `onChange`; the reason is shown in the kit
+     * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and
+     * describes the group. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /** This picker COMMITS — choosing a colour saves it. Under a locked
+     *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
+     *  reason, as {@link Button}'s `commit` does. */
+    commit?: boolean;
 }
 /**
  * A row of colour swatches that is one radio group.
@@ -75,6 +100,6 @@ interface SwatchPickerProps<T extends string> extends Omit<ComponentPropsWithout
  * choose as they go; Home and End jump to the ends. Left and right follow the page's
  * direction.
  */
-declare function SwatchPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, size, tileClassName, disabled, labels, className, ...rest }: SwatchPickerProps<T>): react.JSX.Element;
+declare function SwatchPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, size, tileClassName, disabled, labels, label, hint, disabledReason: ownDisabledReason, commit, className, ...rest }: SwatchPickerProps<T>): react.JSX.Element;
 
 export { DEFAULT_SWATCH_PICKER_LABELS, type SwatchOption, SwatchPicker, type SwatchPickerLabels, type SwatchPickerProps };

package/dist/components/swatch-picker.js

@@ -1,9 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+import { hasContent, LabelStrip } from "./field-anatomy.js";
 const DEFAULT_SWATCH_PICKER_LABELS = {
   none: "No colour",
   mixed: "Mixed: the selected items have different colours"
@@ -19,56 +22,95 @@ function SwatchPicker({
   tileClassName,
   disabled = false,
   labels,
+  label,
+  hint,
+  disabledReason: ownDisabledReason,
+  commit,
   className,
   ...rest
 }) {
   const text = useKitLabels("swatchPicker", DEFAULT_SWATCH_PICKER_LABELS, labels);
   const mixedId = useId();
+  const labelId = useId();
+  const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
+  const locked = hasContent(disabledReason);
+  const labelled = hasContent(label);
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
   const items = [
     ...allowNone ? [{ key: null, label: text.none }] : [],
     ...options.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled }))
   ];
-  return /* @__PURE__ */ jsxs(
+  const tiles = /* @__PURE__ */ jsx(
+    TileRadioGroup,
+    {
+      items,
+      checked: mixed ? void 0 : value,
+      onSelect: (next) => {
+        if (!locked) onChange(next);
+      },
+      activation,
+      disabled: disabled && !locked,
+      size,
+      tileClassName: tileClassName || locked ? (_item, selected) => cn(
+        // The disabled tile's look, without its `disabled`: dimmed, a
+        // not-allowed cursor, and no hover offer on a tile that cannot be
+        // chosen. Not on the selected tile, whose frame IS its state.
+        locked && "cursor-not-allowed opacity-50",
+        locked && !selected && "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]",
+        tileClassName
+      ) : void 0,
+      renderTile: (item) => {
+        const opt = item.key === null ? void 0 : byValue.get(item.key);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15",
+              TILE_SIZE[size].swatch,
+              opt?.swatchClassName
+            ),
+            style: { background: opt?.color }
+          }
+        );
+      }
+    }
+  );
+  const group = /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
       role: "radiogroup",
-      "aria-disabled": disabled || void 0,
-      "aria-describedby": [rest["aria-describedby"], mixed && mixedId].filter(Boolean).join(" ") || void 0,
-      className: cn("flex flex-wrap items-center gap-1.5", className),
+      "aria-labelledby": labelled && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0 ? labelId : rest["aria-labelledby"],
+      "aria-disabled": disabled || locked || void 0,
+      "aria-describedby": [rest["aria-describedby"], mixed && mixedId, locked && reasonId].filter(Boolean).join(" ") || void 0,
+      className: cn("flex flex-wrap items-center gap-1.5", !labelled && className),
       children: [
-        /* @__PURE__ */ jsx(
-          TileRadioGroup,
-          {
-            items,
-            checked: mixed ? void 0 : value,
-            onSelect: onChange,
-            activation,
-            disabled,
-            size,
-            tileClassName: tileClassName ? () => tileClassName : void 0,
-            renderTile: (item) => {
-              const opt = item.key === null ? void 0 : byValue.get(item.key);
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: cn(
-                    "rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15",
-                    TILE_SIZE[size].swatch,
-                    opt?.swatchClassName
-                  ),
-                  style: { background: opt?.color }
-                }
-              );
+        locked ? (
+          // Inside the group, round the tiles — not round the group, whose box is the
+          // caller's row item. This row inherits the group's gap, wrap and alignment, so
+          // the tiles sit exactly where they sit unlocked. Below the row: each tile's own
+          // bubble (its colour's name) is above it.
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              label: disabledReason,
+              side: "bottom",
+              className: "flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]",
+              children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                tiles,
+                /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+              ] })
             }
-          }
-        ),
+          )
+        ) : tiles,
         mixed && /* @__PURE__ */ jsx("span", { id: mixedId, hidden: true, children: text.mixed })
       ]
     }
   );
+  if (!labelled) return group;
+  return /* @__PURE__ */ jsx(LabelStrip, { labelId, label, hint, disabled: disabled || locked, pad: "tiles", className, children: group });
 }
 export {
   DEFAULT_SWATCH_PICKER_LABELS,

package/dist/components/swatch-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n}\n\nexport const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {\n  none: \"No colour\",\n  mixed: \"Mixed: the selected items have different colours\",\n};\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: Partial<SwatchPickerLabels>;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n  return (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-disabled={disabled || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], mixed && mixedId].filter(Boolean).join(\" \") || undefined\n      }\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n    >\n      <TileRadioGroup\n        items={items}\n        checked={mixed ? undefined : value}\n        onSelect={onChange}\n        activation={activation}\n        disabled={disabled}\n        size={size}\n        tileClassName={tileClassName ? () => tileClassName : undefined}\n        renderTile={(item) => {\n          const opt = item.key === null ? undefined : byValue.get(item.key);\n          return (\n            <span\n              aria-hidden\n              // A hairline round the dot, drawn over whatever colour it is: a pale\n              // yellow swatch on a white surface is otherwise a hole in the row.\n              className={cn(\n                \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n                TILE_SIZE[size].swatch,\n                opt?.swatchClassName,\n              )}\n              style={{ background: opt?.color }}\n            />\n          );\n        }}\n      />\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8GI,SAoBQ,KApBR;AA9GJ,SAAS,OAAO,eAAe;AAE/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,WAAW,sBAAsB;AAUnC,MAAM,+BAAmD;AAAA,EAC9D,MAAM;AAAA,EACN,OAAO;AACT;AAuEO,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,OAAO,aAAa,gBAAgB,8BAA8B,MAAM;AAC9E,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,QAAQ,MAAM,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;AAClF,QAAM,QAAuB;AAAA,IAC3B,GAAI,YAAY,CAAC,EAAE,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC;AAAA,IACrD,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,OAAO,EAAE,OAAO,MAAM,EAAE,MAAM,UAAU,EAAE,SAAS,EAAE;AAAA,EAC9F;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe,YAAY;AAAA,MAC3B,oBACE,CAAC,KAAK,kBAAkB,GAAG,SAAS,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,MAE5E,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAE9D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,QAAQ,SAAY;AAAA,YAC7B,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAe,gBAAgB,MAAM,gBAAgB;AAAA,YACrD,YAAY,CAAC,SAAS;AACpB,oBAAM,MAAM,KAAK,QAAQ,OAAO,SAAY,QAAQ,IAAI,KAAK,GAAG;AAChE,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBAGX,WAAW;AAAA,oBACT;AAAA,oBACA,UAAU,IAAI,EAAE;AAAA,oBAChB,KAAK;AAAA,kBACP;AAAA,kBACA,OAAO,EAAE,YAAY,KAAK,MAAM;AAAA;AAAA,cAClC;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA,QAGC,SACC,oBAAC,UAAK,IAAI,SAAS,QAAM,MACtB,eAAK,OACR;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasContent, LabelStrip } from \"./field-anatomy\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n}\n\nexport const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {\n  none: \"No colour\",\n  mixed: \"Mixed: the selected items have different colours\",\n};\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: Partial<SwatchPickerLabels>;\n  /**\n   * An 11px static label in a strip over the swatches, named by it (keksdose K2): the\n   * transaction row's flag picker stands between labelled fields and hand-builds this\n   * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.\n   * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the\n   * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a\n   * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an\n   * explicit `aria-label` / `aria-labelledby` still names the group instead.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. */\n  hint?: ReactNode;\n  /**\n   * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a picker that saves itself on change (keksdose K3, the flag picker in a row a\n   * read-only viewer may see). The swatches stay reachable and the arrow keys still\n   * walk them, but nothing reaches `onChange`; the reason is shown in the kit\n   * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and\n   * describes the group. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — choosing a colour saves it. Under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason, as {@link Button}'s `commit` does. */\n  commit?: boolean;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  disabledReason: ownDisabledReason,\n  commit,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const labelId = useId();\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const labelled = hasContent(label);\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n  const tiles = (\n    <TileRadioGroup\n      items={items}\n      checked={mixed ? undefined : value}\n      // A locked picker saves on change, so the change is swallowed — the arrow keys\n      // still move the focus (and, automatic, would choose), and nothing is chosen.\n      onSelect={(next) => {\n        if (!locked) onChange(next);\n      }}\n      activation={activation}\n      // A reason wins over `disabled`: the tiles stay in the tab order.\n      disabled={disabled && !locked}\n      size={size}\n      tileClassName={\n        tileClassName || locked\n          ? (_item, selected) =>\n              cn(\n                // The disabled tile's look, without its `disabled`: dimmed, a\n                // not-allowed cursor, and no hover offer on a tile that cannot be\n                // chosen. Not on the selected tile, whose frame IS its state.\n                locked && \"cursor-not-allowed opacity-50\",\n                locked && !selected && \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\",\n                tileClassName,\n              )\n          : undefined\n      }\n      renderTile={(item) => {\n        const opt = item.key === null ? undefined : byValue.get(item.key);\n        return (\n          <span\n            aria-hidden\n            // A hairline round the dot, drawn over whatever colour it is: a pale\n            // yellow swatch on a white surface is otherwise a hole in the row.\n            className={cn(\n              \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n              TILE_SIZE[size].swatch,\n              opt?.swatchClassName,\n            )}\n            style={{ background: opt?.color }}\n          />\n        );\n      }}\n    />\n  );\n  const group = (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-labelledby={\n        labelled && rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n          ? labelId\n          : rest[\"aria-labelledby\"]\n      }\n      aria-disabled={disabled || locked || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], mixed && mixedId, locked && reasonId].filter(Boolean).join(\" \") ||\n        undefined\n      }\n      className={cn(\"flex flex-wrap items-center gap-1.5\", !labelled && className)}\n    >\n      {locked ? (\n        // Inside the group, round the tiles — not round the group, whose box is the\n        // caller's row item. This row inherits the group's gap, wrap and alignment, so\n        // the tiles sit exactly where they sit unlocked. Below the row: each tile's own\n        // bubble (its colour's name) is above it.\n        <Tooltip\n          label={disabledReason}\n          side=\"bottom\"\n          className=\"flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]\"\n        >\n          <>\n            {tiles}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        tiles\n      )}\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return group;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled || locked} pad=\"tiles\" className={className}>\n      {group}\n    </LabelStrip>\n  );\n}\n"],"mappings":";AA+KU,SAyCA,UAzCA,KAyCA,YAzCA;AA/KV,SAAS,OAAO,eAAe;AAE/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,WAAW,sBAAsB;AAE1C,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,YAAY,kBAAkB;AAShC,MAAM,+BAAmD;AAAA,EAC9D,MAAM;AAAA,EACN,OAAO;AACT;AAgGO,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,OAAO,aAAa,gBAAgB,8BAA8B,MAAM;AAC9E,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,gBAAgB,QAAQ,iBAAiB;AAChE,QAAM,SAAS,WAAW,cAAc;AACxC,QAAM,WAAW,WAAW,KAAK;AACjC,QAAM,UAAU,QAAQ,MAAM,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;AAClF,QAAM,QAAuB;AAAA,IAC3B,GAAI,YAAY,CAAC,EAAE,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC;AAAA,IACrD,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,OAAO,EAAE,OAAO,MAAM,EAAE,MAAM,UAAU,EAAE,SAAS,EAAE;AAAA,EAC9F;AACA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,QAAQ,SAAY;AAAA,MAG7B,UAAU,CAAC,SAAS;AAClB,YAAI,CAAC,OAAQ,UAAS,IAAI;AAAA,MAC5B;AAAA,MACA;AAAA,MAEA,UAAU,YAAY,CAAC;AAAA,MACvB;AAAA,MACA,eACE,iBAAiB,SACb,CAAC,OAAO,aACN;AAAA;AAAA;AAAA;AAAA,QAIE,UAAU;AAAA,QACV,UAAU,CAAC,YAAY;AAAA,QACvB;AAAA,MACF,IACF;AAAA,MAEN,YAAY,CAAC,SAAS;AACpB,cAAM,MAAM,KAAK,QAAQ,OAAO,SAAY,QAAQ,IAAI,KAAK,GAAG;AAChE,eACE;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YAGX,WAAW;AAAA,cACT;AAAA,cACA,UAAU,IAAI,EAAE;AAAA,cAChB,KAAK;AAAA,YACP;AAAA,YACA,OAAO,EAAE,YAAY,KAAK,MAAM;AAAA;AAAA,QAClC;AAAA,MAEJ;AAAA;AAAA,EACF;AAEF,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,mBACE,YAAY,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM,SACxE,UACA,KAAK,iBAAiB;AAAA,MAE5B,iBAAe,YAAY,UAAU;AAAA,MACrC,oBACE,CAAC,KAAK,kBAAkB,GAAG,SAAS,SAAS,UAAU,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACzF;AAAA,MAEF,WAAW,GAAG,uCAAuC,CAAC,YAAY,SAAS;AAAA,MAE1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,MAAK;AAAA,cACL,WAAU;AAAA,cAEV,2CACG;AAAA;AAAA,gBACD,oBAAC,UAAK,IAAI,UAAU,QAAM,MACvB,0BACH;AAAA,iBACF;AAAA;AAAA,UACF;AAAA,YAEA;AAAA,QAID,SACC,oBAAC,UAAK,IAAI,SAAS,QAAM,MACtB,eAAK,OACR;AAAA;AAAA;AAAA,EAEJ;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAAC,cAAW,SAAkB,OAAc,MAAY,UAAU,YAAY,QAAQ,KAAI,SAAQ,WAC/F,iBACH;AAEJ;","names":[]}

package/dist/components/switch.d.ts

@@ -56,6 +56,25 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
      * label WITHOUT a literal "*". No mark without a label.
      */
     required?: boolean;
+    /**
+     * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is
+     * the control that "takes effect the moment it is flipped", so it is the first one
+     * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native
+     * `disabled`, out of the tab order, so the reason never reached a keyboard.
+     *
+     * With a reason the switch is `aria-disabled` instead: still focusable, a click or
+     * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in
+     * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row
+     * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the
+     * switch anew (it moves in or out of the Tooltip), as a locked Button is.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it
+     * is locked the `disabledReason` way with the lock's reason (which wins over its
+     * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
+     */
+    commit?: boolean;
 }
 /**
  * A native checkbox drawn as a track and thumb, announced as a switch.

package/dist/components/switch.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { cn } from "../lib/cn.js";
 import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { LockedReason, useLockReason } from "./field-parts.js";
 const SIZES = {
   // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.
   sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:start-[14px]" },
@@ -23,35 +24,52 @@ const Switch = forwardRef(function Switch2({
   id,
   disabled,
   required,
+  disabledReason,
+  commit,
+  onClick,
   ...rest
 }, ref) {
   const generated = useId();
   const inputId = id ?? generated;
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const looksDisabled = Boolean(disabled) || locked;
   const descriptionId = `${inputId}-description`;
   const showDescription = hasMessage(description);
   const bare = label === void 0 && !showDescription;
   const geometry = SIZES[size];
-  const control = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && className), children: [
+  const track = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && !locked && className), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         id: bare ? id : inputId,
-        disabled,
+        disabled: locked ? void 0 : disabled,
         required,
         ...rest,
         type: "checkbox",
         role: "switch",
-        "aria-describedby": mergeDescribedBy(rest["aria-describedby"], showDescription && descriptionId),
+        "aria-disabled": locked || rest["aria-disabled"] || void 0,
+        "aria-describedby": mergeDescribedBy(
+          rest["aria-describedby"],
+          showDescription && descriptionId,
+          locked && lock.reasonId
+        ),
+        onClick: locked ? void 0 : onClick,
         onChange: (e) => {
+          if (locked) {
+            e.currentTarget.checked = !e.currentTarget.checked;
+            return;
+          }
           onChange?.(e);
           onCheckedChange?.(e.target.checked);
         },
-        className: cn(TRACK, geometry.track, inputClassName)
+        className: cn(TRACK, geometry.track, locked && "cursor-not-allowed", inputClassName)
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(THUMB, geometry.thumb) })
   ] });
+  const control = locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: cn("shrink-0", bare && className), children: track }) : track;
   if (bare) return control;
   const cell = /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center", children: control });
   const words = /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
@@ -61,7 +79,7 @@ const Switch = forwardRef(function Switch2({
         htmlFor: inputId,
         className: cn(
           "block text-sm leading-5 text-[var(--text-primary)]",
-          disabled ? "cursor-not-allowed" : "cursor-pointer select-none"
+          looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none"
         ),
         children: [
           label,
@@ -71,7 +89,7 @@ const Switch = forwardRef(function Switch2({
     ),
     showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description })
   ] });
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", disabled && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", looksDisabled && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     words,
     cell
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `2px` in from each end of the track, so its\n *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a\n *  `translate-x`: an inline-start offset follows the writing direction, so in a\n *  right-to-left form the thumb travels right-to-left with no `rtl:` override to\n *  keep in step. */\nconst SIZES = {\n  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-[14px]\" },\n  // 36×20 track, 16px thumb.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-[18px]\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const control = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-describedby={mergeDescribedBy(rest[\"aria-describedby\"], showDescription && descriptionId)}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  const cell = <span className=\"flex h-5 shrink-0 items-center\">{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n          {description}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", disabled && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":";AAmHI,SAyDI,UAxDF,KADF;AAnHJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAiB7C,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AAAA;AAAA,EAElE,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AACpE;AAWA,MAAM,QACJ;AASF,MAAM,QACJ;AA2CK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,UACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,SAAS,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAChB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,oBAAkB,iBAAiB,KAAK,kBAAkB,GAAG,mBAAmB,aAAa;AAAA,QAC7F,UAAU,CAAC,MAAqC;AAC9C,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc;AAAA;AAAA,IACrD;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAGF,MAAI,KAAM,QAAO;AAKjB,QAAM,OAAO,oBAAC,UAAK,WAAU,kCAAkC,mBAAQ;AACvE,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,QACpC;AAAA,QAEC;AAAA;AAAA,UACA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,+BAA8B,eAE1D;AAAA;AAAA;AAAA,IAEJ;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,cAAc,SAAS,GAC7E,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { LockedReason, useLockReason } from \"./field-parts\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `2px` in from each end of the track, so its\n *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a\n *  `translate-x`: an inline-start offset follows the writing direction, so in a\n *  right-to-left form the thumb travels right-to-left with no `rtl:` override to\n *  keep in step. */\nconst SIZES = {\n  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-[14px]\" },\n  // 36×20 track, 16px thumb.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-[18px]\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: boolean;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element.\n  const control = locked ? (\n    <LockedReason lock={lock} className={cn(\"shrink-0\", bare && className)}>\n      {track}\n    </LockedReason>\n  ) : (\n    track\n  );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  const cell = <span className=\"flex h-5 shrink-0 items-center\">{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n          {description}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":";AA+II,SAgFI,UA/EF,KADF;AA/IJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,cAAc,qBAAqB;AAiB5C,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AAAA;AAAA,EAElE,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AACpE;AAWA,MAAM,QACJ;AASF,MAAM,QACJ;AA8DK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AAGpB,QAAM,gBAAgB,QAAQ,QAAQ,KAAK;AAC3C,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,QACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,CAAC,UAAU,SAAS,GAC/E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAEhB,UAAU,SAAS,SAAY;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe,UAAU,KAAK,eAAe,KAAK;AAAA,QAClD,oBAAkB;AAAA,UAChB,KAAK,kBAAkB;AAAA,UACvB,mBAAmB;AAAA,UACnB,UAAU,KAAK;AAAA,QACjB;AAAA,QAEA,SAAS,SAAS,SAAY;AAAA,QAC9B,UAAU,CAAC,MAAqC;AAC9C,cAAI,QAAQ;AAGV,cAAE,cAAc,UAAU,CAAC,EAAE,cAAc;AAC3C;AAAA,UACF;AACA,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,UAAU,sBAAsB,cAAc;AAAA;AAAA,IACrF;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAIF,QAAM,UAAU,SACd,oBAAC,gBAAa,MAAY,WAAW,GAAG,YAAY,QAAQ,SAAS,GAClE,iBACH,IAEA;AAGF,MAAI,KAAM,QAAO;AAKjB,QAAM,OAAO,oBAAC,UAAK,WAAU,kCAAkC,mBAAQ;AACvE,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,uBAAuB;AAAA,QACzC;AAAA,QAEC;AAAA;AAAA,UACA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,+BAA8B,eAE1D;AAAA;AAAA;AAAA,IAEJ;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,iBAAiB,cAAc,SAAS,GAClF,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}