@kanzo-tech/ui 0.11.0 → 0.13.0

package/dist/simples/radio-group.js

@@ -1,46 +1,47 @@
 "use client";
 import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import { useFieldContext as b } from "@ark-ui/react/field";
-import { useRadioGroupContext as m, RadioGroup as o } from "@ark-ui/react/radio-group";
+import { useFieldContext as p } from "@ark-ui/react/field";
+import { useRadioGroupContext as b, RadioGroup as d } from "@ark-ui/react/radio-group";
+import { tv as f } from "tailwind-variants";
 import { cn as l } from "../lib/cn.js";
+import { controlSizes as g, controlMinHeight as v } from "../lib/control-size.js";
 import { FieldLabel as u } from "./field.js";
-const k = m, I = (a) => {
-  const { className: d, children: t, columns: e, style: s, slot: n, ...p } = a, r = b();
+const z = b, j = (t) => {
+  const { className: o, children: a, columns: e, style: s, slot: n, ...m } = t, r = p();
   return /* @__PURE__ */ i(
-    o.Root,
+    d.Root,
     {
       className: l(
         e === void 0 ? "flex flex-col gap-3" : "grid gap-3",
         e === "auto" && "grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]",
         typeof e == "number" && "grid-cols-[repeat(var(--columns),minmax(0,1fr))]",
         "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
-        d
+        o
       ),
       disabled: r == null ? void 0 : r.disabled,
       invalid: r == null ? void 0 : r.invalid,
       readOnly: r == null ? void 0 : r.readOnly,
       required: r == null ? void 0 : r.required,
       style: typeof e == "number" ? { "--columns": e, ...s } : s,
-      ...p,
+      ...m,
       "data-slot": n ?? "radio-group",
-      children: t
+      children: a
     }
   );
-}, R = (a) => {
-  const { tabIndex: d, className: t, children: e, slot: s, ...n } = a;
+}, x = f({
+  base: ["inline-flex items-center gap-2", "text-sm", "data-disabled:opacity-64"],
+  variants: { labelled: { true: [g.md, v] } }
+}), H = (t) => {
+  const { tabIndex: o, className: a, children: e, slot: s, ...n } = t;
   return /* @__PURE__ */ c(
-    o.Item,
+    d.Item,
     {
-      className: l(
-        "inline-flex items-center gap-2",
-        "data-disabled:opacity-64",
-        t
-      ),
+      className: l(x({ labelled: e != null }), a),
       ...n,
       "data-slot": s ?? "radio-group-item",
       children: [
         /* @__PURE__ */ i(
-          o.ItemControl,
+          d.ItemControl,
           {
             className: l(
               "relative",
@@ -62,15 +63,15 @@ const k = m, I = (a) => {
             "data-slot": "radio-group-item-control"
           }
         ),
-        /* @__PURE__ */ i(f, { children: e }),
-        /* @__PURE__ */ i(o.ItemHiddenInput, { tabIndex: d })
+        /* @__PURE__ */ i(h, { children: e }),
+        /* @__PURE__ */ i(d.ItemHiddenInput, { tabIndex: o })
       ]
     }
   );
-}, G = (a) => {
-  const { tabIndex: d, className: t, children: e, slot: s, ...n } = a;
+}, L = (t) => {
+  const { tabIndex: o, className: a, children: e, slot: s, ...n } = t;
   return /* @__PURE__ */ c(
-    o.Item,
+    d.Item,
     {
       className: l(
         "relative flex cursor-pointer gap-2 rounded-field border border-input bg-transparent p-3 transition-colors",
@@ -98,52 +99,52 @@ const k = m, I = (a) => {
         "data-disabled:pointer-events-none data-disabled:opacity-64",
         "has-data-focus-visible:border-primary has-data-focus-visible:ring-[3px] has-data-focus-visible:ring-ring",
         "data-invalid:border-destructive",
-        t
+        a
       ),
       ...n,
       "data-slot": s ?? "radio-group-card",
       children: [
         e,
-        /* @__PURE__ */ i(o.ItemHiddenInput, { tabIndex: d })
+        /* @__PURE__ */ i(d.ItemHiddenInput, { tabIndex: o })
       ]
     }
   );
-}, N = (a) => {
-  const { className: d, slot: t, ...e } = a;
+}, q = (t) => {
+  const { className: o, slot: a, ...e } = t;
   return /* @__PURE__ */ i(
-    o.ItemControl,
+    d.ItemControl,
     {
       className: l(
         "inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-field shadow-xs/5",
         "before:size-1.5 before:rounded-full",
         "data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground",
-        d
+        o
       ),
       ...e,
-      "data-slot": t ?? "radio-group-indicator"
+      "data-slot": a ?? "radio-group-indicator"
     }
   );
-}, f = (a) => {
-  const { className: d, children: t, slot: e, ...s } = a;
+}, h = (t) => {
+  const { className: o, children: a, slot: e, ...s } = t;
   return /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(
-    o.ItemText,
+    d.ItemText,
     {
       ...s,
       "data-slot": e ?? "radio-group-item-text",
-      children: t
+      children: a
     }
   ) });
-}, C = (a) => {
-  const { children: d, slot: t, ...e } = a;
-  return /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(o.Label, { ...e, "data-slot": t ?? "radio-group-label", children: d }) });
+}, w = (t) => {
+  const { children: o, slot: a, ...e } = t;
+  return /* @__PURE__ */ i(u, { asChild: !0, children: /* @__PURE__ */ i(d.Label, { ...e, "data-slot": a ?? "radio-group-label", children: o }) });
 };
 export {
-  I as RadioGroup,
-  G as RadioGroupCard,
-  N as RadioGroupIndicator,
-  R as RadioGroupItem,
-  C as RadioGroupLabel,
-  f as RadioGroupText,
-  k as useRadioGroup
+  j as RadioGroup,
+  L as RadioGroupCard,
+  q as RadioGroupIndicator,
+  H as RadioGroupItem,
+  w as RadioGroupLabel,
+  h as RadioGroupText,
+  z as useRadioGroup
 };
 //# sourceMappingURL=radio-group.js.map

