@pixpilot/shadcn-ui 1.38.0 → 2.0.0

package/dist/select/mcp.js

@@ -0,0 +1,70 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/select/mcp.ts
+const meta = {
+	name: "Select",
+	category: "Forms",
+	htmlElement: "button",
+	description: "A single-select dropdown driven by an options array, with configurable keyboard navigation, dropdown positioning, and an optional clear button.",
+	props: defineProps({
+		options: "Selectable options as `{ label, value }[]` where value is a string or number.",
+		value: "Controlled selected value (compared as a string).",
+		onChange: "Called with the selected value when it changes; called with \"\" when cleared.",
+		placeholder: "Placeholder text shown before a value is selected.",
+		contentProps: "Props forwarded to the underlying select content popover.",
+		keyboardMode: {
+			description: "How arrow keys behave: \"dropdown\" opens the menu, \"cycle\" steps through options in place.",
+			type: "\"cycle\" | \"dropdown\"",
+			defaultValue: "\"dropdown\""
+		},
+		position: {
+			description: "Dropdown positioning strategy.",
+			type: "\"item-aligned\" | \"popper\""
+		},
+		clearable: {
+			description: "Shows a clear button when a value is selected.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		disabled: "Disables the select trigger.",
+		name: "Name used when the select participates in native form submission.",
+		required: "Marks the select as required.",
+		id: "Optional id attribute applied to the select trigger.",
+		className: "Additional CSS class applied to the select trigger.",
+		open: {
+			description: "Controlled open state of the dropdown.",
+			type: "boolean"
+		},
+		onOpenChange: {
+			description: "Called when the dropdown opens or closes.",
+			type: "(open: boolean) => void"
+		},
+		size: {
+			description: "Controls the trigger height.",
+			type: "\"sm\" | \"default\"",
+			defaultValue: "\"default\""
+		},
+		asChild: {
+			description: "Render the trigger behavior and styles through the child element instead of a native button.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Basic select",
+		code: "<Select value={value} onChange={setValue} options={[{ label: \"One\", value: \"1\" }, { label: \"Two\", value: \"2\" }]} placeholder=\"Choose…\" />"
+	}, {
+		title: "Clearable select",
+		code: "<Select value={value} onChange={setValue} options={options} clearable />"
+	}],
+	related: ["Combobox", "ColorSelect"],
+	keywords: [
+		"select",
+		"dropdown",
+		"options",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/slider/mcp.js

@@ -0,0 +1,80 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/slider/mcp.ts
+const meta = {
+	name: "Slider",
+	category: "Forms",
+	description: "A range slider wrapping the shadcn slider with extra vertical padding. Supports single-thumb and multi-thumb (range) values.",
+	props: defineProps({
+		value: {
+			description: "Controlled value(s). Provide multiple numbers for a range slider.",
+			type: "number[]"
+		},
+		defaultValue: {
+			description: "Initial value(s) when uncontrolled.",
+			type: "number[]"
+		},
+		onValueChange: {
+			description: "Called with the new value array as the thumb(s) move.",
+			type: "(value: number[]) => void"
+		},
+		min: {
+			description: "Minimum value.",
+			type: "number",
+			defaultValue: "0"
+		},
+		max: {
+			description: "Maximum value.",
+			type: "number",
+			defaultValue: "100"
+		},
+		step: {
+			description: "Step increment between values.",
+			type: "number",
+			defaultValue: "1"
+		},
+		disabled: "Disables slider interaction.",
+		orientation: {
+			description: "Slider orientation.",
+			type: "\"horizontal\" | \"vertical\"",
+			defaultValue: "\"horizontal\""
+		},
+		onValueCommit: {
+			description: "Called with the final value array when the user stops dragging.",
+			type: "(value: number[]) => void"
+		},
+		minStepsBetweenThumbs: {
+			description: "Minimum number of steps to keep between thumbs in a range slider.",
+			type: "number",
+			defaultValue: "0"
+		},
+		inverted: {
+			description: "Visually and functionally inverts the slider direction.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		name: "Form field name submitted with the slider value for native form integration.",
+		form: "Associates the slider with a form by id when rendered outside of it.",
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	examples: [{
+		title: "Single value",
+		code: "<Slider value={[volume]} onValueChange={([v]) => setVolume(v)} max={100} />"
+	}, {
+		title: "Range",
+		code: "<Slider value={range} onValueChange={setRange} min={0} max={1000} step={10} />"
+	}],
+	keywords: [
+		"slider",
+		"range",
+		"input",
+		"form"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/tabs/mcp.js

@@ -0,0 +1,51 @@
+import { defineProps } from "../mcp/src/utils.js";
+
+//#region src/tabs/mcp.ts
+const meta = {
+	name: "Tabs",
+	category: "Navigation",
+	description: "A tabbed navigation container composed with TabsList, TabsTrigger, and TabsContent. TabsList adds an \"underline\" variant on top of the shadcn variants.",
+	props: defineProps({
+		value: {
+			description: "Controlled active tab value.",
+			type: "string"
+		},
+		defaultValue: {
+			description: "Initial active tab value when uncontrolled.",
+			type: "string"
+		},
+		onValueChange: {
+			description: "Called with the newly selected tab value.",
+			type: "(value: string) => void"
+		},
+		orientation: {
+			description: "Tab orientation.",
+			type: "\"horizontal\" | \"vertical\"",
+			defaultValue: "\"horizontal\""
+		},
+		activationMode: {
+			description: "Whether a tab activates automatically on focus or manually on click/Enter.",
+			type: "\"automatic\" | \"manual\"",
+			defaultValue: "\"automatic\""
+		},
+		asChild: {
+			description: "Merge behavior and styles onto the child element instead of the default wrapper.",
+			type: "boolean",
+			defaultValue: "false"
+		}
+	}),
+	notes: ["TabsList accepts a `variant` of \"default\" | \"underline\" | \"outline\" | \"ghost\" | \"pill\"."],
+	examples: [{
+		title: "Underline tabs",
+		code: "<Tabs defaultValue=\"a\">\n  <TabsList variant=\"underline\">\n    <TabsTrigger value=\"a\">A</TabsTrigger>\n    <TabsTrigger value=\"b\">B</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"a\">First</TabsContent>\n  <TabsContent value=\"b\">Second</TabsContent>\n</Tabs>"
+	}],
+	keywords: [
+		"tabs",
+		"navigation",
+		"panels",
+		"segmented"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/tags-input/TagsInput.cjs

@@ -31,7 +31,8 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput(props) {
+	const { id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch",...restProps } = props;
 	const [open, setOpen] = (0, react.useState)(false);
 	const [searchValue, setSearchValue] = (0, react.useState)("");
 	const [freeInputValue, setFreeInputValue] = (0, react.useState)("");
@@ -135,6 +136,7 @@ function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS,
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+		...restProps,
 		id,
 		label,
 		className,
@@ -160,81 +162,81 @@ function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS,
 		onAddCurrentInput: handleAddCurrentInput,
 		showClear: value.length > 0 && !disabled && !readOnly
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __pixpilot_shadcn.cn)("relative", className),
-		children: [label !== void 0 && label !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+	const showLabel = label !== void 0 && label !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(showLabel ? "div" : react.default.Fragment, {
+		...showLabel ? { className: (0, __pixpilot_shadcn.cn)("relative", className) } : {},
+		children: [showLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
 			open: open && !disabled && !readOnly,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
-						id,
-						label,
-						showLabel: false,
-						disabled,
-						editable,
-						max: maxTags,
-						onValueChange: handleValueChange,
-						onValidate: handleValidate,
-						readOnly,
-						value: stringValues,
-						delimiter: freeSolo ? delimiter : void 0,
-						addOnPaste: freeSolo ? addOnPaste : false,
-						addOnTab: freeSolo ? addOnTab : false,
-						items: inlineItems,
-						onListClick: (e) => {
-							if (!disabled && !readOnly) {
-								e.stopPropagation();
-								setOpen(true);
-							}
-						},
-						inputRef,
-						inputPlaceholder: placeholder,
-						inputValue: searchValue,
-						onInputFocus: (e) => {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TagsInputInline.TagsInputInline, {
+					...restProps,
+					className: (0, __pixpilot_shadcn.cn)("w-full", className),
+					id,
+					label,
+					showLabel: false,
+					disabled,
+					editable,
+					max: maxTags,
+					onValueChange: handleValueChange,
+					onValidate: handleValidate,
+					readOnly,
+					value: stringValues,
+					delimiter: freeSolo ? delimiter : void 0,
+					addOnPaste: freeSolo ? addOnPaste : false,
+					addOnTab: freeSolo ? addOnTab : false,
+					items: inlineItems,
+					onListClick: (e) => {
+						if (!disabled && !readOnly) {
 							e.stopPropagation();
 							setOpen(true);
-						},
-						onInputChange: (e) => {
+						}
+					},
+					inputRef,
+					inputPlaceholder: placeholder,
+					inputValue: searchValue,
+					onInputFocus: (e) => {
+						e.stopPropagation();
+						setOpen(true);
+					},
+					onInputChange: (e) => {
+						e.stopPropagation();
+						setSearchValue(e.target.value);
+					},
+					onInputKeyDown: (e) => {
+						if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+							e.preventDefault();
 							e.stopPropagation();
-							setSearchValue(e.target.value);
-						},
-						onInputKeyDown: (e) => {
-							if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+							const command = document.querySelector("[cmdk-root]");
+							if (command) {
+								const event = new KeyboardEvent("keydown", {
+									key: e.key,
+									bubbles: true,
+									cancelable: true
+								});
+								command.dispatchEvent(event);
+							}
+							return;
+						}
+						if (open && e.key === "Enter") {
+							const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
+							if (selectedItem) {
 								e.preventDefault();
 								e.stopPropagation();
-								const command = document.querySelector("[cmdk-root]");
-								if (command) {
-									const event = new KeyboardEvent("keydown", {
-										key: e.key,
-										bubbles: true,
-										cancelable: true
-									});
-									command.dispatchEvent(event);
-								}
+								selectedItem.click();
 								return;
 							}
-							if (open && e.key === "Enter") {
-								const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
-								if (selectedItem) {
-									e.preventDefault();
-									e.stopPropagation();
-									selectedItem.click();
-									return;
-								}
-							}
-							e.stopPropagation();
-						},
-						onInputMouseDown: (e) => {
-							e.stopPropagation();
-						},
-						addButtonVisibility,
-						canAddCurrentValue,
-						onAddCurrentInput: handleAddCurrentInput,
-						showClear: value.length > 0 && !disabled && !readOnly
-					})
+						}
+						e.stopPropagation();
+					},
+					onInputMouseDown: (e) => {
+						e.stopPropagation();
+					},
+					addButtonVisibility,
+					canAddCurrentValue,
+					onAddCurrentInput: handleAddCurrentInput,
+					showClear: value.length > 0 && !disabled && !readOnly
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
 				className: "p-0",

package/dist/tags-input/TagsInput.d.cts

@@ -1,27 +1,20 @@
 import { CommandOptionListItem } from "../command-option-list/CommandOptionList.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { TagsInputInline } from "./TagsInputInline.cjs";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/tags-input/TagsInput.d.ts
-interface TagsInputProps {
-  id?: string;
+interface TagsInputProps extends Omit<ComponentProps<typeof TagsInputInline>, 'onChange' | 'value' | 'onValueChange' | 'onValidate' | 'items' | 'max' | 'inputRef' | 'inputPlaceholder' | 'inputValue' | 'onInputFocus' | 'onInputChange' | 'onInputKeyDown' | 'onInputMouseDown' | 'onListClick' | 'canAddCurrentValue' | 'onAddCurrentInput' | 'showClear'> {
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
   freeSolo?: boolean;
+  /** Placeholder for the tag input field. */
   placeholder?: string;
   emptyText?: string;
-  className?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
   maxTags?: number;
   allowDuplicates?: boolean;
-  editable?: boolean;
-  label?: string;
-  delimiter?: string;
-  addOnPaste?: boolean;
-  addOnTab?: boolean;
   onValidate?: (value: string) => boolean;
-  addButtonVisibility?: 'always' | 'touch' | 'never';
 }
 /**
  * TagsInput component - Inline tags input based on DiceUI
@@ -39,26 +32,6 @@ interface TagsInputProps {
  * - Options support with dropdown (like Select)
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
-declare function TagsInput({
-  id,
-  value,
-  onChange,
-  options,
-  freeSolo,
-  placeholder,
-  emptyText,
-  className,
-  disabled,
-  readOnly,
-  maxTags,
-  allowDuplicates,
-  editable,
-  label,
-  delimiter,
-  addOnPaste,
-  addOnTab,
-  onValidate,
-  addButtonVisibility
-}: TagsInputProps): react_jsx_runtime15.JSX.Element;
+declare function TagsInput(props: TagsInputProps): react_jsx_runtime19.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.d.ts

@@ -1,27 +1,20 @@
 import { CommandOptionListItem } from "../command-option-list/CommandOptionList.js";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { TagsInputInline } from "./TagsInputInline.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
-interface TagsInputProps {
-  id?: string;
+interface TagsInputProps extends Omit<ComponentProps<typeof TagsInputInline>, 'onChange' | 'value' | 'onValueChange' | 'onValidate' | 'items' | 'max' | 'inputRef' | 'inputPlaceholder' | 'inputValue' | 'onInputFocus' | 'onInputChange' | 'onInputKeyDown' | 'onInputMouseDown' | 'onListClick' | 'canAddCurrentValue' | 'onAddCurrentInput' | 'showClear'> {
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;
   options?: CommandOptionListItem[];
   freeSolo?: boolean;
+  /** Placeholder for the tag input field. */
   placeholder?: string;
   emptyText?: string;
-  className?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
   maxTags?: number;
   allowDuplicates?: boolean;
-  editable?: boolean;
-  label?: string;
-  delimiter?: string;
-  addOnPaste?: boolean;
-  addOnTab?: boolean;
   onValidate?: (value: string) => boolean;
-  addButtonVisibility?: 'always' | 'touch' | 'never';
 }
 /**
  * TagsInput component - Inline tags input based on DiceUI
@@ -39,26 +32,6 @@ interface TagsInputProps {
  * - Options support with dropdown (like Select)
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
-declare function TagsInput({
-  id,
-  value,
-  onChange,
-  options,
-  freeSolo,
-  placeholder,
-  emptyText,
-  className,
-  disabled,
-  readOnly,
-  maxTags,
-  allowDuplicates,
-  editable,
-  label,
-  delimiter,
-  addOnPaste,
-  addOnTab,
-  onValidate,
-  addButtonVisibility
-}: TagsInputProps): react_jsx_runtime18.JSX.Element;
+declare function TagsInput(props: TagsInputProps): react_jsx_runtime19.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.js

@@ -5,7 +5,7 @@ import { CommandOptionList } from "../command-option-list/CommandOptionList.js";
 import "../command-option-list/index.js";
 import { TagsInputInline } from "./TagsInputInline.js";
 import { Command, Popover, PopoverContent, PopoverTrigger, TagsInputInLineLabel, cn } from "@pixpilot/shadcn";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.tsx
@@ -27,7 +27,8 @@ const EMPTY_OPTIONS = [];
 * - Options support with dropdown (like Select)
 * - freeSolo mode for custom tags (like MUI Autocomplete)
 */
-function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch" }) {
+function TagsInput(props) {
+	const { id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate, addButtonVisibility = "touch",...restProps } = props;
 	const [open, setOpen] = useState(false);
 	const [searchValue, setSearchValue] = useState("");
 	const [freeInputValue, setFreeInputValue] = useState("");
@@ -131,6 +132,7 @@ function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS,
 		value
 	]);
 	if (!hasOptions) return /* @__PURE__ */ jsx(TagsInputInline, {
+		...restProps,
 		id,
 		label,
 		className,
@@ -156,81 +158,81 @@ function TagsInput({ id, value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS,
 		onAddCurrentInput: handleAddCurrentInput,
 		showClear: value.length > 0 && !disabled && !readOnly
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative", className),
-		children: [label !== void 0 && label !== "" ? /* @__PURE__ */ jsx(TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ jsxs(Popover, {
+	const showLabel = label !== void 0 && label !== "";
+	return /* @__PURE__ */ jsxs(showLabel ? "div" : React.Fragment, {
+		...showLabel ? { className: cn("relative", className) } : {},
+		children: [showLabel ? /* @__PURE__ */ jsx(TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ jsxs(Popover, {
 			open: open && !disabled && !readOnly,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w-full",
-					children: /* @__PURE__ */ jsx(TagsInputInline, {
-						id,
-						label,
-						showLabel: false,
-						disabled,
-						editable,
-						max: maxTags,
-						onValueChange: handleValueChange,
-						onValidate: handleValidate,
-						readOnly,
-						value: stringValues,
-						delimiter: freeSolo ? delimiter : void 0,
-						addOnPaste: freeSolo ? addOnPaste : false,
-						addOnTab: freeSolo ? addOnTab : false,
-						items: inlineItems,
-						onListClick: (e) => {
-							if (!disabled && !readOnly) {
-								e.stopPropagation();
-								setOpen(true);
-							}
-						},
-						inputRef,
-						inputPlaceholder: placeholder,
-						inputValue: searchValue,
-						onInputFocus: (e) => {
+				children: /* @__PURE__ */ jsx(TagsInputInline, {
+					...restProps,
+					className: cn("w-full", className),
+					id,
+					label,
+					showLabel: false,
+					disabled,
+					editable,
+					max: maxTags,
+					onValueChange: handleValueChange,
+					onValidate: handleValidate,
+					readOnly,
+					value: stringValues,
+					delimiter: freeSolo ? delimiter : void 0,
+					addOnPaste: freeSolo ? addOnPaste : false,
+					addOnTab: freeSolo ? addOnTab : false,
+					items: inlineItems,
+					onListClick: (e) => {
+						if (!disabled && !readOnly) {
 							e.stopPropagation();
 							setOpen(true);
-						},
-						onInputChange: (e) => {
+						}
+					},
+					inputRef,
+					inputPlaceholder: placeholder,
+					inputValue: searchValue,
+					onInputFocus: (e) => {
+						e.stopPropagation();
+						setOpen(true);
+					},
+					onInputChange: (e) => {
+						e.stopPropagation();
+						setSearchValue(e.target.value);
+					},
+					onInputKeyDown: (e) => {
+						if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+							e.preventDefault();
 							e.stopPropagation();
-							setSearchValue(e.target.value);
-						},
-						onInputKeyDown: (e) => {
-							if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+							const command = document.querySelector("[cmdk-root]");
+							if (command) {
+								const event = new KeyboardEvent("keydown", {
+									key: e.key,
+									bubbles: true,
+									cancelable: true
+								});
+								command.dispatchEvent(event);
+							}
+							return;
+						}
+						if (open && e.key === "Enter") {
+							const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
+							if (selectedItem) {
 								e.preventDefault();
 								e.stopPropagation();
-								const command = document.querySelector("[cmdk-root]");
-								if (command) {
-									const event = new KeyboardEvent("keydown", {
-										key: e.key,
-										bubbles: true,
-										cancelable: true
-									});
-									command.dispatchEvent(event);
-								}
+								selectedItem.click();
 								return;
 							}
-							if (open && e.key === "Enter") {
-								const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
-								if (selectedItem) {
-									e.preventDefault();
-									e.stopPropagation();
-									selectedItem.click();
-									return;
-								}
-							}
-							e.stopPropagation();
-						},
-						onInputMouseDown: (e) => {
-							e.stopPropagation();
-						},
-						addButtonVisibility,
-						canAddCurrentValue,
-						onAddCurrentInput: handleAddCurrentInput,
-						showClear: value.length > 0 && !disabled && !readOnly
-					})
+						}
+						e.stopPropagation();
+					},
+					onInputMouseDown: (e) => {
+						e.stopPropagation();
+					},
+					addButtonVisibility,
+					canAddCurrentValue,
+					onAddCurrentInput: handleAddCurrentInput,
+					showClear: value.length > 0 && !disabled && !readOnly
 				})
 			}), /* @__PURE__ */ jsx(PopoverContent, {
 				className: "p-0",