@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/combobox.js

@@ -0,0 +1,230 @@
+"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 { 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 {
+    openOnClick: o = !0,
+    lazyMount: s = !0,
+    unmountOnExit: n = !0,
+    slot: r,
+    ...l
+  } = e;
+  return /* @__PURE__ */ t(
+    a.Root,
+    {
+      lazyMount: s,
+      openOnClick: o,
+      unmountOnExit: n,
+      ...l,
+      "data-slot": r ?? "combobox"
+    }
+  );
+}, w = (e) => {
+  const { className: o, slot: s, ...n } = e;
+  return /* @__PURE__ */ t(
+    a.Control,
+    {
+      className: c(
+        "group/combobox-control",
+        "relative flex flex-wrap items-center gap-1",
+        o
+      ),
+      ...n,
+      "data-slot": s ?? "combobox-control"
+    }
+  );
+}, M = (e) => {
+  const {
+    size: o = "md",
+    showTrigger: s = !0,
+    showClear: n = !1,
+    className: r,
+    children: l,
+    ...d
+  } = e, { inputValue: b } = 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__ */ i(v, { align: "inline-end", children: [
+      s && /* @__PURE__ */ t(
+        m,
+        {
+          asChild: !0,
+          className: "group-has-data-[slot=combobox-clear]/input-group:hidden",
+          size: "icon-sm",
+          variant: "ghost",
+          children: /* @__PURE__ */ t(y, {})
+        }
+      ),
+      n && b && /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(
+        m,
+        {
+          size: "icon-sm",
+          slot: "combobox-clear",
+          variant: "ghost",
+          children: /* @__PURE__ */ t(x, {})
+        }
+      ) })
+    ] })
+  ] }) });
+}, y = (e) => {
+  const { className: o, children: s, ...n } = e;
+  return /* @__PURE__ */ t(
+    a.Trigger,
+    {
+      className: c(o),
+      ...n,
+      asChild: !0,
+      children: s ?? // **`size-8`, 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, {}) })
+    }
+  );
+}, G = ({
+  slot: e,
+  ...o
+}) => /* @__PURE__ */ t(a.ClearTrigger, { ...o, "data-slot": e ?? "combobox-clear" }), R = ({ slot: e, ...o }) => /* @__PURE__ */ t(a.Input, { ...o, "data-slot": e ?? "combobox-field-input" }), k = ({
+  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(
+    a.Content,
+    {
+      className: c(
+        "relative z-50",
+        "max-h-96 min-w-48",
+        "origin-(--transform-origin)",
+        "p-1",
+        "bg-popover",
+        "text-popover-foreground",
+        "rounded-box border shadow-lg/5",
+        "overflow-y-auto",
+        "outline-none",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=open]:zoom-in-[98%] data-[state=closed]:zoom-out-[98%]",
+        "data-[placement=top]:slide-in-from-bottom-2",
+        "data-[placement=bottom]:slide-in-from-top-2",
+        "data-[placement=right]:slide-in-from-start-2",
+        "data-[placement=left]:slide-in-from-end-2",
+        "motion-reduce:animate-none!",
+        o
+      ),
+      ...r,
+      "data-slot": n ?? "combobox-content",
+      children: s
+    }
+  ) }) });
+}, X = (e) => {
+  const { heading: o, children: s, slot: n, ...r } = e;
+  return /* @__PURE__ */ i(a.ItemGroup, { ...r, "data-slot": n ?? "combobox-group", children: [
+    !!o && /* @__PURE__ */ t(L, { children: o }),
+    s
+  ] });
+}, L = (e) => {
+  const { className: o, slot: s, ...n } = e;
+  return /* @__PURE__ */ t(
+    a.ItemGroupLabel,
+    {
+      className: c(
+        "px-2 py-1.5 font-semibold text-muted-foreground text-xs",
+        o
+      ),
+      ...n,
+      "data-slot": s ?? "combobox-group-label"
+    }
+  );
+}, T = f({
+  base: [
+    "relative",
+    "py-1.5 ps-2",
+    "text-sm",
+    "flex w-full items-center gap-2",
+    "rounded-box",
+    "select-none",
+    "cursor-default",
+    "outline-hidden",
+    "data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
+    "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  variants: {
+    showIndicator: {
+      true: "pe-8",
+      false: "pe-2"
+    }
+  },
+  defaultVariants: {
+    showIndicator: !0
+  }
+}), $ = (e) => {
+  const { showIndicator: o = !0, className: s, children: n, slot: r, ...l } = e;
+  return /* @__PURE__ */ i(
+    a.Item,
+    {
+      className: c(T({ showIndicator: o }), s),
+      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
+      ]
+    }
+  );
+}, q = (e) => {
+  const { className: o, children: s, slot: n, ...r } = e;
+  return /* @__PURE__ */ t(
+    a.Empty,
+    {
+      className: c(
+        "px-2 py-1.5",
+        "text-center text-muted-foreground text-sm",
+        o
+      ),
+      ...r,
+      "data-slot": n ?? "combobox-empty",
+      children: s || "No results found."
+    }
+  );
+}, H = (e) => {
+  const { className: o, slot: s, ...n } = e;
+  return /* @__PURE__ */ t(
+    a.List,
+    {
+      className: c("flex flex-col", o),
+      ...n,
+      "data-slot": s ?? "combobox-list"
+    }
+  );
+};
+export {
+  D as Combobox,
+  G as ComboboxClear,
+  U as ComboboxContent,
+  A as ComboboxContext,
+  w as ComboboxControl,
+  q as ComboboxEmpty,
+  R as ComboboxFieldInput,
+  X as ComboboxGroup,
+  L as ComboboxGroupLabel,
+  M as ComboboxInput,
+  $ as ComboboxItem,
+  H as ComboboxList,
+  k as ComboboxPositioner,
+  y as ComboboxTrigger,
+  T as comboboxItemVariants,
+  z as useCombobox
+};
+//# sourceMappingURL=combobox.js.map

