@pixpilot/shadcn-ui 0.19.0 → 0.21.0

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -15,22 +15,70 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const commonColors = [
-	"#00000000",
-	"#000000",
-	"#FFFFFF",
-	"#808080",
-	"#FF0000",
-	"#FFA500",
-	"#FFFF00",
-	"#84CC16",
-	"#22C55E",
-	"#14B8A6",
-	"#00FFFF",
-	"#3B82F6",
-	"#6366F1",
-	"#A855F7",
-	"#EC4899",
-	"#A52A2A"
+	{
+		label: "Transparent",
+		value: "#00000000"
+	},
+	{
+		label: "Black",
+		value: "#000000"
+	},
+	{
+		label: "White",
+		value: "#FFFFFF"
+	},
+	{
+		label: "Gray",
+		value: "#808080"
+	},
+	{
+		label: "Red",
+		value: "#FF0000"
+	},
+	{
+		label: "Orange",
+		value: "#FFA500"
+	},
+	{
+		label: "Yellow",
+		value: "#FFFF00"
+	},
+	{
+		label: "Lime",
+		value: "#84CC16"
+	},
+	{
+		label: "Green",
+		value: "#22C55E"
+	},
+	{
+		label: "Teal",
+		value: "#14B8A6"
+	},
+	{
+		label: "Cyan",
+		value: "#00FFFF"
+	},
+	{
+		label: "Blue",
+		value: "#3B82F6"
+	},
+	{
+		label: "Indigo",
+		value: "#6366F1"
+	},
+	{
+		label: "Purple",
+		value: "#A855F7"
+	},
+	{
+		label: "Pink",
+		value: "#EC4899"
+	},
+	{
+		label: "Brown",
+		value: "#A52A2A"
+	}
 ];
 const DEFAULT_COLOR = "#000000";
 const ColorPickerBase = (props) => {

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -11,22 +11,70 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const commonColors = [
-	"#00000000",
-	"#000000",
-	"#FFFFFF",
-	"#808080",
-	"#FF0000",
-	"#FFA500",
-	"#FFFF00",
-	"#84CC16",
-	"#22C55E",
-	"#14B8A6",
-	"#00FFFF",
-	"#3B82F6",
-	"#6366F1",
-	"#A855F7",
-	"#EC4899",
-	"#A52A2A"
+	{
+		label: "Transparent",
+		value: "#00000000"
+	},
+	{
+		label: "Black",
+		value: "#000000"
+	},
+	{
+		label: "White",
+		value: "#FFFFFF"
+	},
+	{
+		label: "Gray",
+		value: "#808080"
+	},
+	{
+		label: "Red",
+		value: "#FF0000"
+	},
+	{
+		label: "Orange",
+		value: "#FFA500"
+	},
+	{
+		label: "Yellow",
+		value: "#FFFF00"
+	},
+	{
+		label: "Lime",
+		value: "#84CC16"
+	},
+	{
+		label: "Green",
+		value: "#22C55E"
+	},
+	{
+		label: "Teal",
+		value: "#14B8A6"
+	},
+	{
+		label: "Cyan",
+		value: "#00FFFF"
+	},
+	{
+		label: "Blue",
+		value: "#3B82F6"
+	},
+	{
+		label: "Indigo",
+		value: "#6366F1"
+	},
+	{
+		label: "Purple",
+		value: "#A855F7"
+	},
+	{
+		label: "Pink",
+		value: "#EC4899"
+	},
+	{
+		label: "Brown",
+		value: "#A52A2A"
+	}
 ];
 const DEFAULT_COLOR = "#000000";
 const ColorPickerBase = (props) => {

package/dist/ColorPickerBase/ColorPickerCompact.cjs

@@ -31,7 +31,7 @@ const ColorPickerCompact = react.default.memo((props) => {
 				children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
 					color,
 					onSelect: onValueChange
-				}, color)), layout === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
+				}, color.value)), layout === "compact" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
 					onClick: () => setShowFullPicker(!showFullPicker),
 					"aria-label": "Toggle full color picker",
 					className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",

package/dist/ColorPickerBase/ColorPickerCompact.js

@@ -26,7 +26,7 @@ const ColorPickerCompact = React.memo((props) => {
 				children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
 					color,
 					onSelect: onValueChange
-				}, color)), layout === "compact" && /* @__PURE__ */ jsx(PaletteButton, {
+				}, color.value)), layout === "compact" && /* @__PURE__ */ jsx(PaletteButton, {
 					onClick: () => setShowFullPicker(!showFullPicker),
 					"aria-label": "Toggle full color picker",
 					className: "flex items-center justify-center border-input bg-input hover:bg-accent hover:text-accent-foreground",

package/dist/ColorPickerBase/ColorPickerFull.cjs

@@ -25,7 +25,7 @@ const ColorPickerFull = react.default.memo((props) => {
 			children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
 				color,
 				onSelect: onValueChange
-			}, color))
+			}, color.value))
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center gap-2 w-full",

package/dist/ColorPickerBase/ColorPickerFull.js

@@ -21,7 +21,7 @@ const ColorPickerFull = React.memo((props) => {
 			children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
 				color,
 				onSelect: onValueChange
-			}, color))
+			}, color.value))
 		}),
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 w-full",

package/dist/ColorPickerBase/PaletteSwatch.cjs

@@ -1,5 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_PaletteButton = require('./PaletteButton.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");
@@ -7,17 +9,27 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/PaletteSwatch.tsx
 const PaletteSwatch = ({ color, onSelect, className }) => {
+	const colorValue = color?.value ?? "rgb(0,0,0,0)";
+	const colorLabel = color?.label;
 	const handleClick = (0, react.useCallback)(() => {
-		if (onSelect) onSelect(color ?? "rgb(0,0,0,0)");
-	}, [color, onSelect]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
+		if (onSelect) onSelect(colorValue);
+	}, [colorValue, onSelect]);
+	const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
 		style: {
-			backgroundImage: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
 		},
 		className,
 		onClick: handleClick
 	});