package/dist/simples/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../../src/simples/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport {\n  RadioGroup as ArkRadioGroup,\n  useRadioGroupContext,\n} from \"@ark-ui/react/radio-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\nexport const useRadioGroup = useRadioGroupContext;\n\nexport interface RadioGroupProps\n  extends React.ComponentProps<typeof ArkRadioGroup.Root> {\n  /**\n   * Lay the items out as a grid instead of the default column. `\"auto\"` fits as many\n   * card-width tracks as the container allows; a number pins the count.\n   *\n   * A declared addition to Shark's file, and the whole of what the deleted `CardRadioGroup`\n   * added over this compound. Distinct from Ark's `orientation`, which is arrow-key direction\n   * and not layout. The count is written to a `--columns` custom property rather than a class,\n   * so a responsive count stays CSS and needs no second prop:\n   * `columns={1} className=\"sm:[--columns:2] lg:[--columns:4]\"`.\n   */\n  columns?: number | \"auto\";\n}\n\n// Divergence from Shark, declared: Ark 5.37.2's `useRadioGroup` bridges `useFieldsetContext`\n// (disabled/invalid/legend id) but NOT `useFieldContext` — grep `dist/components` and radio-group\n// is one of only two form machines with zero `useFieldContext` imports (Slider is the other; the\n// thirteen single-control machines all have one). Ark's Field docs only claim \"most\" components\n// support the context and there is no upstream issue, so this reads as an unfilled gap, not a\n// decision. Shark neither bridges nor documents it: its docs say \"use the `invalid` prop on\n// RadioGroup\", and its own TanStack example wraps `<Field invalid>` around a RadioGroup that\n// never turns red. We bridge it, so `invalid` is stated once on the Field.\n//\n// State flags only, never `field.ids`: Field addresses ONE control, and a radio group has one\n// hidden input per item, so there is no single id for its label to point at — `FieldSet` +\n// `FieldLegend` remains the right labelling container. Explicit props still win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before it reaches the machine, so\n// the built-in Fieldset bridge is untouched.\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { className, children, columns, style, slot, ...rest } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <ArkRadioGroup.Root\n      className={cn(\n        columns === undefined ? \"flex flex-col gap-3\" : \"grid gap-3\",\n        columns === \"auto\" && \"grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]\",\n        typeof columns === \"number\" &&\n          \"grid-cols-[repeat(var(--columns),minmax(0,1fr))]\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      disabled={field?.disabled}\n      invalid={field?.invalid}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      style={\n        typeof columns === \"number\"\n          ? ({ \"--columns\": columns, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n      data-slot={slot ?? \"radio-group\"}\n    >\n      {children}\n    </ArkRadioGroup.Root>\n  );\n};\n\nexport const RadioGroupItem = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(\n        \"inline-flex items-center gap-2\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-item\"}\n    >\n      <ArkRadioGroup.ItemControl\n        className={cn(\n          \"relative\",\n          \"inline-flex shrink-0 items-center justify-center\",\n          \"size-4\",\n          \"border border-input shadow-xs/5\",\n          \"bg-field\",\n          \"rounded-full\",\n          \"before:size-1.5 before:rounded-full\",\n          \"data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring data-focus-visible:ring-offset-1 data-focus-visible:ring-offset-background\",\n          // No border clause here: `data-invalid` below already paints it solid `--destructive`,\n          // and the `/64` this used to carry made focus *weaken* the boundary 1.4.11 asks 3:1 of.\n          \"data-focus-visible:data-invalid:ring-destructive/48\",\n          \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n          \"dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-[3px]\",\n          \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n          \"data-invalid:data-[state=checked]:bg-transparent data-invalid:data-[state=checked]:before:bg-destructive-foreground\"\n        )}\n        data-slot=\"radio-group-item-control\"\n      />\n\n      <RadioGroupText>{children}</RadioGroupText>\n\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// A card-shaped option: raw children (compose label/description/preview/indicator yourself),\n// full radio semantics from Ark, the selected look driven by `data-[state=checked]`. This is\n// what \"card radio\" is — the same machine styled as a card, not a separate component.\nexport const RadioGroupCard = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(\n        \"relative flex cursor-pointer gap-2 rounded-field border border-input bg-transparent p-3 transition-colors\",\n        // The rest state is the backdrop (`bg-transparent`) and a card can sit anywhere, so no\n        // solid and no percentage is right everywhere: a 50% `bg-accent` measures ΔE 0.00 from rest\n        // on an accent backdrop and solid `bg-secondary` measures 0.00 on a secondary one — a hover\n        // and a selected state a user cannot see, on the surface each is most likely to meet. Both\n        // are therefore alpha steps, composited onto whatever is under them.\n        //\n        // **Selected is the BRAND's step and hover is the neutral's**, which is the half worth not\n        // undoing: the border already goes `--primary` when checked, so a neutral fill under a\n        // brand border was the one place a tenant's palette stopped at the outline. It is also what\n        // the reference does — shadcn's choice card is `border-primary` over a 5% `--primary`.\n        //\n        // Measured 2026-08-20 over `packages/theme/palettes/*.css` — six documents × two modes ×\n        // the six surfaces a card can sit on (background, card, popover, muted, secondary, accent),\n        // 72 pairs. Floors, light / dark: rest→hover ΔE 3.34 / 5.32, rest→selected 5.81 / 9.46,\n        // hover→selected **1.46 / 3.47**. That last figure is the one to read before changing this:\n        // the neutral `base-a5` it replaced measured 2.73 / 3.03 there, so the fill alone separates\n        // hover from selected LESS well than it did. **`border-input` → `border-primary` is what\n        // carries that step**, and it is a far larger signal than either fill; the fill's own job is\n        // rest→selected, which improved. Take the border away and this stops being measured.\n        \"hover:bg-foreground/14\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/17\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"has-data-focus-visible:border-primary has-data-focus-visible:ring-[3px] has-data-focus-visible:ring-ring\",\n        \"data-invalid:border-destructive\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-card\"}\n    >\n      {children}\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// The visual radio dot, no semantics of its own — drop it inside a card to show selection.\nexport const RadioGroupIndicator = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemControl>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.ItemControl\n      className={cn(\n        \"inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-field shadow-xs/5\",\n        \"before:size-1.5 before:rounded-full\",\n        \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-indicator\"}\n    />\n  );\n};\n\nexport const RadioGroupText = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemText>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.ItemText\n        {...rest}\n        data-slot={slot ?? \"radio-group-item-text\"}\n      >\n        {children}\n      </ArkRadioGroup.ItemText>\n    </FieldLabel>\n  );\n};\n\nexport const RadioGroupLabel = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.Label {...rest} data-slot={slot ?? \"radio-group-label\"}>\n        {children}\n      </ArkRadioGroup.Label>\n    </FieldLabel>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAWO;AAgCL;AAIA;AACE;AAAe;AAAd;AACY;AACuC;AAC1B;AAEpB;AACF;AACA;AAAA;AAEe;AACD;AACC;AACA;AAIX;AAEF;AACe;AAElB;AAAA;AAGP;AAKE;AAEA;AACE;AAAe;AAAd;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AAAA;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAGc;AAEyB;AAAA;AAAA;AAGzD;AAQE;AAEA;AACE;AAAe;AAAd;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AACkD;AAAA;AAAA;AAGzD;AAME;AAEA;AACE;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AAEI;AAAe;AAAd;AACK;AACe;AAElB;AAAA;AAIT;AAKE;AAEA;AAOF;;;;;;;;;;"}
+{"version":3,"file":"radio-group.js","sources":["../../src/simples/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport {\n  RadioGroup as ArkRadioGroup,\n  useRadioGroupContext,\n} from \"@ark-ui/react/radio-group\";\nimport type React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlMinHeight, controlSizes } from \"../lib/control-size\";\nimport { FieldLabel } from \"./field\";\n\nexport const useRadioGroup = useRadioGroupContext;\n\nexport interface RadioGroupProps\n  extends React.ComponentProps<typeof ArkRadioGroup.Root> {\n  /**\n   * Lay the items out as a grid instead of the default column. `\"auto\"` fits as many\n   * card-width tracks as the container allows; a number pins the count.\n   *\n   * A declared addition to Shark's file, and the whole of what the deleted `CardRadioGroup`\n   * added over this compound. Distinct from Ark's `orientation`, which is arrow-key direction\n   * and not layout. The count is written to a `--columns` custom property rather than a class,\n   * so a responsive count stays CSS and needs no second prop:\n   * `columns={1} className=\"sm:[--columns:2] lg:[--columns:4]\"`.\n   */\n  columns?: number | \"auto\";\n}\n\n// Divergence from Shark, declared: Ark 5.37.2's `useRadioGroup` bridges `useFieldsetContext`\n// (disabled/invalid/legend id) but NOT `useFieldContext` — grep `dist/components` and radio-group\n// is one of only two form machines with zero `useFieldContext` imports (Slider is the other; the\n// thirteen single-control machines all have one). Ark's Field docs only claim \"most\" components\n// support the context and there is no upstream issue, so this reads as an unfilled gap, not a\n// decision. Shark neither bridges nor documents it: its docs say \"use the `invalid` prop on\n// RadioGroup\", and its own TanStack example wraps `<Field invalid>` around a RadioGroup that\n// never turns red. We bridge it, so `invalid` is stated once on the Field.\n//\n// State flags only, never `field.ids`: Field addresses ONE control, and a radio group has one\n// hidden input per item, so there is no single id for its label to point at — `FieldSet` +\n// `FieldLegend` remains the right labelling container. Explicit props still win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before it reaches the machine, so\n// the built-in Fieldset bridge is untouched.\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { className, children, columns, style, slot, ...rest } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <ArkRadioGroup.Root\n      className={cn(\n        columns === undefined ? \"flex flex-col gap-3\" : \"grid gap-3\",\n        columns === \"auto\" && \"grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))]\",\n        typeof columns === \"number\" &&\n          \"grid-cols-[repeat(var(--columns),minmax(0,1fr))]\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      disabled={field?.disabled}\n      invalid={field?.invalid}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      style={\n        typeof columns === \"number\"\n          ? ({ \"--columns\": columns, ...style } as React.CSSProperties)\n          : style\n      }\n      {...rest}\n      data-slot={slot ?? \"radio-group\"}\n    >\n      {children}\n    </ArkRadioGroup.Root>\n  );\n};\n\n/**\n * The row an indicator and its label sit in. **Labelled, it is one control tall** — the shared\n * height, centred — so a switch, a checkbox or a radio lines up with an input beside it and with the\n * rows above and below in a form. Alone (no children: a cell in a table) it is the indicator and\n * nothing else, and the height is not asked of it.\n */\nconst radioGroupItemVariants = tv({\n  base: [\"inline-flex items-center gap-2\", \"text-sm\", \"data-disabled:opacity-64\"],\n  variants: { labelled: { true: [controlSizes.md, controlMinHeight] } },\n});\n\nexport const RadioGroupItem = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(radioGroupItemVariants({ labelled: children != null }), className)}\n      {...rest}\n      data-slot={slot ?? \"radio-group-item\"}\n    >\n      <ArkRadioGroup.ItemControl\n        className={cn(\n          \"relative\",\n          \"inline-flex shrink-0 items-center justify-center\",\n          \"size-4\",\n          \"border border-input shadow-xs/5\",\n          \"bg-field\",\n          \"rounded-full\",\n          \"before:size-1.5 before:rounded-full\",\n          \"data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring data-focus-visible:ring-offset-1 data-focus-visible:ring-offset-background\",\n          // No border clause here: `data-invalid` below already paints it solid `--destructive`,\n          // and the `/64` this used to carry made focus *weaken* the boundary 1.4.11 asks 3:1 of.\n          \"data-focus-visible:data-invalid:ring-destructive/48\",\n          \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n          \"dark:data-invalid:text-destructive-foreground dark:data-invalid:ring-[3px]\",\n          \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n          \"data-invalid:data-[state=checked]:bg-transparent data-invalid:data-[state=checked]:before:bg-destructive-foreground\"\n        )}\n        data-slot=\"radio-group-item-control\"\n      />\n\n      <RadioGroupText>{children}</RadioGroupText>\n\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// A card-shaped option: raw children (compose label/description/preview/indicator yourself),\n// full radio semantics from Ark, the selected look driven by `data-[state=checked]`. This is\n// what \"card radio\" is — the same machine styled as a card, not a separate component.\nexport const RadioGroupCard = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Item>\n) => {\n  const { tabIndex, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.Item\n      className={cn(\n        \"relative flex cursor-pointer gap-2 rounded-field border border-input bg-transparent p-3 transition-colors\",\n        // The rest state is the backdrop (`bg-transparent`) and a card can sit anywhere, so no\n        // solid and no percentage is right everywhere: a 50% `bg-accent` measures ΔE 0.00 from rest\n        // on an accent backdrop and solid `bg-secondary` measures 0.00 on a secondary one — a hover\n        // and a selected state a user cannot see, on the surface each is most likely to meet. Both\n        // are therefore alpha steps, composited onto whatever is under them.\n        //\n        // **Selected is the BRAND's step and hover is the neutral's**, which is the half worth not\n        // undoing: the border already goes `--primary` when checked, so a neutral fill under a\n        // brand border was the one place a tenant's palette stopped at the outline. It is also what\n        // the reference does — shadcn's choice card is `border-primary` over a 5% `--primary`.\n        //\n        // Measured 2026-08-20 over `packages/theme/palettes/*.css` — six documents × two modes ×\n        // the six surfaces a card can sit on (background, card, popover, muted, secondary, accent),\n        // 72 pairs. Floors, light / dark: rest→hover ΔE 3.34 / 5.32, rest→selected 5.81 / 9.46,\n        // hover→selected **1.46 / 3.47**. That last figure is the one to read before changing this:\n        // the neutral `base-a5` it replaced measured 2.73 / 3.03 there, so the fill alone separates\n        // hover from selected LESS well than it did. **`border-input` → `border-primary` is what\n        // carries that step**, and it is a far larger signal than either fill; the fill's own job is\n        // rest→selected, which improved. Take the border away and this stops being measured.\n        \"hover:bg-foreground/14\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/17\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"has-data-focus-visible:border-primary has-data-focus-visible:ring-[3px] has-data-focus-visible:ring-ring\",\n        \"data-invalid:border-destructive\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-card\"}\n    >\n      {children}\n      <ArkRadioGroup.ItemHiddenInput tabIndex={tabIndex} />\n    </ArkRadioGroup.Item>\n  );\n};\n\n// The visual radio dot, no semantics of its own — drop it inside a card to show selection.\nexport const RadioGroupIndicator = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemControl>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkRadioGroup.ItemControl\n      className={cn(\n        \"inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-field shadow-xs/5\",\n        \"before:size-1.5 before:rounded-full\",\n        \"data-[state=checked]:bg-primary data-[state=checked]:before:bg-primary-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"radio-group-indicator\"}\n    />\n  );\n};\n\nexport const RadioGroupText = (\n  props: React.ComponentProps<typeof ArkRadioGroup.ItemText>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.ItemText\n        {...rest}\n        data-slot={slot ?? \"radio-group-item-text\"}\n      >\n        {children}\n      </ArkRadioGroup.ItemText>\n    </FieldLabel>\n  );\n};\n\nexport const RadioGroupLabel = (\n  props: React.ComponentProps<typeof ArkRadioGroup.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkRadioGroup.Label {...rest} data-slot={slot ?? \"radio-group-label\"}>\n        {children}\n      </ArkRadioGroup.Label>\n    </FieldLabel>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAaO;AAgCL;AAIA;AACE;AAAe;AAAd;AACY;AACuC;AAC1B;AAEpB;AACF;AACA;AAAA;AAEe;AACD;AACC;AACA;AAIX;AAEF;AACe;AAElB;AAAA;AAGP;AAQkC;AAC8C;AAEhF;AAKE;AAEA;AACE;AAAe;AAAd;AACgF;AAC3E;AACe;AAEnB;AAAA;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAGc;AAEyB;AAAA;AAAA;AAGzD;AAQE;AAEA;AACE;AAAe;AAAd;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AACkD;AAAA;AAAA;AAGzD;AAME;AAEA;AACE;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AAEI;AAAe;AAAd;AACK;AACe;AAElB;AAAA;AAIT;AAKE;AAEA;AAOF;;;;;;;;;;"}

package/dist/simples/segment-group.d.ts

@@ -1,5 +1,6 @@
 import { SegmentGroup as ArkSegmentGroup } from '@ark-ui/react/segment-group';
 import { default as React } from 'react';
+import { controlSizes } from '../lib/control-size';
 export declare const useSegmentGroup: () => import('@ark-ui/react').UseSegmentGroupContext;
 type SegmentGroupVariant = "default" | "underline" | "solid";
 export interface SegmentGroupOption {
@@ -14,6 +15,13 @@ interface SegmentGroupProps extends React.ComponentProps<typeof ArkSegmentGroup.
      * @default "default"
      */
     variant?: SegmentGroupVariant;
+    /**
+     * The height of a segment row: the same token, and the same height, as an `Input` of that size.
+     * A vertical group stacks rows of that height.
+     *
+     * @default "md"
+     */
+    size?: keyof typeof controlSizes;
     /** Data-driven items rendered before `children` (additive with the compound API). */
     options?: readonly SegmentGroupOption[];
     /** Extra classes applied to each `options`-rendered item. */

package/dist/simples/segment-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment-group.d.ts","sourceRoot":"","sources":["../../src/simples/segment-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,KAAK,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAsDpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBA4BzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,sBAW7D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,sBA8B9D,CAAC"}
+{"version":3,"file":"segment-group.d.ts","sourceRoot":"","sources":["../../src/simples/segment-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,KAAK,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAkEpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBA6BzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,sBAW7D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,sBA8B9D,CAAC"}

package/dist/simples/segment-group.js

@@ -1,23 +1,32 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { useSegmentGroupContext as c, SegmentGroup as o } from "@ark-ui/react/segment-group";
-import { cn as i } from "../lib/cn.js";
-const N = c, w = (e) => {
+"use client";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useFieldContext as h } from "@ark-ui/react/field";
+import { useSegmentGroupContext as b, SegmentGroup as i } from "@ark-ui/react/segment-group";
+import { cn as s } from "../lib/cn.js";
+import { controlSizes as f } from "../lib/control-size.js";
+const j = b, C = (e) => {
   const {
     orientation: a = "horizontal",
     variant: r = "default",
-    options: t,
-    itemClassName: s,
-    className: u,
-    children: p,
-    slot: g,
-    ...m
-  } = e;
-  return /* @__PURE__ */ l(
-    o.Root,
+    size: n = "md",
+    options: d,
+    itemClassName: m,
+    className: p,
+    children: g,
+    slot: c,
+    ...v
+  } = e, t = h();
+  return /* @__PURE__ */ u(
+    i.Root,
     {
-      className: i(
+      className: s(
         "group/segment-group relative",
         "flex gap-2",
+        f[n],
+        // A horizontal group is one control tall, whatever its variant: the track's border and
+        // padding are inside that height, so the segments are what is left of it. Vertical is a
+        // stack of them.
+        "data-[orientation=horizontal]:h-(--size)",
         "isolate",
         "data-[orientation=vertical]:flex-col",
         "data-disabled:opacity-64",
@@ -30,35 +39,40 @@ const N = c, w = (e) => {
         // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a
         // border and a hover surface would stop being the same colour.
         "data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1",
-        u
+        p
       ),
       "data-variant": r,
+      disabled: t == null ? void 0 : t.disabled,
+      invalid: t == null ? void 0 : t.invalid,
       orientation: a,
-      ...m,
-      "data-slot": g ?? "segment-group",
+      readOnly: t == null ? void 0 : t.readOnly,
+      required: t == null ? void 0 : t.required,
+      ...v,
+      "data-slot": c ?? "segment-group",
       children: [
-        /* @__PURE__ */ n(b, {}),
-        t == null ? void 0 : t.map((d) => /* @__PURE__ */ n(
-          v,
+        /* @__PURE__ */ o(y, {}),
+        d == null ? void 0 : d.map((l) => /* @__PURE__ */ o(
+          x,
           {
-            value: d.value,
-            disabled: d.disabled,
-            className: i("px-3 py-1.5", s),
-            children: /* @__PURE__ */ n(h, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: d.label })
+            value: l.value,
+            disabled: l.disabled,
+            className: s("px-3", m),
+            children: /* @__PURE__ */ o(z, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: l.label })
           },
-          d.value
+          l.value
         )),
-        p
+        g
       ]
     }
   );
-}, v = (e) => {
-  const { className: a, children: r, slot: t, ...s } = e;
-  return /* @__PURE__ */ l(
-    o.Item,
+}, x = (e) => {
+  const { className: a, children: r, slot: n, ...d } = e;
+  return /* @__PURE__ */ u(
+    i.Item,
     {
-      className: i(
+      className: s(
         "relative z-1",
+        "data-[orientation=horizontal]:h-full data-[orientation=vertical]:h-(--size)",
         "inline-flex items-center justify-center",
         "cursor-pointer select-none",
         "text-sm font-medium text-muted-foreground transition-colors",
@@ -70,31 +84,31 @@ const N = c, w = (e) => {
         "data-disabled:pointer-events-none data-disabled:opacity-64",
         a
       ),
-      ...s,
-      "data-slot": t ?? "segment-group-item",
+      ...d,
+      "data-slot": n ?? "segment-group-item",
       children: [
         r,
-        /* @__PURE__ */ n(o.ItemControl, {}),
-        /* @__PURE__ */ n(o.ItemHiddenInput, {})
+        /* @__PURE__ */ o(i.ItemControl, {}),
+        /* @__PURE__ */ o(i.ItemHiddenInput, {})
       ]
     }
   );
-}, h = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.ItemText,
+}, z = (e) => {
+  const { className: a, slot: r, ...n } = e;
+  return /* @__PURE__ */ o(
+    i.ItemText,
     {
-      className: i("relative z-1", a),
-      ...t,
+      className: s("relative z-1", a),
+      ...n,
       "data-slot": r ?? "segment-group-item-text"
     }
   );
-}, b = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.Indicator,
+}, y = (e) => {
+  const { className: a, slot: r, ...n } = e;
+  return /* @__PURE__ */ o(
+    i.Indicator,
     {
-      className: i(
+      className: s(
         "absolute top-(--top) left-(--left) z-0",
         "h-(--height) w-(--width)",
         "rounded-[inherit]",
@@ -114,16 +128,16 @@ const N = c, w = (e) => {
         "motion-reduce:transition-none!",
         a
       ),
-      ...t,
+      ...n,
       "data-slot": r ?? "segment-group-indicator"
     }
   );
 };
 export {
-  w as SegmentGroup,
-  b as SegmentGroupIndicator,
-  v as SegmentGroupItem,
-  h as SegmentGroupItemText,
-  N as useSegmentGroup
+  C as SegmentGroup,
+  y as SegmentGroupIndicator,
+  x as SegmentGroupItem,
+  z as SegmentGroupItemText,
+  j as useSegmentGroup
 };
 //# sourceMappingURL=segment-group.js.map

package/dist/simples/segment-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment-group.js","sources":["../../src/simples/segment-group.tsx"],"sourcesContent":["import {\n  SegmentGroup as ArkSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSegmentGroup = useSegmentGroupContext;\n\ntype SegmentGroupVariant = \"default\" | \"underline\" | \"solid\";\n\nexport interface SegmentGroupOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SegmentGroupProps\n  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {\n  /**\n   * The visual variant of the segment group.\n   *\n   * @default \"default\"\n   */\n  variant?: SegmentGroupVariant;\n  /** Data-driven items rendered before `children` (additive with the compound API). */\n  options?: readonly SegmentGroupOption[];\n  /** Extra classes applied to each `options`-rendered item. */\n  itemClassName?: string;\n}\n\nexport const SegmentGroup = (props: SegmentGroupProps) => {\n  const {\n    orientation = \"horizontal\",\n    variant = \"default\",\n    options,\n    itemClassName,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkSegmentGroup.Root\n      className={cn(\n        \"group/segment-group relative\",\n        \"flex gap-2\",\n        \"isolate\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:opacity-64\",\n        \"data-[variant=underline]:gap-1 data-[variant=underline]:border-input\",\n        \"data-[orientation=horizontal]:data-[variant=underline]:border-b\",\n        \"data-[orientation=vertical]:data-[variant=underline]:border-l\",\n        // `solid`: a filled `bg-muted` track with equal-width segments — the contained\n        // \"segmented control\" look, so consumers stop hand-rolling the track each time.\n        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop\n        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a\n        // border and a hover surface would stop being the same colour.\n        \"data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1\",\n        className\n      )}\n      data-variant={variant}\n      orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"segment-group\"}\n    >\n      <SegmentGroupIndicator />\n\n      {options?.map((o) => (\n        <SegmentGroupItem\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cn(\"px-3 py-1.5\", itemClassName)}\n        >\n          <SegmentGroupItemText className=\"flex items-center justify-center gap-2 text-sm font-medium\">\n            {o.label}\n          </SegmentGroupItemText>\n        </SegmentGroupItem>\n      ))}\n\n      {children}\n    </ArkSegmentGroup.Root>\n  );\n};\n\nexport const SegmentGroupItem = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Item\n      className={cn(\n        \"relative z-1\",\n        \"inline-flex items-center justify-center\",\n        \"cursor-pointer select-none\",\n        \"text-sm font-medium text-muted-foreground transition-colors\",\n        \"hover:text-foreground data-[state=checked]:text-foreground\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center\",\n        \"rounded-[inherit] border border-transparent\",\n        \"outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item\"}\n    >\n      {children}\n\n      <ArkSegmentGroup.ItemControl />\n      <ArkSegmentGroup.ItemHiddenInput />\n    </ArkSegmentGroup.Item>\n  );\n};\n\nexport const SegmentGroupItemText = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.ItemText\n      className={cn(\"relative z-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item-text\"}\n    />\n  );\n};\n\nexport const SegmentGroupIndicator = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Indicator\n      className={cn(\n        \"absolute top-(--top) left-(--left) z-0\",\n        \"h-(--height) w-(--width)\",\n        \"rounded-[inherit]\",\n        // The moving \"pill\": an elevated surface with a hairline border and a soft shadow, so\n        // the selected segment reads as a raised chip on the muted track (crisp, not flat).\n        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.\n        \"border border-border bg-background shadow-sm\",\n        \"transition-[width,height,left,top] duration-150 ease-out\",\n        \"[transition-property:var(--transition-property,width,height,left,top)]\",\n        // `underline` is a bar, not a pill: drop the chrome and paint the accent.\n        \"group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-indicator\"}\n    />\n  );\n};\n"],"names":["useSegmentGroup","useSegmentGroupContext","SegmentGroup","props","orientation","variant","options","itemClassName","className","children","slot","rest","jsxs","ArkSegmentGroup","cn","jsx","SegmentGroupIndicator","o","SegmentGroupItem","SegmentGroupItemText"],"mappings":";;;AAOO,MAAMA,IAAkBC,GAwBlBC,IAAe,CAACC,MAA6B;AACxD,QAAM;AAAA,IACJ,aAAAC,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAEJ,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,gBAAcH;AAAA,MACd,aAAAD;AAAA,MACC,GAAGO;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAsB;AAAA,QAEtBV,KAAA,gBAAAA,EAAS,IAAI,CAACW,MACb,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,OAAOD,EAAE;AAAA,YACT,UAAUA,EAAE;AAAA,YACZ,WAAWH,EAAG,eAAeP,CAAa;AAAA,YAE1C,UAAA,gBAAAQ,EAACI,GAAA,EAAqB,WAAU,8DAC7B,YAAE,MAAA,CACL;AAAA,UAAA;AAAA,UAPKF,EAAE;AAAA,QAAA;AAAA,QAWVR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaS,IAAmB,CAC9Bf,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASR;AAE/C,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAD;AAAA,QAED,gBAAAM,EAACF,EAAgB,aAAhB,EAA4B;AAAA,QAC7B,gBAAAE,EAACF,EAAgB,iBAAhB,CAAA,CAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC,GAEaM,IAAuB,CAClChB,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC,EAAG,gBAAgBN,CAAS;AAAA,MACtC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAwB,CACnCb,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}
+{"version":3,"file":"segment-group.js","sources":["../../src/simples/segment-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport {\n  SegmentGroup as ArkSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { controlSizes } from \"../lib/control-size\";\n\nexport const useSegmentGroup = useSegmentGroupContext;\n\ntype SegmentGroupVariant = \"default\" | \"underline\" | \"solid\";\n\nexport interface SegmentGroupOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SegmentGroupProps\n  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {\n  /**\n   * The visual variant of the segment group.\n   *\n   * @default \"default\"\n   */\n  variant?: SegmentGroupVariant;\n  /**\n   * The height of a segment row: the same token, and the same height, as an `Input` of that size.\n   * A vertical group stacks rows of that height.\n   *\n   * @default \"md\"\n   */\n  size?: keyof typeof controlSizes;\n  /** Data-driven items rendered before `children` (additive with the compound API). */\n  options?: readonly SegmentGroupOption[];\n  /** Extra classes applied to each `options`-rendered item. */\n  itemClassName?: string;\n}\n\n// Ark's `useSegmentGroup` reads no `useFieldContext`, so a `Field disabled` left the segments\n// clickable. Bridged here the way `RadioGroup` does it — state flags only, explicit props win, and\n// with no `Field` ancestor every flag is `undefined`, which Ark strips before the machine sees it.\nexport const SegmentGroup = (props: SegmentGroupProps) => {\n  const {\n    orientation = \"horizontal\",\n    variant = \"default\",\n    size = \"md\",\n    options,\n    itemClassName,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <ArkSegmentGroup.Root\n      className={cn(\n        \"group/segment-group relative\",\n        \"flex gap-2\",\n        controlSizes[size],\n        // A horizontal group is one control tall, whatever its variant: the track's border and\n        // padding are inside that height, so the segments are what is left of it. Vertical is a\n        // stack of them.\n        \"data-[orientation=horizontal]:h-(--size)\",\n        \"isolate\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:opacity-64\",\n        \"data-[variant=underline]:gap-1 data-[variant=underline]:border-input\",\n        \"data-[orientation=horizontal]:data-[variant=underline]:border-b\",\n        \"data-[orientation=vertical]:data-[variant=underline]:border-l\",\n        // `solid`: a filled `bg-muted` track with equal-width segments — the contained\n        // \"segmented control\" look, so consumers stop hand-rolling the track each time.\n        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop\n        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a\n        // border and a hover surface would stop being the same colour.\n        \"data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1\",\n        className\n      )}\n      data-variant={variant}\n      disabled={field?.disabled}\n      invalid={field?.invalid}\n      orientation={orientation}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      {...rest}\n      data-slot={slot ?? \"segment-group\"}\n    >\n      <SegmentGroupIndicator />\n\n      {options?.map((o) => (\n        <SegmentGroupItem\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cn(\"px-3\", itemClassName)}\n        >\n          <SegmentGroupItemText className=\"flex items-center justify-center gap-2 text-sm font-medium\">\n            {o.label}\n          </SegmentGroupItemText>\n        </SegmentGroupItem>\n      ))}\n\n      {children}\n    </ArkSegmentGroup.Root>\n  );\n};\n\nexport const SegmentGroupItem = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Item\n      className={cn(\n        \"relative z-1\",\n        \"data-[orientation=horizontal]:h-full data-[orientation=vertical]:h-(--size)\",\n        \"inline-flex items-center justify-center\",\n        \"cursor-pointer select-none\",\n        \"text-sm font-medium text-muted-foreground transition-colors\",\n        \"hover:text-foreground data-[state=checked]:text-foreground\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center\",\n        \"rounded-[inherit] border border-transparent\",\n        \"outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item\"}\n    >\n      {children}\n\n      <ArkSegmentGroup.ItemControl />\n      <ArkSegmentGroup.ItemHiddenInput />\n    </ArkSegmentGroup.Item>\n  );\n};\n\nexport const SegmentGroupItemText = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.ItemText\n      className={cn(\"relative z-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item-text\"}\n    />\n  );\n};\n\nexport const SegmentGroupIndicator = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Indicator\n      className={cn(\n        \"absolute top-(--top) left-(--left) z-0\",\n        \"h-(--height) w-(--width)\",\n        \"rounded-[inherit]\",\n        // The moving \"pill\": an elevated surface with a hairline border and a soft shadow, so\n        // the selected segment reads as a raised chip on the muted track (crisp, not flat).\n        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.\n        \"border border-border bg-background shadow-sm\",\n        \"transition-[width,height,left,top] duration-150 ease-out\",\n        \"[transition-property:var(--transition-property,width,height,left,top)]\",\n        // `underline` is a bar, not a pill: drop the chrome and paint the accent.\n        \"group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-indicator\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAWO;AAmCL;AAAM;AACU;AACJ;AACH;AACP;AACA;AACA;AACA;AACA;AACG;AAKL;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACiB;AAAA;AAAA;AAAA;AAIjB;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAEY;AACG;AACD;AAChB;AACiB;AACA;AACb;AACe;AAEnB;AAAuB;AAGrB;AAAC;AAAA;AAEU;AACG;AACuB;AAInC;AAAA;AAPO;AAAA;AAWV;AAAA;AAAA;AAGP;AAKE;AAEA;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAE4B;AACI;AAAA;AAAA;AAGvC;AAKE;AAEA;AACE;AAAiB;AAAhB;AACwC;AACnC;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;;;;;;;;"}

package/dist/simples/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/simples/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAE1C,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,sBAwExE,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/simples/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAa1C,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,sBAyExE,CAAC"}

package/dist/simples/switch.js

@@ -1,17 +1,23 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { useSwitchContext as l, Switch as t } from "@ark-ui/react/switch";
-import { cn as e } from "../lib/cn.js";
-const m = l, g = (s) => {
-  const { children: i, className: r, tabIndex: n, slot: o, ...c } = s;
+import { tv as u } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { controlSizes as h, controlMinHeight as p } from "../lib/control-size.js";
+const x = l, m = u({
+  base: ["inline-flex items-center gap-2", "text-sm", "data-disabled:opacity-64"],
+  variants: { labelled: { true: [h.md, p] } }
+}), k = (r) => {
+  const { children: e, className: s, tabIndex: n, slot: o, ...c } = r;
   return /* @__PURE__ */ d(
     t.Root,
     {
-      className: e(
+      className: i(
         "group/switch",
         "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
-        "inline-flex w-fit items-center gap-2",
-        "data-disabled:pointer-events-none data-disabled:opacity-64",
-        r
+        "w-fit",
+        "data-disabled:pointer-events-none",
+        m({ labelled: e !== void 0 }),
+        s
       ),
       ...c,
       "data-slot": o ?? "switch",
@@ -19,7 +25,7 @@ const m = l, g = (s) => {
         /* @__PURE__ */ a(
           t.Control,
           {
-            className: e(
+            className: i(
               "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
               "p-px",
               "flex shrink-0 items-center",
@@ -40,7 +46,7 @@ const m = l, g = (s) => {
             children: /* @__PURE__ */ a(
               t.Thumb,
               {
-                className: e(
+                className: i(
                   "block",
                   "aspect-square h-full w-auto",
                   "bg-background",
@@ -58,14 +64,14 @@ const m = l, g = (s) => {
             )
           }
         ),
-        i === void 0 ? null : /* @__PURE__ */ a(t.Label, { className: "text-sm leading-none", "data-slot": "switch-label", children: i }),
+        e === void 0 ? null : /* @__PURE__ */ a(t.Label, { className: "text-sm leading-none", "data-slot": "switch-label", children: e }),
         /* @__PURE__ */ a(t.HiddenInput, { tabIndex: n })
       ]
     }
   );
 };
 export {
-  g as Switch,
-  m as useSwitch
+  k as Switch,
+  x as useSwitch
 };
 //# sourceMappingURL=switch.js.map

package/dist/simples/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../src/simples/switch.tsx"],"sourcesContent":["import { Switch as ArkSwitch, useSwitchContext } from \"@ark-ui/react/switch\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSwitch = useSwitchContext;\n\nexport const Switch = (props: React.ComponentProps<typeof ArkSwitch.Root>) => {\n  const { children, className, tabIndex, slot, ...rest } = props;\n\n  return (\n    <ArkSwitch.Root\n      className={cn(\n        \"group/switch\",\n        \"[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]\",\n        \"inline-flex w-fit items-center gap-2\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"switch\"}\n    >\n      {/* The track, and everything that used to be on the root.\n          **It moved because the root has to be able to hold a label.** `children` were accepted by\n          the type and rendered nowhere: the root is Ark's `<label for=…>` and carried the track's\n          own box, so a caller passing text got a bare toggle with **no accessible name at all** —\n          measured on `/docs/forms/switch`, whose own example passes one. WCAG 4.1.2, and the ring\n          is the reason this is a part rather than a wrapper: on the root it would have drawn around\n          the label too. */}\n      <ArkSwitch.Control\n        className={cn(\n          \"h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]\",\n          \"p-px\",\n          \"flex shrink-0 items-center\",\n          \"rounded-full border border-transparent\",\n          \"transition-all\",\n          \"outline-none group-data-[focus-visible]/switch:ring-[3px] group-data-invalid/switch:ring-[3px]\",\n          \"group-data-[focus-visible]/switch:border-primary group-data-[focus-visible]/switch:ring-ring\",\n          \"group-data-invalid/switch:border-destructive group-data-invalid/switch:ring-destructive/24\",\n          \"group-data-[state=checked]/switch:bg-primary\",\n          // The track IS this control's boundary — `border` is transparent — and the thumb is\n          // `bg-background`, so the track is the only thing that says the switch is off. A surface\n          // step puts the thumb at ~1.07:1 against it and the off state stops being readable, which\n          // is 1.4.11 asking about a *state*, not about a fill. Boundary contrast, spelled as a fill.\n          \"group-data-[state=unchecked]/switch:bg-input\",\n          \"motion-reduce:transition-none!\"\n        )}\n        data-slot=\"switch-control\"\n      >\n        <ArkSwitch.Thumb\n          className={cn(\n            \"block\",\n            \"aspect-square h-full w-auto\",\n            \"bg-background\",\n            \"rounded-full ring-0\",\n            \"pointer-events-none\",\n            \"transition-transform\",\n            \"data-[state=checked]:translate-x-[calc(var(--thumb-size)-4px)]\",\n            \"dark:data-[state=checked]:bg-primary-foreground\",\n            \"data-[state=unchecked]:translate-x-0\",\n            \"dark:data-[state=unchecked]:bg-foreground\",\n            \"motion-reduce:transition-none!\"\n          )}\n          data-slot=\"switch-thumb\"\n        />\n      </ArkSwitch.Control>\n\n      {/* Not a second export: Shark ships `Switch` and `useSwitch` and nothing else, and this stays\n          one component that renders its own parts — the same argument the docs page already makes\n          about Control, Thumb and HiddenInput. */}\n      {children === undefined ? null : (\n        <ArkSwitch.Label className=\"text-sm leading-none\" data-slot=\"switch-label\">\n          {children}\n        </ArkSwitch.Label>\n      )}\n\n      <ArkSwitch.HiddenInput tabIndex={tabIndex} />\n    </ArkSwitch.Root>\n  );\n};\n"],"names":["useSwitch","useSwitchContext","Switch","props","children","className","tabIndex","slot","rest","jsxs","ArkSwitch","cn","jsx"],"mappings":";;;AAIO,MAAMA,IAAYC,GAEZC,IAAS,CAACC,MAAuD;AAC5E,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASL;AAEzD,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MASnB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACF,EAAU;AAAA,UAAV;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,aAAU;AAAA,YAEV,UAAA,gBAAAC;AAAA,cAACF,EAAU;AAAA,cAAV;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,aAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAMDP,MAAa,SAAY,OACxB,gBAAAQ,EAACF,EAAU,OAAV,EAAgB,WAAU,wBAAuB,aAAU,gBACzD,UAAAN,EAAA,CACH;AAAA,QAGF,gBAAAQ,EAACF,EAAU,aAAV,EAAsB,UAAAJ,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}
+{"version":3,"file":"switch.js","sources":["../../src/simples/switch.tsx"],"sourcesContent":["import { Switch as ArkSwitch, useSwitchContext } from \"@ark-ui/react/switch\";\nimport type React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlMinHeight, controlSizes } from \"../lib/control-size\";\n\nexport const useSwitch = useSwitchContext;\n\n/**\n * The row an indicator and its label sit in. **Labelled, it is one control tall** — the shared\n * height, centred — so a switch, a checkbox or a radio lines up with an input beside it and with the\n * rows above and below in a form. Alone (no children: a cell in a table) it is the indicator and\n * nothing else, and the height is not asked of it.\n */\nconst switchRowVariants = tv({\n  base: [\"inline-flex items-center gap-2\", \"text-sm\", \"data-disabled:opacity-64\"],\n  variants: { labelled: { true: [controlSizes.md, controlMinHeight] } },\n});\n\nexport const Switch = (props: React.ComponentProps<typeof ArkSwitch.Root>) => {\n  const { children, className, tabIndex, slot, ...rest } = props;\n\n  return (\n    <ArkSwitch.Root\n      className={cn(\n        \"group/switch\",\n        \"[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]\",\n        \"w-fit\",\n        \"data-disabled:pointer-events-none\",\n        switchRowVariants({ labelled: children !== undefined }),\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"switch\"}\n    >\n      {/* The track, and everything that used to be on the root.\n          **It moved because the root has to be able to hold a label.** `children` were accepted by\n          the type and rendered nowhere: the root is Ark's `<label for=…>` and carried the track's\n          own box, so a caller passing text got a bare toggle with **no accessible name at all** —\n          measured on `/docs/forms/switch`, whose own example passes one. WCAG 4.1.2, and the ring\n          is the reason this is a part rather than a wrapper: on the root it would have drawn around\n          the label too. */}\n      <ArkSwitch.Control\n        className={cn(\n          \"h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]\",\n          \"p-px\",\n          \"flex shrink-0 items-center\",\n          \"rounded-full border border-transparent\",\n          \"transition-all\",\n          \"outline-none group-data-[focus-visible]/switch:ring-[3px] group-data-invalid/switch:ring-[3px]\",\n          \"group-data-[focus-visible]/switch:border-primary group-data-[focus-visible]/switch:ring-ring\",\n          \"group-data-invalid/switch:border-destructive group-data-invalid/switch:ring-destructive/24\",\n          \"group-data-[state=checked]/switch:bg-primary\",\n          // The track IS this control's boundary — `border` is transparent — and the thumb is\n          // `bg-background`, so the track is the only thing that says the switch is off. A surface\n          // step puts the thumb at ~1.07:1 against it and the off state stops being readable, which\n          // is 1.4.11 asking about a *state*, not about a fill. Boundary contrast, spelled as a fill.\n          \"group-data-[state=unchecked]/switch:bg-input\",\n          \"motion-reduce:transition-none!\"\n        )}\n        data-slot=\"switch-control\"\n      >\n        <ArkSwitch.Thumb\n          className={cn(\n            \"block\",\n            \"aspect-square h-full w-auto\",\n            \"bg-background\",\n            \"rounded-full ring-0\",\n            \"pointer-events-none\",\n            \"transition-transform\",\n            \"data-[state=checked]:translate-x-[calc(var(--thumb-size)-4px)]\",\n            \"dark:data-[state=checked]:bg-primary-foreground\",\n            \"data-[state=unchecked]:translate-x-0\",\n            \"dark:data-[state=unchecked]:bg-foreground\",\n            \"motion-reduce:transition-none!\"\n          )}\n          data-slot=\"switch-thumb\"\n        />\n      </ArkSwitch.Control>\n\n      {/* Not a second export: Shark ships `Switch` and `useSwitch` and nothing else, and this stays\n          one component that renders its own parts — the same argument the docs page already makes\n          about Control, Thumb and HiddenInput. */}\n      {children === undefined ? null : (\n        <ArkSwitch.Label className=\"text-sm leading-none\" data-slot=\"switch-label\">\n          {children}\n        </ArkSwitch.Label>\n      )}\n\n      <ArkSwitch.HiddenInput tabIndex={tabIndex} />\n    </ArkSwitch.Root>\n  );\n};\n"],"names":["useSwitch","useSwitchContext","switchRowVariants","tv","controlSizes","controlMinHeight","Switch","props","children","className","tabIndex","slot","rest","jsxs","ArkSwitch","cn","jsx"],"mappings":";;;;;AAMO,MAAMA,IAAYC,GAQnBC,IAAoBC,EAAG;AAAA,EAC3B,MAAM,CAAC,kCAAkC,WAAW,0BAA0B;AAAA,EAC9E,UAAU,EAAE,UAAU,EAAE,MAAM,CAACC,EAAa,IAAIC,CAAgB,EAAA,EAAE;AACpE,CAAC,GAEYC,IAAS,CAACC,MAAuD;AAC5E,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASL;AAEzD,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAb,EAAkB,EAAE,UAAUM,MAAa,QAAW;AAAA,QACtDC;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MASnB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACF,EAAU;AAAA,UAAV;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,aAAU;AAAA,YAEV,UAAA,gBAAAC;AAAA,cAACF,EAAU;AAAA,cAAV;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,aAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAMDP,MAAa,SAAY,OACxB,gBAAAQ,EAACF,EAAU,OAAV,EAAgB,WAAU,wBAAuB,aAAU,gBACzD,UAAAN,EAAA,CACH;AAAA,QAGF,gBAAAQ,EAACF,EAAU,aAAV,EAAsB,UAAAJ,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

package/dist/simples/tags-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../src/simples/tags-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EAG1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,mGAAkB,CAAC;AAE5C,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,mDAAyB,CAAC;AAG1D,eAAO,MAAM,gBAAgB,uDAAuB,CAAC;AAErD,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAiBtD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAe9D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAWvD,CAAC;AAEF,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;qDA0B5B,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAW5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAoBvD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAetD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAqB7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,sBAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,sBAkB3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,iBAAiB,CAAC,sBAwBnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAyB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAKvD,CAAC"}
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../src/simples/tags-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EAG1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,mGAAkB,CAAC;AAE5C,yEAAyE;AACzE,eAAO,MAAM,mBAAmB,mDAAyB,CAAC;AAG1D,eAAO,MAAM,gBAAgB,uDAAuB,CAAC;AAErD,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAiBtD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAe9D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAWvD,CAAC;AAEF,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;qDA8B5B,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAW5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAoBvD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAetD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAqB7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,QAAQ,CAAC,sBAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,sBAkB3D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,iBAAiB,CAAC,sBAwBnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,YAAY,CAAC,sBAyB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAKvD,CAAC"}