@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/menu.js

@@ -0,0 +1,294 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { Portal as l } from "@ark-ui/react";
+import { ark as f } from "@ark-ui/react/factory";
+import { Menu as o } from "@ark-ui/react/menu";
+import { useMenuContext as B } from "@ark-ui/react/menu";
+import { CheckIcon as d, ChevronRight as v } from "lucide-react";
+import { tv as m } from "tailwind-variants";
+import { cn as s } from "../lib/cn.js";
+const x = (t) => {
+  const {
+    lazyMount: e = !0,
+    positioning: n = { placement: "bottom-end" },
+    unmountOnExit: r = !0,
+    ...i
+  } = t;
+  return /* @__PURE__ */ a(
+    o.Root,
+    {
+      lazyMount: e,
+      positioning: n,
+      unmountOnExit: r,
+      ...i
+    }
+  );
+}, z = ({ slot: t, ...e }) => /* @__PURE__ */ a(o.Trigger, { ...e, "data-slot": t ?? "menu-trigger" }), T = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.ContextTrigger,
+    {
+      className: s("cursor-default", e),
+      ...r,
+      "data-slot": n ?? "menu-context-trigger"
+    }
+  );
+}, g = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.Positioner,
+    {
+      className: s("outline-none", e),
+      ...r,
+      "data-slot": n ?? "menu-positioner"
+    }
+  );
+}, p = m({
+  base: [
+    "z-[calc(50+var(--nested-layer-count,0))]",
+    // A FIXED max-height, not `max-h-(--available-height)`: clamping the content to the
+    // floating-ui `size` var feeds the element's own resize back into autoUpdate — content
+    // shrinks → scrollbar toggles → available space changes → recompute → loop, which hard-
+    // freezes the tab. A fixed cap is decoupled from the measurement.
+    "max-h-96 overflow-y-auto not-[class*='w-']:min-w-32",
+    "p-1",
+    "bg-popover",
+    "text-popover-foreground",
+    "rounded-box border shadow-lg/5",
+    "origin-(--transform-origin)",
+    "outline-none",
+    "overflow-y-auto",
+    "duration-100",
+    "data-[state=open]:animate-in",
+    "data-[state=open]:fade-in-0",
+    "data-[state=open]:zoom-in-[98%]",
+    "data-[placement=bottom]:slide-in-from-top-2",
+    "data-[placement=left]:slide-in-from-end-2",
+    "data-[placement=right]:slide-in-from-start-2",
+    "data-[placement=top]:slide-in-from-bottom-2",
+    "motion-reduce:animate-none!"
+  ]
+}), G = (t) => {
+  const { className: e, children: n, slot: r, ...i } = t;
+  return /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(
+    o.Content,
+    {
+      className: s(p(), e),
+      ...i,
+      "data-slot": r ?? "menu-content",
+      children: n
+    }
+  ) }) });
+}, R = (t) => {
+  const { heading: e, children: n, slot: r, ...i } = t;
+  return /* @__PURE__ */ c(o.ItemGroup, { ...i, "data-slot": r ?? "menu-group", children: [
+    !!e && /* @__PURE__ */ a(h, { children: e }),
+    n
+  ] });
+}, S = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.Separator,
+    {
+      className: s("my-1 h-px bg-border", e),
+      ...r,
+      "data-slot": n ?? "menu-separator"
+    }
+  );
+}, u = m({
+  base: [
+    "group/menu-item",
+    "relative",
+    "w-full",
+    "px-2.5 py-1.5",
+    "flex items-center gap-2",
+    "select-none text-sm",
+    "rounded-lg",
+    "outline-hidden",
+    "group-data-[date=open]/trigger-item:bg-accent group-data-[date=open]/trigger-item:text-accent-foreground",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  variants: {
+    variant: {
+      default: [
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+      ],
+      destructive: [
+        "text-destructive-foreground",
+        "data-highlighted:bg-destructive/14",
+        "**:[svg]:text-destructive! dark:**:[svg]:text-destructive-foreground!"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), j = (t) => {
+  const { variant: e = "default", className: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.Item,
+    {
+      className: s(u({ variant: e }), n),
+      "data-variant": e,
+      ...r
+    }
+  );
+}, _ = (t) => {
+  const { variant: e = "default", className: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.Item,
+    {
+      className: s(
+        u({ variant: e }),
+        "flex-col gap-1",
+        "[&_svg:not([class*='size-'])]:size-4.5",
+        n
+      ),
+      ...r
+    }
+  );
+}, A = (t) => {
+  const { className: e, children: n, ...r } = t;
+  return /* @__PURE__ */ c(
+    o.CheckboxItem,
+    {
+      className: s(
+        u({ variant: "default" }),
+        "ps-8",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ a(
+          o.ItemIndicator,
+          {
+            className: s(
+              "absolute inset-s-2",
+              "size-3.5",
+              "flex items-center justify-center",
+              "pointer-events-none"
+            ),
+            children: /* @__PURE__ */ a(d, {})
+          }
+        ),
+        /* @__PURE__ */ a(o.ItemText, { children: n })
+      ]
+    }
+  );
+}, P = (t) => {
+  const { heading: e, children: n, slot: r, ...i } = t;
+  return /* @__PURE__ */ c(o.RadioItemGroup, { ...i, "data-slot": r ?? "menu-radio-group", children: [
+    !!e && /* @__PURE__ */ a(h, { children: e }),
+    n
+  ] });
+}, h = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.ItemGroupLabel,
+    {
+      className: s(
+        "px-2 py-1.5",
+        "font-medium text-muted-foreground text-sm",
+        "pointer-events-none",
+        e
+      ),
+      ...r,
+      "data-slot": n ?? "menu-group-label"
+    }
+  );
+}, V = (t) => {
+  const { className: e, children: n, slot: r, ...i } = t;
+  return /* @__PURE__ */ c(
+    o.RadioItem,
+    {
+      className: s(
+        u({ variant: "default" }),
+        "ps-8",
+        e
+      ),
+      ...i,
+      "data-slot": r ?? "menu-radio-item",
+      children: [
+        /* @__PURE__ */ a(o.ItemIndicator, { className: "pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(d, {}) }),
+        /* @__PURE__ */ a(o.ItemText, { "data-slot": "menu-radio-item-text", children: n })
+      ]
+    }
+  );
+}, L = (t) => /* @__PURE__ */ a(x, { ...t }), E = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a(g, { slot: "menu-sub-positioner", children: /* @__PURE__ */ a(
+    o.Content,
+    {
+      className: s(p(), e),
+      ...r,
+      "data-slot": n ?? "menu-sub-content"
+    }
+  ) }) });
+}, O = (t) => {
+  const { className: e, children: n, slot: r, ...i } = t;
+  return /* @__PURE__ */ c(
+    o.TriggerItem,
+    {
+      className: s(u({ variant: "default" }), e),
+      ...i,
+      "data-slot": r ?? "menu-sub-trigger",
+      children: [
+        n,
+        /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(v, {}) })
+      ]
+    }
+  );
+}, b = (t) => {
+  const { className: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    f.span,
+    {
+      className: s(
+        "ms-auto rtl:me-auto",
+        "text-muted-foreground text-xs tracking-widest",
+        "group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive dark:group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive-foreground",
+        e
+      ),
+      ...r,
+      "data-slot": n ?? "menu-shortcut"
+    }
+  );
+}, Q = (t) => {
+  const { style: e, slot: n, ...r } = t;
+  return /* @__PURE__ */ a(
+    o.Arrow,
+    {
+      style: {
+        "--arrow-background": "var(--popover)",
+        "--arrow-size": "calc(1.5 * var(--spacing))",
+        ...e
+      },
+      ...r,
+      "data-slot": n ?? "menu-arrow",
+      children: /* @__PURE__ */ a(o.ArrowTip, { className: "border-s border-t" })
+    }
+  );
+};
+export {
+  x as Menu,
+  Q as MenuArrow,
+  A as MenuCheckboxItem,
+  G as MenuContent,
+  T as MenuContextTrigger,
+  R as MenuGroup,
+  h as MenuGroupLabel,
+  j as MenuItem,
+  g as MenuPositioner,
+  _ as MenuQuickItem,
+  P as MenuRadioGroup,
+  V as MenuRadioItem,
+  S as MenuSeparator,
+  b as MenuShortcut,
+  L as MenuSub,
+  E as MenuSubContent,
+  O as MenuSubTrigger,
+  z as MenuTrigger,
+  p as menuContentVariants,
+  B as useMenu
+};
+//# sourceMappingURL=menu.js.map

