@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/CheckboxTree/index.js

@@ -0,0 +1,103 @@
+import { t as cn } from "../../cn.js";
+import { Checkbox } from "../Checkbox/index.js";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/CheckboxTree/CheckboxTree.tsx
+/** All ids in a node's subtree (the node itself + every descendant). */
+function collectIds(node) {
+	if (!node.children?.length) return [node.id];
+	return [node.id, ...node.children.flatMap(collectIds)];
+}
+/** A leaf is checked iff selected; a branch derives its state from its children. */
+function getNodeState(node, selected) {
+	if (!node.children?.length) return selected.has(node.id) ? "checked" : "unchecked";
+	const states = node.children.map((child) => getNodeState(child, selected));
+	if (states.every((s) => s === "checked")) return "checked";
+	if (states.every((s) => s === "unchecked")) return "unchecked";
+	return "indeterminate";
+}
+/**
+* A hierarchical checkbox list with expand/collapse and tri-state
+* (checked / unchecked / indeterminate) propagation across each subtree.
+*/
+function CheckboxTree({ nodes, value, onValueChange, defaultExpandedIds, className, ...props }) {
+	const [expanded, setExpanded] = React.useState(() => new Set(defaultExpandedIds ?? []));
+	const selected = React.useMemo(() => new Set(value), [value]);
+	const toggleExpand = (id) => setExpanded((prev) => {
+		const next = new Set(prev);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		return next;
+	});
+	const toggleSelect = (node) => {
+		const ids = collectIds(node);
+		const allSelected = ids.every((id) => selected.has(id));
+		const next = new Set(selected);
+		for (const id of ids) if (allSelected) next.delete(id);
+		else next.add(id);
+		onValueChange?.([...next]);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		"data-slot": "checkbox-tree",
+		className: cn("flex flex-col gap-1", className),
+		...props,
+		children: nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, {
+			node,
+			depth: 0,
+			selected,
+			expanded,
+			onToggleSelect: toggleSelect,
+			onToggleExpand: toggleExpand
+		}, node.id))
+	});
+}
+/** Renders a single tree row plus, when expanded, its child rows recursively. */
+function TreeNode({ node, depth, selected, expanded, onToggleSelect, onToggleExpand }) {
+	const hasChildren = !!node.children?.length;
+	const isExpanded = expanded.has(node.id);
+	const state = getNodeState(node, selected);
+	const checkboxId = React.useId();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "treeitem",
+		"aria-expanded": hasChildren ? isExpanded : void 0,
+		"aria-checked": state === "indeterminate" ? "mixed" : state === "checked",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			style: { paddingLeft: `${depth * 1.5}rem` },
+			children: [hasChildren ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onToggleExpand(node.id),
+				"aria-label": isExpanded ? "Collapse" : "Expand",
+				className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform", isExpanded && "rotate-90") })
+			}) : /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0" }), /* @__PURE__ */ jsxs("label", {
+				htmlFor: checkboxId,
+				className: "flex flex-1 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/40",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: checkboxId,
+					checked: state === "indeterminate" ? "indeterminate" : state === "checked",
+					onCheckedChange: () => onToggleSelect(node)
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("text-sm", depth === 0 && "font-medium"),
+					children: node.label
+				})]
+			})]
+		}), hasChildren && isExpanded && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			children: node.children?.map((child) => /* @__PURE__ */ jsx(TreeNode, {
+				node: child,
+				depth: depth + 1,
+				selected,
+				expanded,
+				onToggleSelect,
+				onToggleExpand
+			}, child.id))
+		})]
+	});
+}
+//#endregion
+export { CheckboxTree };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/CheckboxTree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Checkbox } from \"@/primitives/Checkbox\";\nimport { cn } from \"@/utils\";\n\n// CheckboxTree — a hierarchical checkbox list with expand/collapse and\n// tri-state (checked / unchecked / indeterminate) propagation: toggling a branch\n// toggles all its descendants, and a branch reflects its children\n// (checked when all are, indeterminate when some are). Controlled via `value`\n// (the set of selected node ids, branches included when fully selected).\n\n/** A single node in the tree: a stable id, a label, and optional children. */\nexport interface CheckboxTreeNode {\n  /** Stable unique identifier used for selection and expansion tracking. */\n  id: string;\n  /** Content rendered next to the checkbox. */\n  label: React.ReactNode;\n  /** Nested child nodes; presence makes this node a collapsible branch. */\n  children?: CheckboxTreeNode[];\n}\n\ntype NodeState = \"checked\" | \"unchecked\" | \"indeterminate\";\n\n/** All ids in a node's subtree (the node itself + every descendant). */\nfunction collectIds(node: CheckboxTreeNode): string[] {\n  if (!node.children?.length) return [node.id];\n  return [node.id, ...node.children.flatMap(collectIds)];\n}\n\n/** A leaf is checked iff selected; a branch derives its state from its children. */\nfunction getNodeState(node: CheckboxTreeNode, selected: Set<string>): NodeState {\n  if (!node.children?.length) return selected.has(node.id) ? \"checked\" : \"unchecked\";\n  const states = node.children.map((child) => getNodeState(child, selected));\n  if (states.every((s) => s === \"checked\")) return \"checked\";\n  if (states.every((s) => s === \"unchecked\")) return \"unchecked\";\n  return \"indeterminate\";\n}\n\ninterface CheckboxTreeProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  /** The hierarchical node data to render. */\n  nodes: CheckboxTreeNode[];\n  /** Selected node ids (controlled). Includes branch ids when fully selected. */\n  value: string[];\n  /** Called with the next selected ids whenever a node (and its subtree) is toggled. */\n  onValueChange?: (value: string[]) => void;\n  /** Node ids expanded on first render. */\n  defaultExpandedIds?: string[];\n}\n\n/**\n * A hierarchical checkbox list with expand/collapse and tri-state\n * (checked / unchecked / indeterminate) propagation across each subtree.\n */\nfunction CheckboxTree({\n  nodes,\n  value,\n  onValueChange,\n  defaultExpandedIds,\n  className,\n  ...props\n}: CheckboxTreeProps) {\n  const [expanded, setExpanded] = React.useState<Set<string>>(\n    () => new Set(defaultExpandedIds ?? []),\n  );\n  const selected = React.useMemo(() => new Set(value), [value]);\n\n  const toggleExpand = (id: string) =>\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n\n  const toggleSelect = (node: CheckboxTreeNode) => {\n    const ids = collectIds(node);\n    const allSelected = ids.every((id) => selected.has(id));\n    const next = new Set(selected);\n    for (const id of ids) {\n      if (allSelected) next.delete(id);\n      else next.add(id);\n    }\n    onValueChange?.([...next]);\n  };\n\n  return (\n    <div\n      role=\"tree\"\n      data-slot=\"checkbox-tree\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    >\n      {nodes.map((node) => (\n        <TreeNode\n          key={node.id}\n          node={node}\n          depth={0}\n          selected={selected}\n          expanded={expanded}\n          onToggleSelect={toggleSelect}\n          onToggleExpand={toggleExpand}\n        />\n      ))}\n    </div>\n  );\n}\n\ninterface TreeNodeProps {\n  /** The node rendered by this row. */\n  node: CheckboxTreeNode;\n  /** Nesting depth, used for indentation and heading emphasis. */\n  depth: number;\n  /** Set of currently selected node ids. */\n  selected: Set<string>;\n  /** Set of currently expanded node ids. */\n  expanded: Set<string>;\n  /** Toggles selection of the node and its subtree. */\n  onToggleSelect: (node: CheckboxTreeNode) => void;\n  /** Toggles the expanded/collapsed state of a branch. */\n  onToggleExpand: (id: string) => void;\n}\n\n/** Renders a single tree row plus, when expanded, its child rows recursively. */\nfunction TreeNode({\n  node,\n  depth,\n  selected,\n  expanded,\n  onToggleSelect,\n  onToggleExpand,\n}: TreeNodeProps) {\n  const hasChildren = !!node.children?.length;\n  const isExpanded = expanded.has(node.id);\n  const state = getNodeState(node, selected);\n  const checkboxId = React.useId();\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? isExpanded : undefined}\n      aria-checked={state === \"indeterminate\" ? \"mixed\" : state === \"checked\"}\n    >\n      <div className=\"flex items-center gap-1\" style={{ paddingLeft: `${depth * 1.5}rem` }}>\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            onClick={() => onToggleExpand(node.id)}\n            aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n            className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground\"\n          >\n            <ChevronRight\n              className={cn(\"size-4 transition-transform\", isExpanded && \"rotate-90\")}\n            />\n          </button>\n        ) : (\n          <span className=\"w-5 shrink-0\" />\n        )}\n        <label\n          htmlFor={checkboxId}\n          className=\"flex flex-1 cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-accent/40\"\n        >\n          <Checkbox\n            id={checkboxId}\n            checked={state === \"indeterminate\" ? \"indeterminate\" : state === \"checked\"}\n            onCheckedChange={() => onToggleSelect(node)}\n          />\n          <span className={cn(\"text-sm\", depth === 0 && \"font-medium\")}>{node.label}</span>\n        </label>\n      </div>\n      {hasChildren && isExpanded && (\n        <div role=\"group\">\n          {node.children?.map((child) => (\n            <TreeNode\n              key={child.id}\n              node={child}\n              depth={depth + 1}\n              selected={selected}\n              expanded={expanded}\n              onToggleSelect={onToggleSelect}\n              onToggleExpand={onToggleExpand}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { CheckboxTree };\n"],"mappings":";;;;;;;AA2BA,SAAS,WAAW,MAAkC;CACpD,IAAI,CAAC,KAAK,UAAU,QAAQ,OAAO,CAAC,KAAK,EAAE;CAC3C,OAAO,CAAC,KAAK,IAAI,GAAG,KAAK,SAAS,QAAQ,UAAU,CAAC;AACvD;;AAGA,SAAS,aAAa,MAAwB,UAAkC;CAC9E,IAAI,CAAC,KAAK,UAAU,QAAQ,OAAO,SAAS,IAAI,KAAK,EAAE,IAAI,YAAY;CACvE,MAAM,SAAS,KAAK,SAAS,KAAK,UAAU,aAAa,OAAO,QAAQ,CAAC;CACzE,IAAI,OAAO,OAAO,MAAM,MAAM,SAAS,GAAG,OAAO;CACjD,IAAI,OAAO,OAAO,MAAM,MAAM,WAAW,GAAG,OAAO;CACnD,OAAO;AACT;;;;;AAiBA,SAAS,aAAa,EACpB,OACA,OACA,eACA,oBACA,WACA,GAAG,SACiB;CACpB,MAAM,CAAC,UAAU,eAAe,MAAM,eAC9B,IAAI,IAAI,sBAAsB,CAAC,CAAC,CACxC;CACA,MAAM,WAAW,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5D,MAAM,gBAAgB,OACpB,aAAa,SAAS;EACpB,MAAM,OAAO,IAAI,IAAI,IAAI;EACzB,IAAI,KAAK,IAAI,EAAE,GAAG,KAAK,OAAO,EAAE;OAC3B,KAAK,IAAI,EAAE;EAChB,OAAO;CACT,CAAC;CAEH,MAAM,gBAAgB,SAA2B;EAC/C,MAAM,MAAM,WAAW,IAAI;EAC3B,MAAM,cAAc,IAAI,OAAO,OAAO,SAAS,IAAI,EAAE,CAAC;EACtD,MAAM,OAAO,IAAI,IAAI,QAAQ;EAC7B,KAAK,MAAM,MAAM,KACf,IAAI,aAAa,KAAK,OAAO,EAAE;OAC1B,KAAK,IAAI,EAAE;EAElB,gBAAgB,CAAC,GAAG,IAAI,CAAC;CAC3B;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;YAEH,MAAM,KAAK,SACV,oBAAC,UAAD;GAEQ;GACN,OAAO;GACG;GACA;GACV,gBAAgB;GAChB,gBAAgB;EACjB,GAPM,KAAK,EAOX,CACF;CACE,CAAA;AAET;;AAkBA,SAAS,SAAS,EAChB,MACA,OACA,UACA,UACA,gBACA,kBACgB;CAChB,MAAM,cAAc,CAAC,CAAC,KAAK,UAAU;CACrC,MAAM,aAAa,SAAS,IAAI,KAAK,EAAE;CACvC,MAAM,QAAQ,aAAa,MAAM,QAAQ;CACzC,MAAM,aAAa,MAAM,MAAM;CAE/B,OACE,qBAAC,OAAD;EACE,MAAK;EACL,iBAAe,cAAc,aAAa,KAAA;EAC1C,gBAAc,UAAU,kBAAkB,UAAU,UAAU;YAHhE,CAKE,qBAAC,OAAD;GAAK,WAAU;GAA0B,OAAO,EAAE,aAAa,GAAG,QAAQ,IAAI,KAAK;aAAnF,CACG,cACC,oBAAC,UAAD;IACE,MAAK;IACL,eAAe,eAAe,KAAK,EAAE;IACrC,cAAY,aAAa,aAAa;IACtC,WAAU;cAEV,oBAAC,cAAD,EACE,WAAW,GAAG,+BAA+B,cAAc,WAAW,EACvE,CAAA;GACK,CAAA,IAER,oBAAC,QAAD,EAAM,WAAU,eAAgB,CAAA,GAElC,qBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAFZ,CAIE,oBAAC,UAAD;KACE,IAAI;KACJ,SAAS,UAAU,kBAAkB,kBAAkB,UAAU;KACjE,uBAAuB,eAAe,IAAI;IAC3C,CAAA,GACD,oBAAC,QAAD;KAAM,WAAW,GAAG,WAAW,UAAU,KAAK,aAAa;eAAI,KAAK;IAAY,CAAA,CAC3E;KACJ;MACJ,eAAe,cACd,oBAAC,OAAD;GAAK,MAAK;aACP,KAAK,UAAU,KAAK,UACnB,oBAAC,UAAD;IAEE,MAAM;IACN,OAAO,QAAQ;IACL;IACA;IACM;IACA;GACjB,GAPM,MAAM,EAOZ,CACF;EACE,CAAA,CAEJ;;AAET"}

