@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/json-tree-view.d.ts

@@ -0,0 +1,7 @@
+import { JsonTreeView as ArkJsonTreeView } from '@ark-ui/react/json-tree-view';
+interface JsonTreeViewProps extends React.ComponentProps<typeof ArkJsonTreeView.Root> {
+    renderValue?: React.ComponentProps<typeof ArkJsonTreeView.Tree>["renderValue"];
+}
+export declare const JsonTreeView: (props: JsonTreeViewProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=json-tree-view.d.ts.map

package/dist/simples/json-tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree-view.d.ts","sourceRoot":"","sources":["../../src/simples/json-tree-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI/E,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAChC,OAAO,eAAe,CAAC,IAAI,CAC5B,CAAC,aAAa,CAAC,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAyCpD,CAAC"}

package/dist/simples/json-tree-view.js

@@ -0,0 +1,71 @@
+import { jsx as t } from "react/jsx-runtime";
+import { JsonTreeView as d } from "@ark-ui/react/json-tree-view";
+import { ChevronRightIcon as l } from "lucide-react";
+import { cn as i } from "../lib/cn.js";
+const u = (a) => {
+  const {
+    lazyMount: e = !0,
+    unmountOnExit: r = !0,
+    className: n,
+    renderValue: o,
+    slot: c,
+    ...p
+  } = a;
+  return /* @__PURE__ */ t(
+    d.Root,
+    {
+      className: i(
+        "w-full min-w-0",
+        "font-mono text-foreground",
+        "**:data-[part=branch-content]:relative",
+        "**:data-[part=branch-indent-guide]:absolute **:data-[part=branch-indent-guide]:inset-s-[calc((var(--depth)-1)*1rem)] **:data-[part=branch-indent-guide]:h-full **:data-[part=branch-indent-guide]:w-px **:data-[part=branch-indent-guide]:bg-border",
+        "**:data-[part=branch-control]:flex **:data-[part=branch-control]:min-w-0 **:data-[part=branch-control]:max-w-full **:data-[part=branch-control]:select-none **:data-[part=branch-control]:overflow-hidden **:data-[part=branch-control]:ps-[calc((var(--depth)-1)*0.75rem)]",
+        "**:data-[part=branch-control]:rounded-md **:data-[part=branch-control]:px-2",
+        "**:data-[part=branch-control]:hover:bg-muted",
+        "**:data-[part=branch-indicator]:me-1 **:data-[part=branch-indicator]:inline-flex **:data-[part=branch-indicator]:shrink-0 **:data-[part=branch-indicator]:origin-center **:data-[part=branch-indicator]:items-center **:data-[part=branch-indicator]:justify-center [&_[data-part=branch-indicator][data-state=open]]:rotate-90",
+        "**:data-[part=item]:relative **:data-[part=item]:flex **:data-[part=item]:min-w-0 **:data-[part=item]:max-w-full **:data-[part=item]:overflow-hidden **:data-[part=item]:rounded-md **:data-[part=item]:ps-[calc(((var(--depth)-1)*0.75rem)+0.75rem)]",
+        "**:data-[part=item]:hover:bg-muted",
+        "**:data-[part=item-text]:flex **:data-[part=item-text]:min-w-0 **:data-[part=item-text]:max-w-full **:data-[part=item-text]:flex-1 **:data-[part=item-text]:items-baseline **:data-[part=item-text]:overflow-hidden",
+        "**:data-[part=branch-text]:flex **:data-[part=branch-text]:min-w-0 **:data-[part=branch-text]:max-w-full **:data-[part=branch-text]:flex-1 **:data-[part=branch-text]:items-baseline **:data-[part=branch-text]:overflow-hidden",
+        "[&_[data-part=item-text]>[data-kind=key]]:min-w-0 [&_[data-part=item-text]>[data-kind=key]]:max-w-[40%] [&_[data-part=item-text]>[data-kind=key]]:shrink [&_[data-part=item-text]>[data-kind=key]]:truncate",
+        "[&_[data-part=item-text]>[data-kind=colon]]:shrink-0",
+        "[&_[data-part=item-text]>[data-kind=preview]]:min-w-0 [&_[data-part=item-text]>[data-kind=preview]]:flex-1 [&_[data-part=item-text]>[data-kind=preview]]:truncate",
+        "[&_[data-part=branch-text]>[data-kind=key]]:min-w-0 [&_[data-part=branch-text]>[data-kind=key]]:max-w-[40%] [&_[data-part=branch-text]>[data-kind=key]]:shrink [&_[data-part=branch-text]>[data-kind=key]]:truncate",
+        "[&_[data-part=branch-text]>[data-kind=colon]]:shrink-0",
+        "[&_[data-part=branch-text]>[data-kind=preview]]:min-w-0 [&_[data-part=branch-text]>[data-kind=preview]]:flex-1 [&_[data-part=branch-text]>[data-kind=preview]]:truncate",
+        n
+      ),
+      lazyMount: e,
+      unmountOnExit: r,
+      ...p,
+      "data-slot": c ?? "json-tree-view",
+      children: /* @__PURE__ */ t(m, { renderValue: o })
+    }
+  );
+}, m = (a) => {
+  const { className: e, slot: r, ...n } = a;
+  return /* @__PURE__ */ t(
+    d.Tree,
+    {
+      arrow: /* @__PURE__ */ t(l, {}),
+      className: i(
+        "flex w-full min-w-0 flex-col **:gap-1",
+        "text-muted-foreground text-xs leading-7",
+        "[&_svg]:size-4",
+        "**:data-[type=string]:text-success",
+        "**:data-[type=number]:text-info",
+        "**:data-[type=boolean]:font-semibold **:data-[type=boolean]:text-warning",
+        "**:data-[type=null]:font-semibold **:data-[type=null]:text-muted-foreground **:data-[type=null]:italic",
+        "**:data-[kind=key]:font-medium **:data-[kind=key]:text-foreground",
+        "**:data-[kind=colon]:mx-1 **:data-[kind=colon]:text-muted-foreground",
+        e
+      ),
+      ...n,
+      "data-slot": r ?? "json-tree-view-tree"
+    }
+  );
+};
+export {
+  u as JsonTreeView
+};
+//# sourceMappingURL=json-tree-view.js.map

package/dist/simples/json-tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree-view.js","sources":["../../src/simples/json-tree-view.tsx"],"sourcesContent":["import { JsonTreeView as ArkJsonTreeView } from \"@ark-ui/react/json-tree-view\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\ninterface JsonTreeViewProps\n  extends React.ComponentProps<typeof ArkJsonTreeView.Root> {\n  renderValue?: React.ComponentProps<\n    typeof ArkJsonTreeView.Tree\n  >[\"renderValue\"];\n}\n\nexport const JsonTreeView = (props: JsonTreeViewProps) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    className,\n    renderValue,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkJsonTreeView.Root\n      className={cn(\n        \"w-full min-w-0\",\n        \"font-mono text-foreground\",\n        \"**:data-[part=branch-content]:relative\",\n        \"**:data-[part=branch-indent-guide]:absolute **:data-[part=branch-indent-guide]:inset-s-[calc((var(--depth)-1)*1rem)] **:data-[part=branch-indent-guide]:h-full **:data-[part=branch-indent-guide]:w-px **:data-[part=branch-indent-guide]:bg-border\",\n        \"**:data-[part=branch-control]:flex **:data-[part=branch-control]:min-w-0 **:data-[part=branch-control]:max-w-full **:data-[part=branch-control]:select-none **:data-[part=branch-control]:overflow-hidden **:data-[part=branch-control]:ps-[calc((var(--depth)-1)*0.75rem)]\",\n        \"**:data-[part=branch-control]:rounded-md **:data-[part=branch-control]:px-2\",\n        \"**:data-[part=branch-control]:hover:bg-muted\",\n        \"**:data-[part=branch-indicator]:me-1 **:data-[part=branch-indicator]:inline-flex **:data-[part=branch-indicator]:shrink-0 **:data-[part=branch-indicator]:origin-center **:data-[part=branch-indicator]:items-center **:data-[part=branch-indicator]:justify-center [&_[data-part=branch-indicator][data-state=open]]:rotate-90\",\n        \"**:data-[part=item]:relative **:data-[part=item]:flex **:data-[part=item]:min-w-0 **:data-[part=item]:max-w-full **:data-[part=item]:overflow-hidden **:data-[part=item]:rounded-md **:data-[part=item]:ps-[calc(((var(--depth)-1)*0.75rem)+0.75rem)]\",\n        \"**:data-[part=item]:hover:bg-muted\",\n        \"**:data-[part=item-text]:flex **:data-[part=item-text]:min-w-0 **:data-[part=item-text]:max-w-full **:data-[part=item-text]:flex-1 **:data-[part=item-text]:items-baseline **:data-[part=item-text]:overflow-hidden\",\n        \"**:data-[part=branch-text]:flex **:data-[part=branch-text]:min-w-0 **:data-[part=branch-text]:max-w-full **:data-[part=branch-text]:flex-1 **:data-[part=branch-text]:items-baseline **:data-[part=branch-text]:overflow-hidden\",\n        \"[&_[data-part=item-text]>[data-kind=key]]:min-w-0 [&_[data-part=item-text]>[data-kind=key]]:max-w-[40%] [&_[data-part=item-text]>[data-kind=key]]:shrink [&_[data-part=item-text]>[data-kind=key]]:truncate\",\n        \"[&_[data-part=item-text]>[data-kind=colon]]:shrink-0\",\n        \"[&_[data-part=item-text]>[data-kind=preview]]:min-w-0 [&_[data-part=item-text]>[data-kind=preview]]:flex-1 [&_[data-part=item-text]>[data-kind=preview]]:truncate\",\n        \"[&_[data-part=branch-text]>[data-kind=key]]:min-w-0 [&_[data-part=branch-text]>[data-kind=key]]:max-w-[40%] [&_[data-part=branch-text]>[data-kind=key]]:shrink [&_[data-part=branch-text]>[data-kind=key]]:truncate\",\n        \"[&_[data-part=branch-text]>[data-kind=colon]]:shrink-0\",\n        \"[&_[data-part=branch-text]>[data-kind=preview]]:min-w-0 [&_[data-part=branch-text]>[data-kind=preview]]:flex-1 [&_[data-part=branch-text]>[data-kind=preview]]:truncate\",\n        className\n      )}\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"json-tree-view\"}\n    >\n      <JsonTreeViewTree renderValue={renderValue} />\n    </ArkJsonTreeView.Root>\n  );\n};\n\nconst JsonTreeViewTree = (\n  props: React.ComponentProps<typeof ArkJsonTreeView.Tree>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkJsonTreeView.Tree\n      arrow={<ChevronRightIcon />}\n      className={cn(\n        \"flex w-full min-w-0 flex-col **:gap-1\",\n        \"text-muted-foreground text-xs leading-7\",\n        \"[&_svg]:size-4\",\n        \"**:data-[type=string]:text-success\",\n        \"**:data-[type=number]:text-info\",\n        \"**:data-[type=boolean]:font-semibold **:data-[type=boolean]:text-warning\",\n        \"**:data-[type=null]:font-semibold **:data-[type=null]:text-muted-foreground **:data-[type=null]:italic\",\n        \"**:data-[kind=key]:font-medium **:data-[kind=key]:text-foreground\",\n        \"**:data-[kind=colon]:mx-1 **:data-[kind=colon]:text-muted-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"json-tree-view-tree\"}\n    />\n  );\n};\n"],"names":["JsonTreeView","props","lazyMount","unmountOnExit","className","renderValue","slot","rest","jsx","ArkJsonTreeView","cn","JsonTreeViewTree","ChevronRightIcon"],"mappings":";;;;AAWO,MAAMA,IAAe,CAACC,MAA6B;AACxD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,WAAAF;AAAA,MACA,eAAAC;AAAA,MACC,GAAGI;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA,gBAAAE,EAACG,KAAiB,aAAAN,EAAA,CAA0B;AAAA,IAAA;AAAA,EAAA;AAGlD,GAEMM,IAAmB,CACvBV,MACG;AACH,QAAM,EAAE,WAAAG,GAAW,MAAAE,GAAM,GAAGC,MAASN;AAErC,SACE,gBAAAO;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,yBAAQG,GAAA,EAAiB;AAAA,MACzB,WAAWF;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/kbd.d.ts

@@ -0,0 +1,25 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const kbdVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        outline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface KbdProps extends React.ComponentProps<typeof ark.kbd>, VariantProps<typeof kbdVariants> {
+}
+export declare const Kbd: (props: KbdProps) => React.JSX.Element;
+export declare const KbdGroup: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/simples/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;qDAoBf,CAAC;AAEH,UAAU,QACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,WAAW,CAAC;CAAG;AAEvC,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAUlC,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAUnE,CAAC"}

package/dist/simples/kbd.js

@@ -0,0 +1,50 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ark as a } from "@ark-ui/react/factory";
+import { tv as d } from "tailwind-variants";
+import { cn as s } from "../lib/cn.js";
+const l = d({
+  base: [
+    "h-5 min-w-5",
+    "px-1",
+    "inline-flex items-center justify-center gap-1",
+    "select-none font-medium font-sans text-foreground text-xs",
+    "rounded-sm border border-transparent",
+    "pointer-events-none",
+    "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background",
+    "[&_svg:not([class*='size-'])]:size-3"
+  ],
+  variants: {
+    variant: {
+      default: "bg-muted",
+      outline: "border border-border"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), f = (t) => {
+  const { variant: e = "default", className: n, slot: o, ...i } = t;
+  return /* @__PURE__ */ r(
+    a.kbd,
+    {
+      className: s(l({ variant: e }), n),
+      ...i,
+      "data-slot": o ?? "kbd"
+    }
+  );
+}, p = (t) => {
+  const { className: e, slot: n, ...o } = t;
+  return /* @__PURE__ */ r(
+    a.div,
+    {
+      className: s("inline-flex items-center gap-1", e),
+      ...o,
+      "data-slot": n ?? "kbd-group"
+    }
+  );
+};
+export {
+  f as Kbd,
+  p as KbdGroup
+};
+//# sourceMappingURL=kbd.js.map

package/dist/simples/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sources":["../../src/simples/kbd.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\nconst kbdVariants = tv({\n  base: [\n    \"h-5 min-w-5\",\n    \"px-1\",\n    \"inline-flex items-center justify-center gap-1\",\n    \"select-none font-medium font-sans text-foreground text-xs\",\n    \"rounded-sm border border-transparent\",\n    \"pointer-events-none\",\n    \"in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background\",\n    \"[&_svg:not([class*='size-'])]:size-3\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-muted\",\n      outline: \"border border-border\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface KbdProps\n  extends React.ComponentProps<typeof ark.kbd>,\n    VariantProps<typeof kbdVariants> {}\n\nexport const Kbd = (props: KbdProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <ark.kbd\n      className={cn(kbdVariants({ variant }), className)}\n      {...rest}\n      data-slot={slot ?? \"kbd\"}\n    />\n  );\n};\n\nexport const KbdGroup = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"kbd-group\"}\n    />\n  );\n};\n"],"names":["kbdVariants","tv","Kbd","props","variant","className","slot","rest","jsx","ark","cn","KbdGroup"],"mappings":";;;;AAKA,MAAMA,IAAcC,EAAG;AAAA,EACrB,MAAM;AAAA,IACJ;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,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAMYC,IAAM,CAACC,MAAoB;AACtC,QAAM,EAAE,SAAAC,IAAU,WAAW,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAE1D,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGV,EAAY,EAAE,SAAAI,EAAA,CAAS,GAAGC,CAAS;AAAA,MAChD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAW,CAACR,MAAgD;AACvE,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,kCAAkCL,CAAS;AAAA,MACxD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/listbox.d.ts

@@ -0,0 +1,46 @@
+import { Listbox as ArkListbox } from '@ark-ui/react/listbox';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { inputVariants } from './input';
+import { MenuShortcut } from './menu';
+export declare const useListbox: () => import('@ark-ui/react').UseListboxContext<any>;
+export declare const Listbox: ArkListbox.RootComponent;
+export declare const ListboxLabel: (props: React.ComponentProps<typeof ArkListbox.Label>) => React.JSX.Element;
+export declare const ListboxValueText: (props: React.ComponentProps<typeof ArkListbox.ValueText>) => React.JSX.Element;
+interface ListboxInputProps extends Omit<React.ComponentProps<typeof ArkListbox.Input>, "size">, VariantProps<typeof inputVariants> {
+}
+export declare const ListboxInput: (props: ListboxInputProps) => React.JSX.Element;
+export declare const ListboxContent: (props: React.ComponentProps<typeof ArkListbox.Content>) => React.JSX.Element;
+declare const listboxItemVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface ListboxItemProps extends React.ComponentProps<typeof ArkListbox.Item>, VariantProps<typeof listboxItemVariants> {
+}
+export declare const ListboxItem: (props: ListboxItemProps) => React.JSX.Element;
+export declare const ListboxItemText: (props: React.ComponentProps<typeof ArkListbox.ItemText>) => React.JSX.Element;
+export declare const ListboxItemIndicator: (props: React.ComponentProps<typeof ArkListbox.ItemIndicator>) => React.JSX.Element;
+interface ListboxItemGroupProps extends React.ComponentProps<typeof ArkListbox.ItemGroup> {
+    /**
+     * The heading of the listbox item group.
+     */
+    heading?: string;
+}
+export declare const ListboxItemGroup: (props: ListboxItemGroupProps) => React.JSX.Element;
+export declare const ListboxItemGroupLabel: (props: React.ComponentProps<typeof ArkListbox.ItemGroupLabel>) => React.JSX.Element;
+export declare const ListboxEmpty: (props: React.ComponentProps<typeof ArkListbox.Empty>) => React.JSX.Element;
+export declare const ListboxShortcut: ({ slot, ...rest }: React.ComponentProps<typeof MenuShortcut>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=listbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/simples/listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,UAAU,EAEtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,eAAO,MAAM,UAAU,sDAAoB,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,UAAU,CAAC,aAehC,CAAC;AAKF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,sBAerD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,SAAS,CAAC,sBAWzD,CAAC;AAEF,UAAU,iBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EACjE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAezC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAYpD,CAAC;AAMF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,sBAkBvD,CAAC;AAyBF,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;qDAgCvB,CAAC;AAEH,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,EAClD,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAkBlD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,QAAQ,CAAC,sBAiBxD,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,aAAa,CAAC,sBAmB7D,CAAC;AAEF,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,SAAS,CAAC;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAc5D,CAAC;AAKF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,cAAc,CAAC,sBAgB9D,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,sBAerD,CAAC;AAMF,eAAO,MAAM,eAAe,GAC1B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,sBACG,CAAC"}

package/dist/simples/listbox.js

@@ -0,0 +1,218 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { useListboxContext as d, Listbox as n } from "@ark-ui/react/listbox";
+import { CheckIcon as m } from "lucide-react";
+import { tv as x } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
+import { inputVariants as u } from "./input.js";
+import { MenuShortcut as b } from "./menu.js";
+const w = d, z = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Root,
+    {
+      className: l(
+        "w-full",
+        "flex flex-col gap-1.5",
+        "text-foreground",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox"
+    }
+  );
+}, V = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Label,
+    {
+      className: l(
+        "select-none font-medium text-sm leading-snug",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox-label"
+    }
+  );
+}, k = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ValueText,
+    {
+      className: l("font-normal", t),
+      ...o,
+      "data-slot": s ?? "listbox-value-text"
+    }
+  );
+}, C = (e) => {
+  const { size: t = "md", type: s = "text", className: o, slot: i, ...r } = e;
+  return /* @__PURE__ */ a(
+    n.Input,
+    {
+      className: l(u({ size: t }), o),
+      "data-size": t,
+      type: s,
+      ...r,
+      "data-slot": i ?? "listbox-input"
+    }
+  );
+}, G = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Content,
+    {
+      className: l(
+        "w-full",
+        "flex flex-col gap-1",
+        "outline-hidden",
+        "overflow-hidden",
+        "data-[orientation=horizontal]:max-h-none data-[orientation=horizontal]:flex-row",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox-content"
+    }
+  );
+}, p = x({
+  base: [
+    "group/listbox-item",
+    "relative",
+    "w-full",
+    "py-1.5 ps-2 pe-2",
+    "has-[[data-slot=listbox-item-indicator]]:pe-8",
+    "flex items-center gap-2",
+    "select-none text-base md:text-sm",
+    "rounded-lg",
+    "cursor-default",
+    "outline-hidden",
+    "in-[[data-slot=listbox-content]:has([data-slot=listbox-item-group-label])]:ps-4",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground"
+  ],
+  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"
+  }
+}), T = (e) => {
+  const {
+    variant: t = "default",
+    highlightOnHover: s = !0,
+    className: o,
+    slot: i,
+    ...r
+  } = e;
+  return /* @__PURE__ */ a(
+    n.Item,
+    {
+      className: l(p({ variant: t }), o),
+      "data-variant": t,
+      highlightOnHover: s,
+      ...r,
+      "data-slot": i ?? "listbox-item"
+    }
+  );
+}, _ = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ItemText,
+    {
+      className: l(
+        "min-w-0",
+        "flex-1",
+        "text-ellipsis whitespace-nowrap",
+        "overflow-hidden",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox-item-text"
+    }
+  );
+}, j = (e) => {
+  const { className: t, children: s, slot: o, ...i } = e;
+  return /* @__PURE__ */ a(
+    n.ItemIndicator,
+    {
+      className: l(
+        "absolute inset-e-2",
+        "flex size-4 shrink-0 items-center justify-center",
+        "zoom-in-95 fade-in-0 animate-in",
+        "motion-reduce:animate-none!",
+        t
+      ),
+      ...i,
+      "data-slot": o ?? "listbox-item-indicator",
+      children: s ?? /* @__PURE__ */ a(m, {})
+    }
+  );
+}, E = (e) => {
+  const { heading: t, className: s, children: o, slot: i, ...r } = e;
+  return /* @__PURE__ */ c(
+    n.ItemGroup,
+    {
+      className: l("flex flex-col gap-1", s),
+      ...r,
+      "data-slot": i ?? "listbox-item-group",
+      children: [
+        !!t && /* @__PURE__ */ a(f, { children: t }),
+        o
+      ]
+    }
+  );
+}, f = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.ItemGroupLabel,
+    {
+      className: l(
+        "px-2 py-1.5",
+        "font-semibold text-muted-foreground text-xs",
+        "pointer-events-none",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox-item-group-label"
+    }
+  );
+}, S = (e) => {
+  const { className: t, slot: s, ...o } = e;
+  return /* @__PURE__ */ a(
+    n.Empty,
+    {
+      className: l(
+        "px-2 py-1.5",
+        "text-center text-muted-foreground text-sm",
+        t
+      ),
+      ...o,
+      "data-slot": s ?? "listbox-empty"
+    }
+  );
+}, H = ({ slot: e, ...t }) => /* @__PURE__ */ a(b, { ...t, slot: e ?? "listbox-shortcut" });
+export {
+  z as Listbox,
+  G as ListboxContent,
+  S as ListboxEmpty,
+  C as ListboxInput,
+  T as ListboxItem,
+  E as ListboxItemGroup,
+  f as ListboxItemGroupLabel,
+  j as ListboxItemIndicator,
+  _ as ListboxItemText,
+  V as ListboxLabel,
+  H as ListboxShortcut,
+  k as ListboxValueText,
+  w as useListbox
+};
+//# sourceMappingURL=listbox.js.map