+	if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, {
+		side: "top",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: colorLabel })
+	})] });
 };
 
 //#endregion

package/dist/ColorPickerBase/PaletteSwatch.js

@@ -1,20 +1,31 @@
 import { PaletteButton } from "./PaletteButton.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@pixpilot/shadcn";
 import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/PaletteSwatch.tsx
 const PaletteSwatch = ({ color, onSelect, className }) => {
+	const colorValue = color?.value ?? "rgb(0,0,0,0)";
+	const colorLabel = color?.label;
 	const handleClick = useCallback(() => {
-		if (onSelect) onSelect(color ?? "rgb(0,0,0,0)");
-	}, [color, onSelect]);
-	return /* @__PURE__ */ jsx(PaletteButton, {
+		if (onSelect) onSelect(colorValue);
+	}, [colorValue, onSelect]);
+	const button = /* @__PURE__ */ jsx(PaletteButton, {
 		style: {
-			backgroundImage: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
 		},
 		className,
 		onClick: handleClick
 	});
+	if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		children: /* @__PURE__ */ jsx("p", { children: colorLabel })
+	})] });
 };
 
 //#endregion

package/dist/ColorPickerBase/index.d.ts

@@ -1,2 +1,2 @@
-import { ColorPickerBaseProps } from "./types.js";
+import { ColorPickerBaseProps, PresetColor } from "./types.js";
 import { ColorPickerBase } from "./ColorPickerBase.js";

package/dist/ColorPickerBase/types.d.cts

@@ -1,10 +1,14 @@
 import { ColorPickerProps } from "@pixpilot/shadcn";
 
 //#region src/ColorPickerBase/types.d.ts
+interface PresetColor {
+  label: string;
+  value: string;
+}
 interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
   value?: string;
   onChange?: (value: string) => void;
-  presetColors?: string[];
+  presetColors?: PresetColor[];
   layout?: 'full' | 'compact';
   children: (props: {
     value?: string;
@@ -13,4 +17,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
   }) => React.ReactNode;
 }
 //#endregion
-export { ColorPickerBaseProps };
+export { ColorPickerBaseProps, PresetColor };

package/dist/ColorPickerBase/types.d.ts

@@ -1,10 +1,14 @@
 import { ColorPickerProps } from "@pixpilot/shadcn";
 
 //#region src/ColorPickerBase/types.d.ts
+interface PresetColor {
+  label: string;
+  value: string;
+}
 interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
   value?: string;
   onChange?: (value: string) => void;
-  presetColors?: string[];
+  presetColors?: PresetColor[];
   layout?: 'full' | 'compact';
   children: (props: {
     value?: string;
@@ -13,4 +17,4 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
   }) => React.ReactNode;
 }
 //#endregion
-export { ColorPickerBaseProps };
+export { ColorPickerBaseProps, PresetColor };

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");
@@ -15,22 +16,14 @@ function Select(props) {
 		if (openProp === void 0) setUncontrolledOpen(nextOpen);
 		onOpenChangeProp?.(nextOpen);
 	};
-	const handleTriggerKeyDown = (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) => String(option.value) === 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 = String(options[nextIndex]?.value ?? "");
-		if (!nextValue || nextValue === value) return;
-		onChange?.(nextValue);
-	};
+	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,

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";
 
@@ -15,6 +15,6 @@ type BaseSelectProps = {
   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 {
@@ -15,6 +15,6 @@ type BaseSelectProps = {
   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,3 +1,4 @@
+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";
@@ -11,22 +12,14 @@ function Select$1(props) {
 		if (openProp === void 0) setUncontrolledOpen(nextOpen);
 		onOpenChangeProp?.(nextOpen);
 	};
-	const handleTriggerKeyDown = (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) => String(option.value) === 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 = String(options[nextIndex]?.value ?? "");
-		if (!nextValue || nextValue === value) return;
-		onChange?.(nextValue);
-	};
+	const { handleTriggerKeyDown } = useSelectKeyboard({
+		options,
+		value,
+		onChange,
+		keyboardMode,
+		open,
+		getValue: (option) => String(option.value)
+	});
 	return /* @__PURE__ */ jsxs(Select, {
 		value,
 		onValueChange: onChange,

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_runtime9 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_runtime9.JSX.Element;
 //#endregion
 export { FileUpload };

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime8.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/file-upload-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime8.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.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

@@ -10,9 +10,10 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.c
 import "./circle-loader/index.cjs";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.cjs";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.cjs";
-import { ColorPickerBaseProps } from "./ColorPickerBase/types.cjs";
+import { ColorPickerBaseProps, PresetColor } 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, PresetColor, 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

@@ -10,11 +10,12 @@ import { CircleLoader, CircleLoaderProps } from "./circle-loader/circle-loader.j
 import "./circle-loader/index.js";
 import { CloseButtonRounded, CloseButtonRoundedProps } from "./CloseButtonRounded.js";
 import { CloseButtonAbsolute, PopoverCloseButtonProps } from "./CloseButtonAbsolute.js";
-import { ColorPickerBaseProps } from "./ColorPickerBase/types.js";
+import { ColorPickerBaseProps, PresetColor } from "./ColorPickerBase/types.js";
 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, PresetColor, 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_runtime7 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_runtime7.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_runtime7 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_runtime7.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.19.0",
+  "version": "0.21.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",