@psnext/design-system 2.3.0 → 2.5.0

package/dist/primitives/CircularProgress/index.js

@@ -0,0 +1,105 @@
+import { t as cn } from "../../cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/CircularProgress/CircularProgress.tsx
+const indicatorVariants = {
+	default: "text-primary-invert-bg",
+	brand: "text-brand-500-primary",
+	success: "text-success-txt",
+	warning: "text-warning-txt",
+	info: "text-info-txt",
+	destructive: "text-danger-txt",
+	analyzing: "text-[var(--progress-analyzing)]",
+	ingesting: "text-[var(--progress-ingesting)]"
+};
+const trackVariants = {
+	default: "text-primary-border",
+	brand: "text-brand-500-primary/20",
+	success: "text-success-txt/20",
+	warning: "text-warning-txt/20",
+	info: "text-info-txt/20",
+	destructive: "text-danger-txt/20",
+	analyzing: "text-primary-invert-bg/20",
+	ingesting: "text-primary-invert-bg/20"
+};
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/** Circular progress indicator supporting determinate and indeterminate states. */
+function CircularProgress({ className, value, min = 0, max = 100, size = 48, strokeWidth = 4, variant = "default", trackVariant, progressColor, trackColor, label, showValueLabel = false, indeterminateLabel = "Loading", style, "aria-label": ariaLabelProp, "aria-valuetext": ariaValueTextProp, ...props }) {
+	const normalizedMax = max > min ? max : min + 100;
+	const boundedValue = value == null ? void 0 : clamp(value, min, normalizedMax);
+	const indeterminate = boundedValue == null;
+	const percent = indeterminate ? void 0 : (boundedValue - min) / (normalizedMax - min) * 100;
+	const roundedPercent = percent == null ? void 0 : Math.round(percent);
+	const normalizedSize = Math.max(size, 12);
+	const normalizedStrokeWidth = clamp(strokeWidth, 1, normalizedSize / 2);
+	const radius = (normalizedSize - normalizedStrokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const centerLabel = label ?? (showValueLabel && roundedPercent != null ? `${roundedPercent}%` : null);
+	const ariaValueText = ariaValueTextProp ?? (indeterminate ? indeterminateLabel : `${roundedPercent}% complete`);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "circular-progress",
+		"data-state": indeterminate ? "indeterminate" : "determinate",
+		role: "progressbar",
+		"aria-label": ariaLabelProp ?? "Progress",
+		"aria-valuemin": min,
+		"aria-valuemax": normalizedMax,
+		"aria-valuenow": indeterminate ? void 0 : boundedValue,
+		"aria-valuetext": ariaValueText,
+		className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full text-primary-txt outline-none focus-visible:ring-3 focus-visible:ring-focus", className),
+		style: {
+			width: normalizedSize,
+			height: normalizedSize,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				"data-slot": "circular-progress-svg",
+				width: normalizedSize,
+				height: normalizedSize,
+				viewBox: `0 0 ${normalizedSize} ${normalizedSize}`,
+				className: cn("size-full -rotate-90", indeterminate && "motion-safe:animate-spin"),
+				children: [/* @__PURE__ */ jsx("circle", {
+					"data-slot": "circular-progress-track",
+					cx: normalizedSize / 2,
+					cy: normalizedSize / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: normalizedStrokeWidth,
+					className: cn("stroke-current", trackColor ? void 0 : trackVariants[trackVariant ?? variant]),
+					style: trackColor ? { stroke: trackColor } : void 0
+				}), /* @__PURE__ */ jsx("circle", {
+					"data-slot": "circular-progress-indicator",
+					cx: normalizedSize / 2,
+					cy: normalizedSize / 2,
+					r: radius,
+					fill: "none",
+					strokeWidth: normalizedStrokeWidth,
+					strokeLinecap: "round",
+					className: cn("stroke-current motion-reduce:transition-none", progressColor ? void 0 : indicatorVariants[variant], indeterminate ? void 0 : "transition-[stroke-dashoffset] duration-500 ease-out"),
+					style: {
+						strokeDasharray: indeterminate ? `${circumference * .35} ${circumference}` : `${circumference}`,
+						strokeDashoffset: indeterminate ? `${circumference * .1}` : `${circumference - (percent ?? 0) / 100 * circumference}`,
+						...progressColor ? { stroke: progressColor } : {}
+					}
+				})]
+			}),
+			centerLabel ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "circular-progress-label",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center font-medium text-[11px] leading-none",
+				children: centerLabel
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: indeterminate ? indeterminateLabel : `${roundedPercent}% complete`
+			})
+		]
+	});
+}
+//#endregion
+export { CircularProgress };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst indicatorVariants = {\n  default: \"text-primary-invert-bg\",\n  brand: \"text-brand-500-primary\",\n  success: \"text-success-txt\",\n  warning: \"text-warning-txt\",\n  info: \"text-info-txt\",\n  destructive: \"text-danger-txt\",\n  analyzing: \"text-[var(--progress-analyzing)]\",\n  ingesting: \"text-[var(--progress-ingesting)]\",\n} as const;\n\nconst trackVariants = {\n  default: \"text-primary-border\",\n  brand: \"text-brand-500-primary/20\",\n  success: \"text-success-txt/20\",\n  warning: \"text-warning-txt/20\",\n  info: \"text-info-txt/20\",\n  destructive: \"text-danger-txt/20\",\n  analyzing: \"text-primary-invert-bg/20\",\n  ingesting: \"text-primary-invert-bg/20\",\n} as const;\n\ntype CircularProgressVariant = keyof typeof indicatorVariants;\n\ntype CircularProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** Determinate value. Omit for indeterminate/loading state. */\n  value?: number;\n  /** Lower bound used for ARIA/value normalization. */\n  min?: number;\n  /** Upper bound used for ARIA/value normalization. */\n  max?: number;\n  /** Rendered diameter in px. */\n  size?: number;\n  /** Stroke thickness in px. */\n  strokeWidth?: number;\n  /** Semantic colour variant for the progress stroke. */\n  variant?: CircularProgressVariant;\n  /** Semantic colour variant for the track stroke. Defaults to `variant`. */\n  trackVariant?: CircularProgressVariant;\n  /** Explicit progress stroke colour (CSS colour value). Overrides `variant`. */\n  progressColor?: string;\n  /** Explicit track stroke colour (CSS colour value). Overrides `trackVariant`. */\n  trackColor?: string;\n  /** Optional centered label content. */\n  label?: React.ReactNode;\n  /** Render computed percentage text in the center when determinate. */\n  showValueLabel?: boolean;\n  /** Accessible text for indeterminate/loading state. */\n  indeterminateLabel?: string;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/** Circular progress indicator supporting determinate and indeterminate states. */\nfunction CircularProgress({\n  className,\n  value,\n  min = 0,\n  max = 100,\n  size = 48,\n  strokeWidth = 4,\n  variant = \"default\",\n  trackVariant,\n  progressColor,\n  trackColor,\n  label,\n  showValueLabel = false,\n  indeterminateLabel = \"Loading\",\n  style,\n  \"aria-label\": ariaLabelProp,\n  \"aria-valuetext\": ariaValueTextProp,\n  ...props\n}: CircularProgressProps) {\n  const normalizedMax = max > min ? max : min + 100;\n  const boundedValue = value == null ? undefined : clamp(value, min, normalizedMax);\n  const indeterminate = boundedValue == null;\n\n  const percent = indeterminate ? undefined : ((boundedValue - min) / (normalizedMax - min)) * 100;\n  const roundedPercent = percent == null ? undefined : Math.round(percent);\n\n  const normalizedSize = Math.max(size, 12);\n  const normalizedStrokeWidth = clamp(strokeWidth, 1, normalizedSize / 2);\n  const radius = (normalizedSize - normalizedStrokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n\n  const centerLabel =\n    label ?? (showValueLabel && roundedPercent != null ? `${roundedPercent}%` : null);\n  const ariaValueText =\n    ariaValueTextProp ?? (indeterminate ? indeterminateLabel : `${roundedPercent}% complete`);\n\n  return (\n    <div\n      data-slot=\"circular-progress\"\n      data-state={indeterminate ? \"indeterminate\" : \"determinate\"}\n      role=\"progressbar\"\n      aria-label={ariaLabelProp ?? \"Progress\"}\n      aria-valuemin={min}\n      aria-valuemax={normalizedMax}\n      aria-valuenow={indeterminate ? undefined : boundedValue}\n      aria-valuetext={ariaValueText}\n      className={cn(\n        \"relative inline-flex shrink-0 items-center justify-center rounded-full text-primary-txt outline-none focus-visible:ring-3 focus-visible:ring-focus\",\n        className,\n      )}\n      style={{ width: normalizedSize, height: normalizedSize, ...style }}\n      {...props}\n    >\n      <svg\n        data-slot=\"circular-progress-svg\"\n        width={normalizedSize}\n        height={normalizedSize}\n        viewBox={`0 0 ${normalizedSize} ${normalizedSize}`}\n        className={cn(\"size-full -rotate-90\", indeterminate && \"motion-safe:animate-spin\")}\n      >\n        <circle\n          data-slot=\"circular-progress-track\"\n          cx={normalizedSize / 2}\n          cy={normalizedSize / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={normalizedStrokeWidth}\n          className={cn(\n            \"stroke-current\",\n            trackColor ? undefined : trackVariants[trackVariant ?? variant],\n          )}\n          style={trackColor ? { stroke: trackColor } : undefined}\n        />\n        <circle\n          data-slot=\"circular-progress-indicator\"\n          cx={normalizedSize / 2}\n          cy={normalizedSize / 2}\n          r={radius}\n          fill=\"none\"\n          strokeWidth={normalizedStrokeWidth}\n          strokeLinecap=\"round\"\n          className={cn(\n            \"stroke-current motion-reduce:transition-none\",\n            progressColor ? undefined : indicatorVariants[variant],\n            indeterminate ? undefined : \"transition-[stroke-dashoffset] duration-500 ease-out\",\n          )}\n          style={{\n            strokeDasharray: indeterminate\n              ? `${circumference * 0.35} ${circumference}`\n              : `${circumference}`,\n            strokeDashoffset: indeterminate\n              ? `${circumference * 0.1}`\n              : `${circumference - ((percent ?? 0) / 100) * circumference}`,\n            ...(progressColor ? { stroke: progressColor } : {}),\n          }}\n        />\n      </svg>\n\n      {centerLabel ? (\n        <span\n          data-slot=\"circular-progress-label\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center font-medium text-[11px] leading-none\"\n        >\n          {centerLabel}\n        </span>\n      ) : null}\n\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {indeterminate ? indeterminateLabel : `${roundedPercent}% complete`}\n      </span>\n    </div>\n  );\n}\n\nexport { CircularProgress, type CircularProgressProps, type CircularProgressVariant };\n"],"mappings":";;;AAIA,MAAM,oBAAoB;CACxB,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,aAAa;CACb,WAAW;CACX,WAAW;AACb;AAEA,MAAM,gBAAgB;CACpB,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,aAAa;CACb,WAAW;CACX,WAAW;AACb;AA+BA,SAAS,MAAM,OAAe,KAAa,KAAa;CACtD,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;;AAGA,SAAS,iBAAiB,EACxB,WACA,OACA,MAAM,GACN,MAAM,KACN,OAAO,IACP,cAAc,GACd,UAAU,WACV,cACA,eACA,YACA,OACA,iBAAiB,OACjB,qBAAqB,WACrB,OACA,cAAc,eACd,kBAAkB,mBAClB,GAAG,SACqB;CACxB,MAAM,gBAAgB,MAAM,MAAM,MAAM,MAAM;CAC9C,MAAM,eAAe,SAAS,OAAO,KAAA,IAAY,MAAM,OAAO,KAAK,aAAa;CAChF,MAAM,gBAAgB,gBAAgB;CAEtC,MAAM,UAAU,gBAAgB,KAAA,KAAc,eAAe,QAAQ,gBAAgB,OAAQ;CAC7F,MAAM,iBAAiB,WAAW,OAAO,KAAA,IAAY,KAAK,MAAM,OAAO;CAEvE,MAAM,iBAAiB,KAAK,IAAI,MAAM,EAAE;CACxC,MAAM,wBAAwB,MAAM,aAAa,GAAG,iBAAiB,CAAC;CACtE,MAAM,UAAU,iBAAiB,yBAAyB;CAC1D,MAAM,gBAAgB,IAAI,KAAK,KAAK;CAEpC,MAAM,cACJ,UAAU,kBAAkB,kBAAkB,OAAO,GAAG,eAAe,KAAK;CAC9E,MAAM,gBACJ,sBAAsB,gBAAgB,qBAAqB,GAAG,eAAe;CAE/E,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,gBAAgB,kBAAkB;EAC9C,MAAK;EACL,cAAY,iBAAiB;EAC7B,iBAAe;EACf,iBAAe;EACf,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,kBAAgB;EAChB,WAAW,GACT,sJACA,SACF;EACA,OAAO;GAAE,OAAO;GAAgB,QAAQ;GAAgB,GAAG;EAAM;EACjE,GAAI;YAdN;GAgBE,qBAAC,OAAD;IACE,aAAU;IACV,OAAO;IACP,QAAQ;IACR,SAAS,OAAO,eAAe,GAAG;IAClC,WAAW,GAAG,wBAAwB,iBAAiB,0BAA0B;cALnF,CAOE,oBAAC,UAAD;KACE,aAAU;KACV,IAAI,iBAAiB;KACrB,IAAI,iBAAiB;KACrB,GAAG;KACH,MAAK;KACL,aAAa;KACb,WAAW,GACT,kBACA,aAAa,KAAA,IAAY,cAAc,gBAAgB,QACzD;KACA,OAAO,aAAa,EAAE,QAAQ,WAAW,IAAI,KAAA;IAC9C,CAAA,GACD,oBAAC,UAAD;KACE,aAAU;KACV,IAAI,iBAAiB;KACrB,IAAI,iBAAiB;KACrB,GAAG;KACH,MAAK;KACL,aAAa;KACb,eAAc;KACd,WAAW,GACT,gDACA,gBAAgB,KAAA,IAAY,kBAAkB,UAC9C,gBAAgB,KAAA,IAAY,sDAC9B;KACA,OAAO;MACL,iBAAiB,gBACb,GAAG,gBAAgB,IAAK,GAAG,kBAC3B,GAAG;MACP,kBAAkB,gBACd,GAAG,gBAAgB,OACnB,GAAG,iBAAkB,WAAW,KAAK,MAAO;MAChD,GAAI,gBAAgB,EAAE,QAAQ,cAAc,IAAI,CAAC;KACnD;IACD,CAAA,CACE;;GAEJ,cACC,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAU;cAET;GACG,CAAA,IACJ;GAEJ,oBAAC,QAAD;IAAM,WAAU;IAAU,aAAU;cACjC,gBAAgB,qBAAqB,GAAG,eAAe;GACpD,CAAA;EACH;;AAET"}

package/dist/primitives/Collapsible/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#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 }) {

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

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

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

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

package/dist/primitives/Collapsible/index.js

@@ -1,5 +1,5 @@
-import { Collapsible as Collapsible$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "radix-ui";
 //#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 }) {

package/dist/primitives/Command/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.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 lucide_react = require("lucide-react");
 let cmdk = require("cmdk");
 //#region src/primitives/Command/Command.tsx
 /** Command palette root: a filterable list of commands built on `cmdk`. */
@@ -35,7 +36,10 @@ 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 text-muted-txt" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.SearchIcon,
+			className: "size-4 shrink-0 text-muted-txt"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
 			"data-slot": "command-input",
 			className: require_cn.cn("flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt disabled:cursor-not-allowed disabled:opacity-50", className),
 			...props

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

@@ -1 +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        // Figma Command (66:5046): bg/primary panel, radius-12, shadow-md.\n        \"flex h-full w-full flex-col overflow-hidden rounded-12 bg-primary-bg text-primary-txt\",\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-semibold [&_[cmdk-group-heading]]:text-secondary-txt [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-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 text-muted-txt\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt 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-75 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        // Group headings: paragraph small/bold on content/secondary (Figma).\n        \"overflow-hidden p-1 text-primary-txt [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:leading-5 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-secondary-txt\",\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-primary-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        // Figma Command Item: hover bg/muted, active/selected bg/secondary,\n        // radius-6, 3px vertical padding.\n        \"relative flex cursor-default items-center gap-2 rounded-6 px-2 py-0.75 text-sm leading-5 outline-hidden select-none hover:bg-muted-bg active:bg-secondary-bg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\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-sm leading-5 text-muted-txt\", 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,GAET,yFACA,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,iCAAkC,CAAA,GACxD,iBAAA,GAAA,kBAAA,KAACP,KAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,8JACA,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,0DAA0D,SAAS;EACjF,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,GAET,6PACA,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,gCAAgC,SAAS;EACvD,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,GAGT,6YACA,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,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["CommandPrimitive","cn","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","Icon","SearchIcon"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\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        // Figma Command (66:5046): bg/primary panel, radius-12, shadow-md.\n        \"flex h-full w-full flex-col overflow-hidden rounded-12 bg-primary-bg text-primary-txt\",\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-semibold [&_[cmdk-group-heading]]:text-secondary-txt [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-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      <Icon as={SearchIcon} className=\"size-4 shrink-0 text-muted-txt\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt 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-75 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        // Group headings: paragraph small/bold on content/secondary (Figma).\n        \"overflow-hidden p-1 text-primary-txt [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:leading-5 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-secondary-txt\",\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-primary-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        // Figma Command Item: hover bg/muted, active/selected bg/secondary,\n        // radius-6, 3px vertical padding.\n        \"relative flex cursor-default items-center gap-2 rounded-6 px-2 py-0.75 text-sm leading-5 outline-hidden select-none hover:bg-muted-bg active:bg-secondary-bg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\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-sm leading-5 text-muted-txt\", 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":";;;;;;;;;AAiBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,iBAAA,GAAA,kBAAA,KAACA,KAAAA,SAAD;EACE,aAAU;EACV,WAAWC,WAAAA,GAET,yFACA,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,MAAD;GAAM,IAAIC,aAAAA;GAAY,WAAU;EAAkC,CAAA,GAClE,iBAAA,GAAA,kBAAA,KAACR,KAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,8JACA,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,0DAA0D,SAAS;EACjF,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,GAET,6PACA,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,gCAAgC,SAAS;EACvD,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,GAGT,6YACA,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,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,2 +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";
+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 "../../index20.cjs";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

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

@@ -1,2 +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";
+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 "../../index20.js";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/primitives/Command/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../Dialog/index.js";
-import { SearchIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
 import { Command as Command$1 } from "cmdk";
 //#region src/primitives/Command/Command.tsx
 /** Command palette root: a filterable list of commands built on `cmdk`. */
@@ -34,7 +35,10 @@ 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 text-muted-txt" }), /* @__PURE__ */ jsx(Command$1.Input, {
+		children: [/* @__PURE__ */ jsx(Icon, {
+			as: SearchIcon,
+			className: "size-4 shrink-0 text-muted-txt"
+		}), /* @__PURE__ */ jsx(Command$1.Input, {
 			"data-slot": "command-input",
 			className: cn("flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt disabled:cursor-not-allowed disabled:opacity-50", className),
 			...props

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

@@ -1 +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        // Figma Command (66:5046): bg/primary panel, radius-12, shadow-md.\n        \"flex h-full w-full flex-col overflow-hidden rounded-12 bg-primary-bg text-primary-txt\",\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-semibold [&_[cmdk-group-heading]]:text-secondary-txt [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-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 text-muted-txt\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt 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-75 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        // Group headings: paragraph small/bold on content/secondary (Figma).\n        \"overflow-hidden p-1 text-primary-txt [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:leading-5 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-secondary-txt\",\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-primary-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        // Figma Command Item: hover bg/muted, active/selected bg/secondary,\n        // radius-6, 3px vertical padding.\n        \"relative flex cursor-default items-center gap-2 rounded-6 px-2 py-0.75 text-sm leading-5 outline-hidden select-none hover:bg-muted-bg active:bg-secondary-bg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\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-sm leading-5 text-muted-txt\", 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,GAET,yFACA,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,iCAAkC,CAAA,GACxD,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,8JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,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,GAET,6PACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAGT,6YACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["CommandPrimitive"],"sources":["../../../src/primitives/Command/Command.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\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        // Figma Command (66:5046): bg/primary panel, radius-12, shadow-md.\n        \"flex h-full w-full flex-col overflow-hidden rounded-12 bg-primary-bg text-primary-txt\",\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-semibold [&_[cmdk-group-heading]]:text-secondary-txt [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-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      <Icon as={SearchIcon} className=\"size-4 shrink-0 text-muted-txt\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-6 bg-transparent py-3 text-sm leading-5 outline-hidden placeholder:text-muted-txt 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-75 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        // Group headings: paragraph small/bold on content/secondary (Figma).\n        \"overflow-hidden p-1 text-primary-txt [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:leading-5 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-secondary-txt\",\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-primary-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        // Figma Command Item: hover bg/muted, active/selected bg/secondary,\n        // radius-6, 3px vertical padding.\n        \"relative flex cursor-default items-center gap-2 rounded-6 px-2 py-0.75 text-sm leading-5 outline-hidden select-none hover:bg-muted-bg active:bg-secondary-bg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\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-sm leading-5 text-muted-txt\", 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":";;;;;;;;AAiBA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACA,WAAD;EACE,aAAU;EACV,WAAW,GAET,yFACA,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,MAAD;GAAM,IAAI;GAAY,WAAU;EAAkC,CAAA,GAClE,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,8JACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,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,GAET,6PACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,UAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAGT,6YACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ContextMenu/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
 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 }) {
@@ -53,7 +54,10 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: require_cn.cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The popover surface for a nested submenu. */
@@ -91,7 +95,10 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
 		...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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -103,7 +110,10 @@ function ContextMenuRadioItem({ className, children, ...props }) {
 		...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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["ContextMenuPrimitive","cn","ChevronRightIcon","CheckIcon","CircleIcon"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["ContextMenuPrimitive","cn","Icon","ChevronRightIcon","CheckIcon","CircleIcon"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { a as ContextMenuItem, c as ContextMenuRadioGroup, d as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuTrigger, i as ContextMenuGroup, l as ContextMenuRadioItem, m as ContextMenuSubTrigger, n as ContextMenuCheckboxItem, o as ContextMenuLabel, p as ContextMenuSubContent, r as ContextMenuContent, s as ContextMenuPortal, t as ContextMenu, u as ContextMenuSeparator } from "../../index20.cjs";
+import { a as ContextMenuItem, c as ContextMenuRadioGroup, d as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuTrigger, i as ContextMenuGroup, l as ContextMenuRadioItem, m as ContextMenuSubTrigger, n as ContextMenuCheckboxItem, o as ContextMenuLabel, p as ContextMenuSubContent, r as ContextMenuContent, s as ContextMenuPortal, t as ContextMenu, u as ContextMenuSeparator } from "../../index21.cjs";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

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

@@ -1,2 +1,2 @@
-import { a as ContextMenuItem, c as ContextMenuRadioGroup, d as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuTrigger, i as ContextMenuGroup, l as ContextMenuRadioItem, m as ContextMenuSubTrigger, n as ContextMenuCheckboxItem, o as ContextMenuLabel, p as ContextMenuSubContent, r as ContextMenuContent, s as ContextMenuPortal, t as ContextMenu, u as ContextMenuSeparator } from "../../index20.js";
+import { a as ContextMenuItem, c as ContextMenuRadioGroup, d as ContextMenuShortcut, f as ContextMenuSub, h as ContextMenuTrigger, i as ContextMenuGroup, l as ContextMenuRadioItem, m as ContextMenuSubTrigger, n as ContextMenuCheckboxItem, o as ContextMenuLabel, p as ContextMenuSubContent, r as ContextMenuContent, s as ContextMenuPortal, t as ContextMenu, u as ContextMenuSeparator } from "../../index21.js";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/primitives/ContextMenu/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { ContextMenu as ContextMenu$1 } from "radix-ui";
-import { jsx, jsxs } from "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 }) {
@@ -52,7 +53,10 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(Icon, {
+			as: ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The popover surface for a nested submenu. */
@@ -90,7 +94,10 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -102,7 +109,10 @@ function ContextMenuRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ jsx(ContextMenu$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ContextMenuPrimitive"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ContextMenuPrimitive"],"sources":["../../../src/primitives/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a right-click context menu; wires the trigger to its portalled content. */\nfunction ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\n/** The target region that opens the menu on right-click (context menu). */\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\n/** Groups related items together for labelling and accessibility. */\nfunction ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\n/** Portals the menu content into the document body. */\nfunction ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />;\n}\n\n/** Wraps a nested submenu (pair with `ContextMenuSubTrigger` and `ContextMenuSubContent`). */\nfunction ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\n/** Groups `ContextMenuRadioItem`s into a single-select set. */\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\n/** Item that opens a nested submenu; renders a trailing chevron. */\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The popover surface for a nested submenu. */\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The portalled popover surface that holds the menu items. */\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 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\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=context-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\n/** A selectable menu item; supports a `destructive` variant and `inset` alignment. */\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n  /** Visual intent; `destructive` colours the item with the danger palette. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio indicator; use inside `ContextMenuRadioGroup`. */\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that labels a group of items. */\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  /** Adds left padding so the label aligns with items that have a leading icon. */\n  inset?: boolean;\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of items. */\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned text for a keyboard shortcut hint inside an item. */\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n};\n"],"mappings":"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"}

package/dist/primitives/Credits/index.cjs

@@ -1,9 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let lucide_react = require("lucide-react");
+const require_Icon = require("../../Icon.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/Credits/Credits.tsx
-const creditsVariants = (0, require("class-variance-authority").cva)("inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0", {
+const creditsVariants = (0, class_variance_authority.cva)("inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0", {
 	variants: { variant: {
 		default: "border border-primary-border bg-outline-bg text-primary-txt",
 		warning: "border border-transparent bg-warning-bg text-warning-txt",
@@ -29,7 +31,10 @@ function Credits({ className, value, variant, lowThreshold = 200, icon, format =
 		"data-variant": resolved,
 		className: require_cn.cn(creditsVariants({ variant: resolved }), className),
 		...props,
-		children: [icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CirclePlus, { "aria-hidden": "true" }), format(value)]
+		children: [icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.CirclePlus,
+			"aria-hidden": "true"
+		}), format(value)]
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","CirclePlus"],"sources":["../../../src/primitives/Credits/Credits.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { CirclePlus } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Credits — a pill showing a remaining-credits balance. Badge-like, but its own\n// primitive: the colour escalates with how low the balance is (Figma): neutral\n// when healthy, soft amber when low, soft red at zero. The variant is derived\n// from `value` (override with `variant`), and the value is formatted for display.\n\nexport type CreditsVariant = \"default\" | \"warning\" | \"critical\";\n\nconst creditsVariants = cva(\n  \"inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-primary-border bg-outline-bg text-primary-txt\",\n        warning: \"border border-transparent bg-warning-bg text-warning-txt\",\n        critical: \"border border-transparent bg-danger-bg text-danger-txt\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** Escalate the variant as the balance drops. */\nfunction resolveVariant(value: number, lowThreshold: number): CreditsVariant {\n  if (value <= 0) return \"critical\";\n  if (value <= lowThreshold) return \"warning\";\n  return \"default\";\n}\n\n/** Whole-number, thousands-separated (e.g. 9995.79 → \"9,995\"). */\nfunction formatCredits(value: number): string {\n  return Math.floor(value).toLocaleString();\n}\n\ntype CreditsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The numeric balance to display. */\n  value: number;\n  /** Force a variant; by default it is derived from `value`. */\n  variant?: CreditsVariant;\n  /** Balance at/below which the warning variant kicks in. Default 200. */\n  lowThreshold?: number;\n  /** Override the leading icon. */\n  icon?: React.ReactNode;\n  /** Override how the value is rendered. */\n  format?: (value: number) => string;\n};\n\n/** A pill showing a remaining-credits balance, colour-escalating as it drops. */\nfunction Credits({\n  className,\n  value,\n  variant,\n  lowThreshold = 200,\n  icon,\n  format = formatCredits,\n  ...props\n}: CreditsProps) {\n  const resolved = variant ?? resolveVariant(value, lowThreshold);\n  return (\n    <span\n      data-slot=\"credits\"\n      data-variant={resolved}\n      className={cn(creditsVariants({ variant: resolved }), className)}\n      {...props}\n    >\n      {icon ?? <CirclePlus aria-hidden=\"true\" />}\n      {format(value)}\n    </span>\n  );\n}\n\nexport { Credits, creditsVariants, type CreditsProps };\n"],"mappings":";;;;;AAaA,MAAM,mBAAA,qCAAA,EAAA,KACJ,6JACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;AAGA,SAAS,eAAe,OAAe,cAAsC;CAC3E,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,SAAS,cAAc,OAAO;CAClC,OAAO;AACT;;AAGA,SAAS,cAAc,OAAuB;CAC5C,OAAO,KAAK,MAAM,KAAK,EAAE,eAAe;AAC1C;;AAgBA,SAAS,QAAQ,EACf,WACA,OACA,SACA,eAAe,KACf,MACA,SAAS,eACT,GAAG,SACY;CACf,MAAM,WAAW,WAAW,eAAe,OAAO,YAAY;CAC9D,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD,EAAY,eAAY,OAAQ,CAAA,GACxC,OAAO,KAAK,CACT;;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","Icon","CirclePlus"],"sources":["../../../src/primitives/Credits/Credits.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { cva } from \"class-variance-authority\";\nimport { CirclePlus } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Credits — a pill showing a remaining-credits balance. Badge-like, but its own\n// primitive: the colour escalates with how low the balance is (Figma): neutral\n// when healthy, soft amber when low, soft red at zero. The variant is derived\n// from `value` (override with `variant`), and the value is formatted for display.\n\nexport type CreditsVariant = \"default\" | \"warning\" | \"critical\";\n\nconst creditsVariants = cva(\n  \"inline-flex w-fit items-center gap-1 rounded-8 px-2 py-0.5 text-xs leading-4 font-semibold tabular-nums whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-primary-border bg-outline-bg text-primary-txt\",\n        warning: \"border border-transparent bg-warning-bg text-warning-txt\",\n        critical: \"border border-transparent bg-danger-bg text-danger-txt\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** Escalate the variant as the balance drops. */\nfunction resolveVariant(value: number, lowThreshold: number): CreditsVariant {\n  if (value <= 0) return \"critical\";\n  if (value <= lowThreshold) return \"warning\";\n  return \"default\";\n}\n\n/** Whole-number, thousands-separated (e.g. 9995.79 → \"9,995\"). */\nfunction formatCredits(value: number): string {\n  return Math.floor(value).toLocaleString();\n}\n\ntype CreditsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The numeric balance to display. */\n  value: number;\n  /** Force a variant; by default it is derived from `value`. */\n  variant?: CreditsVariant;\n  /** Balance at/below which the warning variant kicks in. Default 200. */\n  lowThreshold?: number;\n  /** Override the leading icon. */\n  icon?: React.ReactNode;\n  /** Override how the value is rendered. */\n  format?: (value: number) => string;\n};\n\n/** A pill showing a remaining-credits balance, colour-escalating as it drops. */\nfunction Credits({\n  className,\n  value,\n  variant,\n  lowThreshold = 200,\n  icon,\n  format = formatCredits,\n  ...props\n}: CreditsProps) {\n  const resolved = variant ?? resolveVariant(value, lowThreshold);\n  return (\n    <span\n      data-slot=\"credits\"\n      data-variant={resolved}\n      className={cn(creditsVariants({ variant: resolved }), className)}\n      {...props}\n    >\n      {icon ?? <Icon as={CirclePlus} aria-hidden=\"true\" />}\n      {format(value)}\n    </span>\n  );\n}\n\nexport { Credits, creditsVariants, type CreditsProps };\n"],"mappings":";;;;;;;AAcA,MAAM,mBAAA,GAAA,yBAAA,KACJ,6JACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,UAAU;CACZ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;;AAGA,SAAS,eAAe,OAAe,cAAsC;CAC3E,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,SAAS,cAAc,OAAO;CAClC,OAAO;AACT;;AAGA,SAAS,cAAc,OAAuB;CAC5C,OAAO,KAAK,MAAM,KAAK,EAAE,eAAe;AAC1C;;AAgBA,SAAS,QAAQ,EACf,WACA,OACA,SACA,eAAe,KACf,MACA,SAAS,eACT,GAAG,SACY;CACf,MAAM,WAAW,WAAW,eAAe,OAAO,YAAY;CAC9D,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,gBAAgB,EAAE,SAAS,SAAS,CAAC,GAAG,SAAS;EAC/D,GAAI;YAJN,CAMG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAM,IAAIC,aAAAA;GAAY,eAAY;EAAQ,CAAA,GAClD,OAAO,KAAK,CACT;;AAEV"}