package/dist/simples/combobox.js.map

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

package/dist/simples/command.d.ts

@@ -0,0 +1,45 @@
+import { Combobox as ArkCombobox } from '@ark-ui/react/combobox';
+import { Dialog as ArkDialog } from '@ark-ui/react/dialog';
+import { default as React } from 'react';
+import { ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxList } from './combobox';
+import { DialogContent } from './dialog';
+import { InputProps } from './input';
+import { MenuShortcut } from './menu';
+export declare const CommandDialog: (props: React.ComponentProps<typeof ArkDialog.Root>) => React.JSX.Element;
+interface CommandDialogContentProps extends React.ComponentProps<typeof DialogContent> {
+    /**
+     * The description of the dialog
+     *
+     * @default "Search for a command to run..."
+     */
+    description?: string;
+    /**
+     * The title of the dialog
+     *
+     * @default "Command Palette"
+     */
+    title?: string;
+}
+export declare const CommandDialogContent: (props: CommandDialogContentProps) => React.JSX.Element;
+export declare const Command: ArkCombobox.RootComponent;
+interface CommandInputProps extends Omit<React.ComponentProps<typeof ArkCombobox.Input>, "size"> {
+    /**
+     * The size of the input
+     *
+     * @default "md"
+     */
+    size?: InputProps["size"];
+}
+export declare const CommandContent: (props: React.ComponentProps<typeof ArkCombobox.Content>) => React.JSX.Element;
+export declare const CommandInput: (props: CommandInputProps) => React.JSX.Element;
+interface CommandListProps extends React.ComponentProps<typeof ComboboxList> {
+}
+export declare const CommandList: (props: CommandListProps) => React.JSX.Element;
+export declare const CommandEmpty: (props: React.ComponentProps<typeof ComboboxEmpty>) => React.JSX.Element;
+export declare const CommandGroup: ({ slot, ...rest }: React.ComponentProps<typeof ComboboxGroup>) => React.JSX.Element;
+export declare const CommandItem: (props: React.ComponentProps<typeof ComboboxItem>) => React.JSX.Element;
+export declare const CommandSeparator: (props: React.ComponentProps<"div">) => React.JSX.Element;
+export declare const CommandShortcut: ({ slot, ...rest }: React.ComponentProps<typeof MenuShortcut>) => React.JSX.Element;
+export declare const CommandFooter: (props: React.ComponentProps<"div">) => React.JSX.Element;
+export {};
+//# sourceMappingURL=command.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/simples/command.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,aAAa,EACb,aAAa,EACb,KAAK,YAAY,EACjB,YAAY,EAEb,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAM1C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,eAAO,MAAM,aAAa,2EAAS,CAAC;AAIpC,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC;IAClD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,sBAqCpE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAAW,CAAC,aAyBjC,CAAC;AAEF,UAAU,iBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBAmBxD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAmBpD,CAAC;AAEF,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC;CAAG;AAE/E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAYlD,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,sBAalD,CAAC;AAIF,eAAO,MAAM,YAAY,GACvB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,sBACA,CAAC;AAEhE,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,sBAYjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAUlE,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,sBACG,CAAC;AAElE,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAiB/D,CAAC"}

