@pathscale/ui 0.1.1 → 1.2.1

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -0,0 +1,462 @@
+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";
+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>');
+const parseRgbToHsl = (rgbString)=>{
+    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 hsl = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.rgbToHsl)(r, g, b);
+    return {
+        hue: hsl.h,
+        saturation: hsl.s,
+        lightness: hsl.l
+    };
+};
+const createColorItem = (rgb, offsetX, offsetY)=>({
+        rgb,
+        offsetX,
+        offsetY,
+        ...parseRgbToHsl(rgb)
+    });
+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 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)
+];
+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 handleDotClick = (index)=>{
+        if (context.disabled()) return;
+        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);
+        if (selectedIndex() === index) {
+            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);
+        }
+    };
+    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 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 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 idx = hoveredIndex() ?? selectedIndex();
+        if (null === idx) return "0 0 10px rgba(255,255,255,0.08)";
+        const color = COLORS[idx].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);
+    });
+    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;
+        _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;
+                        }
+                    }
+                    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;
+                })();
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = containerClasses(), _v$2 = outerRingBackground(), _v$3 = 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"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_ColorWheelFlower = ColorWheelFlower;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousemove",
+    "click",
+    "pointerdown",
+    "pointerup"
+]);
+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;