@kanzo-tech/ui 0.11.0 → 0.13.0

package/dist/simples/tags-input.js

@@ -1,10 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
-import { TagsInput as r, useTagsInput as l, useTagsInputContext as u } from "@ark-ui/react/tags-input";
-import { XIcon as d } from "lucide-react";
-import { tv as c } from "tailwind-variants";
+import { TagsInput as r, useTagsInput as u, useTagsInputContext as c } from "@ark-ui/react/tags-input";
+import { XIcon as l } from "lucide-react";
+import { tv as p } from "tailwind-variants";
 import { cn as i } from "../lib/cn.js";
-import { FieldLabel as g } from "./field.js";
-const b = l, T = u, N = r.Context, w = (e) => {
+import { controlSizes as d, controlMinHeight as g } from "../lib/control-size.js";
+import { FieldLabel as m } from "./field.js";
+const y = u, w = c, z = r.Context, C = (e) => {
   const { className: t, children: s, slot: n, ...o } = e;
   return /* @__PURE__ */ a(
     r.Root,
@@ -19,7 +20,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       children: s
     }
   );
-}, y = (e) => {
+}, k = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.RootProvider,
@@ -33,13 +34,14 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-root-provider"
     }
   );
-}, C = (e) => {
+}, P = (e) => {
   const { children: t, slot: s, ...n } = e;
-  return /* @__PURE__ */ a(g, { asChild: !0, children: /* @__PURE__ */ a(r.Label, { ...n, "data-slot": s ?? "tags-input-label", children: t }) });
-}, p = c({
+  return /* @__PURE__ */ a(m, { asChild: !0, children: /* @__PURE__ */ a(r.Label, { ...n, "data-slot": s ?? "tags-input-label", children: t }) });
+}, x = p({
   base: [
     "group/tags-input-control",
     "relative",
+    g,
     "w-full min-w-0",
     "flex flex-wrap items-center gap-1.5",
     "bg-background bg-field",
@@ -54,26 +56,29 @@ const b = l, T = u, N = r.Context, w = (e) => {
   ],
   variants: {
     size: {
-      sm: ["min-h-7", "p-1"],
-      md: ["min-h-8", "p-1.5"],
-      lg: ["min-h-9", "p-1.5"]
+      // The vertical padding is what is left of the shared height around a 24px tag, so one tag
+      // in an otherwise empty control is exactly the height of an `Input` at the same size, and a
+      // second row grows it. `p-1.5` here made the one-tag control 38px against an input's 32.
+      sm: [d.sm, "px-1 py-0"],
+      md: [d.md, "px-1 py-0.5"],
+      lg: [d.lg, "px-1 py-1"]
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), z = (e) => {
+}), _ = (e) => {
   const { size: t = "md", className: s, slot: n, ...o } = e;
   return /* @__PURE__ */ a(
     r.Control,
     {
-      className: i(p({ size: t }), s),
+      className: i(x({ size: t }), s),
       "data-size": t,
       ...o,
       "data-slot": n ?? "tags-input-control"
     }
   );
-}, k = (e) => {
+}, j = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.Input,
@@ -92,7 +97,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-input"
     }
   );
-}, P = (e) => {
+}, H = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.Item,
@@ -106,7 +111,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-item"
     }
   );
-}, _ = (e) => {
+}, L = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.ItemPreview,
@@ -126,7 +131,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-item-preview"
     }
   );
-}, j = (e) => {
+}, R = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.ItemText,
@@ -136,7 +141,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-item-text"
     }
   );
-}, L = (e) => {
+}, $ = (e) => {
   const { className: t, slot: s, ...n } = e;
   return /* @__PURE__ */ a(
     r.ItemInput,
@@ -153,7 +158,7 @@ const b = l, T = u, N = r.Context, w = (e) => {
       "data-slot": s ?? "tags-input-item-input"
     }
   );
-}, R = (e) => {
+}, D = (e) => {
   const { className: t, children: s, slot: n, ...o } = e;
   return /* @__PURE__ */ a(
     r.ItemDeleteTrigger,
@@ -172,10 +177,10 @@ const b = l, T = u, N = r.Context, w = (e) => {
       ),
       ...o,
       "data-slot": n ?? "tags-input-item-delete-trigger",
-      children: s ?? /* @__PURE__ */ a(d, { "aria-hidden": !0 })
+      children: s ?? /* @__PURE__ */ a(l, { "aria-hidden": !0 })
     }
   );
-}, $ = (e) => {
+}, V = (e) => {
   const { className: t, children: s, slot: n, ...o } = e;
   return /* @__PURE__ */ a(
     r.ClearTrigger,
@@ -195,10 +200,10 @@ const b = l, T = u, N = r.Context, w = (e) => {
       ),
       ...o,
       "data-slot": n ?? "tags-input-clear-trigger",
-      children: s ?? /* @__PURE__ */ a(d, { "aria-hidden": !0 })
+      children: s ?? /* @__PURE__ */ a(l, { "aria-hidden": !0 })
     }
   );
-}, D = ({
+}, F = ({
   slot: e,
   ...t
 }) => /* @__PURE__ */ a(
@@ -209,20 +214,20 @@ const b = l, T = u, N = r.Context, w = (e) => {
   }
 );
 export {
-  w as TagsInput,
-  $ as TagsInputClearTrigger,
-  N as TagsInputContext,
-  z as TagsInputControl,
-  D as TagsInputHiddenInput,
-  k as TagsInputInput,
-  P as TagsInputItem,
-  R as TagsInputItemDeleteTrigger,
-  L as TagsInputItemInput,
-  _ as TagsInputItemPreview,
-  j as TagsInputItemText,
-  C as TagsInputLabel,
-  y as TagsInputRootProvider,
-  b as useTagsInput,
-  T as useTagsInputContext
+  C as TagsInput,
+  V as TagsInputClearTrigger,
+  z as TagsInputContext,
+  _ as TagsInputControl,
+  F as TagsInputHiddenInput,
+  j as TagsInputInput,
+  H as TagsInputItem,
+  D as TagsInputItemDeleteTrigger,
+  $ as TagsInputItemInput,
+  L as TagsInputItemPreview,
+  R as TagsInputItemText,
+  P as TagsInputLabel,
+  k as TagsInputRootProvider,
+  y as useTagsInput,
+  w as useTagsInputContext
 };
 //# sourceMappingURL=tags-input.js.map

package/dist/simples/tags-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.js","sources":["../../src/simples/tags-input.tsx"],"sourcesContent":["import {\n  TagsInput as ArkTagsInput,\n  useTagsInput as useArkTagsInput,\n  useTagsInputContext as useArkTagsInputContext,\n} from \"@ark-ui/react/tags-input\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\n/**\n * The only place the plain name is a CHOICE, and it goes to the machine hook.\n *\n * Thirty-six components here write `export const useX = useXContext`, and so does Shark in fifty of\n * its ninety-five — `accordion.tsx` is our line character for character. `tags-input` is where Shark\n * ships both, because {@link TagsInputRootProvider} needs a machine to be handed, and a compound\n * that offers a controlled root has two hooks to name rather than one. So the plain name goes to the\n * machine and the context hook takes the suffix, here as there.\n *\n * `useHighlight` is also a machine hook and is not the same case: Ark's `highlight` module exports\n * no context hook at all, so there was nothing to choose between. Here both exist.\n *\n * If you are reaching for the value, the items or `clearAll` from inside the compound, that is\n * {@link useTagsInputContext}.\n */\nexport const useTagsInput = useArkTagsInput;\n\n/** The context hook — what `useX` is everywhere else in this library. */\nexport const useTagsInputContext = useArkTagsInputContext;\n\n// Render-prop context used to map the machine's value into styled items.\nexport const TagsInputContext = ArkTagsInput.Context;\n\nexport const TagsInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Root>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input\"}\n    >\n      {children}\n    </ArkTagsInput.Root>\n  );\n};\n\n/**\n * The controlled root: build the machine with {@link useTagsInput} and pass it as `value`.\n *\n * The same shape as `FileUploadRootProvider`, and for the same reason — a surface outside the\n * compound that has to drive it. It is also why this file names two hooks where the rest of the\n * library names one.\n */\nexport const TagsInputRootProvider = (\n  props: React.ComponentProps<typeof ArkTagsInput.RootProvider>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.RootProvider\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-root-provider\"}\n    />\n  );\n};\n\nexport const TagsInputLabel = (\n  props: React.ComponentProps<typeof ArkTagsInput.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkTagsInput.Label {...rest} data-slot={slot ?? \"tags-input-label\"}>\n        {children}\n      </ArkTagsInput.Label>\n    </FieldLabel>\n  );\n};\n\nconst tagsInputControlVariants = tv({\n  base: [\n    \"group/tags-input-control\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex flex-wrap items-center gap-1.5\",\n    \"bg-background bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none\",\n    \"focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"data-focus:border-primary data-focus:ring-[3px] data-focus:ring-ring\",\n    \"data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"min-h-7\", \"p-1\"],\n      md: [\"min-h-8\", \"p-1.5\"],\n      lg: [\"min-h-9\", \"p-1.5\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface TagsInputControlProps\n  extends React.ComponentProps<typeof ArkTagsInput.Control>,\n    VariantProps<typeof tagsInputControlVariants> {}\n\nexport const TagsInputControl = (props: TagsInputControlProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Control\n      className={cn(tagsInputControlVariants({ size }), className)}\n      data-size={size}\n      {...rest}\n      data-slot={slot ?? \"tags-input-control\"}\n    />\n  );\n};\n\nexport const TagsInputInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Input>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Input\n      className={cn(\n        \"h-6 flex-1 min-w-16\",\n        \"ps-1.5 pe-1\",\n        \"bg-transparent\",\n        \"text-base md:text-sm\",\n        \"outline-none\",\n        \"placeholder:text-faint\",\n        \"disabled:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-input\"}\n    />\n  );\n};\n\nexport const TagsInputItem = (\n  props: React.ComponentProps<typeof ArkTagsInput.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Item\n      className={cn(\n        \"inline-flex items-center\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item\"}\n    />\n  );\n};\n\nexport const TagsInputItemPreview = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemPreview>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemPreview\n      className={cn(\n        \"inline-flex items-center gap-1\",\n        \"h-6\",\n        \"ps-2 pe-1\",\n        \"select-none whitespace-nowrap font-medium text-xs\",\n        \"rounded-md border border-secondary/20\",\n        \"bg-secondary text-secondary-foreground\",\n        \"data-highlighted:border-primary data-highlighted:ring-[3px] data-highlighted:ring-ring\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-preview\"}\n    />\n  );\n};\n\nexport const TagsInputItemText = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemText\n      className={cn(\"px-0.5\", className)}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-text\"}\n    />\n  );\n};\n\nexport const TagsInputItemInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemInput>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemInput\n      className={cn(\n        \"h-6 min-w-16\",\n        \"px-1\",\n        \"bg-transparent\",\n        \"text-xs\",\n        \"outline-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-input\"}\n    />\n  );\n};\n\nexport const TagsInputItemDeleteTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemDeleteTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemDeleteTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-4\",\n        \"rounded-sm\",\n        \"text-secondary-foreground/64\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-secondary-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-delete-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ItemDeleteTrigger>\n  );\n};\n\nexport const TagsInputClearTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ClearTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ClearTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-6\",\n        \"rounded-md\",\n        \"text-muted-foreground\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-clear-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ClearTrigger>\n  );\n};\n\nexport const TagsInputHiddenInput = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTagsInput.HiddenInput>) => (\n  <ArkTagsInput.HiddenInput\n    {...rest}\n    data-slot={slot ?? \"tags-input-hidden-input\"}\n  />\n);\n"],"names":["useTagsInput","useArkTagsInput","useTagsInputContext","useArkTagsInputContext","TagsInputContext","ArkTagsInput","TagsInput","props","className","children","slot","rest","jsx","cn","TagsInputRootProvider","TagsInputLabel","FieldLabel","tagsInputControlVariants","tv","TagsInputControl","size","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemInput","TagsInputItemDeleteTrigger","XIcon","TagsInputClearTrigger","TagsInputHiddenInput"],"mappings":"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"}
+{"version":3,"file":"tags-input.js","sources":["../../src/simples/tags-input.tsx"],"sourcesContent":["import {\n  TagsInput as ArkTagsInput,\n  useTagsInput as useArkTagsInput,\n  useTagsInputContext as useArkTagsInputContext,\n} from \"@ark-ui/react/tags-input\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlMinHeight, controlSizes } from \"../lib/control-size\";\nimport { FieldLabel } from \"./field\";\n\n/**\n * The only place the plain name is a CHOICE, and it goes to the machine hook.\n *\n * Thirty-six components here write `export const useX = useXContext`, and so does Shark in fifty of\n * its ninety-five — `accordion.tsx` is our line character for character. `tags-input` is where Shark\n * ships both, because {@link TagsInputRootProvider} needs a machine to be handed, and a compound\n * that offers a controlled root has two hooks to name rather than one. So the plain name goes to the\n * machine and the context hook takes the suffix, here as there.\n *\n * `useHighlight` is also a machine hook and is not the same case: Ark's `highlight` module exports\n * no context hook at all, so there was nothing to choose between. Here both exist.\n *\n * If you are reaching for the value, the items or `clearAll` from inside the compound, that is\n * {@link useTagsInputContext}.\n */\nexport const useTagsInput = useArkTagsInput;\n\n/** The context hook — what `useX` is everywhere else in this library. */\nexport const useTagsInputContext = useArkTagsInputContext;\n\n// Render-prop context used to map the machine's value into styled items.\nexport const TagsInputContext = ArkTagsInput.Context;\n\nexport const TagsInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Root>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input\"}\n    >\n      {children}\n    </ArkTagsInput.Root>\n  );\n};\n\n/**\n * The controlled root: build the machine with {@link useTagsInput} and pass it as `value`.\n *\n * The same shape as `FileUploadRootProvider`, and for the same reason — a surface outside the\n * compound that has to drive it. It is also why this file names two hooks where the rest of the\n * library names one.\n */\nexport const TagsInputRootProvider = (\n  props: React.ComponentProps<typeof ArkTagsInput.RootProvider>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.RootProvider\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-root-provider\"}\n    />\n  );\n};\n\nexport const TagsInputLabel = (\n  props: React.ComponentProps<typeof ArkTagsInput.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkTagsInput.Label {...rest} data-slot={slot ?? \"tags-input-label\"}>\n        {children}\n      </ArkTagsInput.Label>\n    </FieldLabel>\n  );\n};\n\nconst tagsInputControlVariants = tv({\n  base: [\n    \"group/tags-input-control\",\n    \"relative\",\n    controlMinHeight,\n    \"w-full min-w-0\",\n    \"flex flex-wrap items-center gap-1.5\",\n    \"bg-background bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none\",\n    \"focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"data-focus:border-primary data-focus:ring-[3px] data-focus:ring-ring\",\n    \"data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      // The vertical padding is what is left of the shared height around a 24px tag, so one tag\n      // in an otherwise empty control is exactly the height of an `Input` at the same size, and a\n      // second row grows it. `p-1.5` here made the one-tag control 38px against an input's 32.\n      sm: [controlSizes.sm, \"px-1 py-0\"],\n      md: [controlSizes.md, \"px-1 py-0.5\"],\n      lg: [controlSizes.lg, \"px-1 py-1\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface TagsInputControlProps\n  extends React.ComponentProps<typeof ArkTagsInput.Control>,\n    VariantProps<typeof tagsInputControlVariants> {}\n\nexport const TagsInputControl = (props: TagsInputControlProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Control\n      className={cn(tagsInputControlVariants({ size }), className)}\n      data-size={size}\n      {...rest}\n      data-slot={slot ?? \"tags-input-control\"}\n    />\n  );\n};\n\nexport const TagsInputInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Input>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Input\n      className={cn(\n        \"h-6 flex-1 min-w-16\",\n        \"ps-1.5 pe-1\",\n        \"bg-transparent\",\n        \"text-base md:text-sm\",\n        \"outline-none\",\n        \"placeholder:text-faint\",\n        \"disabled:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-input\"}\n    />\n  );\n};\n\nexport const TagsInputItem = (\n  props: React.ComponentProps<typeof ArkTagsInput.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Item\n      className={cn(\n        \"inline-flex items-center\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item\"}\n    />\n  );\n};\n\nexport const TagsInputItemPreview = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemPreview>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemPreview\n      className={cn(\n        \"inline-flex items-center gap-1\",\n        \"h-6\",\n        \"ps-2 pe-1\",\n        \"select-none whitespace-nowrap font-medium text-xs\",\n        \"rounded-md border border-secondary/20\",\n        \"bg-secondary text-secondary-foreground\",\n        \"data-highlighted:border-primary data-highlighted:ring-[3px] data-highlighted:ring-ring\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-preview\"}\n    />\n  );\n};\n\nexport const TagsInputItemText = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemText\n      className={cn(\"px-0.5\", className)}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-text\"}\n    />\n  );\n};\n\nexport const TagsInputItemInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemInput>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemInput\n      className={cn(\n        \"h-6 min-w-16\",\n        \"px-1\",\n        \"bg-transparent\",\n        \"text-xs\",\n        \"outline-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-input\"}\n    />\n  );\n};\n\nexport const TagsInputItemDeleteTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemDeleteTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemDeleteTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-4\",\n        \"rounded-sm\",\n        \"text-secondary-foreground/64\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-secondary-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-delete-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ItemDeleteTrigger>\n  );\n};\n\nexport const TagsInputClearTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ClearTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ClearTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-6\",\n        \"rounded-md\",\n        \"text-muted-foreground\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-clear-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ClearTrigger>\n  );\n};\n\nexport const TagsInputHiddenInput = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTagsInput.HiddenInput>) => (\n  <ArkTagsInput.HiddenInput\n    {...rest}\n    data-slot={slot ?? \"tags-input-hidden-input\"}\n  />\n);\n"],"names":["useTagsInput","useArkTagsInput","useTagsInputContext","useArkTagsInputContext","TagsInputContext","ArkTagsInput","TagsInput","props","className","children","slot","rest","jsx","cn","TagsInputRootProvider","TagsInputLabel","FieldLabel","tagsInputControlVariants","tv","controlMinHeight","controlSizes","TagsInputControl","size","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemInput","TagsInputItemDeleteTrigger","XIcon","TagsInputClearTrigger","TagsInputHiddenInput"],"mappings":"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"}

package/dist/simples/toggle.d.ts

@@ -5,21 +5,21 @@ import { buttonVariants } from './button';
 export declare const useToggle: () => import('@ark-ui/react').UseToggleContext;
 export declare const toggleVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
 }, undefined, string[], {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface ToggleProps extends React.ComponentProps<typeof ArkToggle.Root>, VariantProps<typeof toggleVariants> {

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/simples/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAE1C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;qDAmBzB,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EACjD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CACf,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,EAC9C,SAAS,GAAG,OAAO,CACpB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,sBAcxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,sBAaxD,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/simples/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAE1C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;qDAmBzB,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EACjD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CACf,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,EAC9C,SAAS,GAAG,OAAO,CACpB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,sBAcxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,sBAaxD,CAAC"}

package/dist/simples/toggle.js

@@ -1,9 +1,10 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useToggleContext as l, Toggle as s } from "@ark-ui/react/toggle";
+import { useToggleContext as m, Toggle as i } from "@ark-ui/react/toggle";
 import { tv as g } from "tailwind-variants";
-import { cn as m } from "../lib/cn.js";
-import { buttonVariants as c } from "./button.js";
-const T = l, f = g({
+import { cn as c } from "../lib/cn.js";
+import { controlSizes as r } from "../lib/control-size.js";
+import { buttonVariants as f } from "./button.js";
+const v = m, p = g({
   base: [
     "relative",
     // The pressed state is the ACTIVE level (step 5), painted as a wash because a toggle is
@@ -14,44 +15,44 @@ const T = l, f = g({
   ],
   variants: {
     size: {
-      sm: "h-7 min-w-7 px-1.5",
-      md: "h-8 min-w-8 px-2",
-      lg: "h-9 min-w-9 px-2.5"
+      sm: [r.sm, "min-w-(--size) px-1.5"],
+      md: [r.md, "min-w-(--size) px-2"],
+      lg: [r.lg, "min-w-(--size) px-2.5"]
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), b = (t) => {
-  const { variant: e = "ghost", size: o = "md", className: r, slot: n, ...i } = t;
+}), w = (t) => {
+  const { variant: e = "ghost", size: o = "md", className: s, slot: n, ...l } = t;
   return /* @__PURE__ */ a(
-    s.Root,
+    i.Root,
     {
-      className: m(
-        c({ variant: e, clickEffect: !1 }),
-        f({ size: o }),
-        r
+      className: c(
+        f({ variant: e, clickEffect: !1 }),
+        p({ size: o }),
+        s
       ),
-      ...i,
+      ...l,
       "data-slot": n ?? "toggle"
     }
   );
-}, v = (t) => {
-  const { children: e, slot: o, ...r } = t;
+}, h = (t) => {
+  const { children: e, slot: o, ...s } = t;
   return /* @__PURE__ */ a(
-    s.Indicator,
+    i.Indicator,
     {
       className: "flex items-center gap-2",
-      ...r,
+      ...s,
       "data-slot": o ?? "toggle-indicator",
       children: e
     }
   );
 };
 export {
-  b as Toggle,
-  v as ToggleIndicator,
-  f as toggleVariants,
-  T as useToggle
+  w as Toggle,
+  h as ToggleIndicator,
+  p as toggleVariants,
+  v as useToggle
 };
 //# sourceMappingURL=toggle.js.map

package/dist/simples/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/simples/toggle.tsx"],"sourcesContent":["import { Toggle as ArkToggle, useToggleContext } from \"@ark-ui/react/toggle\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\n\nexport const useToggle = useToggleContext;\n\nexport const toggleVariants = tv({\n  base: [\n    \"relative\",\n    // The pressed state is the ACTIVE level (step 5), painted as a wash because a toggle is\n    // dropped into toolbars, cards and popovers alike. `bg-field` recedes to the page in dark, so\n    // \"on\" and \"off\" were about to become the same colour there.\n    \"data-[state=on]:bg-foreground/17\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-7 min-w-7 px-1.5\",\n      md: \"h-8 min-w-8 px-2\",\n      lg: \"h-9 min-w-9 px-2.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ToggleProps\n  extends React.ComponentProps<typeof ArkToggle.Root>,\n    VariantProps<typeof toggleVariants> {\n  /**\n   * The variant of the toggle\n   *\n   * @default \"outline\"\n   */\n  variant?: Extract<\n    VariantProps<typeof buttonVariants>[\"variant\"],\n    \"outline\" | \"ghost\"\n  >;\n}\n\nexport const Toggle = (props: ToggleProps) => {\n  const { variant = \"ghost\", size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Root\n      className={cn(\n        buttonVariants({ variant, clickEffect: false }),\n        toggleVariants({ size }),\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"toggle\"}\n    />\n  );\n};\n\nexport const ToggleIndicator = (\n  props: React.ComponentProps<typeof ArkToggle.Indicator>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Indicator\n      className=\"flex items-center gap-2\"\n      {...rest}\n      data-slot={slot ?? \"toggle-indicator\"}\n    >\n      {children}\n    </ArkToggle.Indicator>\n  );\n};\n"],"names":["useToggle","useToggleContext","toggleVariants","tv","Toggle","props","variant","size","className","slot","rest","jsx","ArkToggle","cn","buttonVariants","ToggleIndicator","children"],"mappings":";;;;;AAMO,MAAMA,IAAYC,GAEZC,IAAiBC,EAAG;AAAA,EAC/B,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBYC,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,SAAAC,IAAU,SAAS,MAAAC,IAAO,MAAM,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAErE,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACTC,EAAe,EAAE,SAAAR,GAAS,aAAa,IAAO;AAAA,QAC9CJ,EAAe,EAAE,MAAAK,GAAM;AAAA,QACvBC;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAkB,CAC7BV,MACG;AACH,QAAM,EAAE,UAAAW,GAAU,MAAAP,GAAM,GAAGC,MAASL;AAEpC,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAU;AAAA,MACT,GAAGF;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAO;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"toggle.js","sources":["../../src/simples/toggle.tsx"],"sourcesContent":["import { Toggle as ArkToggle, useToggleContext } from \"@ark-ui/react/toggle\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlSizes } from \"../lib/control-size\";\nimport { buttonVariants } from \"./button\";\n\nexport const useToggle = useToggleContext;\n\nexport const toggleVariants = tv({\n  base: [\n    \"relative\",\n    // The pressed state is the ACTIVE level (step 5), painted as a wash because a toggle is\n    // dropped into toolbars, cards and popovers alike. `bg-field` recedes to the page in dark, so\n    // \"on\" and \"off\" were about to become the same colour there.\n    \"data-[state=on]:bg-foreground/17\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      sm: [controlSizes.sm, \"min-w-(--size) px-1.5\"],\n      md: [controlSizes.md, \"min-w-(--size) px-2\"],\n      lg: [controlSizes.lg, \"min-w-(--size) px-2.5\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ToggleProps\n  extends React.ComponentProps<typeof ArkToggle.Root>,\n    VariantProps<typeof toggleVariants> {\n  /**\n   * The variant of the toggle\n   *\n   * @default \"outline\"\n   */\n  variant?: Extract<\n    VariantProps<typeof buttonVariants>[\"variant\"],\n    \"outline\" | \"ghost\"\n  >;\n}\n\nexport const Toggle = (props: ToggleProps) => {\n  const { variant = \"ghost\", size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Root\n      className={cn(\n        buttonVariants({ variant, clickEffect: false }),\n        toggleVariants({ size }),\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"toggle\"}\n    />\n  );\n};\n\nexport const ToggleIndicator = (\n  props: React.ComponentProps<typeof ArkToggle.Indicator>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Indicator\n      className=\"flex items-center gap-2\"\n      {...rest}\n      data-slot={slot ?? \"toggle-indicator\"}\n    >\n      {children}\n    </ArkToggle.Indicator>\n  );\n};\n"],"names":["useToggle","useToggleContext","toggleVariants","tv","controlSizes","Toggle","props","variant","size","className","slot","rest","jsx","ArkToggle","cn","buttonVariants","ToggleIndicator","children"],"mappings":";;;;;;AAOO,MAAMA,IAAYC,GAEZC,IAAiBC,EAAG;AAAA,EAC/B,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,CAACC,EAAa,IAAI,uBAAuB;AAAA,MAC7C,IAAI,CAACA,EAAa,IAAI,qBAAqB;AAAA,MAC3C,IAAI,CAACA,EAAa,IAAI,uBAAuB;AAAA,IAAA;AAAA,EAC/C;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBYC,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,SAAAC,IAAU,SAAS,MAAAC,IAAO,MAAM,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAErE,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACTC,EAAe,EAAE,SAAAR,GAAS,aAAa,IAAO;AAAA,QAC9CL,EAAe,EAAE,MAAAM,GAAM;AAAA,QACvBC;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAkB,CAC7BV,MACG;AACH,QAAM,EAAE,UAAAW,GAAU,MAAAP,GAAM,GAAGC,MAASL;AAEpC,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAU;AAAA,MACT,GAAGF;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAO;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/ui",
-  "version": "0.11.0",
+  "version": "0.13.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/theme": "0.13.0",
+    "@kanzo-tech/mosaic": "0.13.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. Raised 2026-09-30, 45.5 kB -> 46.5 kB, as a decision (Ángel; branch `fix/control-heights`): the barrel measured 46.41 kB (45.98 kB before the segmented date-time input and the labelled switch/checkbox/radio rows) against the 45.09 kB the previous raise was set on. What it bought: the shared control height (`lib/control-size.ts`), `DatePicker`'s `granularity` with Ark's segmented `DateInput` bound to the picker and a paste parser, and `DatePickerTimer` bound to the picker. `one component (tree-shaken)` stayed at 1.28 kB and analytics at 67.17 kB (limit 68). Budget set just above the measurement so the next growth trips it again.",
   "size-limit": [
     {
       "name": "root barrel (JS)",
       "path": "dist/index.js",
-      "limit": "44 kB",
+      "limit": "46.5 kB",
       "ignore": [
         "react",
         "react-dom",