@pixpilot/shadcn-ui 0.23.0 → 0.24.0

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -88,7 +88,7 @@ const DEFAULT_SECTIONS = [
 	"input"
 ];
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
 	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: DEFAULT_COLOR,
@@ -126,15 +126,17 @@ const ColorPickerBase = (props) => {
 				isPickerOpen: open
 			})
 		}), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
+			...contentProps,
 			onValueChange: handleSwatchSelect,
-			layout,
 			presetColors: colors,
-			sections: resolvedSections
+			sections: resolvedSections,
+			currentValue
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
+			...contentProps,
 			onValueChange: handleSwatchSelect,
-			layout,
 			presetColors: colors,
-			sections: resolvedSections
+			sections: resolvedSections,
+			currentValue
 		})]
 	});
 };

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -84,7 +84,7 @@ const DEFAULT_SECTIONS = [
 	"input"
 ];
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, sections, format, defaultFormat = "hex", onFormatChange, contentProps, children,...rest } = props;
 	const { currentValue, handleValueChange } = useColorPickerBaseValue({
 		value: propValue,
 		defaultValue: DEFAULT_COLOR,
@@ -122,15 +122,17 @@ const ColorPickerBase = (props) => {
 				isPickerOpen: open
 			})
 		}), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
+			...contentProps,
 			onValueChange: handleSwatchSelect,
-			layout,
 			presetColors: colors,
-			sections: resolvedSections
+			sections: resolvedSections,
+			currentValue
 		}) : /* @__PURE__ */ jsx(ColorPickerFull, {
+			...contentProps,
 			onValueChange: handleSwatchSelect,
-			layout,
 			presetColors: colors,
-			sections: resolvedSections
+			sections: resolvedSections,
+			currentValue
 		})]
 	});
 };

package/dist/ColorPickerBase/ColorPickerCompact.cjs

@@ -14,7 +14,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerCompact.tsx
 const ColorPickerCompact = react.default.memo((props) => {
-	const { onValueChange, layout = "full", presetColors, sections } = props;
+	const { onValueChange, presetColors, sections, currentValue } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -22,35 +22,33 @@ const ColorPickerCompact = react.default.memo((props) => {
 	const showInput = enabledSections.has("input");
 	const [showFullPicker, setShowFullPicker] = (0, react.useState)(false);
 	const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
-	const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
-		className: "w-[280px] xs:w-[300px]",
-		children: [
-			shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex-1 space-y-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
-				})]
-			})] }),
-			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "gap-2  flex flex-wrap",
-				children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
-					color,
-					onSelect: onValueChange
-				}, color.value)), canTogglePickerUi && /* @__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",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
-				})]
-			}),
-			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2 w-full",
-				children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
-			})
-		]
-	});
+	const canTogglePickerUi = showPicker && showSwatch;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
+		shouldShowPickerUi && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
+			})]
+		})] }),
+		showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "gap-2  flex flex-wrap",
+			children: [presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+				color,
+				onSelect: onValueChange,
+				selectedValue: currentValue
+			}, color.value)), canTogglePickerUi && /* @__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",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Droplet, { className: "h-4 w-4" })
+			})]
+		}),
+		(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 w-full",
+			children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
+		})
+	] });
 });
 ColorPickerCompact.displayName = "ColorPickerCompact";
 

package/dist/ColorPickerBase/ColorPickerCompact.js

@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerCompact.tsx
 const ColorPickerCompact = React.memo((props) => {
-	const { onValueChange, layout = "full", presetColors, sections } = props;
+	const { onValueChange, presetColors, sections, currentValue } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
@@ -17,35 +17,33 @@ const ColorPickerCompact = React.memo((props) => {
 	const showInput = enabledSections.has("input");
 	const [showFullPicker, setShowFullPicker] = useState(false);
 	const shouldShowPickerUi = showPicker && (showSwatch ? showFullPicker : true);
-	const canTogglePickerUi = showPicker && showSwatch && layout === "compact";
-	return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
-		className: "w-[280px] xs:w-[300px]",
-		children: [
-			shouldShowPickerUi && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
-					className: "flex-1 space-y-2",
-					children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
-				})]
-			})] }),
-			showSwatch && /* @__PURE__ */ jsxs("div", {
-				className: "gap-2  flex flex-wrap",
-				children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
-					color,
-					onSelect: onValueChange
-				}, color.value)), canTogglePickerUi && /* @__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",
-					children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
-				})]
-			}),
-			(showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 w-full",
-				children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
-			})
-		]
-	});
+	const canTogglePickerUi = showPicker && showSwatch;
+	return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
+		shouldShowPickerUi && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
+			})]
+		})] }),
+		showSwatch && /* @__PURE__ */ jsxs("div", {
+			className: "gap-2  flex flex-wrap",
+			children: [presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
+				color,
+				onSelect: onValueChange,
+				selectedValue: currentValue
+			}, color.value)), canTogglePickerUi && /* @__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",
+				children: /* @__PURE__ */ jsx(Droplet, { className: "h-4 w-4" })
+			})]
+		}),
+		(showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 w-full",
+			children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
+		})
+	] });
 });
 ColorPickerCompact.displayName = "ColorPickerCompact";
 