package/dist/simples/listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.js","sources":["../../src/simples/listbox.tsx"],"sourcesContent":["import {\n  Listbox as ArkListbox,\n  useListboxContext,\n} from \"@ark-ui/react/listbox\";\nimport { CheckIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { inputVariants } from \"./input\";\nimport { MenuShortcut } from \"./menu\";\n\nexport const useListbox = useListboxContext;\n\nexport const Listbox: ArkListbox.RootComponent = (props) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.Root\n      className={cn(\n        \"w-full\",\n        \"flex flex-col gap-1.5\",\n        \"text-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox\"}\n    />\n  );\n};\n\n// Not in Shark's file, but it is an Ark part (`Listbox.Label`) and the only way a\n// standalone listbox — one with no trigger to borrow a name from — gets an accessible\n// name: Ark points the content's `aria-labelledby` at it.\nexport const ListboxLabel = (\n  props: React.ComponentProps<typeof ArkListbox.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.Label\n      className={cn(\n        \"select-none font-medium text-sm leading-snug\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox-label\"}\n    />\n  );\n};\n\nexport const ListboxValueText = (\n  props: React.ComponentProps<typeof ArkListbox.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.ValueText\n      className={cn(\"font-normal\", className)}\n      {...rest}\n      data-slot={slot ?? \"listbox-value-text\"}\n    />\n  );\n};\n\ninterface ListboxInputProps\n  extends Omit<React.ComponentProps<typeof ArkListbox.Input>, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\n// Not in Shark's file, but it is an Ark part (`Listbox.Input`) and the only way a long list\n// grows a filter field without a second machine: nesting a `Combobox` inside the surface a\n// `Listbox` already lives in gives two machines one open-state and one positioner to fight\n// over. Styled from `inputVariants`, so a searchable listbox and a `Combobox` are the same\n// box.\n//\n// **The machine holds no input value and filters nothing.** There is no `inputValue` in\n// `@zag-js/listbox` and no `onInputValueChange`; `getInputProps` returns an uncontrolled\n// `<input>` whose whole job is ARIA (`aria-controls`, `aria-activedescendant`,\n// `aria-autocomplete=\"list\"`) plus forwarding keys to the content — ArrowUp/ArrowDown always,\n// Home/End and ArrowLeft/ArrowRight only under `keyboardPriority=\"navigate\"`, and Enter as a\n// click on the highlighted item. Narrowing the collection is entirely the caller's, exactly as\n// it is in `Combobox`, and rather more so.\nexport const ListboxInput = (props: ListboxInputProps) => {\n  const { size = \"md\", type = \"text\", className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.Input\n      className={cn(inputVariants({ size }), className)}\n      data-size={size}\n      type={type}\n      {...rest}\n      data-slot={slot ?? \"listbox-input\"}\n    />\n  );\n};\n\n// No portal, no positioner, no trigger: this is the inline list. It is placed by whoever\n// renders it — inside a `PopoverContent`, or straight into a panel — which is what lets one\n// component serve both. Height and scrolling belong to that caller too, so the base only\n// declares flow.\nexport const ListboxContent = (\n  props: React.ComponentProps<typeof ArkListbox.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.Content\n      className={cn(\n        \"w-full\",\n        \"flex flex-col gap-1\",\n        \"outline-hidden\",\n        \"overflow-hidden\",\n        \"data-[orientation=horizontal]:max-h-none data-[orientation=horizontal]:flex-row\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox-content\"}\n    />\n  );\n};\n\n// Divergence from Shark, declared: Shark's listbox item is its own look — `px-2.5 py-2`,\n// `rounded-box`, a checked background, `hover:` classes, a `text-primary` check. Ours is\n// `SelectItem`'s geometry instead, because the first consumer renders this listbox inside a\n// Popover alongside Selects, and two lists of options that sit a few pixels apart must not\n// disagree about row height, indent or where the check lives. Four concrete changes:\n//\n//  1. Geometry copied from `SelectItem`: `py-1.5 ps-2`, `rounded-lg`, `cursor-default`,\n//     `size-4` icons, and the same group-label indent rule.\n//  2. The end padding that reserves room for the check is conditional\n//     (`has-[…listbox-item-indicator]:pe-8`) — Shark's anatomy makes the indicator an\n//     optional child, so an item without one must not carry a dead 8-unit gutter. Ark marks\n//     an unselected indicator `hidden` rather than unmounting it, and `:has()` still matches\n//     a hidden element, so the padding does not flicker with selection.\n//  3. Hover is `highlightOnHover`, not a `hover:` class. Ark's select moves the *highlight*\n//     on pointer move, so exactly one row ever reads as active; a CSS `hover:` rule paints a\n//     second one whenever the pointer and the keyboard disagree. Pass\n//     `highlightOnHover={false}` in `selectionMode=\"extended\"`, where the highlight doubles\n//     as the shift-click anchor.\n//  4. No `data-[state=checked]` background — the check mark is the selected affordance here,\n//     as it is in Select.\n//\n// The `destructive` variant is Shark's, kept as-is: Select has no equivalent to match, and\n// the variant costs the default appearance nothing.\nconst listboxItemVariants = tv({\n  base: [\n    \"group/listbox-item\",\n    \"relative\",\n    \"w-full\",\n    \"py-1.5 ps-2 pe-2\",\n    \"has-[[data-slot=listbox-item-indicator]]:pe-8\",\n    \"flex items-center gap-2\",\n    \"select-none text-base md:text-sm\",\n    \"rounded-lg\",\n    \"cursor-default\",\n    \"outline-hidden\",\n    \"in-[[data-slot=listbox-content]:has([data-slot=listbox-item-group-label])]:ps-4\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground\",\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 ListboxItemProps\n  extends React.ComponentProps<typeof ArkListbox.Item>,\n    VariantProps<typeof listboxItemVariants> {}\n\nexport const ListboxItem = (props: ListboxItemProps) => {\n  const {\n    variant = \"default\",\n    highlightOnHover = true,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkListbox.Item\n      className={cn(listboxItemVariants({ variant }), className)}\n      data-variant={variant}\n      highlightOnHover={highlightOnHover}\n      {...rest}\n      data-slot={slot ?? \"listbox-item\"}\n    />\n  );\n};\n\nexport const ListboxItemText = (\n  props: React.ComponentProps<typeof ArkListbox.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.ItemText\n      className={cn(\n        \"min-w-0\",\n        \"flex-1\",\n        \"text-ellipsis whitespace-nowrap\",\n        \"overflow-hidden\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox-item-text\"}\n    />\n  );\n};\n\n// Absolutely placed at the item's end edge, over the gutter `pe-8` reserves — the same\n// position `SelectItem` puts its check in, so the two lists line up.\nexport const ListboxItemIndicator = (\n  props: React.ComponentProps<typeof ArkListbox.ItemIndicator>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.ItemIndicator\n      className={cn(\n        \"absolute inset-e-2\",\n        \"flex size-4 shrink-0 items-center justify-center\",\n        \"zoom-in-95 fade-in-0 animate-in\",\n        \"motion-reduce:animate-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox-item-indicator\"}\n    >\n      {children ?? <CheckIcon />}\n    </ArkListbox.ItemIndicator>\n  );\n};\n\ninterface ListboxItemGroupProps\n  extends React.ComponentProps<typeof ArkListbox.ItemGroup> {\n  /**\n   * The heading of the listbox item group.\n   */\n  heading?: string;\n}\n\nexport const ListboxItemGroup = (props: ListboxItemGroupProps) => {\n  const { heading, className, children, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.ItemGroup\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"listbox-item-group\"}\n    >\n      {!!heading && <ListboxItemGroupLabel>{heading}</ListboxItemGroupLabel>}\n\n      {children}\n    </ArkListbox.ItemGroup>\n  );\n};\n\n// Typography from `SelectGroupLabel`, not Shark's `px-2.5 py-2` — the item above already\n// borrows Select's rhythm, and a heading a size larger than the rows it heads is the one\n// place the two lists would still read as different components.\nexport const ListboxItemGroupLabel = (\n  props: React.ComponentProps<typeof ArkListbox.ItemGroupLabel>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.ItemGroupLabel\n      className={cn(\n        \"px-2 py-1.5\",\n        \"font-semibold text-muted-foreground text-xs\",\n        \"pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"listbox-item-group-label\"}\n    />\n  );\n};\n\nexport const ListboxEmpty = (\n  props: React.ComponentProps<typeof ArkListbox.Empty>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkListbox.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 ?? \"listbox-empty\"}\n    />\n  );\n};\n\n// The third rename of `MenuShortcut`'s span, beside `CommandShortcut`. It had no renderer here and\n// was withheld for it; the reference ships it, and a house principle withholds no name the\n// reference ships. The rename is `slot` and\n// not a literal `data-slot`, which is the one thing we do not copy from Shark's version of it.\nexport const ListboxShortcut = (\n  { slot, ...rest }: React.ComponentProps<typeof MenuShortcut>\n) => <MenuShortcut {...rest} slot={slot ?? \"listbox-shortcut\"} />;\n"],"names":["useListbox","useListboxContext","Listbox","props","className","slot","rest","jsx","ArkListbox","cn","ListboxLabel","ListboxValueText","ListboxInput","size","type","inputVariants","ListboxContent","listboxItemVariants","tv","ListboxItem","variant","highlightOnHover","ListboxItemText","ListboxItemIndicator","children","CheckIcon","ListboxItemGroup","heading","jsxs","ListboxItemGroupLabel","ListboxEmpty","ListboxShortcut","MenuShortcut"],"mappings":"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"}

package/dist/simples/menu.d.ts

@@ -0,0 +1,60 @@
+import { ark } from '@ark-ui/react/factory';
+import { Menu as ArkMenu, MenuContentProps, useMenuContext } from '@ark-ui/react/menu';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export { useMenuContext as useMenu };
+export declare const Menu: (props: React.ComponentProps<typeof ArkMenu.Root>) => React.JSX.Element;
+export declare const MenuTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkMenu.Trigger>) => React.JSX.Element;
+/**
+ * The second way into the same menu: opens on right-click at the pointer instead of anchoring to
+ * a control. `cursor-default` because the region is not a link or a button and must not look like
+ * one — the affordance is the right-click, not the cursor.
+ */
+export declare const MenuContextTrigger: (props: React.ComponentProps<typeof ArkMenu.ContextTrigger>) => React.JSX.Element;
+export declare const MenuPositioner: (props: React.ComponentProps<typeof ArkMenu.Positioner>) => React.JSX.Element;
+export declare const menuContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const MenuContent: (props: MenuContentProps) => React.JSX.Element;
+interface MenuGroupProps extends React.ComponentProps<typeof ArkMenu.ItemGroup> {
+    /**
+     * The heading of the menu item group.
+     */
+    heading?: string;
+}
+export declare const MenuGroup: (props: MenuGroupProps) => React.JSX.Element;
+export declare const MenuSeparator: (props: React.ComponentProps<typeof ArkMenu.Separator>) => React.JSX.Element;
+declare const menuItemVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        destructive: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface MenuItemProps extends React.ComponentProps<typeof ArkMenu.Item>, VariantProps<typeof menuItemVariants> {
+}
+export declare const MenuItem: (props: MenuItemProps) => React.JSX.Element;
+export declare const MenuQuickItem: (props: MenuItemProps) => React.JSX.Element;
+export declare const MenuCheckboxItem: (props: React.ComponentProps<typeof ArkMenu.CheckboxItem>) => React.JSX.Element;
+interface MenuRadioGroupProps extends React.ComponentProps<typeof ArkMenu.RadioItemGroup> {
+    /**
+     * The heading of the menu radio item group.
+     */
+    heading?: string;
+}
+export declare const MenuRadioGroup: (props: MenuRadioGroupProps) => React.JSX.Element;
+export declare const MenuGroupLabel: (props: React.ComponentProps<typeof ArkMenu.ItemGroupLabel>) => React.JSX.Element;
+export declare const MenuRadioItem: (props: React.ComponentProps<typeof ArkMenu.RadioItem>) => React.JSX.Element;
+export declare const MenuSub: (props: React.ComponentProps<typeof Menu>) => React.JSX.Element;
+export declare const MenuSubContent: (props: React.ComponentProps<typeof ArkMenu.Content>) => React.JSX.Element;
+export declare const MenuSubTrigger: (props: React.ComponentProps<typeof ArkMenu.TriggerItem>) => React.JSX.Element;
+export declare const MenuShortcut: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+export declare const MenuArrow: (props: React.ComponentProps<typeof ArkMenu.Arrow>) => React.JSX.Element;
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/simples/menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EACL,IAAI,IAAI,OAAO,EACf,KAAK,gBAAgB,EACrB,cAAc,EACf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,CAAC;AAErC,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,sBAgBpE,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,sBACI,CAAC;AAEtE;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,cAAc,CAAC,sBAW3D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,UAAU,CAAC,sBAWvD,CAAC;AAEF,eAAO,MAAM,mBAAmB,sMAyB9B,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAgBlD,CAAC;AAEF,UAAU,cACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAU9C,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,sBAWtD,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;qDA6BpB,CAAC;AAEH,UAAU,aACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EAC/C,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAU5C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,aAAa,sBAcjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,YAAY,CAAC,sBA2BzD,CAAC;AAEF,UAAU,mBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,cAAc,CAAC;IAC3D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAUxD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,cAAc,CAAC,sBAgB3D,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,sBAuBtD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,sBAE/D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,sBAepD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,WAAW,CAAC,sBAiBxD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAexE,CAAC;AAKF,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,sBAmBlD,CAAC"}