@px-ui/ui 0.1.4 → 1.0.0

package/dist/components/collapsible.js

@@ -0,0 +1,28 @@
+import { t as cn } from "../utils-mWJR2N24.js";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+
+//#region src/components/collapsible.tsx
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ animate, className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+		"data-slot": "collapsible-content",
+		className: cn(animate && "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0", className),
+		...props
+	});
+}
+
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["CollapsiblePrimitive"],"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  )\n}\n\ntype CollapsibleContentProps = CollapsiblePrimitive.Panel.Props & {\n  /**\n   * Animate the panel's open/close with a height transition.\n   * Adds `overflow-hidden`, which can conflict with grid/subgrid layouts.\n   */\n  animate?: boolean\n}\n\nfunction CollapsibleContent({\n  animate,\n  className,\n  ...props\n}: CollapsibleContentProps) {\n  return (\n    <CollapsiblePrimitive.Panel\n      data-slot=\"collapsible-content\"\n      className={cn(\n        animate &&\n          \"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"],"mappings":";;;;;AAIA,SAAS,YAAY,EAAE,GAAG,SAA0C;AAClE,QAAO,oBAACA,cAAqB;EAAK,aAAU;EAAc,GAAI;GAAS;;AAGzE,SAAS,mBAAmB,EAAE,GAAG,SAA6C;AAC5E,QACE,oBAACA,cAAqB;EAAQ,aAAU;EAAsB,GAAI;GAAS;;AAY/E,SAAS,mBAAmB,EAC1B,SACA,WACA,GAAG,SACuB;AAC1B,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,WAAW,GACT,WACE,0IACF,UACD;EACD,GAAI;GACJ"}

package/dist/components/combobox.d.ts

@@ -0,0 +1,3 @@
+import "../use-async-options-DHR8q5qX.js";
+import { _ as useComboboxAnchor, a as ComboboxClear, c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxValue, h as ComboboxTrigger, i as ComboboxChipsInput, l as ComboboxInput, m as ComboboxStatus, n as ComboboxChip, o as ComboboxCollection, p as ComboboxSeparator, r as ComboboxChips, s as ComboboxContent, t as Combobox, u as ComboboxItem } from "../combobox-JXY6PiDq.js";
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/components/combobox.js

@@ -0,0 +1,13 @@
+import "../utils-mWJR2N24.js";
+import "../button-hBUFMmsZ.js";
+import "../input-8jqdnUZl.js";
+import "../textarea-Cq0o323P.js";
+import "../input-group-DqEkmpXW.js";
+import "../spinner-Bo0sUZEg.js";
+import "../use-async-options-wZ9LJ2BJ.js";
+import "../use-intersection-observer-CZfnep4z.js";
+import "../use-infinite-scroll-CpbhGGT5.js";
+import "../use-debounce-_qaEZqtt.js";
+import { _ as useComboboxAnchor, a as ComboboxClear, c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxValue, h as ComboboxTrigger, i as ComboboxChipsInput, l as ComboboxInput, m as ComboboxStatus, n as ComboboxChip, o as ComboboxCollection, p as ComboboxSeparator, r as ComboboxChips, s as ComboboxContent, t as Combobox, u as ComboboxItem } from "../combobox-CnpyzZ7B.js";
+
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

package/dist/components/command.d.ts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime223 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+
+//#region src/components/command.d.ts
+declare function Command<ItemValue>({
+  className,
+  children,
+  ...props
+}: Autocomplete.Root.Props<ItemValue> & {
+  className?: string;
+}): react_jsx_runtime223.JSX.Element;
+declare function CommandDialog<ItemValue>({
+  title,
+  description,
+  showCloseButton,
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
+  children,
+  ...props
+}: Omit<Autocomplete.Root.Props<ItemValue>, "open" | "defaultOpen" | "onOpenChange" | "className"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}): react_jsx_runtime223.JSX.Element;
+declare function CommandInput({
+  className,
+  ...props
+}: Autocomplete.Input.Props): react_jsx_runtime223.JSX.Element;
+declare function CommandList({
+  className,
+  ...props
+}: Autocomplete.List.Props): react_jsx_runtime223.JSX.Element;
+declare function CommandEmpty({
+  className,
+  ...props
+}: Autocomplete.Empty.Props): react_jsx_runtime223.JSX.Element;
+declare function CommandGroup({
+  className,
+  heading,
+  children,
+  ...props
+}: Autocomplete.Group.Props & {
+  heading?: React$1.ReactNode;
+}): react_jsx_runtime223.JSX.Element;
+declare function CommandCollection({
+  ...props
+}: Autocomplete.Collection.Props): react_jsx_runtime223.JSX.Element;
+declare function CommandItem({
+  className,
+  children,
+  value,
+  onSelect,
+  onClick,
+  ...props
+}: Autocomplete.Item.Props & {
+  onSelect?: (value: ItemValueArg) => void;
+}): react_jsx_runtime223.JSX.Element;
+type ItemValueArg = Autocomplete.Item.Props["value"];
+declare function CommandShortcut({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime223.JSX.Element;
+declare function CommandSeparator({
+  className,
+  ...props
+}: Autocomplete.Separator.Props): react_jsx_runtime223.JSX.Element;
+//#endregion
+export { Command, CommandCollection, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","names":[],"sources":["../../src/components/command.tsx"],"sourcesContent":[],"mappings":";;;;;iBAmBS;;;;GAIN,YAAA,CAAa,IAAA,CAAK,MAAM;;IAAmC,oBAAA,CAAA,GAAA,CAAA;AApBJ,iBA0CjD,aA1BO,CAAA,SAAA,CAAA,CAAA;EAAA,KAAA;EAAA,WAAA;EAAA,eAAA;EAAA,SAAA;EAAA,IAAA;EAAA,WAAA;EAAA,YAAA;EAAA,KAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EAqCb,IArCa,CAsCd,YAAA,CAAa,IAAA,CAAK,KAtCJ,CAsCU,SAtCV,CAAA,EAAA,MAAA,GAAA,aAAA,GAAA,cAAA,GAAA,WAAA,CAAA,GAAA;EACd,IAAA,CAAA,EAAA,OAAA;EACA,WAAA,CAAA,EAAA,OAAA;EAEyB,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAAxB,KAAA,CAAA,EAAA,OAAkB;EAAyC,KAAA,CAAA,EAAA,MAAA;EAAA,WAAA,CAAA,EAAA,MAAA;EAsBrD,SAAA,CAAA,EAAA,MAAa;EACpB,eAAA,CAAA,EAAA,OAAA;CACA,CAAA,EAqBD,oBAAA,CAAA,GAAA,CAAA,OArBC;iBAgDO,YAAA,CA/CP;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkDC,YAAA,CAAa,KAAA,CAAM,KAlDpB,CAAA,EAkDyB,oBAAA,CAAA,GAAA,CAAA,OAlDzB;iBAsEO,WAAA,CArEP;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAwEC,YAAA,CAAa,IAAA,CAAK,KAxEnB,CAAA,EAwEwB,oBAAA,CAAA,GAAA,CAAA,OAxExB;iBAqFO,YAAA,CApFP;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAuFC,YAAA,CAAa,KAAA,CAAM,KAvFpB,CAAA,EAuFyB,oBAAA,CAAA,GAAA,CAAA,OAvFzB;iBAoGO,YAAA,CAnGP;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;CAAA,EAwGC,YAAA,CAAa,KAAA,CAAM,KAxGpB,GAAA;EACA,OAAA,CAAA,EAuGwC,OAAA,CAAM,SAvG9C;CACA,CAAA,EAsGyD,oBAAA,CAAA,GAAA,CAAA,OAtGzD;iBA0HO,iBAAA,CAzHP;EAAA,GAAA;AAAA,CAAA,EA2HC,YAAA,CAAa,UAAA,CAAW,KA3HzB,CAAA,EA2H8B,oBAAA,CAAA,GAAA,CAAA,OA3H9B;iBA+HO,WAAA,CA5HiB;EAAA,SAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,GAAA;CAAA,EAmIvB,YAAA,CAAa,IAAA,CAAK,KAnIK,GAAA;EAAxB,QAAA,CAAA,EAAa,CAAA,KAAK,EAoIC,YApID,EAAA,GAAA,IAAA;CADjB,CAAA,EAsIF,oBAAA,CAAA,GAAA,CAAA,OAtIE;KA0JE,YAAA,GAAe,YAAA,CAAa,IAAA,CAAK,KA9IrC,CAAA,OAAA,CAAA;iBAgJQ,eAAA,CAhJR;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAmJE,OAAA,CAAM,cAnJR,CAAA,MAAA,CAAA,CAAA,EAmJ8B,oBAAA,CAAA,GAAA,CAAA,OAnJ9B;AAAA,iBAgKQ,gBAAA,CArIY;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAwIlB,YAAA,CAAa,SAAA,CAAU,KAxIL,CAAA,EAwIU,oBAAA,CAAA,GAAA,CAAA,OAxIV"}

package/dist/components/command.js

@@ -0,0 +1,125 @@
+"use client";
+
+import { t as cn } from "../utils-mWJR2N24.js";
+import "../button-hBUFMmsZ.js";
+import "../input-8jqdnUZl.js";
+import "../textarea-Cq0o323P.js";
+import { n as InputGroupAddon, t as InputGroup } from "../input-group-DqEkmpXW.js";
+import { i as DialogDescription, l as DialogTitle, o as DialogHeader, r as DialogContent, t as Dialog } from "../dialog-CTqRrytc.js";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+
+//#region src/components/command.tsx
+function Command({ className, children, ...props }) {
+	const Root = Autocomplete.Root;
+	return /* @__PURE__ */ jsx(Root, {
+		open: true,
+		inline: true,
+		autoHighlight: "always",
+		keepHighlight: true,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "command",
+			className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
+			children
+		})
+	});
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", showCloseButton = false, className, open, defaultOpen, onOpenChange, modal, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		modal,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
+			showCloseButton,
+			children: /* @__PURE__ */ jsx(Command, {
+				...props,
+				children
+			})
+		})]
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: "p-1 pb-0",
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!",
+			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
+				"data-slot": "command-input",
+				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })]
+		})
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.List, {
+		"data-slot": "command-list",
+		className: cn("ppx-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto p-1 outline-none", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-sm empty:p-0", className),
+		...props
+	});
+}
+function CommandGroup({ className, heading, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Autocomplete.Group, {
+		"data-slot": "command-group",
+		className: cn("text-foreground not-last:mb-1", className),
+		...props,
+		children: [heading != null && /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+			"data-slot": "command-group-heading",
+			className: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+			children: heading
+		}), children]
+	});
+}
+function CommandCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Collection, {
+		"data-slot": "command-collection",
+		...props
+	});
+}
+function CommandItem({ className, children, value, onSelect, onClick, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Item, {
+		"data-slot": "command-item",
+		value,
+		onClick: (event) => {
+			onClick?.(event);
+			onSelect?.(value);
+		},
+		className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-highlighted:**:[svg]:text-foreground", className),
+		...props,
+		children
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ms-auto text-xs tracking-ppx-widest text-muted-foreground group-data-highlighted/command-item:text-foreground", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px w-auto bg-border", className),
+		...props
+	});
+}
+
+//#endregion
+export { Command, CommandCollection, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.js.map

package/dist/components/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../src/components/command.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete } from \"@base-ui/react/autocomplete\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@px-ui/ui/components/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@px-ui/ui/components/input-group\"\nimport { SearchIcon } from \"lucide-react\"\n\nfunction Command<ItemValue>({\n  className,\n  children,\n  ...props\n}: Autocomplete.Root.Props<ItemValue> & { className?: string }) {\n  // `Autocomplete.Root` is declared with two overloads (flat vs. grouped item\n  // inference); spreading our generic `Props<ItemValue>` matches neither, so we\n  // render through a single-signature alias.\n  const Root = Autocomplete.Root as unknown as React.ComponentType<\n    Autocomplete.Root.Props<ItemValue>\n  >\n  return (\n    <Root open inline autoHighlight=\"always\" keepHighlight {...props}>\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </Root>\n  )\n}\n\nfunction CommandDialog<ItemValue>({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  showCloseButton = false,\n  className,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  children,\n  ...props\n}: Omit<\n  Autocomplete.Root.Props<ItemValue>,\n  \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"className\"\n> & {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  modal?: boolean\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        <Command {...(props as Autocomplete.Root.Props<ItemValue>)}>\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: Autocomplete.Input.Props) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!\">\n        <Autocomplete.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: Autocomplete.List.Props) {\n  return (\n    <Autocomplete.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"ppx-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto p-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: Autocomplete.Empty.Props) {\n  return (\n    <Autocomplete.Empty\n      data-slot=\"command-empty\"\n      // Base UI keeps this element mounted for screen-reader announcements and\n      // only nulls its children when there are results — so collapse the padding\n      // (via `:empty`) instead of hiding the element, to avoid an empty gap.\n      className={cn(\"py-6 text-center text-sm empty:p-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: Autocomplete.Group.Props & { heading?: React.ReactNode }) {\n  return (\n    <Autocomplete.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground not-last:mb-1\", className)}\n      {...props}\n    >\n      {heading != null && (\n        <Autocomplete.GroupLabel\n          data-slot=\"command-group-heading\"\n          className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n        >\n          {heading}\n        </Autocomplete.GroupLabel>\n      )}\n      {children}\n    </Autocomplete.Group>\n  )\n}\n\nfunction CommandCollection({\n  ...props\n}: Autocomplete.Collection.Props) {\n  return <Autocomplete.Collection data-slot=\"command-collection\" {...props} />\n}\n\nfunction CommandItem({\n  className,\n  children,\n  value,\n  onSelect,\n  onClick,\n  ...props\n}: Autocomplete.Item.Props & {\n  onSelect?: (value: ItemValueArg) => void\n}) {\n  return (\n    <Autocomplete.Item\n      data-slot=\"command-item\"\n      value={value}\n      onClick={(event) => {\n        onClick?.(event)\n        onSelect?.(value)\n      }}\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-highlighted:**:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Autocomplete.Item>\n  )\n}\n\ntype ItemValueArg = Autocomplete.Item.Props[\"value\"]\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-ppx-widest text-muted-foreground group-data-highlighted/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: Autocomplete.Separator.Props) {\n  return (\n    <Autocomplete.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px w-auto bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandCollection,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"],"mappings":";;;;;;;;;;;;;;AAmBA,SAAS,QAAmB,EAC1B,WACA,UACA,GAAG,SAC2D;CAI9D,MAAM,OAAO,aAAa;AAG1B,QACE,oBAAC;EAAK;EAAK;EAAO,eAAc;EAAS;EAAc,GAAI;YACzD,oBAAC;GACC,aAAU;GACV,WAAW,GACT,8FACA,UACD;GAEA;IACG;GACD;;AAIX,SAAS,cAAyB,EAChC,QAAQ,mBACR,cAAc,kCACd,kBAAkB,OAClB,WACA,MACA,aACA,cACA,OACA,UACA,GAAG,SAaF;AACD,QACE,qBAAC;EACO;EACO;EACC;EACP;aAEP,qBAAC;GAAa,WAAU;cACtB,oBAAC,yBAAa,QAAoB,EAClC,oBAAC,+BAAmB,cAAgC;IACvC,EACf,oBAAC;GACC,WAAW,GACT,yDACA,UACD;GACgB;aAEjB,oBAAC;IAAQ,GAAK;IACX;KACO;IACI;GACT;;AAIb,SAAS,aAAa,EACpB,WACA,GAAG,SACwB;AAC3B,QACE,oBAAC;EAAI,aAAU;EAAwB,WAAU;YAC/C,qBAAC;GAAW,WAAU;cACpB,oBAAC,aAAa;IACZ,aAAU;IACV,WAAW,GACT,iFACA,UACD;IACD,GAAI;KACJ,EACF,oBAAC,6BACC,oBAAC,cAAW,WAAU,+BAA+B,GACrC;IACP;GACT;;AAIV,SAAS,YAAY,EACnB,WACA,GAAG,SACuB;AAC1B,QACE,oBAAC,aAAa;EACZ,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,GAAG,SACwB;AAC3B,QACE,oBAAC,aAAa;EACZ,aAAU;EAIV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,SACA,UACA,GAAG,SACwD;AAC3D,QACE,qBAAC,aAAa;EACZ,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;aAEH,WAAW,QACV,oBAAC,aAAa;GACZ,aAAU;GACV,WAAU;aAET;IACuB,EAE3B;GACkB;;AAIzB,SAAS,kBAAkB,EACzB,GAAG,SAC6B;AAChC,QAAO,oBAAC,aAAa;EAAW,aAAU;EAAqB,GAAI;GAAS;;AAG9E,SAAS,YAAY,EACnB,WACA,UACA,OACA,UACA,SACA,GAAG,SAGF;AACD,QACE,oBAAC,aAAa;EACZ,aAAU;EACH;EACP,UAAU,UAAU;AAClB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,WAAW,GACT,4ZACA,UACD;EACD,GAAI;EAEH;GACiB;;AAMxB,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;AAC/B,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,iHACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC4B;AAC/B,QACE,oBAAC,aAAa;EACZ,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;GACJ"}