package/dist/simples/command.js

@@ -0,0 +1,180 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { Portal as u } from "@ark-ui/react";
+import { Combobox as l } from "@ark-ui/react/combobox";
+import { Dialog as p } from "@ark-ui/react/dialog";
+import { SearchIcon as x } from "lucide-react";
+import { cn as s } from "../lib/cn.js";
+import { Combobox as h, ComboboxEmpty as f, ComboboxGroup as b, ComboboxControl as C, comboboxItemVariants as N, ComboboxList as g } from "./combobox.js";
+import { Dialog as y, DialogOverlay as v, DialogPositioner as I, DialogHeader as D, dialogContentVariants as S } from "./dialog.js";
+import { InputGroup as G, InputGroupAddon as w, InputGroupInput as z } from "./input-group.js";
+import { MenuShortcut as F } from "./menu.js";
+import { Separator as j } from "./separator.js";
+const q = y, J = (o) => {
+  const {
+    size: t = "lg",
+    title: a = "Command Palette",
+    description: r = "Search for a command to run...",
+    className: n,
+    children: c,
+    slot: d,
+    ...i
+  } = o;
+  return /* @__PURE__ */ m(u, { children: [
+    /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ e(I, { children: /* @__PURE__ */ m(
+      p.Content,
+      {
+        className: s(
+          "max-sm:row-start-1",
+          S({ size: t }),
+          "border-0 p-0",
+          n
+        ),
+        ...i,
+        "data-slot": d ?? "command-dialog-content",
+        children: [
+          /* @__PURE__ */ e(
+            D,
+            {
+              className: "sr-only",
+              description: r,
+              title: a
+            }
+          ),
+          c
+        ]
+      }
+    ) })
+  ] });
+}, K = (o) => {
+  const { lazyMount: t = !0, unmountOnExit: a = !0, className: r, ...n } = o;
+  return /* @__PURE__ */ e(
+    h,
+    {
+      className: s(
+        "isolate",
+        "flex min-h-0 flex-1 flex-col",
+        "p-2",
+        "bg-popover",
+        "text-popover-foreground",
+        "rounded-2xl border",
+        r
+      ),
+      closeOnSelect: !1,
+      disableLayer: !0,
+      inputBehavior: "autohighlight",
+      lazyMount: t,
+      loopFocus: !1,
+      open: !0,
+      selectionBehavior: "clear",
+      unmountOnExit: a,
+      ...n
+    }
+  );
+}, Q = (o) => {
+  const { className: t, slot: a, ...r } = o;
+  return /* @__PURE__ */ e(
+    l.Content,
+    {
+      className: s(
+        "flex flex-1 flex-col",
+        "max-h-(--available-height) min-h-0",
+        "-me-2",
+        "outline-none",
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-foreground/20 overflow-auto overscroll-contain",
+        "[:not(.has-[+[data-slot=command-footer]])]:rounded-b-2xl [:not(.has-[+[data-slot=command-footer]])]:border-b",
+        t
+      ),
+      ...r,
+      "data-slot": a ?? "command-content"
+    }
+  );
+}, R = (o) => {
+  const { size: t = "md", className: a, ...r } = o;
+  return /* @__PURE__ */ e(C, { className: "mb-2", children: /* @__PURE__ */ m(
+    G,
+    {
+      className: s("rounded-xl bg-field", a),
+      size: t,
+      ...r,
+      children: [
+        /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(x, { "aria-hidden": !0, className: "opacity-64" }) }),
+        /* @__PURE__ */ e(l.Input, { asChild: !0, children: /* @__PURE__ */ e(z, { autoFocus: !0, slot: "command-input" }) })
+      ]
+    }
+  ) });
+}, T = (o) => {
+  const { className: t, slot: a, ...r } = o;
+  return /* @__PURE__ */ e("div", { className: "max-h-72 min-h-0 flex-1", children: /* @__PURE__ */ e(
+    g,
+    {
+      className: s("flex-1 pe-2.5", t),
+      ...r,
+      slot: a ?? "command-list"
+    }
+  ) });
+}, U = (o) => {
+  const { className: t, children: a, slot: r, ...n } = o;
+  return /* @__PURE__ */ e(
+    f,
+    {
+      className: s("py-6 text-center text-sm", t),
+      ...n,
+      slot: r ?? "command-empty",
+      children: a || "No results found."
+    }
+  );
+}, W = ({ slot: o, ...t }) => /* @__PURE__ */ e(b, { ...t, slot: o ?? "command-group" }), X = (o) => {
+  const { className: t, slot: a, ...r } = o;
+  return /* @__PURE__ */ e(
+    l.Item,
+    {
+      className: s(N({ showIndicator: !1 }), t),
+      persistFocus: !0,
+      ...r,
+      "data-slot": a ?? "command-item"
+    }
+  );
+}, Y = (o) => {
+  const { className: t, slot: a, ...r } = o;
+  return /* @__PURE__ */ e(
+    j,
+    {
+      className: s("my-2", t),
+      ...r,
+      slot: a ?? "command-separator"
+    }
+  );
+}, Z = ({ slot: o, ...t }) => /* @__PURE__ */ e(F, { ...t, slot: o ?? "command-shortcut" }), _ = (o) => {
+  const { className: t, slot: a, ...r } = o;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: s(
+        "z-10",
+        "flex items-center justify-between gap-2",
+        "-m-2 mt-2 px-4 py-3",
+        "text-muted-foreground text-xs",
+        "rounded-b-[calc(var(--radius-2xl,1rem)-1px)] border-t",
+        t
+      ),
+      ...r,
+      "data-slot": a ?? "command-footer"
+    }
+  );
+};
+export {
+  K as Command,
+  Q as CommandContent,
+  q as CommandDialog,
+  J as CommandDialogContent,
+  U as CommandEmpty,
+  _ as CommandFooter,
+  W as CommandGroup,
+  R as CommandInput,
+  X as CommandItem,
+  T as CommandList,
+  Y as CommandSeparator,
+  Z as CommandShortcut
+};
+//# sourceMappingURL=command.js.map

