@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/combobox.js

@@ -0,0 +1,264 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/components/ui/combobox.tsx
+/**
+* Combobox — searchable select that filters options as you type.
+*
+* Built on the Base UI Combobox primitive (Radix has no combobox primitive
+* of its own). Composed of Combobox, ComboboxInput, ComboboxChips, etc.; the
+* input/trigger/clear row renders through MMDS's own InputGroup component,
+* and a useComboboxAnchor helper wires the popup to the chips container.
+*/
+var Combobox = Combobox$1.Root;
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, "aria-label": ariaLabel = "Toggle list", ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+		"data-slot": "combobox-trigger",
+		"aria-label": ariaLabel,
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "xs",
+			iconOnly: true
+		}),
+		className: cn(className),
+		"aria-label": "Clear selection",
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-size": size,
+		className: cn("w-auto", size === "sm" && "h-7", size === "xs" && "h-6", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, {
+					disabled,
+					className: cn(size !== "default" && "text-xs")
+				}),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "xs",
+					iconOnly: true,
+					variant: "ghost",
+					asChild: true,
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled,
+					children: /* @__PURE__ */ jsx(ComboboxTrigger, {})
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, {
+		container: getPortalContainer(),
+		children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+				"data-slot": "combobox-content",
+				"data-chips": !!anchor,
+				className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground 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: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("flex w-full justify-center text-center text-sm text-muted-foreground [&:not(:empty)]:py-2", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": "combobox-chips",
+		className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "xs",
+				iconOnly: true,
+				"aria-label": "Remove"
+			}),
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React.useRef(null);
+}
+/**
+* WHEN TO USE
+* - Large or dynamic option lists where typing to filter matters.
+* - Grouped options with headings (ComboboxGroup + ComboboxLabel).
+* - Multi-value entry with removable chips — pass `multiple` to the root Combobox, and render ComboboxChips / ComboboxChip / ComboboxChipsInput instead of ComboboxInput; wire the popover's `anchor` to the chips container via useComboboxAnchor. See the "MultiSelect" story.
+*
+* NOT WHEN
+* - The list is short and fixed — use Select, it's simpler with no search overhead.
+* - It's free text with no option list at all — use Input.
+* - It's a global command palette / action launcher rather than a form value — use Command.
+* - It's a free-text search with no value to commit — results to act on, not a field to fill in
+*   (a page-level "Search patients" box, an embedded search panel) — use Command directly (not
+*   CommandDialog, which is the ⌘K-palette wrapper) instead of reaching for Combobox just
+*   because it also filters as you type; Combobox always resolves to one selected item sitting
+*   in the trigger, which a search box doesn't have.
+*
+* KEY RULES
+* - Pass options through the `items` prop on the root Combobox; ComboboxList takes a render-function child, called once per item.
+* - ComboboxContent is portaled and width-locked to the anchor via --anchor-width — don't give it a fixed width.
+* - ComboboxInput has `showTrigger` (default true, shows the dropdown chevron button) and `showClear` (default false, shows a clear button — only useful once a value is set).
+* - ComboboxInput's `size` is "default" | "sm" | "xs" (default "default") —
+*   same default/sm/xs vocabulary as Select/Button/Tabs, not Combobox-specific
+*   naming. Only affects the input row itself; ComboboxContent/ComboboxItem
+*   stay fixed size, matching how Select's own `size` only sizes its trigger.
+*   Omits the native `size` (character-width) attribute `<input>` normally
+*   has — there's no way to set that one through ComboboxInput.
+* - ComboboxItem renders its own CheckIcon selected-state indicator — don't add a second one.
+*
+* USAGE
+* <Combobox items={spices}>
+*   <ComboboxInput placeholder="Select a spice" />
+*   <ComboboxContent>
+*     <ComboboxEmpty>No spice found.</ComboboxEmpty>
+*     <ComboboxList>
+*       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+*
+* // Grouped options
+* <Combobox items={spices}>
+*   <ComboboxInput placeholder="Select a spice" />
+*   <ComboboxContent>
+*     <ComboboxList>
+*       <ComboboxGroup>
+*         <ComboboxLabel>Warm</ComboboxLabel>
+*         <ComboboxItem value="Cinnamon">Cinnamon</ComboboxItem>
+*       </ComboboxGroup>
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+*
+* // Default value with a clear button
+* <Combobox items={spices} defaultValue="Cardamom">
+*   <ComboboxInput placeholder="Select a spice" showClear />
+*   <ComboboxContent>
+*     <ComboboxList>
+*       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+*
+* // Multi-select with removable chips
+* const [value, setValue] = React.useState<string[]>([])
+* const anchorRef = useComboboxAnchor()
+* <Combobox items={spices} multiple value={value} onValueChange={setValue}>
+*   <ComboboxChips ref={anchorRef}>
+*     {value.map((item) => <ComboboxChip key={item}>{item}</ComboboxChip>)}
+*     <ComboboxChipsInput placeholder="Select spices" />
+*   </ComboboxChips>
+*   <ComboboxContent anchor={anchorRef}>
+*     <ComboboxList>
+*       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+*/
+//#endregion
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/ui/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/ui/combobox.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Combobox — searchable select that filters options as you type.\n *\n * Built on the Base UI Combobox primitive (Radix has no combobox primitive\n * of its own). Composed of Combobox, ComboboxInput, ComboboxChips, etc.; the\n * input/trigger/clear row renders through MMDS's own InputGroup component,\n * and a useComboboxAnchor helper wires the popup to the chips container.\n */\n\nimport * as React from \"react\"\n// Subpath import, not the root barrel. `@base-ui/react` re-exports all 83 of its\n// components, which pulled ~600 modules into the Storybook graph to use one. The\n// `Combobox` object is identical either way (verified by reference equality).\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  \"aria-label\": ariaLabel = \"Toggle list\",\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      aria-label={ariaLabel}\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"xs\" iconOnly />}\n      className={cn(className)}\n      aria-label=\"Clear selection\"\n      {...props}\n    >\n      <XIcon className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  size = \"default\",\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n  size?: \"default\" | \"sm\" | \"xs\"\n}) {\n  return (\n    <InputGroup\n      data-size={size}\n      className={cn(\n        \"w-auto\",\n        size === \"sm\" && \"h-7\",\n        size === \"xs\" && \"h-6\",\n        className\n      )}\n    >\n      <ComboboxPrimitive.Input\n        render={\n          <InputGroupInput\n            disabled={disabled}\n            className={cn(size !== \"default\" && \"text-xs\")}\n          />\n        }\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"xs\"\n            iconOnly\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal container={getPortalContainer()}>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-popover ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground 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      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"pointer-events-none\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  // The primitive already renders `children` as `null` unless the filtered\n  // list is empty (see its own source) — its root element must stay\n  // mounted and visible for its `role=\"status\" aria-live=\"polite\"` to\n  // announce reliably, so this must never drive the root itself with\n  // `hidden`/`display:none` in lockstep with the empty state (that's what\n  // the primitive's own doc comment warns against). Padding is applied\n  // only `:not(:empty)` so it still collapses to zero height when there's\n  // nothing to show, without ever toggling `display` on the root itself.\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"flex w-full justify-center text-center text-sm text-muted-foreground [&:not(:empty)]:py-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={\n            <Button variant=\"ghost\" size=\"xs\" iconOnly aria-label=\"Remove\" />\n          }\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <XIcon className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n\n/**\n * WHEN TO USE\n * - Large or dynamic option lists where typing to filter matters.\n * - Grouped options with headings (ComboboxGroup + ComboboxLabel).\n * - Multi-value entry with removable chips — pass `multiple` to the root Combobox, and render ComboboxChips / ComboboxChip / ComboboxChipsInput instead of ComboboxInput; wire the popover's `anchor` to the chips container via useComboboxAnchor. See the \"MultiSelect\" story.\n *\n * NOT WHEN\n * - The list is short and fixed — use Select, it's simpler with no search overhead.\n * - It's free text with no option list at all — use Input.\n * - It's a global command palette / action launcher rather than a form value — use Command.\n * - It's a free-text search with no value to commit — results to act on, not a field to fill in\n *   (a page-level \"Search patients\" box, an embedded search panel) — use Command directly (not\n *   CommandDialog, which is the ⌘K-palette wrapper) instead of reaching for Combobox just\n *   because it also filters as you type; Combobox always resolves to one selected item sitting\n *   in the trigger, which a search box doesn't have.\n *\n * KEY RULES\n * - Pass options through the `items` prop on the root Combobox; ComboboxList takes a render-function child, called once per item.\n * - ComboboxContent is portaled and width-locked to the anchor via --anchor-width — don't give it a fixed width.\n * - ComboboxInput has `showTrigger` (default true, shows the dropdown chevron button) and `showClear` (default false, shows a clear button — only useful once a value is set).\n * - ComboboxInput's `size` is \"default\" | \"sm\" | \"xs\" (default \"default\") —\n *   same default/sm/xs vocabulary as Select/Button/Tabs, not Combobox-specific\n *   naming. Only affects the input row itself; ComboboxContent/ComboboxItem\n *   stay fixed size, matching how Select's own `size` only sizes its trigger.\n *   Omits the native `size` (character-width) attribute `<input>` normally\n *   has — there's no way to set that one through ComboboxInput.\n * - ComboboxItem renders its own CheckIcon selected-state indicator — don't add a second one.\n *\n * USAGE\n * <Combobox items={spices}>\n *   <ComboboxInput placeholder=\"Select a spice\" />\n *   <ComboboxContent>\n *     <ComboboxEmpty>No spice found.</ComboboxEmpty>\n *     <ComboboxList>\n *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * // Grouped options\n * <Combobox items={spices}>\n *   <ComboboxInput placeholder=\"Select a spice\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxGroup>\n *         <ComboboxLabel>Warm</ComboboxLabel>\n *         <ComboboxItem value=\"Cinnamon\">Cinnamon</ComboboxItem>\n *       </ComboboxGroup>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * // Default value with a clear button\n * <Combobox items={spices} defaultValue=\"Cardamom\">\n *   <ComboboxInput placeholder=\"Select a spice\" showClear />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * // Multi-select with removable chips\n * const [value, setValue] = React.useState<string[]>([])\n * const anchorRef = useComboboxAnchor()\n * <Combobox items={spices} multiple value={value} onValueChange={setValue}>\n *   <ComboboxChips ref={anchorRef}>\n *     {value.map((item) => <ComboboxChip key={item}>{item}</ComboboxChip>)}\n *     <ComboboxChipsInput placeholder=\"Select spices\" />\n *   </ComboboxChips>\n *   <ComboboxContent anchor={anchorRef}>\n *     <ComboboxList>\n *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n */\n"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+/**
+ * Command — filterable command list.
+ *
+ * CommandDialog wraps it in a Dialog for a ⌘K-style modal palette. The standard
+ * base for command palettes: cmdk is the filtering/keyboard-nav engine, with
+ * MMDS item, group, and shortcut styling layered on top.
+ */
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "../../components/ui/dialog";
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
+declare function CommandItem({ className, children, checked, ...props }: React.ComponentProps<typeof CommandPrimitive.Item> & {
+    /** Marks this item as the persisted "current value" (the checkmark this component's own CSS already shows) — cmdk owns `aria-selected` itself (reflecting only the transient keyboard-highlighted item, reasserted after any consumer props), so this mirrors into `aria-checked`/`data-checked` instead, the one pair cmdk never touches. */
+    checked?: boolean;
+}): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+/**
+ * WHEN TO USE
+ * - A global command palette (⌘K / Ctrl+K) for quick navigation or running actions — use CommandDialog.
+ * - An inline searchable action list embedded in a page or panel — use Command directly.
+ *
+ * NOT WHEN
+ * - Picking a form value from a list — use Select or Combobox instead.
+ * - A simple menu anchored to a trigger button with no search — use DropdownMenu instead.
+ *
+ * KEY RULES
+ * - CommandInput filters CommandItem children automatically via cmdk — no manual filtering needed.
+ * - CommandGroup takes a `heading` prop for section labels; CommandSeparator divides groups.
+ * - CommandShortcut renders right-aligned key-hint text (e.g. "⌘P") inside a CommandItem.
+ * - CommandEmpty renders only when the filtered list has zero results.
+ * - CommandItem's `checked` prop shows the persisted checkmark (e.g. "this is the current value" in
+ *   a combobox-style single-select usage) and mirrors it into `aria-checked`/`data-checked` — don't
+ *   pass a bare `data-checked` attribute yourself, cmdk reasserts its own `aria-selected` (the
+ *   transient keyboard-highlight state) over any consumer prop, so `checked` is the only path that
+ *   actually reaches assistive tech.
+ * - CommandDialog defaults `showCloseButton` to false and is controlled via `open`/`onOpenChange`, same as Dialog.
+ *
+ * USAGE
+ * <Command className="w-80 rounded-xl border shadow-popover">
+ *   <CommandInput placeholder="Type a command or search…" />
+ *   <CommandList>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Suggestions">
+ *       <CommandItem><CalendarIcon />Calendar</CommandItem>
+ *     </CommandGroup>
+ *     <CommandSeparator />
+ *     <CommandGroup heading="Settings">
+ *       <CommandItem><UserIcon />Profile<CommandShortcut>⌘P</CommandShortcut></CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ *
+ * // ⌘K palette bound to a keyboard shortcut
+ * <CommandDialog open={open} onOpenChange={setOpen}>
+ *   <CommandInput placeholder="Type a command or search…" />
+ *   <CommandList>{items}</CommandList>
+ * </CommandDialog>
+ */
+//# sourceMappingURL=command.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/ui/command.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAGlD,OAAO,EACL,MAAM,EAKP,MAAM,wBAAwB,CAAA;AAI/B,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAW/C;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAkBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAkBrD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAWpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,qBAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG;IACtD,8UAA8U;IAC9U,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAgBA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG"}

package/dist/components/ui/command.js

@@ -0,0 +1,133 @@
+import { cn } from "../../lib/utils.js";
+import { InputGroup, InputGroupAddon } from "./input-group.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
+import "react";
+import { CheckIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region src/components/ui/command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		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
+		})]
+	});
+}
+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]:pl-2!",
+			children: [/* @__PURE__ */ jsx(Command$1.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(Command$1.List, {
+		"data-slot": "command-list",
+		className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className),
+		...props
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-sm", className),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+}
+function CommandItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(Command$1.Item, {
+		"data-slot": "command-item",
+		"data-checked": checked ? "true" : void 0,
+		"aria-checked": checked,
+		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=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - A global command palette (⌘K / Ctrl+K) for quick navigation or running actions — use CommandDialog.
+* - An inline searchable action list embedded in a page or panel — use Command directly.
+*
+* NOT WHEN
+* - Picking a form value from a list — use Select or Combobox instead.
+* - A simple menu anchored to a trigger button with no search — use DropdownMenu instead.
+*
+* KEY RULES
+* - CommandInput filters CommandItem children automatically via cmdk — no manual filtering needed.
+* - CommandGroup takes a `heading` prop for section labels; CommandSeparator divides groups.
+* - CommandShortcut renders right-aligned key-hint text (e.g. "⌘P") inside a CommandItem.
+* - CommandEmpty renders only when the filtered list has zero results.
+* - CommandItem's `checked` prop shows the persisted checkmark (e.g. "this is the current value" in
+*   a combobox-style single-select usage) and mirrors it into `aria-checked`/`data-checked` — don't
+*   pass a bare `data-checked` attribute yourself, cmdk reasserts its own `aria-selected` (the
+*   transient keyboard-highlight state) over any consumer prop, so `checked` is the only path that
+*   actually reaches assistive tech.
+* - CommandDialog defaults `showCloseButton` to false and is controlled via `open`/`onOpenChange`, same as Dialog.
+*
+* USAGE
+* <Command className="w-80 rounded-xl border shadow-popover">
+*   <CommandInput placeholder="Type a command or search…" />
+*   <CommandList>
+*     <CommandEmpty>No results found.</CommandEmpty>
+*     <CommandGroup heading="Suggestions">
+*       <CommandItem><CalendarIcon />Calendar</CommandItem>
+*     </CommandGroup>
+*     <CommandSeparator />
+*     <CommandGroup heading="Settings">
+*       <CommandItem><UserIcon />Profile<CommandShortcut>⌘P</CommandShortcut></CommandItem>
+*     </CommandGroup>
+*   </CommandList>
+* </Command>
+*
+* // ⌘K palette bound to a keyboard shortcut
+* <CommandDialog open={open} onOpenChange={setOpen}>
+*   <CommandInput placeholder="Type a command or search…" />
+*   <CommandList>{items}</CommandList>
+* </CommandDialog>
+*/
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command.js.map

package/dist/components/ui/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/ui/command.tsx"],"sourcesContent":["/**\n * Command — filterable command list.\n *\n * CommandDialog wraps it in a Dialog for a ⌘K-style modal palette. The standard\n * base for command palettes: cmdk is the filtering/keyboard-nav engine, with\n * MMDS item, group, and shortcut styling layered on top.\n */\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { InputGroup, InputGroupAddon } from \"@/components/ui/input-group\"\nimport { SearchIcon, CheckIcon } from \"lucide-react\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\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      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\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        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\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]:pl-2!\">\n        <CommandPrimitive.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}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item> & {\n  /** Marks this item as the persisted \"current value\" (the checkmark this component's own CSS already shows) — cmdk owns `aria-selected` itself (reflecting only the transient keyboard-highlighted item, reasserted after any consumer props), so this mirrors into `aria-checked`/`data-checked` instead, the one pair cmdk never touches. */\n  checked?: boolean\n}) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      data-checked={checked ? \"true\" : undefined}\n      aria-checked={checked}\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=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CheckIcon className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n\n/**\n * WHEN TO USE\n * - A global command palette (⌘K / Ctrl+K) for quick navigation or running actions — use CommandDialog.\n * - An inline searchable action list embedded in a page or panel — use Command directly.\n *\n * NOT WHEN\n * - Picking a form value from a list — use Select or Combobox instead.\n * - A simple menu anchored to a trigger button with no search — use DropdownMenu instead.\n *\n * KEY RULES\n * - CommandInput filters CommandItem children automatically via cmdk — no manual filtering needed.\n * - CommandGroup takes a `heading` prop for section labels; CommandSeparator divides groups.\n * - CommandShortcut renders right-aligned key-hint text (e.g. \"⌘P\") inside a CommandItem.\n * - CommandEmpty renders only when the filtered list has zero results.\n * - CommandItem's `checked` prop shows the persisted checkmark (e.g. \"this is the current value\" in\n *   a combobox-style single-select usage) and mirrors it into `aria-checked`/`data-checked` — don't\n *   pass a bare `data-checked` attribute yourself, cmdk reasserts its own `aria-selected` (the\n *   transient keyboard-highlight state) over any consumer prop, so `checked` is the only path that\n *   actually reaches assistive tech.\n * - CommandDialog defaults `showCloseButton` to false and is controlled via `open`/`onOpenChange`, same as Dialog.\n *\n * USAGE\n * <Command className=\"w-80 rounded-xl border shadow-popover\">\n *   <CommandInput placeholder=\"Type a command or search…\" />\n *   <CommandList>\n *     <CommandEmpty>No results found.</CommandEmpty>\n *     <CommandGroup heading=\"Suggestions\">\n *       <CommandItem><CalendarIcon />Calendar</CommandItem>\n *     </CommandGroup>\n *     <CommandSeparator />\n *     <CommandGroup heading=\"Settings\">\n *       <CommandItem><UserIcon />Profile<CommandShortcut>⌘P</CommandShortcut></CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n *\n * // ⌘K palette bound to a keyboard shortcut\n * <CommandDialog open={open} onOpenChange={setOpen}>\n *   <CommandInput placeholder=\"Type a command or search…\" />\n *   <CommandList>{items}</CommandList>\n * </CommandDialog>\n */\n"],"mappings":";;;;;;;;AAsBA,SAAS,QAAQ,EACf,WACA,GAAG,SAC6C;CAChD,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,OAClB,GAAG,SAMF;CACD,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GACE,WAAW,GACT,yDACA,SACF;GACiB;GAEhB;EACY,CAAA,CACT;;AAEZ;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACE,oBAAC,UAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT,iFACA,SACF;IACA,GAAI;GACL,CAAA,GACD,oBAAC,iBAAD,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,EACrC,CAAA,CACP;;CACT,CAAA;AAET;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,oFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAAC,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAAC,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,+NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAAC,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,UACA,SACA,GAAG,SAIF;CACD,OACE,qBAAC,UAAiB,MAAlB;EACE,aAAU;EACV,gBAAc,UAAU,SAAS,KAAA;EACjC,gBAAc;EACd,WAAW,GACT,gaACA,SACF;EACA,GAAI;EARN,UAAA,CAUG,UACD,oBAAC,WAAD,EAAW,WAAU,kIAAmI,CAAA,CACnI;;AAE3B;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,70 @@
+/**
+ * ContextMenu — menu of actions opened by right-clicking (or long-pressing) a target region
+ *
+ * Shares the same item vocabulary as DropdownMenu (groups, labels,
+ * separators, submenus, checkbox/radio items) — the only difference from
+ * DropdownMenu is the trigger: a wrapped region instead of a click target.
+ */
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+declare function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>): React.JSX.Element;
+declare function ContextMenuTrigger({ className, tabIndex, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React.JSX.Element;
+declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>): React.JSX.Element;
+declare function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>): React.JSX.Element;
+declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): React.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+}): React.JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+/**
+ * WHEN TO USE
+ * - Right-click affordances on a canvas, tree, table row, or file item
+ *
+ * NOT WHEN
+ * - As the only way to reach an action — always provide a visible alternative (a button or DropdownMenu) alongside it
+ * - Touch-primary interfaces — there's no reliable right-click equivalent on touch; don't make it the sole path to an action there
+ *
+ * KEY RULES
+ * - ContextMenuTrigger wraps the exact region that should respond to right-click — size it to the target, not the whole page
+ * - ContextMenuItem accepts variant="default" | "destructive"; use "destructive" only for irreversible entries
+ * - Checkbox/radio items are controlled, same pattern as DropdownMenu — the caller owns checked/value state
+ * - Submenus use ContextMenuSub + ContextMenuSubTrigger + ContextMenuSubContent, same composition as DropdownMenu
+ *
+ * USAGE
+ * <ContextMenu>
+ *   <ContextMenuTrigger className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm">
+ *     Right click here
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent className="w-52">
+ *     <ContextMenuItem>Back<ContextMenuShortcut>⌘[</ContextMenuShortcut></ContextMenuItem>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ *
+ * <ContextMenuRadioGroup value={pane} onValueChange={setPane}>
+ *   <ContextMenuRadioItem value="left">Left pane</ContextMenuRadioItem>
+ *   <ContextMenuRadioItem value="right">Right pane</ContextMenuRadioItem>
+ * </ContextMenuRadioGroup>
+ */
+//# sourceMappingURL=context-menu.d.ts.map

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

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