@pixpilot/shadcn-ui 0.18.0 → 0.20.0

package/dist/ColorSelect.cjs

@@ -0,0 +1,64 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColorSelect.tsx
+function ColorSelect(props) {
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const { handleTriggerKeyDown } = require_use_select_keyboard.useSelectKeyboard({
+		options,
+		value,
+		onChange,
+		keyboardMode,
+		open,
+		getValue: (option) => option.value
+	});
+	const selectedOption = options?.find((option) => option.value === value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Select, {
+		value,
+		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
+		...restProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
+			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, {
+				placeholder,
+				children: selectedOption && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "h-4 w-4 rounded border border-gray-300",
+						style: { backgroundColor: selectedOption.value }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectedOption.label })]
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
+			...contentProps,
+			children: options?.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectItem, {
+				value: option.value,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "h-4 w-4 rounded border border-gray-300",
+						style: { backgroundColor: option.value }
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label })]
+				})
+			}, option.value))
+		})]
+	});
+}
+
+//#endregion
+exports.ColorSelect = ColorSelect;

package/dist/ColorSelect.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { Select, SelectContent } from "@pixpilot/shadcn";
+import React, { ComponentProps } from "react";
+
+//#region src/ColorSelect.d.ts
+interface ColorSelectOption {
+  label: string;
+  value: string;
+}
+type BaseColorSelectProps = {
+  options?: ColorSelectOption[];
+  contentProps?: React.ComponentProps<typeof SelectContent>;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
+} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ColorSelect.d.ts

@@ -0,0 +1,20 @@
+import { Select, SelectContent } from "@pixpilot/shadcn";
+import React, { ComponentProps } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/ColorSelect.d.ts
+interface ColorSelectOption {
+  label: string;
+  value: string;
+}
+type BaseColorSelectProps = {
+  options?: ColorSelectOption[];
+  contentProps?: React.ComponentProps<typeof SelectContent>;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
+} & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ColorSelect.js

@@ -0,0 +1,60 @@
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColorSelect.tsx
+function ColorSelect(props) {
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const { handleTriggerKeyDown } = useSelectKeyboard({
+		options,
+		value,
+		onChange,
+		keyboardMode,
+		open,
+		getValue: (option) => option.value
+	});
+	const selectedOption = options?.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
+		...restProps,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
+			children: /* @__PURE__ */ jsx(SelectValue, {
+				placeholder,
+				children: selectedOption && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "h-4 w-4 rounded border border-gray-300",
+						style: { backgroundColor: selectedOption.value }
+					}), /* @__PURE__ */ jsx("span", { children: selectedOption.label })]
+				})
+			})
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			...contentProps,
+			children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "h-4 w-4 rounded border border-gray-300",
+						style: { backgroundColor: option.value }
+					}), /* @__PURE__ */ jsx("span", { children: option.label })]
+				})
+			}, option.value))
+		})]
+	});
+}
+
+//#endregion
+export { ColorSelect };

package/dist/ContentCard.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
 
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime1.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime2.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/ContentCard.d.ts

@@ -1,6 +1,6 @@
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime1.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime2.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
 