package/dist/simples/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sources":["../../src/simples/command.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport { Combobox as ArkCombobox } from \"@ark-ui/react/combobox\";\nimport { Dialog as ArkDialog } from \"@ark-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  Combobox,\n  ComboboxControl,\n  ComboboxEmpty,\n  ComboboxGroup,\n  type ComboboxItem,\n  ComboboxList,\n  comboboxItemVariants,\n} from \"./combobox\";\nimport {\n  Dialog,\n  type DialogContent,\n  DialogHeader,\n  DialogOverlay,\n  DialogPositioner,\n  dialogContentVariants,\n} from \"./dialog\";\nimport type { InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"./input-group\";\nimport { MenuShortcut } from \"./menu\";\nimport { Separator } from \"./separator\";\n\nexport const CommandDialog = Dialog;\n\n// `CommandDialog` *is* `Dialog`, so its trigger is `DialogTrigger` — a renamed alias only made\n// the two look like different machines.\ninterface CommandDialogContentProps\n  extends React.ComponentProps<typeof DialogContent> {\n  /**\n   * The description of the dialog\n   *\n   * @default \"Search for a command to run...\"\n   */\n  description?: string;\n  /**\n   * The title of the dialog\n   *\n   * @default \"Command Palette\"\n   */\n  title?: string;\n}\n\nexport const CommandDialogContent = (props: CommandDialogContentProps) => {\n  const {\n    size = \"lg\",\n    title = \"Command Palette\",\n    description = \"Search for a command to run...\",\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Portal>\n      <DialogOverlay />\n\n      <DialogPositioner>\n        <ArkDialog.Content\n          className={cn(\n            \"max-sm:row-start-1\",\n            dialogContentVariants({ size }),\n            \"border-0 p-0\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"command-dialog-content\"}\n        >\n          <DialogHeader\n            className=\"sr-only\"\n            description={description}\n            title={title}\n          />\n\n          {children}\n        </ArkDialog.Content>\n      </DialogPositioner>\n    </Portal>\n  );\n};\n\nexport const Command: ArkCombobox.RootComponent = (props) => {\n  const { lazyMount = true, unmountOnExit = true, className, ...rest } = props;\n\n  return (\n    <Combobox\n      className={cn(\n        \"isolate\",\n        \"flex min-h-0 flex-1 flex-col\",\n        \"p-2\",\n        \"bg-popover\",\n        \"text-popover-foreground\",\n        \"rounded-2xl border\",\n        className\n      )}\n      closeOnSelect={false}\n      disableLayer\n      inputBehavior=\"autohighlight\"\n      lazyMount={lazyMount}\n      loopFocus={false}\n      open\n      selectionBehavior=\"clear\"\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\ninterface CommandInputProps\n  extends Omit<React.ComponentProps<typeof ArkCombobox.Input>, \"size\"> {\n  /**\n   * The size of the input\n   *\n   * @default \"md\"\n   */\n  size?: InputProps[\"size\"];\n}\n\nexport const CommandContent = (\n  props: React.ComponentProps<typeof ArkCombobox.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Content\n      className={cn(\n        \"flex flex-1 flex-col\",\n        \"max-h-(--available-height) min-h-0\",\n        \"-me-2\",\n        \"outline-none\",\n        \"scrollbar-thin scrollbar-track-transparent scrollbar-thumb-foreground/20 overflow-auto overscroll-contain\",\n        \"[:not(.has-[+[data-slot=command-footer]])]:rounded-b-2xl [:not(.has-[+[data-slot=command-footer]])]:border-b\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"command-content\"}\n    />\n  );\n};\n\nexport const CommandInput = (props: CommandInputProps) => {\n  const { size = \"md\", className, ...rest } = props;\n\n  return (\n    <ComboboxControl className=\"mb-2\">\n      <InputGroup\n        className={cn(\"rounded-xl bg-field\", className)}\n        size={size}\n        {...rest}\n      >\n        <InputGroupAddon>\n          <SearchIcon aria-hidden className=\"opacity-64\" />\n        </InputGroupAddon>\n        <ArkCombobox.Input asChild>\n          <InputGroupInput autoFocus slot=\"command-input\" />\n        </ArkCombobox.Input>\n      </InputGroup>\n    </ComboboxControl>\n  );\n};\n\ninterface CommandListProps extends React.ComponentProps<typeof ComboboxList> {}\n\nexport const CommandList = (props: CommandListProps) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <div className=\"max-h-72 min-h-0 flex-1\">\n      <ComboboxList\n        className={cn(\"flex-1 pe-2.5\", className)}\n        {...rest}\n        slot={slot ?? \"command-list\"}\n      />\n    </div>\n  );\n};\n\nexport const CommandEmpty = (\n  props: React.ComponentProps<typeof ComboboxEmpty>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ComboboxEmpty\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...rest}\n      slot={slot ?? \"command-empty\"}\n    >\n      {children || \"No results found.\"}\n    </ComboboxEmpty>\n  );\n};\n\n// A group's label comes from `heading`, which `ComboboxGroup` renders itself — so the renamed\n// `CommandGroupLabel` was redundant twice over and is gone.\nexport const CommandGroup = (\n  { slot, ...rest }: React.ComponentProps<typeof ComboboxGroup>\n) => <ComboboxGroup {...rest} slot={slot ?? \"command-group\"} />;\n\nexport const CommandItem = (\n  props: React.ComponentProps<typeof ComboboxItem>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCombobox.Item\n      className={cn(comboboxItemVariants({ showIndicator: false }), className)}\n      persistFocus\n      {...rest}\n      data-slot={slot ?? \"command-item\"}\n    />\n  );\n};\n\nexport const CommandSeparator = (props: React.ComponentProps<\"div\">) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Separator\n      className={cn(\"my-2\", className)}\n      {...rest}\n      slot={slot ?? \"command-separator\"}\n    />\n  );\n};\n\nexport const CommandShortcut = (\n  { slot, ...rest }: React.ComponentProps<typeof MenuShortcut>\n) => <MenuShortcut {...rest} slot={slot ?? \"command-shortcut\"} />;\n\nexport const CommandFooter = (props: React.ComponentProps<\"div\">) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <div\n      className={cn(\n        \"z-10\",\n        \"flex items-center justify-between gap-2\",\n        \"-m-2 mt-2 px-4 py-3\",\n        \"text-muted-foreground text-xs\",\n        \"rounded-b-[calc(var(--radius-2xl,1rem)-1px)] border-t\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"command-footer\"}\n    />\n  );\n};\n"],"names":["CommandDialog","Dialog","CommandDialogContent","props","size","title","description","className","children","slot","rest","Portal","jsx","DialogOverlay","DialogPositioner","jsxs","ArkDialog","cn","dialogContentVariants","DialogHeader","Command","lazyMount","unmountOnExit","Combobox","CommandContent","ArkCombobox","CommandInput","ComboboxControl","InputGroup","InputGroupAddon","SearchIcon","InputGroupInput","CommandList","ComboboxList","CommandEmpty","ComboboxEmpty","CommandGroup","ComboboxGroup","CommandItem","comboboxItemVariants","CommandSeparator","Separator","CommandShortcut","MenuShortcut","CommandFooter"],"mappings":"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"}

