@kanzo-tech/ui 0.12.0 → 0.13.1

package/dist/simples/input-group.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import { ark as p } from "@ark-ui/react/factory";
-import { tv as l } from "tailwind-variants";
+import { jsx as n } from "react/jsx-runtime";
+import { ark as l } from "@ark-ui/react/factory";
+import { tv as p } from "tailwind-variants";
 import { cn as o } from "../lib/cn.js";
-import { Button as c } from "./button.js";
-import { Input as g } from "./input.js";
-import { Textarea as m } from "./textarea.js";
-const b = l({
+import { controlSizes as c, controlMinHeight as g } from "../lib/control-size.js";
+import { Button as m } from "./button.js";
+import { Input as b } from "./input.js";
+import { Textarea as f } from "./textarea.js";
+const h = p({
   base: [
     "group/input-group",
     "relative",
@@ -15,24 +16,20 @@ const b = l({
     "bg-background bg-field",
     "rounded-lg border border-input shadow-xs/5",
     "transition-[color,box-shadow]",
-    // **The group holds its controls; it does not press them against its border.**
+    // **One height, the shared one — see `lib/control-size.ts`.** A group is `min-h-(--size)`
+    // rather than `h-(--size)` because it also holds a `Textarea` and the two block addons, and
+    // those grow it; what it may never do is come out TALLER than an `Input` beside it because of
+    // what it holds. It did, by 14px: the `<input>` inside carried its own `h-8` and the group added
+    // `p-1.5` around it, so a group at `md` measured 46px against an input's 32 — measured
+    // 2026-09-30 on `/docs/forms/controls`, along with every control built on a group (combobox,
+    // date picker, password input, language picker).
     //
-    // The height used to be fixed — `h-8` at `md`, a border-box 32px with 1px of border — while
-    // `InputGroupButton`'s `icon-sm` is `size-8`, also 32px. A fixed box cannot contain a control
-    // its own size, so the ✨ painted over the border a pixel above and below, and two at `sm`.
-    // Measured on `/docs/ai/fields`.
-    //
-    // Sizing the control down instead was tried and rejected on sight: it made the ✨ a different
-    // size here than the identical mark inside a `TagsInput`, which is the same component doing
-    // the same job. **`TagsInput` is the shape, and it is now literally the same one** — `p-1.5`
-    // around a `min-h-*` box, so the group grows to whatever it holds and every control keeps the
-    // size it has everywhere else. A group holding a 32px mark measures 46px, exactly as
-    // `TagsInputControl` does.
-    //
-    // The input's own `px-3` is replaced by `px-1.5` so the group's padding and the field's do not
-    // add up: 1px of border plus 6px of padding plus 6px is the 13px of inset the fixed-height
-    // version had, unchanged.
-    "[&>input]:px-1.5 [&>textarea]:px-1.5",
+    // So the `<input>` inside does not carry a height of its own: it stretches to the group's
+    // content box (`InputGroupInput`), and the controls beside it are 24px (`InputGroupButton`),
+    // which leaves a 32px group 4px of inset around them, and there is no padding to add to it: at
+    // `sm` and compact density the group is 24.5px, and a 24px control plus the border already
+    // asks 26. That one case is the exception the pressable floor buys (see `InputGroupButton`).
+    g,
     "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
     "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
     "outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring",
@@ -41,37 +38,24 @@ const b = l({
     "motion-reduce:transition-none!"
   ],
   variants: {
-    // `min-h`, not `h`: the box is sized by what it holds, and this is the floor it starts from.
-    // A fixed height is what made a control the same size as the group overflow it.
-    //
-    // **The padding is what the size axis now moves, and it has to be.** A content-sized box whose
-    // size variant only sets a floor is a size variant that does nothing: every group came out
-    // 46px — `sm`, `md` and `lg` alike — because the `<input>` inside carries its own `h-8` and
-    // that plus the padding cleared every floor. Measured on `/docs/forms/input-group`. Scaling
-    // the inset instead keeps the controls identical across the three, which is the whole point of
-    // this shape: an ✨ is the same ✨ in a small group, a large one and a `TagsInput`.
-    size: {
-      sm: ["min-h-7", "p-1"],
-      md: ["min-h-8", "p-1.5"],
-      lg: ["min-h-9", "p-2"]
-    }
+    size: c
   },
   defaultVariants: {
     size: "md"
   }
-}), y = (r) => {
-  const { size: t = "md", className: a, slot: e, ...n } = r;
-  return /* @__PURE__ */ s(
-    p.div,
+}), j = (r) => {
+  const { size: t = "md", className: a, slot: e, ...s } = r;
+  return /* @__PURE__ */ n(
+    l.div,
     {
-      className: o(b({ size: t }), a),
+      className: o(h({ size: t }), a),
       "data-size": t,
       role: "group",
-      ...n,
+      ...s,
       "data-slot": e ?? "input-group"
     }
   );
-}, f = l({
+}, v = p({
   base: [
     "h-auto",
     "flex items-center justify-center gap-2",
@@ -94,8 +78,8 @@ const b = l({
       // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this
       // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.
       // Text and a `kbd` still take theirs, because neither carries a box of its own.
-      "inline-start": ["order-first ps-3", "has-[>button]:ps-0", "has-[>kbd]:ps-2"],
-      "inline-end": ["order-last pe-3", "has-[>button]:pe-0", "has-[>kbd]:pe-2"],
+      "inline-start": ["order-first ps-3", "has-[>button]:ps-0.75", "has-[>kbd]:ps-2"],
+      "inline-end": ["order-last pe-3", "has-[>button]:pe-0.75", "has-[>kbd]:pe-2"],
       // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the
       // base, which is right for a band across the field and wrong for a control tucked into its
       // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px
@@ -117,23 +101,23 @@ const b = l({
   defaultVariants: {
     align: "inline-start"
   }
-}), I = (r) => {
-  const { className: t, align: a = "inline-start", slot: e, ...n } = r;
-  return /* @__PURE__ */ s(
-    p.div,
+}), T = (r) => {
+  const { className: t, align: a = "inline-start", slot: e, ...s } = r;
+  return /* @__PURE__ */ n(
+    l.div,
     {
-      className: o(f({ align: a }), t),
+      className: o(v({ align: a }), t),
       "data-align": a,
       onClick: (i) => {
         var u, d;
         i.target.closest("button") || (d = (u = i.currentTarget.parentElement) == null ? void 0 : u.querySelector("input")) == null || d.focus();
       },
       role: "group",
-      ...n,
+      ...s,
       "data-slot": e ?? "input-group-addon"
     }
   );
-}, h = l({
+}, x = p({
   base: [
     "relative",
     "flex items-center gap-2",
@@ -156,37 +140,40 @@ const b = l({
        * the hit path. This is the one thing `Button` does not carry, and it is why the two were
        * decided separately rather than in one sweep.
        */
-      sm: ["h-8", "gap-1.5", "px-2.5", "rounded-md", "has-[>svg]:px-2.5"],
-      "icon-sm": ["size-8", "p-0", "has-[>svg]:p-0"]
+      // 24 CSS pixels, not `h-6`: a `rem` is 21px at compact, under the bar above, and this is the
+      // one size in a recipe that must not scale. Inside a group the bar and the group's own 28px
+      // at `sm` (24.5px at compact) are the same number, which is why 24 fits at every size.
+      sm: ["h-[24px]", "gap-1.5", "px-2.5", "rounded-md", "has-[>svg]:px-2.5"],
+      "icon-sm": ["size-[24px]", "p-0", "has-[>svg]:p-0"]
     }
   },
   defaultVariants: {
     size: "sm"
   }
-}), V = (r) => {
+}), B = (r) => {
   const {
     className: t,
     type: a = "button",
     variant: e = "ghost",
-    size: n = "sm",
+    size: s = "sm",
     slot: i,
     ...u
   } = r;
-  return /* @__PURE__ */ s(
-    c,
+  return /* @__PURE__ */ n(
+    m,
     {
-      className: o(h({ size: n }), t),
-      "data-size": n,
+      className: o(x({ size: s }), t),
+      "data-size": s,
       type: a,
       variant: e,
       ...u,
       slot: i ?? "input-group-button"
     }
   );
-}, j = (r) => {
+}, _ = (r) => {
   const { className: t, slot: a, ...e } = r;
-  return /* @__PURE__ */ s(
-    p.span,
+  return /* @__PURE__ */ n(
+    l.span,
     {
       className: o(
         "flex items-center gap-2",
@@ -198,13 +185,16 @@ const b = l({
       "data-slot": a ?? "input-group-text"
     }
   );
-}, T = (r) => {
+}, A = (r) => {
   const { className: t, slot: a, ...e } = r;
-  return /* @__PURE__ */ s(
-    g,
+  return /* @__PURE__ */ n(
+    b,
     {
       className: o(
-        "flex-1",
+        // `h-auto self-stretch`: the group's height, not the input's own. An `Input` is
+        // `h-(--size)` and its size is its own, so inside a group of another size it would be a
+        // different height from the box around it.
+        "h-auto flex-1 self-stretch",
         "bg-transparent",
         "rounded-none border-0 shadow-none",
         "focus-visible:ring-0",
@@ -215,10 +205,10 @@ const b = l({
       slot: a ?? "input-group-control"
     }
   );
-}, B = (r) => {
+}, S = (r) => {
   const { className: t, slot: a, ...e } = r;
-  return /* @__PURE__ */ s(
-    m,
+  return /* @__PURE__ */ n(
+    f,
     {
       className: o(
         "flex-1",
@@ -235,11 +225,11 @@ const b = l({
   );
 };
 export {
-  y as InputGroup,
-  I as InputGroupAddon,
-  V as InputGroupButton,
-  T as InputGroupInput,
-  j as InputGroupText,
-  B as InputGroupTextarea
+  j as InputGroup,
+  T as InputGroupAddon,
+  B as InputGroupButton,
+  A as InputGroupInput,
+  _ as InputGroupText,
+  S as InputGroupTextarea
 };
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../src/simples/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\n\nconst inpuGroupVariants = tv({\n  base: [\n    \"group/input-group\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex items-center\",\n    \"bg-background bg-field\",\n    \"rounded-lg border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    // **The group holds its controls; it does not press them against its border.**\n    //\n    // The height used to be fixed — `h-8` at `md`, a border-box 32px with 1px of border — while\n    // `InputGroupButton`'s `icon-sm` is `size-8`, also 32px. A fixed box cannot contain a control\n    // its own size, so the ✨ painted over the border a pixel above and below, and two at `sm`.\n    // Measured on `/docs/ai/fields`.\n    //\n    // Sizing the control down instead was tried and rejected on sight: it made the ✨ a different\n    // size here than the identical mark inside a `TagsInput`, which is the same component doing\n    // the same job. **`TagsInput` is the shape, and it is now literally the same one** — `p-1.5`\n    // around a `min-h-*` box, so the group grows to whatever it holds and every control keeps the\n    // size it has everywhere else. A group holding a 32px mark measures 46px, exactly as\n    // `TagsInputControl` does.\n    //\n    // The input's own `px-3` is replaced by `px-1.5` so the group's padding and the field's do not\n    // add up: 1px of border plus 6px of padding plus 6px is the 13px of inset the fixed-height\n    // version had, unchanged.\n    \"[&>input]:px-1.5 [&>textarea]:px-1.5\",\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24\",\n    \"dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    // `min-h`, not `h`: the box is sized by what it holds, and this is the floor it starts from.\n    // A fixed height is what made a control the same size as the group overflow it.\n    //\n    // **The padding is what the size axis now moves, and it has to be.** A content-sized box whose\n    // size variant only sets a floor is a size variant that does nothing: every group came out\n    // 46px — `sm`, `md` and `lg` alike — because the `<input>` inside carries its own `h-8` and\n    // that plus the padding cleared every floor. Measured on `/docs/forms/input-group`. Scaling\n    // the inset instead keeps the controls identical across the three, which is the whole point of\n    // this shape: an ✨ is the same ✨ in a small group, a large one and a `TagsInput`.\n    size: {\n      sm: [\"min-h-7\", \"p-1\"],\n      md: [\"min-h-8\", \"p-1.5\"],\n      lg: [\"min-h-9\", \"p-2\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputGroupProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inpuGroupVariants> {}\n\nexport const InputGroup = (props: InputGroupProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inpuGroupVariants({ size }), className)}\n      data-size={size}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group\"}\n    />\n  );\n};\n\nconst inputGroupAddonVariants = tv({\n  base: [\n    \"h-auto\",\n    \"flex items-center justify-center gap-2\",\n    \"select-none font-medium text-muted-foreground text-sm\",\n    \"cursor-text\",\n    \"group-data-[disabled=true]/input-group:opacity-64\",\n    \"[&>kbd]:rounded-[calc(var(--radius)-5px)]\",\n    \"[&_svg:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    align: {\n      // **A smaller padding, not a negative margin**, and this is a measured divergence from the\n      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus\n      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the\n      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px\n      // outside the group's inline border and 6px outside its block border** — in a box with\n      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.\n      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of\n      // margin is the 6px this sets directly.\n      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this\n      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.\n      // Text and a `kbd` still take theirs, because neither carries a box of its own.\n      \"inline-start\": [\"order-first ps-3\", \"has-[>button]:ps-0\", \"has-[>kbd]:ps-2\"],\n      \"inline-end\": [\"order-last pe-3\", \"has-[>button]:pe-0\", \"has-[>kbd]:pe-2\"],\n      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the\n      // base, which is right for a band across the field and wrong for a control tucked into its\n      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px\n      // group** — 6px of transparent padding past the border on each side, in a box with\n      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the\n      // group's own box.\n      \"block-start\": [\n        \"order-first w-full justify-start px-3 pt-3 pb-1.5\",\n        \"group-has-[>input]/input-group:pt-2.5\",\n        \"[.border-b]:pb-3\",\n      ],\n      \"block-end\": [\n        \"order-last w-full justify-start px-3 pt-1.5 pb-3\",\n        \"group-has-[>input]/input-group:pb-2.5\",\n        \"[.border-t]:pt-3\",\n      ],\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\ninterface InputGroupAddonProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = (props: InputGroupAddonProps) => {\n  const { className, align = \"inline-start\", slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group-addon\"}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = tv({\n  base: [\n    \"relative\",\n    \"flex items-center gap-2\",\n    \"text-sm\",\n    \"shadow-none\",\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      /**\n       * The floor, and the default, because there is nothing legal below it.\n       *\n       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —\n       * every size here is a `rem` against a root the density axis sets. That is under the 24×24\n       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group\n       * that said nothing got the failing size.\n       *\n       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8\n       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in\n       * the hit path. This is the one thing `Button` does not carry, and it is why the two were\n       * decided separately rather than in one sweep.\n       */\n      sm: [\"h-8\", \"gap-1.5\", \"px-2.5\", \"rounded-md\", \"has-[>svg]:px-2.5\"],\n      \"icon-sm\": [\"size-8\", \"p-0\", \"has-[>svg]:p-0\"],\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n\ninterface InputGroupButtonProps\n  extends Omit<React.ComponentProps<typeof Button>, \"size\">,\n    VariantProps<typeof inputGroupButtonVariants> {}\n\nexport const InputGroupButton = (props: InputGroupButtonProps) => {\n  const {\n    className,\n    type = \"button\",\n    variant = \"ghost\",\n    size = \"sm\",\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"input-group-button\"}\n    />\n  );\n};\n\nexport const InputGroupText = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"flex items-center gap-2\",\n        \"text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"input-group-text\"}\n    />\n  );\n};\n\nexport const InputGroupInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Input\n      className={cn(\n        \"flex-1\",\n        \"bg-transparent\",\n        \"rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n\nexport const InputGroupTextarea = (\n  props: React.ComponentProps<typeof Textarea>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Textarea\n      className={cn(\n        \"flex-1\",\n        \"py-3\",\n        \"bg-transparent\",\n        \"resize-none rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAUA;AAA6B;AACrB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUF;AACiB;AACE;AACF;AAAA;AACvB;AAEe;AACT;AAEV;AAOE;AAEA;AACE;AAAK;AAAJ;AACqD;AACzC;AACN;AACD;AACe;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYuE;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1D;AACb;AACA;AACA;AAAA;AAEW;AACX;AACA;AACA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAOE;AAEA;AACE;AAAK;AAAJ;AAC4D;AAC/C;;AAEV;AAGuD;AACzD;AACK;AACD;AACe;AAAA;AAGzB;AAEoC;AAC5B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc8D;AACrB;AAAA;AAC/C;AAEe;AACT;AAEV;AAOE;AAAM;AACJ;AACO;AACG;AACH;AACP;AACG;AAGL;AACE;AAAC;AAAA;AAC4D;AAChD;AACX;AACA;AACI;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;;;;;;;;;"}
+{"version":3,"file":"input-group.js","sources":["../../src/simples/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\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 { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\n\nconst inpuGroupVariants = tv({\n  base: [\n    \"group/input-group\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex items-center\",\n    \"bg-background bg-field\",\n    \"rounded-lg border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    // **One height, the shared one — see `lib/control-size.ts`.** A group is `min-h-(--size)`\n    // rather than `h-(--size)` because it also holds a `Textarea` and the two block addons, and\n    // those grow it; what it may never do is come out TALLER than an `Input` beside it because of\n    // what it holds. It did, by 14px: the `<input>` inside carried its own `h-8` and the group added\n    // `p-1.5` around it, so a group at `md` measured 46px against an input's 32 — measured\n    // 2026-09-30 on `/docs/forms/controls`, along with every control built on a group (combobox,\n    // date picker, password input, language picker).\n    //\n    // So the `<input>` inside does not carry a height of its own: it stretches to the group's\n    // content box (`InputGroupInput`), and the controls beside it are 24px (`InputGroupButton`),\n    // which leaves a 32px group 4px of inset around them, and there is no padding to add to it: at\n    // `sm` and compact density the group is 24.5px, and a 24px control plus the border already\n    // asks 26. That one case is the exception the pressable floor buys (see `InputGroupButton`).\n    controlMinHeight,\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/24\",\n    \"dark:has-[[data-slot][aria-invalid=true]]:border-destructive-foreground dark:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: controlSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputGroupProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inpuGroupVariants> {}\n\nexport const InputGroup = (props: InputGroupProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inpuGroupVariants({ size }), className)}\n      data-size={size}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group\"}\n    />\n  );\n};\n\nconst inputGroupAddonVariants = tv({\n  base: [\n    \"h-auto\",\n    \"flex items-center justify-center gap-2\",\n    \"select-none font-medium text-muted-foreground text-sm\",\n    \"cursor-text\",\n    \"group-data-[disabled=true]/input-group:opacity-64\",\n    \"[&>kbd]:rounded-[calc(var(--radius)-5px)]\",\n    \"[&_svg:not([class*='size-'])]:size-4\",\n  ],\n  variants: {\n    align: {\n      // **A smaller padding, not a negative margin**, and this is a measured divergence from the\n      // reference rather than a taste one. Shark tucks the button in with `pe-3` plus\n      // `me-[-0.45rem]`; a negative margin on the last flex item lets its border box run past the\n      // container's content edge, so measured live on `docs/ai/fields` the addon sat **6.2px\n      // outside the group's inline border and 6px outside its block border** — in a box with\n      // `overflow: visible`, which is why it also showed up as 6px of scroll width on the parent.\n      // The inner gap is what was wanted and it is unchanged: 12px of padding minus 7.2px of\n      // margin is the 6px this sets directly.\n      // **A button needs no padding beside it — the group's own `p-1.5` is the inset**, and this\n      // is what puts the ✨ the same distance from the border here as inside a `TagsInputControl`.\n      // Text and a `kbd` still take theirs, because neither carries a box of its own.\n      \"inline-start\": [\"order-first ps-3\", \"has-[>button]:ps-0.75\", \"has-[>kbd]:ps-2\"],\n      \"inline-end\": [\"order-last pe-3\", \"has-[>button]:pe-0.75\", \"has-[>kbd]:pe-2\"],\n      // The block padding lives on the two block aligns and nowhere else. It was `py-1.5` in the\n      // base, which is right for a band across the field and wrong for a control tucked into its\n      // end: measured on `docs/ai/fields`, an `inline-end` addon was **44px tall inside a 32px\n      // group** — 6px of transparent padding past the border on each side, in a box with\n      // `overflow: visible`. The mark inside it is `size-8` and looked fine; what was wrong was the\n      // group's own box.\n      \"block-start\": [\n        \"order-first w-full justify-start px-3 pt-3 pb-1.5\",\n        \"group-has-[>input]/input-group:pt-2.5\",\n        \"[.border-b]:pb-3\",\n      ],\n      \"block-end\": [\n        \"order-last w-full justify-start px-3 pt-1.5 pb-3\",\n        \"group-has-[>input]/input-group:pb-2.5\",\n        \"[.border-t]:pt-3\",\n      ],\n    },\n  },\n  defaultVariants: {\n    align: \"inline-start\",\n  },\n});\n\ninterface InputGroupAddonProps\n  extends React.ComponentProps<typeof ark.div>,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = (props: InputGroupAddonProps) => {\n  const { className, align = \"inline-start\", slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"input-group-addon\"}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = tv({\n  base: [\n    \"relative\",\n    \"flex items-center gap-2\",\n    \"text-sm\",\n    \"shadow-none\",\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      /**\n       * The floor, and the default, because there is nothing legal below it.\n       *\n       * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —\n       * every size here is a `rem` against a root the density axis sets. That is under the 24×24\n       * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group\n       * that said nothing got the failing size.\n       *\n       * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8\n       * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in\n       * the hit path. This is the one thing `Button` does not carry, and it is why the two were\n       * decided separately rather than in one sweep.\n       */\n      // 24 CSS pixels, not `h-6`: a `rem` is 21px at compact, under the bar above, and this is the\n      // one size in a recipe that must not scale. Inside a group the bar and the group's own 28px\n      // at `sm` (24.5px at compact) are the same number, which is why 24 fits at every size.\n      sm: [\"h-[24px]\", \"gap-1.5\", \"px-2.5\", \"rounded-md\", \"has-[>svg]:px-2.5\"],\n      \"icon-sm\": [\"size-[24px]\", \"p-0\", \"has-[>svg]:p-0\"],\n    },\n  },\n  defaultVariants: {\n    size: \"sm\",\n  },\n});\n\ninterface InputGroupButtonProps\n  extends Omit<React.ComponentProps<typeof Button>, \"size\">,\n    VariantProps<typeof inputGroupButtonVariants> {}\n\nexport const InputGroupButton = (props: InputGroupButtonProps) => {\n  const {\n    className,\n    type = \"button\",\n    variant = \"ghost\",\n    size = \"sm\",\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"input-group-button\"}\n    />\n  );\n};\n\nexport const InputGroupText = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"flex items-center gap-2\",\n        \"text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"input-group-text\"}\n    />\n  );\n};\n\nexport const InputGroupInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Input\n      className={cn(\n        // `h-auto self-stretch`: the group's height, not the input's own. An `Input` is\n        // `h-(--size)` and its size is its own, so inside a group of another size it would be a\n        // different height from the box around it.\n        \"h-auto flex-1 self-stretch\",\n        \"bg-transparent\",\n        \"rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n\nexport const InputGroupTextarea = (\n  props: React.ComponentProps<typeof Textarea>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Textarea\n      className={cn(\n        \"flex-1\",\n        \"py-3\",\n        \"bg-transparent\",\n        \"resize-none rounded-none border-0 shadow-none\",\n        \"focus-visible:ring-0\",\n        \"disabled:bg-transparent aria-invalid:ring-0 data-invalid:ring-0\",\n                className\n      )}\n      {...rest}\n      slot={slot ?? \"input-group-control\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAA6B;AACrB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAES;AACT;AAEV;AAOE;AAEA;AACE;AAAK;AAAJ;AACqD;AACzC;AACN;AACD;AACe;AAAA;AAGzB;AAEmC;AAC3B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY0E;AACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7D;AACb;AACA;AACA;AAAA;AAEW;AACX;AACA;AACA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAOE;AAEA;AACE;AAAK;AAAJ;AAC4D;AAC/C;;AAEV;AAGuD;AACzD;AACK;AACD;AACe;AAAA;AAGzB;AAEoC;AAC5B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBmE;AACrB;AAAA;AACpD;AAEe;AACT;AAEV;AAOE;AAAM;AACJ;AACO;AACG;AACH;AACP;AACG;AAGL;AACE;AAAC;AAAA;AAC4D;AAChD;AACX;AACA;AACI;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAAC;AAAA;AACY;AAAA;AAAA;AAAA;AAIT;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;AAKE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACQ;AAAA;AAEN;AACU;AAAA;AAGpB;;;;;;;;;"}

package/dist/simples/input.d.ts

@@ -3,21 +3,21 @@ import { default as React } from 'react';
 import { VariantProps } from 'tailwind-variants';
 export declare const inputVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], {
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface InputProps extends Omit<React.ComponentProps<typeof FieldInput>, "size">, VariantProps<typeof inputVariants> {

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/simples/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;qDAsCxB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,CAAC,EAC3D,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAYtC,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/simples/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;qDAoCxB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,CAAC,EAC3D,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAYtC,CAAC"}

package/dist/simples/input.js

@@ -1,12 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import { FieldInput as s } from "@ark-ui/react/field";
-import { tv as o } from "tailwind-variants";
+import { jsx as d } from "react/jsx-runtime";
+import { FieldInput as n } from "@ark-ui/react/field";
+import { tv as s } from "tailwind-variants";
 import { cn as l } from "../lib/cn.js";
-const c = o({
+import { controlSizes as u, controlHeight as f } from "../lib/control-size.js";
+const c = s({
   base: [
     "peer",
     // On the base, not on the size — see `button.tsx`.
-    "h-(--size)",
+    f,
     "w-full min-w-0",
     "px-3",
     "bg-field",
@@ -32,29 +33,27 @@ const c = o({
   ],
   variants: {
     size: {
-      sm: ["[--size:calc(var(--size-field)*7)]"],
-      md: ["[--size:calc(var(--size-field)*8)]"],
-      lg: ["[--size:calc(var(--size-field)*9)]"]
+      ...u
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), p = (e) => {
-  const { size: i = "md", type: t = "text", className: r, slot: a, ...d } = e;
-  return /* @__PURE__ */ n(
-    s,
+}), g = (e) => {
+  const { size: i = "md", type: t = "text", className: r, slot: a, ...o } = e;
+  return /* @__PURE__ */ d(
+    n,
     {
       className: l(c({ size: i }), r),
       "data-size": i,
       type: t,
-      ...d,
+      ...o,
       "data-slot": a ?? "input"
     }
   );
 };
 export {
-  p as Input,
+  g as Input,
   c as inputVariants
 };
 //# sourceMappingURL=input.js.map

package/dist/simples/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../src/simples/input.tsx"],"sourcesContent":["import { FieldInput } from \"@ark-ui/react/field\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const inputVariants = tv({\n  base: [\n    \"peer\",\n    // On the base, not on the size — see `button.tsx`.\n    \"h-(--size)\",\n    \"w-full min-w-0\",\n    \"px-3\",\n    \"bg-field\",\n    \"text-base md:text-sm\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"placeholder:text-faint\",\n    \"file:inline-flex file:h-7 file:items-center file:border-0\",\n    \"file:font-medium file:text-foreground file:text-sm\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n    \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    // The dark branch is TEXT only, and this is the site the other eleven recipes point at.\n    // Shark repaints the border and the ring here too; measured across all six compiled documents,\n    // `--destructive` reads 4.15:1 against that document's own dark page — over the 3:1 WCAG 1.4.11\n    // asks of the visual information identifying a control or its state, so the border and the ring\n    // were buying a hue rather than contrast. Text owes AA's 4.5 and 4.15 misses it, so this half\n    // stays.\n    \"dark:aria-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"[--size:calc(var(--size-field)*7)]\"],\n      md: [\"[--size:calc(var(--size-field)*8)]\"],\n      lg: [\"[--size:calc(var(--size-field)*9)]\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputProps\n  extends Omit<React.ComponentProps<typeof FieldInput>, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\nexport const Input = (props: InputProps) => {\n  const { size = \"md\", type = \"text\", className, slot, ...rest } = props;\n\n  return (\n    <FieldInput\n      className={cn(inputVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      {...rest}\n      data-slot={slot ?? \"input\"}\n    />\n  );\n};\n"],"names":["inputVariants","tv","Input","props","size","type","className","slot","rest","jsx","FieldInput","cn"],"mappings":";;;;AAKO,MAAMA,IAAgBC,EAAG;AAAA,EAC9B,MAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,IAAA;AAAA,EAC3C;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAMYC,IAAQ,CAACC,MAAsB;AAC1C,QAAM,EAAE,MAAAC,IAAO,MAAM,MAAAC,IAAO,QAAQ,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAEjE,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGX,EAAc,EAAE,MAAAI,EAAA,CAAM,GAAGE,CAAS;AAAA,MAChD,aAAWF;AAAA,MACX,MAAAC;AAAA,MACC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}
+{"version":3,"file":"input.js","sources":["../../src/simples/input.tsx"],"sourcesContent":["import { FieldInput } from \"@ark-ui/react/field\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlHeight, controlSizes } from \"../lib/control-size\";\n\nexport const inputVariants = tv({\n  base: [\n    \"peer\",\n    // On the base, not on the size — see `button.tsx`.\n    controlHeight,\n    \"w-full min-w-0\",\n    \"px-3\",\n    \"bg-field\",\n    \"text-base md:text-sm\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"placeholder:text-faint\",\n    \"file:inline-flex file:h-7 file:items-center file:border-0\",\n    \"file:font-medium file:text-foreground file:text-sm\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n    \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    // The dark branch is TEXT only, and this is the site the other eleven recipes point at.\n    // Shark repaints the border and the ring here too; measured across all six compiled documents,\n    // `--destructive` reads 4.15:1 against that document's own dark page — over the 3:1 WCAG 1.4.11\n    // asks of the visual information identifying a control or its state, so the border and the ring\n    // were buying a hue rather than contrast. Text owes AA's 4.5 and 4.15 misses it, so this half\n    // stays.\n    \"dark:aria-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      ...controlSizes,\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface InputProps\n  extends Omit<React.ComponentProps<typeof FieldInput>, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\nexport const Input = (props: InputProps) => {\n  const { size = \"md\", type = \"text\", className, slot, ...rest } = props;\n\n  return (\n    <FieldInput\n      className={cn(inputVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      {...rest}\n      data-slot={slot ?? \"input\"}\n    />\n  );\n};\n"],"names":["inputVariants","tv","controlHeight","controlSizes","Input","props","size","type","className","slot","rest","jsx","FieldInput","cn"],"mappings":";;;;;AAMO,MAAMA,IAAgBC,EAAG;AAAA,EAC9B,MAAM;AAAA,IACJ;AAAA;AAAA,IAEAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAMYC,IAAQ,CAACC,MAAsB;AAC1C,QAAM,EAAE,MAAAC,IAAO,MAAM,MAAAC,IAAO,QAAQ,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAEjE,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGb,EAAc,EAAE,MAAAM,EAAA,CAAM,GAAGE,CAAS;AAAA,MAChD,aAAWF;AAAA,MACX,MAAAC;AAAA,MACC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/native-select.d.ts

@@ -4,21 +4,21 @@ import { default as React } from 'react';
 import { VariantProps } from 'tailwind-variants';
 export declare const nativeSelectVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], {
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 interface NativeSelectProps extends Omit<React.ComponentProps<typeof ArkField.Select>, "size">, VariantProps<typeof nativeSelectVariants> {

package/dist/simples/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/simples/native-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;qDA8B/B,CAAC;AAEH,UAAU,iBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAChE,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA0BpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,sBACY,CAAC;AAEzE,eAAO,MAAM,oBAAoB,GAC/B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,sBACc,CAAC"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/simples/native-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;qDA8B/B,CAAC;AAEH,UAAU,iBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAChE,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA0BpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC,sBACY,CAAC;AAEzE,eAAO,MAAM,oBAAoB,GAC/B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,sBACc,CAAC"}

package/dist/simples/native-select.js

@@ -1,16 +1,19 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { ark as s } from "@ark-ui/react/factory";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { ark as a } from "@ark-ui/react/factory";
 import { Field as c } from "@ark-ui/react/field";
-import { ChevronsUpDownIcon as v } from "lucide-react";
-import { tv as p } from "tailwind-variants";
-import { cn as a } from "../lib/cn.js";
-const m = p({
+import { ChevronsUpDownIcon as p } from "lucide-react";
+import { tv as v } from "tailwind-variants";
+import { cn as o } from "../lib/cn.js";
+import { controlSizes as m, controlHeight as u } from "../lib/control-size.js";
+const f = v({
   base: [
     "appearance-none",
     // On the base, not on the size — see `button.tsx`. The `h-7/8/9` these variants carried was a
     // second answer to the same question, and the one that ignored the density knob.
-    "h-(--size)",
-    "w-full min-w-0",
+    u,
+    // `block`: an inline-level select sits on a line box, and the wrapper measured 29px around a
+    // 28px `sm` — the descender room under the baseline.
+    "block w-full min-w-0",
     "ps-2.5 pe-8",
     "select-none text-sm",
     "bg-field",
@@ -26,52 +29,50 @@ const m = p({
   ],
   variants: {
     size: {
-      sm: ["[--size:calc(var(--size-field)*7)]"],
-      md: ["[--size:calc(var(--size-field)*8)]"],
-      lg: ["[--size:calc(var(--size-field)*9)]"]
+      ...m
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), h = (e) => {
-  const { size: i = "md", invalid: o, className: r, slot: n, ...l } = e;
+}), k = (e) => {
+  const { size: t = "md", invalid: r, className: n, slot: s, ...l } = e;
   return /* @__PURE__ */ d(
-    s.div,
+    a.div,
     {
-      className: a(
+      className: o(
         "relative w-fit",
         "has-[select:disabled]:opacity-64",
         "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
-        r
+        n
       ),
       "data-slot": "native-select-wrapper",
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ i(
           c.Select,
           {
-            "aria-invalid": o,
-            className: a(m({ size: i })),
+            "aria-invalid": r,
+            className: o(f({ size: t })),
             ...l,
-            "data-slot": n ?? "native-select"
+            "data-slot": s ?? "native-select"
           }
         ),
-        /* @__PURE__ */ t(
-          v,
+        /* @__PURE__ */ i(
+          p,
           {
             "aria-hidden": "true",
-            className: a("absolute inset-e-2.5 top-1/2 -translate-y-1/2"),
+            className: o("absolute inset-e-2.5 top-1/2 -translate-y-1/2"),
             "data-slot": "native-select-icon"
           }
         )
       ]
     }
   );
-}, w = ({ slot: e, ...i }) => /* @__PURE__ */ t(s.option, { ...i, "data-slot": e ?? "native-select-option" }), N = ({ slot: e, ...i }) => /* @__PURE__ */ t(s.optgroup, { ...i, "data-slot": e ?? "native-select-optgroup" });
+}, z = ({ slot: e, ...t }) => /* @__PURE__ */ i(a.option, { ...t, "data-slot": e ?? "native-select-option" }), _ = ({ slot: e, ...t }) => /* @__PURE__ */ i(a.optgroup, { ...t, "data-slot": e ?? "native-select-optgroup" });
 export {
-  h as NativeSelect,
-  N as NativeSelectOptGroup,
-  w as NativeSelectOption,
-  m as nativeSelectVariants
+  k as NativeSelect,
+  _ as NativeSelectOptGroup,
+  z as NativeSelectOption,
+  f as nativeSelectVariants
 };
 //# sourceMappingURL=native-select.js.map

package/dist/simples/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","sources":["../../src/simples/native-select.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { Field as ArkField } from \"@ark-ui/react/field\";\nimport { ChevronsUpDownIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport const nativeSelectVariants = tv({\n  base: [\n    \"appearance-none\",\n    // On the base, not on the size — see `button.tsx`. The `h-7/8/9` these variants carried was a\n    // second answer to the same question, and the one that ignored the density knob.\n    \"h-(--size)\",\n    \"w-full min-w-0\",\n    \"ps-2.5 pe-8\",\n    \"select-none text-sm\",\n    \"bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-colors\",\n    \"outline-none\",\n    \"[&:has(option[value='']:checked)]:text-faint\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n    \"focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n    \"dark:aria-invalid:text-destructive-foreground\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"[--size:calc(var(--size-field)*7)]\"],\n      md: [\"[--size:calc(var(--size-field)*8)]\"],\n      lg: [\"[--size:calc(var(--size-field)*9)]\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ninterface NativeSelectProps\n  extends Omit<React.ComponentProps<typeof ArkField.Select>, \"size\">,\n    VariantProps<typeof nativeSelectVariants> {\n  /**\n   * Whether the select is invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean;\n}\n\nexport const NativeSelect = (props: NativeSelectProps) => {\n  const { size = \"md\", invalid, className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative w-fit\",\n        \"has-[select:disabled]:opacity-64\",\n        \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n    >\n      <ArkField.Select\n        aria-invalid={invalid}\n        className={cn(nativeSelectVariants({ size }))}\n        {...rest}\n        data-slot={slot ?? \"native-select\"}\n      />\n      <ChevronsUpDownIcon\n        aria-hidden=\"true\"\n        className={cn(\"absolute inset-e-2.5 top-1/2 -translate-y-1/2\")}\n        data-slot=\"native-select-icon\"\n      />\n    </ark.div>\n  );\n};\n\nexport const NativeSelectOption = (\n  { slot, ...rest }: React.ComponentProps<typeof ark.option>\n) => <ark.option {...rest} data-slot={slot ?? \"native-select-option\"} />;\n\nexport const NativeSelectOptGroup = (\n  { slot, ...rest }: React.ComponentProps<typeof ark.optgroup>\n) => <ark.optgroup {...rest} data-slot={slot ?? \"native-select-optgroup\"} />;\n"],"names":["nativeSelectVariants","tv","NativeSelect","props","size","invalid","className","slot","rest","jsxs","ark","cn","jsx","ArkField","ChevronsUpDownIcon","NativeSelectOption","NativeSelectOptGroup"],"mappings":";;;;;;AAOO,MAAMA,IAAuBC,EAAG;AAAA,EACrC,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,MACzC,IAAI,CAAC,oCAAoC;AAAA,IAAA;AAAA,EAC3C;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAaYC,IAAe,CAACC,MAA6B;AACxD,QAAM,EAAE,MAAAC,IAAO,MAAM,SAAAC,GAAS,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASL;AAE3D,SACE,gBAAAM;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC,EAAS;AAAA,UAAT;AAAA,YACC,gBAAcR;AAAA,YACd,WAAWM,EAAGX,EAAqB,EAAE,MAAAI,EAAA,CAAM,CAAC;AAAA,YAC3C,GAAGI;AAAA,YACJ,aAAWD,KAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErB,gBAAAK;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWH,EAAG,+CAA+C;AAAA,YAC7D,aAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaI,IAAqB,CAChC,EAAE,MAAAR,GAAM,GAAGC,EAAA,MACR,gBAAAI,EAACF,EAAI,QAAJ,EAAY,GAAGF,GAAM,aAAWD,KAAQ,uBAAA,CAAwB,GAEzDS,IAAuB,CAClC,EAAE,MAAAT,GAAM,GAAGC,EAAA,MACR,gBAAAI,EAACF,EAAI,UAAJ,EAAc,GAAGF,GAAM,aAAWD,KAAQ,yBAAA,CAA0B;"}
+{"version":3,"file":"native-select.js","sources":["../../src/simples/native-select.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { Field as ArkField } from \"@ark-ui/react/field\";\nimport { ChevronsUpDownIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { controlHeight, controlSizes } from \"../lib/control-size\";\n\nexport const nativeSelectVariants = tv({\n  base: [\n    \"appearance-none\",\n    // On the base, not on the size — see `button.tsx`. The `h-7/8/9` these variants carried was a\n    // second answer to the same question, and the one that ignored the density knob.\n    controlHeight,\n    // `block`: an inline-level select sits on a line box, and the wrapper measured 29px around a\n    // 28px `sm` — the descender room under the baseline.\n    \"block w-full min-w-0\",\n    \"ps-2.5 pe-8\",\n    \"select-none text-sm\",\n    \"bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-colors\",\n    \"outline-none\",\n    \"[&:has(option[value='']:checked)]:text-faint\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n    \"focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n    \"dark:aria-invalid:text-destructive-foreground\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      ...controlSizes,\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ninterface NativeSelectProps\n  extends Omit<React.ComponentProps<typeof ArkField.Select>, \"size\">,\n    VariantProps<typeof nativeSelectVariants> {\n  /**\n   * Whether the select is invalid.\n   *\n   * @default false\n   */\n  invalid?: boolean;\n}\n\nexport const NativeSelect = (props: NativeSelectProps) => {\n  const { size = \"md\", invalid, className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative w-fit\",\n        \"has-[select:disabled]:opacity-64\",\n        \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n    >\n      <ArkField.Select\n        aria-invalid={invalid}\n        className={cn(nativeSelectVariants({ size }))}\n        {...rest}\n        data-slot={slot ?? \"native-select\"}\n      />\n      <ChevronsUpDownIcon\n        aria-hidden=\"true\"\n        className={cn(\"absolute inset-e-2.5 top-1/2 -translate-y-1/2\")}\n        data-slot=\"native-select-icon\"\n      />\n    </ark.div>\n  );\n};\n\nexport const NativeSelectOption = (\n  { slot, ...rest }: React.ComponentProps<typeof ark.option>\n) => <ark.option {...rest} data-slot={slot ?? \"native-select-option\"} />;\n\nexport const NativeSelectOptGroup = (\n  { slot, ...rest }: React.ComponentProps<typeof ark.optgroup>\n) => <ark.optgroup {...rest} data-slot={slot ?? \"native-select-optgroup\"} />;\n"],"names":["nativeSelectVariants","tv","controlHeight","controlSizes","NativeSelect","props","size","invalid","className","slot","rest","jsxs","ark","cn","jsx","ArkField","ChevronsUpDownIcon","NativeSelectOption","NativeSelectOptGroup"],"mappings":";;;;;;;AAQO,MAAMA,IAAuBC,EAAG;AAAA,EACrC,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA,IAGAC;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,GAAGC;AAAA,IAAA;AAAA,EACL;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAaYC,IAAe,CAACC,MAA6B;AACxD,QAAM,EAAE,MAAAC,IAAO,MAAM,SAAAC,GAAS,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASL;AAE3D,SACE,gBAAAM;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACC,EAAS;AAAA,UAAT;AAAA,YACC,gBAAcR;AAAA,YACd,WAAWM,EAAGb,EAAqB,EAAE,MAAAM,EAAA,CAAM,CAAC;AAAA,YAC3C,GAAGI;AAAA,YACJ,aAAWD,KAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErB,gBAAAK;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWH,EAAG,+CAA+C;AAAA,YAC7D,aAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaI,IAAqB,CAChC,EAAE,MAAAR,GAAM,GAAGC,EAAA,MACR,gBAAAI,EAACF,EAAI,QAAJ,EAAY,GAAGF,GAAM,aAAWD,KAAQ,uBAAA,CAAwB,GAEzDS,IAAuB,CAClC,EAAE,MAAAT,GAAM,GAAGC,EAAA,MACR,gBAAAI,EAACF,EAAI,UAAJ,EAAc,GAAGF,GAAM,aAAWD,KAAQ,yBAAA,CAA0B;"}

package/dist/simples/number-input.d.ts

@@ -4,21 +4,21 @@ import { VariantProps } from 'tailwind-variants';
 export declare const useNumberInput: () => import('@ark-ui/react').UseNumberInputContext;
 declare const numberInputControlVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "[--size:calc(var(--size-field)*7)]";
+        md: "[--size:calc(var(--size-field)*8)]";
+        lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export declare const NumberInput: (props: React.ComponentProps<typeof ArkNumberInput.Root>) => React.JSX.Element;