@kanzo-tech/ui 0.11.0 → 0.12.0

package/dist/simples/segment-group.js

@@ -1,21 +1,23 @@
-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 v } from "@ark-ui/react/field";
+import { useSegmentGroupContext as h, SegmentGroup as i } from "@ark-ui/react/segment-group";
+import { cn as d } from "../lib/cn.js";
+const G = h, S = (a) => {
   const {
-    orientation: a = "horizontal",
-    variant: r = "default",
-    options: t,
-    itemClassName: s,
-    className: u,
-    children: p,
-    slot: g,
-    ...m
-  } = e;
-  return /* @__PURE__ */ l(
-    o.Root,
+    orientation: r = "horizontal",
+    variant: n = "default",
+    options: e,
+    itemClassName: l,
+    className: p,
+    children: g,
+    slot: m,
+    ...c
+  } = a, t = v();
+  return /* @__PURE__ */ u(
+    i.Root,
     {
-      className: i(
+      className: d(
         "group/segment-group relative",
         "flex gap-2",
         "isolate",
@@ -30,34 +32,38 @@ 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,
-      orientation: a,
-      ...m,
-      "data-slot": g ?? "segment-group",
+      "data-variant": n,
+      disabled: t == null ? void 0 : t.disabled,
+      invalid: t == null ? void 0 : t.invalid,
+      orientation: r,
+      readOnly: t == null ? void 0 : t.readOnly,
+      required: t == null ? void 0 : t.required,
+      ...c,
+      "data-slot": m ?? "segment-group",
       children: [
-        /* @__PURE__ */ n(b, {}),
-        t == null ? void 0 : t.map((d) => /* @__PURE__ */ n(
-          v,
+        /* @__PURE__ */ o(f, {}),
+        e == null ? void 0 : e.map((s) => /* @__PURE__ */ o(
+          b,
           {
-            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: s.value,
+            disabled: s.disabled,
+            className: d("px-3 py-1.5", l),
+            children: /* @__PURE__ */ o(x, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: s.label })
           },
-          d.value
+          s.value
         )),
-        p
+        g
       ]
     }
   );
-}, v = (e) => {
-  const { className: a, children: r, slot: t, ...s } = e;
-  return /* @__PURE__ */ l(
-    o.Item,
+}, b = (a) => {
+  const { className: r, children: n, slot: e, ...l } = a;
+  return /* @__PURE__ */ u(
+    i.Item,
     {
-      className: i(
+      className: d(
         "relative z-1",
         "inline-flex items-center justify-center",
         "cursor-pointer select-none",
@@ -68,33 +74,33 @@ const N = c, w = (e) => {
         "rounded-[inherit] border border-transparent",
         "outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring",
         "data-disabled:pointer-events-none data-disabled:opacity-64",
-        a
+        r
       ),
-      ...s,
-      "data-slot": t ?? "segment-group-item",
+      ...l,
+      "data-slot": e ?? "segment-group-item",
       children: [
-        r,
-        /* @__PURE__ */ n(o.ItemControl, {}),
-        /* @__PURE__ */ n(o.ItemHiddenInput, {})
+        n,
+        /* @__PURE__ */ o(i.ItemControl, {}),
+        /* @__PURE__ */ o(i.ItemHiddenInput, {})
       ]
     }
   );
-}, h = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.ItemText,
+}, x = (a) => {
+  const { className: r, slot: n, ...e } = a;
+  return /* @__PURE__ */ o(
+    i.ItemText,
     {
-      className: i("relative z-1", a),
-      ...t,
-      "data-slot": r ?? "segment-group-item-text"
+      className: d("relative z-1", r),
+      ...e,
+      "data-slot": n ?? "segment-group-item-text"
     }
   );
-}, b = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.Indicator,
+}, f = (a) => {
+  const { className: r, slot: n, ...e } = a;
+  return /* @__PURE__ */ o(
+    i.Indicator,
     {
-      className: i(
+      className: d(
         "absolute top-(--top) left-(--left) z-0",
         "h-(--height) w-(--width)",
         "rounded-[inherit]",
@@ -112,18 +118,18 @@ const N = c, w = (e) => {
         "data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5",
         "data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5",
         "motion-reduce:transition-none!",
-        a
+        r
       ),
-      ...t,
-      "data-slot": r ?? "segment-group-indicator"
+      ...e,
+      "data-slot": n ?? "segment-group-indicator"
     }
   );
 };
 export {
-  w as SegmentGroup,
-  b as SegmentGroupIndicator,
-  v as SegmentGroupItem,
-  h as SegmentGroupItemText,
-  N as useSegmentGroup
+  S as SegmentGroup,
+  f as SegmentGroupIndicator,
+  b as SegmentGroupItem,
+  x as SegmentGroupItemText,
+  G 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\";\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\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    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        \"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 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":[],"mappings":";;;;;AAUO;AA4BL;AAAM;AACU;AACJ;AACV;AACA;AACA;AACA;AACA;AACG;AAKL;AACE;AAAiB;AAAhB;AACY;AACT;AACA;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;AAC8B;AAI1C;AAAA;AAPO;AAAA;AAWV;AAAA;AAAA;AAGP;AAKE;AAEA;AACE;AAAiB;AAAhB;AACY;AACT;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Kanzo shared UI — domain-free components over Ark UI and tailwind-variants, themed by tokens.",
   "type": "module",
   "license": "MIT",
@@ -95,8 +95,8 @@
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.4.0",
-    "@kanzo-tech/theme": "0.11.0",
-    "@kanzo-tech/mosaic": "0.11.0"
+    "@kanzo-tech/mosaic": "0.12.0",
+    "@kanzo-tech/theme": "0.12.0"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.18.6",
@@ -122,12 +122,12 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "tailwindcss": "4"
   },
-  "//size-limit": "Budgets OUR shipped code only. `ignore` mirrors the build's `external` list in vite.config.ts — anything externalised resolves from the consumer's node_modules, so counting it here measures the ecosystem, not us; keep the two lists in sync. Barrel measured at 35.27 kB brotlied, budget set just above so real growth trips the gate. The analytics budget (then spelled `charts`) went 4 kB -> 6 kB when the five preset charts became a composable grammar (measured 5.47 kB), then 6 kB -> 60 kB when ChartFilter/ChartSearch/ChartSlider brought Select, Combobox, Input, Field and Slider into the subpath (measured 56.01 kB). That last jump is mostly an artefact of measuring a subpath in isolation: in an app that also imports the root barrel those modules are the same files and dedupe, so the incremental cost is far smaller. The root barrel went 38 kB -> 42 kB (measured 40.66 kB) for the AI-assist compounds: real growth, and growth nobody downloads unless they import it. That is the point -- this gauge measures the WHOLE library, not what a consumer pays. The gauge that measures the latter is 'one component (tree-shaken)' below: Button resolves to 1.08 kB and three of our modules, with no trace of the AI code, so tree-shaking is doing its job. Treat this budget as a change detector for the library's total size and that one as the regression gate for consumer cost. Rebaselined 2026-07-31: analytics measured 66.30 kB against a stale 60 kB budget, so the gate was already red before the colour work touched it -- measured by removing that work's only addition to the subpath (`useThemeTick` reading the palette through the theme context), which moves the figure by 0.03 kB. The growth is somebody else's and is not attributed here, because the minified bundle does not say and a note that guessed would be worse than one that does not: what is recorded is the number and the fact that it predates this branch. Budget set to 68 kB, just above the measurement, so the next real growth trips it again. Rebaselined 2026-08-18: the root barrel went 42 kB -> 42.5 kB (measured 42.12 kB, against 41.54 kB at fb8e5b5) when the core's axes became a generated declaration the barrel carries -- the JSON is 302 B -> 648 B of it, brotlied on its own, and the rest is the one resolution chain. The other three gauges did not move at all, `one component` included, so no consumer of a component pays for it; see `/docs/design/colour` for the four figures and how to re-derive them. Measured again 2026-08-20, and NOT rebaselined: 42.12 kB -> 42.32 kB across one branch that took four modules OUT of the barrel (`complete`, `suggest`, `use-ai` and the `Suggestion` type left for @kanzo-tech/ai) and put two IN (`Diagnostic`, `Questionnaire`). Net +0.20 kB, which is the honest reading and the only one available: the two movements cannot be separated from a single minified bundle, and a note that guessed at the split would be worse than one that says it did not. The AI compounds' arrival is recorded above as 38 -> 42 kB, so their departure is worth about that much and the two new components spent it. Still under the 43 kB gate, so the gate is untouched. Raised 2026-09-30, 43.5 kB -> 44 kB, as a decision (Ángel): the root barrel measured 43.57 kB after four issues from keasy landed in one day -- `FieldRequiredIndicator`'s `fallback` (+0.13 kB), the `Empty*` parts (+0.20), the `Stat*` compound that replaced `StatTile` and the copied `MetricCard` (+0.25) and the `Gated*` parts (+0.18). Three compounds the library did not have, each with its second call site in keasy, each replacing code keasy copied. `one component (tree-shaken)` did not move (1.26 kB), so no consumer of a component pays for them. Budget set just above the measurement so the next growth trips it again.",
+  "//size-limit": "Budgets OUR shipped code only. `ignore` mirrors the build's `external` list in vite.config.ts — anything externalised resolves from the consumer's node_modules, so counting it here measures the ecosystem, not us; keep the two lists in sync. Barrel measured at 35.27 kB brotlied, budget set just above so real growth trips the gate. The analytics budget (then spelled `charts`) went 4 kB -> 6 kB when the five preset charts became a composable grammar (measured 5.47 kB), then 6 kB -> 60 kB when ChartFilter/ChartSearch/ChartSlider brought Select, Combobox, Input, Field and Slider into the subpath (measured 56.01 kB). That last jump is mostly an artefact of measuring a subpath in isolation: in an app that also imports the root barrel those modules are the same files and dedupe, so the incremental cost is far smaller. The root barrel went 38 kB -> 42 kB (measured 40.66 kB) for the AI-assist compounds: real growth, and growth nobody downloads unless they import it. That is the point -- this gauge measures the WHOLE library, not what a consumer pays. The gauge that measures the latter is 'one component (tree-shaken)' below: Button resolves to 1.08 kB and three of our modules, with no trace of the AI code, so tree-shaking is doing its job. Treat this budget as a change detector for the library's total size and that one as the regression gate for consumer cost. Rebaselined 2026-07-31: analytics measured 66.30 kB against a stale 60 kB budget, so the gate was already red before the colour work touched it -- measured by removing that work's only addition to the subpath (`useThemeTick` reading the palette through the theme context), which moves the figure by 0.03 kB. The growth is somebody else's and is not attributed here, because the minified bundle does not say and a note that guessed would be worse than one that does not: what is recorded is the number and the fact that it predates this branch. Budget set to 68 kB, just above the measurement, so the next real growth trips it again. Rebaselined 2026-08-18: the root barrel went 42 kB -> 42.5 kB (measured 42.12 kB, against 41.54 kB at fb8e5b5) when the core's axes became a generated declaration the barrel carries -- the JSON is 302 B -> 648 B of it, brotlied on its own, and the rest is the one resolution chain. The other three gauges did not move at all, `one component` included, so no consumer of a component pays for it; see `/docs/design/colour` for the four figures and how to re-derive them. Measured again 2026-08-20, and NOT rebaselined: 42.12 kB -> 42.32 kB across one branch that took four modules OUT of the barrel (`complete`, `suggest`, `use-ai` and the `Suggestion` type left for @kanzo-tech/ai) and put two IN (`Diagnostic`, `Questionnaire`). Net +0.20 kB, which is the honest reading and the only one available: the two movements cannot be separated from a single minified bundle, and a note that guessed at the split would be worse than one that says it did not. The AI compounds' arrival is recorded above as 38 -> 42 kB, so their departure is worth about that much and the two new components spent it. Still under the 43 kB gate, so the gate is untouched. Raised 2026-09-30, 43.5 kB -> 44 kB, as a decision (Ángel): the root barrel measured 43.57 kB after four issues from keasy landed in one day -- `FieldRequiredIndicator`'s `fallback` (+0.13 kB), the `Empty*` parts (+0.20), the `Stat*` compound that replaced `StatTile` and the copied `MetricCard` (+0.25) and the `Gated*` parts (+0.18). Three compounds the library did not have, each with its second call site in keasy, each replacing code keasy copied. `one component (tree-shaken)` did not move (1.26 kB), so no consumer of a component pays for them. Budget set just above the measurement so the next growth trips it again. Raised 2026-09-30, 44 kB -> 45.5 kB, as a decision (Ángel; branch `feat/form-primitives`): the barrel measured 45.09 kB after `LanguagePicker`, `useAsyncCollection`, `useDebouncedCommit`, the `Field` bridge on `DatePicker` and `SegmentGroup`, `FieldHelper`'s `tone`, `FieldGroup`'s `columns` and `LocaleProvider` landed together for a form generator that was carrying its own copies. `one component (tree-shaken)` did not move (1.26 kB), so no consumer of a component pays for them; analytics went 66.24 -> 67.13 kB and stays under its 68 kB.",
   "size-limit": [
     {
       "name": "root barrel (JS)",
       "path": "dist/index.js",
-      "limit": "44 kB",
+      "limit": "45.5 kB",
       "ignore": [
         "react",
         "react-dom",