package/dist/ColorPickerBase/ColorPickerContent.cjs

@@ -8,10 +8,15 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerContent.tsx
 const ColorPickerContent = (props) => {
-	const { children, className,...rest } = props;
+	const { children, className, width,...rest } = props;
+	const handleOpenAutoFocus = react.default.useCallback((event) => {
+		event.preventDefault();
+	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerContent, {
 		...rest,
 		className: (0, __pixpilot_shadcn.cn)("w-[280px] xs:w-[300px]", className),
+		style: width !== void 0 ? { width } : void 0,
+		onOpenAutoFocus: handleOpenAutoFocus,
 		children
 	});
 };

package/dist/ColorPickerBase/ColorPickerContent.js

@@ -4,10 +4,15 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerContent.tsx
 const ColorPickerContent$1 = (props) => {
-	const { children, className,...rest } = props;
+	const { children, className, width,...rest } = props;
+	const handleOpenAutoFocus = React.useCallback((event) => {
+		event.preventDefault();
+	}, []);
 	return /* @__PURE__ */ jsx(ColorPickerContent, {
 		...rest,
 		className: cn("w-[280px] xs:w-[300px]", className),
+		style: width !== void 0 ? { width } : void 0,
+		onOpenAutoFocus: handleOpenAutoFocus,
 		children
 	});
 };

package/dist/ColorPickerBase/ColorPickerFull.cjs

@@ -11,32 +11,36 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerFull.tsx
 const ColorPickerFull = react.default.memo((props) => {
-	const { onValueChange, presetColors, sections } = props;
+	const { onValueChange, presetColors, sections, currentValue,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
 	const showFormatSelect = enabledSections.has("format-select");
 	const showInput = enabledSections.has("input");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, { children: [
-		showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex-1 space-y-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
-			})]
-		})] }),
-		showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "gap-2  flex flex-wrap",
-			children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
-				color,
-				onSelect: onValueChange
-			}, color.value))
-		}),
-		(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-2 w-full",
-			children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
-		})
-	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ColorPickerContent.ColorPickerContent, {
+		...rest,
+		children: [
+			showPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerArea, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex-1 space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerHueSlider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerAlphaSlider, {})]
+				})]
+			})] }),
+			showSwatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "gap-2  flex flex-wrap",
+				children: presetColors.map((color) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+					color,
+					onSelect: onValueChange,
+					selectedValue: currentValue
+				}, color.value))
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 w-full",
+				children: [showFormatSelect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerInput.ColorPickerInput, {})]
+			})
+		]
+	});
 });
 ColorPickerFull.displayName = "ColorPickerContentFull";
 

package/dist/ColorPickerBase/ColorPickerFull.js

@@ -7,32 +7,36 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerFull.tsx
 const ColorPickerFull = React.memo((props) => {
-	const { onValueChange, presetColors, sections } = props;
+	const { onValueChange, presetColors, sections, currentValue,...rest } = props;
 	const enabledSections = new Set(sections);
 	const showPicker = enabledSections.has("picker");
 	const showSwatch = enabledSections.has("swatch");
 	const showFormatSelect = enabledSections.has("format-select");
 	const showInput = enabledSections.has("input");
-	return /* @__PURE__ */ jsxs(ColorPickerContent$1, { children: [
-		showPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
-				className: "flex-1 space-y-2",
-				children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
-			})]
-		})] }),
-		showSwatch && /* @__PURE__ */ jsx("div", {
-			className: "gap-2  flex flex-wrap",
-			children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
-				color,
-				onSelect: onValueChange
-			}, color.value))
-		}),
-		(showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 w-full",
-			children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
-		})
-	] });
+	return /* @__PURE__ */ jsxs(ColorPickerContent$1, {
+		...rest,
+		children: [
+			showPicker && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorPickerArea, {}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(ColorPickerEyeDropper, { className: "hidden xs:flex " }), /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 space-y-2",
+					children: [/* @__PURE__ */ jsx(ColorPickerHueSlider, {}), /* @__PURE__ */ jsx(ColorPickerAlphaSlider, {})]
+				})]
+			})] }),
+			showSwatch && /* @__PURE__ */ jsx("div", {
+				className: "gap-2  flex flex-wrap",
+				children: presetColors.map((color) => /* @__PURE__ */ jsx(PaletteSwatch, {
+					color,
+					onSelect: onValueChange,
+					selectedValue: currentValue
+				}, color.value))
+			}),
+			(showFormatSelect || showInput) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 w-full",
+				children: [showFormatSelect && /* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), showInput && /* @__PURE__ */ jsx(ColorPickerInput$1, {})]
+			})
+		]
+	});
 });
 ColorPickerFull.displayName = "ColorPickerContentFull";
 

package/dist/ColorPickerBase/PaletteSwatch.cjs