package/dist/simples/data-list.d.ts

@@ -0,0 +1,25 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+export interface DataListProps extends React.ComponentProps<typeof ark.dl> {
+    /**
+     * Label beside the value, or above it.
+     *
+     * `horizontal` is Shark's default and reads as a table of two columns; `vertical` is what a
+     * narrow aside wants, where a 6rem label column would leave nothing for the value.
+     *
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}
+export declare const DataList: (props: DataListProps) => React.JSX.Element;
+/**
+ * One row, and the element the `dl` needs between itself and the pair.
+ *
+ * A `dl` may contain nothing but `dt`, `dd` and a `div` wrapping them, which is why this exists at
+ * all: anything else here — a `p` beside the value, a `span` for a message — is invalid HTML that
+ * every browser renders anyway. Put it inside {@link DataListItemValue}.
+ */
+export declare const DataListItem: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const DataListItemLabel: (props: React.ComponentProps<typeof ark.dt>) => React.JSX.Element;
+export declare const DataListItemValue: (props: React.ComponentProps<typeof ark.dd>) => React.JSX.Element;
+//# sourceMappingURL=data-list.d.ts.map

package/dist/simples/data-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list.d.ts","sourceRoot":"","sources":["../../src/simples/data-list.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC;IACxE;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAW5C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAevE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAe3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAU3E,CAAC"}

package/dist/simples/data-list.js

@@ -0,0 +1,62 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ark as i } from "@ark-ui/react/factory";
+import { cn as l } from "../lib/cn.js";
+const c = (t) => {
+  const { orientation: a = "horizontal", className: o, slot: s, ...r } = t;
+  return /* @__PURE__ */ e(
+    i.dl,
+    {
+      className: l("group/data-list", "flex flex-col gap-1", "text-sm", o),
+      "data-orientation": a,
+      ...r,
+      "data-slot": s ?? "data-list"
+    }
+  );
+}, u = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    i.div,
+    {
+      className: l(
+        "flex gap-4 py-2",
+        "group-data-[orientation=horizontal]/data-list:flex-row group-data-[orientation=horizontal]/data-list:items-center",
+        "group-data-[orientation=vertical]/data-list:flex-col group-data-[orientation=vertical]/data-list:gap-1",
+        a
+      ),
+      ...s,
+      "data-slot": o ?? "data-list-item"
+    }
+  );
+}, p = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    i.dt,
+    {
+      className: l(
+        "min-w-24 shrink-0",
+        "font-medium text-muted-foreground",
+        "group-data-[orientation=vertical]/data-list:min-w-0",
+        a
+      ),
+      ...s,
+      "data-slot": o ?? "data-list-item-label"
+    }
+  );
+}, f = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    i.dd,
+    {
+      className: l("flex-1", "text-foreground", a),
+      ...s,
+      "data-slot": o ?? "data-list-item-value"
+    }
+  );
+};
+export {
+  c as DataList,
+  u as DataListItem,
+  p as DataListItemLabel,
+  f as DataListItemValue
+};
+//# sourceMappingURL=data-list.js.map

