@pathscale/ui 0.1.1 → 1.1.1

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -0,0 +1,521 @@
+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 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+)\)$/);
+    if (!match) return {
+        hue: 0,
+        saturation: 0,
+        lightness: 100
+    };
+    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,
+        saturation: hsl.s,
+        lightness: hsl.l
+    };
+};
+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,
+        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);
+    const opacity = Number.isFinite(opacityValue) ? opacityValue : 1;
+    const transform = styles.transform;
+    if (!transform || "none" === transform) return {
+        opacity,
+        x: 0,
+        y: 0,
+        scale: 1
+    };
+    if ("undefined" != typeof DOMMatrixReadOnly) {
+        const matrix = new DOMMatrixReadOnly(transform);
+        return {
+            opacity,
+            x: matrix.m41,
+            y: matrix.m42,
+            scale: matrix.a
+        };
+    }
+    const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+    if (!matrixMatch) return {
+        opacity,
+        x: 0,
+        y: 0,
+        scale: 1
+    };
+    const values = matrixMatch[1].split(",").map((value)=>Number.parseFloat(value.trim()));
+    return {
+        opacity,
+        scale: Number.isFinite(values[0]) ? values[0] : 1,
+        x: Number.isFinite(values[4]) ? values[4] : 0,
+        y: Number.isFinite(values[5]) ? values[5] : 0
+    };
+};
+const getLiftOffset = (item, distance)=>{
+    const radius = Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2);
+    if (!Number.isFinite(radius) || 0 === radius) return {
+        x: 0,
+        y: 0
+    };
+    return {
+        x: item.offsetX / radius * distance,
+        y: item.offsetY / radius * distance
+    };
+};
+const easeOutBack = (overshoot = 1.4)=>(t)=>{
+        const c1 = overshoot;
+        const c3 = c1 + 1;
+        return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
+    };
+const toRgba = (rgb, alpha)=>{
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    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("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;
+const RAINBOW_GRADIENT = `conic-gradient(
+  from 0deg,
+  rgb(245,61,61) 0deg,
+  rgb(245,153,61) 30deg,
+  rgb(245,245,61) 60deg,
+  rgb(61,245,61) 120deg,
+  rgb(61,245,245) 180deg,
+  rgb(61,61,245) 240deg,
+  rgb(245,61,245) 300deg,
+  rgb(245,61,61) 360deg
+)`;
+const ColorWheelFlower = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [hoveredIndex, setHoveredIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [pressedIndex, setPressedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [pointer, setPointer] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        x: 0,
+        y: 0,
+        active: false
+    });
+    const [pulseState, setPulseState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const reduceMotion = (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.prefersReducedMotion)();
+    const ringTransition = reduceMotion ? {
+        duration: 0
+    } : {
+        duration: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDurations.slow,
+        easing: __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionEasings.inOut
+    };
+    const hoverLift = reduceMotion ? 0 : __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionDistances.sm;
+    const pressScale = 0.96;
+    const pulseScale = 1.12;
+    let containerRef;
+    let pointerTimeout;
+    let pulseTimeout;
+    let outerRingRef;
+    let outerRingControl = null;
+    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,
+            key: pulseKey
+        });
+        if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
+        pulseTimeout = window.setTimeout(()=>{
+            setPulseState((prev)=>prev?.index === index && prev?.key === pulseKey ? null : prev);
+        }, reduceMotion ? 0 : 220);
+    };
+    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);
+            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();
+        const x = event.clientX - rect.left - rect.width / 2;
+        const y = event.clientY - rect.top - rect.height / 2;
+        setPointer({
+            x,
+            y,
+            active: true
+        });
+        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
+        pointerTimeout = window.setTimeout(()=>{
+            setPointer((prev)=>({
+                    ...prev,
+                    active: false
+                }));
+        }, 120);
+    };
+    const handlePointerLeave = ()=>{
+        setPointer((prev)=>({
+                ...prev,
+                active: false
+            }));
+        setHoveredIndex(null);
+        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
+    };
+    const outerRingBackground = ()=>{
+        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 {
+            opacity: 0.5,
+            scale: 1
+        };
+        if (null !== selectedIndex()) return {
+            opacity: 1,
+            scale: 1
+        };
+        if (null !== hoveredIndex()) return {
+            opacity: 0.98,
+            scale: 0.84
+        };
+        return {
+            opacity: 0.92,
+            scale: 0.84
+        };
+    });
+    const outerRingGlow = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (context.disabled()) return "none";
+        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)(()=>{
+        if (!outerRingRef) return;
+        const target = outerRingTarget();
+        outerRingControl?.stop();
+        outerRingControl = (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.runMotion)(outerRingRef, readMotionState(outerRingRef), target, ringTransition);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        outerRingControl?.stop();
+        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$.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$;
+        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");
+        (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;
+                        })();
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            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 && (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,
+            o: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_ColorWheelFlower = ColorWheelFlower;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousemove"
+]);
+export { colorpicker_ColorWheelFlower as default };

package/dist/components/colorpicker/HueSlider.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface HueSliderProps {
+    class?: string;
+    className?: string;
+}
+declare const HueSlider: (props: HueSliderProps) => JSX.Element;
+export default HueSlider;

package/dist/components/colorpicker/HueSlider.js

@@ -0,0 +1,105 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=slider aria-label=Hue aria-valuemin=0 aria-valuemax=360><div>");
+const HueSlider = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const hue = ()=>context.color().hsl.h;
+    const updateHue = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newHue = Math.round(360 * percentage);
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateHue(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateHue(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let newHue = hue();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newHue = (hue() - step + 360) % 360;
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newHue = (hue() + step) % 360;
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative w-full h-6 rounded cursor-pointer select-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const thumbClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        _el$.style.setProperty("background", "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = hue(), _v$4 = context.disabled(), _v$5 = thumbClasses(), _v$6 = `${hue() / 360 * 100}%`, _v$7 = `hsl(${hue()}, 100%, 50%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("background-color", _v$7) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_HueSlider = HueSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { colorpicker_HueSlider as default };

package/dist/components/colorpicker/LightnessSlider.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface LightnessSliderProps {
+    class?: string;
+    className?: string;
+}
+declare const LightnessSlider: (props: LightnessSliderProps) => JSX.Element;
+export default LightnessSlider;