xiod-ui 1.0.0

package/dist/components/combobox.d.ts

@@ -0,0 +1,46 @@
+import * as React$1 from "react";
+import { Combobox as Combobox$1, ComboboxItemCollection, CreateComboboxItemsOptions as ComboboxCreateItemsOptions } from "@base-ui/react/combobox";
+//#region src/components/combobox.d.ts
+declare function Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>(props: Combobox$1.Root.Props<Value, Multiple, Item>): React$1.JSX.Element;
+declare function ComboboxChipsInput({ className, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React$1.Ref<HTMLInputElement>;
+}): React$1.JSX.Element;
+declare function ComboboxInput({ className, showTrigger, showClear, startAddon, size, triggerProps, clearProps, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React$1.ReactNode;
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React$1.Ref<HTMLInputElement>;
+  triggerProps?: Combobox$1.Trigger.Props;
+  clearProps?: Combobox$1.Clear.Props;
+}): React$1.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Combobox$1.Trigger.Props): React$1.JSX.Element;
+declare function ComboboxPopup({ className, children, side, sideOffset, alignOffset, align, anchor: anchorProp, ...props }: Combobox$1.Popup.Props & {
+  align?: Combobox$1.Positioner.Props["align"];
+  sideOffset?: Combobox$1.Positioner.Props["sideOffset"];
+  alignOffset?: Combobox$1.Positioner.Props["alignOffset"];
+  side?: Combobox$1.Positioner.Props["side"];
+  anchor?: Combobox$1.Positioner.Props["anchor"];
+}): React$1.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React$1.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): React$1.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React$1.JSX.Element;
+declare function ComboboxGroupLabel({ className, ...props }: Combobox$1.GroupLabel.Props): React$1.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): React$1.JSX.Element;
+declare function ComboboxRow({ className, ...props }: Combobox$1.Row.Props): React$1.JSX.Element;
+declare function ComboboxValue({ ...props }: Combobox$1.Value.Props): React$1.JSX.Element;
+declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React$1.JSX.Element;
+declare function ComboboxClear({ className, ...props }: Combobox$1.Clear.Props): React$1.JSX.Element;
+declare function ComboboxStatus({ className, ...props }: Combobox$1.Status.Props): React$1.JSX.Element;
+declare function ComboboxCollection(props: Combobox$1.Collection.Props): React$1.JSX.Element;
+declare function ComboboxChips({ className, children, startAddon, ...props }: Combobox$1.Chips.Props & {
+  startAddon?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function ComboboxChip({ children, removeProps, ...props }: Combobox$1.Chip.Props & {
+  removeProps?: Combobox$1.ChipRemove.Props;
+}): React$1.JSX.Element;
+declare const createComboboxItems: typeof Combobox$1.createItems;
+declare const useComboboxFilter: typeof Combobox$1.useFilter;
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, type ComboboxCreateItemsOptions, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemCollection, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, createComboboxItems, useComboboxFilter };

package/dist/components/combobox.js

@@ -0,0 +1,237 @@
+"use client";
+import { Input } from "./input.js";
+import { ScrollArea } from "./scroll-area.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { UnfoldMore } from "xiod-icons/icons/UnfoldMore";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/components/combobox.tsx
+const ComboboxContext = React$1.createContext({
+	chipsRef: null,
+	multiple: false
+});
+function Combobox(props) {
+	const chipsRef = React$1.useRef(null);
+	const contextValue = React$1.useMemo(() => ({
+		chipsRef,
+		multiple: Boolean(props.multiple)
+	}), [props.multiple]);
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, { ...props })
+	});
+}
+function ComboboxChipsInput({ className, size, ...props }) {
+	const sizeValue = size ?? "default";
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", sizeValue === "sm" ? "ps-1.5" : "ps-2", className),
+		"data-size": typeof sizeValue === "string" ? sizeValue : void 0,
+		"data-slot": "combobox-chips-input",
+		size: typeof sizeValue === "number" ? sizeValue : void 0,
+		...props
+	});
+}
+function ComboboxInput({ className, showTrigger = true, showClear = false, startAddon, size, triggerProps, clearProps, ...props }) {
+	const sizeValue = size ?? "default";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64",
+		children: [
+			startAddon && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "[&_svg]:-mx-0.5 pointer-events-none absolute inset-y-0 inset-s-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+				"data-slot": "combobox-start-addon",
+				children: startAddon
+			}),
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				className: cn(startAddon && "data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]", sizeValue === "sm" ? "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5" : "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7", className),
+				"data-slot": "combobox-input",
+				render: /* @__PURE__ */ jsx(Input, {
+					className: "has-disabled:opacity-[1]",
+					nativeInput: true,
+					size: sizeValue
+				}),
+				...props
+			}),
+			showTrigger && /* @__PURE__ */ jsx(ComboboxTrigger, {
+				"aria-label": "Open suggestions",
+				className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", sizeValue === "sm" ? "inset-e-0" : "inset-e-0.5"),
+				...triggerProps,
+				children: /* @__PURE__ */ jsx(Combobox$1.Icon, {
+					"data-slot": "combobox-icon",
+					children: /* @__PURE__ */ jsx(UnfoldMore, {})
+				})
+			}),
+			showClear && /* @__PURE__ */ jsx(ComboboxClear, {
+				"aria-label": "Clear value",
+				className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", sizeValue === "sm" ? "inset-e-0" : "inset-e-0.5"),
+				...clearProps,
+				children: /* @__PURE__ */ jsx(Cancel, {})
+			})
+		]
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+		className: cn(className),
+		"data-slot": "combobox-trigger",
+		...props,
+		children
+	});
+}
+function ComboboxPopup({ className, children, side = "bottom", sideOffset = 4, alignOffset, align = "start", anchor: anchorProp, ...props }) {
+	const { chipsRef } = React$1.useContext(ComboboxContext);
+	const anchor = anchorProp ?? chipsRef;
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "z-50 select-none",
+		"data-slot": "combobox-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-97 data-starting-style:scale-97 data-ending-style:opacity-0 data-starting-style:opacity-0 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+				className: "flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground",
+				"data-slot": "combobox-popup",
+				...props,
+				children
+			})
+		})
+	}) });
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		className: cn("grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "combobox-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			className: "col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/1500/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "col-start-2",
+			children
+		})]
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		className: cn("mx-2 my-1 h-px bg-border last:hidden", className),
+		"data-slot": "combobox-separator",
+		...props
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		className: cn("[[role=group]+&]:mt-1.5", className),
+		"data-slot": "combobox-group",
+		...props
+	});
+}
+function ComboboxGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+		"data-slot": "combobox-group-label",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		className: cn("not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm", className),
+		"data-slot": "combobox-empty",
+		...props
+	});
+}
+function ComboboxRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Row, {
+		className: cn(className),
+		"data-slot": "combobox-row",
+		...props
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollbarGutter: true,
+		scrollFade: true,
+		children: /* @__PURE__ */ jsx(Combobox$1.List, {
+			className: cn("not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3", className),
+			"data-slot": "combobox-list",
+			...props
+		})
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		className: cn(className),
+		"data-slot": "combobox-clear",
+		...props
+	});
+}
+function ComboboxStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Status, {
+		className: cn("px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0", className),
+		"data-slot": "combobox-status",
+		...props
+	});
+}
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxChips({ className, children, startAddon, ...props }) {
+	const { chipsRef } = React$1.useContext(ComboboxContext);
+	return /* @__PURE__ */ jsxs(Combobox$1.Chips, {
+		className: cn("relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "combobox-chips",
+		ref: chipsRef,
+		...props,
+		children: [startAddon && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "[&_svg]:-ms-0.5 [&_svg]:-me-1.5 flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+			"data-slot": "combobox-start-addon",
+			children: startAddon
+		}), children]
+	});
+}
+function ComboboxChip({ children, removeProps, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		className: "flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+		"data-slot": "combobox-chip",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ComboboxChipRemove, { ...removeProps })]
+	});
+}
+function ComboboxChipRemove(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+		"aria-label": "Remove",
+		className: "h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+		"data-slot": "combobox-chip-remove",
+		...props,
+		children: /* @__PURE__ */ jsx(Cancel, {})
+	});
+}
+const createComboboxItems = Combobox$1.createItems;
+const useComboboxFilter = Combobox$1.useFilter;
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, createComboboxItems, useComboboxFilter };

