@pixpilot/shadcn-ui 0.14.0 → 0.15.1

package/dist/ColorPicker/ColorPicker.cjs

@@ -2,7 +2,6 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_PaletteSwatch = require('../ColorPickerBase/PaletteSwatch.cjs');
 const require_ColorPickerBase = require('../ColorPickerBase/ColorPickerBase.cjs');
 require('../ColorPickerBase/index.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
@@ -14,9 +13,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPicker/ColorPicker.tsx
 function Swatch(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteSwatch.PaletteSwatch, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerSwatch, {
 		color: props.color,
-		className: "rounded-sm"
+		className: (0, __pixpilot_shadcn.cn)("rounded-sm w-6.5 h-6.5 p-0 -ml-1 cursor-pointer", props.className)
 	});
 }
 const ColorPicker = (props) => {
@@ -26,7 +25,7 @@ const ColorPicker = (props) => {
 		children: ({ value, onValueChange, isPickerOpen }) => {
 			if (variant === "input") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.InputGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
 				align: "inline-start",
-				className: "pl-1",
+				className: "pl-0",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupInput, {
 				value: value ?? "",
@@ -46,7 +45,7 @@ const ColorPicker = (props) => {
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupAddon, {
 						align: "inline-start",
-						className: "pl-1",
+						className: "pl-0",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch, { color: value })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.InputGroupText, {

package/dist/ColorPicker/ColorPicker.js

@@ -1,18 +1,17 @@
 'use client';
 
 
-import { PaletteSwatch } from "../ColorPickerBase/PaletteSwatch.js";
 import { ColorPickerBase } from "../ColorPickerBase/ColorPickerBase.js";
 import "../ColorPickerBase/index.js";
-import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, cn } from "@pixpilot/shadcn";
+import { ColorPickerSwatch, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, cn } from "@pixpilot/shadcn";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPicker/ColorPicker.tsx
 function Swatch(props) {
-	return /* @__PURE__ */ jsx(PaletteSwatch, {
+	return /* @__PURE__ */ jsx(ColorPickerSwatch, {
 		color: props.color,
-		className: "rounded-sm"
+		className: cn("rounded-sm w-6.5 h-6.5 p-0 -ml-1 cursor-pointer", props.className)
 	});
 }
 const ColorPicker$1 = (props) => {
@@ -22,7 +21,7 @@ const ColorPicker$1 = (props) => {
 		children: ({ value, onValueChange, isPickerOpen }) => {
 			if (variant === "input") return /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, {
 				align: "inline-start",
-				className: "pl-1",
+				className: "pl-0",
 				children: /* @__PURE__ */ jsx(Swatch, { color: value })
 			}), /* @__PURE__ */ jsx(InputGroupInput, {
 				value: value ?? "",
@@ -42,7 +41,7 @@ const ColorPicker$1 = (props) => {
 				children: [
 					/* @__PURE__ */ jsx(InputGroupAddon, {
 						align: "inline-start",
-						className: "pl-1",
+						className: "pl-0",
 						children: /* @__PURE__ */ jsx(Swatch, { color: value })
 					}),
 					/* @__PURE__ */ jsx(InputGroupText, {

package/dist/ColorPickerBase/ColorPickerBase.cjs

@@ -2,10 +2,10 @@
 
 
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_use_controlled = require('../hooks/src/use-controlled.cjs');
-require('../hooks/src/index.cjs');
 const require_ColorPickerCompact = require('./ColorPickerCompact.cjs');
 const require_ColorPickerFull = require('./ColorPickerFull.cjs');
+const require_use_color_picker_base_swatch = require('./hooks/use-color-picker-base-swatch.cjs');
+const require_use_color_picker_base_value = require('./hooks/use-color-picker-base-value.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react = require("react");
@@ -15,7 +15,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const commonColors = [
-	"transparent",
+	"#00000000",
 	"#000000",
 	"#FFFFFF",
 	"#808080",
@@ -34,52 +34,21 @@ const commonColors = [
 ];
 const DEFAULT_COLOR = "#000000";
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, children,...rest } = props;
-	const [currentValue, setCurrentValue] = require_use_controlled.default({
-		controlled: propValue,
-		default: DEFAULT_COLOR,
-		name: "ColorPickerBase",
-		state: "value"
-	});
-	const [open, setOpen] = (0, react.useState)(false);
-	/**
-	* Prevent "Maximum update depth exceeded" in controlled mode.
-	*
-	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
-	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
-	* each of which emits onValueChange). This can create a feedback loop if the parent
-	* re-renders and passes back the same normalized value, causing infinite re-renders
-	* during fast pointer moves.
-	*
-	* We guard against this by:
-	* - Ignoring onValueChange events that occur immediately after a prop change.
-	* - Deduping repeated notifications of the same value.
-	*/
-	const isApplyingControlledValueRef = (0, react.useRef)(false);
-	const lastPropValueRef = (0, react.useRef)(propValue);
-	const lastNotifiedValueRef = (0, react.useRef)(void 0);
-	if (propValue !== lastPropValueRef.current) {
-		lastPropValueRef.current = propValue;
-		isApplyingControlledValueRef.current = true;
-	}
-	(0, react.useEffect)(() => {
-		isApplyingControlledValueRef.current = false;
-	}, [propValue]);
-	const handleValueChange = (0, react.useCallback)((value) => {
-		if (isApplyingControlledValueRef.current) return;
-		if (lastNotifiedValueRef.current === value) {
-			setCurrentValue(value);
-			return;
-		}
-		setCurrentValue(value);
-		onChange?.(value);
-		onValueChange?.(value);
-		lastNotifiedValueRef.current = value;
-	}, [
-		setCurrentValue,
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { currentValue, handleValueChange } = require_use_color_picker_base_value.useColorPickerBaseValue({
+		value: propValue,
+		defaultValue: DEFAULT_COLOR,
 		onChange,
 		onValueChange
-	]);
+	});
+	const { valueForPicker, handleFormatChange, handleSwatchSelect } = require_use_color_picker_base_swatch.useColorPickerBaseSwatch({
+		currentValue,
+		format,
+		defaultFormat,
+		onFormatChange,
+		handleValueChange
+	});
+	const [open, setOpen] = (0, react.useState)(false);
 	let colors = presetColors || commonColors;
 	const handleOpen = (0, react.useCallback)((isOpen) => {
 		setOpen(isOpen);
@@ -87,7 +56,10 @@ const ColorPickerBase = (props) => {
 	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.ColorPicker, {
 		...rest,
-		value: currentValue,
+		format,
+		defaultFormat,
+		onFormatChange: handleFormatChange,
+		value: valueForPicker,
 		onValueChange: handleValueChange,
 		onOpenChange: handleOpen,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.ColorPickerTrigger, {
@@ -99,11 +71,11 @@ const ColorPickerBase = (props) => {
 				isPickerOpen: open
 			})
 		}), layout === "compact" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerCompact.ColorPickerCompact, {
-			onValueChange: handleValueChange,
+			onValueChange: handleSwatchSelect,
 			layout,
 			presetColors: colors
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPickerFull.ColorPickerFull, {
-			onValueChange: handleValueChange,
+			onValueChange: handleSwatchSelect,
 			layout,
 			presetColors: colors
 		})]

package/dist/ColorPickerBase/ColorPickerBase.js

@@ -1,17 +1,17 @@
 'use client';
 
 
-import useControlled from "../hooks/src/use-controlled.js";
-import "../hooks/src/index.js";
 import { ColorPickerCompact } from "./ColorPickerCompact.js";
 import { ColorPickerFull } from "./ColorPickerFull.js";
+import { useColorPickerBaseSwatch } from "./hooks/use-color-picker-base-swatch.js";
+import { useColorPickerBaseValue } from "./hooks/use-color-picker-base-value.js";
 import { ColorPicker, ColorPickerTrigger } from "@pixpilot/shadcn";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ColorPickerBase/ColorPickerBase.tsx
 const commonColors = [
-	"transparent",
+	"#00000000",
 	"#000000",
 	"#FFFFFF",
 	"#808080",
@@ -30,52 +30,21 @@ const commonColors = [
 ];
 const DEFAULT_COLOR = "#000000";
 const ColorPickerBase = (props) => {
-	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, children,...rest } = props;
-	const [currentValue, setCurrentValue] = useControlled({
-		controlled: propValue,
-		default: DEFAULT_COLOR,
-		name: "ColorPickerBase",
-		state: "value"
-	});
-	const [open, setOpen] = useState(false);
-	/**
-	* Prevent "Maximum update depth exceeded" in controlled mode.
-	*
-	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
-	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
-	* each of which emits onValueChange). This can create a feedback loop if the parent
-	* re-renders and passes back the same normalized value, causing infinite re-renders
-	* during fast pointer moves.
-	*
-	* We guard against this by:
-	* - Ignoring onValueChange events that occur immediately after a prop change.
-	* - Deduping repeated notifications of the same value.
-	*/
-	const isApplyingControlledValueRef = useRef(false);
-	const lastPropValueRef = useRef(propValue);
-	const lastNotifiedValueRef = useRef(void 0);
-	if (propValue !== lastPropValueRef.current) {
-		lastPropValueRef.current = propValue;
-		isApplyingControlledValueRef.current = true;
-	}
-	useEffect(() => {
-		isApplyingControlledValueRef.current = false;
-	}, [propValue]);
-	const handleValueChange = useCallback((value) => {
-		if (isApplyingControlledValueRef.current) return;
-		if (lastNotifiedValueRef.current === value) {
-			setCurrentValue(value);
-			return;
-		}
-		setCurrentValue(value);
-		onChange?.(value);
-		onValueChange?.(value);
-		lastNotifiedValueRef.current = value;
-	}, [
-		setCurrentValue,
+	const { value: propValue, onChange, onValueChange, layout = "full", presetColors, format, defaultFormat = "hex", onFormatChange, children,...rest } = props;
+	const { currentValue, handleValueChange } = useColorPickerBaseValue({
+		value: propValue,
+		defaultValue: DEFAULT_COLOR,
 		onChange,
 		onValueChange
-	]);
+	});
+	const { valueForPicker, handleFormatChange, handleSwatchSelect } = useColorPickerBaseSwatch({
+		currentValue,
+		format,
+		defaultFormat,
+		onFormatChange,
+		handleValueChange
+	});
+	const [open, setOpen] = useState(false);
 	let colors = presetColors || commonColors;
 	const handleOpen = useCallback((isOpen) => {
 		setOpen(isOpen);
@@ -83,7 +52,10 @@ const ColorPickerBase = (props) => {
 	if (layout === "compact" && !presetColors) colors = colors.slice(0, -1);
 	return /* @__PURE__ */ jsxs(ColorPicker, {
 		...rest,
-		value: currentValue,
+		format,
+		defaultFormat,
+		onFormatChange: handleFormatChange,
+		value: valueForPicker,
 		onValueChange: handleValueChange,
 		onOpenChange: handleOpen,
 		children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {
@@ -95,11 +67,11 @@ const ColorPickerBase = (props) => {
 				isPickerOpen: open
 			})
 		}), layout === "compact" ? /* @__PURE__ */ jsx(ColorPickerCompact, {
-			onValueChange: handleValueChange,
+			onValueChange: handleSwatchSelect,
 			layout,
 			presetColors: colors
 		}) : /* @__PURE__ */ jsx(ColorPickerFull, {
-			onValueChange: handleValueChange,
+			onValueChange: handleSwatchSelect,
 			layout,
 			presetColors: colors
 		})]

package/dist/ColorPickerBase/PaletteSwatch.cjs

@@ -8,15 +8,13 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/ColorPickerBase/PaletteSwatch.tsx
 const PaletteSwatch = ({ color, onSelect, className }) => {
 	const handleClick = (0, react.useCallback)(() => {
-		if (onSelect) onSelect(color ?? "transparent");
+		if (onSelect) onSelect(color ?? "rgb(0,0,0,0)");
 	}, [color, onSelect]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PaletteButton.PaletteButton, {
-		style: color == null || color === "transparent" ? {
-			backgroundColor: "transparent",
-			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
-			backgroundSize: "4px 4px",
-			backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
-		} : { backgroundColor: color },
+		style: {
+			backgroundImage: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+			backgroundSize: "auto, 8px 8px"
+		},
 		className,
 		onClick: handleClick
 	});

package/dist/ColorPickerBase/PaletteSwatch.js

@@ -5,15 +5,13 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ColorPickerBase/PaletteSwatch.tsx
 const PaletteSwatch = ({ color, onSelect, className }) => {
 	const handleClick = useCallback(() => {
-		if (onSelect) onSelect(color ?? "transparent");
+		if (onSelect) onSelect(color ?? "rgb(0,0,0,0)");
 	}, [color, onSelect]);
 	return /* @__PURE__ */ jsx(PaletteButton, {
-		style: color == null || color === "transparent" ? {
-			backgroundColor: "transparent",
-			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
-			backgroundSize: "4px 4px",
-			backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
-		} : { backgroundColor: color },
+		style: {
+			backgroundImage: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+			backgroundSize: "auto, 8px 8px"
+		},
 		className,
 		onClick: handleClick
 	});

package/dist/ColorPickerBase/hooks/use-color-picker-base-swatch.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_color_picker_base_utils = require('../utils/color-picker-base-utils.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/ColorPickerBase/hooks/use-color-picker-base-swatch.ts
+function useColorPickerBaseSwatch(params) {
+	const { currentValue, format, defaultFormat, onFormatChange, handleValueChange } = params;
+	const currentFormatRef = (0, react.useRef)(format ?? defaultFormat);
+	if (format !== void 0) currentFormatRef.current = format;
+	const [forceOpaqueHex, setForceOpaqueHex] = (0, react.useState)(null);
+	const handleFormatChange = (0, react.useCallback)((nextFormat) => {
+		currentFormatRef.current = nextFormat;
+		onFormatChange?.(nextFormat);
+	}, [onFormatChange]);
+	const handleSwatchSelect = (0, react.useCallback)((value) => {
+		const desiredFormat = currentFormatRef.current;
+		const result = require_color_picker_base_utils.getSwatchSelectionResult({
+			swatchValue: value,
+			desiredFormat
+		});
+		if (result.forceOpaqueHex !== null) setForceOpaqueHex(result.forceOpaqueHex);
+		handleValueChange(result.value);
+	}, [handleValueChange]);
+	(0, react.useLayoutEffect)(() => {
+		if (forceOpaqueHex === null) return;
+		if (currentValue.trim().toLowerCase() === forceOpaqueHex) setForceOpaqueHex(null);
+	}, [currentValue, forceOpaqueHex]);
+	return {
+		valueForPicker: require_color_picker_base_utils.toPickerValue({
+			currentValue,
+			currentFormat: currentFormatRef.current,
+			forceOpaqueHex
+		}),
+		handleFormatChange,
+		handleSwatchSelect
+	};
+}
+
+//#endregion
+exports.useColorPickerBaseSwatch = useColorPickerBaseSwatch;

package/dist/ColorPickerBase/hooks/use-color-picker-base-swatch.js

@@ -0,0 +1,39 @@
+import { getSwatchSelectionResult, toPickerValue } from "../utils/color-picker-base-utils.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+//#region src/ColorPickerBase/hooks/use-color-picker-base-swatch.ts
+function useColorPickerBaseSwatch(params) {
+	const { currentValue, format, defaultFormat, onFormatChange, handleValueChange } = params;
+	const currentFormatRef = useRef(format ?? defaultFormat);
+	if (format !== void 0) currentFormatRef.current = format;
+	const [forceOpaqueHex, setForceOpaqueHex] = useState(null);
+	const handleFormatChange = useCallback((nextFormat) => {
+		currentFormatRef.current = nextFormat;
+		onFormatChange?.(nextFormat);
+	}, [onFormatChange]);
+	const handleSwatchSelect = useCallback((value) => {
+		const desiredFormat = currentFormatRef.current;
+		const result = getSwatchSelectionResult({
+			swatchValue: value,
+			desiredFormat
+		});
+		if (result.forceOpaqueHex !== null) setForceOpaqueHex(result.forceOpaqueHex);
+		handleValueChange(result.value);
+	}, [handleValueChange]);
+	useLayoutEffect(() => {
+		if (forceOpaqueHex === null) return;
+		if (currentValue.trim().toLowerCase() === forceOpaqueHex) setForceOpaqueHex(null);
+	}, [currentValue, forceOpaqueHex]);
+	return {
+		valueForPicker: toPickerValue({
+			currentValue,
+			currentFormat: currentFormatRef.current,
+			forceOpaqueHex
+		}),
+		handleFormatChange,
+		handleSwatchSelect
+	};
+}
+
+//#endregion
+export { useColorPickerBaseSwatch };

package/dist/ColorPickerBase/hooks/use-color-picker-base-value.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_controlled = require('../../hooks/src/use-controlled.cjs');
+require('../../hooks/src/index.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/ColorPickerBase/hooks/use-color-picker-base-value.ts
+function useColorPickerBaseValue(params) {
+	const { value: propValue, defaultValue, onChange, onValueChange } = params;
+	const [currentValue, setCurrentValue] = require_use_controlled.default({
+		controlled: propValue,
+		default: defaultValue,
+		name: "ColorPickerBase",
+		state: "value"
+	});
+	/**
+	* Prevent "Maximum update depth exceeded" in controlled mode.
+	*
+	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
+	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
+	* each of which emits onValueChange). This can create a feedback loop if the parent
+	* re-renders and passes back the same normalized value, causing infinite re-renders
+	* during fast pointer moves.
+	*/
+	const isApplyingControlledValueRef = (0, react.useRef)(false);
+	const lastPropValueRef = (0, react.useRef)(propValue);
+	const lastNotifiedValueRef = (0, react.useRef)(void 0);
+	if (propValue !== lastPropValueRef.current) {
+		lastPropValueRef.current = propValue;
+		isApplyingControlledValueRef.current = true;
+	}
+	(0, react.useEffect)(() => {
+		isApplyingControlledValueRef.current = false;
+	}, [propValue]);
+	return {
+		currentValue,
+		handleValueChange: (0, react.useCallback)((value) => {
+			if (isApplyingControlledValueRef.current) return;
+			if (lastNotifiedValueRef.current === value) {
+				setCurrentValue(value);
+				return;
+			}
+			setCurrentValue(value);
+			onChange?.(value);
+			onValueChange?.(value);
+			lastNotifiedValueRef.current = value;
+		}, [
+			setCurrentValue,
+			onChange,
+			onValueChange
+		])
+	};
+}
+
+//#endregion
+exports.useColorPickerBaseValue = useColorPickerBaseValue;

package/dist/ColorPickerBase/hooks/use-color-picker-base-value.js

@@ -0,0 +1,54 @@
+import useControlled from "../../hooks/src/use-controlled.js";
+import "../../hooks/src/index.js";
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/ColorPickerBase/hooks/use-color-picker-base-value.ts
+function useColorPickerBaseValue(params) {
+	const { value: propValue, defaultValue, onChange, onValueChange } = params;
+	const [currentValue, setCurrentValue] = useControlled({
+		controlled: propValue,
+		default: defaultValue,
+		name: "ColorPickerBase",
+		state: "value"
+	});
+	/**
+	* Prevent "Maximum update depth exceeded" in controlled mode.
+	*
+	* The underlying @pixpilot/shadcn ColorPicker calls onValueChange inside a layout-effect
+	* when syncing a controlled 'value' prop (it calls both store.setColor() and store.setHsv(),
+	* each of which emits onValueChange). This can create a feedback loop if the parent
+	* re-renders and passes back the same normalized value, causing infinite re-renders
+	* during fast pointer moves.
+	*/
+	const isApplyingControlledValueRef = useRef(false);
+	const lastPropValueRef = useRef(propValue);
+	const lastNotifiedValueRef = useRef(void 0);
+	if (propValue !== lastPropValueRef.current) {
+		lastPropValueRef.current = propValue;
+		isApplyingControlledValueRef.current = true;
+	}
+	useEffect(() => {
+		isApplyingControlledValueRef.current = false;
+	}, [propValue]);
+	return {
+		currentValue,
+		handleValueChange: useCallback((value) => {
+			if (isApplyingControlledValueRef.current) return;
+			if (lastNotifiedValueRef.current === value) {
+				setCurrentValue(value);
+				return;
+			}
+			setCurrentValue(value);
+			onChange?.(value);
+			onValueChange?.(value);
+			lastNotifiedValueRef.current = value;
+		}, [
+			setCurrentValue,
+			onChange,
+			onValueChange
+		])
+	};
+}
+
+//#endregion
+export { useColorPickerBaseValue };

package/dist/ColorPickerBase/utils/color-picker-base-utils.cjs

@@ -0,0 +1,48 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+
+//#region src/ColorPickerBase/utils/color-picker-base-utils.ts
+const HEX_WITHOUT_ALPHA_SHORT_TOTAL_LENGTH = 4;
+const HEX_WITHOUT_ALPHA_LONG_TOTAL_LENGTH = 7;
+const OPAQUE_ALPHA_HEX = "ff";
+function isHexWithoutAlphaString(value) {
+	const trimmed = value.trim().toLowerCase();
+	if (!trimmed.startsWith("#")) return false;
+	return trimmed.length === HEX_WITHOUT_ALPHA_SHORT_TOTAL_LENGTH || trimmed.length === HEX_WITHOUT_ALPHA_LONG_TOTAL_LENGTH;
+}
+function toPickerValue(params) {
+	const { currentValue, currentFormat, forceOpaqueHex } = params;
+	if (forceOpaqueHex === null) return currentValue;
+	if (currentFormat !== "hex") return currentValue;
+	if (currentValue.trim().toLowerCase() !== forceOpaqueHex) return currentValue;
+	return `${forceOpaqueHex}${OPAQUE_ALPHA_HEX}`;
+}
+function getSwatchSelectionResult(params) {
+	const { swatchValue, desiredFormat } = params;
+	const parsed = __pixpilot_shadcn.colorUtils.parseColorString(swatchValue);
+	if (!parsed) return {
+		value: swatchValue,
+		forceOpaqueHex: null
+	};
+	const isHexWithoutAlpha = isHexWithoutAlphaString(swatchValue);
+	const normalizedColor = isHexWithoutAlpha ? {
+		...parsed,
+		a: 1
+	} : parsed;
+	if (desiredFormat === "hex" && isHexWithoutAlpha) {
+		const baseHex = __pixpilot_shadcn.colorUtils.colorToString(normalizedColor, "hex");
+		return {
+			value: baseHex,
+			forceOpaqueHex: baseHex.trim().toLowerCase()
+		};
+	}
+	return {
+		value: __pixpilot_shadcn.colorUtils.colorToString(normalizedColor, desiredFormat),
+		forceOpaqueHex: null
+	};
+}
+
+//#endregion
+exports.getSwatchSelectionResult = getSwatchSelectionResult;
+exports.toPickerValue = toPickerValue;

package/dist/ColorPickerBase/utils/color-picker-base-utils.js

@@ -0,0 +1,45 @@
+import { colorUtils } from "@pixpilot/shadcn";
+
+//#region src/ColorPickerBase/utils/color-picker-base-utils.ts
+const HEX_WITHOUT_ALPHA_SHORT_TOTAL_LENGTH = 4;
+const HEX_WITHOUT_ALPHA_LONG_TOTAL_LENGTH = 7;
+const OPAQUE_ALPHA_HEX = "ff";
+function isHexWithoutAlphaString(value) {
+	const trimmed = value.trim().toLowerCase();
+	if (!trimmed.startsWith("#")) return false;
+	return trimmed.length === HEX_WITHOUT_ALPHA_SHORT_TOTAL_LENGTH || trimmed.length === HEX_WITHOUT_ALPHA_LONG_TOTAL_LENGTH;
+}
+function toPickerValue(params) {
+	const { currentValue, currentFormat, forceOpaqueHex } = params;
+	if (forceOpaqueHex === null) return currentValue;
+	if (currentFormat !== "hex") return currentValue;
+	if (currentValue.trim().toLowerCase() !== forceOpaqueHex) return currentValue;
+	return `${forceOpaqueHex}${OPAQUE_ALPHA_HEX}`;
+}
+function getSwatchSelectionResult(params) {
+	const { swatchValue, desiredFormat } = params;
+	const parsed = colorUtils.parseColorString(swatchValue);
+	if (!parsed) return {
+		value: swatchValue,
+		forceOpaqueHex: null
+	};
+	const isHexWithoutAlpha = isHexWithoutAlphaString(swatchValue);
+	const normalizedColor = isHexWithoutAlpha ? {
+		...parsed,
+		a: 1
+	} : parsed;
+	if (desiredFormat === "hex" && isHexWithoutAlpha) {
+		const baseHex = colorUtils.colorToString(normalizedColor, "hex");
+		return {
+			value: baseHex,
+			forceOpaqueHex: baseHex.trim().toLowerCase()
+		};
+	}
+	return {
+		value: colorUtils.colorToString(normalizedColor, desiredFormat),
+		forceOpaqueHex: null
+	};
+}
+
+//#endregion
+export { getSwatchSelectionResult, toPickerValue };

package/dist/Select.d.ts

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

package/dist/tags-input.d.ts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "./CommandOptionList.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime4 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_runtime3.JSX.Element;
+}: TagsInputProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -44,8 +44,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@internal/hooks": "0.0.0",
-    "@pixpilot/shadcn": "0.5.0"
+    "@pixpilot/shadcn": "0.6.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",
@@ -59,6 +58,7 @@
     "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/tsdown-config": "0.1.0",