package/dist/primitives/Collapsible/index.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Collapsible/Collapsible.tsx
+/** Root of an interactive panel that shows or hides its content when the trigger is toggled. */
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+/** Clickable element that toggles the open/closed state of the Collapsible. */
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+/** Region whose visibility is controlled by the Collapsible's open state. */
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Collapsible.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+//#endregion
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Collapsible/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["CollapsiblePrimitive"],"sources":["../../../src/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\n\n/** Root of an interactive panel that shows or hides its content when the trigger is toggled. */\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\n/** Clickable element that toggles the open/closed state of the Collapsible. */\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return <CollapsiblePrimitive.CollapsibleTrigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\n/** Region whose visibility is controlled by the Collapsible's open state. */\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return <CollapsiblePrimitive.CollapsibleContent data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiE;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,oBAAtB;EAAyC,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC9F;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,YAAqB,oBAAtB;EAAyC,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC9F"}

package/dist/primitives/Collapsible/index.d.cts

@@ -0,0 +1,2 @@
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "../../index17.cjs";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/primitives/Collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "../../index17.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/primitives/Collapsible/index.js

@@ -0,0 +1,28 @@
+import { Collapsible as Collapsible$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/Collapsible/Collapsible.tsx
+/** Root of an interactive panel that shows or hides its content when the trigger is toggled. */
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+/** Clickable element that toggles the open/closed state of the Collapsible. */
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+/** Region whose visibility is controlled by the Collapsible's open state. */
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CollapsiblePrimitive"],"sources":["../../../src/primitives/Collapsible/Collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\n\n/** Root of an interactive panel that shows or hides its content when the trigger is toggled. */\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\n/** Clickable element that toggles the open/closed state of the Collapsible. */\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return <CollapsiblePrimitive.CollapsibleTrigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\n/** Region whose visibility is controlled by the Collapsible's open state. */\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return <CollapsiblePrimitive.CollapsibleContent data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"mappings":";;;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiE;CACzF,OAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OAAO,oBAACA,cAAqB,oBAAtB;EAAyC,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC9F;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OAAO,oBAACA,cAAqB,oBAAtB;EAAyC,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC9F"}

