@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/shadcn/components/ui/checkbox.js

@@ -1,18 +1,33 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 function Checkbox({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CheckboxPrimitive.Root, {
         "data-slot": "checkbox",
-        className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+        className: cn(// Base styles
+        "peer", "size-5", "shrink-0", "rounded-md", "border-[1.5px]", "transition-all", "duration-200", "outline-none", "cursor-pointer", "text-white", // Click animation
+        "active:scale-90", "active:duration-75", // Default state
+        "border-border-primary", "bg-transparent", "hover:bg-bg-tertiary", // Checked state
+        "data-[state=checked]:bg-bg-link", "data-[state=checked]:border-border-link", "data-[state=checked]:text-white", // Indeterminate state
+        "data-[state=indeterminate]:bg-fg-link", "data-[state=indeterminate]:border-fg-link", "data-[state=indeterminate]:text-white", // Disabled states
+        "disabled:cursor-not-allowed", "disabled:active:scale-100", "disabled:border-border-secondary", "disabled:bg-transparent", "disabled:data-[state=checked]:bg-fg-tertiary", "disabled:data-[state=checked]:border-fg-tertiary", "disabled:data-[state=indeterminate]:bg-fg-tertiary", "disabled:data-[state=indeterminate]:border-fg-tertiary", // Focus state
+        "focus-visible:ring-2", "focus-visible:ring-utility-blue/70", className),
         ...props,
         children: /*#__PURE__*/ _jsx(CheckboxPrimitive.Indicator, {
             "data-slot": "checkbox-indicator",
-            className: "flex items-center justify-center text-current transition-none",
-            children: /*#__PURE__*/ _jsx(CheckIcon, {
-                className: "size-3.5"
+            className: "flex items-center justify-center text-white",
+            children: props.checked === "indeterminate" ? /*#__PURE__*/ _jsx(MinusIcon, {
+                className: "size-3.5",
+                style: {
+                    strokeWidth: 3
+                }
+            }) : /*#__PURE__*/ _jsx(CheckIcon, {
+                className: "size-3.5",
+                style: {
+                    strokeWidth: 3
+                }
             })
         })
     });

package/dist/src/shadcn/components/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { CheckIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Checkbox({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tdata-slot=\"checkbox\"\n\t\t\tclassName={cn(\n\t\t\t\t\"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator\n\t\t\t\tdata-slot=\"checkbox-indicator\"\n\t\t\t\tclassName=\"flex items-center justify-center text-current transition-none\"\n\t\t\t>\n\t\t\t\t<CheckIcon className=\"size-3.5\" />\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n}\n\nexport { Checkbox };\n"],"names":["CheckboxPrimitive","CheckIcon","cn","Checkbox","className","props","Root","data-slot","Indicator"],"mappings":"AAAA;;AACA,YAAYA,uBAAuB,2BAA2B;AAC9D,SAASC,SAAS,QAAQ,eAAe;AAGzC,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,SAAS,EACjBC,SAAS,EACT,GAAGC,OACkD;IACrD,qBACC,KAACL,kBAAkBM,IAAI;QACtBC,aAAU;QACVH,WAAWF,GACV,+eACAE;QAEA,GAAGC,KAAK;kBAET,cAAA,KAACL,kBAAkBQ,SAAS;YAC3BD,aAAU;YACVH,WAAU;sBAEV,cAAA,KAACH;gBAAUG,WAAU;;;;AAIzB;AAEA,SAASD,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Checkbox({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tdata-slot=\"checkbox\"\n\t\t\tclassName={cn(\n\t\t\t\t// Base styles\n\t\t\t\t\"peer\",\n\t\t\t\t\"size-5\",\n\t\t\t\t\"shrink-0\",\n\t\t\t\t\"rounded-md\",\n\t\t\t\t\"border-[1.5px]\",\n\t\t\t\t\"transition-all\",\n\t\t\t\t\"duration-200\",\n\t\t\t\t\"outline-none\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"text-white\",\n\t\t\t\t// Click animation\n\t\t\t\t\"active:scale-90\",\n\t\t\t\t\"active:duration-75\",\n\t\t\t\t// Default state\n\t\t\t\t\"border-border-primary\",\n\t\t\t\t\"bg-transparent\",\n\t\t\t\t\"hover:bg-bg-tertiary\",\n\t\t\t\t// Checked state\n\t\t\t\t\"data-[state=checked]:bg-bg-link\",\n\t\t\t\t\"data-[state=checked]:border-border-link\",\n\t\t\t\t\"data-[state=checked]:text-white\",\n\t\t\t\t// Indeterminate state\n\t\t\t\t\"data-[state=indeterminate]:bg-fg-link\",\n\t\t\t\t\"data-[state=indeterminate]:border-fg-link\",\n\t\t\t\t\"data-[state=indeterminate]:text-white\",\n\t\t\t\t// Disabled states\n\t\t\t\t\"disabled:cursor-not-allowed\",\n\t\t\t\t\"disabled:active:scale-100\",\n\t\t\t\t\"disabled:border-border-secondary\",\n\t\t\t\t\"disabled:bg-transparent\",\n\t\t\t\t\"disabled:data-[state=checked]:bg-fg-tertiary\",\n\t\t\t\t\"disabled:data-[state=checked]:border-fg-tertiary\",\n\t\t\t\t\"disabled:data-[state=indeterminate]:bg-fg-tertiary\",\n\t\t\t\t\"disabled:data-[state=indeterminate]:border-fg-tertiary\",\n\t\t\t\t// Focus state\n\t\t\t\t\"focus-visible:ring-2\",\n\t\t\t\t\"focus-visible:ring-utility-blue/70\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator\n\t\t\t\tdata-slot=\"checkbox-indicator\"\n\t\t\t\tclassName=\"flex items-center justify-center text-white\"\n\t\t\t>\n\t\t\t\t{props.checked === \"indeterminate\" ? (\n\t\t\t\t\t<MinusIcon className=\"size-3.5\" style={{ strokeWidth: 3 }} />\n\t\t\t\t) : (\n\t\t\t\t\t<CheckIcon className=\"size-3.5\" style={{ strokeWidth: 3 }} />\n\t\t\t\t)}\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n}\n\nexport { Checkbox };\n"],"names":["CheckboxPrimitive","CheckIcon","MinusIcon","cn","Checkbox","className","props","Root","data-slot","Indicator","checked","style","strokeWidth"],"mappings":"AAAA;;AACA,YAAYA,uBAAuB,2BAA2B;AAC9D,SAASC,SAAS,EAAEC,SAAS,QAAQ,eAAe;AAGpD,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,SAAS,EACjBC,SAAS,EACT,GAAGC,OACkD;IACrD,qBACC,KAACN,kBAAkBO,IAAI;QACtBC,aAAU;QACVH,WAAWF,GACV,cAAc;QACd,QACA,UACA,YACA,cACA,kBACA,kBACA,gBACA,gBACA,kBACA,cACA,kBAAkB;QAClB,mBACA,sBACA,gBAAgB;QAChB,yBACA,kBACA,wBACA,gBAAgB;QAChB,mCACA,2CACA,mCACA,sBAAsB;QACtB,yCACA,6CACA,yCACA,kBAAkB;QAClB,+BACA,6BACA,oCACA,2BACA,gDACA,oDACA,sDACA,0DACA,cAAc;QACd,wBACA,sCACAE;QAEA,GAAGC,KAAK;kBAET,cAAA,KAACN,kBAAkBS,SAAS;YAC3BD,aAAU;YACVH,WAAU;sBAETC,MAAMI,OAAO,KAAK,gCAClB,KAACR;gBAAUG,WAAU;gBAAWM,OAAO;oBAAEC,aAAa;gBAAE;+BAExD,KAACX;gBAAUI,WAAU;gBAAWM,OAAO;oBAAEC,aAAa;gBAAE;;;;AAK7D;AAEA,SAASR,QAAQ,GAAG"}

package/dist/src/shadcn/components/ui/checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/checkbox.stories.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,IAAI;;CAEM,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,IAAI;;CAqCA,CAAC"}
+{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/checkbox.stories.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,IAAI;;CAEM,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,IAAI;;CAiCA,CAAC"}

package/dist/src/shadcn/components/ui/checkbox.stories.js

@@ -17,65 +17,74 @@ export const Demo = {
                         }),
                         /*#__PURE__*/ _jsx(Label, {
                             htmlFor: "terms",
-                            children: "Accept terms and conditions"
+                            children: "Unchecked"
                         })
                     ]
                 }),
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex items-start gap-3",
+                    className: "flex items-center gap-3",
                     children: [
                         /*#__PURE__*/ _jsx(Checkbox, {
                             id: "terms-2",
                             defaultChecked: true
                         }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "grid gap-2",
-                            children: [
-                                /*#__PURE__*/ _jsx(Label, {
-                                    htmlFor: "terms-2",
-                                    children: "Accept terms and conditions"
-                                }),
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-muted-foreground text-sm",
-                                    children: "By clicking this checkbox, you agree to the terms and conditions."
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(Label, {
+                            htmlFor: "terms-2",
+                            children: "Checked"
                         })
                     ]
                 }),
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex items-start gap-3",
+                    className: "flex items-center gap-3",
                     children: [
                         /*#__PURE__*/ _jsx(Checkbox, {
-                            id: "toggle",
+                            id: "indeterminate",
+                            checked: "indeterminate"
+                        }),
+                        /*#__PURE__*/ _jsx(Label, {
+                            htmlFor: "indeterminate",
+                            children: "Indeterminate"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-3",
+                    children: [
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            id: "disabled",
                             disabled: true
                         }),
                         /*#__PURE__*/ _jsx(Label, {
-                            htmlFor: "toggle",
-                            children: "Enable notifications"
+                            htmlFor: "disabled",
+                            children: "Disabled unchecked"
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(Label, {
-                    className: "hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950",
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-3",
+                    children: [
+                        /*#__PURE__*/ _jsx(Checkbox, {
+                            id: "disabled-checked",
+                            disabled: true,
+                            defaultChecked: true
+                        }),
+                        /*#__PURE__*/ _jsx(Label, {
+                            htmlFor: "disabled-checked",
+                            children: "Disabled checked"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-3",
                     children: [
                         /*#__PURE__*/ _jsx(Checkbox, {
-                            id: "toggle-2",
-                            defaultChecked: true,
-                            className: "data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+                            id: "disabled-indeterminate",
+                            disabled: true,
+                            checked: "indeterminate"
                         }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "grid gap-1.5 font-normal",
-                            children: [
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-sm leading-none font-medium",
-                                    children: "Enable notifications"
-                                }),
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: "text-muted-foreground text-sm",
-                                    children: "You can enable or disable notifications at any time."
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(Label, {
+                            htmlFor: "disabled-indeterminate",
+                            children: "Disabled indeterminate"
                         })
                     ]
                 })

package/dist/src/shadcn/components/ui/checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/checkbox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Checkbox } from \"#shadcn/components/ui/checkbox\";\nimport { Label } from \"#shadcn/components/ui/label\";\n\nconst meta = {\n\ttitle: \"Component/Checkbox\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<div className=\"flex flex-col gap-6\">\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"terms\" />\n\t\t\t\t<Label htmlFor=\"terms\">Accept terms and conditions</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-start gap-3\">\n\t\t\t\t<Checkbox id=\"terms-2\" defaultChecked />\n\t\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t\t<Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n\t\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t\tBy clicking this checkbox, you agree to the terms and conditions.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-start gap-3\">\n\t\t\t\t<Checkbox id=\"toggle\" disabled />\n\t\t\t\t<Label htmlFor=\"toggle\">Enable notifications</Label>\n\t\t\t</div>\n\t\t\t<Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n\t\t\t\t<Checkbox\n\t\t\t\t\tid=\"toggle-2\"\n\t\t\t\t\tdefaultChecked\n\t\t\t\t\tclassName=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid gap-1.5 font-normal\">\n\t\t\t\t\t<p className=\"text-sm leading-none font-medium\">\n\t\t\t\t\t\tEnable notifications\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t\tYou can enable or disable notifications at any time.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</Label>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Checkbox","Label","meta","title","Demo","render","div","className","id","htmlFor","defaultChecked","p","disabled"],"mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAiC;AAC1D,SAASC,KAAK,QAAQ,aAA8B;AAEpD,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,MAACC;YAAIC,WAAU;;8BACd,MAACD;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;;sCACb,KAACP;4BAAMQ,SAAQ;sCAAQ;;;;8BAExB,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAAUE,cAAc;;sCACrC,MAACJ;4BAAIC,WAAU;;8CACd,KAACN;oCAAMQ,SAAQ;8CAAU;;8CACzB,KAACE;oCAAEJ,WAAU;8CAAgC;;;;;;8BAK/C,MAACD;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAASI,QAAQ;;sCAC9B,KAACX;4BAAMQ,SAAQ;sCAAS;;;;8BAEzB,MAACR;oBAAMM,WAAU;;sCAChB,KAACP;4BACAQ,IAAG;4BACHE,cAAc;4BACdH,WAAU;;sCAEX,MAACD;4BAAIC,WAAU;;8CACd,KAACI;oCAAEJ,WAAU;8CAAmC;;8CAGhD,KAACI;oCAAEJ,WAAU;8CAAgC;;;;;;;;AAOlD,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/checkbox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Checkbox } from \"#shadcn/components/ui/checkbox\";\nimport { Label } from \"#shadcn/components/ui/label\";\n\nconst meta = {\n\ttitle: \"Component/Checkbox\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<div className=\"flex flex-col gap-6\">\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"terms\" />\n\t\t\t\t<Label htmlFor=\"terms\">Unchecked</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"terms-2\" defaultChecked />\n\t\t\t\t<Label htmlFor=\"terms-2\">Checked</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"indeterminate\" checked=\"indeterminate\" />\n\t\t\t\t<Label htmlFor=\"indeterminate\">Indeterminate</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"disabled\" disabled />\n\t\t\t\t<Label htmlFor=\"disabled\">Disabled unchecked</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox id=\"disabled-checked\" disabled defaultChecked />\n\t\t\t\t<Label htmlFor=\"disabled-checked\">Disabled checked</Label>\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Checkbox\n\t\t\t\t\tid=\"disabled-indeterminate\"\n\t\t\t\t\tdisabled\n\t\t\t\t\tchecked=\"indeterminate\"\n\t\t\t\t/>\n\t\t\t\t<Label htmlFor=\"disabled-indeterminate\">Disabled indeterminate</Label>\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Checkbox","Label","meta","title","Demo","render","div","className","id","htmlFor","defaultChecked","checked","disabled"],"mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAiC;AAC1D,SAASC,KAAK,QAAQ,aAA8B;AAEpD,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,MAACC;YAAIC,WAAU;;8BACd,MAACD;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;;sCACb,KAACP;4BAAMQ,SAAQ;sCAAQ;;;;8BAExB,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAAUE,cAAc;;sCACrC,KAACT;4BAAMQ,SAAQ;sCAAU;;;;8BAE1B,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAAgBG,SAAQ;;sCACrC,KAACV;4BAAMQ,SAAQ;sCAAgB;;;;8BAEhC,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAAWI,QAAQ;;sCAChC,KAACX;4BAAMQ,SAAQ;sCAAW;;;;8BAE3B,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BAASQ,IAAG;4BAAmBI,QAAQ;4BAACF,cAAc;;sCACvD,KAACT;4BAAMQ,SAAQ;sCAAmB;;;;8BAEnC,MAACH;oBAAIC,WAAU;;sCACd,KAACP;4BACAQ,IAAG;4BACHI,QAAQ;4BACRD,SAAQ;;sCAET,KAACV;4BAAMQ,SAAQ;sCAAyB;;;;;;AAI5C,EAAkB"}

package/dist/src/shadcn/components/ui/combobox.d.ts

@@ -0,0 +1,18 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, className, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxDemo(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=combobox.d.ts.map

package/dist/src/shadcn/components/ui/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/combobox.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED,UAAU,aAAa;IACtB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACxB,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAAgC,EAChC,iBAA+B,EAC/B,SAA+B,EAC/B,QAAgB,EAChB,SAAS,GACT,EAAE,aAAa,2CA0Ef;AAWD,wBAAgB,YAAY,4CAY3B"}

package/dist/src/shadcn/components/ui/combobox.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Select, SelectContent, SelectTrigger, SelectValue } from "./select.js";
+import { cn } from "../../lib/utils.js";
+export function Combobox({ options, value, onValueChange, placeholder = "Select option...", searchPlaceholder = "Search...", emptyText = "No options found.", disabled = false, className }) {
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const inputRef = React.useRef(null);
+    const filteredOptions = React.useMemo(()=>{
+        if (!searchValue) return options;
+        return options.filter((option)=>option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    }, [
+        options,
+        searchValue
+    ]);
+    const selectedOption = options.find((option)=>option.value === value);
+    // Reset search when closing and auto-focus when opening
+    React.useEffect(()=>{
+        if (!open) {
+            setSearchValue("");
+        } else {
+            // Auto-focus on search input when opening
+            setTimeout(()=>{
+                inputRef.current?.focus();
+            }, 0);
+        }
+    }, [
+        open
+    ]);
+    return /*#__PURE__*/ _jsxs(Select, {
+        value: value || "",
+        ...onValueChange && {
+            onValueChange
+        },
+        disabled: disabled,
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsx(SelectTrigger, {
+                className: className,
+                children: /*#__PURE__*/ _jsx(SelectValue, {
+                    placeholder: placeholder,
+                    children: selectedOption?.label
+                })
+            }),
+            /*#__PURE__*/ _jsx(SelectContent, {
+                className: "p-0 [&_[data-radix-select-viewport]]:p-0",
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    className: "w-full",
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandInput, {
+                            ref: inputRef,
+                            placeholder: searchPlaceholder,
+                            value: searchValue,
+                            onValueChange: setSearchValue
+                        }),
+                        /*#__PURE__*/ _jsxs(CommandList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(CommandEmpty, {
+                                    children: emptyText
+                                }),
+                                filteredOptions.map((option)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                        value: option.value,
+                                        "data-state": value === option.value ? "checked" : undefined,
+                                        onSelect: (currentValue)=>{
+                                            onValueChange?.(currentValue);
+                                            setOpen(false);
+                                        },
+                                        children: [
+                                            option.label,
+                                            /*#__PURE__*/ _jsx(CheckIcon, {
+                                                className: cn("ml-auto size-4", value === option.value ? "opacity-100" : "opacity-0")
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+// Demo component for Storybook
+const demoOptions = [
+    {
+        value: "next.js",
+        label: "Next.js"
+    },
+    {
+        value: "sveltekit",
+        label: "SvelteKit"
+    },
+    {
+        value: "nuxt.js",
+        label: "Nuxt.js"
+    },
+    {
+        value: "remix",
+        label: "Remix"
+    },
+    {
+        value: "astro",
+        label: "Astro"
+    }
+];
+export function ComboboxDemo() {
+    const [value, setValue] = React.useState("");
+    return /*#__PURE__*/ _jsx(Combobox, {
+        options: demoOptions,
+        value: value,
+        onValueChange: setValue,
+        placeholder: "Select framework...",
+        searchPlaceholder: "Search framework..."
+    });
+}
+
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"#shadcn/components/ui/command\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectTrigger,\n\tSelectValue,\n} from \"#shadcn/components/ui/select\";\nimport { cn } from \"#shadcn/lib/utils\";\n\nexport interface ComboboxOption {\n\tvalue: string;\n\tlabel: string;\n}\n\ninterface ComboboxProps {\n\toptions: ComboboxOption[];\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\tplaceholder?: string;\n\tsearchPlaceholder?: string;\n\temptyText?: string;\n\tdisabled?: boolean;\n\tclassName?: string;\n}\n\nexport function Combobox({\n\toptions,\n\tvalue,\n\tonValueChange,\n\tplaceholder = \"Select option...\",\n\tsearchPlaceholder = \"Search...\",\n\temptyText = \"No options found.\",\n\tdisabled = false,\n\tclassName,\n}: ComboboxProps) {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [searchValue, setSearchValue] = React.useState(\"\");\n\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\tconst filteredOptions = React.useMemo(() => {\n\t\tif (!searchValue) return options;\n\t\treturn options.filter((option) =>\n\t\t\toption.label.toLowerCase().includes(searchValue.toLowerCase()),\n\t\t);\n\t}, [options, searchValue]);\n\n\tconst selectedOption = options.find((option) => option.value === value);\n\n\t// Reset search when closing and auto-focus when opening\n\tReact.useEffect(() => {\n\t\tif (!open) {\n\t\t\tsetSearchValue(\"\");\n\t\t} else {\n\t\t\t// Auto-focus on search input when opening\n\t\t\tsetTimeout(() => {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}, 0);\n\t\t}\n\t}, [open]);\n\n\treturn (\n\t\t<Select\n\t\t\tvalue={value || \"\"}\n\t\t\t{...(onValueChange && { onValueChange })}\n\t\t\tdisabled={disabled}\n\t\t\topen={open}\n\t\t\tonOpenChange={setOpen}\n\t\t>\n\t\t\t<SelectTrigger className={className}>\n\t\t\t\t<SelectValue placeholder={placeholder}>\n\t\t\t\t\t{selectedOption?.label}\n\t\t\t\t</SelectValue>\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent className=\"p-0 [&_[data-radix-select-viewport]]:p-0\">\n\t\t\t\t<Command className=\"w-full\">\n\t\t\t\t\t<CommandInput\n\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\t\tonValueChange={setSearchValue}\n\t\t\t\t\t/>\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>{emptyText}</CommandEmpty>\n\n\t\t\t\t\t\t{filteredOptions.map((option) => (\n\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\t\tdata-state={value === option.value ? \"checked\" : undefined}\n\t\t\t\t\t\t\t\tonSelect={(currentValue) => {\n\t\t\t\t\t\t\t\t\tonValueChange?.(currentValue);\n\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"ml-auto size-4\",\n\t\t\t\t\t\t\t\t\t\tvalue === option.value ? \"opacity-100\" : \"opacity-0\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</SelectContent>\n\t\t</Select>\n\t);\n}\n\n// Demo component for Storybook\nconst demoOptions = [\n\t{ value: \"next.js\", label: \"Next.js\" },\n\t{ value: \"sveltekit\", label: \"SvelteKit\" },\n\t{ value: \"nuxt.js\", label: \"Nuxt.js\" },\n\t{ value: \"remix\", label: \"Remix\" },\n\t{ value: \"astro\", label: \"Astro\" },\n];\n\nexport function ComboboxDemo() {\n\tconst [value, setValue] = React.useState(\"\");\n\n\treturn (\n\t\t<Combobox\n\t\t\toptions={demoOptions}\n\t\t\tvalue={value}\n\t\t\tonValueChange={setValue}\n\t\t\tplaceholder=\"Select framework...\"\n\t\t\tsearchPlaceholder=\"Search framework...\"\n\t\t/>\n\t);\n}\n"],"names":["CheckIcon","React","Command","CommandEmpty","CommandInput","CommandItem","CommandList","Select","SelectContent","SelectTrigger","SelectValue","cn","Combobox","options","value","onValueChange","placeholder","searchPlaceholder","emptyText","disabled","className","open","setOpen","useState","searchValue","setSearchValue","inputRef","useRef","filteredOptions","useMemo","filter","option","label","toLowerCase","includes","selectedOption","find","useEffect","setTimeout","current","focus","onOpenChange","ref","map","data-state","undefined","onSelect","currentValue","demoOptions","ComboboxDemo","setValue"],"mappings":"AAAA;;AAEA,SAASA,SAAS,QAAQ,eAAe;AACzC,YAAYC,WAAW,QAAQ;AAC/B,SACCC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,WAAW,QACL,eAAgC;AACvC,SACCC,MAAM,EACNC,aAAa,EACbC,aAAa,EACbC,WAAW,QACL,cAA+B;AACtC,SAASC,EAAE,QAAQ,qBAAoB;AAkBvC,OAAO,SAASC,SAAS,EACxBC,OAAO,EACPC,KAAK,EACLC,aAAa,EACbC,cAAc,kBAAkB,EAChCC,oBAAoB,WAAW,EAC/BC,YAAY,mBAAmB,EAC/BC,WAAW,KAAK,EAChBC,SAAS,EACM;IACf,MAAM,CAACC,MAAMC,QAAQ,GAAGrB,MAAMsB,QAAQ,CAAC;IACvC,MAAM,CAACC,aAAaC,eAAe,GAAGxB,MAAMsB,QAAQ,CAAC;IACrD,MAAMG,WAAWzB,MAAM0B,MAAM,CAAmB;IAEhD,MAAMC,kBAAkB3B,MAAM4B,OAAO,CAAC;QACrC,IAAI,CAACL,aAAa,OAAOX;QACzB,OAAOA,QAAQiB,MAAM,CAAC,CAACC,SACtBA,OAAOC,KAAK,CAACC,WAAW,GAAGC,QAAQ,CAACV,YAAYS,WAAW;IAE7D,GAAG;QAACpB;QAASW;KAAY;IAEzB,MAAMW,iBAAiBtB,QAAQuB,IAAI,CAAC,CAACL,SAAWA,OAAOjB,KAAK,KAAKA;IAEjE,wDAAwD;IACxDb,MAAMoC,SAAS,CAAC;QACf,IAAI,CAAChB,MAAM;YACVI,eAAe;QAChB,OAAO;YACN,0CAA0C;YAC1Ca,WAAW;gBACVZ,SAASa,OAAO,EAAEC;YACnB,GAAG;QACJ;IACD,GAAG;QAACnB;KAAK;IAET,qBACC,MAACd;QACAO,OAAOA,SAAS;QACf,GAAIC,iBAAiB;YAAEA;QAAc,CAAC;QACvCI,UAAUA;QACVE,MAAMA;QACNoB,cAAcnB;;0BAEd,KAACb;gBAAcW,WAAWA;0BACzB,cAAA,KAACV;oBAAYM,aAAaA;8BACxBmB,gBAAgBH;;;0BAGnB,KAACxB;gBAAcY,WAAU;0BACxB,cAAA,MAAClB;oBAAQkB,WAAU;;sCAClB,KAAChB;4BACAsC,KAAKhB;4BACLV,aAAaC;4BACbH,OAAOU;4BACPT,eAAeU;;sCAEhB,MAACnB;;8CACA,KAACH;8CAAce;;gCAEdU,gBAAgBe,GAAG,CAAC,CAACZ,uBACrB,MAAC1B;wCAEAS,OAAOiB,OAAOjB,KAAK;wCACnB8B,cAAY9B,UAAUiB,OAAOjB,KAAK,GAAG,YAAY+B;wCACjDC,UAAU,CAACC;4CACVhC,gBAAgBgC;4CAChBzB,QAAQ;wCACT;;4CAECS,OAAOC,KAAK;0DACb,KAAChC;gDACAoB,WAAWT,GACV,kBACAG,UAAUiB,OAAOjB,KAAK,GAAG,gBAAgB;;;uCAZtCiB,OAAOjB,KAAK;;;;;;;;AAsBzB;AAEA,+BAA+B;AAC/B,MAAMkC,cAAc;IACnB;QAAElC,OAAO;QAAWkB,OAAO;IAAU;IACrC;QAAElB,OAAO;QAAakB,OAAO;IAAY;IACzC;QAAElB,OAAO;QAAWkB,OAAO;IAAU;IACrC;QAAElB,OAAO;QAASkB,OAAO;IAAQ;IACjC;QAAElB,OAAO;QAASkB,OAAO;IAAQ;CACjC;AAED,OAAO,SAASiB;IACf,MAAM,CAACnC,OAAOoC,SAAS,GAAGjD,MAAMsB,QAAQ,CAAC;IAEzC,qBACC,KAACX;QACAC,SAASmC;QACTlC,OAAOA;QACPC,eAAemC;QACflC,aAAY;QACZC,mBAAkB;;AAGrB"}

package/dist/src/shadcn/components/ui/combobox.stories.d.ts

@@ -0,0 +1,11 @@
+import { ComboboxDemo } from "./combobox";
+declare const meta: {
+    title: string;
+    component: typeof ComboboxDemo;
+    argTypes: {};
+};
+export default meta;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=combobox.stories.d.ts.map

package/dist/src/shadcn/components/ui/combobox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/combobox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,QAAA,MAAM,IAAI;;;;CAIM,CAAC;AACjB,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,OAAO;;CAMH,CAAC"}

package/dist/src/shadcn/components/ui/combobox.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComboboxDemo } from "./combobox.js";
+const meta = {
+    title: "Component/Combobox",
+    component: ComboboxDemo,
+    argTypes: {}
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-[560px]",
+            children: /*#__PURE__*/ _jsx(ComboboxDemo, {})
+        })
+};
+
+//# sourceMappingURL=combobox.stories.js.map

package/dist/src/shadcn/components/ui/combobox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/combobox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { ComboboxDemo } from \"./combobox\";\n\nconst meta = {\n\ttitle: \"Component/Combobox\",\n\tcomponent: ComboboxDemo,\n\targTypes: {},\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\trender: () => (\n\t\t<div className=\"w-[560px]\">\n\t\t\t<ComboboxDemo />\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["ComboboxDemo","meta","title","component","argTypes","Default","render","div","className"],"mappings":";AACA,SAASA,YAAY,QAAQ,gBAAa;AAE1C,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,UAAU,CAAC;AACZ;AACA,eAAeH,KAAK;AAIpB,OAAO,MAAMI,UAAU;IACtBC,QAAQ,kBACP,KAACC;YAAIC,WAAU;sBACd,cAAA,KAACR;;AAGJ,EAAkB"}

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

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EACN,MAAM,EAKN,MAAM,8BAA8B,CAAC;AAGtC,iBAAS,OAAO,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED,iBAAS,aAAa,CAAC,EACtB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,2CAiBA;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAiBrD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,YAAY,CAAC,EACrB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED,iBAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAepD;AAED,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GAChB,CAAC"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EACN,MAAM,EAKN,MAAM,8BAA8B,CAAC;AAuLtC,iBAAS,OAAO,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAQ/C;AAED,iBAAS,aAAa,CAAC,EACtB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,2CAeA;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAcrD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAQpD;AAED,iBAAS,YAAY,CAAC,EACrB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAQpD;AAED,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GAChB,CAAC"}

package/dist/src/shadcn/components/ui/command.js

@@ -3,10 +3,71 @@ import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import { cn } from "../../lib/utils.js";
+// Command Root
+const commandStyles = cn(// Layout
+"flex", "h-full", "w-full", "flex-col", "overflow-hidden", "rounded-md", // Colors
+"bg-bg-primary", "text-text-primary");
+// Command Dialog
+const commandDialogContentStyles = cn(// Layout
+"overflow-hidden", "p-0");
+const commandDialogCommandStyles = cn(// Group headings
+"[&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:font-medium", // Groups
+"[&_[cmdk-group]]:px-2", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", // Input wrapper
+"[&_[cmdk-input-wrapper]]:h-12", "**:data-[slot=command-input-wrapper]:h-12", // Input wrapper SVG
+"[&_[cmdk-input-wrapper]_svg]:h-5", "[&_[cmdk-input-wrapper]_svg]:w-5", // Input
+"[&_[cmdk-input]]:h-12", // Items
+"[&_[cmdk-item]]:px-2", "[&_[cmdk-item]]:py-3", // Item SVG
+"[&_[cmdk-item]_svg]:h-5", "[&_[cmdk-item]_svg]:w-5");
+// Command Input Wrapper
+const commandInputWrapperStyles = cn(// Layout
+"flex", "h-9", "items-center", "gap-2", "px-3", // Border
+"border-b", "border-border-separator", // Animation
+"transition-colors", "duration-300");
+// Command Input Icon
+const commandInputIconStyles = cn(// Size
+"size-4", "shrink-0", // Colors
+"text-text-tertiary");
+// Command Input
+const commandInputStyles = cn(// Layout
+"flex", "h-10", "w-full", "rounded-md", "py-3", // Background
+"bg-transparent", // Typography
+"typo-body", // Colors
+"text-text-primary", "placeholder:text-text-quternary", "file:text-text-primary", // States
+"outline-hidden", "disabled:cursor-not-allowed", "disabled:opacity-50");
+// Command List
+const commandListStyles = cn(// Layout
+"max-h-[300px]", "scroll-py-1", // Overflow
+"overflow-x-hidden", "overflow-y-auto", "p-2");
+// Command Empty
+const commandEmptyStyles = cn(// Layout
+"py-6", "text-center", // Typography
+"typo-body", // Colors
+"text-text-tertiary");
+// Command Group
+const commandGroupStyles = cn(// Layout
+"overflow-hidden", "p-1", "group", // Colors
+"text-text-tertiary", // Group heading styles
+"[&_[cmdk-group-heading]]:text-text-quaternary", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-xs");
+// Command Separator
+const commandSeparatorStyles = cn(// Layout
+"-mx-1", "h-px", // Colors
+"bg-border-separator");
+// Command Item
+const commandItemStyles = cn(// Layout
+"relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-md", "px-2", "py-1.5", "select-none", // Typography
+"typo-body", // Colors
+"text-text-primary", // States
+"outline-hidden", "data-[state=checked]:bg-bg-tertiary", "group-hover:data-[state=checked]:bg-transparent", "hover:bg-bg-tertiary", "data-[state=checked]:text-text-primary", "data-[disabled=true]:pointer-events-none", "data-[disabled=true]:opacity-50", // SVG styles
+"[&_svg:not([class*='text-'])]:text-text-quaternary", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4");
+// Command Shortcut
+const commandShortcutStyles = cn(// Layout
+"ml-auto", // Typography
+"typo-body", "tracking-widest", // Colors
+"text-text-quaternary");
 function Command({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive, {
         "data-slot": "command",
-        className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
+        className: cn(commandStyles, className),
         ...props
     });
 }
@@ -26,10 +87,10 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
                 ]
             }),
             /*#__PURE__*/ _jsx(DialogContent, {
-                className: cn("overflow-hidden p-0", className),
+                className: cn(commandDialogContentStyles, className),
                 showCloseButton: showCloseButton,
                 children: /*#__PURE__*/ _jsx(Command, {
-                    className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+                    className: commandDialogCommandStyles,
                     children: children
                 })
             })
@@ -39,14 +100,14 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
 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",
+        className: commandInputWrapperStyles,
         children: [
             /*#__PURE__*/ _jsx(SearchIcon, {
-                className: "size-4 shrink-0 opacity-50"
+                className: commandInputIconStyles
             }),
             /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
                 "data-slot": "command-input",
-                className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+                className: cn(commandInputStyles, className),
                 ...props
             })
         ]
@@ -55,42 +116,42 @@ function CommandInput({ className, ...props }) {
 function CommandList({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
         "data-slot": "command-list",
-        className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+        className: cn(commandListStyles, className),
         ...props
     });
 }
 function CommandEmpty({ ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
         "data-slot": "command-empty",
-        className: "py-6 text-center text-sm",
+        className: commandEmptyStyles,
         ...props
     });
 }
 function CommandGroup({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
         "data-slot": "command-group",
-        className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+        className: cn(commandGroupStyles, className),
         ...props
     });
 }
 function CommandSeparator({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
         "data-slot": "command-separator",
-        className: cn("bg-border -mx-1 h-px", className),
+        className: cn(commandSeparatorStyles, className),
         ...props
     });
 }
 function CommandItem({ className, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.Item, {
         "data-slot": "command-item",
-        className: cn("data-[selected=true]:bg-(--color-surface-1) text-(--color-elements-assistive)", "data-[selected=true]:text-(--color-elements-readable) [&_svg:not([class*='text-'])]:text-muted-foreground", "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn(commandItemStyles, className),
         ...props
     });
 }
 function CommandShortcut({ className, ...props }) {
     return /*#__PURE__*/ _jsx("span", {
         "data-slot": "command-shortcut",
-        className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
+        className: cn(commandShortcutStyles, className),
         ...props
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"#shadcn/components/ui/dialog\";\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Command({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n\treturn (\n\t\t<CommandPrimitive\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandDialog({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run...\",\n\tchildren,\n\tclassName,\n\tshowCloseButton = true,\n\t...props\n}: React.ComponentProps<typeof Dialog> & {\n\ttitle?: string;\n\tdescription?: string;\n\tclassName?: string;\n\tshowCloseButton?: boolean;\n}) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent\n\t\t\t\tclassName={cn(\"overflow-hidden p-0\", className)}\n\t\t\t\tshowCloseButton={showCloseButton}\n\t\t\t>\n\t\t\t\t<Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t\t{children}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\nfunction CommandInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"command-input-wrapper\"\n\t\t\tclassName=\"flex h-9 items-center gap-2 border-b px-3\"\n\t\t>\n\t\t\t<SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t\t<CommandPrimitive.Input\n\t\t\t\tdata-slot=\"command-input\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction CommandList({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n\treturn (\n\t\t<CommandPrimitive.List\n\t\t\tdata-slot=\"command-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandEmpty({\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n\treturn (\n\t\t<CommandPrimitive.Empty\n\t\t\tdata-slot=\"command-empty\"\n\t\t\tclassName=\"py-6 text-center text-sm\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandGroup({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n\treturn (\n\t\t<CommandPrimitive.Group\n\t\t\tdata-slot=\"command-group\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandSeparator({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n\treturn (\n\t\t<CommandPrimitive.Separator\n\t\t\tdata-slot=\"command-separator\"\n\t\t\tclassName={cn(\"bg-border -mx-1 h-px\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandItem({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n\treturn (\n\t\t<CommandPrimitive.Item\n\t\t\tdata-slot=\"command-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[selected=true]:bg-(--color-surface-1) text-(--color-elements-assistive)\",\n\t\t\t\t\"data-[selected=true]:text-(--color-elements-readable) [&_svg:not([class*='text-'])]:text-muted-foreground\",\n\t\t\t\t\"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none\",\n\t\t\t\t\"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none\",\n\t\t\t\t\"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground ml-auto text-xs tracking-widest\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n"],"names":["Command","CommandPrimitive","SearchIcon","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","cn","className","props","data-slot","CommandDialog","title","description","children","showCloseButton","CommandInput","div","Input","CommandList","List","CommandEmpty","Empty","CommandGroup","Group","CommandSeparator","Separator","CommandItem","Item","CommandShortcut","span"],"mappings":";AAAA,SAASA,WAAWC,gBAAgB,QAAQ,OAAO;AACnD,SAASC,UAAU,QAAQ,eAAe;AAE1C,SACCC,MAAM,EACNC,aAAa,EACbC,iBAAiB,EACjBC,YAAY,EACZC,WAAW,QACL,cAA+B;AACtC,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASR,QAAQ,EAChBS,SAAS,EACT,GAAGC,OAC4C;IAC/C,qBACC,KAACT;QACAU,aAAU;QACVF,WAAWD,GACV,6FACAC;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASE,cAAc,EACtBC,QAAQ,iBAAiB,EACzBC,cAAc,gCAAgC,EAC9CC,QAAQ,EACRN,SAAS,EACTO,kBAAkB,IAAI,EACtB,GAAGN,OAMH;IACA,qBACC,MAACP;QAAQ,GAAGO,KAAK;;0BAChB,MAACJ;gBAAaG,WAAU;;kCACvB,KAACF;kCAAaM;;kCACd,KAACR;kCAAmBS;;;;0BAErB,KAACV;gBACAK,WAAWD,GAAG,uBAAuBC;gBACrCO,iBAAiBA;0BAEjB,cAAA,KAAChB;oBAAQS,WAAU;8BACjBM;;;;;AAKN;AAEA,SAASE,aAAa,EACrBR,SAAS,EACT,GAAGC,OACkD;IACrD,qBACC,MAACQ;QACAP,aAAU;QACVF,WAAU;;0BAEV,KAACP;gBAAWO,WAAU;;0BACtB,KAACR,iBAAiBkB,KAAK;gBACtBR,aAAU;gBACVF,WAAWD,GACV,4JACAC;gBAEA,GAAGC,KAAK;;;;AAIb;AAEA,SAASU,YAAY,EACpBX,SAAS,EACT,GAAGC,OACiD;IACpD,qBACC,KAACT,iBAAiBoB,IAAI;QACrBV,aAAU;QACVF,WAAWD,GACV,+DACAC;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASY,aAAa,EACrB,GAAGZ,OACkD;IACrD,qBACC,KAACT,iBAAiBsB,KAAK;QACtBZ,aAAU;QACVF,WAAU;QACT,GAAGC,KAAK;;AAGZ;AAEA,SAASc,aAAa,EACrBf,SAAS,EACT,GAAGC,OACkD;IACrD,qBACC,KAACT,iBAAiBwB,KAAK;QACtBd,aAAU;QACVF,WAAWD,GACV,0NACAC;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASgB,iBAAiB,EACzBjB,SAAS,EACT,GAAGC,OACsD;IACzD,qBACC,KAACT,iBAAiB0B,SAAS;QAC1BhB,aAAU;QACVF,WAAWD,GAAG,wBAAwBC;QACrC,GAAGC,KAAK;;AAGZ;AAEA,SAASkB,YAAY,EACpBnB,SAAS,EACT,GAAGC,OACiD;IACpD,qBACC,KAACT,iBAAiB4B,IAAI;QACrBlB,aAAU;QACVF,WAAWD,GACV,iFACA,6GACA,6GACA,wGACA,yDACAC;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASoB,gBAAgB,EACxBrB,SAAS,EACT,GAAGC,OAC2B;IAC9B,qBACC,KAACqB;QACApB,aAAU;QACVF,WAAWD,GACV,yDACAC;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SACCV,OAAO,EACPY,aAAa,EACbK,YAAY,EACZG,WAAW,EACXE,YAAY,EACZE,YAAY,EACZI,WAAW,EACXE,eAAe,EACfJ,gBAAgB,GACf"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"#shadcn/components/ui/dialog\";\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Command Root\nconst commandStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"h-full\",\n\t\"w-full\",\n\t\"flex-col\",\n\t\"overflow-hidden\",\n\t\"rounded-md\",\n\t// Colors\n\t\"bg-bg-primary\",\n\t\"text-text-primary\",\n);\n\n// Command Dialog\nconst commandDialogContentStyles = cn(\n\t// Layout\n\t\"overflow-hidden\",\n\t\"p-0\",\n);\n\nconst commandDialogCommandStyles = cn(\n\t// Group headings\n\t\"[&_[cmdk-group-heading]]:text-muted-foreground\",\n\t\"[&_[cmdk-group-heading]]:px-2\",\n\t\"[&_[cmdk-group-heading]]:font-medium\",\n\t// Groups\n\t\"[&_[cmdk-group]]:px-2\",\n\t\"[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0\",\n\t// Input wrapper\n\t\"[&_[cmdk-input-wrapper]]:h-12\",\n\t\"**:data-[slot=command-input-wrapper]:h-12\",\n\t// Input wrapper SVG\n\t\"[&_[cmdk-input-wrapper]_svg]:h-5\",\n\t\"[&_[cmdk-input-wrapper]_svg]:w-5\",\n\t// Input\n\t\"[&_[cmdk-input]]:h-12\",\n\t// Items\n\t\"[&_[cmdk-item]]:px-2\",\n\t\"[&_[cmdk-item]]:py-3\",\n\t// Item SVG\n\t\"[&_[cmdk-item]_svg]:h-5\",\n\t\"[&_[cmdk-item]_svg]:w-5\",\n);\n\n// Command Input Wrapper\nconst commandInputWrapperStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"h-9\",\n\t\"items-center\",\n\t\"gap-2\",\n\t\"px-3\",\n\t// Border\n\t\"border-b\",\n\t\"border-border-separator\",\n\t// Animation\n\t\"transition-colors\",\n\t\"duration-300\",\n);\n\n// Command Input Icon\nconst commandInputIconStyles = cn(\n\t// Size\n\t\"size-4\",\n\t\"shrink-0\",\n\t// Colors\n\t\"text-text-tertiary\",\n);\n\n// Command Input\nconst commandInputStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"h-10\",\n\t\"w-full\",\n\t\"rounded-md\",\n\t\"py-3\",\n\t// Background\n\t\"bg-transparent\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors\n\t\"text-text-primary\",\n\t\"placeholder:text-text-quternary\",\n\t\"file:text-text-primary\",\n\t// States\n\t\"outline-hidden\",\n\t\"disabled:cursor-not-allowed\",\n\t\"disabled:opacity-50\",\n);\n\n// Command List\nconst commandListStyles = cn(\n\t// Layout\n\t\"max-h-[300px]\",\n\t\"scroll-py-1\",\n\t// Overflow\n\t\"overflow-x-hidden\",\n\t\"overflow-y-auto\",\n\t\"p-2\",\n);\n\n// Command Empty\nconst commandEmptyStyles = cn(\n\t// Layout\n\t\"py-6\",\n\t\"text-center\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors\n\t\"text-text-tertiary\",\n);\n\n// Command Group\nconst commandGroupStyles = cn(\n\t// Layout\n\t\"overflow-hidden\",\n\t\"p-1\",\n\t\"group\",\n\t// Colors\n\t\"text-text-tertiary\",\n\t// Group heading styles\n\t\"[&_[cmdk-group-heading]]:text-text-quaternary\",\n\t\"[&_[cmdk-group-heading]]:px-2\",\n\t\"[&_[cmdk-group-heading]]:py-1.5\",\n\t\"[&_[cmdk-group-heading]]:text-xs\",\n);\n\n// Command Separator\nconst commandSeparatorStyles = cn(\n\t// Layout\n\t\"-mx-1\",\n\t\"h-px\",\n\t// Colors\n\t\"bg-border-separator\",\n);\n\n// Command Item\nconst commandItemStyles = cn(\n\t// Layout\n\t\"relative\",\n\t\"flex\",\n\t\"cursor-default\",\n\t\"items-center\",\n\t\"gap-2\",\n\t\"rounded-md\",\n\t\"px-2\",\n\t\"py-1.5\",\n\t\"select-none\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors\n\t\"text-text-primary\",\n\t// States\n\t\"outline-hidden\",\n\t\"data-[state=checked]:bg-bg-tertiary\",\n\t\"group-hover:data-[state=checked]:bg-transparent\",\n\t\"hover:bg-bg-tertiary\",\n\t\"data-[state=checked]:text-text-primary\",\n\t\"data-[disabled=true]:pointer-events-none\",\n\t\"data-[disabled=true]:opacity-50\",\n\t// SVG styles\n\t\"[&_svg:not([class*='text-'])]:text-text-quaternary\",\n\t\"[&_svg]:pointer-events-none\",\n\t\"[&_svg]:shrink-0\",\n\t\"[&_svg:not([class*='size-'])]:size-4\",\n);\n\n// Command Shortcut\nconst commandShortcutStyles = cn(\n\t// Layout\n\t\"ml-auto\",\n\t// Typography\n\t\"typo-body\",\n\t\"tracking-widest\",\n\t// Colors\n\t\"text-text-quaternary\",\n);\n\nfunction Command({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n\treturn (\n\t\t<CommandPrimitive\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cn(commandStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandDialog({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run...\",\n\tchildren,\n\tclassName,\n\tshowCloseButton = true,\n\t...props\n}: React.ComponentProps<typeof Dialog> & {\n\ttitle?: string;\n\tdescription?: string;\n\tclassName?: string;\n\tshowCloseButton?: boolean;\n}) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent\n\t\t\t\tclassName={cn(commandDialogContentStyles, className)}\n\t\t\t\tshowCloseButton={showCloseButton}\n\t\t\t>\n\t\t\t\t<Command className={commandDialogCommandStyles}>{children}</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\nfunction CommandInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"command-input-wrapper\"\n\t\t\tclassName={commandInputWrapperStyles}\n\t\t>\n\t\t\t<SearchIcon className={commandInputIconStyles} />\n\t\t\t<CommandPrimitive.Input\n\t\t\t\tdata-slot=\"command-input\"\n\t\t\t\tclassName={cn(commandInputStyles, className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction CommandList({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n\treturn (\n\t\t<CommandPrimitive.List\n\t\t\tdata-slot=\"command-list\"\n\t\t\tclassName={cn(commandListStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandEmpty({\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n\treturn (\n\t\t<CommandPrimitive.Empty\n\t\t\tdata-slot=\"command-empty\"\n\t\t\tclassName={commandEmptyStyles}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandGroup({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n\treturn (\n\t\t<CommandPrimitive.Group\n\t\t\tdata-slot=\"command-group\"\n\t\t\tclassName={cn(commandGroupStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandSeparator({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n\treturn (\n\t\t<CommandPrimitive.Separator\n\t\t\tdata-slot=\"command-separator\"\n\t\t\tclassName={cn(commandSeparatorStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandItem({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n\treturn (\n\t\t<CommandPrimitive.Item\n\t\t\tdata-slot=\"command-item\"\n\t\t\tclassName={cn(commandItemStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cn(commandShortcutStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n"],"names":["Command","CommandPrimitive","SearchIcon","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","cn","commandStyles","commandDialogContentStyles","commandDialogCommandStyles","commandInputWrapperStyles","commandInputIconStyles","commandInputStyles","commandListStyles","commandEmptyStyles","commandGroupStyles","commandSeparatorStyles","commandItemStyles","commandShortcutStyles","className","props","data-slot","CommandDialog","title","description","children","showCloseButton","CommandInput","div","Input","CommandList","List","CommandEmpty","Empty","CommandGroup","Group","CommandSeparator","Separator","CommandItem","Item","CommandShortcut","span"],"mappings":"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"}