package/dist/simples/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../src/simples/menu.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  Menu as ArkMenu,\n  type MenuContentProps,\n  useMenuContext,\n} from \"@ark-ui/react/menu\";\nimport { CheckIcon, ChevronRight } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nexport { useMenuContext as useMenu };\n\nexport const Menu = (props: React.ComponentProps<typeof ArkMenu.Root>) => {\n  const {\n    lazyMount = true,\n    positioning = { placement: \"bottom-end\" },\n    unmountOnExit = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkMenu.Root\n      lazyMount={lazyMount}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkMenu.Trigger>\n) => <ArkMenu.Trigger {...rest} data-slot={slot ?? \"menu-trigger\"} />;\n\n/**\n * The second way into the same menu: opens on right-click at the pointer instead of anchoring to\n * a control. `cursor-default` because the region is not a link or a button and must not look like\n * one — the affordance is the right-click, not the cursor.\n */\nexport const MenuContextTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.ContextTrigger>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ContextTrigger\n      className={cn(\"cursor-default\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-context-trigger\"}\n    />\n  );\n};\n\nexport const MenuPositioner = (\n  props: React.ComponentProps<typeof ArkMenu.Positioner>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Positioner\n      className={cn(\"outline-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-positioner\"}\n    />\n  );\n};\n\nexport const menuContentVariants = tv({\n  base: [\n    \"z-[calc(50+var(--nested-layer-count,0))]\",\n    // A FIXED max-height, not `max-h-(--available-height)`: clamping the content to the\n    // floating-ui `size` var feeds the element's own resize back into autoUpdate — content\n    // shrinks → scrollbar toggles → available space changes → recompute → loop, which hard-\n    // freezes the tab. A fixed cap is decoupled from the measurement.\n    \"max-h-96 overflow-y-auto not-[class*='w-']:min-w-32\",\n    \"p-1\",\n    \"bg-popover\",\n    \"text-popover-foreground\",\n    \"rounded-box border shadow-lg/5\",\n    \"origin-(--transform-origin)\",\n    \"outline-none\",\n    \"overflow-y-auto\",\n    \"duration-100\",\n    \"data-[state=open]:animate-in\",\n    \"data-[state=open]:fade-in-0\",\n    \"data-[state=open]:zoom-in-[98%]\",\n    \"data-[placement=bottom]:slide-in-from-top-2\",\n    \"data-[placement=left]:slide-in-from-end-2\",\n    \"data-[placement=right]:slide-in-from-start-2\",\n    \"data-[placement=top]:slide-in-from-bottom-2\",\n    \"motion-reduce:animate-none!\",\n  ],\n});\n\nexport const MenuContent = (props: MenuContentProps) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner>\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-content\"}\n        >\n          {children}\n        </ArkMenu.Content>\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\ninterface MenuGroupProps\n  extends React.ComponentProps<typeof ArkMenu.ItemGroup> {\n  /**\n   * The heading of the menu item group.\n   */\n  heading?: string;\n}\n\nexport const MenuGroup = (props: MenuGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroup {...rest} data-slot={slot ?? \"menu-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.ItemGroup>\n  );\n};\n\nexport const MenuSeparator = (\n  props: React.ComponentProps<typeof ArkMenu.Separator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Separator\n      className={cn(\"my-1 h-px bg-border\", className)}\n      {...rest}\n      data-slot={slot ?? \"menu-separator\"}\n    />\n  );\n};\n\nconst menuItemVariants = tv({\n  base: [\n    \"group/menu-item\",\n    \"relative\",\n    \"w-full\",\n    \"px-2.5 py-1.5\",\n    \"flex items-center gap-2\",\n    \"select-none text-sm\",\n    \"rounded-lg\",\n    \"outline-hidden\",\n    \"group-data-[date=open]/trigger-item:bg-accent group-data-[date=open]/trigger-item:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    variant: {\n      default: [\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n      ],\n      destructive: [\n        \"text-destructive-foreground\",\n        \"data-highlighted:bg-destructive/14\",\n        \"**:[svg]:text-destructive! dark:**:[svg]:text-destructive-foreground!\",\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface MenuItemProps\n  extends React.ComponentProps<typeof ArkMenu.Item>,\n    VariantProps<typeof menuItemVariants> {}\n\nexport const MenuItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(menuItemVariants({ variant }), className)}\n      data-variant={variant}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuQuickItem = (props: MenuItemProps) => {\n  const { variant = \"default\", className, ...rest } = props;\n\n  return (\n    <ArkMenu.Item\n      className={cn(\n        menuItemVariants({ variant }),\n        \"flex-col gap-1\",\n        \"[&_svg:not([class*='size-'])]:size-4.5\",\n        className\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport const MenuCheckboxItem = (\n  props: React.ComponentProps<typeof ArkMenu.CheckboxItem>\n) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <ArkMenu.CheckboxItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n    >\n      <ArkMenu.ItemIndicator\n        className={cn(\n          \"absolute inset-s-2\",\n          \"size-3.5\",\n          \"flex items-center justify-center\",\n          \"pointer-events-none\"\n        )}\n      >\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText>{children}</ArkMenu.ItemText>\n    </ArkMenu.CheckboxItem>\n  );\n};\n\ninterface MenuRadioGroupProps\n  extends React.ComponentProps<typeof ArkMenu.RadioItemGroup> {\n  /**\n   * The heading of the menu radio item group.\n   */\n  heading?: string;\n}\n\nexport const MenuRadioGroup = (props: MenuRadioGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItemGroup {...rest} data-slot={slot ?? \"menu-radio-group\"}>\n      {!!heading && <MenuGroupLabel>{heading}</MenuGroupLabel>}\n\n      {children}\n    </ArkMenu.RadioItemGroup>\n  );\n};\n\nexport const MenuGroupLabel = (\n  props: React.ComponentProps<typeof ArkMenu.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5\",\n        \"font-medium text-muted-foreground text-sm\",\n        \"pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-group-label\"}\n    />\n  );\n};\n\nexport const MenuRadioItem = (\n  props: React.ComponentProps<typeof ArkMenu.RadioItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.RadioItem\n      className={cn(\n        menuItemVariants({ variant: \"default\" }),\n        \"ps-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-radio-item\"}\n    >\n      <ArkMenu.ItemIndicator className=\"pointer-events-none absolute inset-s-2 flex size-3.5 items-center justify-center\">\n        <CheckIcon />\n      </ArkMenu.ItemIndicator>\n\n      <ArkMenu.ItemText data-slot=\"menu-radio-item-text\">\n        {children}\n      </ArkMenu.ItemText>\n    </ArkMenu.RadioItem>\n  );\n};\n\nexport const MenuSub = (props: React.ComponentProps<typeof Menu>) => (\n  <Menu {...props} />\n);\n\nexport const MenuSubContent = (\n  props: React.ComponentProps<typeof ArkMenu.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <MenuPositioner slot=\"menu-sub-positioner\">\n        <ArkMenu.Content\n          className={cn(menuContentVariants(), className)}\n          {...rest}\n          data-slot={slot ?? \"menu-sub-content\"}\n        />\n      </MenuPositioner>\n    </Portal>\n  );\n};\n\nexport const MenuSubTrigger = (\n  props: React.ComponentProps<typeof ArkMenu.TriggerItem>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.TriggerItem\n      className={cn(menuItemVariants({ variant: \"default\" }), className)}\n      {...rest}\n      data-slot={slot ?? \"menu-sub-trigger\"}\n    >\n      {children}\n\n      <MenuShortcut>\n        <ChevronRight />\n      </MenuShortcut>\n    </ArkMenu.TriggerItem>\n  );\n};\n\nexport const MenuShortcut = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"ms-auto rtl:me-auto\",\n        \"text-muted-foreground text-xs tracking-widest\",\n        \"group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive dark:group-data-highlighted/menu-item:group-data-[variant=destructive]/menu-item:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"menu-shortcut\"}\n    />\n  );\n};\n\n// Shark's version pins `left: \"20px\"` *after* the caller's `style`, throwing away the offset\n// the positioner computes. Dropped: this is `PopoverArrow` / `TooltipArrow` / `HoverCardArrow`\n// under a fourth machine, and the three of them are what a reader compares it against.\nexport const MenuArrow = (\n  props: React.ComponentProps<typeof ArkMenu.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkMenu.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"menu-arrow\"}\n    >\n      <ArkMenu.ArrowTip className=\"border-s border-t\" />\n    </ArkMenu.Arrow>\n  );\n};\n"],"names":["Menu","props","lazyMount","positioning","unmountOnExit","rest","jsx","ArkMenu","MenuTrigger","slot","MenuContextTrigger","className","cn","MenuPositioner","menuContentVariants","tv","MenuContent","children","Portal","MenuGroup","heading","jsxs","MenuGroupLabel","MenuSeparator","menuItemVariants","MenuItem","variant","MenuQuickItem","MenuCheckboxItem","CheckIcon","MenuRadioGroup","MenuRadioItem","MenuSub","MenuSubContent","MenuSubTrigger","MenuShortcut","ChevronRight","ark","MenuArrow","style"],"mappings":";;;;;;;;AAcO,MAAMA,IAAO,CAACC,MAAqD;AACxE,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc,EAAE,WAAW,aAAA;AAAA,IAC3B,eAAAC,IAAgB;AAAA,IAChB,GAAGC;AAAA,EAAA,IACDJ;AAEJ,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAAL;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaG,IAAc,CACzB,EAAE,MAAAC,GAAM,GAAGJ,EAAA,MACR,gBAAAC,EAACC,EAAQ,SAAR,EAAiB,GAAGF,GAAM,aAAWI,KAAQ,eAAA,CAAgB,GAOtDC,IAAqB,CAChCT,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAG,kBAAkBD,CAAS;AAAA,MACxC,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaI,IAAiB,CAC5BZ,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAG,gBAAgBD,CAAS;AAAA,MACtC,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAsBC,EAAG;AAAA,EACpC,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;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,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC,GAEYC,IAAc,CAACf,MAA4B;AACtD,QAAM,EAAE,WAAAU,GAAW,UAAAM,GAAU,MAAAR,GAAM,GAAGJ,MAASJ;AAE/C,SACE,gBAAAK,EAACY,GAAA,EACC,UAAA,gBAAAZ,EAACO,GAAA,EACC,UAAA,gBAAAP;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAGE,EAAA,GAAuBH,CAAS;AAAA,MAC7C,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAElB,UAAAQ;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,GAUaE,IAAY,CAAClB,MAA0B;AAClD,QAAM,EAAE,SAAAmB,GAAS,UAAAH,GAAU,MAAAR,GAAM,GAAGJ,MAASJ;AAE7C,SACE,gBAAAoB,EAACd,EAAQ,WAAR,EAAmB,GAAGF,GAAM,aAAWI,KAAQ,cAC7C,UAAA;AAAA,IAAA,CAAC,CAACW,KAAW,gBAAAd,EAACgB,GAAA,EAAgB,UAAAF,GAAQ;AAAA,IAEtCH;AAAA,EAAA,GACH;AAEJ,GAEaM,IAAgB,CAC3BtB,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAG,uBAAuBD,CAAS;AAAA,MAC7C,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEMe,IAAmBT,EAAG;AAAA,EAC1B,MAAM;AAAA,IACJ;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,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,MAAA;AAAA,MAEF,aAAa;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAMYU,IAAW,CAACxB,MAAyB;AAChD,QAAM,EAAE,SAAAyB,IAAU,WAAW,WAAAf,GAAW,GAAGN,MAASJ;AAEpD,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAGY,EAAiB,EAAE,SAAAE,EAAA,CAAS,GAAGf,CAAS;AAAA,MACtD,gBAAce;AAAA,MACb,GAAGrB;AAAA,IAAA;AAAA,EAAA;AAGV,GAEasB,IAAgB,CAAC1B,MAAyB;AACrD,QAAM,EAAE,SAAAyB,IAAU,WAAW,WAAAf,GAAW,GAAGN,MAASJ;AAEpD,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK;AAAA,QACTY,EAAiB,EAAE,SAAAE,GAAS;AAAA,QAC5B;AAAA,QACA;AAAA,QACAf;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV,GAEauB,IAAmB,CAC9B3B,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,UAAAM,GAAU,GAAGZ,MAASJ;AAEzC,SACE,gBAAAoB;AAAA,IAACd,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK;AAAA,QACTY,EAAiB,EAAE,SAAS,WAAW;AAAA,QACvC;AAAA,QACAb;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC,EAAQ;AAAA,UAAR;AAAA,YACC,WAAWK;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGb,gBAAAvB,EAACC,EAAQ,UAAR,EAAkB,UAAAU,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,GAUaa,IAAiB,CAAC7B,MAA+B;AAC5D,QAAM,EAAE,SAAAmB,GAAS,UAAAH,GAAU,MAAAR,GAAM,GAAGJ,MAASJ;AAE7C,SACE,gBAAAoB,EAACd,EAAQ,gBAAR,EAAwB,GAAGF,GAAM,aAAWI,KAAQ,oBAClD,UAAA;AAAA,IAAA,CAAC,CAACW,KAAW,gBAAAd,EAACgB,GAAA,EAAgB,UAAAF,GAAQ;AAAA,IAEtCH;AAAA,EAAA,GACH;AAEJ,GAEaK,IAAiB,CAC5BrB,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAD;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEasB,IAAgB,CAC3B9B,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,UAAAM,GAAU,MAAAR,GAAM,GAAGJ,MAASJ;AAE/C,SACE,gBAAAoB;AAAA,IAACd,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK;AAAA,QACTY,EAAiB,EAAE,SAAS,WAAW;AAAA,QACvC;AAAA,QACAb;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAH,EAACC,EAAQ,eAAR,EAAsB,WAAU,oFAC/B,UAAA,gBAAAD,EAACuB,KAAU,GACb;AAAA,0BAECtB,EAAQ,UAAR,EAAiB,aAAU,wBACzB,UAAAU,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEae,IAAU,CAAC/B,MACtB,gBAAAK,EAACN,GAAA,EAAM,GAAGC,EAAA,CAAO,GAGNgC,IAAiB,CAC5BhC,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK,EAACY,GAAA,EACC,UAAA,gBAAAZ,EAACO,GAAA,EAAe,MAAK,uBACnB,UAAA,gBAAAP;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAGE,EAAA,GAAuBH,CAAS;AAAA,MAC7C,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA,GAEvB,EAAA,CACF;AAEJ,GAEayB,IAAiB,CAC5BjC,MACG;AACH,QAAM,EAAE,WAAAU,GAAW,UAAAM,GAAU,MAAAR,GAAM,GAAGJ,MAASJ;AAE/C,SACE,gBAAAoB;AAAA,IAACd,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWK,EAAGY,EAAiB,EAAE,SAAS,UAAA,CAAW,GAAGb,CAAS;AAAA,MAChE,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAQ;AAAA,QAED,gBAAAX,EAAC6B,GAAA,EACC,UAAA,gBAAA7B,EAAC8B,GAAA,CAAA,CAAa,EAAA,CAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaD,IAAe,CAAClC,MAAiD;AAC5E,QAAM,EAAE,WAAAU,GAAW,MAAAF,GAAM,GAAGJ,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAAC+B,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWzB;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAD;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAKa6B,IAAY,CACvBrC,MACG;AACH,QAAM,EAAE,OAAAsC,GAAO,MAAA9B,GAAM,GAAGJ,MAASJ;AAEjC,SACE,gBAAAK;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,OACE;AAAA,QACE,sBAAsB;AAAA,QACtB,gBAAgB;AAAA,QAChB,GAAGgC;AAAA,MAAA;AAAA,MAGN,GAAGlC;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA,gBAAAH,EAACC,EAAQ,UAAR,EAAiB,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGtD;"}

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