package/dist/components/context-menu.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime234 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+
+//#region src/components/context-menu.d.ts
+declare function ContextMenu({
+  ...props
+}: ContextMenu$1.Root.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuPortal({
+  ...props
+}: ContextMenu$1.Portal.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenu$1.Trigger.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuContent({
+  className,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  ...props
+}: ContextMenu$1.Popup.Props & Pick<ContextMenu$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuGroup({
+  ...props
+}: ContextMenu$1.Group.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenu$1.GroupLabel.Props & {
+  inset?: boolean;
+}): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: ContextMenu$1.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuSub({
+  ...props
+}: ContextMenu$1.SubmenuRoot.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenu$1.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuSubContent({
+  ...props
+}: React$1.ComponentProps<typeof ContextMenuContent>): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenu$1.CheckboxItem.Props & {
+  inset?: boolean;
+}): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuRadioGroup({
+  ...props
+}: ContextMenu$1.RadioGroup.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenu$1.RadioItem.Props & {
+  inset?: boolean;
+}): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenu$1.Separator.Props): react_jsx_runtime234.JSX.Element;
+declare function ContextMenuShortcut({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime234.JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/components/context-menu.js

@@ -0,0 +1,137 @@
+"use client";
+
+import { t as cn } from "../utils-mWJR2N24.js";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+
+//#region src/components/context-menu.tsx
+function ContextMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: cn("select-none", className),
+		...props
+	});
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "inline-end", sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8", className),
+		...props
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180 ms-auto" })]
+	});
+}
+function ContextMenuSubContent({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "inline-end",
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute end-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute end-2",
+			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-slot": "context-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: cn("ms-auto text-xs tracking-ppx-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+//# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"inline-end\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\"z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"rtl:rotate-180 ms-auto\" />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"inline-end\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute end-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute end-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <CheckIcon\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-ppx-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n"],"mappings":";;;;;;;;;AAQA,SAAS,YAAY,EAAE,GAAG,SAA0C;AAClE,QAAO,oBAACA,cAAqB;EAAK,aAAU;EAAe,GAAI;GAAS;;AAG1E,SAAS,kBAAkB,EAAE,GAAG,SAA4C;AAC1E,QACE,oBAACA,cAAqB;EAAO,aAAU;EAAsB,GAAI;GAAS;;AAI9E,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACkC;AACrC,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;GACJ;;AAIN,SAAS,mBAAmB,EAC1B,WACA,QAAQ,SACR,cAAc,GACd,OAAO,cACP,aAAa,GACb,GAAG,SAKA;AACH,QACE,oBAACA,cAAqB,oBACpB,oBAACA,cAAqB;EACpB,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,cAAqB;GACpB,aAAU;GACV,WAAW,GAAG,qlBAAqlB,UAAW;GAC9mB,GAAI;IACJ;GAC8B,GACN;;AAIlC,SAAS,iBAAiB,EAAE,GAAG,SAA2C;AACxE,QACE,oBAACA,cAAqB;EAAM,aAAU;EAAqB,GAAI;GAAS;;AAI5E,SAAS,iBAAiB,EACxB,WACA,OACA,GAAG,SAGF;AACD,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yEACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,gBAAgB,EACvB,WACA,OACA,UAAU,WACV,GAAG,SAIF;AACD,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,inBACA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,eAAe,EAAE,GAAG,SAAiD;AAC5E,QACE,oBAACA,cAAqB;EAAY,aAAU;EAAmB,GAAI;GAAS;;AAIhF,SAAS,sBAAsB,EAC7B,WACA,OACA,UACA,GAAG,SAGF;AACD,QACE,qBAACA,cAAqB;EACpB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,kSACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,oBAAiB,WAAU,2BAA2B;GACnB;;AAI1C,SAAS,sBAAsB,EAC7B,GAAG,SAC+C;AAClD,QACE,oBAAC;EACC,aAAU;EACV,WAAU;EACV,MAAK;EACL,GAAI;GACJ;;AAIN,SAAS,wBAAwB,EAC/B,WACA,UACA,SACA,OACA,GAAG,SAGF;AACD,QACE,qBAACA,cAAqB;EACpB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4TACA,UACD;EACQ;EACT,GAAI;aAEJ,oBAAC;GAAK,WAAU;aACd,oBAACA,cAAqB,mCACpB,oBAAC,cACC,GACyC;IACxC,EACN;GACiC;;AAIxC,SAAS,sBAAsB,EAC7B,GAAG,SACqC;AACxC,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,qBAAqB,EAC5B,WACA,UACA,OACA,GAAG,SAGF;AACD,QACE,qBAACA,cAAqB;EACpB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4TACA,UACD;EACD,GAAI;aAEJ,oBAAC;GAAK,WAAU;aACd,oBAACA,cAAqB,gCACpB,oBAAC,cACC,GACsC;IACrC,EACN;GAC8B;;AAIrC,SAAS,qBAAqB,EAC5B,WACA,GAAG,SACoC;AACvC,QACE,oBAACA,cAAqB;EACpB,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;GACJ;;AAIN,SAAS,oBAAoB,EAC3B,WACA,GAAG,SAC4B;AAC/B,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT,kHACA,UACD;EACD,GAAI;GACJ"}

package/dist/components/currency-select-field.d.ts

@@ -0,0 +1,105 @@
+import "../use-async-options-DHR8q5qX.js";
+import { s as ComboboxContent } from "../combobox-JXY6PiDq.js";
+import * as react_jsx_runtime249 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/currency-select-field.d.ts
+/**
+ * Mapping of currency abbreviations to country codes for flag display.
+ * Used internally by CurrencySelectField to display country flags.
+ */
+declare const CURRENCY_FLAG_CODE: Record<string, string>;
+/**
+ * Currency type representing a currency option
+ */
+interface Currency {
+  /** Unique identifier for the currency */
+  id: string;
+  /** Full currency name (e.g., "United States dollar") */
+  name: string;
+  /** Currency abbreviation (e.g., "USD", "EUR") */
+  abbr: string;
+  /** Currency value/code used for form submission */
+  value: string;
+}
+interface CurrencySelectFieldProps {
+  /**
+   * Array of currency options to display
+   */
+  currencies: ReadonlyArray<Currency>;
+  /** The selected currency. Use for a controlled field. */
+  value?: Currency | null;
+  /** Called when the selected currency changes. */
+  onValueChange?: (value: Currency | null, eventDetails: unknown) => void;
+  /** Whether the field is disabled. */
+  disabled?: boolean;
+  /** Whether the field is read only. */
+  readOnly?: boolean;
+  /** Applies error styling to the trigger input. */
+  invalid?: boolean;
+  /** Name used for form submission. */
+  name?: string;
+  /** Ref forwarded to the underlying input element. */
+  inputRef?: React$1.Ref<HTMLInputElement>;
+  /**
+   * Placeholder text when no currency is selected
+   * @default "Select currency"
+   */
+  placeholder?: string;
+  /**
+   * Additional className for the trigger input
+   */
+  triggerClassName?: string;
+  /**
+   * Additional className for the trigger input (alias of `triggerClassName`)
+   */
+  className?: string;
+  /**
+   * Accepted for API compatibility with the legacy field. Static currency
+   * lists render immediately, so this currently has no effect.
+   */
+  isLoading?: boolean;
+  /**
+   * Additional props forwarded to the dropdown content.
+   */
+  contentProps?: Omit<React$1.ComponentProps<typeof ComboboxContent>, "children">;
+}
+/**
+ * A currency select component with search functionality and flag display.
+ * Country flags are automatically displayed based on the currency abbreviation
+ * using the built-in CURRENCY_FLAG_CODE mapping.
+ *
+ * @example
+ * ```tsx
+ * const currencies = [
+ *   { id: "1", abbr: "USD", name: "United States dollar", value: "USD" },
+ *   { id: "2", abbr: "EUR", name: "Euro", value: "EUR" },
+ *   { id: "3", abbr: "GBP", name: "British Pound", value: "GBP" },
+ * ];
+ *
+ * <CurrencySelectField
+ *   currencies={currencies}
+ *   value={selectedCurrency}
+ *   onValueChange={setSelectedCurrency}
+ *   placeholder="Select currency"
+ * />
+ * ```
+ */
+declare function CurrencySelectField({
+  currencies,
+  value,
+  onValueChange,
+  placeholder,
+  disabled,
+  readOnly,
+  invalid,
+  name,
+  inputRef,
+  triggerClassName,
+  className,
+  isLoading,
+  contentProps
+}: CurrencySelectFieldProps): react_jsx_runtime249.JSX.Element;
+//#endregion
+export { CURRENCY_FLAG_CODE, Currency, CurrencySelectField, CurrencySelectFieldProps };
+//# sourceMappingURL=currency-select-field.d.ts.map

package/dist/components/currency-select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-select-field.d.ts","names":[],"sources":["../../src/components/currency-select-field.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AAqBa,cAAA,kBAAoB,EAAA,MAAM,CAAA,MAAA,EAAA,MAAA,CAAA;AAyKvC;AAWA;;AAIc,UAfG,QAAA,CAeH;EAGJ;EAGgB,EAAA,EAAA,MAAA;EAeH;EAAV,IAAA,EAAM,MAAA;EA2B+B;EAA5B,IAAA,EAAM,MAAA;EAAX;EAAI,KAAA,EAAA,MAAA;AA6ErB;AACE,UAlIe,wBAAA,CAkIf;EACA;;;EAGA,UAAA,EAlIY,aAkIZ,CAlI0B,QAkI1B,CAAA;EACA;EACA,KAAA,CAAA,EAjIQ,QAiIR,GAAA,IAAA;EACA;EACA,aAAA,CAAA,EAAA,CAAA,KAAA,EAhIwB,QAgIxB,GAAA,IAAA,EAAA,YAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EACA;EACA,QAAA,CAAA,EAAA,OAAA;EACA;EACA,QAAA,CAAA,EAAA,OAAA;EACC;EAAwB,OAAA,CAAA,EAAA,OAAA;EAAA;;;aAtHd,OAAA,CAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;iBA2BN,KAAK,OAAA,CAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;iBA6ElC,mBAAA;;;;;;;;;;;;;;GAcb,2BAAwB,oBAAA,CAAA,GAAA,CAAA"}