package/dist/simples/data-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list.js","sources":["../../src/simples/data-list.tsx"],"sourcesContent":["// A record read back: label · value, as a real `<dl>`. Presentational (`ark.*`), no client\n// boundary.\n//\n// Shark's `data-list.tsx`, adopted verbatim in structure and class list. It was UNADOPTED with the\n// reason \"no renderer in the library or the docs\" until two appeared at once — the graph\n// inspector's node properties and the field-notes showcase's slip record, both of which had\n// hand-written the same `dl` / `div` / `dt` / `dd` tree with the same three utility classes.\n//\n// The one thing to understand before using it: `orientation` is a `data-` attribute on the ROOT and\n// every child styles off `group-data-[orientation=…]`, so a mixed list is not expressible — which is\n// right. A record whose rows sometimes stack and sometimes sit side by side is two records.\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface DataListProps extends React.ComponentProps<typeof ark.dl> {\n  /**\n   * Label beside the value, or above it.\n   *\n   * `horizontal` is Shark's default and reads as a table of two columns; `vertical` is what a\n   * narrow aside wants, where a 6rem label column would leave nothing for the value.\n   *\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const DataList = (props: DataListProps) => {\n  const { orientation = \"horizontal\", className, slot, ...rest } = props;\n\n  return (\n    <ark.dl\n      className={cn(\"group/data-list\", \"flex flex-col gap-1\", \"text-sm\", className)}\n      data-orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"data-list\"}\n    />\n  );\n};\n\n/**\n * One row, and the element the `dl` needs between itself and the pair.\n *\n * A `dl` may contain nothing but `dt`, `dd` and a `div` wrapping them, which is why this exists at\n * all: anything else here — a `p` beside the value, a `span` for a message — is invalid HTML that\n * every browser renders anyway. Put it inside {@link DataListItemValue}.\n */\nexport const DataListItem = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex gap-4 py-2\",\n        \"group-data-[orientation=horizontal]/data-list:flex-row group-data-[orientation=horizontal]/data-list:items-center\",\n        \"group-data-[orientation=vertical]/data-list:flex-col group-data-[orientation=vertical]/data-list:gap-1\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"data-list-item\"}\n    />\n  );\n};\n\nexport const DataListItemLabel = (props: React.ComponentProps<typeof ark.dt>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.dt\n      className={cn(\n        \"min-w-24 shrink-0\",\n        \"font-medium text-muted-foreground\",\n        \"group-data-[orientation=vertical]/data-list:min-w-0\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"data-list-item-label\"}\n    />\n  );\n};\n\nexport const DataListItemValue = (props: React.ComponentProps<typeof ark.dd>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.dd\n      className={cn(\"flex-1\", \"text-foreground\", className)}\n      {...rest}\n      data-slot={slot ?? \"data-list-item-value\"}\n    />\n  );\n};\n"],"names":["DataList","props","orientation","className","slot","rest","jsx","ark","cn","DataListItem","DataListItemLabel","DataListItemValue"],"mappings":";;;AA4BO,MAAMA,IAAW,CAACC,MAAyB;AAChD,QAAM,EAAE,aAAAC,IAAc,cAAc,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAEjE,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,mBAAmB,uBAAuB,WAAWL,CAAS;AAAA,MAC5E,oBAAkBD;AAAA,MACjB,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GASaK,IAAe,CAACR,MAAgD;AAC3E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAoB,CAACT,MAA+C;AAC/E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaO,IAAoB,CAACV,MAA+C;AAC/E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,UAAU,mBAAmBL,CAAS;AAAA,MACnD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

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

@@ -0,0 +1,16 @@
+import { DatePicker as ArkDatePicker } from '@ark-ui/react/date-picker';
+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;
+export declare const DatePickerTrigger: (props: React.ComponentProps<typeof ArkDatePicker.Trigger>) => React.JSX.Element;
+interface DatePickerInputProps extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, "size">, InputProps {
+}
+export declare const DatePickerInput: (props: DatePickerInputProps) => React.JSX.Element;
+export declare const DatePickerTimer: (props: React.ComponentProps<typeof Input>) => 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;
+export {};
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/simples/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AAGnC,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;AAElD,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAWtE,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"}