package/dist/primitives/Command/index.cjs

@@ -0,0 +1,104 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Dialog_index = require("../Dialog/index.cjs");
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let cmdk = require("cmdk");
+//#region src/primitives/Command/Command.tsx
+/** Command palette root: a filterable list of commands built on `cmdk`. */
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
+		"data-slot": "command",
+		className: require_cn.cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+		...props
+	});
+}
+/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Dialog_index.Dialog, {
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Dialog_index.DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Dialog_index.DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Dialog_index.DialogDescription, { children: description })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Dialog_index.DialogContent, {
+			className: require_cn.cn("overflow-hidden p-0", className),
+			showCloseButton,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+				className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+				children
+			})
+		})]
+	});
+}
+/** The search field that filters the command list, with a leading search icon. */
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex h-9 items-center gap-2 border-b px-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
+			"data-slot": "command-input",
+			className: require_cn.cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+			...props
+		})]
+	});
+}
+/** Scrollable container for command groups, items, and the empty state. */
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.List, {
+		"data-slot": "command-list",
+		className: require_cn.cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+		...props
+	});
+}
+/** Placeholder shown when the search query matches no items. */
+function CommandEmpty({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Empty, {
+		"data-slot": "command-empty",
+		className: "py-6 text-center text-sm",
+		...props
+	});
+}
+/** A labelled group of related command items, with an optional `heading`. */
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Group, {
+		"data-slot": "command-group",
+		className: require_cn.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
+	});
+}
+/** A thin divider line between command groups. */
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Separator, {
+		"data-slot": "command-separator",
+		className: require_cn.cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+}
+/** A selectable command row supporting keyboard navigation and a disabled state. */
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Item, {
+		"data-slot": "command-item",
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		...props
+	});
+}
+/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "command-shortcut",
+		className: require_cn.cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Command/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["CommandPrimitive","cn","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","SearchIcon"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\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(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\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\n/** A thin divider line between command groups. */\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\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\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"],"mappings":";;;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,SAAD;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,QAAD;EAAQ,GAAI;YAAZ,CACE,iBAAA,GAAA,kBAAA,MAACC,gCAAAA,cAAD;GAAc,WAAU;aAAxB,CACE,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,iBAAA,GAAA,kBAAA,KAACC,gCAAAA,eAAD;GACE,WAAWL,WAAAA,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,iBAAA,GAAA,kBAAA,KAACM,aAAAA,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,iBAAA,GAAA,kBAAA,KAACP,KAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,iBAAA,GAAA,kBAAA,KAACD,KAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Command/index.d.cts

@@ -0,0 +1,2 @@
+import { a as CommandInput, c as CommandSeparator, i as CommandGroup, l as CommandShortcut, n as CommandDialog, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../../index19.cjs";
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/primitives/Command/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CommandInput, c as CommandSeparator, i as CommandGroup, l as CommandShortcut, n as CommandDialog, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../../index19.js";
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/primitives/Command/index.js

@@ -0,0 +1,95 @@
+import { t as cn } from "../../cn.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../Dialog/index.js";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region src/primitives/Command/Command.tsx
+/** Command palette root: a filterable list of commands built on `cmdk`. */
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+		...props
+	});
+}
+/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...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("overflow-hidden p-0", className),
+			showCloseButton,
+			children: /* @__PURE__ */ jsx(Command, {
+				className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+				children
+			})
+		})]
+	});
+}
+/** The search field that filters the command list, with a leading search icon. */
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex h-9 items-center gap-2 border-b px-3",
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+			...props
+		})]
+	});
+}
+/** Scrollable container for command groups, items, and the empty state. */
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		"data-slot": "command-list",
+		className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+		...props
+	});
+}
+/** Placeholder shown when the search query matches no items. */
+function CommandEmpty({ ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: "py-6 text-center text-sm",
+		...props
+	});
+}
+/** A labelled group of related command items, with an optional `heading`. */
+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
+	});
+}
+/** A thin divider line between command groups. */
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+}
+/** A selectable command row supporting keyboard navigation and a disabled state. */
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		"data-slot": "command-item",
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		...props
+	});
+}
+/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Command/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CommandPrimitive"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/primitives/Dialog\";\nimport { cn } from \"@/utils\";\n\n/** Command palette root: a filterable list of commands built on `cmdk`. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A `Command` rendered inside a centered, modal `Dialog` — the classic ⌘K palette. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  /** Accessible (visually hidden) dialog title for screen readers. */\n  title?: string;\n  /** Accessible (visually hidden) dialog description for screen readers. */\n  description?: string;\n  /** Extra classes applied to the dialog content surface. */\n  className?: string;\n  /** Whether to render the dialog's top-right close button. */\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(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** The search field that filters the command list, with a leading search icon. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-9 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups, items, and the empty state. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Placeholder shown when the search query matches no items. */\nfunction CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** A labelled group of related command items, with an optional `heading`. */\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\n/** A thin divider line between command groups. */\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\n/** A selectable command row supporting keyboard navigation and a disabled state. */\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned keyboard-shortcut hint shown inside a `CommandItem`. */\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\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"],"mappings":";;;;;;;AAgBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACA,WAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,MAClB,GAAG,SAUF;CACD,OACE,qBAAC,QAAD;EAAQ,GAAI;YAAZ,CACE,qBAAC,cAAD;GAAc,WAAU;aAAxB,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;MACd,oBAAC,eAAD;GACE,WAAW,GAAG,uBAAuB,SAAS;GAC7B;aAEjB,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA;EACI,CAAA,CACT;;AAEZ;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;YAAjD,CACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,GACpD,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,4JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,uYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ContextMenu/index.cjs

@@ -0,0 +1,152 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let lucide_react = require("lucide-react");
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/ContextMenu/ContextMenu.tsx
+/** Root provider for a right-click context menu; wires the trigger to its portalled content. */
+function ContextMenu({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+/** The target region that opens the menu on right-click (context menu). */
+function ContextMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		...props
+	});
+}
+/** Groups related items together for labelling and accessibility. */
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+/** Portals the menu content into the document body. */
+function ContextMenuPortal({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Sub, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+/** Groups `ContextMenuRadioItem`s into a single-select set. */
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+/** Item that opens a nested submenu; renders a trailing chevron. */
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ContextMenu.SubTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: require_cn.cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+/** The popover surface for a nested submenu. */
+function ContextMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.SubContent, {
+		"data-slot": "context-menu-sub-content",
+		className: require_cn.cn("z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	});
+}
+/** The portalled popover surface that holds the menu items. */
+function ContextMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Content, {
+		"data-slot": "context-menu-content",
+		className: require_cn.cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	}) });
+}
+/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+}
+/** A menu item with a toggleable checkmark indicator. */
+function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "size-4" }) })
+		}), children]
+	});
+}
+/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */
+function ContextMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: require_cn.cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus: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: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleIcon, { className: "size-2 fill-current" }) })
+		}), children]
+	});
+}
+/** A non-interactive heading that labels a group of items. */
+function ContextMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Label, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: require_cn.cn("px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8", className),
+		...props
+	});
+}
+/** A horizontal divider between groups of items. */
+function ContextMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: require_cn.cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+/** Right-aligned text for a keyboard shortcut hint inside an item. */
+function ContextMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "context-menu-shortcut",
+		className: require_cn.cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuPortal = ContextMenuPortal;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuShortcut = ContextMenuShortcut;
+exports.ContextMenuSub = ContextMenuSub;
+exports.ContextMenuSubContent = ContextMenuSubContent;
+exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+
+//# sourceMappingURL=index.cjs.map