@@ -8,7 +8,7 @@ type DatePickerProps = {
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime3.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
@@ -8,7 +8,7 @@ type DatePickerProps = {
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime3.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/Select.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -8,13 +9,30 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Select.tsx
 function Select(props) {
-	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const { handleTriggerKeyDown } = require_use_select_keyboard.useSelectKeyboard({
+		options,
+		value,
+		onChange,
+		keyboardMode,
+		open,
+		getValue: (option) => String(option.value)
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Select, {
 		value,
 		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
 			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, { placeholder })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
 			...contentProps,

package/dist/Select.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
 
@@ -13,7 +13,8 @@ type BaseSelectProps = {
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectOption };

package/dist/Select.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/Select.d.ts
 interface SelectOption {
@@ -13,7 +13,8 @@ type BaseSelectProps = {
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { Select$1 as Select, SelectOption };

package/dist/Select.js

@@ -1,16 +1,34 @@
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Select.tsx
 function Select$1(props) {
-	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const { handleTriggerKeyDown } = useSelectKeyboard({
+		options,
+		value,
+		onChange,
+		keyboardMode,
+		open,
+		getValue: (option) => String(option.value)
+	});
 	return /* @__PURE__ */ jsxs(Select, {
 		value,
 		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 		}), /* @__PURE__ */ jsx(SelectContent, {
 			...contentProps,

package/dist/ThemeToggle.d.cts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/ThemeToggle.d.ts
-declare function ThemeToggle(): react_jsx_runtime5.JSX.Element;
+declare function ThemeToggle(): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ThemeToggle };

package/dist/ThemeToggle.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/ThemeToggle.d.ts
-declare function ThemeToggle(): react_jsx_runtime5.JSX.Element;
+declare function ThemeToggle(): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ThemeToggle };

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime6.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/hooks/index.cjs

@@ -1 +1,2 @@
+const require_use_select_keyboard = require('./use-select-keyboard.cjs');
 const require_use_media_query = require('./use-media-query.cjs');

package/dist/hooks/index.d.cts

@@ -0,0 +1,2 @@
+import { useMediaQuery } from "./use-media-query.cjs";
+import { useSelectKeyboard } from "./use-select-keyboard.cjs";

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
-import { useMediaQuery } from "./use-media-query.js";
+import { useMediaQuery } from "./use-media-query.js";
+import { useSelectKeyboard } from "./use-select-keyboard.js";

package/dist/hooks/index.js

@@ -1 +1,2 @@
+import { useSelectKeyboard } from "./use-select-keyboard.js";
 import { useMediaQuery } from "./use-media-query.js";

package/dist/hooks/use-select-keyboard.cjs

@@ -0,0 +1,37 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-select-keyboard.ts
+/**
+* Hook to handle keyboard navigation for select components
+* Supports cycling through options with arrow keys when closed
+*/
+function useSelectKeyboard({ options, value, onChange, keyboardMode = "dropdown", open, getValue }) {
+	return { handleTriggerKeyDown: react.default.useCallback((event) => {
+		if (keyboardMode !== "cycle") return;
+		if (open) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!options || options.length === 0) return;
+		const currentIndex = options.findIndex((option) => getValue(option) === value);
+		const optionCount = options.length;
+		let nextIndex = 0;
+		if (event.key === "ArrowDown") nextIndex = currentIndex >= 0 ? (currentIndex + 1) % optionCount : 0;
+		else nextIndex = currentIndex >= 0 ? (currentIndex - 1 + optionCount) % optionCount : optionCount - 1;
+		const nextValue = getValue(options[nextIndex]);
+		if (!nextValue || nextValue === value) return;
+		onChange?.(nextValue);
+	}, [
+		keyboardMode,
+		open,
+		options,
+		value,
+		onChange,
+		getValue
+	]) };
+}
+
+//#endregion
+exports.useSelectKeyboard = useSelectKeyboard;

package/dist/hooks/use-select-keyboard.d.cts

@@ -0,0 +1,27 @@
+import React from "react";
+
+//#region src/hooks/use-select-keyboard.d.ts
+interface UseSelectKeyboardProps<T> {
+  options?: T[];
+  value: string;
+  onChange?: (value: string) => void;
+  keyboardMode?: 'cycle' | 'dropdown';
+  open: boolean;
+  getValue: (option: T) => string;
+}
+/**
+ * Hook to handle keyboard navigation for select components
+ * Supports cycling through options with arrow keys when closed
+ */
+declare function useSelectKeyboard<T>({
+  options,
+  value,
+  onChange,
+  keyboardMode,
+  open,
+  getValue
+}: UseSelectKeyboardProps<T>): {
+  handleTriggerKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+//#endregion
+export { useSelectKeyboard };

package/dist/hooks/use-select-keyboard.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+
+//#region src/hooks/use-select-keyboard.d.ts
+interface UseSelectKeyboardProps<T> {
+  options?: T[];
+  value: string;
+  onChange?: (value: string) => void;
+  keyboardMode?: 'cycle' | 'dropdown';
+  open: boolean;
+  getValue: (option: T) => string;
+}
+/**
+ * Hook to handle keyboard navigation for select components
+ * Supports cycling through options with arrow keys when closed
+ */
+declare function useSelectKeyboard<T>({
+  options,
+  value,
+  onChange,
+  keyboardMode,
+  open,
+  getValue
+}: UseSelectKeyboardProps<T>): {
+  handleTriggerKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+//#endregion
+export { useSelectKeyboard };

package/dist/hooks/use-select-keyboard.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+//#region src/hooks/use-select-keyboard.ts
+/**
+* Hook to handle keyboard navigation for select components
+* Supports cycling through options with arrow keys when closed
+*/
+function useSelectKeyboard({ options, value, onChange, keyboardMode = "dropdown", open, getValue }) {
+	return { handleTriggerKeyDown: React.useCallback((event) => {
+		if (keyboardMode !== "cycle") return;
+		if (open) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!options || options.length === 0) return;
+		const currentIndex = options.findIndex((option) => getValue(option) === value);
+		const optionCount = options.length;
+		let nextIndex = 0;
+		if (event.key === "ArrowDown") nextIndex = currentIndex >= 0 ? (currentIndex + 1) % optionCount : 0;
+		else nextIndex = currentIndex >= 0 ? (currentIndex - 1 + optionCount) % optionCount : optionCount - 1;
+		const nextValue = getValue(options[nextIndex]);
+		if (!nextValue || nextValue === value) return;
+		onChange?.(nextValue);
+	}, [
+		keyboardMode,
+		open,
+		options,
+		value,
+		onChange,
+		getValue
+	]) };
+}
+
+//#endregion
+export { useSelectKeyboard };

package/dist/index.cjs

@@ -14,6 +14,8 @@ const require_ColorPickerBase = require('./ColorPickerBase/ColorPickerBase.cjs')
 require('./ColorPickerBase/index.cjs');
 const require_ColorPicker = require('./ColorPicker/ColorPicker.cjs');
 require('./ColorPicker/index.cjs');
+const require_use_select_keyboard = require('./hooks/use-select-keyboard.cjs');
+const require_ColorSelect = require('./ColorSelect.cjs');
 const require_Combobox = require('./Combobox.cjs');
 const require_confirmation_dialogs = require('./confirmation-dialog/confirmation-dialogs.cjs');
 const require_DialogProvider = require('./confirmation-dialog/DialogProvider.cjs');
@@ -68,6 +70,7 @@ exports.CloseButtonAbsolute = require_CloseButtonAbsolute.CloseButtonAbsolute;
 exports.CloseButtonRounded = require_CloseButtonRounded.CloseButtonRounded;
 exports.ColorPicker = require_ColorPicker.ColorPicker;
 exports.ColorPickerBase = require_ColorPickerBase.ColorPickerBase;
+exports.ColorSelect = require_ColorSelect.ColorSelect;
 exports.Combobox = require_Combobox.Combobox;
 exports.ContentCard = require_ContentCard.ContentCard;
 exports.DEFAULT_ALERT_DURATION = require_toast.DEFAULT_ALERT_DURATION;
@@ -105,6 +108,7 @@ exports.toastInfo = require_toast.toastInfo;
 exports.toastSuccess = require_toast.toastSuccess;
 exports.toastWarning = require_toast.toastWarning;
 exports.useMediaQuery = require_use_media_query.useMediaQuery;
+exports.useSelectKeyboard = require_use_select_keyboard.useSelectKeyboard;
 exports.useTabsContext = require_TabsContext.useTabsContext;
 Object.defineProperty(exports, 'useTheme', {
   enumerable: true,

package/dist/index.d.cts

@@ -13,6 +13,7 @@ import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsol
 import { ColorPickerBaseProps } from "./ColorPickerBase/types.cjs";
 import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.cjs";
 import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.cjs";
+import { BaseColorSelectProps, ColorSelect, ColorSelectOption } from "./ColorSelect.cjs";
 import { Combobox } from "./Combobox.cjs";
 import { ConfirmationDialogProps } from "./confirmation-dialog/ConfirmationDialog.cjs";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.cjs";
@@ -24,6 +25,8 @@ import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.cjs";
 import "./file-upload-inline/index.cjs";
 import { useMediaQuery } from "./hooks/use-media-query.cjs";
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.cjs";
+import "./hooks/index.cjs";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.cjs";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.cjs";
 import "./icon-selector/index.cjs";
@@ -59,4 +62,4 @@ import { ThemeToggle } from "./ThemeToggle.cjs";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.cjs";
 import "./toast/index.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
 import "./ColorPickerBase/index.js";
 import { ColorPicker, ColorPickerProps } from "./ColorPicker/ColorPicker.js";
 import "./ColorPicker/index.js";
+import { BaseColorSelectProps, ColorSelect, ColorSelectOption } from "./ColorSelect.js";
 import { Combobox } from "./Combobox.js";
 import { ConfirmationDialogProps } from "./confirmation-dialog/ConfirmationDialog.js";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.js";
@@ -26,6 +27,7 @@ import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
 import { useMediaQuery } from "./hooks/use-media-query.js";
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import "./hooks/index.js";
 import { IconProvider, IconProviderLoader, IconProviderProps } from "./icon-selector/types.js";
 import { IconPicker, IconPickerProps, IconPickerVariant } from "./icon-selector/IconPicker.js";
@@ -62,4 +64,4 @@ import { ThemeToggle } from "./ThemeToggle.js";
 import { DEFAULT_ALERT_DURATION, ToastMessage, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast/toast.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, RichTextEditor, RichTextEditorProps, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ToastMessage, ToolbarOption, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -13,6 +13,8 @@ import { ColorPickerBase } from "./ColorPickerBase/ColorPickerBase.js";
 import "./ColorPickerBase/index.js";
 import { ColorPicker } from "./ColorPicker/ColorPicker.js";
 import "./ColorPicker/index.js";
+import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
+import { ColorSelect } from "./ColorSelect.js";
 import { Combobox } from "./Combobox.js";
 import { showConfirmDialog } from "./confirmation-dialog/confirmation-dialogs.js";
 import { DialogProvider } from "./confirmation-dialog/DialogProvider.js";
@@ -57,4 +59,4 @@ import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toa
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeProvider, ThemeToggle, cn, showConfirmDialog, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/input/Input.d.ts
 type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input$1(props: InputProps$1): react_jsx_runtime6.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

package/dist/tags-input.d.cts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "./CommandOptionList.cjs";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/tags-input.d.ts
 interface TagsInputProps {
@@ -55,6 +55,6 @@ declare function TagsInput({
   addOnPaste,
   addOnTab,
   onValidate
-}: TagsInputProps): react_jsx_runtime4.JSX.Element;
+}: TagsInputProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input.d.ts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "./CommandOptionList.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/tags-input.d.ts
 interface TagsInputProps {
@@ -55,6 +55,6 @@ declare function TagsInput({
   addOnPaste,
   addOnTab,
   onValidate
-}: TagsInputProps): react_jsx_runtime4.JSX.Element;
+}: TagsInputProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",