@pixpilot/shadcn 0.10.1 → 0.11.1

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

@@ -1,1171 +0,0 @@
-'use client';
-
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils = require('../../lib/utils.cjs');
-require('../../lib/index.cjs');
-const require_button = require('./button.cjs');
-const require_input = require('./input.cjs');
-const require_popover = require('./popover.cjs');
-const require_select = require('./select.cjs');
-const require_compose_refs = require('../../lib/compose-refs.cjs');
-const require_visually_hidden_input = require('../visually-hidden-input.cjs');
-const require_use_isomorphic_layout_effect = require('../../hooks/use-isomorphic-layout-effect.cjs');
-const require_use_as_ref = require('../../hooks/use-as-ref.cjs');
-const require_use_lazy_ref = require('../../hooks/use-lazy-ref.cjs');
-let class_variance_authority = require("class-variance-authority");
-class_variance_authority = require_rolldown_runtime.__toESM(class_variance_authority);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __radix_ui_react_slot = require("@radix-ui/react-slot");
-__radix_ui_react_slot = require_rolldown_runtime.__toESM(__radix_ui_react_slot);
-let lucide_react = require("lucide-react");
-lucide_react = require_rolldown_runtime.__toESM(lucide_react);
-let __radix_ui_react_direction = require("@radix-ui/react-direction");
-__radix_ui_react_direction = require_rolldown_runtime.__toESM(__radix_ui_react_direction);
-let __radix_ui_react_slider = require("@radix-ui/react-slider");
-__radix_ui_react_slider = require_rolldown_runtime.__toESM(__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 = require_use_lazy_ref.useLazyRef(() => /* @__PURE__ */ new Set());
-	const stateRef = require_use_lazy_ref.useLazyRef(() => {
-		const color = hexToRgb(valueProp ?? defaultValue);
-		return {
-			color,
-			hsv: rgbToHsv(color),
-			open: openProp ?? defaultOpen ?? false,
-			format: formatProp ?? defaultFormat
-		};
-	});
-	const propsRef = require_use_as_ref.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__ */ (0, react_jsx_runtime.jsx)(StoreContext.Provider, {
-		value: store,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, __radix_ui_react_direction.useDirection)(dirProp);
-	const [formTrigger, setFormTrigger] = react.useState(null);
-	const composedRef = require_compose_refs.useComposedRefs(ref, (node) => setFormTrigger(node));
-	const isFormControl = formTrigger ? Boolean(formTrigger.closest("form")) : true;
-	require_use_isomorphic_layout_effect.useIsomorphicLayoutEffect(() => {
-		if (valueProp !== void 0) store.syncFromValueProp(valueProp);
-	}, [valueProp]);
-	require_use_isomorphic_layout_effect.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 ? __radix_ui_react_slot.Slot : "div";
-	if (inline) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ColorPickerContext.Provider, {
-		value: contextValue,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootPrimitive, {
-			...rootProps,
-			ref: composedRef
-		}), isFormControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_visually_hidden_input.VisuallyHiddenInput, {
-			type: "hidden",
-			control: formTrigger,
-			name,
-			value,
-			disabled,
-			readOnly,
-			required
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
-			defaultOpen,
-			open,
-			onOpenChange: store.setOpen,
-			modal,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootPrimitive, {
-				...rootProps,
-				ref: composedRef
-			}), isFormControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_visually_hidden_input.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__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, {
-		asChild: true,
-		disabled: disabled || context.disabled,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? __radix_ui_react_slot.Slot : require_button.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__ */ (0, react_jsx_runtime.jsx)(asChild ? __radix_ui_react_slot.Slot : "div", {
-		"data-slot": "color-picker-content",
-		...popoverContentProps,
-		className: require_utils.cn("flex w-[340px] flex-col gap-4 p-4", className),
-		children
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverContent, {
-		"data-slot": "color-picker-content",
-		asChild,
-		...popoverContentProps,
-		className: require_utils.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 = require_use_as_ref.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 = require_compose_refs.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__ */ (0, react_jsx_runtime.jsxs)(asChild ? __radix_ui_react_slot.Slot : "div", {
-		"data-slot": "color-picker-area",
-		...areaProps,
-		className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute inset-0 overflow-hidden rounded-sm",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute inset-0",
-					style: { backgroundColor: `rgb(${backgroundHue.r}, ${backgroundHue.g}, ${backgroundHue.b})` }
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute inset-0",
-					style: { background: "linear-gradient(to right, #fff, transparent)" }
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute inset-0",
-					style: { background: "linear-gradient(to bottom, transparent, #000)" }
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_slider.Root, {
-		"data-slot": "color-picker-hue-slider",
-		...sliderProps,
-		max: 360,
-		step: 1,
-		className: require_utils.cn("relative flex w-full touch-none select-none items-center", className),
-		value: [hsv?.h ?? 0],
-		onValueChange,
-		disabled: context.disabled,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_slider.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__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_slider.Range, { className: "absolute h-full" })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_slider.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__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_slider.Root, {
-		"data-slot": "color-picker-alpha-slider",
-		...sliderProps,
-		max: 100,
-		step: 1,
-		disabled: context.disabled,
-		className: require_utils.cn("relative flex w-full touch-none select-none items-center", className),
-		value: [Math.round((color?.a ?? 1) * 100)],
-		onValueChange,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_slider.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__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute inset-0 rounded-full",
-				style: { background: `linear-gradient(to right, transparent, ${gradientColor})` }
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_slider.Range, { className: "absolute h-full" })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_slider.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__ */ (0, react_jsx_runtime.jsx)(asChild ? __radix_ui_react_slot.Slot : "div", {
-		role: "img",
-		"aria-label": ariaLabel,
-		"data-slot": "color-picker-swatch",
-		...swatchProps,
-		className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
-		"data-slot": "color-picker-eye-dropper",
-		...buttonProps,
-		variant: "outline",
-		size,
-		onClick: onEyeDropper,
-		disabled: isDisabled,
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsxs)(require_select.Select, {
-		"data-slot": "color-picker-format-select",
-		...selectProps,
-		value: format,
-		onValueChange: onFormatChange,
-		disabled: isDisabled,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectTrigger, {
-			"data-slot": "color-picker-format-select-trigger",
-			size: size ?? "sm",
-			className: require_utils.cn(className),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectValue, {})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectContent, { children: colorFormats.map((format$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.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__ */ (0, react_jsx_runtime.jsx)(HexInput, {
-		color,
-		onColorChange,
-		context,
-		...props
-	});
-	if (format === "rgb") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RgbInput, {
-		color,
-		onColorChange,
-		context,
-		...props
-	});
-	if (format === "hsl") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HslInput, {
-		color,
-		onColorChange,
-		context,
-		...props
-	});
-	if (format === "hsb") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HsbInput, {
-		hsv,
-		onColorChange,
-		context,
-		...props
-	});
-}
-const inputGroupItemVariants = (0, class_variance_authority.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__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
-		"data-slot": "color-picker-input",
-		className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(InputGroupItem, {
-		"aria-label": "Hex color value",
-		position: "isolated",
-		...inputProps,
-		placeholder: "#000000",
-		className: require_utils.cn("font-mono", className),
-		value: hexValue,
-		onChange: onHexChange,
-		disabled: context.disabled
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-slot": "color-picker-input-wrapper",
-		className: require_utils.cn("flex items-center", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-slot": "color-picker-input-wrapper",
-		className: require_utils.cn("flex items-center", className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-slot": "color-picker-input-wrapper",
-		className: require_utils.cn("flex items-center", className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-slot": "color-picker-input-wrapper",
-		className: require_utils.cn("flex items-center", className),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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
-exports.ColorPicker = ColorPicker;
-exports.ColorPickerAlphaSlider = ColorPickerAlphaSlider;
-exports.ColorPickerArea = ColorPickerArea;
-exports.ColorPickerContent = ColorPickerContent;
-exports.ColorPickerEyeDropper = ColorPickerEyeDropper;
-exports.ColorPickerFormatSelect = ColorPickerFormatSelect;
-exports.ColorPickerHueSlider = ColorPickerHueSlider;
-exports.ColorPickerInput = ColorPickerInput;
-exports.ColorPickerSwatch = ColorPickerSwatch;
-exports.ColorPickerTrigger = ColorPickerTrigger;
-exports.colorUtils = colorUtils;
-exports.useStore = useStore;