@kanzo-tech/ui 0.12.0 → 0.13.0

package/dist/simples/combobox.js

@@ -1,32 +1,32 @@
 "use client";
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { Combobox as a, useComboboxContext as u } from "@ark-ui/react/combobox";
-import { Portal as p } from "@ark-ui/react/portal";
-import { XIcon as x, CheckIcon as h, ChevronsUpDownIcon as g } from "lucide-react";
+import { Combobox as a, useComboboxContext as p } from "@ark-ui/react/combobox";
+import { Portal as x } from "@ark-ui/react/portal";
+import { ChevronsUpDownIcon as d, XIcon as h, CheckIcon as g } from "lucide-react";
 import { tv as f } from "tailwind-variants";
 import { cn as c } from "../lib/cn.js";
 import { Button as C } from "./button.js";
 import { InputGroup as I, InputGroupInput as N, InputGroupAddon as v, InputGroupButton as m } from "./input-group.js";
-const z = u, A = a.Context, D = (e) => {
+const z = p, A = a.Context, D = (e) => {
   const {
     openOnClick: o = !0,
-    lazyMount: s = !0,
-    unmountOnExit: n = !0,
+    lazyMount: n = !0,
+    unmountOnExit: s = !0,
     slot: r,
     ...l
   } = e;
   return /* @__PURE__ */ t(
     a.Root,
     {
-      lazyMount: s,
+      lazyMount: n,
       openOnClick: o,
-      unmountOnExit: n,
+      unmountOnExit: s,
       ...l,
       "data-slot": r ?? "combobox"
     }
   );
 }, w = (e) => {
-  const { className: o, slot: s, ...n } = e;
+  const { className: o, slot: n, ...s } = e;
   return /* @__PURE__ */ t(
     a.Control,
     {
@@ -35,58 +35,57 @@ const z = u, A = a.Context, D = (e) => {
         "relative flex flex-wrap items-center gap-1",
         o
       ),
-      ...n,
-      "data-slot": s ?? "combobox-control"
+      ...s,
+      "data-slot": n ?? "combobox-control"
     }
   );
 }, M = (e) => {
   const {
     size: o = "md",
-    showTrigger: s = !0,
-    showClear: n = !1,
+    showTrigger: n = !0,
+    showClear: s = !1,
     className: r,
     children: l,
-    ...d
-  } = e, { inputValue: b } = z();
+    ...b
+  } = e, { inputValue: u } = z();
   return /* @__PURE__ */ t(w, { "data-size": o, children: /* @__PURE__ */ i(I, { className: c(r), size: o, children: [
     l,
-    /* @__PURE__ */ t(a.Input, { asChild: !0, children: /* @__PURE__ */ t(N, { ...d }) }),
+    /* @__PURE__ */ t(a.Input, { asChild: !0, children: /* @__PURE__ */ t(N, { ...b }) }),
     /* @__PURE__ */ i(v, { align: "inline-end", children: [
-      s && /* @__PURE__ */ t(
+      n && /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
         m,
         {
-          asChild: !0,
           className: "group-has-data-[slot=combobox-clear]/input-group:hidden",
           size: "icon-sm",
+          slot: "combobox-trigger",
           variant: "ghost",
-          children: /* @__PURE__ */ t(y, {})
+          children: /* @__PURE__ */ t(d, {})
         }
-      ),
-      n && b && /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(
+      ) }),
+      s && u && /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(
         m,
         {
           size: "icon-sm",
           slot: "combobox-clear",
           variant: "ghost",
-          children: /* @__PURE__ */ t(x, {})
+          children: /* @__PURE__ */ t(h, {})
         }
       ) })
     ] })
   ] }) });
 }, y = (e) => {
-  const { className: o, children: s, ...n } = e;
+  const { className: o, children: n, ...s } = e;
   return /* @__PURE__ */ t(
     a.Trigger,
     {
       className: c(o),
-      ...n,
+      ...s,
       asChild: !0,
-      children: s ?? // **`size-8`, and it was `size-4`.** Measured 16×16 on `/docs/forms/combobox` — two thirds
+      children: n ?? // **`icon-sm`, and it was `size-4`.** Measured 16×16 on `/docs/forms/combobox` — two thirds
       // under the 24px WCAG 2.5.8 floor, and it only ever passed `pressable-floor.test.ts`
-      // because that guard grades a target by the last `size-*` it can see in source order. It
-      // also read as a different class of control beside the 32px marks every other in-group
-      // button is: `icon-sm` is the one size a control inside a group has.
-      /* @__PURE__ */ t(C, { className: "size-8", slot: "combobox-trigger", variant: "ghost", children: /* @__PURE__ */ t(g, {}) })
+      // because that guard grades a target by the last `size-*` it can see in source order. A
+      // size token rather than a literal, so it follows the control height with the rest.
+      /* @__PURE__ */ t(C, { size: "icon-sm", slot: "combobox-trigger", variant: "ghost", children: /* @__PURE__ */ t(d, {}) })
     }
   );
 }, G = ({
@@ -96,8 +95,8 @@ const z = u, A = a.Context, D = (e) => {
   slot: e,
   ...o
 }) => /* @__PURE__ */ t(a.Positioner, { ...o, "data-slot": e ?? "combobox-positioner" }), U = (e) => {
-  const { className: o, children: s, slot: n, ...r } = e;
-  return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
+  const { className: o, children: n, slot: s, ...r } = e;
+  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
     a.Content,
     {
       className: c(
@@ -121,18 +120,18 @@ const z = u, A = a.Context, D = (e) => {
         o
       ),
       ...r,
-      "data-slot": n ?? "combobox-content",
-      children: s
+      "data-slot": s ?? "combobox-content",
+      children: n
     }
   ) }) });
 }, X = (e) => {
-  const { heading: o, children: s, slot: n, ...r } = e;
-  return /* @__PURE__ */ i(a.ItemGroup, { ...r, "data-slot": n ?? "combobox-group", children: [
+  const { heading: o, children: n, slot: s, ...r } = e;
+  return /* @__PURE__ */ i(a.ItemGroup, { ...r, "data-slot": s ?? "combobox-group", children: [
     !!o && /* @__PURE__ */ t(L, { children: o }),
-    s
+    n
   ] });
 }, L = (e) => {
-  const { className: o, slot: s, ...n } = e;
+  const { className: o, slot: n, ...s } = e;
   return /* @__PURE__ */ t(
     a.ItemGroupLabel,
     {
@@ -140,8 +139,8 @@ const z = u, A = a.Context, D = (e) => {
         "px-2 py-1.5 font-semibold text-muted-foreground text-xs",
         o
       ),
-      ...n,
-      "data-slot": s ?? "combobox-group-label"
+      ...s,
+      "data-slot": n ?? "combobox-group-label"
     }
   );
 }, T = f({
@@ -169,22 +168,22 @@ const z = u, A = a.Context, D = (e) => {
     showIndicator: !0
   }
 }), $ = (e) => {
-  const { showIndicator: o = !0, className: s, children: n, slot: r, ...l } = e;
+  const { showIndicator: o = !0, className: n, children: s, slot: r, ...l } = e;
   return /* @__PURE__ */ i(
     a.Item,
     {
-      className: c(T({ showIndicator: o }), s),
+      className: c(T({ showIndicator: o }), n),
       persistFocus: !0,
       ...l,
       "data-slot": r ?? "combobox-item",
       children: [
-        n,
-        o ? /* @__PURE__ */ t("span", { className: "absolute inset-e-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { "data-slot": "combobox-item-indicator", children: /* @__PURE__ */ t(h, {}) }) }) : null
+        s,
+        o ? /* @__PURE__ */ t("span", { className: "absolute inset-e-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { "data-slot": "combobox-item-indicator", children: /* @__PURE__ */ t(g, {}) }) }) : null
       ]
     }
   );
 }, q = (e) => {
-  const { className: o, children: s, slot: n, ...r } = e;
+  const { className: o, children: n, slot: s, ...r } = e;
   return /* @__PURE__ */ t(
     a.Empty,
     {
@@ -194,18 +193,18 @@ const z = u, A = a.Context, D = (e) => {
         o
       ),
       ...r,
-      "data-slot": n ?? "combobox-empty",
-      children: s || "No results found."
+      "data-slot": s ?? "combobox-empty",
+      children: n || "No results found."
     }
   );
 }, H = (e) => {
-  const { className: o, slot: s, ...n } = e;
+  const { className: o, slot: n, ...s } = e;
   return /* @__PURE__ */ t(
     a.List,
     {
       className: c("flex flex-col", o),
-      ...n,
-      "data-slot": s ?? "combobox-list"
+      ...s,
+      "data-slot": n ?? "combobox-list"
     }
   );
 };

package/dist/simples/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../src/simples/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Combobox as ArkCombobox,\n  type ComboboxList as ArkComboboxList,\n  useComboboxContext as useArkComboboxContext,\n} from \"@ark-ui/react/combobox\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CheckIcon, ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport type { inputVariants } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useCombobox = useArkComboboxContext;\n\nexport const ComboboxContext = ArkCombobox.Context;\n\nexport const Combobox: ArkCombobox.RootComponent = (props) => {\n  const {\n    openOnClick = true,\n    lazyMount = true,\n    unmountOnExit = true,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkCombobox.Root\n      lazyMount={lazyMount}\n      openOnClick={openOnClick}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"combobox\"}\n    />\n  );\n};\n\nexport const ComboboxControl = (\n  props: React.ComponentProps<typeof ArkCombobox.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Control\n      className={cn(\n        \"group/combobox-control\",\n        \"relative flex flex-wrap items-center gap-1\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-control\"}\n    />\n  );\n};\n\ninterface ComboboxInputProps\n  extends Omit<React.ComponentProps<typeof ArkCombobox.Input>, \"size\">,\n    VariantProps<typeof inputVariants> {\n  /**\n   * Whether the control is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether to show the clear button.\n   *\n   * @default false\n   */\n  showClear?: boolean;\n  /**\n   * Whether to show the trigger button.\n   *\n   * @default true\n   */\n  showTrigger?: boolean;\n}\n\nexport const ComboboxInput = (props: ComboboxInputProps) => {\n  const {\n    size = \"md\",\n    showTrigger = true,\n    showClear = false,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const { inputValue } = useCombobox();\n\n  return (\n    <ComboboxControl data-size={size}>\n      <InputGroup className={cn(className)} size={size}>\n        {children}\n        <ArkCombobox.Input asChild>\n          <InputGroupInput {...rest} />\n        </ArkCombobox.Input>\n        <InputGroupAddon align=\"inline-end\">\n          {showTrigger && (\n            <InputGroupButton\n              asChild\n              className=\"group-has-data-[slot=combobox-clear]/input-group:hidden\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n            >\n              <ComboboxTrigger />\n            </InputGroupButton>\n          )}\n          {showClear && inputValue && (\n            <ComboboxClear asChild>\n              <InputGroupButton\n                size=\"icon-sm\"\n                slot=\"combobox-clear\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </InputGroupButton>\n            </ComboboxClear>\n          )}\n        </InputGroupAddon>\n      </InputGroup>\n    </ComboboxControl>\n  );\n};\n\nexport const ComboboxTrigger = (\n  props: React.ComponentProps<typeof ArkCombobox.Trigger>\n) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <ArkCombobox.Trigger\n      // **No positioning of its own, and the `absolute inset-e-1 inset-y-0` it carried was inert.**\n      // Both compositions lay it out already: `Combobox` puts it in an `InputGroupAddon`, and a\n      // caller composing by hand drops it into `ComboboxControl`, which is a `flex items-center`\n      // row. In the first, the `asChild` collapse merges it with `InputGroupButton`, whose base\n      // declares `relative` and wins — so the offsets resolved against nothing and the part was\n      // laid out as the flex child it looks like. Keeping a rule that only bites when a later merge\n      // stops overriding it is how a component acquires a bug it never had.\n      className={cn(className)}\n      {...rest}\n      asChild\n    >\n      {children ?? (\n        // **`size-8`, and it was `size-4`.** Measured 16×16 on `/docs/forms/combobox` — two thirds\n        // under the 24px WCAG 2.5.8 floor, and it only ever passed `pressable-floor.test.ts`\n        // because that guard grades a target by the last `size-*` it can see in source order. It\n        // also read as a different class of control beside the 32px marks every other in-group\n        // button is: `icon-sm` is the one size a control inside a group has.\n        <Button className=\"size-8\" slot=\"combobox-trigger\" variant=\"ghost\">\n          <ChevronsUpDownIcon />\n        </Button>\n      )}\n    </ArkCombobox.Trigger>\n  );\n};\n\nexport const ComboboxClear = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCombobox.ClearTrigger>) => (\n  <ArkCombobox.ClearTrigger {...rest} data-slot={slot ?? \"combobox-clear\"} />\n);\n\n/** Composable combobox input for custom controls (e.g. Tags Input). */\nexport const ComboboxFieldInput = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkCombobox.Input>\n) => <ArkCombobox.Input {...rest} data-slot={slot ?? \"combobox-field-input\"} />;\n\nexport const ComboboxPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCombobox.Positioner>) => (\n  <ArkCombobox.Positioner {...rest} data-slot={slot ?? \"combobox-positioner\"} />\n);\n\nexport const ComboboxContent = (\n  props: React.ComponentProps<typeof ArkCombobox.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ComboboxPositioner>\n        <ArkCombobox.Content\n          className={cn(\n            \"relative z-50\",\n            \"max-h-96 min-w-48\",\n            \"origin-(--transform-origin)\",\n            \"p-1\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"overflow-y-auto\",\n            \"outline-none\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=open]:zoom-in-[98%] data-[state=closed]:zoom-out-[98%]\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"combobox-content\"}\n        >\n          {children}\n        </ArkCombobox.Content>\n      </ComboboxPositioner>\n    </Portal>\n  );\n};\n\ninterface ComboboxGroupProps\n  extends React.ComponentProps<typeof ArkCombobox.ItemGroup> {\n  /**\n   * The heading of the group\n   */\n  heading?: string | React.ReactNode;\n}\n\nexport const ComboboxGroup = (props: ComboboxGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.ItemGroup {...rest} data-slot={slot ?? \"combobox-group\"}>\n      {!!heading && <ComboboxGroupLabel>{heading}</ComboboxGroupLabel>}\n\n      {children}\n    </ArkCombobox.ItemGroup>\n  );\n};\n\nexport const ComboboxGroupLabel = (\n  props: React.ComponentProps<typeof ArkCombobox.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-semibold text-muted-foreground text-xs\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-group-label\"}\n    />\n  );\n};\n\nexport const comboboxItemVariants = tv({\n  base: [\n    \"relative\",\n    \"py-1.5 ps-2\",\n    \"text-sm\",\n    \"flex w-full items-center gap-2\",\n    \"rounded-box\",\n    \"select-none\",\n    \"cursor-default\",\n    \"outline-hidden\",\n    \"data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground\",\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    showIndicator: {\n      true: \"pe-8\",\n      false: \"pe-2\",\n    },\n  },\n  defaultVariants: {\n    showIndicator: true,\n  },\n});\n\ninterface ComboboxItemProps\n  extends React.ComponentProps<typeof ArkCombobox.Item>,\n    VariantProps<typeof comboboxItemVariants> {}\n\nexport const ComboboxItem = (props: ComboboxItemProps) => {\n  const { showIndicator = true, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Item\n      className={cn(comboboxItemVariants({ showIndicator }), className)}\n      persistFocus\n      {...rest}\n      data-slot={slot ?? \"combobox-item\"}\n    >\n      {children}\n\n      {showIndicator ? (\n        <span className=\"absolute inset-e-2 flex size-3.5 items-center justify-center\">\n          <ArkCombobox.ItemIndicator data-slot=\"combobox-item-indicator\">\n            <CheckIcon />\n          </ArkCombobox.ItemIndicator>\n        </span>\n      ) : null}\n    </ArkCombobox.Item>\n  );\n};\n\nexport const ComboboxEmpty = (\n  props: React.ComponentProps<typeof ArkCombobox.Empty>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Empty\n      className={cn(\n        \"px-2 py-1.5\",\n        \"text-center text-muted-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-empty\"}\n    >\n      {children || \"No results found.\"}\n    </ArkCombobox.Empty>\n  );\n};\n\nexport const ComboboxList = (\n  props: React.ComponentProps<typeof ArkComboboxList>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.List\n      className={cn(\"flex flex-col\", className)}\n      {...rest}\n      data-slot={slot ?? \"combobox-list\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqBO;AAKL;AAAM;AACU;AACF;AACI;AAChB;AACG;AAGL;AACE;AAAa;AAAZ;AACC;AACA;AACA;AACI;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AA2BE;AAAM;AACG;AACO;AACF;AACZ;AACA;AACG;AAKL;AAGO;AAAA;AAGD;AAEG;AACC;AAAC;AAAA;AACQ;AACG;AACL;AACG;AAES;AAAA;AAAA;AAKjB;AAAC;AAAA;AACM;AACA;AACG;AAED;AAAA;AAEX;AAEJ;AAIR;AAKE;AAEA;AACE;AAAa;AAAZ;AAQwB;AACnB;AACG;AAEN;AAAA;AAAA;AAAA;AAAA;AAQC;AAAA;AAIR;AAE8B;AAC5B;AAEF;AASmC;AACjC;AAEF;AAOE;AAEA;AAGM;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAKX;AAWE;AAEA;AAEK;AAA0C;AAE1C;AAGP;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAEuC;AAC/B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACO;AACP;AACC;AAAA;AACT;AAEe;AACA;AAEnB;AAOE;AAEA;AACE;AAAa;AAAZ;AACiE;AACpD;AACR;AACe;AAElB;AAAA;AAQG;AAAA;AAAA;AAGV;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAEN;AAAA;AAGnB;AAKE;AAEA;AACE;AAAa;AAAZ;AACyC;AACpC;AACe;AAAA;AAGzB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"combobox.js","sources":["../../src/simples/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Combobox as ArkCombobox,\n  type ComboboxList as ArkComboboxList,\n  useComboboxContext as useArkComboboxContext,\n} from \"@ark-ui/react/combobox\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CheckIcon, ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport type { inputVariants } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useCombobox = useArkComboboxContext;\n\nexport const ComboboxContext = ArkCombobox.Context;\n\nexport const Combobox: ArkCombobox.RootComponent = (props) => {\n  const {\n    openOnClick = true,\n    lazyMount = true,\n    unmountOnExit = true,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkCombobox.Root\n      lazyMount={lazyMount}\n      openOnClick={openOnClick}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"combobox\"}\n    />\n  );\n};\n\nexport const ComboboxControl = (\n  props: React.ComponentProps<typeof ArkCombobox.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Control\n      className={cn(\n        \"group/combobox-control\",\n        \"relative flex flex-wrap items-center gap-1\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-control\"}\n    />\n  );\n};\n\ninterface ComboboxInputProps\n  extends Omit<React.ComponentProps<typeof ArkCombobox.Input>, \"size\">,\n    VariantProps<typeof inputVariants> {\n  /**\n   * Whether the control is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether to show the clear button.\n   *\n   * @default false\n   */\n  showClear?: boolean;\n  /**\n   * Whether to show the trigger button.\n   *\n   * @default true\n   */\n  showTrigger?: boolean;\n}\n\nexport const ComboboxInput = (props: ComboboxInputProps) => {\n  const {\n    size = \"md\",\n    showTrigger = true,\n    showClear = false,\n    className,\n    children,\n    ...rest\n  } = props;\n\n  const { inputValue } = useCombobox();\n\n  return (\n    <ComboboxControl data-size={size}>\n      <InputGroup className={cn(className)} size={size}>\n        {children}\n        <ArkCombobox.Input asChild>\n          <InputGroupInput {...rest} />\n        </ArkCombobox.Input>\n        <InputGroupAddon align=\"inline-end\">\n          {showTrigger && (\n            <ComboboxTrigger>\n              <InputGroupButton\n                className=\"group-has-data-[slot=combobox-clear]/input-group:hidden\"\n                size=\"icon-sm\"\n                slot=\"combobox-trigger\"\n                variant=\"ghost\"\n              >\n                <ChevronsUpDownIcon />\n              </InputGroupButton>\n            </ComboboxTrigger>\n          )}\n          {showClear && inputValue && (\n            <ComboboxClear asChild>\n              <InputGroupButton\n                size=\"icon-sm\"\n                slot=\"combobox-clear\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </InputGroupButton>\n            </ComboboxClear>\n          )}\n        </InputGroupAddon>\n      </InputGroup>\n    </ComboboxControl>\n  );\n};\n\nexport const ComboboxTrigger = (\n  props: React.ComponentProps<typeof ArkCombobox.Trigger>\n) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <ArkCombobox.Trigger\n      // **No positioning of its own, and the `absolute inset-e-1 inset-y-0` it carried was inert.**\n      // Both compositions lay it out already: `Combobox` puts it in an `InputGroupAddon`, and a\n      // caller composing by hand drops it into `ComboboxControl`, which is a `flex items-center`\n      // row. In the first, the `asChild` collapse merges it with `InputGroupButton`, whose base\n      // declares `relative` and wins — so the offsets resolved against nothing and the part was\n      // laid out as the flex child it looks like. Keeping a rule that only bites when a later merge\n      // stops overriding it is how a component acquires a bug it never had.\n      className={cn(className)}\n      {...rest}\n      asChild\n    >\n      {children ?? (\n        // **`icon-sm`, and it was `size-4`.** Measured 16×16 on `/docs/forms/combobox` — two thirds\n        // under the 24px WCAG 2.5.8 floor, and it only ever passed `pressable-floor.test.ts`\n        // because that guard grades a target by the last `size-*` it can see in source order. A\n        // size token rather than a literal, so it follows the control height with the rest.\n        <Button size=\"icon-sm\" slot=\"combobox-trigger\" variant=\"ghost\">\n          <ChevronsUpDownIcon />\n        </Button>\n      )}\n    </ArkCombobox.Trigger>\n  );\n};\n\nexport const ComboboxClear = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCombobox.ClearTrigger>) => (\n  <ArkCombobox.ClearTrigger {...rest} data-slot={slot ?? \"combobox-clear\"} />\n);\n\n/** Composable combobox input for custom controls (e.g. Tags Input). */\nexport const ComboboxFieldInput = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkCombobox.Input>\n) => <ArkCombobox.Input {...rest} data-slot={slot ?? \"combobox-field-input\"} />;\n\nexport const ComboboxPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCombobox.Positioner>) => (\n  <ArkCombobox.Positioner {...rest} data-slot={slot ?? \"combobox-positioner\"} />\n);\n\nexport const ComboboxContent = (\n  props: React.ComponentProps<typeof ArkCombobox.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ComboboxPositioner>\n        <ArkCombobox.Content\n          className={cn(\n            \"relative z-50\",\n            \"max-h-96 min-w-48\",\n            \"origin-(--transform-origin)\",\n            \"p-1\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"overflow-y-auto\",\n            \"outline-none\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=open]:zoom-in-[98%] data-[state=closed]:zoom-out-[98%]\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"combobox-content\"}\n        >\n          {children}\n        </ArkCombobox.Content>\n      </ComboboxPositioner>\n    </Portal>\n  );\n};\n\ninterface ComboboxGroupProps\n  extends React.ComponentProps<typeof ArkCombobox.ItemGroup> {\n  /**\n   * The heading of the group\n   */\n  heading?: string | React.ReactNode;\n}\n\nexport const ComboboxGroup = (props: ComboboxGroupProps) => {\n  const { heading, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.ItemGroup {...rest} data-slot={slot ?? \"combobox-group\"}>\n      {!!heading && <ComboboxGroupLabel>{heading}</ComboboxGroupLabel>}\n\n      {children}\n    </ArkCombobox.ItemGroup>\n  );\n};\n\nexport const ComboboxGroupLabel = (\n  props: React.ComponentProps<typeof ArkCombobox.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-semibold text-muted-foreground text-xs\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-group-label\"}\n    />\n  );\n};\n\nexport const comboboxItemVariants = tv({\n  base: [\n    \"relative\",\n    \"py-1.5 ps-2\",\n    \"text-sm\",\n    \"flex w-full items-center gap-2\",\n    \"rounded-box\",\n    \"select-none\",\n    \"cursor-default\",\n    \"outline-hidden\",\n    \"data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground\",\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  variants: {\n    showIndicator: {\n      true: \"pe-8\",\n      false: \"pe-2\",\n    },\n  },\n  defaultVariants: {\n    showIndicator: true,\n  },\n});\n\ninterface ComboboxItemProps\n  extends React.ComponentProps<typeof ArkCombobox.Item>,\n    VariantProps<typeof comboboxItemVariants> {}\n\nexport const ComboboxItem = (props: ComboboxItemProps) => {\n  const { showIndicator = true, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Item\n      className={cn(comboboxItemVariants({ showIndicator }), className)}\n      persistFocus\n      {...rest}\n      data-slot={slot ?? \"combobox-item\"}\n    >\n      {children}\n\n      {showIndicator ? (\n        <span className=\"absolute inset-e-2 flex size-3.5 items-center justify-center\">\n          <ArkCombobox.ItemIndicator data-slot=\"combobox-item-indicator\">\n            <CheckIcon />\n          </ArkCombobox.ItemIndicator>\n        </span>\n      ) : null}\n    </ArkCombobox.Item>\n  );\n};\n\nexport const ComboboxEmpty = (\n  props: React.ComponentProps<typeof ArkCombobox.Empty>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Empty\n      className={cn(\n        \"px-2 py-1.5\",\n        \"text-center text-muted-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"combobox-empty\"}\n    >\n      {children || \"No results found.\"}\n    </ArkCombobox.Empty>\n  );\n};\n\nexport const ComboboxList = (\n  props: React.ComponentProps<typeof ArkComboboxList>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.List\n      className={cn(\"flex flex-col\", className)}\n      {...rest}\n      data-slot={slot ?? \"combobox-list\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqBO;AAKL;AAAM;AACU;AACF;AACI;AAChB;AACG;AAGL;AACE;AAAa;AAAZ;AACC;AACA;AACA;AACI;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AA2BE;AAAM;AACG;AACO;AACF;AACZ;AACA;AACG;AAKL;AAGO;AAAA;AAGD;AAEG;AAEG;AAAC;AAAA;AACW;AACL;AACA;AACG;AAEY;AAAA;AAExB;AAIE;AAAC;AAAA;AACM;AACA;AACG;AAED;AAAA;AAEX;AAEJ;AAIR;AAKE;AAEA;AACE;AAAa;AAAZ;AAQwB;AACnB;AACG;AAEN;AAAA;AAAA;AAAA;AAOC;AAAA;AAIR;AAE8B;AAC5B;AAEF;AASmC;AACjC;AAEF;AAOE;AAEA;AAGM;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAKX;AAWE;AAEA;AAEK;AAA0C;AAE1C;AAGP;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAEuC;AAC/B;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACO;AACP;AACC;AAAA;AACT;AAEe;AACA;AAEnB;AAOE;AAEA;AACE;AAAa;AAAZ;AACiE;AACpD;AACR;AACe;AAElB;AAAA;AAQG;AAAA;AAAA;AAGV;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AAAA;AAEE;AACe;AAEN;AAAA;AAGnB;AAKE;AAEA;AACE;AAAa;AAAZ;AACyC;AACpC;AACe;AAAA;AAGzB;;;;;;;;;;;;;;;;;;;"}

package/dist/simples/date-picker.d.ts

@@ -3,12 +3,68 @@ import { default as React } from 'react';
 import { Calendar } from './calendar';
 import { Input, InputProps } from './input';
 export declare const useDatePicker: () => import('@ark-ui/react').UseDatePickerContext;
-export declare const DatePicker: (props: React.ComponentProps<typeof Calendar>) => React.JSX.Element;
+/**
+ * What the picker holds. `"day"` is a date; `"minute"` and `"second"` are a date **and** a time —
+ * one value, one input, one popover.
+ */
+export type DatePickerGranularity = "day" | "minute" | "second";
+export interface DatePickerProps extends React.ComponentProps<typeof Calendar> {
+    /**
+     * What the picker holds. With `"minute"` or `"second"` the value is a date **and** a time: the
+     * input is segmented — day, month, year, hour, minute in the locale's order and clock — so both can
+     * be typed from empty, picking a day keeps the time, a
+     * `DatePickerTimer` in the popover sets the time, and the popover stays open after a day is
+     * picked so the time can be set. The value is then a `CalendarDateTime` — build one with
+     * `parseDateTime` — and a day picked while there is none arrives at midnight.
+     *
+     * @default "day"
+     */
+    granularity?: DatePickerGranularity;
+}
+export declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
 export declare const DatePickerTrigger: (props: React.ComponentProps<typeof ArkDatePicker.Trigger>) => React.JSX.Element;
 interface DatePickerInputProps extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, "size">, InputProps {
 }
+/**
+ * The picker's field, and the calendar button beside it.
+ *
+ * In a date picker it is a text input that reads what is typed in the locale's date format. In one
+ * with a `granularity` it is **segmented** — day, month, year, hour, minute and, in a 12-hour
+ * locale, AM/PM, each its own editable part in the locale's order — because a date and a time cannot
+ * be typed as one string: Ark's date input admits only digits and the date separator, so a `:` or
+ * `PM` never gets in. The segments are Ark's `DateInput`, bound to the picker's value both ways.
+ */
 export declare const DatePickerInput: (props: DatePickerInputProps) => React.JSX.Element;
-export declare const DatePickerTimer: (props: React.ComponentProps<typeof Input>) => React.JSX.Element;
+export interface DatePickerTimerProps extends Omit<React.ComponentProps<typeof Input>, "size" | "step" | "type"> {
+    /**
+     * The control height, one of the shared sizes.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The step of the time input **in seconds**, as on `<input type="time">`: `60` shows hours and
+     * minutes, `1` adds seconds. Inside a `DatePicker` it follows the picker's `granularity`.
+     *
+     * @default 60
+     */
+    step?: number;
+}
+/**
+ * A time field: an `InputGroup` around `<input type="time">` with a clock addon.
+ *
+ * **Inside a `DatePicker`'s `DatePickerContent` it is the picker's time**, and the picker is one
+ * date-and-time field: the timer shows the hour and minute of the picker's value and setting it
+ * sets the picker's value, so the input above and the calendar beside it follow. Choosing a time
+ * before any date takes the day the calendar is showing. **Anywhere else it is a plain time input**
+ * you control with `value` and `onChange`.
+ *
+ * Props go where they read naturally: `size` and the field state (`disabled`, `invalid`, `readOnly`,
+ * `required`, taken from an ancestor `Field` unless given) apply to the field, `className` and every
+ * other prop go to the `<input>` itself — so `aria-label`, `name` and `onChange` do what they say.
+ * The group around it is `w-full`; size it with the element you put it in.
+ */
+export declare const DatePickerTimer: (props: DatePickerTimerProps) => React.JSX.Element;
 export declare const DatePickerContent: (props: React.ComponentProps<typeof ArkDatePicker.Content>) => React.JSX.Element;
 export declare const DatePickerValue: (props: React.ComponentProps<typeof ArkDatePicker.ValueText>) => React.JSX.Element;
 export declare const DatePickerPresetTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => React.JSX.Element;

package/dist/simples/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/simples/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,QAAQ,EAET,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAMlD,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAiBtE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBAqB1D,CAAC;AAEF,UAAU,oBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EACpE,UAAU;CAAG;AAEjB,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA0B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAqBxE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBA8B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,mBAGrC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,sBAK1D,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/simples/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AAcnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,QAAQ,EAET,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA6DhE,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC;IAC5E;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAMD,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAyDhD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBAqB1D,CAAC;AAEF,UAAU,oBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EACpE,UAAU;CAAG;AAEjB;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAG1D,CAAC;AAkGF,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1E;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAO1D,CAAC;AA2DF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBA8B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,mBAGrC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,sBAK1D,CAAC"}