xiod-ui 1.0.0

package/dist/components/color-picker.js

@@ -0,0 +1,1589 @@
+"use client";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Dropper } from "xiod-icons/icons/Dropper";
+//#region src/components/color-picker.tsx
+const OUTER_COLORS = [
+	{
+		h: 47,
+		s: 97,
+		l: 65
+	},
+	{
+		h: 37,
+		s: 98,
+		l: 65
+	},
+	{
+		h: 27,
+		s: 95,
+		l: 64
+	},
+	{
+		h: 14,
+		s: 90,
+		l: 64
+	},
+	{
+		h: 0,
+		s: 85,
+		l: 64
+	},
+	{
+		h: 327,
+		s: 75,
+		l: 62
+	},
+	{
+		h: 285,
+		s: 51,
+		l: 59
+	},
+	{
+		h: 257,
+		s: 65,
+		l: 64
+	},
+	{
+		h: 225,
+		s: 71,
+		l: 65
+	},
+	{
+		h: 202,
+		s: 68,
+		l: 65
+	},
+	{
+		h: 151,
+		s: 43,
+		l: 63
+	},
+	{
+		h: 96,
+		s: 49,
+		l: 67
+	}
+];
+const INNER_COLORS = [
+	{
+		h: 50,
+		s: 95,
+		l: 85
+	},
+	{
+		h: 26,
+		s: 89,
+		l: 89
+	},
+	{
+		h: 345,
+		s: 77,
+		l: 88
+	},
+	{
+		h: 283,
+		s: 47,
+		l: 84
+	},
+	{
+		h: 209,
+		s: 70,
+		l: 87
+	},
+	{
+		h: 116,
+		s: 42,
+		l: 87
+	}
+];
+const DEFAULT_COLORS = [...INNER_COLORS, ...OUTER_COLORS];
+const BLOOM_EASING_CSS = "linear(0, 0.060 3%, 0.200 7%, 0.420 13%, 0.680 20%, 0.900 28%, 1.020 35%, 1.060 45%, 1.025 53%, 0.997 62%, 1.0 68%)";
+const PETAL_STAGGER = 20;
+const BAR_GAP = 20;
+const BAR_WIDTH = 12;
+const SLIDER_OFFSET = 30;
+const ARC_GRADIENT_STEPS = 11;
+const DEFAULT_VALUE = {
+	hue: 330,
+	saturation: 70,
+	alpha: 50,
+	layer: "outer"
+};
+function lightnessToSliderValue(l) {
+	const minLightness = 20;
+	const maxLightness = 100;
+	return (maxLightness - Math.max(minLightness, Math.min(maxLightness, l))) / 80 * 100;
+}
+function sliderValueToLightness(sliderValue) {
+	return 100 - sliderValue / 100 * 80;
+}
+function hexToHsl(hex) {
+	let cleanHex = hex.replace(/^#/, "");
+	if (cleanHex.length === 3) cleanHex = cleanHex.split("").map((c) => c + c).join("");
+	const r = parseInt(cleanHex.slice(0, 2), 16) / 255;
+	const g = parseInt(cleanHex.slice(2, 4), 16) / 255;
+	const b = parseInt(cleanHex.slice(4, 6), 16) / 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) return {
+		h: 0,
+		s: 0,
+		l: Math.round(l * 100)
+	};
+	const d = max - min;
+	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
+	let h = 0;
+	switch (max) {
+		case r:
+			h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+			break;
+		case g:
+			h = ((b - r) / d + 2) / 6;
+			break;
+		case b: h = ((r - g) / d + 4) / 6;
+	}
+	return {
+		h: Math.round(h * 360),
+		s: Math.round(s * 100),
+		l: Math.round(l * 100)
+	};
+}
+function rgbToHsl(r, g, b) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) return {
+		h: 0,
+		s: 0,
+		l: Math.round(l * 100)
+	};
+	const d = max - min;
+	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
+	let h = 0;
+	switch (max) {
+		case r:
+			h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+			break;
+		case g:
+			h = ((b - r) / d + 2) / 6;
+			break;
+		case b: h = ((r - g) / d + 4) / 6;
+	}
+	return {
+		h: Math.round(h * 360),
+		s: Math.round(s * 100),
+		l: Math.round(l * 100)
+	};
+}
+function parseColor(input) {
+	if (typeof input === "object") return input;
+	const str = input.trim().toLowerCase();
+	if (str.startsWith("#")) return hexToHsl(str);
+	const hslMatch = str.match(/^hsla?\(\s*([\d.]+)[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?/);
+	if (hslMatch) return {
+		h: Math.round(parseFloat(hslMatch[1])),
+		s: Math.round(parseFloat(hslMatch[2])),
+		l: Math.round(parseFloat(hslMatch[3]))
+	};
+	const rgbMatch = str.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/);
+	if (rgbMatch) return rgbToHsl(parseFloat(rgbMatch[1]), parseFloat(rgbMatch[2]), parseFloat(rgbMatch[3]));
+	return {
+		h: 0,
+		s: 0,
+		l: 50
+	};
+}
+function hslToHex(h, s, l) {
+	const sNorm = s / 100;
+	const lNorm = l / 100;
+	const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = lNorm - 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 {
+		r = c;
+		g = 0;
+		b = x;
+	}
+	const toHex = (n) => {
+		const hex = Math.round((n + m) * 255).toString(16);
+		return hex.length === 1 ? `0${hex}` : hex;
+	};
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function getVisualSaturation(sliderValue, baseSaturation) {
+	return sliderValue < 10 ? sliderValue / 10 * baseSaturation : baseSaturation;
+}
+function hslToString(h, s, l) {
+	return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`;
+}
+function hslaToString(h, s, l, a) {
+	return `hsla(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%, ${(a / 100).toFixed(2)})`;
+}
+function hslToRgb(h, s, l) {
+	const sNorm = s / 100;
+	const lNorm = l / 100;
+	const k = (n) => (n + h / 30) % 12;
+	const a = sNorm * Math.min(lNorm, 1 - lNorm);
+	const f = (n) => lNorm - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+	return {
+		r: Math.round(255 * f(0)),
+		g: Math.round(255 * f(8)),
+		b: Math.round(255 * f(4))
+	};
+}
+function rgbaToString(r, g, b, a) {
+	return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${(a / 100).toFixed(2)})`;
+}
+function createColorOutput(hue, sliderValue, visualSaturation, baseSaturation, lightness, alpha, layer) {
+	const { r, g, b } = hslToRgb(hue, visualSaturation, lightness);
+	return {
+		hue,
+		saturation: sliderValue,
+		originalSaturation: baseSaturation,
+		lightness,
+		alpha,
+		layer,
+		r,
+		g,
+		b,
+		hex: hslToHex(hue, visualSaturation, lightness),
+		hsl: hslToString(hue, visualSaturation, lightness),
+		hsla: hslaToString(hue, visualSaturation, lightness, alpha),
+		rgb: `rgb(${r}, ${g}, ${b})`,
+		rgba: rgbaToString(r, g, b, alpha)
+	};
+}
+function organizeColorsIntoLayers(colors) {
+	if (!colors || colors.length === 0) return [];
+	const sortedByLightness = colors.toSorted((a, b) => b.l - a.l);
+	const total = sortedByLightness.length;
+	let layerCounts = [];
+	if (total <= 10) layerCounts = [total];
+	else if (total <= 24) {
+		const inner = Math.max(4, Math.floor(total * .35));
+		layerCounts = [inner, total - inner];
+	} else if (total <= 42) {
+		const inner = Math.max(5, Math.floor(total * .15));
+		const middle = Math.floor(total * .35);
+		layerCounts = [
+			inner,
+			middle,
+			total - inner - middle
+		];
+	} else {
+		const inner = Math.max(6, Math.floor(total * .1));
+		const mid1 = Math.floor(total * .2);
+		const mid2 = Math.floor(total * .3);
+		layerCounts = [
+			inner,
+			mid1,
+			mid2,
+			total - inner - mid1 - mid2
+		];
+	}
+	const layers = [];
+	let currentIndex = 0;
+	for (let i = 0; i < layerCounts.length; i++) {
+		const count = layerCounts[i];
+		const itemsForThisLayer = sortedByLightness.slice(currentIndex, currentIndex + count);
+		itemsForThisLayer.sort((a, b) => a.h - b.h);
+		if (itemsForThisLayer.length > 0) layers.push(itemsForThisLayer);
+		currentIndex += count;
+	}
+	return layers;
+}
+function calculateLayerRadii(layers, coreSize, petalSize) {
+	const radii = [];
+	const W = petalSize;
+	const Rc = coreSize / 2;
+	const Rp = petalSize / 2;
+	for (let i = 0; i < layers.length; i++) {
+		const N = layers[i].length;
+		const overlapFactor = N <= 8 ? .45 : N <= 12 ? .5 : .55;
+		const lateralGaplessR = N * W * overlapFactor / (2 * Math.PI);
+		let r = 0;
+		if (i === 0) {
+			const coreOverlap = N <= 5 ? W * .35 : W * .25;
+			const idealCoreR = Rc + Rp - coreOverlap;
+			r = Math.max(idealCoreR, lateralGaplessR);
+		} else {
+			const prevR = radii[i - 1];
+			const prevN = layers[i - 1].length;
+			const circumference = 2 * Math.PI * prevR;
+			const sparsity = prevN * W / circumference;
+			let adaptiveStep = W * .35;
+			if (sparsity < .85) adaptiveStep = W * .15;
+			else if (sparsity > 1.1) adaptiveStep = W * .45;
+			const idealNestleR = prevR + adaptiveStep;
+			r = Math.max(idealNestleR, lateralGaplessR);
+			r = Math.max(r, prevR + W * .1);
+		}
+		radii.push(r);
+	}
+	return radii;
+}
+function calculateLayerRotations(layers) {
+	const rotations = [0];
+	for (let i = 1; i < layers.length; i++) {
+		const offset = 360 / layers[i - 1].length / 2;
+		rotations.push(offset);
+	}
+	return rotations;
+}
+function calculateBarRadius(layerRadii, petalSize, coreSize, barGap) {
+	return layerRadii.length > 0 ? layerRadii[layerRadii.length - 1] + petalSize / 2 + barGap : coreSize / 2 + barGap;
+}
+function calculateContainerSize(barRadius, circularBarWidth, showAlphaSlider, showOpacitySlider, sliderOffset, sliderWidth) {
+	const barExtent = barRadius + circularBarWidth / 2;
+	const sliderExtent = showAlphaSlider || showOpacitySlider ? barRadius + sliderOffset + sliderWidth / 2 : 0;
+	return Math.max(barExtent, sliderExtent) * 2 + 4;
+}
+function getPetalZIndex(index, bottomIndex, totalPetals, layerIdx, totalLayers, isBottomLeft = false, isBottomRight = false) {
+	const baseZ = (totalLayers - layerIdx) * 100;
+	const maxLocalZ = totalPetals + 10;
+	if (index === bottomIndex) {
+		if (isBottomRight) return baseZ + maxLocalZ;
+		if (isBottomLeft) return baseZ;
+		return baseZ;
+	}
+	return baseZ + (index - bottomIndex + totalPetals) % totalPetals;
+}
+function polarToCartesian(cx, cy, r, angleInDegrees) {
+	const angleInRadians = angleInDegrees * Math.PI / 180;
+	return {
+		x: cx + r * Math.cos(angleInRadians),
+		y: cy + r * Math.sin(angleInRadians)
+	};
+}
+function describeArc(cx, cy, r, startAng, endAng) {
+	const start = polarToCartesian(cx, cy, r, startAng);
+	const end = polarToCartesian(cx, cy, r, endAng);
+	const largeArcFlag = Math.abs(endAng - startAng) > 180 ? "1" : "0";
+	return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
+}
+function getCenterAngle(position) {
+	switch (position) {
+		case "top": return -90;
+		case "bottom": return 90;
+		case "left": return 180;
+		default: return 0;
+	}
+}
+function getOppositePosition(position) {
+	switch (position) {
+		case "left": return "right";
+		case "right": return "left";
+		case "top": return "bottom";
+		default: return "top";
+	}
+}
+function calculateSliderValueFromPoint(dx, dy, centerAngle, halfSweep, position) {
+	let normalizedAngle = Math.atan2(dy, dx) * (180 / Math.PI) - centerAngle;
+	while (normalizedAngle > 180) normalizedAngle -= 360;
+	while (normalizedAngle < -180) normalizedAngle += 360;
+	normalizedAngle = Math.max(-halfSweep, Math.min(halfSweep, normalizedAngle));
+	let newValue;
+	if (position === "left") newValue = (halfSweep - normalizedAngle) / (2 * halfSweep) * 100;
+	else newValue = (normalizedAngle + halfSweep) / (2 * halfSweep) * 100;
+	return Math.round(Math.max(0, Math.min(100, newValue)));
+}
+function calculateArcGradientColors(hue, baseSaturation, steps) {
+	return Array.from({ length: steps }, (_, i) => {
+		const t = i / (steps - 1);
+		return hslToString(hue, getVisualSaturation(t * 100, baseSaturation), 100 - t * 80);
+	});
+}
+function computeAdaptivePosition({ elementRect, containerSize, currentShiftOffset, windowWidth, windowHeight, sliderPosition, adaptivePositioning, circularBarWidth, sliderOffset }) {
+	const halfSize = containerSize / 2;
+	const centerX = elementRect.left + elementRect.width / 2 - currentShiftOffset.x;
+	const centerY = elementRect.top + elementRect.height / 2 - currentShiftOffset.y;
+	let newShiftX = 0;
+	let newShiftY = 0;
+	if (adaptivePositioning) {
+		const padding = 10;
+		if (centerX + halfSize > windowWidth - padding) newShiftX = windowWidth - padding - (centerX + halfSize);
+		else if (centerX - halfSize < padding) newShiftX = padding - (centerX - halfSize);
+		if (centerY + halfSize > windowHeight - padding) newShiftY = windowHeight - padding - (centerY + halfSize);
+		else if (centerY - halfSize < padding) newShiftY = padding - (centerY - halfSize);
+	}
+	let effectivePosition = sliderPosition || "right";
+	if (!sliderPosition) {
+		const spaceRight = windowWidth - (centerX + newShiftX + halfSize);
+		const spaceLeft = centerX + newShiftX - halfSize;
+		const spaceTop = centerY + newShiftY - halfSize;
+		const spaceBottom = windowHeight - (centerY + newShiftY + halfSize);
+		const threshold = sliderOffset + circularBarWidth + 20;
+		if (spaceRight < threshold && spaceLeft > spaceRight) effectivePosition = "left";
+		else if (spaceLeft < threshold && spaceRight > spaceLeft) effectivePosition = "right";
+		else if (spaceBottom < threshold && spaceTop > spaceBottom) effectivePosition = "top";
+		else if (spaceTop < threshold && spaceBottom > spaceTop) effectivePosition = "bottom";
+		else effectivePosition = "right";
+	}
+	return {
+		effectivePosition,
+		shiftOffset: {
+			x: newShiftX,
+			y: newShiftY
+		}
+	};
+}
+function BlossomColorPicker({ value, defaultValue, colors, onChange, onCollapse, disabled = false, openOnHover = false, initialExpanded = false, animationDuration = 300, showAlphaSlider = true, showOpacitySlider = true, coreSize = 32, petalSize = 32, showCoreColor = true, sliderPosition, adaptivePositioning = true, circularBarWidth = BAR_WIDTH, sliderWidth = BAR_WIDTH, sliderOffset = SLIDER_OFFSET, collapsible = true, className, ref, ...props }) {
+	const rootRef = React$1.useRef(null);
+	const svgRef = React$1.useRef(null);
+	const alphaSvgRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => rootRef.current);
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? DEFAULT_VALUE);
+	const [isExpanded, setIsExpanded] = React$1.useState(!collapsible || initialExpanded);
+	const [mousePos, setMousePos] = React$1.useState(null);
+	const [isHoveringCore, setIsHoveringCore] = React$1.useState(false);
+	const [hoveredPetal, setHoveredPetal] = React$1.useState(null);
+	const [shiftOffset, setShiftOffset] = React$1.useState({
+		x: 0,
+		y: 0
+	});
+	const [effectivePosition, setEffectivePosition] = React$1.useState(sliderPosition || "right");
+	const [isDraggingSlider, setIsDraggingSlider] = React$1.useState(false);
+	const [isDraggingAlpha, setIsDraggingAlpha] = React$1.useState(false);
+	const prevExpandedRef = React$1.useRef(isExpanded);
+	const [hasEyeDropper, setHasEyeDropper] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
+	}, []);
+	const [mounted, setMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const currentValue = value ?? internalValue;
+	const normalizedColors = React$1.useMemo(() => {
+		return colors && colors.length > 0 ? colors.map(parseColor) : DEFAULT_COLORS;
+	}, [colors]);
+	const { layers, allColors, layerPrefixCounts, layerRadii, layerRotations, barRadius, containerSize } = React$1.useMemo(() => {
+		const lay = organizeColorsIntoLayers(normalizedColors);
+		const allCol = lay.flat();
+		const lpc = [0];
+		for (let i = 1; i < lay.length; i++) lpc.push(lpc[i - 1] + lay[i - 1].length);
+		const radii = calculateLayerRadii(lay, coreSize, petalSize);
+		const rots = calculateLayerRotations(lay);
+		const bRad = calculateBarRadius(radii, petalSize, coreSize, BAR_GAP);
+		return {
+			layers: lay,
+			allColors: allCol,
+			layerPrefixCounts: lpc,
+			layerRadii: radii,
+			layerRotations: rots,
+			barRadius: bRad,
+			containerSize: calculateContainerSize(bRad, circularBarWidth, showAlphaSlider, showOpacitySlider, sliderOffset, sliderWidth)
+		};
+	}, [
+		normalizedColors,
+		coreSize,
+		petalSize,
+		circularBarWidth,
+		showAlphaSlider,
+		showOpacitySlider,
+		sliderOffset,
+		sliderWidth
+	]);
+	const baseSaturation = React$1.useMemo(() => {
+		if (currentValue.originalSaturation !== void 0) return currentValue.originalSaturation;
+		return allColors.find((c) => c.h === currentValue.hue)?.s ?? 70;
+	}, [
+		allColors,
+		currentValue.hue,
+		currentValue.originalSaturation
+	]);
+	const currentLightness = React$1.useMemo(() => {
+		return currentValue.lightness ?? sliderValueToLightness(currentValue.saturation);
+	}, [currentValue.lightness, currentValue.saturation]);
+	const visualSaturation = React$1.useMemo(() => {
+		return getVisualSaturation(currentValue.saturation, baseSaturation);
+	}, [currentValue.saturation, baseSaturation]);
+	const coreColorString = React$1.useMemo(() => {
+		if (isExpanded && !showCoreColor) return "#FFFFFF";
+		return hslaToString(currentValue.hue, baseSaturation, currentLightness, currentValue.alpha);
+	}, [
+		isExpanded,
+		showCoreColor,
+		currentValue.hue,
+		baseSaturation,
+		currentLightness,
+		currentValue.alpha
+	]);
+	const outputColor = React$1.useMemo(() => {
+		return createColorOutput(currentValue.hue, currentValue.saturation, visualSaturation, baseSaturation, currentLightness, currentValue.alpha, currentValue.layer);
+	}, [
+		currentValue,
+		visualSaturation,
+		baseSaturation,
+		currentLightness
+	]);
+	React$1.useEffect(() => {
+		if (isExpanded && rootRef.current) {
+			const result = computeAdaptivePosition({
+				elementRect: rootRef.current.getBoundingClientRect(),
+				containerSize,
+				currentShiftOffset: {
+					x: 0,
+					y: 0
+				},
+				windowWidth: typeof window !== "undefined" ? window.innerWidth : 1e3,
+				windowHeight: typeof window !== "undefined" ? window.innerHeight : 800,
+				sliderPosition,
+				adaptivePositioning,
+				circularBarWidth,
+				sliderOffset
+			});
+			setShiftOffset(result.shiftOffset);
+			setEffectivePosition(result.effectivePosition);
+		} else if (!isExpanded) {
+			setShiftOffset({
+				x: 0,
+				y: 0
+			});
+			setEffectivePosition(sliderPosition || "right");
+		}
+		prevExpandedRef.current = isExpanded;
+	}, [
+		isExpanded,
+		containerSize,
+		sliderPosition,
+		adaptivePositioning,
+		circularBarWidth,
+		sliderOffset
+	]);
+	React$1.useEffect(() => {
+		if (!collapsible || !isExpanded) return;
+		const handleClick = (e) => {
+			if (!rootRef.current) return;
+			const rect = rootRef.current.getBoundingClientRect();
+			const centerX = rect.left + rect.width / 2;
+			const centerY = rect.top + rect.height / 2;
+			const dx = e.clientX - centerX;
+			const dy = e.clientY - centerY;
+			if (Math.sqrt(dx * dx + dy * dy) > Math.max(barRadius + circularBarWidth / 2, showAlphaSlider || showOpacitySlider ? barRadius + sliderOffset + sliderWidth / 2 : 0) + 4 || !rootRef.current.contains(e.target)) {
+				setIsExpanded(false);
+				if (onCollapse) onCollapse(outputColor);
+			}
+		};
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [
+		collapsible,
+		isExpanded,
+		onCollapse,
+		outputColor,
+		barRadius,
+		circularBarWidth,
+		showAlphaSlider,
+		showOpacitySlider,
+		sliderOffset,
+		sliderWidth
+	]);
+	const updateValue = (nextVal) => {
+		if (!value) setInternalValue(nextVal);
+		if (onChange) {
+			const newBaseSaturation = nextVal.originalSaturation ?? allColors.find((c) => c.h === nextVal.hue)?.s ?? 70;
+			const nextLightness = nextVal.lightness ?? sliderValueToLightness(nextVal.saturation);
+			const nextVisualSat = getVisualSaturation(nextVal.saturation, newBaseSaturation);
+			const { r, g, b } = hslToRgb(nextVal.hue, nextVisualSat, nextLightness);
+			onChange({
+				...nextVal,
+				originalSaturation: newBaseSaturation,
+				lightness: nextLightness,
+				hex: hslToHex(nextVal.hue, nextVisualSat, nextLightness),
+				hsl: hslToString(nextVal.hue, nextVisualSat, nextLightness),
+				hsla: hslaToString(nextVal.hue, nextVisualSat, nextLightness, nextVal.alpha),
+				rgb: `rgb(${r}, ${g}, ${b})`,
+				rgba: rgbaToString(r, g, b, nextVal.alpha),
+				r,
+				g,
+				b
+			});
+		}
+	};
+	const handleCoreClick = async () => {
+		if (disabled) return;
+		if (isExpanded && hasEyeDropper) {
+			try {
+				const EyeDropperClass = window.EyeDropper;
+				const result = await new EyeDropperClass().open();
+				if (result?.sRGBHex) {
+					const hex = result.sRGBHex;
+					const hsl = hexToHsl(hex);
+					updateValue({
+						hue: hsl.h,
+						saturation: lightnessToSliderValue(hsl.l),
+						lightness: hsl.l,
+						originalSaturation: hsl.s,
+						alpha: currentValue.alpha,
+						layer: "outer"
+					});
+				}
+			} catch (err) {
+				console.warn("EyeDropper failed or was cancelled:", err);
+			}
+			return;
+		}
+		if (collapsible) {
+			const next = !isExpanded;
+			setIsExpanded(next);
+			if (!next && onCollapse) onCollapse(outputColor);
+		}
+	};
+	const handlePetalClick = (color, layerIdx) => {
+		updateValue({
+			hue: color.h,
+			saturation: lightnessToSliderValue(color.l),
+			lightness: color.l,
+			originalSaturation: color.s,
+			alpha: currentValue.alpha,
+			layer: layerIdx === 0 ? "inner" : "outer"
+		});
+	};
+	const handleSliderChange = (val) => {
+		const lightness = sliderValueToLightness(val);
+		updateValue({
+			...currentValue,
+			saturation: val,
+			lightness,
+			originalSaturation: currentValue.originalSaturation ?? baseSaturation
+		});
+	};
+	const handleMouseEnter = () => {
+		if (disabled) return;
+		if (openOnHover && collapsible) setIsExpanded(true);
+	};
+	const handleMouseMove = (e) => {
+		if (!isExpanded) return;
+		const rect = e.currentTarget.getBoundingClientRect();
+		const x = e.clientX - (rect.left + rect.width / 2);
+		const y = e.clientY - (rect.top + rect.height / 2);
+		setMousePos({
+			x,
+			y
+		});
+	};
+	const handleMouseLeave = () => {
+		setMousePos(null);
+	};
+	const handleSliderPointerDown = (e) => {
+		e.preventDefault();
+		setIsDraggingSlider(true);
+		updateSliderFromPointer(e.clientX, e.clientY);
+	};
+	const updateSliderFromPointer = (clientX, clientY) => {
+		if (!svgRef.current) return;
+		const rect = svgRef.current.getBoundingClientRect();
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + rect.height / 2;
+		const val = calculateSliderValueFromPoint(clientX - centerX, clientY - centerY, getCenterAngle(effectivePosition), 30, effectivePosition);
+		handleSliderChange(val);
+	};
+	const updateSliderFromPointerRef = React$1.useRef(updateSliderFromPointer);
+	React$1.useEffect(() => {
+		updateSliderFromPointerRef.current = updateSliderFromPointer;
+	});
+	React$1.useEffect(() => {
+		if (!isDraggingSlider) return;
+		const handlePointerMove = (e) => {
+			updateSliderFromPointerRef.current(e.clientX, e.clientY);
+		};
+		const handlePointerUp = () => {
+			setIsDraggingSlider(false);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [isDraggingSlider]);
+	const handleAlphaPointerDown = (e) => {
+		e.preventDefault();
+		setIsDraggingAlpha(true);
+		updateAlphaFromPointer(e.clientX, e.clientY);
+	};
+	const updateAlphaFromPointer = (clientX, clientY) => {
+		if (!alphaSvgRef.current) return;
+		const rect = alphaSvgRef.current.getBoundingClientRect();
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + rect.height / 2;
+		const dx = clientX - centerX;
+		const dy = clientY - centerY;
+		const alphaPosition = getOppositePosition(effectivePosition);
+		const val = calculateSliderValueFromPoint(dx, dy, getCenterAngle(alphaPosition), 30, alphaPosition === "bottom" ? "left" : "right");
+		updateValue({
+			...currentValue,
+			alpha: val
+		});
+	};
+	const updateAlphaFromPointerRef = React$1.useRef(updateAlphaFromPointer);
+	React$1.useEffect(() => {
+		updateAlphaFromPointerRef.current = updateAlphaFromPointer;
+	});
+	React$1.useEffect(() => {
+		if (!isDraggingAlpha) return;
+		const handlePointerMove = (e) => {
+			updateAlphaFromPointerRef.current(e.clientX, e.clientY);
+		};
+		const handlePointerUp = () => {
+			setIsDraggingAlpha(false);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [isDraggingAlpha]);
+	const renderPetals = () => {
+		const totalLayers = layers.length;
+		const items = [];
+		for (let layerIdx = 0; layerIdx < totalLayers; layerIdx++) {
+			const layerColors = layers[layerIdx];
+			const radius = layerRadii[layerIdx];
+			const rotation = layerRotations[layerIdx];
+			const previousItemsCount = layerPrefixCounts[layerIdx];
+			const totalPetals = layerColors.length;
+			const baseZ = (totalLayers - layerIdx) * 100;
+			let bottomIndex = 0;
+			let minDiff = Infinity;
+			for (let i = 0; i < totalPetals; i++) {
+				const normalizedAngle = ((i / totalPetals * 360 - 90 + rotation) % 360 + 360) % 360;
+				const diff = Math.min(Math.abs(normalizedAngle - 90), 360 - Math.abs(normalizedAngle - 90));
+				if (diff < minDiff) {
+					minDiff = diff;
+					bottomIndex = i;
+				}
+			}
+			for (let index = 0; index < totalPetals; index++) {
+				const color = layerColors[index];
+				const staggerDelay = previousItemsCount * PETAL_STAGGER + index * PETAL_STAGGER;
+				const isSelected = currentValue.hue === color.h;
+				const createPetalStyle = (clip, zIndexOverride, isInteraction = false) => {
+					const radian = (index / totalPetals * 360 - 90 + rotation) * Math.PI / 180;
+					let px = Math.cos(radian) * radius;
+					let py = Math.sin(radian) * radius;
+					const isHovered = hoveredPetal?.layer === layerIdx && hoveredPetal?.index === index;
+					if (isExpanded && mousePos && !isHovered && !isInteraction) {
+						const dx = px - mousePos.x;
+						const dy = py - mousePos.y;
+						const dist = Math.sqrt(dx * dx + dy * dy);
+						const minDistance = 60;
+						if (dist < minDistance) {
+							const pushStrength = (1 - dist / minDistance) * 6;
+							const pushAngle = Math.atan2(dy, dx);
+							px += Math.cos(pushAngle) * pushStrength;
+							py += Math.sin(pushAngle) * pushStrength;
+						}
+					}
+					const scale = isHovered && !isInteraction ? 1.1 : 1;
+					return {
+						backgroundColor: hslaToString(color.h, color.s, color.l, isInteraction ? 0 : 100),
+						transform: isExpanded ? `translate(${px}px, ${py}px) scale(${scale})` : "translate(0px, 0px) scale(0)",
+						opacity: isExpanded ? 1 : 0,
+						filter: isHovered && !isInteraction ? "brightness(1.1)" : "brightness(1)",
+						boxShadow: isExpanded && !isInteraction ? isHovered ? "0 4px 12px rgba(0,0,0,0.25)" : "0 2px 6px rgba(0,0,0,0.15)" : "none",
+						zIndex: zIndexOverride ?? baseZ + index,
+						pointerEvents: isExpanded ? index === bottomIndex ? isInteraction ? "auto" : "none" : "auto" : "none",
+						clipPath: clip === "left" ? "polygon(0% -50%, 50% -50%, 50% 150%, 0% 150%)" : clip === "right" ? "polygon(50% -50%, 100% -50%, 100% 150%, 50% 150%)" : void 0,
+						transition: `
+              transform ${isExpanded && mousePos && !isHovered ? "150ms ease-out" : `${animationDuration}ms ${BLOOM_EASING_CSS} ${isExpanded && !isHovered ? staggerDelay : 0}ms`},
+              opacity ${animationDuration}ms ${BLOOM_EASING_CSS} ${isExpanded && !isHovered ? staggerDelay : 0}ms,
+              background-color 200ms ease,
+              box-shadow 200ms ease,
+              filter 200ms ease
+            `
+					};
+				};
+				if (index === bottomIndex) {
+					const uZ = baseZ - 1;
+					const lZ = getPetalZIndex(index, bottomIndex, totalPetals, layerIdx, totalLayers, true, false);
+					const rZ = getPetalZIndex(index, bottomIndex, totalPetals, layerIdx, totalLayers, false, true);
+					const iZ = baseZ + totalPetals + 20;
+					items.push(/* @__PURE__ */ jsx("div", {
+						className: "absolute rounded-full pointer-events-none",
+						style: {
+							width: `${petalSize}px`,
+							height: `${petalSize}px`,
+							marginLeft: `${-petalSize / 2}px`,
+							marginTop: `${-petalSize / 2}px`,
+							left: "50%",
+							top: "50%",
+							...createPetalStyle(void 0, uZ)
+						}
+					}, `${layerIdx}-${index}-underlay`), /* @__PURE__ */ jsx("div", {
+						className: cn("absolute rounded-full pointer-events-none", isSelected && isExpanded && "ring-2 ring-white ring-offset-2 ring-offset-background"),
+						style: {
+							width: `${petalSize}px`,
+							height: `${petalSize}px`,
+							marginLeft: `${-petalSize / 2}px`,
+							marginTop: `${-petalSize / 2}px`,
+							left: "50%",
+							top: "50%",
+							...createPetalStyle("left", lZ)
+						}
+					}, `${layerIdx}-${index}-left`), /* @__PURE__ */ jsx("div", {
+						className: cn("absolute rounded-full pointer-events-none", isSelected && isExpanded && "ring-2 ring-white ring-offset-2 ring-offset-background"),
+						style: {
+							width: `${petalSize}px`,
+							height: `${petalSize}px`,
+							marginLeft: `${-petalSize / 2}px`,
+							marginTop: `${-petalSize / 2}px`,
+							left: "50%",
+							top: "50%",
+							...createPetalStyle("right", rZ)
+						}
+					}, `${layerIdx}-${index}-right`), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						tabIndex: isExpanded ? 0 : -1,
+						onClick: () => handlePetalClick(color, layerIdx),
+						onMouseEnter: () => setHoveredPetal({
+							layer: layerIdx,
+							index
+						}),
+						onMouseLeave: () => setHoveredPetal(null),
+						"aria-label": `Select color hue ${color.h}`,
+						className: "absolute rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white",
+						style: {
+							width: `${petalSize}px`,
+							height: `${petalSize}px`,
+							marginLeft: `${-petalSize / 2}px`,
+							marginTop: `${-petalSize / 2}px`,
+							left: "50%",
+							top: "50%",
+							...createPetalStyle(void 0, iZ, true)
+						}
+					}, `${layerIdx}-${index}-interaction`));
+				} else items.push(/* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: isExpanded ? 0 : -1,
+					onClick: () => handlePetalClick(color, layerIdx),
+					onMouseEnter: () => setHoveredPetal({
+						layer: layerIdx,
+						index
+					}),
+					onMouseLeave: () => setHoveredPetal(null),
+					"aria-label": `Select color hue ${color.h}`,
+					className: cn("absolute rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white", isSelected && isExpanded && "ring-2 ring-white ring-offset-2 ring-offset-background"),
+					style: {
+						width: `${petalSize}px`,
+						height: `${petalSize}px`,
+						marginLeft: `${-petalSize / 2}px`,
+						marginTop: `${-petalSize / 2}px`,
+						left: "50%",
+						top: "50%",
+						...createPetalStyle(void 0, getPetalZIndex(index, bottomIndex, totalPetals, layerIdx, totalLayers))
+					}
+				}, `${layerIdx}-${index}`));
+			}
+		}
+		return items;
+	};
+	const renderArcSlider = () => {
+		if (!showAlphaSlider) return null;
+		const centerAngle = getCenterAngle(effectivePosition);
+		const drawStartAngle = centerAngle - 30;
+		const drawEndAngle = centerAngle + 30;
+		const size = (barRadius + sliderOffset + sliderWidth / 2 + circularBarWidth) * 2 + 20;
+		const center = size / 2;
+		const arcD = describeArc(center, center, barRadius + sliderOffset, drawStartAngle, drawEndAngle);
+		const valStartAngle = effectivePosition === "left" ? drawEndAngle : drawStartAngle;
+		const valEndAngle = effectivePosition === "left" ? drawStartAngle : drawEndAngle;
+		const gradStart = polarToCartesian(center, center, barRadius + sliderOffset, valStartAngle);
+		const gradEnd = polarToCartesian(center, center, barRadius + sliderOffset, valEndAngle);
+		const handleAngle = valStartAngle + currentValue.saturation / 100 * (valEndAngle - valStartAngle);
+		const handlePos = polarToCartesian(center, center, barRadius + sliderOffset, handleAngle);
+		const handleLightness = sliderValueToLightness(currentValue.saturation);
+		const handleSaturation = getVisualSaturation(currentValue.saturation, baseSaturation);
+		const handleColor = hslToString(currentValue.hue, handleSaturation, handleLightness);
+		const gradientColors = calculateArcGradientColors(currentValue.hue, baseSaturation, ARC_GRADIENT_STEPS);
+		return /* @__PURE__ */ jsxs("svg", {
+			ref: svgRef,
+			width: size,
+			height: size,
+			onPointerDown: handleSliderPointerDown,
+			className: "absolute pointer-events-none select-none",
+			style: {
+				left: "50%",
+				top: "50%",
+				marginLeft: `${-size / 2}px`,
+				marginTop: `${-size / 2}px`,
+				zIndex: 50,
+				opacity: isExpanded ? 1 : 0,
+				transform: isExpanded ? "scale(1)" : "scale(0.8)",
+				transition: `opacity ${animationDuration}ms ${BLOOM_EASING_CSS} ${animationDuration / 2}ms, transform ${animationDuration}ms ${BLOOM_EASING_CSS} ${animationDuration / 2}ms`
+			},
+			children: [
+				/* @__PURE__ */ jsx("title", { children: "Saturation & Lightness Arc Slider" }),
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("linearGradient", {
+					id: `bcp-arc-grad-${currentValue.hue}`,
+					gradientUnits: "userSpaceOnUse",
+					x1: gradStart.x,
+					y1: gradStart.y,
+					x2: gradEnd.x,
+					y2: gradEnd.y,
+					children: gradientColors.map((col, i) => /* @__PURE__ */ jsx("stop", {
+						offset: `${i / 10 * 100}%`,
+						stopColor: col
+					}, `${col}-${i}`))
+				}) }),
+				/* @__PURE__ */ jsx("path", {
+					d: arcD,
+					fill: "none",
+					stroke: "rgba(0,0,0,0.06)",
+					strokeWidth: sliderWidth,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: arcD,
+					fill: "none",
+					stroke: `url(#bcp-arc-grad-${currentValue.hue})`,
+					strokeWidth: sliderWidth,
+					strokeLinecap: "round",
+					className: cn("touch-none", isExpanded ? "pointer-events-auto cursor-pointer" : "pointer-events-none")
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: handlePos.x,
+					cy: handlePos.y,
+					r: sliderWidth / 2,
+					fill: handleColor,
+					stroke: "white",
+					strokeWidth: "2",
+					className: cn("touch-none active:cursor-grabbing shadow-[0_1px_4px_rgba(0,0,0,0.3)]", isExpanded ? "pointer-events-auto cursor-grab" : "pointer-events-none"),
+					style: { transition: isDraggingSlider ? "none" : `cx ${animationDuration / 3}ms ease, cy ${animationDuration / 3}ms ease` }
+				})
+			]
+		});
+	};
+	const renderAlphaSlider = () => {
+		if (!showOpacitySlider) return null;
+		const alphaPosition = getOppositePosition(effectivePosition);
+		const centerAngle = getCenterAngle(alphaPosition);
+		const drawStartAngle = centerAngle - 30;
+		const drawEndAngle = centerAngle + 30;
+		const size = (barRadius + sliderOffset + sliderWidth / 2 + circularBarWidth) * 2 + 20;
+		const center = size / 2;
+		const arcD = describeArc(center, center, barRadius + sliderOffset, drawStartAngle, drawEndAngle);
+		const valStartAngle = alphaPosition === "bottom" ? drawEndAngle : drawStartAngle;
+		const valEndAngle = alphaPosition === "bottom" ? drawStartAngle : drawEndAngle;
+		const gradStart = polarToCartesian(center, center, barRadius + sliderOffset, valStartAngle);
+		const gradEnd = polarToCartesian(center, center, barRadius + sliderOffset, valEndAngle);
+		const handleAngle = valStartAngle + currentValue.alpha / 100 * (valEndAngle - valStartAngle);
+		const handlePos = polarToCartesian(center, center, barRadius + sliderOffset, handleAngle);
+		const colorStart = hslaToString(currentValue.hue, visualSaturation, currentLightness, 0);
+		const colorEnd = hslaToString(currentValue.hue, visualSaturation, currentLightness, 100);
+		return /* @__PURE__ */ jsxs("svg", {
+			ref: alphaSvgRef,
+			width: size,
+			height: size,
+			onPointerDown: handleAlphaPointerDown,
+			className: "absolute pointer-events-none select-none",
+			style: {
+				left: "50%",
+				top: "50%",
+				marginLeft: `${-size / 2}px`,
+				marginTop: `${-size / 2}px`,
+				zIndex: 51,
+				opacity: isExpanded ? 1 : 0,
+				transform: isExpanded ? "scale(1)" : "scale(0.8)",
+				transition: `opacity ${animationDuration}ms ${BLOOM_EASING_CSS} ${animationDuration / 2}ms, transform ${animationDuration}ms ${BLOOM_EASING_CSS} ${animationDuration / 2}ms`
+			},
+			children: [
+				/* @__PURE__ */ jsx("title", { children: "Alpha Opacity Arc Slider" }),
+				/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("pattern", {
+					id: "bcp-checkerboard",
+					width: "8",
+					height: "8",
+					patternUnits: "userSpaceOnUse",
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							width: "8",
+							height: "8",
+							fill: "white"
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							width: "4",
+							height: "4",
+							fill: "#e2e8f0"
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: "4",
+							y: "4",
+							width: "4",
+							height: "4",
+							fill: "#e2e8f0"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("linearGradient", {
+					id: `bcp-alpha-grad-${currentValue.hue}`,
+					gradientUnits: "userSpaceOnUse",
+					x1: gradStart.x,
+					y1: gradStart.y,
+					x2: gradEnd.x,
+					y2: gradEnd.y,
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: colorStart
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: colorEnd
+					})]
+				})] }),
+				/* @__PURE__ */ jsx("path", {
+					d: arcD,
+					fill: "none",
+					stroke: "url(#bcp-checkerboard)",
+					strokeWidth: sliderWidth,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: arcD,
+					fill: "none",
+					stroke: `url(#bcp-alpha-grad-${currentValue.hue})`,
+					strokeWidth: sliderWidth,
+					strokeLinecap: "round",
+					className: cn("touch-none", isExpanded ? "pointer-events-auto cursor-pointer" : "pointer-events-none")
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: handlePos.x,
+					cy: handlePos.y,
+					r: sliderWidth / 2,
+					fill: colorEnd,
+					stroke: "white",
+					strokeWidth: "2",
+					className: cn("touch-none active:cursor-grabbing shadow-[0_1px_4px_rgba(0,0,0,0.3)]", isExpanded ? "pointer-events-auto cursor-grab" : "pointer-events-none"),
+					style: { transition: isDraggingAlpha ? "none" : `cx ${animationDuration / 3}ms ease, cy ${animationDuration / 3}ms ease` }
+				})
+			]
+		});
+	};
+	const renderColorBar = () => {
+		const size = (barRadius + circularBarWidth / 2) * 2 + 4;
+		const strokeColor = hslaToString(currentValue.hue, visualSaturation, currentLightness, currentValue.alpha);
+		return /* @__PURE__ */ jsxs("svg", {
+			width: size,
+			height: size,
+			className: "absolute pointer-events-none",
+			style: {
+				left: "50%",
+				top: "50%",
+				marginLeft: `${-size / 2}px`,
+				marginTop: `${-size / 2}px`,
+				zIndex: 5,
+				opacity: isExpanded ? 1 : 0,
+				transform: isExpanded ? "scale(1)" : "scale(0.8)",
+				transition: `opacity ${animationDuration}ms ${BLOOM_EASING_CSS}, transform ${animationDuration}ms ${BLOOM_EASING_CSS}`
+			},
+			children: [
+				/* @__PURE__ */ jsx("title", { children: "Current Color Ring" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: barRadius,
+					fill: "none",
+					stroke: "rgba(0,0,0,0.06)",
+					strokeWidth: circularBarWidth
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: barRadius,
+					fill: "none",
+					stroke: strokeColor,
+					strokeWidth: circularBarWidth
+				})
+			]
+		});
+	};
+	if (!mounted) {
+		const size = collapsible && !initialExpanded ? coreSize : containerSize;
+		const initialH = defaultValue?.hue ?? DEFAULT_VALUE.hue;
+		const initialS = defaultValue?.saturation ?? DEFAULT_VALUE.saturation;
+		const initialBgColor = `hsla(${initialH}, ${initialS}%, ${defaultValue?.lightness ?? sliderValueToLightness(initialS)}%, ${(defaultValue?.alpha ?? DEFAULT_VALUE.alpha) / 100})`;
+		return /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			role: "group",
+			"aria-label": "Color picker",
+			className: cn("relative inline-flex items-center justify-center select-none", className),
+			style: {
+				width: `${size}px`,
+				height: `${size}px`
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				className: "relative rounded-full border border-black/5 dark:border-white/10",
+				style: {
+					width: `${coreSize}px`,
+					height: `${coreSize}px`,
+					backgroundColor: initialBgColor
+				}
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		role: "group",
+		"aria-label": "Color picker",
+		...props,
+		onMouseEnter: handleMouseEnter,
+		onMouseMove: handleMouseMove,
+		onMouseLeave: handleMouseLeave,
+		className: cn("relative inline-flex items-center justify-center select-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		style: {
+			width: isExpanded ? `${containerSize}px` : `${coreSize}px`,
+			height: isExpanded ? `${containerSize}px` : `${coreSize}px`,
+			transition: `width ${animationDuration}ms ${BLOOM_EASING_CSS}, height ${animationDuration}ms ${BLOOM_EASING_CSS}`
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "absolute flex items-center justify-center",
+			style: {
+				width: isExpanded ? `${containerSize}px` : `${coreSize}px`,
+				height: isExpanded ? `${containerSize}px` : `${coreSize}px`,
+				transform: `translate(calc(-50% + ${shiftOffset.x}px), calc(-50% + ${shiftOffset.y}px))`,
+				transition: `width ${animationDuration}ms ${BLOOM_EASING_CSS}, height ${animationDuration}ms ${BLOOM_EASING_CSS}, transform ${animationDuration}ms ${BLOOM_EASING_CSS}`,
+				left: "50%",
+				top: "50%",
+				zIndex: isExpanded ? 50 : 0
+			},
+			children: [
+				renderColorBar(),
+				renderPetals(),
+				renderArcSlider(),
+				renderAlphaSlider(),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					onClick: handleCoreClick,
+					onMouseEnter: () => setIsHoveringCore(true),
+					onMouseLeave: () => setIsHoveringCore(false),
+					"aria-label": isExpanded && hasEyeDropper ? "Pick color from screen" : `Color picker${isExpanded ? ", expanded" : ""}`,
+					"aria-expanded": isExpanded,
+					className: cn("relative rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-64 disabled:cursor-not-allowed border border-black/5 dark:border-white/10 flex items-center justify-center text-white"),
+					style: {
+						width: `${coreSize}px`,
+						height: `${coreSize}px`,
+						backgroundColor: coreColorString,
+						transform: isExpanded ? "scale(1)" : isHoveringCore ? "scale(1.08)" : "scale(1)",
+						boxShadow: isExpanded ? "0 0 0 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15)" : "0 2px 8px rgba(0,0,0,0.15)",
+						transition: `transform ${animationDuration}ms ${BLOOM_EASING_CSS}, box-shadow ${animationDuration}ms ${BLOOM_EASING_CSS}, background-color 200ms ease`,
+						zIndex: 1e3
+					},
+					children: isExpanded && hasEyeDropper && /* @__PURE__ */ jsx(Dropper, {
+						className: "size-4 shrink-0 transition-opacity duration-200",
+						style: { color: currentLightness > 70 ? "rgba(0,0,0,0.6)" : "white" }
+					})
+				})
+			]
+		})
+	});
+}
+function ColorPicker({ value, defaultValue, colors, onChange, onCollapse, disabled = false, openOnHover = false, initialExpanded = true, animationDuration = 300, showAlphaSlider = true, coreSize = 36, petalSize = 32, showCoreColor = true, sliderPosition, adaptivePositioning = true, circularBarWidth = BAR_WIDTH, sliderWidth = BAR_WIDTH, sliderOffset = SLIDER_OFFSET, collapsible = false, darkMode, className, ref, ...props }) {
+	const [colorMode, setColorMode] = React$1.useState("HEX");
+	const [internalPickerVal, setInternalPickerVal] = React$1.useState(defaultValue ?? {
+		hue: 210,
+		saturation: 50,
+		alpha: 100,
+		layer: "outer"
+	});
+	const currentValue = value ?? internalPickerVal;
+	const normalizedColors = React$1.useMemo(() => {
+		return colors && colors.length > 0 ? colors.map(parseColor) : DEFAULT_COLORS;
+	}, [colors]);
+	const baseSaturation = React$1.useMemo(() => {
+		if (currentValue.originalSaturation !== void 0) return currentValue.originalSaturation;
+		return normalizedColors.find((c) => c.h === currentValue.hue)?.s ?? 70;
+	}, [
+		normalizedColors,
+		currentValue.hue,
+		currentValue.originalSaturation
+	]);
+	const currentLightness = React$1.useMemo(() => {
+		return currentValue.lightness ?? sliderValueToLightness(currentValue.saturation);
+	}, [currentValue.lightness, currentValue.saturation]);
+	const visualSaturation = React$1.useMemo(() => {
+		return getVisualSaturation(currentValue.saturation, baseSaturation);
+	}, [currentValue.saturation, baseSaturation]);
+	const parsedOutput = React$1.useMemo(() => {
+		return createColorOutput(currentValue.hue, currentValue.saturation, visualSaturation, baseSaturation, currentLightness, currentValue.alpha, currentValue.layer);
+	}, [
+		currentValue,
+		visualSaturation,
+		baseSaturation,
+		currentLightness
+	]);
+	const [hexInput, setHexInput] = React$1.useState(parsedOutput.hex.toUpperCase());
+	const [rgbaInputs, setRgbaInputs] = React$1.useState({
+		r: String(parsedOutput.r),
+		g: String(parsedOutput.g),
+		b: String(parsedOutput.b),
+		a: String(parsedOutput.alpha === 100 ? 1 : (parsedOutput.alpha / 100).toFixed(2))
+	});
+	const [hslaInputs, setHslaInputs] = React$1.useState({
+		h: String(Math.round(parsedOutput.hue)),
+		s: String(Math.round(parsedOutput.saturation)),
+		l: String(Math.round(parsedOutput.lightness ?? 50)),
+		a: String(parsedOutput.alpha === 100 ? 1 : (parsedOutput.alpha / 100).toFixed(2))
+	});
+	React$1.useEffect(() => {
+		setHexInput(parsedOutput.hex.toUpperCase());
+		setRgbaInputs({
+			r: String(parsedOutput.r),
+			g: String(parsedOutput.g),
+			b: String(parsedOutput.b),
+			a: String(parsedOutput.alpha === 100 ? 1 : (parsedOutput.alpha / 100).toFixed(2))
+		});
+		setHslaInputs({
+			h: String(Math.round(parsedOutput.hue)),
+			s: String(Math.round(parsedOutput.saturation)),
+			l: String(Math.round(parsedOutput.lightness ?? 50)),
+			a: String(parsedOutput.alpha === 100 ? 1 : (parsedOutput.alpha / 100).toFixed(2))
+		});
+	}, [parsedOutput]);
+	const updateColor = (nextVal) => {
+		if (!value) setInternalPickerVal(nextVal);
+		if (onChange) {
+			const newBaseSaturation = nextVal.originalSaturation ?? normalizedColors.find((c) => c.h === nextVal.hue)?.s ?? 70;
+			const nextLightness = nextVal.lightness ?? sliderValueToLightness(nextVal.saturation);
+			const nextVisualSat = getVisualSaturation(nextVal.saturation, newBaseSaturation);
+			const { r, g, b } = hslToRgb(nextVal.hue, nextVisualSat, nextLightness);
+			onChange({
+				...nextVal,
+				originalSaturation: newBaseSaturation,
+				lightness: nextLightness,
+				hex: hslToHex(nextVal.hue, nextVisualSat, nextLightness),
+				hsl: hslToString(nextVal.hue, nextVisualSat, nextLightness),
+				hsla: hslaToString(nextVal.hue, nextVisualSat, nextLightness, nextVal.alpha),
+				rgb: `rgb(${r}, ${g}, ${b})`,
+				rgba: rgbaToString(r, g, b, nextVal.alpha),
+				r,
+				g,
+				b
+			});
+		}
+	};
+	const handleRadialPickerChange = (color) => {
+		updateColor({
+			hue: color.hue,
+			saturation: color.saturation,
+			lightness: color.lightness,
+			originalSaturation: color.originalSaturation,
+			alpha: currentValue.alpha,
+			layer: color.layer
+		});
+	};
+	const handleAlphaChange = (nextAlpha) => {
+		updateColor({
+			...currentValue,
+			alpha: nextAlpha
+		});
+	};
+	const toggleMode = () => {
+		setColorMode((prev) => {
+			if (prev === "HEX") return "RGBA";
+			if (prev === "RGBA") return "HSLA";
+			return "HEX";
+		});
+	};
+	const handleHexInputChange = (val) => {
+		setHexInput(val);
+		if (/^#[0-9A-F]{6}$/i.test(val) || /^[0-9A-F]{6}$/i.test(val)) {
+			const hsl = hexToHsl(val.startsWith("#") ? val : `#${val}`);
+			updateColor({
+				hue: hsl.h,
+				saturation: lightnessToSliderValue(hsl.l),
+				lightness: hsl.l,
+				originalSaturation: hsl.s,
+				alpha: currentValue.alpha,
+				layer: currentValue.layer
+			});
+		}
+	};
+	const handleRgbaInputChange = (key, val) => {
+		const nextRgba = {
+			...rgbaInputs,
+			[key]: val
+		};
+		setRgbaInputs(nextRgba);
+		const r = parseInt(nextRgba.r, 10);
+		const g = parseInt(nextRgba.g, 10);
+		const b = parseInt(nextRgba.b, 10);
+		const a = parseFloat(nextRgba.a);
+		if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) {
+			const hsl = rgbToHsl(r, g, b);
+			updateColor({
+				hue: hsl.h,
+				saturation: lightnessToSliderValue(hsl.l),
+				lightness: hsl.l,
+				originalSaturation: hsl.s,
+				alpha: Number.isNaN(a) ? currentValue.alpha : Math.max(0, Math.min(100, a * 100)),
+				layer: currentValue.layer
+			});
+		}
+	};
+	const handleHslaInputChange = (key, val) => {
+		const nextHsla = {
+			...hslaInputs,
+			[key]: val
+		};
+		setHslaInputs(nextHsla);
+		const h = parseInt(nextHsla.h, 10);
+		const s = parseInt(nextHsla.s, 10);
+		const l = parseInt(nextHsla.l, 10);
+		const a = parseFloat(nextHsla.a);
+		if (!Number.isNaN(h) && !Number.isNaN(s) && !Number.isNaN(l)) updateColor({
+			hue: Math.max(0, Math.min(360, h)),
+			saturation: Math.max(0, Math.min(100, s)),
+			lightness: Math.max(0, Math.min(100, l)),
+			originalSaturation: baseSaturation,
+			alpha: Number.isNaN(a) ? currentValue.alpha : Math.max(0, Math.min(100, a * 100)),
+			layer: currentValue.layer
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "color-picker",
+		...props,
+		className: cn("inline-flex flex-col rounded-2xl border bg-card text-card-foreground shadow-xs/5 overflow-hidden w-[250px] select-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", darkMode && "dark", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex justify-center items-center pt-10 pb-[calc(--spacing(10)-1px)] px-4 bg-muted/20 border-b",
+			children: /* @__PURE__ */ jsx(BlossomColorPicker, {
+				value: currentValue,
+				colors,
+				onChange: handleRadialPickerChange,
+				onCollapse,
+				disabled,
+				openOnHover,
+				initialExpanded,
+				animationDuration,
+				showAlphaSlider,
+				showOpacitySlider: false,
+				coreSize,
+				petalSize,
+				showCoreColor,
+				sliderPosition,
+				adaptivePositioning,
+				circularBarWidth,
+				sliderWidth,
+				sliderOffset,
+				collapsible
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "p-4 flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative size-9 rounded-full border border-black/5 dark:border-white/10 overflow-hidden shrink-0",
+					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[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%)] bg-size-[8px_8px] bg-position-[0_0,0_4px,4px_-4px,-4px_0px] bg-white opacity-40" }), /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-0 rounded-full shadow-inner",
+						style: { backgroundColor: parsedOutput.rgba }
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "relative flex-1 h-3 flex items-center",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative w-full h-2.5 rounded-full border border-black/5 overflow-hidden",
+							children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[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%)] bg-size-[8px_8px] bg-position-[0_0,0_4px,4px_-4px,-4px_0px] bg-white opacity-40" }), /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-0",
+								style: { background: `linear-gradient(to right, rgba(${parsedOutput.r}, ${parsedOutput.g}, ${parsedOutput.b}, 0), rgb(${parsedOutput.r}, ${parsedOutput.g}, ${parsedOutput.b}))` }
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "absolute size-3.5 -ml-1.75 bg-card border border-input shadow-xs/5 rounded-full pointer-events-none top-1/2 -translate-y-1/2",
+							style: { left: `${currentValue.alpha}%` }
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "range",
+							"aria-label": "Opacity",
+							min: 0,
+							max: 100,
+							disabled,
+							value: currentValue.alpha,
+							onChange: (e) => handleAlphaChange(Number(e.target.value)),
+							className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full disabled:cursor-not-allowed"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 items-start",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 flex gap-1.5 min-w-0",
+					children: [
+						colorMode === "HEX" && /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 flex flex-col items-center gap-1",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "text",
+								"aria-label": "Hex color",
+								disabled,
+								value: hexInput,
+								onChange: (e) => handleHexInputChange(e.target.value),
+								className: "w-full h-7 rounded-md border border-input bg-background/50 px-[calc(--spacing(2)-1px)] py-[calc(--spacing(1)-1px)] text-center font-mono text-xs uppercase shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+								children: "Hex"
+							})]
+						}),
+						colorMode === "RGBA" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Red",
+									disabled,
+									value: rgbaInputs.r,
+									onChange: (e) => handleRgbaInputChange("r", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "R"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Green",
+									disabled,
+									value: rgbaInputs.g,
+									onChange: (e) => handleRgbaInputChange("g", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "G"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Blue",
+									disabled,
+									value: rgbaInputs.b,
+									onChange: (e) => handleRgbaInputChange("b", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "B"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Alpha",
+									disabled,
+									value: rgbaInputs.a,
+									onChange: (e) => handleRgbaInputChange("a", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "A"
+								})]
+							})
+						] }),
+						colorMode === "HSLA" && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Hue",
+									disabled,
+									value: hslaInputs.h,
+									onChange: (e) => handleHslaInputChange("h", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "H"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Saturation",
+									disabled,
+									value: hslaInputs.s,
+									onChange: (e) => handleHslaInputChange("s", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "S"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Lightness",
+									disabled,
+									value: hslaInputs.l,
+									onChange: (e) => handleHslaInputChange("l", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "L"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 flex flex-col items-center gap-1",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "text",
+									"aria-label": "Alpha",
+									disabled,
+									value: hslaInputs.a,
+									onChange: (e) => handleHslaInputChange("a", e.target.value),
+									className: "w-full h-7 rounded-md border border-input bg-background/50 py-[calc(--spacing(1)-1px)] text-center font-mono text-xs shadow-2xs outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 disabled:opacity-64"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wider",
+									children: "A"
+								})]
+							})
+						] })
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					onClick: toggleMode,
+					"aria-label": "Switch color format",
+					className: "relative flex items-center justify-center h-7 px-[calc(--spacing(2)-1px)] rounded-md border border-input bg-background/30 hover:bg-muted/70 active:bg-muted/90 cursor-pointer text-muted-foreground transition-colors disabled:opacity-64 disabled:cursor-not-allowed shadow-2xs focus:outline-none focus-visible:ring-1 focus-visible:ring-primary/40 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { BlossomColorPicker, ColorPicker, DEFAULT_COLORS, INNER_COLORS, OUTER_COLORS, calculateArcGradientColors, calculateBarRadius, calculateContainerSize, calculateLayerRadii, calculateLayerRotations, calculateSliderValueFromPoint, computeAdaptivePosition, createColorOutput, describeArc, getCenterAngle, getOppositePosition, getPetalZIndex, getVisualSaturation, hexToHsl, hslToHex, hslToRgb, hslToString, hslaToString, lightnessToSliderValue, organizeColorsIntoLayers, parseColor, polarToCartesian, rgbToHsl, rgbaToString, sliderValueToLightness };