@pathscale/ui 0.0.163 → 0.0.165

package/dist/components/colorpicker/ColorWheelFlower.js

@@ -1,462 +0,0 @@
-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.js

@@ -1,105 +0,0 @@
-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 };