@pathscale/ui 1.1.0 → 1.1.2

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -1,21 +1,24 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorWheelFlower.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_index_js_6938a92b__ from "../color-swatch/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_picker_index_js_d4d4ca4f__ from "../color-swatch-picker/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__ from "../../motion/index.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0"><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div></div><div class="relative z-10 w-[calc(100%-5px)] h-[calc(100%-5px)] rounded-full">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="relative w-[32px] h-[32px]"><div class="relative w-full h-full"><span class="absolute rounded-full pointer-events-none"></span><button type=button><span>');
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div data-slot=color-wheel-flower><div class=color-wheel-flower__rings><div class="color-wheel-flower__ring-shell color-wheel-flower__ring-shell--outer"><div class="color-wheel-flower__ring color-wheel-flower__ring--outer"></div></div><div class="color-wheel-flower__ring-shell color-wheel-flower__ring-shell--inner"><div class="color-wheel-flower__ring color-wheel-flower__ring--inner">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=color-wheel-flower__dot><div class=color-wheel-flower__dot-frame><div class=color-wheel-flower__dot-motion><span class=color-wheel-flower__halo></span><span>");
 const parseRgbToHsl = (rgbString)=>{
-    const match = rgbString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const match = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     if (!match) return {
         hue: 0,
         saturation: 0,
         lightness: 100
     };
-    const r = parseInt(match[1]);
-    const g = parseInt(match[2]);
-    const b = parseInt(match[3]);
+    const r = Number.parseInt(match[1], 10);
+    const g = Number.parseInt(match[2], 10);
+    const b = Number.parseInt(match[3], 10);
     const hsl = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.rgbToHsl)(r, g, b);
     return {
         hue: hsl.h,
@@ -23,12 +26,24 @@ const parseRgbToHsl = (rgbString)=>{
         lightness: hsl.l
     };
 };
-const createColorItem = (rgb, offsetX, offsetY)=>({
+const createColorItem = (id, rgb, offsetX, offsetY, options)=>{
+    const hsl = parseRgbToHsl(rgb);
+    const rgbMatch = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    const r = Number.parseInt(rgbMatch?.[1] ?? "255", 10);
+    const g = Number.parseInt(rgbMatch?.[2] ?? "255", 10);
+    const b = Number.parseInt(rgbMatch?.[3] ?? "255", 10);
+    return {
+        id,
         rgb,
+        hex: (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.rgbToHex)(r, g, b).toUpperCase(),
         offsetX,
         offsetY,
-        ...parseRgbToHsl(rgb)
-    });
+        hue: hsl.hue,
+        saturation: hsl.saturation,
+        lightness: hsl.lightness,
+        isCenter: options?.isCenter
+    };
+};
 const readMotionState = (el)=>{
     const styles = getComputedStyle(el);
     const opacityValue = Number.parseFloat(styles.opacity);
@@ -85,39 +100,52 @@ const toRgba = (rgb, alpha)=>{
     if (!match) return rgb;
     return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${alpha})`;
 };
+const hueDistance = (a, b)=>{
+    const wrapped = Math.abs(a - b) % 360;
+    return wrapped > 180 ? 360 - wrapped : wrapped;
+};
+const isNearColor = (color, item)=>{
+    const hueDelta = hueDistance(color.hsl.h, item.hue);
+    const saturationDelta = Math.abs(color.hsl.s - item.saturation);
+    const lightnessDelta = Math.abs(color.hsl.l - item.lightness);
+    return hueDelta <= 2 && saturationDelta <= 2 && lightnessDelta <= 2;
+};
 const COLORS = [
-    createColorItem("rgb(80,80,80)", 47.631, -27.5),
-    createColorItem("rgb(80,60,50)", 27.5, -47.631),
-    createColorItem("rgb(80,50,50)", 0, -55),
-    createColorItem("rgb(80,50,70)", -27.5, -47.631),
-    createColorItem("rgb(70,50,80)", -47.631, -27.5),
-    createColorItem("rgb(55,50,80)", -55, 0),
-    createColorItem("rgb(50,55,80)", -47.631, 27.5),
-    createColorItem("rgb(50,65,80)", -27.5, 47.631),
-    createColorItem("rgb(50,80,80)", 0, 55),
-    createColorItem("rgb(50,80,65)", 27.5, 47.631),
-    createColorItem("rgb(55,80,50)", 47.631, 27.5),
-    createColorItem("rgb(70,80,50)", 55, 0),
-    createColorItem("rgb(245,245,61)", 34.641, -20),
-    createColorItem("rgb(245,153,61)", 20, -34.641),
-    createColorItem("rgb(245,61,61)", 0, -40),
-    createColorItem("rgb(245,61,153)", -20, -34.641),
-    createColorItem("rgb(245,61,245)", -34.641, -20),
-    createColorItem("rgb(153,61,245)", -40, 0),
-    createColorItem("rgb(61,61,245)", -34.641, 20),
-    createColorItem("rgb(61,153,245)", -20, 34.641),
-    createColorItem("rgb(61,245,245)", 0, 40),
-    createColorItem("rgb(61,245,153)", 20, 34.641),
-    createColorItem("rgb(61,245,61)", 34.641, 20),
-    createColorItem("rgb(153,245,61)", 40, 0),
-    createColorItem("rgb(240,217,194)", 10, -17.3205),
-    createColorItem("rgb(240,194,217)", -10, -17.3205),
-    createColorItem("rgb(217,194,240)", -20, 0),
-    createColorItem("rgb(194,217,240)", -10, 17.3205),
-    createColorItem("rgb(194,240,217)", 10, 17.3205),
-    createColorItem("rgb(217,240,194)", 20, 0),
-    createColorItem("rgb(255,255,255)", 0, 0)
+    createColorItem("outer-1", "rgb(80,80,80)", 47.631, -27.5),
+    createColorItem("outer-2", "rgb(80,60,50)", 27.5, -47.631),
+    createColorItem("outer-3", "rgb(80,50,50)", 0, -55),
+    createColorItem("outer-4", "rgb(80,50,70)", -27.5, -47.631),
+    createColorItem("outer-5", "rgb(70,50,80)", -47.631, -27.5),
+    createColorItem("outer-6", "rgb(55,50,80)", -55, 0),
+    createColorItem("outer-7", "rgb(50,55,80)", -47.631, 27.5),
+    createColorItem("outer-8", "rgb(50,65,80)", -27.5, 47.631),
+    createColorItem("outer-9", "rgb(50,80,80)", 0, 55),
+    createColorItem("outer-10", "rgb(50,80,65)", 27.5, 47.631),
+    createColorItem("outer-11", "rgb(55,80,50)", 47.631, 27.5),
+    createColorItem("outer-12", "rgb(70,80,50)", 55, 0),
+    createColorItem("middle-1", "rgb(245,245,61)", 34.641, -20),
+    createColorItem("middle-2", "rgb(245,153,61)", 20, -34.641),
+    createColorItem("middle-3", "rgb(245,61,61)", 0, -40),
+    createColorItem("middle-4", "rgb(245,61,153)", -20, -34.641),
+    createColorItem("middle-5", "rgb(245,61,245)", -34.641, -20),
+    createColorItem("middle-6", "rgb(153,61,245)", -40, 0),
+    createColorItem("middle-7", "rgb(61,61,245)", -34.641, 20),
+    createColorItem("middle-8", "rgb(61,153,245)", -20, 34.641),
+    createColorItem("middle-9", "rgb(61,245,245)", 0, 40),
+    createColorItem("middle-10", "rgb(61,245,153)", 20, 34.641),
+    createColorItem("middle-11", "rgb(61,245,61)", 34.641, 20),
+    createColorItem("middle-12", "rgb(153,245,61)", 40, 0),
+    createColorItem("inner-1", "rgb(240,217,194)", 10, -17.3205),
+    createColorItem("inner-2", "rgb(240,194,217)", -10, -17.3205),
+    createColorItem("inner-3", "rgb(217,194,240)", -20, 0),
+    createColorItem("inner-4", "rgb(194,217,240)", -10, 17.3205),
+    createColorItem("inner-5", "rgb(194,240,217)", 10, 17.3205),
+    createColorItem("inner-6", "rgb(217,240,194)", 20, 0),
+    createColorItem("center", "rgb(255,255,255)", 0, 0, {
+        isCenter: true
+    })
 ];
+const CENTER_INDEX = COLORS.findIndex((item)=>item.isCenter);
 const MAX_RADIUS = Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
 const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
 const MAX_WAVE_DELAY = 0.12;
@@ -158,8 +186,27 @@ const ColorWheelFlower = (props)=>{
     let pulseTimeout;
     let outerRingRef;
     let outerRingControl = null;
-    const handleDotClick = (index)=>{
-        if (context.disabled()) return;
+    const closestIndex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const current = context.color();
+        if (current.hsl.s <= 6 && current.hsl.l >= 95 && CENTER_INDEX >= 0) return CENTER_INDEX;
+        let closest = 0;
+        let bestScore = Number.POSITIVE_INFINITY;
+        for(let index = 0; index < COLORS.length; index += 1){
+            const item = COLORS[index];
+            if (item.isCenter) continue;
+            const hueDelta = hueDistance(current.hsl.h, item.hue);
+            const saturationDelta = Math.abs(current.hsl.s - item.saturation);
+            const lightnessDelta = Math.abs(current.hsl.l - item.lightness);
+            const score = 1.4 * hueDelta + 0.8 * saturationDelta + 0.55 * lightnessDelta;
+            if (score < bestScore) {
+                bestScore = score;
+                closest = index;
+            }
+        }
+        return closest;
+    });
+    const visualSelectedIndex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>selectedIndex() ?? closestIndex());
+    const triggerPulse = (index)=>{
         const pulseKey = Date.now();
         setPulseState({
             index,
@@ -169,17 +216,31 @@ const ColorWheelFlower = (props)=>{
         pulseTimeout = window.setTimeout(()=>{
             setPulseState((prev)=>prev?.index === index && prev?.key === pulseKey ? null : prev);
         }, reduceMotion ? 0 : 220);
-        if (selectedIndex() === index) {
+    };
+    const handlePickerChange = (selectedHex)=>{
+        if (context.disabled()) return;
+        const index = COLORS.findIndex((item)=>item.hex === selectedHex.toUpperCase());
+        if (index < 0) return;
+        triggerPulse(index);
+        const selected = selectedIndex();
+        const item = COLORS[index];
+        if (selected === index && !item.isCenter) {
             setSelectedIndex(null);
-            const whiteColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a);
-            context.onChange(whiteColor);
-        } else {
-            setSelectedIndex(index);
-            const color = COLORS[index];
-            const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(color.hue, color.saturation, color.lightness, context.color().hsl.a);
-            context.onChange(newColor);
+            context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a));
+            return;
         }
+        setSelectedIndex(index);
+        if (item.isCenter) return void context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a));
+        context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(item.hue, item.saturation, item.lightness, context.color().hsl.a));
     };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const selected = selectedIndex();
+        const current = context.color();
+        if (null === selected) return;
+        const selectedItem = COLORS[selected];
+        if (!selectedItem) return;
+        if (!isNearColor(current, selectedItem)) setSelectedIndex(null);
+    });
     const handlePointerMove = (event)=>{
         if (!containerRef) return;
         const rect = containerRef.getBoundingClientRect();
@@ -206,12 +267,11 @@ const ColorWheelFlower = (props)=>{
         setHoveredIndex(null);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative w-[190px] h-[190px] flex items-center justify-center", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "opacity-50 cursor-not-allowed": context.disabled()
-        }), props.class, props.className);
     const outerRingBackground = ()=>{
-        const idx = selectedIndex();
-        return null === idx ? RAINBOW_GRADIENT : `conic-gradient(${COLORS[idx].rgb}, ${COLORS[idx].rgb})`;
+        const selected = selectedIndex();
+        if (null === selected) return RAINBOW_GRADIENT;
+        const color = COLORS[selected];
+        return `conic-gradient(${color.rgb}, ${color.rgb})`;
     };
     const outerRingTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         if (context.disabled()) return {
@@ -233,9 +293,9 @@ const ColorWheelFlower = (props)=>{
     });
     const outerRingGlow = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         if (context.disabled()) return "none";
-        const idx = hoveredIndex() ?? selectedIndex();
-        if (null === idx) return "0 0 10px rgba(255,255,255,0.08)";
-        const color = COLORS[idx].rgb;
+        const index = hoveredIndex() ?? selectedIndex();
+        if (null === index) return "0 0 10px rgba(255,255,255,0.08)";
+        const color = COLORS[index].rgb;
         return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
     });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
@@ -249,214 +309,213 @@ const ColorWheelFlower = (props)=>{
         if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     });
+    const pickerValue = ()=>COLORS[visualSelectedIndex()]?.hex;
     return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$2.nextSibling;
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
         _el$.addEventListener("mouseleave", handlePointerLeave);
         _el$.$$mousemove = handlePointerMove;
         var _ref$ = containerRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
-        _el$3.style.setProperty("transform", "scale(1.1)");
         var _ref$2 = outerRingRef;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$4) : outerRingRef = _el$4;
         _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out");
-        _el$5.style.setProperty("transform", "scale(0.9)");
-        _el$6.style.setProperty("background", "#0b1012");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-            each: COLORS,
-            children: (item, index)=>{
-                let motionRef;
-                let dotControl = null;
-                const isHovered = ()=>hoveredIndex() === index();
-                const isPressed = ()=>pressedIndex() === index();
-                const isPulsing = ()=>pulseState()?.index === index();
-                const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-                    if (context.disabled()) return {
-                        opacity: 0.5,
-                        scale: 1,
-                        x: 0,
-                        y: 0
-                    };
-                    const pointerState = pointer();
-                    const anchorIndex = hoveredIndex();
-                    let scale = 1;
-                    let offsetX = 0;
-                    let offsetY = 0;
-                    if (null !== anchorIndex && pointerState.active) {
-                        const anchor = COLORS[anchorIndex];
-                        const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
-                        const waveRadius = 0.9 * MAX_RADIUS;
-                        const influence = Math.max(0, 1 - distance / waveRadius);
-                        if (influence > 0) {
-                            const maxDelta = 16;
-                            const deltaX = Math.max(-maxDelta, Math.min(maxDelta, pointerState.x - anchor.offsetX));
-                            const deltaY = Math.max(-maxDelta, Math.min(maxDelta, pointerState.y - anchor.offsetY));
-                            const waveStrength = isHovered() ? 0.25 : 0.18;
-                            offsetX += deltaX * influence * waveStrength;
-                            offsetY += deltaY * influence * waveStrength;
-                            const liftStrength = isHovered() ? 0.8 : 0.35;
-                            const lift = getLiftOffset(item, hoverLift * liftStrength);
-                            offsetX += lift.x * influence;
-                            offsetY += lift.y * influence;
-                            const scaleBoost = isHovered() ? 0.06 : 0.03;
-                            scale += influence * scaleBoost;
-                        }
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_index_js_d4d4ca4f__["default"], {
+            class: "color-wheel-flower__picker",
+            get value () {
+                return pickerValue();
+            },
+            onChange: handlePickerChange,
+            get isDisabled () {
+                return context.disabled();
+            },
+            "aria-label": "Flower color palette",
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    each: COLORS,
+                    children: (item, index)=>{
+                        let motionRef;
+                        let dotControl = null;
+                        const isHovered = ()=>hoveredIndex() === index();
+                        const isPressed = ()=>pressedIndex() === index();
+                        const isPulsing = ()=>pulseState()?.index === index();
+                        const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                            if (context.disabled()) return {
+                                opacity: 0.5,
+                                scale: 1,
+                                x: 0,
+                                y: 0
+                            };
+                            const pointerState = pointer();
+                            const anchorIndex = hoveredIndex();
+                            let scale = 1;
+                            let offsetX = 0;
+                            let offsetY = 0;
+                            if (null !== anchorIndex && pointerState.active) {
+                                const anchor = COLORS[anchorIndex];
+                                const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
+                                const waveRadius = 0.9 * MAX_RADIUS;
+                                const influence = Math.max(0, 1 - distance / waveRadius);
+                                if (influence > 0) {
+                                    const maxDelta = 16;
+                                    const deltaX = Math.max(-maxDelta, Math.min(maxDelta, pointerState.x - anchor.offsetX));
+                                    const deltaY = Math.max(-maxDelta, Math.min(maxDelta, pointerState.y - anchor.offsetY));
+                                    const waveStrength = isHovered() ? 0.25 : 0.18;
+                                    offsetX += deltaX * influence * waveStrength;
+                                    offsetY += deltaY * influence * waveStrength;
+                                    const liftStrength = isHovered() ? 0.8 : 0.35;
+                                    const lift = getLiftOffset(item, hoverLift * liftStrength);
+                                    offsetX += lift.x * influence;
+                                    offsetY += lift.y * influence;
+                                    const scaleBoost = isHovered() ? 0.06 : 0.03;
+                                    scale += influence * scaleBoost;
+                                }
+                            }
+                            return {
+                                opacity: 1,
+                                scale,
+                                x: offsetX,
+                                y: offsetY
+                            };
+                        });
+                        const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                            const base = dotBaseTarget();
+                            let scale = base.scale ?? 1;
+                            if (isPulsing()) scale *= pulseScale;
+                            if (isPressed()) scale *= pressScale;
+                            return {
+                                ...base,
+                                scale
+                            };
+                        });
+                        const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                            if (context.disabled()) return 0;
+                            if (isHovered()) return 0.6;
+                            if (isPulsing()) return 0.35;
+                            return 0;
+                        });
+                        const dotTransition = ()=>{
+                            if (reduceMotion) return {
+                                duration: 0
+                            };
+                            const anchorIndex = hoveredIndex();
+                            const pointerState = pointer();
+                            let delay = 0;
+                            if (null !== anchorIndex && pointerState.active) {
+                                const anchor = COLORS[anchorIndex];
+                                const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
+                                delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
+                            }
+                            if (isPulsing()) return {
+                                duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.fast,
+                                easing: easeOutBack(1.25)
+                            };
+                            if (isHovered()) return {
+                                duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.fast,
+                                easing: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionEasings.out,
+                                delay
+                            };
+                            return {
+                                duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.base,
+                                easing: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionEasings.out,
+                                delay
+                            };
+                        };
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+                            if (!motionRef) return;
+                            const target = dotTarget();
+                            const transition = dotTransition();
+                            dotControl?.stop();
+                            dotControl = (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.runMotion)(motionRef, readMotionState(motionRef), target, transition);
+                        });
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                            dotControl?.stop();
+                        });
+                        return (()=>{
+                            var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+                                motionRef = el;
+                            }, _el$7);
+                            _el$8.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_index_js_6938a92b__["default"], {
+                                get color () {
+                                    return item.hex;
+                                },
+                                size: "lg",
+                                get ["class"] () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-wheel-flower__swatch", item.isCenter && "color-wheel-flower__swatch--center");
+                                },
+                                get colorName () {
+                                    return item.isCenter ? "Reset to neutral" : `Theme color ${item.hex}`;
+                                },
+                                get isDisabled () {
+                                    return context.disabled();
+                                },
+                                onMouseEnter: ()=>{
+                                    if (!context.disabled()) setHoveredIndex(index());
+                                },
+                                onMouseLeave: ()=>{
+                                    if (!context.disabled()) setHoveredIndex(null);
+                                },
+                                onFocus: ()=>{
+                                    if (!context.disabled()) setHoveredIndex(index());
+                                },
+                                onBlur: ()=>{
+                                    if (!context.disabled()) setHoveredIndex(null);
+                                },
+                                onPointerDown: ()=>{
+                                    if (!context.disabled()) setPressedIndex(index());
+                                },
+                                onPointerUp: ()=>{
+                                    if (!context.disabled()) setPressedIndex(null);
+                                },
+                                onPointerLeave: ()=>{
+                                    if (!context.disabled()) setPressedIndex(null);
+                                },
+                                onPointerCancel: ()=>{
+                                    if (!context.disabled()) setPressedIndex(null);
+                                }
+                            }), _el$9);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                var _v$5 = `calc(50% + ${item.offsetX}px)`, _v$6 = `calc(50% + ${item.offsetY}px)`, _v$7 = glowOpacity(), _v$8 = `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`, _v$9 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("color-wheel-flower__highlight", isHovered() && "color-wheel-flower__highlight--hovered", isPulsing() && "color-wheel-flower__highlight--pulsing");
+                                _v$5 !== _p$.e && (null != (_p$.e = _v$5) ? _el$5.style.setProperty("left", _v$5) : _el$5.style.removeProperty("left"));
+                                _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$5.style.setProperty("top", _v$6) : _el$5.style.removeProperty("top"));
+                                _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$8.style.setProperty("opacity", _v$7) : _el$8.style.removeProperty("opacity"));
+                                _v$8 !== _p$.o && (null != (_p$.o = _v$8) ? _el$8.style.setProperty("box-shadow", _v$8) : _el$8.style.removeProperty("box-shadow"));
+                                _v$9 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, _p$.i = _v$9);
+                                return _p$;
+                            }, {
+                                e: void 0,
+                                t: void 0,
+                                a: void 0,
+                                o: void 0,
+                                i: void 0
+                            });
+                            return _el$5;
+                        })();
                     }
-                    return {
-                        opacity: 1,
-                        scale,
-                        x: offsetX,
-                        y: offsetY
-                    };
-                });
-                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-                    const base = dotBaseTarget();
-                    let scale = base.scale ?? 1;
-                    if (isPulsing()) scale *= pulseScale;
-                    if (isPressed()) scale *= pressScale;
-                    return {
-                        ...base,
-                        scale
-                    };
-                });
-                const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-                    if (context.disabled()) return 0;
-                    if (isHovered()) return 0.6;
-                    if (isPulsing()) return 0.35;
-                    return 0;
-                });
-                const dotTransition = ()=>{
-                    if (reduceMotion) return {
-                        duration: 0
-                    };
-                    const anchorIndex = hoveredIndex();
-                    const pointerState = pointer();
-                    let delay = 0;
-                    if (null !== anchorIndex && pointerState.active) {
-                        const anchor = COLORS[anchorIndex];
-                        const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
-                        delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
-                    }
-                    if (isPulsing()) return {
-                        duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.fast,
-                        easing: easeOutBack(1.25)
-                    };
-                    if (isHovered()) return {
-                        duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.fast,
-                        easing: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionEasings.out,
-                        delay
-                    };
-                    return {
-                        duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.base,
-                        easing: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionEasings.out,
-                        delay
-                    };
-                };
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-                    if (!motionRef) return;
-                    const target = dotTarget();
-                    const transition = dotTransition();
-                    dotControl?.stop();
-                    dotControl = (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.runMotion)(motionRef, readMotionState(motionRef), target, transition);
-                });
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-                    dotControl?.stop();
                 });
-                return (()=>{
-                    var _el$8 = _tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild;
-                    _el$8.style.setProperty("transform", "translate(-50%, -50%)");
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
-                        motionRef = el;
-                    }, _el$0);
-                    _el$1.style.setProperty("top", "-5px");
-                    _el$1.style.setProperty("left", "-5px");
-                    _el$1.style.setProperty("right", "-5px");
-                    _el$1.style.setProperty("bottom", "-5px");
-                    _el$1.style.setProperty("background", "radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 70%)");
-                    _el$1.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
-                    _el$10.addEventListener("pointercancel", ()=>{
-                        if (!context.disabled()) setPressedIndex(null);
-                    });
-                    _el$10.addEventListener("pointerleave", ()=>{
-                        if (!context.disabled()) setPressedIndex(null);
-                    });
-                    _el$10.$$pointerup = ()=>{
-                        if (!context.disabled()) setPressedIndex(null);
-                    };
-                    _el$10.$$pointerdown = ()=>{
-                        if (!context.disabled()) setPressedIndex(index());
-                    };
-                    _el$10.addEventListener("blur", ()=>{
-                        if (!context.disabled()) setHoveredIndex(null);
-                    });
-                    _el$10.addEventListener("focus", ()=>{
-                        if (!context.disabled()) setHoveredIndex(index());
-                    });
-                    _el$10.addEventListener("mouseleave", ()=>{
-                        if (!context.disabled()) setHoveredIndex(null);
-                    });
-                    _el$10.addEventListener("mouseenter", ()=>{
-                        if (!context.disabled()) setHoveredIndex(index());
-                    });
-                    _el$10.$$click = ()=>handleDotClick(index());
-                    _el$10.style.setProperty("transition", reduceMotion ? "none" : "box-shadow 200ms ease-out");
-                    _el$11.style.setProperty("mix-blend-mode", "overlay");
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$4 = `calc(50% + ${item.offsetX}px)`, _v$5 = `calc(50% + ${item.offsetY}px)`, _v$6 = glowOpacity(), _v$7 = `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`, _v$8 = context.disabled() ? -1 : 0, _v$9 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("w-full h-full rounded-full", "transition-shadow duration-200 ease-out", "focus:outline-none focus:ring-2 focus:ring-white/50", "relative z-10", {
-                            "cursor-not-allowed": context.disabled(),
-                            "cursor-pointer": !context.disabled()
-                        }), _v$0 = item.rgb, _v$1 = isHovered() || isPulsing() ? "0 3px 10px rgba(0,0,0,0.25)" : "0 2px 8px rgba(0,0,0,0.25)", _v$10 = `Select color ${item.rgb}`, _v$11 = selectedIndex() === index(), _v$12 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$13 = isHovered() ? "0.75" : isPulsing() ? "0.45" : "0", _v$14 = isHovered() ? "0 0 6px rgba(255,255,255,0.45)" : isPulsing() ? "0 0 4px rgba(255,255,255,0.35)" : "none";
-                        _v$4 !== _p$.e && (null != (_p$.e = _v$4) ? _el$8.style.setProperty("left", _v$4) : _el$8.style.removeProperty("left"));
-                        _v$5 !== _p$.t && (null != (_p$.t = _v$5) ? _el$8.style.setProperty("top", _v$5) : _el$8.style.removeProperty("top"));
-                        _v$6 !== _p$.a && (null != (_p$.a = _v$6) ? _el$1.style.setProperty("opacity", _v$6) : _el$1.style.removeProperty("opacity"));
-                        _v$7 !== _p$.o && (null != (_p$.o = _v$7) ? _el$1.style.setProperty("box-shadow", _v$7) : _el$1.style.removeProperty("box-shadow"));
-                        _v$8 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "tabindex", _p$.i = _v$8);
-                        _v$9 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.n = _v$9);
-                        _v$0 !== _p$.s && (null != (_p$.s = _v$0) ? _el$10.style.setProperty("background", _v$0) : _el$10.style.removeProperty("background"));
-                        _v$1 !== _p$.h && (null != (_p$.h = _v$1) ? _el$10.style.setProperty("box-shadow", _v$1) : _el$10.style.removeProperty("box-shadow"));
-                        _v$10 !== _p$.r && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-label", _p$.r = _v$10);
-                        _v$11 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-pressed", _p$.d = _v$11);
-                        _v$12 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$11, _p$.l = _v$12);
-                        _v$13 !== _p$.u && (null != (_p$.u = _v$13) ? _el$11.style.setProperty("opacity", _v$13) : _el$11.style.removeProperty("opacity"));
-                        _v$14 !== _p$.c && (null != (_p$.c = _v$14) ? _el$11.style.setProperty("box-shadow", _v$14) : _el$11.style.removeProperty("box-shadow"));
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0,
-                        o: void 0,
-                        i: void 0,
-                        n: void 0,
-                        s: void 0,
-                        h: void 0,
-                        r: void 0,
-                        d: void 0,
-                        l: void 0,
-                        u: void 0,
-                        c: void 0
-                    });
-                    return _el$8;
-                })();
             }
-        }));
+        }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = containerClasses(), _v$2 = outerRingBackground(), _v$3 = outerRingGlow();
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-wheel-flower", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+                "color-wheel-flower--disabled": context.disabled()
+            }), props.class, props.className), _v$2 = context.disabled() ? "true" : "false", _v$3 = outerRingBackground(), _v$4 = outerRingGlow();
             _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$4.style.setProperty("background", _v$2) : _el$4.style.removeProperty("background"));
-            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$4.style.setProperty("box-shadow", _v$3) : _el$4.style.removeProperty("box-shadow"));
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.t = _v$2);
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$4.style.setProperty("background", _v$3) : _el$4.style.removeProperty("background"));
+            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$4.style.setProperty("box-shadow", _v$4) : _el$4.style.removeProperty("box-shadow"));
             return _p$;
         }, {
             e: void 0,
             t: void 0,
-            a: void 0
+            a: void 0,
+            o: void 0
         });
         return _el$;
     })();
 };
 const colorpicker_ColorWheelFlower = ColorWheelFlower;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "mousemove",
-    "click",
-    "pointerdown",
-    "pointerup"
+    "mousemove"
 ]);
 export { colorpicker_ColorWheelFlower as default };