@pixpilot/shadcn 0.4.0 → 0.6.0

package/dist/components/ui/color-picker.js

@@ -0,0 +1,1152 @@
+'use client';
+
+
+import { cn } from "../../lib/utils.js";
+import "../../lib/index.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { VisuallyHiddenInput } from "../visually-hidden-input.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect.js";
+import { useAsRef } from "../../hooks/use-as-ref.js";
+import { useLazyRef } from "../../hooks/use-lazy-ref.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { PipetteIcon } from "lucide-react";
+import { useDirection } from "@radix-ui/react-direction";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+//#region src/components/ui/color-picker.tsx
+const ROOT_NAME = "ColorPicker";
+const ROOT_IMPL_NAME = "ColorPickerImpl";
+const TRIGGER_NAME = "ColorPickerTrigger";
+const CONTENT_NAME = "ColorPickerContent";
+const AREA_NAME = "ColorPickerArea";
+const HUE_SLIDER_NAME = "ColorPickerHueSlider";
+const ALPHA_SLIDER_NAME = "ColorPickerAlphaSlider";
+const SWATCH_NAME = "ColorPickerSwatch";
+const EYE_DROPPER_NAME = "ColorPickerEyeDropper";
+const FORMAT_SELECT_NAME = "ColorPickerFormatSelect";
+const INPUT_NAME = "ColorPickerInput";
+const colorFormats = [
+	"hex",
+	"rgb",
+	"hsl",
+	"hsb"
+];
+function hexToRgb(hex, alpha) {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	return result ? {
+		r: Number.parseInt(result[1] ?? "0", 16),
+		g: Number.parseInt(result[2] ?? "0", 16),
+		b: Number.parseInt(result[3] ?? "0", 16),
+		a: alpha ?? 1
+	} : {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: alpha ?? 1
+	};
+}
+function rgbToHex(color) {
+	const toHex = (n) => {
+		const hex = Math.round(n).toString(16);
+		return hex.length === 1 ? `0${hex}` : hex;
+	};
+	return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+}
+function rgbToHexWithAlpha(color) {
+	const toHex = (n) => {
+		const hex = Math.round(n).toString(16);
+		return hex.length === 1 ? `0${hex}` : hex;
+	};
+	const alphaByte = Math.min(255, Math.max(0, Math.round((color.a ?? 1) * 255)));
+	return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}${toHex(alphaByte)}`;
+}
+function rgbToHsv(color) {
+	const r = color.r / 255;
+	const g = color.g / 255;
+	const b = color.b / 255;
+	const max = Math.max(r, g, b);
+	const diff = max - Math.min(r, g, b);
+	let h = 0;
+	if (diff !== 0) switch (max) {
+		case r:
+			h = (g - b) / diff % 6;
+			break;
+		case g:
+			h = (b - r) / diff + 2;
+			break;
+		case b:
+			h = (r - g) / diff + 4;
+			break;
+	}
+	h = Math.round(h * 60);
+	if (h < 0) h += 360;
+	const s = max === 0 ? 0 : diff / max;
+	const v = max;
+	return {
+		h,
+		s: Math.round(s * 100),
+		v: Math.round(v * 100),
+		a: color.a
+	};
+}
+function hsvToRgb(hsv) {
+	const h = hsv.h / 360;
+	const s = hsv.s / 100;
+	const v = hsv.v / 100;
+	const i = Math.floor(h * 6);
+	const f = h * 6 - i;
+	const p = v * (1 - s);
+	const q = v * (1 - f * s);
+	const t = v * (1 - (1 - f) * s);
+	let r;
+	let g;
+	let b;
+	switch (i % 6) {
+		case 0:
+			r = v;
+			g = t;
+			b = p;
+			break;
+		case 1:
+			r = q;
+			g = v;
+			b = p;
+			break;
+		case 2:
+			r = p;
+			g = v;
+			b = t;
+			break;
+		case 3:
+			r = p;
+			g = q;
+			b = v;
+			break;
+		case 4:
+			r = t;
+			g = p;
+			b = v;
+			break;
+		case 5:
+			r = v;
+			g = p;
+			b = q;
+			break;
+		default:
+			r = 0;
+			g = 0;
+			b = 0;
+	}
+	return {
+		r: Math.round(r * 255),
+		g: Math.round(g * 255),
+		b: Math.round(b * 255),
+		a: hsv.a
+	};
+}
+function colorToString(color, format = "hex") {
+	switch (format) {
+		case "hex": return color.a < 1 ? rgbToHexWithAlpha(color) : rgbToHex(color);
+		case "rgb": return color.a < 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`;
+		case "hsl": {
+			const hsl = rgbToHsl(color);
+			return color.a < 1 ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})` : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+		}
+		case "hsb": {
+			const hsv = rgbToHsv(color);
+			return color.a < 1 ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})` : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
+		}
+		default: return rgbToHex(color);
+	}
+}
+function rgbToHsl(color) {
+	const r = color.r / 255;
+	const g = color.g / 255;
+	const b = color.b / 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const diff = max - min;
+	const sum = max + min;
+	const l = sum / 2;
+	let h = 0;
+	let s = 0;
+	if (diff !== 0) {
+		s = l > .5 ? diff / (2 - sum) : diff / sum;
+		if (max === r) h = (g - b) / diff + (g < b ? 6 : 0);
+		else if (max === g) h = (b - r) / diff + 2;
+		else if (max === b) h = (r - g) / diff + 4;
+		h /= 6;
+	}
+	return {
+		h: Math.round(h * 360),
+		s: Math.round(s * 100),
+		l: Math.round(l * 100)
+	};
+}
+function hslToRgb(hsl, alpha = 1) {
+	const h = hsl.h / 360;
+	const s = hsl.s / 100;
+	const l = hsl.l / 100;
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const x = c * (1 - Math.abs(h * 6 % 2 - 1));
+	const m = l - c / 2;
+	let r = 0;
+	let g = 0;
+	let b = 0;
+	if (h >= 0 && h < 1 / 6) {
+		r = c;
+		g = x;
+		b = 0;
+	} else if (h >= 1 / 6 && h < 2 / 6) {
+		r = x;
+		g = c;
+		b = 0;
+	} else if (h >= 2 / 6 && h < 3 / 6) {
+		r = 0;
+		g = c;
+		b = x;
+	} else if (h >= 3 / 6 && h < 4 / 6) {
+		r = 0;
+		g = x;
+		b = c;
+	} else if (h >= 4 / 6 && h < 5 / 6) {
+		r = x;
+		g = 0;
+		b = c;
+	} else if (h >= 5 / 6 && h < 1) {
+		r = c;
+		g = 0;
+		b = x;
+	}
+	return {
+		r: Math.round((r + m) * 255),
+		g: Math.round((g + m) * 255),
+		b: Math.round((b + m) * 255),
+		a: alpha
+	};
+}
+function parseColorString(value) {
+	const trimmed = value.trim();
+	if (trimmed.startsWith("#")) {
+		const hexMatch = trimmed.match(/^#([a-f0-9]{3}|[a-f0-9]{4}|[a-f0-9]{6}|[a-f0-9]{8})$/i);
+		if (hexMatch) {
+			const hex = (hexMatch[1] ?? "").toLowerCase();
+			if (hex.length === 3 || hex.length === 4) return {
+				r: Number.parseInt(hex[0] ? `${hex[0]}${hex[0]}` : "00", 16),
+				g: Number.parseInt(hex[1] ? `${hex[1]}${hex[1]}` : "00", 16),
+				b: Number.parseInt(hex[2] ? `${hex[2]}${hex[2]}` : "00", 16),
+				a: hex.length === 4 ? Number.parseInt(hex[3] ? `${hex[3]}${hex[3]}` : "ff", 16) / 255 : 1
+			};
+			if (hex.length === 6 || hex.length === 8) return {
+				r: Number.parseInt(hex.slice(0, 2) || "00", 16),
+				g: Number.parseInt(hex.slice(2, 4) || "00", 16),
+				b: Number.parseInt(hex.slice(4, 6) || "00", 16),
+				a: hex.length === 8 ? Number.parseInt(hex.slice(6, 8) || "ff", 16) / 255 : 1
+			};
+		}
+	}
+	const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+	if (rgbMatch) return {
+		r: Number.parseInt(rgbMatch[1] ?? "0", 10),
+		g: Number.parseInt(rgbMatch[2] ?? "0", 10),
+		b: Number.parseInt(rgbMatch[3] ?? "0", 10),
+		a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1
+	};
+	const hslMatch = trimmed.match(/^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+)\s*)?\)$/);
+	if (hslMatch) {
+		const h = Number.parseInt(hslMatch[1] ?? "0", 10);
+		const s = Number.parseInt(hslMatch[2] ?? "0", 10) / 100;
+		const l = Number.parseInt(hslMatch[3] ?? "0", 10) / 100;
+		const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
+		const c = (1 - Math.abs(2 * l - 1)) * s;
+		const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+		const m = l - c / 2;
+		let r = 0;
+		let g = 0;
+		let b = 0;
+		if (h >= 0 && h < 60) {
+			r = c;
+			g = x;
+			b = 0;
+		} else if (h >= 60 && h < 120) {
+			r = x;
+			g = c;
+			b = 0;
+		} else if (h >= 120 && h < 180) {
+			r = 0;
+			g = c;
+			b = x;
+		} else if (h >= 180 && h < 240) {
+			r = 0;
+			g = x;
+			b = c;
+		} else if (h >= 240 && h < 300) {
+			r = x;
+			g = 0;
+			b = c;
+		} else if (h >= 300 && h < 360) {
+			r = c;
+			g = 0;
+			b = x;
+		}
+		return {
+			r: Math.round((r + m) * 255),
+			g: Math.round((g + m) * 255),
+			b: Math.round((b + m) * 255),
+			a
+		};
+	}
+	const hsbMatch = trimmed.match(/^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+)\s*)?\)$/);
+	if (hsbMatch) return hsvToRgb({
+		h: Number.parseInt(hsbMatch[1] ?? "0", 10),
+		s: Number.parseInt(hsbMatch[2] ?? "0", 10),
+		v: Number.parseInt(hsbMatch[3] ?? "0", 10),
+		a: hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1
+	});
+	return null;
+}
+function areColorsEqual(a, b) {
+	return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
+}
+function areHsvEqual(a, b) {
+	return a.h === b.h && a.s === b.s && a.v === b.v && a.a === b.a;
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React.use(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`ColorPickerRoot\``);
+	return context;
+}
+function useStore(selector) {
+	const store = useStoreContext("useStore");
+	const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const ColorPickerContext = React.createContext(null);
+function useColorPickerContext(consumerName) {
+	const context = React.use(ColorPickerContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function ColorPicker(props) {
+	const { value: valueProp, defaultValue = "#000000", onValueChange, format: formatProp, defaultFormat = "hex", onFormatChange, defaultOpen, open: openProp, onOpenChange, name, disabled, inline, readOnly, required,...rootProps } = props;
+	const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+	const stateRef = useLazyRef(() => {
+		const color = hexToRgb(valueProp ?? defaultValue);
+		return {
+			color,
+			hsv: rgbToHsv(color),
+			open: openProp ?? defaultOpen ?? false,
+			format: formatProp ?? defaultFormat
+		};
+	});
+	const propsRef = useAsRef({
+		onValueChange,
+		onOpenChange,
+		onFormatChange
+	});
+	const store = React.useMemo(() => {
+		return {
+			subscribe: (cb) => {
+				listenersRef.current.add(cb);
+				return () => listenersRef.current.delete(cb);
+			},
+			getState: () => stateRef.current,
+			setColor: (value) => {
+				if (areColorsEqual(stateRef.current.color, value)) return;
+				const prevState = { ...stateRef.current };
+				stateRef.current.color = value;
+				if (propsRef.current.onValueChange) {
+					const colorString = colorToString(value, prevState.format);
+					propsRef.current.onValueChange(colorString);
+				}
+				store.notify();
+			},
+			setHsv: (value) => {
+				if (areHsvEqual(stateRef.current.hsv, value)) return;
+				const prevState = { ...stateRef.current };
+				stateRef.current.hsv = value;
+				if (propsRef.current.onValueChange) {
+					const colorString = colorToString(hsvToRgb(value), prevState.format);
+					propsRef.current.onValueChange(colorString);
+				}
+				store.notify();
+			},
+			syncFromValueProp: (value) => {
+				const currentState = stateRef.current;
+				const parsed = parseColorString(value);
+				let color = parsed || {
+					r: 0,
+					g: 0,
+					b: 0,
+					a: currentState.color.a
+				};
+				if (parsed && typeof currentState.color.a === "number") {
+					const trimmed = value.trim().toLowerCase();
+					if (trimmed.startsWith("#") && (trimmed.length === 4 || trimmed.length === 7) && parsed.a === 1 && currentState.color.a !== 1) color = {
+						...parsed,
+						a: currentState.color.a
+					};
+				}
+				const nextColor = color;
+				const nextHsv = rgbToHsv(nextColor);
+				const didChangeColor = !areColorsEqual(currentState.color, nextColor);
+				const didChangeHsv = !areHsvEqual(currentState.hsv, nextHsv);
+				if (!didChangeColor && !didChangeHsv) return;
+				if (didChangeColor) currentState.color = nextColor;
+				if (didChangeHsv) currentState.hsv = nextHsv;
+				store.notify();
+			},
+			setOpen: (value) => {
+				if (Object.is(stateRef.current.open, value)) return;
+				stateRef.current.open = value;
+				if (propsRef.current.onOpenChange) propsRef.current.onOpenChange(value);
+				store.notify();
+			},
+			setFormat: (value) => {
+				if (Object.is(stateRef.current.format, value)) return;
+				stateRef.current.format = value;
+				if (propsRef.current.onFormatChange) propsRef.current.onFormatChange(value);
+				store.notify();
+			},
+			notify: () => {
+				for (const cb of listenersRef.current) cb();
+			}
+		};
+	}, [
+		listenersRef,
+		stateRef,
+		propsRef
+	]);
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(ColorPickerImpl, {
+			...rootProps,
+			value: valueProp,
+			defaultOpen,
+			open: openProp,
+			name,
+			disabled,
+			inline,
+			readOnly,
+			required
+		})
+	});
+}
+function ColorPickerImpl(props) {
+	const { value: valueProp, dir: dirProp, defaultOpen, open: openProp, name, ref, asChild, disabled, inline, modal, readOnly, required,...rootProps } = props;
+	const store = useStoreContext(ROOT_IMPL_NAME);
+	const dir = useDirection(dirProp);
+	const [formTrigger, setFormTrigger] = React.useState(null);
+	const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+	const isFormControl = formTrigger ? Boolean(formTrigger.closest("form")) : true;
+	useIsomorphicLayoutEffect(() => {
+		if (valueProp !== void 0) store.syncFromValueProp(valueProp);
+	}, [valueProp]);
+	useIsomorphicLayoutEffect(() => {
+		if (openProp !== void 0) store.setOpen(openProp);
+	}, [openProp]);
+	const contextValue = React.useMemo(() => ({
+		dir,
+		disabled,
+		inline,
+		readOnly,
+		required
+	}), [
+		dir,
+		disabled,
+		inline,
+		readOnly,
+		required
+	]);
+	const value = useStore((state) => rgbToHex(state.color));
+	const open = useStore((state) => state.open);
+	const RootPrimitive = asChild ? Slot : "div";
+	if (inline) return /* @__PURE__ */ jsxs(ColorPickerContext.Provider, {
+		value: contextValue,
+		children: [/* @__PURE__ */ jsx(RootPrimitive, {
+			...rootProps,
+			ref: composedRef
+		}), isFormControl && /* @__PURE__ */ jsx(VisuallyHiddenInput, {
+			type: "hidden",
+			control: formTrigger,
+			name,
+			value,
+			disabled,
+			readOnly,
+			required
+		})]
+	});
+	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			defaultOpen,
+			open,
+			onOpenChange: store.setOpen,
+			modal,
+			children: [/* @__PURE__ */ jsx(RootPrimitive, {
+				...rootProps,
+				ref: composedRef
+			}), isFormControl && /* @__PURE__ */ jsx(VisuallyHiddenInput, {
+				type: "hidden",
+				control: formTrigger,
+				name,
+				value,
+				disabled,
+				readOnly,
+				required
+			})]
+		})
+	});
+}
+function ColorPickerTrigger({ variant,...props }) {
+	const { asChild, disabled,...triggerProps } = props;
+	const context = useColorPickerContext(TRIGGER_NAME);
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		disabled: disabled || context.disabled,
+		children: /* @__PURE__ */ jsx(asChild ? Slot : Button, {
+			"data-slot": "color-picker-trigger",
+			...asChild ? {} : { variant },
+			...triggerProps
+		})
+	});
+}
+function ColorPickerContent(props) {
+	const { asChild, className, children,...popoverContentProps } = props;
+	if (useColorPickerContext(CONTENT_NAME).inline) return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "color-picker-content",
+		...popoverContentProps,
+		className: cn("flex w-[340px] flex-col gap-4 p-4", className),
+		children
+	});
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		"data-slot": "color-picker-content",
+		asChild,
+		...popoverContentProps,
+		className: cn("flex w-[340px] flex-col gap-4 p-4", className),
+		children
+	});
+}
+function ColorPickerArea(props) {
+	const { asChild, onPointerDown: onPointerDownProp, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, className, ref,...areaProps } = props;
+	const propsRef = useAsRef({
+		onPointerDown: onPointerDownProp,
+		onPointerMove: onPointerMoveProp,
+		onPointerUp: onPointerUpProp
+	});
+	const context = useColorPickerContext(AREA_NAME);
+	const store = useStoreContext(AREA_NAME);
+	const hsv = useStore((state) => state.hsv);
+	const isDraggingRef = React.useRef(false);
+	const areaRef = React.useRef(null);
+	const composedRef = useComposedRefs(ref, areaRef);
+	const updateColorFromPosition = React.useCallback((clientX, clientY) => {
+		if (!areaRef.current) return;
+		const rect = areaRef.current.getBoundingClientRect();
+		const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		const y = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+		const newHsv = {
+			h: hsv?.h ?? 0,
+			s: Math.round(x * 100),
+			v: Math.round(y * 100),
+			a: hsv?.a ?? 1
+		};
+		store.setHsv(newHsv);
+		store.setColor(hsvToRgb(newHsv));
+	}, [hsv, store]);
+	const onPointerDown = React.useCallback((event) => {
+		if (context.disabled) return;
+		propsRef.current.onPointerDown?.(event);
+		if (event.defaultPrevented) return;
+		isDraggingRef.current = true;
+		areaRef.current?.setPointerCapture(event.pointerId);
+		updateColorFromPosition(event.clientX, event.clientY);
+	}, [
+		context.disabled,
+		updateColorFromPosition,
+		propsRef
+	]);
+	const onPointerMove = React.useCallback((event) => {
+		propsRef.current.onPointerMove?.(event);
+		if (event.defaultPrevented) return;
+		if (isDraggingRef.current) updateColorFromPosition(event.clientX, event.clientY);
+	}, [updateColorFromPosition, propsRef]);
+	const onPointerUp = React.useCallback((event) => {
+		propsRef.current.onPointerUp?.(event);
+		if (event.defaultPrevented) return;
+		isDraggingRef.current = false;
+		areaRef.current?.releasePointerCapture(event.pointerId);
+	}, [propsRef]);
+	const backgroundHue = hsvToRgb({
+		h: hsv?.h ?? 0,
+		s: 100,
+		v: 100,
+		a: 1
+	});
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "div", {
+		"data-slot": "color-picker-area",
+		...areaProps,
+		className: cn("relative h-40 w-full cursor-crosshair touch-none rounded-sm border", context.disabled && "pointer-events-none opacity-50", className),
+		ref: composedRef,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 overflow-hidden rounded-sm",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0",
+					style: { backgroundColor: `rgb(${backgroundHue.r}, ${backgroundHue.g}, ${backgroundHue.b})` }
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0",
+					style: { background: "linear-gradient(to right, #fff, transparent)" }
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0",
+					style: { background: "linear-gradient(to bottom, transparent, #000)" }
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm",
+			style: {
+				left: `${hsv?.s ?? 0}%`,
+				top: `${100 - (hsv?.v ?? 0)}%`
+			}
+		})]
+	});
+}
+function ColorPickerHueSlider(props) {
+	const { className,...sliderProps } = props;
+	const context = useColorPickerContext(HUE_SLIDER_NAME);
+	const store = useStoreContext(HUE_SLIDER_NAME);
+	const hsv = useStore((state) => state.hsv);
+	const onValueChange = React.useCallback((values) => {
+		const newHsv = {
+			h: values[0] ?? 0,
+			s: hsv?.s ?? 0,
+			v: hsv?.v ?? 0,
+			a: hsv?.a ?? 1
+		};
+		store.setHsv(newHsv);
+		store.setColor(hsvToRgb(newHsv));
+	}, [hsv, store]);
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		"data-slot": "color-picker-hue-slider",
+		...sliderProps,
+		max: 360,
+		step: 1,
+		className: cn("relative flex w-full touch-none select-none items-center", className),
+		value: [hsv?.h ?? 0],
+		onValueChange,
+		disabled: context.disabled,
+		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+			className: "relative h-3 w-full grow overflow-hidden rounded-full bg-[linear-gradient(to_right,#ff0000_0%,#ffff00_16.66%,#00ff00_33.33%,#00ffff_50%,#0000ff_66.66%,#ff00ff_83.33%,#ff0000_100%)]",
+			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full" })
+		}), /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })]
+	});
+}
+function ColorPickerAlphaSlider(props) {
+	const { className,...sliderProps } = props;
+	const context = useColorPickerContext(ALPHA_SLIDER_NAME);
+	const store = useStoreContext(ALPHA_SLIDER_NAME);
+	const color = useStore((state) => state.color);
+	const hsv = useStore((state) => state.hsv);
+	const onValueChange = React.useCallback((values) => {
+		const alpha = (values[0] ?? 0) / 100;
+		const newColor = {
+			...color,
+			a: alpha
+		};
+		const newHsv = {
+			...hsv,
+			a: alpha
+		};
+		store.setColor(newColor);
+		store.setHsv(newHsv);
+	}, [
+		color,
+		hsv,
+		store
+	]);
+	const gradientColor = `rgb(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0})`;
+	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+		"data-slot": "color-picker-alpha-slider",
+		...sliderProps,
+		max: 100,
+		step: 1,
+		disabled: context.disabled,
+		className: cn("relative flex w-full touch-none select-none items-center", className),
+		value: [Math.round((color?.a ?? 1) * 100)],
+		onValueChange,
+		children: [/* @__PURE__ */ jsxs(SliderPrimitive.Track, {
+			className: "relative h-3 w-full grow overflow-hidden rounded-full",
+			style: {
+				background: "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: "8px 8px",
+				backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 rounded-full",
+				style: { background: `linear-gradient(to right, transparent, ${gradientColor})` }
+			}), /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full" })]
+		}), /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })]
+	});
+}
+function ColorPickerSwatch(props) {
+	const { asChild, className,...swatchProps } = props;
+	const context = useColorPickerContext(SWATCH_NAME);
+	const color = useStore((state) => state.color);
+	const format = useStore((state) => state.format);
+	const backgroundStyle = React.useMemo(() => {
+		if (!color) return { background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat" };
+		const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+		if (color.a < 1) return { background: `linear-gradient(${colorString}, ${colorString}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 8px 8px` };
+		return { backgroundColor: colorString };
+	}, [color]);
+	const ariaLabel = !color ? "No color selected" : `Current color: ${colorToString(color, format)}`;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "img",
+		"aria-label": ariaLabel,
+		"data-slot": "color-picker-swatch",
+		...swatchProps,
+		className: cn("box-border size-8 rounded-sm border shadow-sm", context.disabled && "opacity-50", className),
+		style: {
+			...backgroundStyle,
+			forcedColorAdjust: "none"
+		}
+	});
+}
+function ColorPickerEyeDropper(props) {
+	const { size: sizeProp, children, disabled,...buttonProps } = props;
+	const context = useColorPickerContext(EYE_DROPPER_NAME);
+	const store = useStoreContext(EYE_DROPPER_NAME);
+	const color = useStore((state) => state.color);
+	const isDisabled = disabled || context.disabled;
+	const onEyeDropper = React.useCallback(async () => {
+		if (!window.EyeDropper) return;
+		try {
+			const result = await new window.EyeDropper().open();
+			if (result.sRGBHex) {
+				const currentAlpha = color?.a ?? 1;
+				const newColor = hexToRgb(result.sRGBHex, currentAlpha);
+				const newHsv = rgbToHsv(newColor);
+				store.setColor(newColor);
+				store.setHsv(newHsv);
+			}
+		} catch (error) {
+			console.warn("EyeDropper error:", error);
+		}
+	}, [color, store]);
+	if (!(typeof window !== "undefined" && Boolean(window.EyeDropper))) return null;
+	const size = sizeProp ?? (children ? "default" : "icon");
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "color-picker-eye-dropper",
+		...buttonProps,
+		variant: "outline",
+		size,
+		onClick: onEyeDropper,
+		disabled: isDisabled,
+		children: children ?? /* @__PURE__ */ jsx(PipetteIcon, {})
+	});
+}
+function ColorPickerFormatSelect(props) {
+	const { size, disabled, className,...selectProps } = props;
+	const context = useColorPickerContext(FORMAT_SELECT_NAME);
+	const store = useStoreContext(FORMAT_SELECT_NAME);
+	const isDisabled = disabled || context.disabled;
+	const format = useStore((state) => state.format);
+	const onFormatChange = React.useCallback((value) => {
+		store.setFormat(value);
+	}, [store]);
+	return /* @__PURE__ */ jsxs(Select, {
+		"data-slot": "color-picker-format-select",
+		...selectProps,
+		value: format,
+		onValueChange: onFormatChange,
+		disabled: isDisabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"data-slot": "color-picker-format-select-trigger",
+			size: size ?? "sm",
+			className: cn(className),
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: colorFormats.map((format$1) => /* @__PURE__ */ jsx(SelectItem, {
+			value: format$1,
+			children: format$1.toUpperCase()
+		}, format$1)) })]
+	});
+}
+function ColorPickerInput(props) {
+	const store = useStoreContext(INPUT_NAME);
+	const context = useColorPickerContext(INPUT_NAME);
+	const color = useStore((state) => state.color);
+	const format = useStore((state) => state.format);
+	const hsv = useStore((state) => state.hsv);
+	const onColorChange = React.useCallback((newColor) => {
+		const newHsv = rgbToHsv(newColor);
+		store.setColor(newColor);
+		store.setHsv(newHsv);
+	}, [store]);
+	if (format === "hex") return /* @__PURE__ */ jsx(HexInput, {
+		color,
+		onColorChange,
+		context,
+		...props
+	});
+	if (format === "rgb") return /* @__PURE__ */ jsx(RgbInput, {
+		color,
+		onColorChange,
+		context,
+		...props
+	});
+	if (format === "hsl") return /* @__PURE__ */ jsx(HslInput, {
+		color,
+		onColorChange,
+		context,
+		...props
+	});
+	if (format === "hsb") return /* @__PURE__ */ jsx(HsbInput, {
+		hsv,
+		onColorChange,
+		context,
+		...props
+	});
+}
+const inputGroupItemVariants = cva("h-8 [-moz-appearance:textfield] focus-visible:z-10 focus-visible:ring-1 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", {
+	variants: { position: {
+		first: "rounded-e-none",
+		middle: "-ms-px rounded-none border-l-0",
+		last: "-ms-px rounded-s-none border-l-0",
+		isolated: ""
+	} },
+	defaultVariants: { position: "isolated" }
+});
+function InputGroupItem({ className, position,...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "color-picker-input",
+		className: cn(inputGroupItemVariants({
+			position,
+			className
+		})),
+		...props
+	});
+}
+function HexInput(props) {
+	const { color, onColorChange, context, withoutAlpha, className,...inputProps } = props;
+	const hexValue = rgbToHex(color);
+	const alphaValue = Math.round((color?.a ?? 1) * 100);
+	const onHexChange = React.useCallback((event) => {
+		const { value } = event.target;
+		const parsedColor = parseColorString(value);
+		if (parsedColor) {
+			const trimmed = value.trim().toLowerCase();
+			onColorChange(trimmed.startsWith("#") && (trimmed.length === 4 || trimmed.length === 7) ? {
+				...parsedColor,
+				a: color?.a ?? 1
+			} : parsedColor);
+		}
+	}, [color, onColorChange]);
+	const onAlphaChange = React.useCallback((event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= 100) onColorChange({
+			...color,
+			a: value / 100
+		});
+	}, [color, onColorChange]);
+	if (withoutAlpha) return /* @__PURE__ */ jsx(InputGroupItem, {
+		"aria-label": "Hex color value",
+		position: "isolated",
+		...inputProps,
+		placeholder: "#000000",
+		className: cn("font-mono", className),
+		value: hexValue,
+		onChange: onHexChange,
+		disabled: context.disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "color-picker-input-wrapper",
+		className: cn("flex items-center", className),
+		children: [/* @__PURE__ */ jsx(InputGroupItem, {
+			"aria-label": "Hex color value",
+			position: "first",
+			...inputProps,
+			placeholder: "#000000",
+			className: "flex-1 font-mono",
+			value: hexValue,
+			onChange: onHexChange,
+			disabled: context.disabled
+		}), /* @__PURE__ */ jsx(InputGroupItem, {
+			"aria-label": "Alpha transparency percentage",
+			position: "last",
+			...inputProps,
+			placeholder: "100",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			min: "0",
+			max: "100",
+			className: "w-14",
+			value: alphaValue,
+			onChange: onAlphaChange,
+			disabled: context.disabled
+		})]
+	});
+}
+function RgbInput(props) {
+	const { color, onColorChange, context, withoutAlpha, className,...inputProps } = props;
+	const rValue = Math.round(color?.r ?? 0);
+	const gValue = Math.round(color?.g ?? 0);
+	const bValue = Math.round(color?.b ?? 0);
+	const alphaValue = Math.round((color?.a ?? 1) * 100);
+	const onChannelChange = React.useCallback((channel, max, isAlpha = false) => (event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= max) {
+			const newValue = isAlpha ? value / 100 : value;
+			onColorChange({
+				...color,
+				[channel]: newValue
+			});
+		}
+	}, [color, onColorChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "color-picker-input-wrapper",
+		className: cn("flex items-center", className),
+		children: [
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Red color component (0-255)",
+				position: "first",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "255",
+				className: "w-14",
+				value: rValue,
+				onChange: onChannelChange("r", 255),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Green color component (0-255)",
+				position: "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "255",
+				className: "w-14",
+				value: gValue,
+				onChange: onChannelChange("g", 255),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Blue color component (0-255)",
+				position: withoutAlpha ? "last" : "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "255",
+				className: "w-14",
+				value: bValue,
+				onChange: onChannelChange("b", 255),
+				disabled: context.disabled
+			}),
+			!withoutAlpha && /* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Alpha transparency percentage",
+				position: "last",
+				...inputProps,
+				placeholder: "100",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: alphaValue,
+				onChange: onChannelChange("a", 100, true),
+				disabled: context.disabled
+			})
+		]
+	});
+}
+function HslInput(props) {
+	const { color, onColorChange, context, withoutAlpha, className,...inputProps } = props;
+	const hsl = React.useMemo(() => rgbToHsl(color), [color]);
+	const alphaValue = Math.round((color?.a ?? 1) * 100);
+	const onHslChannelChange = React.useCallback((channel, max) => (event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= max) onColorChange(hslToRgb({
+			...hsl,
+			[channel]: value
+		}, color?.a ?? 1));
+	}, [
+		hsl,
+		color,
+		onColorChange
+	]);
+	const onAlphaChange = React.useCallback((event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= 100) onColorChange({
+			...color,
+			a: value / 100
+		});
+	}, [color, onColorChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "color-picker-input-wrapper",
+		className: cn("flex items-center", className),
+		children: [
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Hue degree (0-360)",
+				position: "first",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "360",
+				className: "w-14",
+				value: hsl.h,
+				onChange: onHslChannelChange("h", 360),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Saturation percentage (0-100)",
+				position: "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: hsl.s,
+				onChange: onHslChannelChange("s", 100),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Lightness percentage (0-100)",
+				position: withoutAlpha ? "last" : "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: hsl.l,
+				onChange: onHslChannelChange("l", 100),
+				disabled: context.disabled
+			}),
+			!withoutAlpha && /* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Alpha transparency percentage",
+				position: "last",
+				...inputProps,
+				placeholder: "100",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: alphaValue,
+				onChange: onAlphaChange,
+				disabled: context.disabled
+			})
+		]
+	});
+}
+function HsbInput(props) {
+	const { hsv, onColorChange, context, withoutAlpha, className,...inputProps } = props;
+	const alphaValue = Math.round((hsv?.a ?? 1) * 100);
+	const onHsvChannelChange = React.useCallback((channel, max) => (event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= max) onColorChange(hsvToRgb({
+			...hsv,
+			[channel]: value
+		}));
+	}, [hsv, onColorChange]);
+	const onAlphaChange = React.useCallback((event) => {
+		const value = Number.parseInt(event.target.value, 10);
+		if (!Number.isNaN(value) && value >= 0 && value <= 100) onColorChange({
+			...hsvToRgb(hsv),
+			a: value / 100
+		});
+	}, [hsv, onColorChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "color-picker-input-wrapper",
+		className: cn("flex items-center", className),
+		children: [
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Hue degree (0-360)",
+				position: "first",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "360",
+				className: "w-14",
+				value: hsv?.h ?? 0,
+				onChange: onHsvChannelChange("h", 360),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Saturation percentage (0-100)",
+				position: "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: hsv?.s ?? 0,
+				onChange: onHsvChannelChange("s", 100),
+				disabled: context.disabled
+			}),
+			/* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Brightness percentage (0-100)",
+				position: withoutAlpha ? "last" : "middle",
+				...inputProps,
+				placeholder: "0",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: hsv?.v ?? 0,
+				onChange: onHsvChannelChange("v", 100),
+				disabled: context.disabled
+			}),
+			!withoutAlpha && /* @__PURE__ */ jsx(InputGroupItem, {
+				"aria-label": "Alpha transparency percentage",
+				position: "last",
+				...inputProps,
+				placeholder: "100",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				min: "0",
+				max: "100",
+				className: "w-14",
+				value: alphaValue,
+				onChange: onAlphaChange,
+				disabled: context.disabled
+			})
+		]
+	});
+}
+const colorUtils = {
+	colorToString,
+	parseColorString
+};
+
+//#endregion
+export { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, ColorPickerSwatch, ColorPickerTrigger, colorUtils, useStore };