@@ -0,0 +1,36 @@
+import { ark } from '@ark-ui/react/factory';
+import { Field as ArkField } from '@ark-ui/react/field';
+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[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface NativeSelectProps extends Omit<React.ComponentProps<typeof ArkField.Select>, "size">, VariantProps<typeof nativeSelectVariants> {
+    /**
+     * Whether the select is invalid.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+}
+export declare const NativeSelect: (props: NativeSelectProps) => React.JSX.Element;
+export declare const NativeSelectOption: ({ slot, ...rest }: React.ComponentProps<typeof ark.option>) => React.JSX.Element;
+export declare const NativeSelectOptGroup: ({ slot, ...rest }: React.ComponentProps<typeof ark.optgroup>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=native-select.d.ts.map

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

@@ -0,0 +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"}

package/dist/simples/native-select.js

@@ -0,0 +1,77 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { ark as s } 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({
+  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",
+    "ps-2.5 pe-8",
+    "select-none text-sm",
+    "bg-field",
+    "rounded-field border border-input shadow-xs/5",
+    "transition-colors",
+    "outline-none",
+    "[&:has(option[value='']:checked)]:text-faint",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+    "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
+    "dark:aria-invalid:text-destructive-foreground",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: ["[--size:calc(var(--size-field)*7)]"],
+      md: ["[--size:calc(var(--size-field)*8)]"],
+      lg: ["[--size:calc(var(--size-field)*9)]"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), h = (e) => {
+  const { size: i = "md", invalid: o, className: r, slot: n, ...l } = e;
+  return /* @__PURE__ */ d(
+    s.div,
+    {
+      className: a(
+        "relative w-fit",
+        "has-[select:disabled]:opacity-64",
+        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
+        r
+      ),
+      "data-slot": "native-select-wrapper",
+      children: [
+        /* @__PURE__ */ t(
+          c.Select,
+          {
+            "aria-invalid": o,
+            className: a(m({ size: i })),
+            ...l,
+            "data-slot": n ?? "native-select"
+          }
+        ),
+        /* @__PURE__ */ t(
+          v,
+          {
+            "aria-hidden": "true",
+            className: a("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" });
+export {
+  h as NativeSelect,
+  N as NativeSelectOptGroup,
+  w as NativeSelectOption,
+  m as nativeSelectVariants
+};
+//# sourceMappingURL=native-select.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,35 @@
+import { NumberInput as ArkNumberInput } from '@ark-ui/react/number-input';
+import { default as React } from 'react';
+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;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const NumberInput: (props: React.ComponentProps<typeof ArkNumberInput.Root>) => React.JSX.Element;
+export declare const NumberInputLabel: (props: React.ComponentProps<typeof ArkNumberInput.Label>) => React.JSX.Element;
+export interface NumberInputControlProps extends Omit<React.ComponentProps<typeof ArkNumberInput.Control>, "size">, VariantProps<typeof numberInputControlVariants> {
+}
+export declare const NumberInputControl: (props: NumberInputControlProps) => React.JSX.Element;
+export declare const NumberInputInput: (props: React.ComponentProps<typeof ArkNumberInput.Input>) => React.JSX.Element;
+export declare const NumberInputIncrementTrigger: (props: React.ComponentProps<typeof ArkNumberInput.IncrementTrigger>) => React.JSX.Element;
+export declare const NumberInputDecrementTrigger: (props: React.ComponentProps<typeof ArkNumberInput.DecrementTrigger>) => React.JSX.Element;
+export declare const NumberInputScrubber: (props: React.ComponentProps<typeof ArkNumberInput.Scrubber>) => React.JSX.Element;
+export declare const NumberInputValueText: (props: React.ComponentProps<typeof ArkNumberInput.ValueText>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=number-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/simples/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,cAAc,EAE9B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,cAAc,qDAAwB,CAAC;AAIpD,QAAA,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;qDAsB9B,CAAC;AAgBH,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,sBAWxD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,sBAWzD,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EACvE,YAAY,CAAC,OAAO,0BAA0B,CAAC;CAAG;AAEtD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,sBAUhE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,sBAqBzD,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,gBAAgB,CAAC,sBAiBpE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,gBAAgB,CAAC,sBAapE,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,QAAQ,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,sBAW7D,CAAC"}

package/dist/simples/number-input.js

@@ -0,0 +1,142 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useNumberInputContext as c, NumberInput as o } from "@ark-ui/react/number-input";
+import { ChevronDownIcon as d, ChevronUpIcon as m } from "lucide-react";
+import { tv as u } from "tailwind-variants";
+import { cn as a } from "../lib/cn.js";
+import { FieldLabel as b } from "./field.js";
+const v = c, p = u({
+  base: [
+    "group/number-input",
+    "relative flex w-full min-w-0 items-stretch",
+    "bg-field",
+    "rounded-field border border-input shadow-xs/5",
+    "transition-[color,box-shadow]",
+    "outline-none focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring",
+    "data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: "h-7",
+      md: "h-8",
+      lg: "h-9"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), l = u({
+  base: [
+    "absolute end-0",
+    "flex h-1/2 w-6 items-center justify-center",
+    "border-input border-s",
+    "text-muted-foreground",
+    "transition-colors",
+    "hover:bg-accent hover:text-accent-foreground",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "[&_svg]:size-3.5 [&_svg]:shrink-0",
+    "motion-reduce:transition-none!"
+  ]
+}), w = (e) => {
+  const { className: t, slot: r, ...n } = e;
+  return /* @__PURE__ */ s(
+    o.Root,
+    {
+      className: a("flex w-full flex-col items-start gap-2", t),
+      ...n,
+      "data-slot": r ?? "number-input"
+    }
+  );
+}, C = (e) => {
+  const { children: t, slot: r, ...n } = e;
+  return /* @__PURE__ */ s(b, { asChild: !0, children: /* @__PURE__ */ s(o.Label, { ...n, "data-slot": r ?? "number-input-label", children: t }) });
+}, T = (e) => {
+  const { size: t = "md", className: r, slot: n, ...i } = e;
+  return /* @__PURE__ */ s(
+    o.Control,
+    {
+      className: a(p({ size: t }), r),
+      ...i,
+      "data-slot": n ?? "number-input-control"
+    }
+  );
+}, z = (e) => {
+  const { className: t, slot: r, ...n } = e;
+  return /* @__PURE__ */ s(
+    o.Input,
+    {
+      className: a(
+        "w-full min-w-0",
+        "ps-3 pe-8",
+        "bg-transparent",
+        "text-base tabular-nums md:text-sm",
+        "rounded-[inherit]",
+        "placeholder:text-faint",
+        "outline-none",
+        "disabled:pointer-events-none disabled:cursor-not-allowed",
+        t
+      ),
+      ...n,
+      "data-slot": r ?? "number-input-input"
+    }
+  );
+}, V = (e) => {
+  const { className: t, children: r, slot: n, ...i } = e;
+  return /* @__PURE__ */ s(
+    o.IncrementTrigger,
+    {
+      className: a(
+        l(),
+        "top-0 rounded-se-lg border-b",
+        t
+      ),
+      ...i,
+      "data-slot": n ?? "number-input-increment-trigger",
+      children: r ?? /* @__PURE__ */ s(m, {})
+    }
+  );
+}, y = (e) => {
+  const { className: t, children: r, slot: n, ...i } = e;
+  return /* @__PURE__ */ s(
+    o.DecrementTrigger,
+    {
+      className: a(l(), "bottom-0 rounded-ee-lg", t),
+      ...i,
+      "data-slot": n ?? "number-input-decrement-trigger",
+      children: r ?? /* @__PURE__ */ s(d, {})
+    }
+  );
+}, D = (e) => {
+  const { className: t, slot: r, ...n } = e;
+  return /* @__PURE__ */ s(
+    o.Scrubber,
+    {
+      className: a("cursor-ew-resize select-none", t),
+      ...n,
+      "data-slot": r ?? "number-input-scrubber"
+    }
+  );
+}, L = (e) => {
+  const { className: t, slot: r, ...n } = e;
+  return /* @__PURE__ */ s(
+    o.ValueText,
+    {
+      className: a("tabular-nums", t),
+      ...n,
+      "data-slot": r ?? "number-input-value-text"
+    }
+  );
+};
+export {
+  w as NumberInput,
+  T as NumberInputControl,
+  y as NumberInputDecrementTrigger,
+  V as NumberInputIncrementTrigger,
+  z as NumberInputInput,
+  C as NumberInputLabel,
+  D as NumberInputScrubber,
+  L as NumberInputValueText,
+  v as useNumberInput
+};
+//# sourceMappingURL=number-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","sources":["../../src/simples/number-input.tsx"],"sourcesContent":["import {\n  NumberInput as ArkNumberInput,\n  useNumberInputContext,\n} from \"@ark-ui/react/number-input\";\nimport { ChevronDownIcon, ChevronUpIcon } 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\nexport const useNumberInput = useNumberInputContext;\n\n// The Control is the input shell (border, focus ring, invalid, disabled) — Ark ships no `Group`\n// part, so the shell lives here and the stepper triggers float at the inline-end edge.\nconst numberInputControlVariants = tv({\n  base: [\n    \"group/number-input\",\n    \"relative flex w-full min-w-0 items-stretch\",\n    \"bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none focus-within:border-primary focus-within:ring-[3px] focus-within: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: \"h-7\",\n      md: \"h-8\",\n      lg: \"h-9\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst numberInputTriggerVariants = tv({\n  base: [\n    \"absolute end-0\",\n    \"flex h-1/2 w-6 items-center justify-center\",\n    \"border-input border-s\",\n    \"text-muted-foreground\",\n    \"transition-colors\",\n    \"hover:bg-accent hover:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg]:size-3.5 [&_svg]:shrink-0\",\n    \"motion-reduce:transition-none!\",\n  ],\n});\n\nexport const NumberInput = (\n  props: React.ComponentProps<typeof ArkNumberInput.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.Root\n      className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"number-input\"}\n    />\n  );\n};\n\nexport const NumberInputLabel = (\n  props: React.ComponentProps<typeof ArkNumberInput.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkNumberInput.Label {...rest} data-slot={slot ?? \"number-input-label\"}>\n        {children}\n      </ArkNumberInput.Label>\n    </FieldLabel>\n  );\n};\n\nexport interface NumberInputControlProps\n  extends Omit<React.ComponentProps<typeof ArkNumberInput.Control>, \"size\">,\n    VariantProps<typeof numberInputControlVariants> {}\n\nexport const NumberInputControl = (props: NumberInputControlProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.Control\n      className={cn(numberInputControlVariants({ size }), className)}\n      {...rest}\n      data-slot={slot ?? \"number-input-control\"}\n    />\n  );\n};\n\nexport const NumberInputInput = (\n  props: React.ComponentProps<typeof ArkNumberInput.Input>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.Input\n      className={cn(\n        \"w-full min-w-0\",\n        \"ps-3 pe-8\",\n        \"bg-transparent\",\n        \"text-base tabular-nums md:text-sm\",\n        \"rounded-[inherit]\",\n        \"placeholder:text-faint\",\n        \"outline-none\",\n        \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"number-input-input\"}\n    />\n  );\n};\n\nexport const NumberInputIncrementTrigger = (\n  props: React.ComponentProps<typeof ArkNumberInput.IncrementTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.IncrementTrigger\n      className={cn(\n        numberInputTriggerVariants(),\n        \"top-0 rounded-se-lg border-b\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"number-input-increment-trigger\"}\n    >\n      {children ?? <ChevronUpIcon />}\n    </ArkNumberInput.IncrementTrigger>\n  );\n};\n\nexport const NumberInputDecrementTrigger = (\n  props: React.ComponentProps<typeof ArkNumberInput.DecrementTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.DecrementTrigger\n      className={cn(numberInputTriggerVariants(), \"bottom-0 rounded-ee-lg\", className)}\n      {...rest}\n      data-slot={slot ?? \"number-input-decrement-trigger\"}\n    >\n      {children ?? <ChevronDownIcon />}\n    </ArkNumberInput.DecrementTrigger>\n  );\n};\n\n// A drag-to-change surface — wrap it around the label (or an icon) and the pointer scrubs the\n// value. `cursor-ew-resize` is the only affordance it carries.\nexport const NumberInputScrubber = (\n  props: React.ComponentProps<typeof ArkNumberInput.Scrubber>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.Scrubber\n      className={cn(\"cursor-ew-resize select-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"number-input-scrubber\"}\n    />\n  );\n};\n\nexport const NumberInputValueText = (\n  props: React.ComponentProps<typeof ArkNumberInput.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkNumberInput.ValueText\n      className={cn(\"tabular-nums\", className)}\n      {...rest}\n      data-slot={slot ?? \"number-input-value-text\"}\n    />\n  );\n};\n"],"names":["useNumberInput","useNumberInputContext","numberInputControlVariants","tv","numberInputTriggerVariants","NumberInput","props","className","slot","rest","jsx","ArkNumberInput","cn","NumberInputLabel","children","FieldLabel","NumberInputControl","size","NumberInputInput","NumberInputIncrementTrigger","ChevronUpIcon","NumberInputDecrementTrigger","ChevronDownIcon","NumberInputScrubber","NumberInputValueText"],"mappings":"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"}