package/dist/components/command.d.ts

@@ -0,0 +1,22 @@
+import { Autocomplete, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompleteSeparator } from "./autocomplete.js";
+import * as React$1 from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/command.d.ts
+declare const CommandDialog: <Payload>(props: Dialog.Root.Props<Payload>) => React$1.JSX.Element;
+declare const CommandCreateHandle: typeof Dialog.createHandle;
+declare function CommandDialogTrigger(props: Dialog.Trigger.Props): React$1.JSX.Element;
+declare function CommandDialogPopup({ className, children, ...props }: Dialog.Popup.Props): React$1.JSX.Element;
+declare function Command({ autoHighlight, keepHighlight, ...props }: React$1.ComponentProps<typeof Autocomplete>): React$1.JSX.Element;
+declare function CommandInput({ className, placeholder, ...props }: React$1.ComponentProps<typeof AutocompleteInput>): React$1.JSX.Element;
+declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof AutocompleteList>): React$1.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React$1.ComponentProps<typeof AutocompleteEmpty>): React$1.JSX.Element;
+declare function CommandPanel({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof AutocompleteGroup>): React$1.JSX.Element;
+declare function CommandGroupLabel({ className, ...props }: React$1.ComponentProps<typeof AutocompleteGroupLabel>): React$1.JSX.Element;
+declare function CommandCollection({ ...props }: React$1.ComponentProps<typeof AutocompleteCollection>): React$1.JSX.Element;
+declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof AutocompleteItem>): React$1.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof AutocompleteSeparator>): React$1.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
+declare function CommandFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Command, CommandCollection, CommandCreateHandle, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };

package/dist/components/command.js

@@ -0,0 +1,129 @@
+"use client";
+import { Autocomplete, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompleteSeparator } from "./autocomplete.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "xiod-icons/icons/Search";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/command.tsx
+const CommandDialog = Dialog.Root;
+const CommandDialogPortal = Dialog.Portal;
+const CommandCreateHandle = Dialog.createHandle;
+function CommandDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "command-dialog-trigger",
+		...props
+	});
+}
+function CommandDialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+		"data-slot": "command-dialog-backdrop",
+		...props
+	});
+}
+function CommandDialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: cn("fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]", className),
+		"data-slot": "command-dialog-viewport",
+		...props
+	});
+}
+function CommandDialogPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(CommandDialogPortal, { children: [/* @__PURE__ */ jsx(CommandDialogBackdrop, {}), /* @__PURE__ */ jsx(CommandDialogViewport, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
+		className: cn("translate-y-[calc(-1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "command-dialog-popup",
+		...props,
+		children
+	}) })] });
+}
+function Command({ autoHighlight = "always", keepHighlight = true, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		autoHighlight,
+		inline: true,
+		keepHighlight,
+		open: true,
+		...props
+	});
+}
+function CommandInput({ className, placeholder, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-2.5 py-1.5",
+		children: /* @__PURE__ */ jsx(AutocompleteInput, {
+			className: cn("border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0", className),
+			placeholder,
+			size: "lg",
+			startAddon: /* @__PURE__ */ jsx(Search, {}),
+			...props
+		})
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteList, {
+		className: cn("not-empty:scroll-py-2 not-empty:p-2", className),
+		"data-slot": "command-list",
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteEmpty, {
+		className: cn("not-empty:py-6", className),
+		"data-slot": "command-empty",
+		...props
+	});
+}
+function CommandPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-mx-px not-has-[+[data-slot=command-footer]]:-mb-px relative min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteGroup, {
+		className: cn(className),
+		"data-slot": "command-group",
+		...props
+	});
+}
+function CommandGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteGroupLabel, {
+		className: cn(className),
+		"data-slot": "command-group-label",
+		...props
+	});
+}
+function CommandCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteCollection, {
+		"data-slot": "command-collection",
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteItem, {
+		className: cn("py-1.5", className),
+		"data-slot": "command-item",
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AutocompleteSeparator, {
+		className: cn("my-2", className),
+		"data-slot": "command-separator",
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest", className),
+		"data-slot": "command-shortcut",
+		...props
+	});
+}
+function CommandFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 pt-[calc(--spacing(3)-1px)] pb-3 text-muted-foreground text-xs", className),
+		"data-slot": "command-footer",
+		...props
+	});
+}
+//#endregion
+export { Command, CommandCollection, CommandCreateHandle, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut };

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

@@ -0,0 +1,38 @@
+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 const ContextMenu: typeof ContextMenu$1.Root;
+declare const ContextMenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function ContextMenuTrigger({ className, children, ...props }: ContextMenu$1.Trigger.Props): React$1.JSX.Element;
+declare function ContextMenuPopup({ children, className, sideOffset, align, alignOffset, side, ...props }: ContextMenu$1.Popup.Props & {
+  align?: ContextMenu$1.Positioner.Props["align"];
+  sideOffset?: ContextMenu$1.Positioner.Props["sideOffset"];
+  alignOffset?: ContextMenu$1.Positioner.Props["alignOffset"];
+  side?: ContextMenu$1.Positioner.Props["side"];
+}): React$1.JSX.Element;
+declare function ContextMenuGroup(props: ContextMenu$1.Group.Props): React$1.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenu$1.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, variant, ...props }: ContextMenu$1.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}): React$1.JSX.Element;
+declare function ContextMenuRadioGroup(props: ContextMenu$1.RadioGroup.Props): React$1.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenu$1.RadioItem.Props): React$1.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenu$1.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenu$1.Separator.Props): React$1.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
+declare function ContextMenuSub(props: ContextMenu$1.SubmenuRoot.Props): React$1.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenu$1.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function ContextMenuSubPopup({ className, sideOffset, alignOffset, align, ...props }: ContextMenu$1.Popup.Props & {
+  align?: ContextMenu$1.Positioner.Props["align"];
+  sideOffset?: ContextMenu$1.Positioner.Props["sideOffset"];
+  alignOffset?: ContextMenu$1.Positioner.Props["alignOffset"];
+}): React$1.JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuPopup as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubPopup as ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/components/context-menu.js

@@ -0,0 +1,164 @@
+"use client";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/context-menu.tsx
+const ContextMenu = ContextMenu$1.Root;
+const ContextMenuPortal = ContextMenu$1.Portal;
+function ContextMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		className: cn(className),
+		"data-slot": "context-menu-trigger",
+		...props,
+		children
+	});
+}
+function ContextMenuPopup({ children, className, sideOffset = 8, align = "start", alignOffset, side = "bottom", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		align,
+		alignOffset,
+		className: "z-50 outline-none",
+		"data-slot": "context-menu-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			className: cn("relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)] transition-[opacity,transform,scale] duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:scale-95", className),
+			"data-slot": "context-menu-popup",
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "max-h-(--available-height) w-full overflow-y-auto p-1",
+				children
+			})
+		})
+	}) });
+}
+function ContextMenuGroup(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		className: cn("[&>svg]:-mx-0.5 relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:shrink-0", className),
+		"data-inset": inset,
+		"data-slot": "context-menu-item",
+		"data-variant": variant,
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, checked, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItem, {
+		checked,
+		className: cn("relative grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[.75rem_1fr] pe-4", className),
+		"data-slot": "context-menu-checkbox-item",
+		...props,
+		children: variant === "switch" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "col-start-1",
+			children
+		}), /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
+			className: "inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none block aspect-square h-full in-[[data-slot=context-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=context-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=context-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=context-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
+			className: "-ms-0.5 col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})] })
+	});
+}
+function ContextMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		className: cn("relative grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "context-menu-radio-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
+			className: "-ms-0.5 col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})]
+	});
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8", className),
+		"data-inset": inset,
+		"data-slot": "context-menu-label",
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		className: cn("mx-2 my-1 h-px bg-border", className),
+		"data-slot": "context-menu-separator",
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest", className),
+		"data-slot": "context-menu-shortcut",
+		...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, {
+		className: cn("[&>svg:not(:last-child)]:-mx-0.5 relative flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+		"data-inset": inset,
+		"data-slot": "context-menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "-me-0.5 ms-auto opacity-80" })]
+	});
+}
+function ContextMenuSubPopup({ className, sideOffset = 0, alignOffset, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuPopup, {
+		align,
+		alignOffset: alignOffset ?? (align !== "center" ? -5 : void 0),
+		className: cn(className),
+		"data-slot": "context-menu-sub-content",
+		side: "inline-end",
+		sideOffset,
+		...props
+	});
+}
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuPopup as ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubPopup as ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };