@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

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

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckIcon, X } 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";
+import { Tag } from "../../../components/tag.js";
+/* ==========================================================================
+   Styles
+   ========================================================================== */ const selectContentStyles = cn(// Spacing
+"p-0", // Radix viewport reset
+"[&_[data-radix-select-viewport]]:p-0");
+const commandStyles = cn(// Layout
+"w-full");
+const checkIconStyles = cn(// Layout
+"ml-auto", // Size
+"size-4");
+const checkIconVisibleStyles = cn(checkIconStyles, "opacity-100");
+const checkIconHiddenStyles = cn(checkIconStyles, "opacity-0");
+const triggerWithValueStyles = cn("text-text-primary");
+const triggerWithTagsStyles = cn("pl-2");
+const clearButtonStyles = cn(// Layout
+"ml-auto", "shrink-0", // Size
+"size-4", // Colors
+"text-text-tertiary", "hover:text-text-primary", // Interactions
+"cursor-pointer", "pointer-events-auto", "z-10", // Transitions
+"transition-colors");
+/* ==========================================================================
+   Components
+   ========================================================================== */ 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);
+    const changeOpen = (newOpen)=>{
+        if (!newOpen) {
+            setSearchValue("");
+        } else {
+            inputRef.current?.focus();
+        }
+        setOpen(newOpen);
+    };
+    return /*#__PURE__*/ _jsxs(Select, {
+        value: value || "",
+        ...onValueChange && {
+            onValueChange
+        },
+        disabled: disabled,
+        open: open,
+        onOpenChange: changeOpen,
+        children: [
+            /*#__PURE__*/ _jsx(SelectTrigger, {
+                className: className,
+                children: /*#__PURE__*/ _jsx(SelectValue, {
+                    placeholder: placeholder,
+                    children: selectedOption?.label
+                })
+            }),
+            /*#__PURE__*/ _jsx(SelectContent, {
+                className: selectContentStyles,
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    className: commandStyles,
+                    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);
+                                            changeOpen(false);
+                                        },
+                                        children: [
+                                            option.label,
+                                            /*#__PURE__*/ _jsx(CheckIcon, {
+                                                className: value === option.value ? checkIconVisibleStyles : checkIconHiddenStyles
+                                            })
+                                        ]
+                                    }, option.value))
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export function MultiCombobox({ options, value = [], onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyText = "No options found.", disabled = false, className, maxDisplay = 2 }) {
+    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 selectedOptions = React.useMemo(()=>options.filter((option)=>value.includes(option.value)), [
+        options,
+        value
+    ]);
+    const handleSelect = (selectedValue)=>{
+        const newValue = value.includes(selectedValue) ? value.filter((v)=>v !== selectedValue) : [
+            ...value,
+            selectedValue
+        ];
+        onValueChange?.(newValue);
+    };
+    const handleClear = (e)=>{
+        e.stopPropagation();
+        onValueChange?.([]);
+    };
+    const changeOpen = (newOpen)=>{
+        if (!newOpen) {
+            setSearchValue("");
+        } else {
+            inputRef.current?.focus();
+        }
+        setOpen(newOpen);
+    };
+    const hasValue = selectedOptions.length > 0;
+    const displayedOptions = selectedOptions.slice(0, maxDisplay);
+    const remainingCount = selectedOptions.length - maxDisplay;
+    return /*#__PURE__*/ _jsxs(Select, {
+        open: open,
+        onOpenChange: changeOpen,
+        children: [
+            /*#__PURE__*/ _jsx(SelectTrigger, {
+                className: cn(className, hasValue && triggerWithValueStyles, hasValue && triggerWithTagsStyles),
+                disabled: disabled,
+                children: hasValue ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-1 overflow-hidden",
+                            children: [
+                                displayedOptions.map((opt)=>/*#__PURE__*/ _jsx(Tag, {
+                                        size: "small",
+                                        color: "gray",
+                                        vibrance: "subtle",
+                                        showIcon: false,
+                                        children: opt.label
+                                    }, opt.value)),
+                                remainingCount > 0 && /*#__PURE__*/ _jsxs(Tag, {
+                                    size: "small",
+                                    color: "gray",
+                                    vibrance: "subtle",
+                                    showIcon: false,
+                                    children: [
+                                        "+",
+                                        remainingCount
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            className: clearButtonStyles,
+                            onClick: handleClear,
+                            onPointerDown: (e)=>e.stopPropagation(),
+                            children: /*#__PURE__*/ _jsx(X, {
+                                className: "size-4"
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsx(SelectValue, {
+                    placeholder: placeholder
+                })
+            }),
+            /*#__PURE__*/ _jsx(SelectContent, {
+                className: selectContentStyles,
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    className: commandStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandInput, {
+                            ref: inputRef,
+                            placeholder: searchPlaceholder,
+                            value: searchValue,
+                            onValueChange: setSearchValue
+                        }),
+                        /*#__PURE__*/ _jsxs(CommandList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(CommandEmpty, {
+                                    children: emptyText
+                                }),
+                                filteredOptions.map((option)=>{
+                                    const isSelected = value.includes(option.value);
+                                    return /*#__PURE__*/ _jsxs(CommandItem, {
+                                        value: option.value,
+                                        "data-state": isSelected ? "checked" : undefined,
+                                        onSelect: handleSelect,
+                                        children: [
+                                            option.label,
+                                            /*#__PURE__*/ _jsx(CheckIcon, {
+                                                className: isSelected ? checkIconVisibleStyles : checkIconHiddenStyles
+                                            })
+                                        ]
+                                    }, option.value);
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# 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, X } 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\";\nimport { Tag } from \"../../../components/tag\";\n\n/* ==========================================================================\n   Styles\n   ========================================================================== */\n\nconst selectContentStyles = cn(\n\t// Spacing\n\t\"p-0\",\n\t// Radix viewport reset\n\t\"[&_[data-radix-select-viewport]]:p-0\",\n);\n\nconst commandStyles = cn(\n\t// Layout\n\t\"w-full\",\n);\n\nconst checkIconStyles = cn(\n\t// Layout\n\t\"ml-auto\",\n\t// Size\n\t\"size-4\",\n);\n\nconst checkIconVisibleStyles = cn(checkIconStyles, \"opacity-100\");\n\nconst checkIconHiddenStyles = cn(checkIconStyles, \"opacity-0\");\n\nconst triggerWithValueStyles = cn(\"text-text-primary\");\n\nconst triggerWithTagsStyles = cn(\"pl-2\");\n\nconst clearButtonStyles = cn(\n\t// Layout\n\t\"ml-auto\",\n\t\"shrink-0\",\n\t// Size\n\t\"size-4\",\n\t// Colors\n\t\"text-text-tertiary\",\n\t\"hover:text-text-primary\",\n\t// Interactions\n\t\"cursor-pointer\",\n\t\"pointer-events-auto\",\n\t\"z-10\",\n\t// Transitions\n\t\"transition-colors\",\n);\n\n/* ==========================================================================\n   Types\n   ========================================================================== */\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\n/* ==========================================================================\n   Components\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\tconst changeOpen = (newOpen: boolean) => {\n\t\tif (!newOpen) {\n\t\t\tsetSearchValue(\"\");\n\t\t} else {\n\t\t\tinputRef.current?.focus();\n\t\t}\n\t\tsetOpen(newOpen);\n\t};\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={changeOpen}\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={selectContentStyles}>\n\t\t\t\t<Command className={commandStyles}>\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\tchangeOpen(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={\n\t\t\t\t\t\t\t\t\t\tvalue === option.value\n\t\t\t\t\t\t\t\t\t\t\t? checkIconVisibleStyles\n\t\t\t\t\t\t\t\t\t\t\t: checkIconHiddenStyles\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\ninterface MultiComboboxProps {\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\tmaxDisplay?: number;\n}\n\nexport function MultiCombobox({\n\toptions,\n\tvalue = [],\n\tonValueChange,\n\tplaceholder = \"Select options...\",\n\tsearchPlaceholder = \"Search...\",\n\temptyText = \"No options found.\",\n\tdisabled = false,\n\tclassName,\n\tmaxDisplay = 2,\n}: MultiComboboxProps) {\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 selectedOptions = React.useMemo(\n\t\t() => options.filter((option) => value.includes(option.value)),\n\t\t[options, value],\n\t);\n\n\tconst handleSelect = (selectedValue: string) => {\n\t\tconst newValue = value.includes(selectedValue)\n\t\t\t? value.filter((v) => v !== selectedValue)\n\t\t\t: [...value, selectedValue];\n\t\tonValueChange?.(newValue);\n\t};\n\n\tconst handleClear = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tonValueChange?.([]);\n\t};\n\n\tconst changeOpen = (newOpen: boolean) => {\n\t\tif (!newOpen) {\n\t\t\tsetSearchValue(\"\");\n\t\t} else {\n\t\t\tinputRef.current?.focus();\n\t\t}\n\t\tsetOpen(newOpen);\n\t};\n\n\tconst hasValue = selectedOptions.length > 0;\n\tconst displayedOptions = selectedOptions.slice(0, maxDisplay);\n\tconst remainingCount = selectedOptions.length - maxDisplay;\n\n\treturn (\n\t\t<Select open={open} onOpenChange={changeOpen}>\n\t\t\t<SelectTrigger\n\t\t\t\tclassName={cn(\n\t\t\t\t\tclassName,\n\t\t\t\t\thasValue && triggerWithValueStyles,\n\t\t\t\t\thasValue && triggerWithTagsStyles,\n\t\t\t\t)}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t{hasValue ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"flex items-center gap-1 overflow-hidden\">\n\t\t\t\t\t\t\t{displayedOptions.map((opt) => (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\tkey={opt.value}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\tshowIcon={false}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{remainingCount > 0 && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tvibrance=\"subtle\"\n\t\t\t\t\t\t\t\t\tshowIcon={false}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t+{remainingCount}\n\t\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclassName={clearButtonStyles}\n\t\t\t\t\t\t\tonClick={handleClear}\n\t\t\t\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<X className=\"size-4\" />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<SelectValue placeholder={placeholder} />\n\t\t\t\t)}\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent className={selectContentStyles}>\n\t\t\t\t<Command className={commandStyles}>\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\tconst isSelected = value.includes(option.value);\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\t\t\tdata-state={isSelected ? \"checked\" : undefined}\n\t\t\t\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t\t\t\t\t? checkIconVisibleStyles\n\t\t\t\t\t\t\t\t\t\t\t\t: checkIconHiddenStyles\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t);\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"],"names":["CheckIcon","X","React","Command","CommandEmpty","CommandInput","CommandItem","CommandList","Select","SelectContent","SelectTrigger","SelectValue","cn","Tag","selectContentStyles","commandStyles","checkIconStyles","checkIconVisibleStyles","checkIconHiddenStyles","triggerWithValueStyles","triggerWithTagsStyles","clearButtonStyles","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","changeOpen","newOpen","current","focus","onOpenChange","ref","map","data-state","undefined","onSelect","currentValue","MultiCombobox","maxDisplay","selectedOptions","handleSelect","selectedValue","newValue","v","handleClear","e","stopPropagation","hasValue","length","displayedOptions","slice","remainingCount","div","opt","size","color","vibrance","showIcon","button","type","onClick","onPointerDown","isSelected"],"mappings":"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"}

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

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { useState } from "react";
+import { Combobox, MultiCombobox } from "./combobox.js";
+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"
+    }
+];
+function ComboboxWrapper({ multi = false, disabled = false }) {
+    const [value, setValue] = useState("");
+    const [multiValue, setMultiValue] = useState([]);
+    if (multi) {
+        return /*#__PURE__*/ _jsx(MultiCombobox, {
+            options: demoOptions,
+            value: multiValue,
+            onValueChange: setMultiValue,
+            placeholder: "Select frameworks...",
+            searchPlaceholder: "Search framework...",
+            disabled: disabled
+        });
+    }
+    return /*#__PURE__*/ _jsx(Combobox, {
+        options: demoOptions,
+        value: value,
+        onValueChange: setValue,
+        placeholder: "Select framework...",
+        searchPlaceholder: "Search framework...",
+        disabled: disabled
+    });
+}
+const meta = {
+    title: "Component/Combobox",
+    component: ComboboxWrapper,
+    parameters: {
+        layout: "centered",
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsxs("p", {
+                            className: "sbdocs-p",
+                            children: [
+                                "Combobox is a searchable select component. When the dropdown opens, it displays a ",
+                                /*#__PURE__*/ _jsx("strong", {
+                                    children: "Command"
+                                }),
+                                " component for search and selection. See the Command component for all available styling options."
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        multi: {
+            control: "boolean"
+        },
+        disabled: {
+            control: "boolean"
+        }
+    },
+    args: {
+        multi: false,
+        disabled: false
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ multi = false, disabled = false })=>/*#__PURE__*/ _jsx("div", {
+            className: "w-[300px]",
+            children: /*#__PURE__*/ _jsx(ComboboxWrapper, {
+                multi: multi,
+                disabled: disabled
+            })
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>{
+        const [value, setValue] = useState("");
+        const [multiValue, setMultiValue] = useState([]);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "space-y-8",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Single select"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "w-[300px]",
+                            children: /*#__PURE__*/ _jsx(Combobox, {
+                                options: demoOptions,
+                                value: value,
+                                onValueChange: setValue,
+                                placeholder: "Select framework...",
+                                searchPlaceholder: "Search framework..."
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Multi select"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "w-[300px]",
+                            children: /*#__PURE__*/ _jsx(MultiCombobox, {
+                                options: demoOptions,
+                                value: multiValue,
+                                onValueChange: setMultiValue,
+                                placeholder: "Select frameworks...",
+                                searchPlaceholder: "Search framework..."
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "typo-label mb-4",
+                            children: "Disabled"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "w-[300px]",
+                            children: /*#__PURE__*/ _jsx(Combobox, {
+                                options: demoOptions,
+                                placeholder: "Select framework...",
+                                disabled: true
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+};
+
+//# 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 { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { useState } from \"react\";\nimport { Combobox, MultiCombobox } from \"./combobox\";\n\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\ninterface ComboboxWrapperProps {\n\tmulti?: boolean;\n\tdisabled?: boolean;\n}\n\nfunction ComboboxWrapper({\n\tmulti = false,\n\tdisabled = false,\n}: ComboboxWrapperProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst [multiValue, setMultiValue] = useState<string[]>([]);\n\n\tif (multi) {\n\t\treturn (\n\t\t\t<MultiCombobox\n\t\t\t\toptions={demoOptions}\n\t\t\t\tvalue={multiValue}\n\t\t\t\tonValueChange={setMultiValue}\n\t\t\t\tplaceholder=\"Select frameworks...\"\n\t\t\t\tsearchPlaceholder=\"Search framework...\"\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\t\t);\n\t}\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\tdisabled={disabled}\n\t\t/>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Combobox\",\n\tcomponent: ComboboxWrapper,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<p className=\"sbdocs-p\">\n\t\t\t\t\t\tCombobox is a searchable select component. When the dropdown opens,\n\t\t\t\t\t\tit displays a <strong>Command</strong> component for search and\n\t\t\t\t\t\tselection. See the Command component for all available styling\n\t\t\t\t\t\toptions.\n\t\t\t\t\t</p>\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tmulti: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\tdisabled: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t},\n\targs: {\n\t\tmulti: false,\n\t\tdisabled: false,\n\t},\n} satisfies Meta<typeof ComboboxWrapper>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({ multi = false, disabled = false }) => (\n\t\t<div className=\"w-[300px]\">\n\t\t\t<ComboboxWrapper multi={multi} disabled={disabled} />\n\t\t</div>\n\t),\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => {\n\t\tconst [value, setValue] = useState(\"\");\n\t\tconst [multiValue, setMultiValue] = useState<string[]>([]);\n\n\t\treturn (\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t{/* Single */}\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"typo-label mb-4\">Single select</h3>\n\t\t\t\t\t<div className=\"w-[300px]\">\n\t\t\t\t\t\t<Combobox\n\t\t\t\t\t\t\toptions={demoOptions}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tonValueChange={setValue}\n\t\t\t\t\t\t\tplaceholder=\"Select framework...\"\n\t\t\t\t\t\t\tsearchPlaceholder=\"Search framework...\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Multi */}\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"typo-label mb-4\">Multi select</h3>\n\t\t\t\t\t<div className=\"w-[300px]\">\n\t\t\t\t\t\t<MultiCombobox\n\t\t\t\t\t\t\toptions={demoOptions}\n\t\t\t\t\t\t\tvalue={multiValue}\n\t\t\t\t\t\t\tonValueChange={setMultiValue}\n\t\t\t\t\t\t\tplaceholder=\"Select frameworks...\"\n\t\t\t\t\t\t\tsearchPlaceholder=\"Search framework...\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Disabled */}\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"typo-label mb-4\">Disabled</h3>\n\t\t\t\t\t<div className=\"w-[300px]\">\n\t\t\t\t\t\t<Combobox\n\t\t\t\t\t\t\toptions={demoOptions}\n\t\t\t\t\t\t\tplaceholder=\"Select framework...\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n} satisfies Story;\n"],"names":["Controls","Primary","Title","useState","Combobox","MultiCombobox","demoOptions","value","label","ComboboxWrapper","multi","disabled","setValue","multiValue","setMultiValue","options","onValueChange","placeholder","searchPlaceholder","meta","title","component","parameters","layout","docs","page","p","className","strong","argTypes","control","args","Default","tags","render","div","Demo","h3"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,OAAO,EAAEC,KAAK,QAAQ,+BAA+B;AAExE,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,gBAAa;AAErD,MAAMC,cAAc;IACnB;QAAEC,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAASC,OAAO;IAAQ;CACjC;AAOD,SAASC,gBAAgB,EACxBC,QAAQ,KAAK,EACbC,WAAW,KAAK,EACM;IACtB,MAAM,CAACJ,OAAOK,SAAS,GAAGT,SAAS;IACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAmB,EAAE;IAEzD,IAAIO,OAAO;QACV,qBACC,KAACL;YACAU,SAAST;YACTC,OAAOM;YACPG,eAAeF;YACfG,aAAY;YACZC,mBAAkB;YAClBP,UAAUA;;IAGb;IAEA,qBACC,KAACP;QACAW,SAAST;QACTC,OAAOA;QACPS,eAAeJ;QACfK,aAAY;QACZC,mBAAkB;QAClBP,UAAUA;;AAGb;AAEA,MAAMQ,OAAO;IACZC,OAAO;IACPC,WAAWZ;IACXa,YAAY;QACXC,QAAQ;QACRC,MAAM;YACLC,MAAM,kBACL;;sCACC,KAACvB;sCACD,MAACwB;4BAAEC,WAAU;;gCAAW;8CAET,KAACC;8CAAO;;gCAAgB;;;sCAIvC,KAAC3B;sCACD,KAACD;;;QAGJ;IACD;IACA6B,UAAU;QACTnB,OAAO;YACNoB,SAAS;QACV;QACAnB,UAAU;YACTmB,SAAS;QACV;IACD;IACAC,MAAM;QACLrB,OAAO;QACPC,UAAU;IACX;AACD;AACA,eAAeQ,KAAK;AAIpB,OAAO,MAAMa,UAAU;IACtBC,MAAM;QAAC;KAAO;IACdC,QAAQ,CAAC,EAAExB,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAE,iBAC3C,KAACwB;YAAIR,WAAU;sBACd,cAAA,KAAClB;gBAAgBC,OAAOA;gBAAOC,UAAUA;;;AAG5C,EAAkB;AAElB,OAAO,MAAMyB,OAAO;IACnBH,MAAM;QAAC;KAAY;IACnBC,QAAQ;QACP,MAAM,CAAC3B,OAAOK,SAAS,GAAGT,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAmB,EAAE;QAEzD,qBACC,MAACgC;YAAIR,WAAU;;8BAEd,MAACQ;;sCACA,KAACE;4BAAGV,WAAU;sCAAkB;;sCAChC,KAACQ;4BAAIR,WAAU;sCACd,cAAA,KAACvB;gCACAW,SAAST;gCACTC,OAAOA;gCACPS,eAAeJ;gCACfK,aAAY;gCACZC,mBAAkB;;;;;8BAMrB,MAACiB;;sCACA,KAACE;4BAAGV,WAAU;sCAAkB;;sCAChC,KAACQ;4BAAIR,WAAU;sCACd,cAAA,KAACtB;gCACAU,SAAST;gCACTC,OAAOM;gCACPG,eAAeF;gCACfG,aAAY;gCACZC,mBAAkB;;;;;8BAMrB,MAACiB;;sCACA,KAACE;4BAAGV,WAAU;sCAAkB;;sCAChC,KAACQ;4BAAIR,WAAU;sCACd,cAAA,KAACvB;gCACAW,SAAST;gCACTW,aAAY;gCACZN,QAAQ;;;;;;;IAMd;AACD,EAAkB"}

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

@@ -1,6 +1,6 @@
 import { Command as CommandPrimitive } from "cmdk";
 import type * as React from "react";
-import { Dialog } from "#shadcn/components/ui/dialog";
+import { Dialog } from "../../components/ui/dialog";
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
 declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;
@@ -8,7 +8,9 @@ declare function CommandDialog({ title, description, children, className, showCl
     className?: string;
     showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, wrapperClassName, ...props }: React.ComponentProps<typeof CommandPrimitive.Input> & {
+    wrapperClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
 declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
 declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
 declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;

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;AA6MtC,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,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,2CAcA;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,72 @@ 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", // Group heading styles
+"[&_*[cmdk-group-heading]]:flex", "[&_*[cmdk-group-heading]]:items-center", "[&_*[cmdk-group-heading]]:h-7", "[&_*[cmdk-group-heading]]:px-3", "[&_*[cmdk-group-heading]]:py-0", "[&_*[cmdk-group-heading]]:typo-label-tiny", "[&_*[cmdk-group-heading]]:text-[color:var(--color-text-secondary)]");
+// Command Dialog
+const commandDialogContentStyles = cn(// Layout
+"overflow-hidden", "p-0");
+const commandDialogCommandStyles = cn(// Group headings
+"[&_[cmdk-group-heading]]:flex", "[&_[cmdk-group-heading]]:items-center", "[&_[cmdk-group-heading]]:h-7", "[&_[cmdk-group-heading]]:px-3", "[&_[cmdk-group-heading]]:py-0", "[&_[cmdk-group-heading]]:typo-label-tiny", "[&_[cmdk-group-heading]]:text-text-secondary", // Groups
+"[&_[cmdk-group]]:p-2", "[&_[cmdk-group]]:gap-1", "[&_[cmdk-group]]:flex", "[&_[cmdk-group]]:flex-col", "[&_[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-2", "gap-1", "flex", "flex-col", "group", // Colors
+"text-text-tertiary", // Group heading styles
+"[&_*[cmdk-group-heading]]:flex", "[&_*[cmdk-group-heading]]:items-center", "[&_*[cmdk-group-heading]]:h-7", "[&_*[cmdk-group-heading]]:px-3", "[&_*[cmdk-group-heading]]:py-0", "[&_*[cmdk-group-heading]]:typo-label-tiny", "[&_*[cmdk-group-heading]]:text-[var(--color-text-secondary)]");
+// Command Separator
+const commandSeparatorStyles = cn(// Layout
+"-mx-1", "h-px", // Colors
+"bg-border-separator");
+// Command Item
+const commandItemStyles = cn(// Layout
+"relative", "flex", "cursor-pointer", "items-center", "gap-2", "rounded", "px-2", "py-1.5", "select-none", // Typography
+"typo-body", // Colors
+"text-text-primary", // States
+"outline-hidden", "data-[state=checked]:bg-bg-tertiary", "data-[state=checked]:hover:bg-bg-secondary", "hover:bg-bg-secondary", "hover:text-text-primary", "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,27 +88,27 @@ 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
                 })
             })
         ]
     });
 }
-function CommandInput({ className, ...props }) {
+function CommandInput({ className, wrapperClassName, ...props }) {
     return /*#__PURE__*/ _jsxs("div", {
         "data-slot": "command-input-wrapper",
-        className: "flex h-9 items-center gap-2 border-b px-3",
+        className: cn(commandInputWrapperStyles, wrapperClassName),
         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 +117,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
     });
 }