@@ -8,9 +8,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/PaletteSwatch.tsx
-const PaletteSwatch = ({ color, onSelect, className }) => {
+const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
+	const normalizeColor = (0, react.useCallback)((value) => {
+		const parsed = __pixpilot_shadcn.colorUtils.parseColorString(value);
+		if (!parsed) return null;
+		return __pixpilot_shadcn.colorUtils.colorToString(parsed, "hex").trim().toLowerCase();
+	}, []);
+	const isSelected = (() => {
+		if (selectedValue === void 0 || selectedValue.trim() === "") return false;
+		const a = normalizeColor(selectedValue);
+		const b = normalizeColor(colorValue);
+		if (a === null || b === null) return false;
+		return a === b;
+	})();
 	const handleClick = (0, react.useCallback)(() => {
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
@@ -19,8 +31,9 @@ const PaletteSwatch = ({ color, onSelect, className }) => {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
 		},
-		className,
-		onClick: handleClick
+		className: (0, __pixpilot_shadcn.cn)(className, isSelected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring"),
+		onClick: handleClick,
+		"aria-pressed": isSelected
 	});
 	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, {

package/dist/ColorPickerBase/PaletteSwatch.js

@@ -1,12 +1,24 @@
 import { PaletteButton } from "./PaletteButton.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@pixpilot/shadcn";
+import { Tooltip, TooltipContent, TooltipTrigger, cn, colorUtils } from "@pixpilot/shadcn";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/PaletteSwatch.tsx
-const PaletteSwatch = ({ color, onSelect, className }) => {
+const PaletteSwatch = ({ color, onSelect, className, selectedValue }) => {
 	const colorValue = color?.value ?? "rgb(0,0,0,0)";
 	const colorLabel = color?.label;
+	const normalizeColor = useCallback((value) => {
+		const parsed = colorUtils.parseColorString(value);
+		if (!parsed) return null;
+		return colorUtils.colorToString(parsed, "hex").trim().toLowerCase();
+	}, []);
+	const isSelected = (() => {
+		if (selectedValue === void 0 || selectedValue.trim() === "") return false;
+		const a = normalizeColor(selectedValue);
+		const b = normalizeColor(colorValue);
+		if (a === null || b === null) return false;
+		return a === b;
+	})();
 	const handleClick = useCallback(() => {
 		if (onSelect) onSelect(colorValue);
 	}, [colorValue, onSelect]);
@@ -15,8 +27,9 @@ const PaletteSwatch = ({ color, onSelect, className }) => {
 			backgroundImage: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
 			backgroundSize: "auto, 8px 8px"
 		},
-		className,
-		onClick: handleClick
+		className: cn(className, isSelected && "ring-2 ring-ring ring-offset-2 ring-offset-background border-ring"),
+		onClick: handleClick,
+		"aria-pressed": isSelected
 	});
 	if (colorLabel === null || colorLabel === void 0 || colorLabel === "") return button;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {

package/dist/ColorPickerBase/types.d.cts

@@ -1,4 +1,4 @@
-import { ColorPickerProps } from "@pixpilot/shadcn";
+import { ColorPickerContent, ColorPickerProps } from "@pixpilot/shadcn";
 
 //#region src/ColorPickerBase/types.d.ts
 interface PresetColor {
@@ -7,6 +7,9 @@ interface PresetColor {
 }
 type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
 type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
+interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
+  width?: number | string;
+}
 interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
   value?: string;
   onChange?: (value: string) => void;
@@ -17,6 +20,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
    * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
    */
   sections?: ColorPickerBaseSections;
+  contentProps?: Partial<ColorPickerContentWrapperProps>;
   children: (props: {
     value?: string;
     onValueChange: (value: string) => void;

package/dist/ColorPickerBase/types.d.ts

@@ -1,4 +1,4 @@
-import { ColorPickerProps } from "@pixpilot/shadcn";
+import { ColorPickerContent, ColorPickerProps } from "@pixpilot/shadcn";
 
 //#region src/ColorPickerBase/types.d.ts
 interface PresetColor {
@@ -7,6 +7,9 @@ interface PresetColor {
 }
 type ColorPickerBaseSection = 'swatch' | 'picker' | 'format-select' | 'input';
 type ColorPickerBaseSections = ReadonlyArray<ColorPickerBaseSection>;
+interface ColorPickerContentWrapperProps extends React.ComponentProps<typeof ColorPickerContent> {
+  width?: number | string;
+}
 interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'children'> {
   value?: string;
   onChange?: (value: string) => void;
@@ -17,6 +20,7 @@ interface ColorPickerBaseProps extends Omit<ColorPickerProps, 'onChange' | 'chil
    * Defaults to all sections: ['swatch', 'picker', 'format-select', 'input'].
    */
   sections?: ColorPickerBaseSections;
+  contentProps?: Partial<ColorPickerContentWrapperProps>;
   children: (props: {
     value?: string;
     onValueChange: (value: string) => void;

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime9 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_runtime9.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime7.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_runtime7 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_runtime7.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime9.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/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_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime9.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -57,10 +57,10 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
-    "@internal/eslint-config": "0.3.0",
-    "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
+    "@internal/eslint-config": "0.3.0",
+    "@internal/hooks": "0.0.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },