@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Card.js

@@ -0,0 +1,140 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { useRender as b } from "@base-ui/react/use-render";
+import { tv as v } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+const n = v({
+  slots: {
+    root: [
+      "flex min-w-0 flex-col",
+      "transition-[var(--tx-colors),box-shadow,translate] duration-(--dur-fast) ease-hover"
+    ],
+    /* WRAPPING IS NOT COSMETIC HERE — IT IS WHAT STOPS THE TITLE VANISHING.
+    
+           This row pairs a text column that can shrink with an `action` the
+           consumer supplies and this component cannot size. Without `flex-wrap`
+           the column is the only item that gives, so a wide action does not push
+           the title along, it erases it: reported at 0px against a 65px
+           min-content in a 247px row, present in the DOM and invisible on screen.
+    
+           Not an overflow — the opposite — so no `scrollWidth` gate in this package
+           could ever have seen it. `probe-card-header.mjs` now measures it, and
+           sweeps every element on three routes for the same shape. */
+    header: "flex flex-wrap items-start gap-4",
+    title: "font-display font-semibold text-primary text-balance",
+    description: "text-sm text-secondary text-pretty",
+    body: "min-w-0 flex-1",
+    footer: "flex flex-wrap items-center gap-2.5 border-t border-border-subtle pt-4"
+  },
+  variants: {
+    variant: {
+      /* The default. A hairline plus a whisper of shadow — on dark the
+         hairline is what actually separates it from the canvas. */
+      raised: { root: "border border-border bg-surface shadow-sm" },
+      /* No shadow at all: for cards in a grid, where a dozen shadows turn the
+         page into a quilt. */
+      flat: { root: "border border-border-subtle bg-surface" },
+      /* Recessed, for a well that holds other things. */
+      sunken: { root: "border border-border-subtle bg-surface-sunken" },
+      /* Nothing but the padding — for grouping without drawing a box. */
+      ghost: { root: "" }
+    },
+    /* DX-4794 - the corner. `xl` is a panel's; `md` is the tile's, the same corner `RecordCard` draws, for a card that stands in
+       a list of records beside record cards (a card that navigates). `--radius-outer` follows it so the
+       nested-radius arithmetic above stays right for whatever sits inside. */
+    radius: {
+      xl: { root: "rounded-xl [--radius-outer:var(--radius-xl)]" },
+      md: { root: "rounded-md [--radius-outer:var(--radius-md)]" }
+    },
+    padding: {
+      none: { root: "[--radius-pad:0px]" },
+      sm: { root: "gap-3 p-4 [--radius-pad:var(--space-4)]" },
+      md: { root: "gap-4 p-5 [--radius-pad:var(--space-5)]" },
+      lg: { root: "gap-5 p-6 [--radius-pad:var(--space-6)]" }
+    },
+    interactive: {
+      true: {
+        root: [
+          "cursor-pointer text-left",
+          "hover:border-border-interactive hover:shadow-md",
+          "hover:-translate-y-px",
+          "active:translate-y-0 active:shadow-sm",
+          "focus-visible:border-accent"
+        ]
+      },
+      false: {}
+    },
+    selected: {
+      true: { root: "border-accent bg-surface-selected" },
+      false: {}
+    }
+  },
+  /* THE HOVER FILL IS COMPOUND, and lives here rather than inside
+     `interactive`, because a selected card has to DEEPEN under the pointer
+     rather than revert. Emitted as two plain classes on the same element they
+     carry identical specificity, so which one applied came down to class
+     order — and the order that lost was the selection: pointing at a chosen
+     card repainted it with the unselected hover fill and it read as no longer
+     chosen. Exactly one of these two ever applies. */
+  compoundVariants: [
+    { interactive: !0, selected: !1, class: { root: "hover:bg-surface-hover" } },
+    { interactive: !0, selected: !0, class: { root: "hover:bg-surface-selected-hover" } }
+  ],
+  defaultVariants: {
+    variant: "raised",
+    radius: "xl",
+    padding: "md",
+    interactive: !1,
+    selected: !1
+  }
+});
+function y({
+  variant: e,
+  radius: r,
+  padding: t,
+  interactive: s,
+  selected: d,
+  render: i,
+  className: a,
+  children: u,
+  ref: f,
+  ...p
+}) {
+  const m = n({ variant: e, radius: r, padding: t, interactive: s, selected: d });
+  return b({
+    render: i,
+    ref: f,
+    /* An interactive card defaults to a real <button>, so it is focusable,
+       activates on Enter and Space, and announces as actionable — none of
+       which a div with an onClick does. */
+    defaultTagName: s ? "button" : "div",
+    props: { className: o(m.root(), a), children: u, ...p }
+  });
+}
+function N({
+  title: e,
+  description: r,
+  action: t,
+  media: s,
+  titleAs: d = "h3",
+  className: i
+}) {
+  const a = n();
+  return /* @__PURE__ */ c("div", { className: o(a.header(), i), children: [
+    s,
+    /* @__PURE__ */ c("div", { className: o("flex flex-1 flex-col gap-1", t ? void 0 : "min-w-0"), children: [
+      e && /* @__PURE__ */ l(d, { className: o(a.title(), "text-md"), children: e }),
+      r && /* @__PURE__ */ l("p", { className: a.description(), children: r })
+    ] }),
+    t
+  ] });
+}
+function C({ className: e, children: r }) {
+  const t = n();
+  return /* @__PURE__ */ l("div", { className: o(t.footer(), e), children: r });
+}
+export {
+  y as Card,
+  C as CardFooter,
+  N as CardHeader
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../src/components/Card.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { cn } from \"../lib/cn\";\r\n\r\n/* ----------------------------------------------------------------------------\r\n   CARD — the most-reached-for container, and the easiest to get subtly wrong.\r\n\r\n   THE NESTED-RADIUS PROBLEM. A card inside a card with the same corner radius\r\n   produces the bulging-corner artifact: the inner corner's arc sits inside the\r\n   outer one at the wrong curvature, and the gap between them visibly swells.\r\n   The fix is arithmetic, not taste — inner radius = outer radius - padding —\r\n   and it is wired here as `--radius-inner`, so nesting stays correct at any\r\n   depth with no per-screen tuning.\r\n\r\n   INTERACTIVE IS A VARIANT, NOT A CLASS. A card that responds to hover must\r\n   also be reachable by keyboard and announce itself as actionable. Making that\r\n   a variant means the hover styling and the semantics arrive together, instead\r\n   of the hover being added first and the semantics never.\r\n   -------------------------------------------------------------------------- */\r\n\r\nconst card = tv({\r\n  slots: {\r\n    root: [\r\n      \"flex min-w-0 flex-col\",\r\n      \"transition-[var(--tx-colors),box-shadow,translate] duration-(--dur-fast) ease-hover\",\r\n    ],\r\n    /* WRAPPING IS NOT COSMETIC HERE — IT IS WHAT STOPS THE TITLE VANISHING.\r\n\r\n       This row pairs a text column that can shrink with an `action` the\r\n       consumer supplies and this component cannot size. Without `flex-wrap`\r\n       the column is the only item that gives, so a wide action does not push\r\n       the title along, it erases it: reported at 0px against a 65px\r\n       min-content in a 247px row, present in the DOM and invisible on screen.\r\n\r\n       Not an overflow — the opposite — so no `scrollWidth` gate in this package\r\n       could ever have seen it. `probe-card-header.mjs` now measures it, and\r\n       sweeps every element on three routes for the same shape. */\r\n    header: \"flex flex-wrap items-start gap-4\",\r\n    title: \"font-display font-semibold text-primary text-balance\",\r\n    description: \"text-sm text-secondary text-pretty\",\r\n    body: \"min-w-0 flex-1\",\r\n    footer: \"flex flex-wrap items-center gap-2.5 border-t border-border-subtle pt-4\",\r\n  },\r\n  variants: {\r\n    variant: {\r\n      /* The default. A hairline plus a whisper of shadow — on dark the\r\n         hairline is what actually separates it from the canvas. */\r\n      raised: { root: \"border border-border bg-surface shadow-sm\" },\r\n      /* No shadow at all: for cards in a grid, where a dozen shadows turn the\r\n         page into a quilt. */\r\n      flat: { root: \"border border-border-subtle bg-surface\" },\r\n      /* Recessed, for a well that holds other things. */\r\n      sunken: { root: \"border border-border-subtle bg-surface-sunken\" },\r\n      /* Nothing but the padding — for grouping without drawing a box. */\r\n      ghost: { root: \"\" },\r\n    },\r\n    /* DX-4794 - the corner. `xl` is a panel's; `md` is the tile's, the same corner `RecordCard` draws, for a card that stands in\r\n       a list of records beside record cards (a card that navigates). `--radius-outer` follows it so the\r\n       nested-radius arithmetic above stays right for whatever sits inside. */\r\n    radius: {\r\n      xl: { root: \"rounded-xl [--radius-outer:var(--radius-xl)]\" },\r\n      md: { root: \"rounded-md [--radius-outer:var(--radius-md)]\" },\r\n    },\r\n    padding: {\r\n      none: { root: \"[--radius-pad:0px]\" },\r\n      sm: { root: \"gap-3 p-4 [--radius-pad:var(--space-4)]\" },\r\n      md: { root: \"gap-4 p-5 [--radius-pad:var(--space-5)]\" },\r\n      lg: { root: \"gap-5 p-6 [--radius-pad:var(--space-6)]\" },\r\n    },\r\n    interactive: {\r\n      true: {\r\n        root: [\r\n          \"cursor-pointer text-left\",\r\n          \"hover:border-border-interactive hover:shadow-md\",\r\n          \"hover:-translate-y-px\",\r\n          \"active:translate-y-0 active:shadow-sm\",\r\n          \"focus-visible:border-accent\",\r\n        ],\r\n      },\r\n      false: {},\r\n    },\r\n    selected: {\r\n      true: { root: \"border-accent bg-surface-selected\" },\r\n      false: {},\r\n    },\r\n  },\r\n  /* THE HOVER FILL IS COMPOUND, and lives here rather than inside\r\n     `interactive`, because a selected card has to DEEPEN under the pointer\r\n     rather than revert. Emitted as two plain classes on the same element they\r\n     carry identical specificity, so which one applied came down to class\r\n     order — and the order that lost was the selection: pointing at a chosen\r\n     card repainted it with the unselected hover fill and it read as no longer\r\n     chosen. Exactly one of these two ever applies. */\r\n  compoundVariants: [\r\n    { interactive: true, selected: false, class: { root: \"hover:bg-surface-hover\" } },\r\n    { interactive: true, selected: true, class: { root: \"hover:bg-surface-selected-hover\" } },\r\n  ],\r\n  defaultVariants: {\r\n    variant: \"raised\",\r\n    radius: \"xl\",\r\n    padding: \"md\",\r\n    interactive: false,\r\n    selected: false,\r\n  },\r\n});\r\n\r\nexport interface CardProps extends VariantProps<typeof card> {\r\n  /** Render as something else — a link, an article, a button. */\r\n  render?: useRender.RenderProp;\r\n  /** DOM id, e.g. a URL-anchor target. */\r\n  id?: string;\r\n  className?: string;\r\n  children?: ReactNode;\r\n  ref?: Ref<HTMLElement>;\r\n  onClick?: (event: React.MouseEvent) => void;\r\n}\r\n\r\nexport function Card({\r\n  variant,\r\n  radius,\r\n  padding,\r\n  interactive,\r\n  selected,\r\n  render,\r\n  className,\r\n  children,\r\n  ref,\r\n  ...props\r\n}: CardProps) {\r\n  const s = card({ variant, radius, padding, interactive, selected });\r\n\r\n  return useRender({\r\n    render,\r\n    ref,\r\n    /* An interactive card defaults to a real <button>, so it is focusable,\r\n       activates on Enter and Space, and announces as actionable — none of\r\n       which a div with an onClick does. */\r\n    defaultTagName: interactive ? \"button\" : \"div\",\r\n    props: { className: cn(s.root(), className), children, ...props },\r\n  });\r\n}\r\n\r\nexport interface CardHeaderProps {\r\n  title?: ReactNode;\r\n  description?: ReactNode;\r\n  /** Sits at the trailing edge — a menu, a badge, an action. */\r\n  action?: ReactNode;\r\n  /** Sits before the text — an icon or avatar. */\r\n  media?: ReactNode;\r\n  /**\r\n   * The heading level the title renders as.\r\n   *\r\n   * A CARD'S CORRECT HEADING LEVEL IS A PROPERTY OF WHERE IT SITS, NOT OF THE\r\n   * CARD, and this used to be hard-coded to `h3`. Headings have to descend one\r\n   * level at a time — a screen reader's heading list IS the page outline, and a\r\n   * gap in it reads as a missing section. So a card placed directly under a\r\n   * page's `<h1>` needs `h2`, and the same card nested inside a titled\r\n   * section needs `h3`. Only the caller knows which.\r\n   *\r\n   * Hard-coding it did not merely risk that defect, it shipped it: a demo page\r\n   * whose first section deliberately carries no heading of its own put a row of\r\n   * `h3` cards straight under the page title, and axe's `heading-order`\r\n   * reported the gap while `a11y-scan` stayed green — it blocks on serious and\r\n   * critical, and heading-order is moderate.\r\n   *\r\n   * `h3` remains the default because a card is usually inside something.\r\n   *\r\n   * @default \"h3\"\r\n   */\r\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  className?: string;\r\n}\r\n\r\nexport function CardHeader({\r\n  title,\r\n  description,\r\n  action,\r\n  media,\r\n  titleAs: Title = \"h3\",\r\n  className,\r\n}: CardHeaderProps) {\r\n  const s = card();\r\n  return (\r\n    <div className={cn(s.header(), className)}>\r\n      {media}\r\n      {/* THE FLOOR, AND WHY IT IS CONDITIONAL.\r\n\r\n          `min-width: auto` on a flex item resolves to its min-content width,\r\n          and that floor is what the wrap above triggers against: with the\r\n          column free to shrink to zero, a wide action and a zero-basis column\r\n          always \"fit\" one line and the title takes whatever is left — measured\r\n          at 39px of the 65px it needed, or 0px when the action carried\r\n          `w-full`.\r\n\r\n          It is applied ONLY when there is an action, because that is the only\r\n          time anything has to be arbitrated. `min-w-0` is what lets this column\r\n          shrink inside its card, and a header with no trailing sibling has no\r\n          reason to give that up.\r\n\r\n          That scoping is not tidiness, it is measured. Applied unconditionally\r\n          the floor changed 48 visual snapshots, because it alters when ANY card\r\n          header's text column may shrink. Applied only alongside an action it\r\n          changes none: the visual suite reports the same failures with and\r\n          without it, bar one date-picker overlay on a page that uses neither\r\n          this component nor an action. */}\r\n      <div className={cn(\"flex flex-1 flex-col gap-1\", action ? undefined : \"min-w-0\")}>\r\n        {title && <Title className={cn(s.title(), \"text-md\")}>{title}</Title>}\r\n        {description && <p className={s.description()}>{description}</p>}\r\n      </div>\r\n      {action}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function CardFooter({ className, children }: { className?: string; children: ReactNode }) {\r\n  const s = card();\r\n  return <div className={cn(s.footer(), className)}>{children}</div>;\r\n}\r\n"],"names":["card","tv","Card","variant","radius","padding","interactive","selected","render","className","children","ref","props","s","useRender","cn","CardHeader","title","description","action","media","Title","jsxs","jsx","CardFooter"],"mappings":";;;;AAqBA,MAAMA,IAAOC,EAAG;AAAA,EACd,OAAO;AAAA,IACL,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaF,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,SAAS;AAAA;AAAA;AAAA,MAGP,QAAQ,EAAE,MAAM,4CAAA;AAAA;AAAA;AAAA,MAGhB,MAAM,EAAE,MAAM,yCAAA;AAAA;AAAA,MAEd,QAAQ,EAAE,MAAM,gDAAA;AAAA;AAAA,MAEhB,OAAO,EAAE,MAAM,GAAA;AAAA,IAAG;AAAA;AAAA;AAAA;AAAA,IAKpB,QAAQ;AAAA,MACN,IAAI,EAAE,MAAM,+CAAA;AAAA,MACZ,IAAI,EAAE,MAAM,+CAAA;AAAA,IAA+C;AAAA,IAE7D,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,qBAAA;AAAA,MACd,IAAI,EAAE,MAAM,0CAAA;AAAA,MACZ,IAAI,EAAE,MAAM,0CAAA;AAAA,MACZ,IAAI,EAAE,MAAM,0CAAA;AAAA,IAA0C;AAAA,IAExD,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,OAAO,CAAA;AAAA,IAAC;AAAA,IAEV,UAAU;AAAA,MACR,MAAM,EAAE,MAAM,oCAAA;AAAA,MACd,OAAO,CAAA;AAAA,IAAC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASF,kBAAkB;AAAA,IAChB,EAAE,aAAa,IAAM,UAAU,IAAO,OAAO,EAAE,MAAM,2BAAyB;AAAA,IAC9E,EAAE,aAAa,IAAM,UAAU,IAAM,OAAO,EAAE,MAAM,kCAAA,EAAkC;AAAA,EAAE;AAAA,EAE1F,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAEd,CAAC;AAaM,SAASC,EAAK;AAAA,EACnB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAIb,EAAK,EAAE,SAAAG,GAAS,QAAAC,GAAQ,SAAAC,GAAS,aAAAC,GAAa,UAAAC,GAAU;AAElE,SAAOO,EAAU;AAAA,IACf,QAAAN;AAAA,IACA,KAAAG;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAgBL,IAAc,WAAW;AAAA,IACzC,OAAO,EAAE,WAAWS,EAAGF,EAAE,KAAA,GAAQJ,CAAS,GAAG,UAAAC,GAAU,GAAGE,EAAA;AAAA,EAAM,CACjE;AACH;AAiCO,SAASI,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAASC,IAAQ;AAAA,EACjB,WAAAZ;AACF,GAAoB;AAClB,QAAMI,IAAIb,EAAA;AACV,SACE,gBAAAsB,EAAC,SAAI,WAAWP,EAAGF,EAAE,OAAA,GAAUJ,CAAS,GACrC,UAAA;AAAA,IAAAW;AAAA,IAqBD,gBAAAE,EAAC,SAAI,WAAWP,EAAG,8BAA8BI,IAAS,SAAY,SAAS,GAC5E,UAAA;AAAA,MAAAF,KAAS,gBAAAM,EAACF,KAAM,WAAWN,EAAGF,EAAE,MAAA,GAAS,SAAS,GAAI,UAAAI,EAAA,CAAM;AAAA,MAC5DC,KAAe,gBAAAK,EAAC,KAAA,EAAE,WAAWV,EAAE,YAAA,GAAgB,UAAAK,EAAA,CAAY;AAAA,IAAA,GAC9D;AAAA,IACCC;AAAA,EAAA,GACH;AAEJ;AAEO,SAASK,EAAW,EAAE,WAAAf,GAAW,UAAAC,KAAyD;AAC/F,QAAMG,IAAIb,EAAA;AACV,SAAO,gBAAAuB,EAAC,SAAI,WAAWR,EAAGF,EAAE,UAAUJ,CAAS,GAAI,UAAAC,GAAS;AAC9D;"}

package/dist/components/Choice.js

@@ -0,0 +1,361 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { Checkbox as u } from "@base-ui/react/checkbox";
+import { Switch as b } from "@base-ui/react/switch";
+import { Radio as m } from "@base-ui/react/radio";
+import { RadioGroup as f } from "@base-ui/react/radio-group";
+import { tv as l } from "tailwind-variants";
+import { cn as c } from "../lib/cn.js";
+import { Field as h } from "./Field.js";
+import { PendingVeil as x } from "./PendingVeil.js";
+import { Spinner as p } from "./Spinner.js";
+const k = l({
+  base: [
+    "group/checkbox relative grid shrink-0 place-items-center",
+    "border-2 border-field-border bg-field",
+    "transition-[var(--tx-colors),box-shadow,scale] duration-(--dur-fast) ease-hover",
+    "hover:border-border-interactive",
+    /* A CONTROL TINT, NOT A SOLID FILL. The solid square
+       outweighed the label beside it and clashed with the green ticks every
+       read-only "on" mark in the system draws (ToggleMatrix cells, checklist
+       rows), so a checked box now reads as the same green "on" those marks
+       do: the control wash, its border, and a control-text tick (DX-5080). */
+    "data-checked:border-control-border data-checked:bg-control-subtle",
+    "data-indeterminate:border-control-border data-indeterminate:bg-control-subtle",
+    /* Checked AND hovered. Without it the checked fill wins on class order and
+       a ticked box is the one control on the page that does not answer the
+       pointer. The border strengthens to full control; the wash stays. */
+    "data-checked:hover:not-data-disabled:border-control",
+    "data-indeterminate:hover:not-data-disabled:border-control",
+    "data-disabled:not-data-loading:cursor-not-allowed data-disabled:not-data-loading:opacity-45 data-disabled:hover:border-field-border",
+    "data-loading:cursor-wait",
+    /* A 2% dip on press. Small enough to read as give rather than as a resize,
+       and it is what makes the control feel like it takes the press rather
+       than merely reporting it. */
+    "active:not-data-disabled:scale-[0.94]"
+  ],
+  variants: {
+    /* A square with softened corners, never a near-circle: `rounded-md`
+       (10px) on a 22px box read as a circle, which is the Radio's shape. */
+    size: {
+      sm: "size-[1.125rem] rounded-[0.3125rem]",
+      md: "size-[1.375rem] rounded-sm",
+      lg: "size-[1.625rem] rounded-[0.4375rem]"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function w({ size: o, className: r, loading: e = !1, disabled: d, ref: t, ...i }) {
+  return /* @__PURE__ */ n(
+    u.Root,
+    {
+      ref: t,
+      className: c(k({ size: o }), r),
+      disabled: d || e,
+      "data-loading": e || void 0,
+      "aria-busy": e || void 0,
+      ...i,
+      children: [
+        /* @__PURE__ */ n(
+          u.Indicator,
+          {
+            keepMounted: !0,
+            className: "grid size-full place-items-center text-control-text",
+            children: [
+              /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", fill: "none", className: "size-[85%]", "aria-hidden": !0, children: /* @__PURE__ */ a(
+                "path",
+                {
+                  d: "M5 12.5 L10 17.5 L19 7",
+                  stroke: "currentColor",
+                  strokeWidth: "3.25",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  pathLength: "1",
+                  strokeDasharray: "1",
+                  className: c(
+                    "[stroke-dashoffset:1] transition-[var(--tx-colors),stroke-dashoffset] ease-pen",
+                    "duration-(--dur-slow)",
+                    "group-data-checked/checkbox:[stroke-dashoffset:0]",
+                    /* Erasing runs on the standard curve, not the pen curve: a hand
+                       draws a tick, it does not un-draw one, so mimicking the
+                       drawing gesture in reverse reads as uncanny. */
+                    "group-not-data-checked/checkbox:duration-(--dur-exit) group-not-data-checked/checkbox:ease-exit",
+                    /* Indeterminate must not show a half-drawn tick. */
+                    "group-data-indeterminate/checkbox:opacity-0"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: c(
+                    "absolute h-[3px] w-[55%] rounded-full bg-current",
+                    "origin-center scale-x-0 opacity-0",
+                    "transition-[var(--tx-colors),scale,opacity] duration-(--dur-base) ease-snappy",
+                    "group-data-indeterminate/checkbox:scale-x-100 group-data-indeterminate/checkbox:opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        e && /* @__PURE__ */ a("span", { className: "absolute inset-0 grid place-items-center rounded-[inherit] bg-field", children: /* @__PURE__ */ a(p, { size: "xs", className: "text-secondary", style: { "--dx-icon-size": "70%" } }) })
+      ]
+    }
+  );
+}
+const g = l({
+  base: [
+    "group/switch relative shrink-0 cursor-pointer rounded-full p-[3px]",
+    /* `--switch-track-off`, not `--surface-inset`: the off track has to be
+       tuned against the knob, and `--surface-inset` also backs sliders and
+       wells that have no knob to contrast with. */
+    "bg-switch-track-off border border-border",
+    "transition-[var(--tx-colors)] duration-(--dur-base) ease-standard",
+    "hover:not-data-disabled:border-border-interactive",
+    "data-checked:border-control data-checked:bg-control",
+    /* See the checkbox: an ON switch otherwise has no hover state. */
+    "data-checked:hover:not-data-disabled:border-control-hover data-checked:hover:not-data-disabled:bg-control-hover",
+    "data-disabled:not-data-loading:cursor-not-allowed data-disabled:not-data-loading:opacity-45",
+    "data-loading:cursor-wait"
+  ],
+  variants: {
+    /* The track's two dimensions are the ONLY numbers here. Everything else —
+       thumb diameter, travel distance — is derived from them in CSS below, so
+       the three parts cannot drift out of agreement. They scale with
+       --ui-scale like every other control; the 1px border and 3px inset do
+       not, per the no-scale rules in scale.css. */
+    size: {
+      sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]",
+      md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]",
+      lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), y = [
+  /* The knob swaps colour with the state — see `--control-knob-on` in
+     tokens.css. One colour cannot clear 3:1 against both a neutral off track
+     and a saturated on track, and the transition below carries it. */
+  "relative grid place-items-center rounded-full bg-control-knob shadow-sm data-checked:bg-control-knob-on",
+  /* The pending spinner (DX-6426) is drawn in the colour that contrasts with the knob in each state. */
+  "text-control-knob-on data-checked:text-control-knob",
+  "size-[calc(var(--switch-h)-8px)]",
+  /* Translate rather than a layout change: this is the one animation in the
+       set that crosses real distance, so it has to stay on the compositor.
+  
+       THE TRAVEL DISTANCE IS UNCONDITIONAL. It used to be multiplied by
+       `--motion-travel`, which is 0 under reduced motion — so the thumb never
+       moved at all and the only remaining signal was the track colour. That is
+       the wrong trade: reduced motion asks for motion to be reduced, not for
+       STATE to be removed. Colour alone is a weaker indicator for anyone with a
+       colour vision deficiency, and a switch whose thumb never moves is unlike
+       every platform switch the user already knows.
+  
+       NOTHING ELSE IS NEEDED HERE, and adding something is actively harmful:
+       `--dur-base` is already `calc(160ms * var(--motion-scale))`, and
+       `--motion-scale` is the ONE place that resolves the OS preference and the
+       app's own `data-motion` control together. A raw `motion-reduce:` utility
+       bypasses that resolution — it reads the OS media query directly, so it
+       fires even for someone who has explicitly chosen `data-motion="full"`, and
+       it sets `transition-property: none`, which makes the thumb snap. That is a
+       hard removal in a system whose motion layer is explicitly built to REDUCE
+       rather than remove (scale 0.5, not 0 — see motion.css). Do not re-add it. */
+  "transition-[var(--tx-colors),translate,width] duration-(--dur-base) ease-snappy",
+  "data-checked:translate-x-[calc(var(--switch-w)-var(--switch-h))]",
+  /* The thumb STRETCHES while moving and settles back to a circle. It is a
+     ~2px effect over ~160ms and nobody consciously sees it, but removing it
+     makes the throw feel like a teleport — squash-and-stretch at UI scale.
+     Capped so the stretched thumb still fits its slot at the far end. */
+  "group-active/switch:not-data-disabled:w-[calc((var(--switch-h)-8px)*1.15)]"
+].join(" ");
+function z({ size: o, className: r, loading: e = !1, disabled: d, ref: t, ...i }) {
+  return /* @__PURE__ */ a(
+    b.Root,
+    {
+      ref: t,
+      className: c(g({ size: o }), r),
+      disabled: d || e,
+      "data-loading": e || void 0,
+      "aria-busy": e || void 0,
+      ...i,
+      children: /* @__PURE__ */ a(b.Thumb, { className: y, children: e && /* @__PURE__ */ a(p, { size: "xs", style: { "--dx-icon-size": "70%" } }) })
+    }
+  );
+}
+const N = l({
+  base: [
+    "group/radio relative grid shrink-0 place-items-center rounded-full",
+    "border-2 border-field-border bg-field",
+    "transition-[var(--tx-colors),scale] duration-(--dur-fast) ease-hover",
+    "hover:border-border-interactive",
+    "data-checked:border-control",
+    /* See the checkbox: a chosen radio otherwise has no hover state. */
+    "data-checked:hover:not-data-disabled:border-control-hover",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-45 data-disabled:hover:border-field-border",
+    "active:not-data-disabled:scale-[0.94]"
+  ],
+  variants: {
+    size: {
+      sm: "size-[1.125rem]",
+      md: "size-[1.375rem]",
+      lg: "size-[1.625rem]"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function v({ size: o, className: r, ref: e, ...d }) {
+  return /* @__PURE__ */ a(m.Root, { ref: e, className: c(N({ size: o }), r), ...d, children: /* @__PURE__ */ a(
+    m.Indicator,
+    {
+      keepMounted: !0,
+      className: c(
+        "size-[55%] rounded-full bg-control",
+        "scale-0 opacity-0",
+        /* --ease-snappy overshoots ~3%, so the dot arrives slightly too big
+           and settles. On a shape this small that reads as CONFIDENCE in the
+           selection — the same motion applied to a dialog would read as
+           instability. */
+        "transition-[var(--tx-colors),scale,opacity] duration-(--dur-base) ease-snappy",
+        "group-data-checked/radio:scale-100 group-data-checked/radio:opacity-100",
+        "group-not-data-checked/radio:duration-(--dur-exit) group-not-data-checked/radio:ease-exit"
+      )
+    }
+  ) });
+}
+function T({
+  className: o,
+  orientation: r = "vertical",
+  loading: e = !1,
+  disabled: d,
+  children: t,
+  ref: i,
+  ...s
+}) {
+  return /* @__PURE__ */ n(
+    f,
+    {
+      ref: i,
+      disabled: d || e,
+      "data-loading": e || void 0,
+      "aria-busy": e || void 0,
+      className: c(
+        "relative flex min-w-0",
+        r === "vertical" ? "flex-col gap-3" : "flex-row flex-wrap gap-x-6 gap-y-3",
+        o
+      ),
+      ...s,
+      children: [
+        t,
+        e && /* @__PURE__ */ a(x, {})
+      ]
+    }
+  );
+}
+function I({
+  label: o,
+  description: r,
+  error: e,
+  name: d,
+  disabled: t,
+  fieldClassName: i,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    h,
+    {
+      layout: "inline",
+      label: o,
+      description: r,
+      error: e,
+      name: d,
+      disabled: t,
+      className: i,
+      children: /* @__PURE__ */ a(w, { disabled: t, ...s })
+    }
+  );
+}
+function B({
+  label: o,
+  description: r,
+  error: e,
+  name: d,
+  disabled: t,
+  fieldClassName: i,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    h,
+    {
+      layout: "inline",
+      label: o,
+      description: r,
+      error: e,
+      name: d,
+      disabled: t,
+      className: i,
+      children: /* @__PURE__ */ a(z, { disabled: t, ...s })
+    }
+  );
+}
+function D({
+  label: o,
+  description: r,
+  error: e,
+  name: d,
+  disabled: t,
+  fieldClassName: i,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    h,
+    {
+      layout: "inline",
+      label: o,
+      description: r,
+      error: e,
+      name: d,
+      disabled: t,
+      className: i,
+      children: /* @__PURE__ */ a(v, { disabled: t, ...s })
+    }
+  );
+}
+function P({ label: o, description: r, className: e, size: d, ...t }) {
+  return /* @__PURE__ */ n(
+    "label",
+    {
+      className: c(
+        "group/card relative flex cursor-pointer items-start gap-3 rounded-lg border p-4",
+        "border-border bg-surface",
+        "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+        "hover:border-border-interactive hover:bg-surface-hover",
+        "has-data-checked:border-control has-data-checked:bg-control-subtle has-data-checked:shadow-sm",
+        /* Checked AND hovered. `:has()` takes the specificity of its argument,
+           so `has-data-checked:` and `hover:` weigh the same and class order
+           decided which fill a hovered checked card got — when hover won, the
+           card read as unchecked under the pointer. Stacking settles it. */
+        "has-data-checked:hover:bg-control-subtle-hover",
+        "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-45",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ a(v, { size: d, ...t }),
+        /* @__PURE__ */ n("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ a("span", { className: "text-sm font-medium text-primary", children: o }),
+          r && /* @__PURE__ */ a("span", { className: "text-2xs text-tertiary", children: r })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  w as Checkbox,
+  I as CheckboxField,
+  v as Radio,
+  P as RadioCard,
+  D as RadioField,
+  T as RadioGroup,
+  z as Switch,
+  B as SwitchField
+};
+//# sourceMappingURL=Choice.js.map

package/dist/components/Choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Choice.js","sources":["../../src/components/Choice.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Field, type FieldProps } from \"./Field\";\nimport { PendingVeil } from \"./PendingVeil\";\nimport { Spinner } from \"./Spinner\";\n\n/* ============================================================================\n   THE THREE BINARY CONTROLS, AND WHY EACH ANIMATES DIFFERENTLY\n\n   These are the smallest controls in the system and the ones a person touches\n   most, so they carry the most motion per pixel. Each one's animation is\n   chosen from what the control MEANS, not from a shared effect:\n\n     Checkbox  a tick is a MARK someone makes, so it is DRAWN — stroke-dashoffset\n               retreating along the path, on a pen curve that slows at the\n               corner exactly the way a hand does.\n     Switch    a switch is a physical throw, so the thumb TRAVELS and the track\n               FILLS from the side the thumb is leaving — the fill chasing the\n               thumb is what sells it as one object moving, not two things\n               changing state.\n     Radio     one of a set, so the dot SCALES IN from nothing with a spring —\n               it arrives, it is not drawn, because you did not mark it: you\n               chose it.\n\n   All three animate inside ~48px, which is why paint properties\n   (stroke-dashoffset, background-color) are affordable here and would not be\n   on a table row. See the paint-budget note in motion.css.\n   ========================================================================= */\n\n/* ---------------------------------------------------------------------------\n   CHECKBOX\n   -------------------------------------------------------------------------- */\n\nconst checkbox = tv({\n  base: [\n    \"group/checkbox relative grid shrink-0 place-items-center\",\n    \"border-2 border-field-border bg-field\",\n    \"transition-[var(--tx-colors),box-shadow,scale] duration-(--dur-fast) ease-hover\",\n    \"hover:border-border-interactive\",\n    /* A CONTROL TINT, NOT A SOLID FILL. The solid square\n       outweighed the label beside it and clashed with the green ticks every\n       read-only \"on\" mark in the system draws (ToggleMatrix cells, checklist\n       rows), so a checked box now reads as the same green \"on\" those marks\n       do: the control wash, its border, and a control-text tick (DX-5080). */\n    \"data-checked:border-control-border data-checked:bg-control-subtle\",\n    \"data-indeterminate:border-control-border data-indeterminate:bg-control-subtle\",\n    /* Checked AND hovered. Without it the checked fill wins on class order and\n       a ticked box is the one control on the page that does not answer the\n       pointer. The border strengthens to full control; the wash stays. */\n    \"data-checked:hover:not-data-disabled:border-control\",\n    \"data-indeterminate:hover:not-data-disabled:border-control\",\n    \"data-disabled:not-data-loading:cursor-not-allowed data-disabled:not-data-loading:opacity-45 data-disabled:hover:border-field-border\",\n    \"data-loading:cursor-wait\",\n    /* A 2% dip on press. Small enough to read as give rather than as a resize,\n       and it is what makes the control feel like it takes the press rather\n       than merely reporting it. */\n    \"active:not-data-disabled:scale-[0.94]\",\n  ],\n  variants: {\n    /* A square with softened corners, never a near-circle: `rounded-md`\n       (10px) on a 22px box read as a circle, which is the Radio's shape. */\n    size: {\n      sm: \"size-[1.125rem] rounded-[0.3125rem]\",\n      md: \"size-[1.375rem] rounded-sm\",\n      lg: \"size-[1.625rem] rounded-[0.4375rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface CheckboxProps\n  extends Omit<BaseCheckbox.Root.Props, \"className\" | \"render\">,\n    VariantProps<typeof checkbox> {\n  className?: string;\n  /**\n   * DX-6426 - the change this control sends is out and unanswered: the box shows a spinner and refuses interaction (no second request) until it is\n   * answered. Pass it from the pending state of the write; the checked state stays the saved one until the answer repaints.\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Checkbox({ size, className, loading = false, disabled, ref, ...props }: CheckboxProps) {\n  return (\n    <BaseCheckbox.Root\n      ref={ref}\n      className={cn(checkbox({ size }), className)}\n      disabled={disabled || loading}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <BaseCheckbox.Indicator\n        /* keepMounted so the tick can animate OUT. Unmounting on uncheck makes\n           unchecking instantaneous while checking is animated, and that\n           asymmetry is immediately legible as a bug. */\n        keepMounted\n        className=\"grid size-full place-items-center text-control-text\"\n      >\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" className=\"size-[85%]\" aria-hidden>\n          <path\n            d=\"M5 12.5 L10 17.5 L19 7\"\n            stroke=\"currentColor\"\n            strokeWidth=\"3.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            /* pathLength=\"1\" normalises the path to a length of 1 so the dash\n               numbers below are FRACTIONS, not user units. Two things fall out:\n               the same numbers work for any path, and it sidesteps a Safari bug\n               where a zoomed SVG rescales absolute dash lengths and the tick\n               tears. */\n            pathLength=\"1\"\n            strokeDasharray=\"1\"\n            className={cn(\n              \"[stroke-dashoffset:1] transition-[var(--tx-colors),stroke-dashoffset] ease-pen\",\n              \"duration-(--dur-slow)\",\n              \"group-data-checked/checkbox:[stroke-dashoffset:0]\",\n              /* Erasing runs on the standard curve, not the pen curve: a hand\n                 draws a tick, it does not un-draw one, so mimicking the\n                 drawing gesture in reverse reads as uncanny. */\n              \"group-not-data-checked/checkbox:duration-(--dur-exit) group-not-data-checked/checkbox:ease-exit\",\n              /* Indeterminate must not show a half-drawn tick. */\n              \"group-data-indeterminate/checkbox:opacity-0\",\n            )}\n          />\n        </svg>\n\n        {/* The indeterminate bar draws from the centre outward, so the two\n            states share one visual origin and reading between them is one\n            gesture rather than two unrelated marks. */}\n        <span\n          aria-hidden\n          className={cn(\n            \"absolute h-[3px] w-[55%] rounded-full bg-current\",\n            \"origin-center scale-x-0 opacity-0\",\n            \"transition-[var(--tx-colors),scale,opacity] duration-(--dur-base) ease-snappy\",\n            \"group-data-indeterminate/checkbox:scale-x-100 group-data-indeterminate/checkbox:opacity-100\",\n          )}\n        />\n      </BaseCheckbox.Indicator>\n      {loading && (\n        <span className=\"absolute inset-0 grid place-items-center rounded-[inherit] bg-field\">\n          <Spinner size=\"xs\" className=\"text-secondary\" style={{ [\"--dx-icon-size\" as string]: \"70%\" }} />\n        </span>\n      )}\n    </BaseCheckbox.Root>\n  );\n}\n\n/* ---------------------------------------------------------------------------\n   SWITCH\n   -------------------------------------------------------------------------- */\n\nconst switchTrack = tv({\n  base: [\n    \"group/switch relative shrink-0 cursor-pointer rounded-full p-[3px]\",\n    /* `--switch-track-off`, not `--surface-inset`: the off track has to be\n       tuned against the knob, and `--surface-inset` also backs sliders and\n       wells that have no knob to contrast with. */\n    \"bg-switch-track-off border border-border\",\n    \"transition-[var(--tx-colors)] duration-(--dur-base) ease-standard\",\n    \"hover:not-data-disabled:border-border-interactive\",\n    \"data-checked:border-control data-checked:bg-control\",\n    /* See the checkbox: an ON switch otherwise has no hover state. */\n    \"data-checked:hover:not-data-disabled:border-control-hover data-checked:hover:not-data-disabled:bg-control-hover\",\n    \"data-disabled:not-data-loading:cursor-not-allowed data-disabled:not-data-loading:opacity-45\",\n    \"data-loading:cursor-wait\",\n  ],\n  variants: {\n    /* The track's two dimensions are the ONLY numbers here. Everything else —\n       thumb diameter, travel distance — is derived from them in CSS below, so\n       the three parts cannot drift out of agreement. They scale with\n       --ui-scale like every other control; the 1px border and 3px inset do\n       not, per the no-scale rules in scale.css. */\n    size: {\n      sm: \"h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]\",\n      md: \"h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]\",\n      lg: \"h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/* Nothing below is a chosen number — both are SOLVED from the track:\n\n     inset  = 1px border + 3px padding, every edge              = 4px\n     thumb  = track height - 2 x inset          -> fills the slot exactly\n     travel = inner width - thumb\n            = (track w - 2 x inset) - (track h - 2 x inset)\n            = track w - track h                 -> the insets cancel out\n\n   That cancellation is why travel carries no inset term, and why the thumb\n   lands with the identical 4px gap at both ends of its journey.\n\n   The first version hard-coded a thumb 2px LARGER than its slot. A track\n   cannot clip its own padding box, so the surplus hung off the bottom (a thumb\n   sitting a pixel low) and off the right at the end of travel (overshoot) —\n   two symptoms, one cause: numbers picked to look right rather than derived\n   from the box they live in. Deriving them also means the switch survives the\n   size control, which hard-coded values would not. */\nconst switchThumb = [\n  /* The knob swaps colour with the state — see `--control-knob-on` in\n     tokens.css. One colour cannot clear 3:1 against both a neutral off track\n     and a saturated on track, and the transition below carries it. */\n  \"relative grid place-items-center rounded-full bg-control-knob shadow-sm data-checked:bg-control-knob-on\",\n  /* The pending spinner (DX-6426) is drawn in the colour that contrasts with the knob in each state. */\n  \"text-control-knob-on data-checked:text-control-knob\",\n  \"size-[calc(var(--switch-h)-8px)]\",\n  /* Translate rather than a layout change: this is the one animation in the\n     set that crosses real distance, so it has to stay on the compositor.\n\n     THE TRAVEL DISTANCE IS UNCONDITIONAL. It used to be multiplied by\n     `--motion-travel`, which is 0 under reduced motion — so the thumb never\n     moved at all and the only remaining signal was the track colour. That is\n     the wrong trade: reduced motion asks for motion to be reduced, not for\n     STATE to be removed. Colour alone is a weaker indicator for anyone with a\n     colour vision deficiency, and a switch whose thumb never moves is unlike\n     every platform switch the user already knows.\n\n     NOTHING ELSE IS NEEDED HERE, and adding something is actively harmful:\n     `--dur-base` is already `calc(160ms * var(--motion-scale))`, and\n     `--motion-scale` is the ONE place that resolves the OS preference and the\n     app's own `data-motion` control together. A raw `motion-reduce:` utility\n     bypasses that resolution — it reads the OS media query directly, so it\n     fires even for someone who has explicitly chosen `data-motion=\"full\"`, and\n     it sets `transition-property: none`, which makes the thumb snap. That is a\n     hard removal in a system whose motion layer is explicitly built to REDUCE\n     rather than remove (scale 0.5, not 0 — see motion.css). Do not re-add it. */\n  \"transition-[var(--tx-colors),translate,width] duration-(--dur-base) ease-snappy\",\n  \"data-checked:translate-x-[calc(var(--switch-w)-var(--switch-h))]\",\n  /* The thumb STRETCHES while moving and settles back to a circle. It is a\n     ~2px effect over ~160ms and nobody consciously sees it, but removing it\n     makes the throw feel like a teleport — squash-and-stretch at UI scale.\n     Capped so the stretched thumb still fits its slot at the far end. */\n  \"group-active/switch:not-data-disabled:w-[calc((var(--switch-h)-8px)*1.15)]\",\n].join(\" \");\n\nexport interface SwitchProps\n  extends Omit<BaseSwitch.Root.Props, \"className\" | \"render\">,\n    VariantProps<typeof switchTrack> {\n  className?: string;\n  /**\n   * DX-6426 - the change this switch sends is out and unanswered: the knob shows a spinner and the switch refuses interaction (no second request)\n   * until it is answered. Pass it from the pending state of the write; the position stays the saved one until the answer repaints.\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Switch({ size, className, loading = false, disabled, ref, ...props }: SwitchProps) {\n  return (\n    <BaseSwitch.Root\n      ref={ref}\n      className={cn(switchTrack({ size }), className)}\n      disabled={disabled || loading}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      <BaseSwitch.Thumb className={switchThumb}>{loading && <Spinner size=\"xs\" style={{ [\"--dx-icon-size\" as string]: \"70%\" }} />}</BaseSwitch.Thumb>\n    </BaseSwitch.Root>\n  );\n}\n\n/* ---------------------------------------------------------------------------\n   RADIO\n   -------------------------------------------------------------------------- */\n\nconst radio = tv({\n  base: [\n    \"group/radio relative grid shrink-0 place-items-center rounded-full\",\n    \"border-2 border-field-border bg-field\",\n    \"transition-[var(--tx-colors),scale] duration-(--dur-fast) ease-hover\",\n    \"hover:border-border-interactive\",\n    \"data-checked:border-control\",\n    /* See the checkbox: a chosen radio otherwise has no hover state. */\n    \"data-checked:hover:not-data-disabled:border-control-hover\",\n    \"data-disabled:cursor-not-allowed data-disabled:opacity-45 data-disabled:hover:border-field-border\",\n    \"active:not-data-disabled:scale-[0.94]\",\n  ],\n  variants: {\n    size: {\n      sm: \"size-[1.125rem]\",\n      md: \"size-[1.375rem]\",\n      lg: \"size-[1.625rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface RadioProps\n  extends Omit<BaseRadio.Root.Props, \"className\" | \"render\">,\n    VariantProps<typeof radio> {\n  className?: string;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Radio({ size, className, ref, ...props }: RadioProps) {\n  return (\n    <BaseRadio.Root ref={ref} className={cn(radio({ size }), className)} {...props}>\n      <BaseRadio.Indicator\n        keepMounted\n        className={cn(\n          \"size-[55%] rounded-full bg-control\",\n          \"scale-0 opacity-0\",\n          /* --ease-snappy overshoots ~3%, so the dot arrives slightly too big\n             and settles. On a shape this small that reads as CONFIDENCE in the\n             selection — the same motion applied to a dialog would read as\n             instability. */\n          \"transition-[var(--tx-colors),scale,opacity] duration-(--dur-base) ease-snappy\",\n          \"group-data-checked/radio:scale-100 group-data-checked/radio:opacity-100\",\n          \"group-not-data-checked/radio:duration-(--dur-exit) group-not-data-checked/radio:ease-exit\",\n        )}\n      />\n    </BaseRadio.Root>\n  );\n}\n\nexport interface RadioGroupProps extends Omit<BaseRadioGroup.Props, \"className\" | \"render\"> {\n  className?: string;\n  /** Lay options out in a row instead of a column. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * DX-6426 - the choice this group sends is out and unanswered: every option is disabled and a veil with a spinner covers the set until it is\n   * answered. Pass it from the pending state of the write; the checked option stays the saved one until the answer repaints.\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function RadioGroup({\n  className,\n  orientation = \"vertical\",\n  loading = false,\n  disabled,\n  children,\n  ref,\n  ...props\n}: RadioGroupProps) {\n  return (\n    <BaseRadioGroup\n      ref={ref}\n      disabled={disabled || loading}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      className={cn(\n        \"relative flex min-w-0\",\n        orientation === \"vertical\" ? \"flex-col gap-3\" : \"flex-row flex-wrap gap-x-6 gap-y-3\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {loading && <PendingVeil />}\n    </BaseRadioGroup>\n  );\n}\n\n/* ---------------------------------------------------------------------------\n   LABELLED WRAPPERS\n\n   The bare controls above are unlabelled on purpose — a checkbox inside a table\n   cell has its meaning from the column, and forcing a label there produces\n   either a lie or a visually-hidden hack. These wrappers are what you reach for\n   the other 90% of the time.\n   -------------------------------------------------------------------------- */\n\ntype LabelledProps = Pick<FieldProps, \"label\" | \"description\" | \"error\" | \"disabled\" | \"name\">;\n\nexport interface CheckboxFieldProps extends CheckboxProps, LabelledProps {\n  fieldClassName?: string;\n}\n\nexport function CheckboxField({\n  label,\n  description,\n  error,\n  name,\n  disabled,\n  fieldClassName,\n  ...props\n}: CheckboxFieldProps) {\n  return (\n    <Field\n      layout=\"inline\"\n      label={label}\n      description={description}\n      error={error}\n      name={name}\n      disabled={disabled}\n      className={fieldClassName}\n    >\n      <Checkbox disabled={disabled} {...props} />\n    </Field>\n  );\n}\n\nexport interface SwitchFieldProps extends SwitchProps, LabelledProps {\n  fieldClassName?: string;\n}\n\nexport function SwitchField({\n  label,\n  description,\n  error,\n  name,\n  disabled,\n  fieldClassName,\n  ...props\n}: SwitchFieldProps) {\n  return (\n    <Field\n      layout=\"inline\"\n      label={label}\n      description={description}\n      error={error}\n      name={name}\n      disabled={disabled}\n      className={fieldClassName}\n    >\n      <Switch disabled={disabled} {...props} />\n    </Field>\n  );\n}\n\nexport interface RadioFieldProps extends RadioProps, LabelledProps {\n  fieldClassName?: string;\n}\n\nexport function RadioField({\n  label,\n  description,\n  error,\n  name,\n  disabled,\n  fieldClassName,\n  ...props\n}: RadioFieldProps) {\n  return (\n    <Field\n      layout=\"inline\"\n      label={label}\n      description={description}\n      error={error}\n      name={name}\n      disabled={disabled}\n      className={fieldClassName}\n    >\n      <Radio disabled={disabled} {...props} />\n    </Field>\n  );\n}\n\nexport interface RadioCardProps extends RadioProps {\n  label: ReactNode;\n  description?: ReactNode;\n}\n\n/**\n * A radio rendered as a full selectable card.\n *\n * The whole card is the hit target, which is the point: on touch, a 22px dot\n * beside a paragraph of text is a target most people miss at least once, and\n * the card turns the same choice into something you cannot miss.\n */\nexport function RadioCard({ label, description, className, size, ...props }: RadioCardProps) {\n  return (\n    <label\n      className={cn(\n        \"group/card relative flex cursor-pointer items-start gap-3 rounded-lg border p-4\",\n        \"border-border bg-surface\",\n        \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n        \"hover:border-border-interactive hover:bg-surface-hover\",\n        \"has-data-checked:border-control has-data-checked:bg-control-subtle has-data-checked:shadow-sm\",\n        /* Checked AND hovered. `:has()` takes the specificity of its argument,\n           so `has-data-checked:` and `hover:` weigh the same and class order\n           decided which fill a hovered checked card got — when hover won, the\n           card read as unchecked under the pointer. Stacking settles it. */\n        \"has-data-checked:hover:bg-control-subtle-hover\",\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:opacity-45\",\n        className,\n      )}\n    >\n      <Radio size={size} {...props} />\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-sm font-medium text-primary\">{label}</span>\n        {description && <span className=\"text-2xs text-tertiary\">{description}</span>}\n      </span>\n    </label>\n  );\n}\n"],"names":["checkbox","tv","Checkbox","size","className","loading","disabled","ref","props","jsxs","BaseCheckbox","cn","jsx","Spinner","switchTrack","switchThumb","Switch","BaseSwitch","radio","Radio","BaseRadio","RadioGroup","orientation","children","BaseRadioGroup","PendingVeil","CheckboxField","label","description","error","name","fieldClassName","Field","SwitchField","RadioField","RadioCard"],"mappings":"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"}