@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/color-wheel-flower/ColorWheelFlower.js

@@ -1,797 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import "./ColorWheelFlower.css";
-import { For, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import color_swatch from "../color-swatch/index.js";
-import color_swatch_picker from "../color-swatch-picker/index.js";
-import { useColorPickerContext } from "./colorWheelFlowerContext.js";
-import { createColorFromHsl, rgbToHex, rgbToHsl } from "./ColorUtils.js";
-import { motionDistances, motionDurations, motionEasings, prefersReducedMotion, runMotion } from "../../motion/index.js";
-import { CLASSES } from "./ColorWheelFlower.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div><div><div></div></div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div><span></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 = 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: rgbToHex(r, g, b).toUpperCase(),
-        r,
-        g,
-        b,
-        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 ("u" > 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);
-    return hueDelta <= 5 && saturationDelta <= 15;
-};
-const LAYOUT = [
-    {
-        id: "outer-1",
-        offsetX: 47.631,
-        offsetY: -27.5
-    },
-    {
-        id: "outer-2",
-        offsetX: 27.5,
-        offsetY: -47.631
-    },
-    {
-        id: "outer-3",
-        offsetX: 0,
-        offsetY: -55
-    },
-    {
-        id: "outer-4",
-        offsetX: -27.5,
-        offsetY: -47.631
-    },
-    {
-        id: "outer-5",
-        offsetX: -47.631,
-        offsetY: -27.5
-    },
-    {
-        id: "outer-6",
-        offsetX: -55,
-        offsetY: 0
-    },
-    {
-        id: "outer-7",
-        offsetX: -47.631,
-        offsetY: 27.5
-    },
-    {
-        id: "outer-8",
-        offsetX: -27.5,
-        offsetY: 47.631
-    },
-    {
-        id: "outer-9",
-        offsetX: 0,
-        offsetY: 55
-    },
-    {
-        id: "outer-10",
-        offsetX: 27.5,
-        offsetY: 47.631
-    },
-    {
-        id: "outer-11",
-        offsetX: 47.631,
-        offsetY: 27.5
-    },
-    {
-        id: "outer-12",
-        offsetX: 55,
-        offsetY: 0
-    },
-    {
-        id: "middle-1",
-        offsetX: 34.641,
-        offsetY: -20
-    },
-    {
-        id: "middle-2",
-        offsetX: 20,
-        offsetY: -34.641
-    },
-    {
-        id: "middle-3",
-        offsetX: 0,
-        offsetY: -40
-    },
-    {
-        id: "middle-4",
-        offsetX: -20,
-        offsetY: -34.641
-    },
-    {
-        id: "middle-5",
-        offsetX: -34.641,
-        offsetY: -20
-    },
-    {
-        id: "middle-6",
-        offsetX: -40,
-        offsetY: 0
-    },
-    {
-        id: "middle-7",
-        offsetX: -34.641,
-        offsetY: 20
-    },
-    {
-        id: "middle-8",
-        offsetX: -20,
-        offsetY: 34.641
-    },
-    {
-        id: "middle-9",
-        offsetX: 0,
-        offsetY: 40
-    },
-    {
-        id: "middle-10",
-        offsetX: 20,
-        offsetY: 34.641
-    },
-    {
-        id: "middle-11",
-        offsetX: 34.641,
-        offsetY: 20
-    },
-    {
-        id: "middle-12",
-        offsetX: 40,
-        offsetY: 0
-    },
-    {
-        id: "inner-1",
-        offsetX: 10,
-        offsetY: -17.3205
-    },
-    {
-        id: "inner-2",
-        offsetX: -10,
-        offsetY: -17.3205
-    },
-    {
-        id: "inner-3",
-        offsetX: -20,
-        offsetY: 0
-    },
-    {
-        id: "inner-4",
-        offsetX: -10,
-        offsetY: 17.3205
-    },
-    {
-        id: "inner-5",
-        offsetX: 10,
-        offsetY: 17.3205
-    },
-    {
-        id: "inner-6",
-        offsetX: 20,
-        offsetY: 0
-    },
-    {
-        id: "center",
-        offsetX: 0,
-        offsetY: 0,
-        isCenter: true
-    }
-];
-const LIGHT_RGBS = [
-    "rgb(249,168,37)",
-    "rgb(239,108,0)",
-    "rgb(198,40,40)",
-    "rgb(173,20,87)",
-    "rgb(106,27,154)",
-    "rgb(69,39,160)",
-    "rgb(40,53,147)",
-    "rgb(21,101,192)",
-    "rgb(0,131,143)",
-    "rgb(0,105,92)",
-    "rgb(46,125,50)",
-    "rgb(85,139,47)",
-    "rgb(255,235,59)",
-    "rgb(255,152,0)",
-    "rgb(244,67,54)",
-    "rgb(233,30,99)",
-    "rgb(156,39,176)",
-    "rgb(103,58,183)",
-    "rgb(63,81,181)",
-    "rgb(33,150,243)",
-    "rgb(0,188,212)",
-    "rgb(0,150,136)",
-    "rgb(76,175,80)",
-    "rgb(139,195,74)",
-    "rgb(239,154,154)",
-    "rgb(206,147,216)",
-    "rgb(144,202,249)",
-    "rgb(128,222,234)",
-    "rgb(165,214,167)",
-    "rgb(255,224,130)",
-    "rgb(255,255,255)"
-];
-const DARK_RGBS = [
-    "rgb(255,238,88)",
-    "rgb(255,167,38)",
-    "rgb(239,83,80)",
-    "rgb(236,64,122)",
-    "rgb(171,71,188)",
-    "rgb(126,87,194)",
-    "rgb(92,107,192)",
-    "rgb(66,165,245)",
-    "rgb(38,198,218)",
-    "rgb(38,166,154)",
-    "rgb(102,187,106)",
-    "rgb(156,204,101)",
-    "rgb(255,245,157)",
-    "rgb(255,204,128)",
-    "rgb(239,154,154)",
-    "rgb(244,143,177)",
-    "rgb(206,147,216)",
-    "rgb(179,157,219)",
-    "rgb(159,168,218)",
-    "rgb(144,202,249)",
-    "rgb(128,222,234)",
-    "rgb(128,203,196)",
-    "rgb(165,214,167)",
-    "rgb(197,225,165)",
-    "rgb(255,205,210)",
-    "rgb(225,190,231)",
-    "rgb(187,222,251)",
-    "rgb(178,235,242)",
-    "rgb(200,230,201)",
-    "rgb(255,236,179)",
-    "rgb(255,255,255)"
-];
-const LIGHT_RAINBOW = `conic-gradient(
-  from 0deg,
-  rgb(244,67,54) 0deg,
-  rgb(255,152,0) 30deg,
-  rgb(255,235,59) 60deg,
-  rgb(76,175,80) 120deg,
-  rgb(0,188,212) 180deg,
-  rgb(63,81,181) 240deg,
-  rgb(156,39,176) 300deg,
-  rgb(244,67,54) 360deg
-)`;
-const DARK_RAINBOW = `conic-gradient(
-  from 0deg,
-  rgb(239,154,154) 0deg,
-  rgb(255,204,128) 30deg,
-  rgb(255,245,157) 60deg,
-  rgb(165,214,167) 120deg,
-  rgb(128,222,234) 180deg,
-  rgb(159,168,218) 240deg,
-  rgb(206,147,216) 300deg,
-  rgb(239,154,154) 360deg
-)`;
-function buildColors(rgbs) {
-    return LAYOUT.map((layout, i)=>createColorItem(layout.id, rgbs[i], layout.offsetX, layout.offsetY, layout.isCenter ? {
-            isCenter: true
-        } : void 0));
-}
-const CENTER_INDEX = LAYOUT.findIndex((l)=>l.isCenter);
-const MAX_RADIUS = Math.max(...LAYOUT.map((l)=>Math.sqrt(l.offsetX ** 2 + l.offsetY ** 2)));
-const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
-const MAX_WAVE_DELAY = 0.12;
-const ColorWheelFlower = (props)=>{
-    const [local] = splitProps(props, [
-        "class",
-        "className"
-    ]);
-    const context = useColorPickerContext();
-    const [selectedIndex, setSelectedIndex] = createSignal(null);
-    const [hoveredIndex, setHoveredIndex] = createSignal(null);
-    const [pressedIndex, setPressedIndex] = createSignal(null);
-    const [pointer, setPointer] = createSignal({
-        x: 0,
-        y: 0,
-        active: false
-    });
-    const [pulseState, setPulseState] = createSignal(null);
-    const [currentTheme, setCurrentTheme] = createSignal("u" > typeof document ? document.documentElement.getAttribute("data-theme") ?? "light" : "light");
-    if ("u" > typeof window) {
-        const observer = new MutationObserver(()=>{
-            const t = document.documentElement.getAttribute("data-theme");
-            setCurrentTheme("dark" === t ? "dark" : "light");
-        });
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: [
-                "data-theme"
-            ]
-        });
-        onCleanup(()=>observer.disconnect());
-    }
-    const colors = createMemo(()=>buildColors("dark" === currentTheme() ? DARK_RGBS : LIGHT_RGBS));
-    const rainbowGradient = ()=>"dark" === currentTheme() ? DARK_RAINBOW : LIGHT_RAINBOW;
-    const reduceMotion = prefersReducedMotion();
-    const ringTransition = reduceMotion ? {
-        duration: 0
-    } : {
-        duration: motionDurations.slow,
-        easing: motionEasings.inOut
-    };
-    const hoverLift = reduceMotion ? 0 : motionDistances.sm;
-    const pressScale = 0.96;
-    const pulseScale = 1.12;
-    let containerRef;
-    let pointerTimeout;
-    let pulseTimeout;
-    let outerRingRef;
-    let outerRingControl = null;
-    const closestIndex = createMemo(()=>{
-        const current = context.color();
-        const items = colors();
-        if (current.hsl.s <= 6 && current.hsl.l >= 95 && CENTER_INDEX >= 0) return CENTER_INDEX;
-        let closest = 0;
-        let bestScore = 1 / 0;
-        for(let index = 0; index < items.length; index += 1){
-            const item = items[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 = 2.0 * hueDelta + +saturationDelta + 0.1 * lightnessDelta;
-            if (score < bestScore) {
-                bestScore = score;
-                closest = index;
-            }
-        }
-        return closest;
-    });
-    const visualSelectedIndex = 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 items = colors();
-        const index = items.findIndex((item)=>item.hex === selectedHex.toUpperCase());
-        if (index < 0) return;
-        triggerPulse(index);
-        const selected = selectedIndex();
-        const item = items[index];
-        if (selected === index && !item.isCenter) {
-            setSelectedIndex(null);
-            context.onChange(createColorFromHsl(0, 0, 100, context.color().hsl.a));
-            return;
-        }
-        setSelectedIndex(index);
-        if (item.isCenter) return void context.onChange(createColorFromHsl(0, 0, 100, context.color().hsl.a));
-        const alpha = context.color().hsl.a;
-        context.onChange({
-            rgb: {
-                r: item.r,
-                g: item.g,
-                b: item.b,
-                a: alpha
-            },
-            hsl: {
-                h: item.hue,
-                s: item.saturation,
-                l: item.lightness,
-                a: alpha
-            },
-            hex: item.hex
-        });
-    };
-    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 rainbowGradient();
-        const color = colors()[selected];
-        return `conic-gradient(${color.rgb}, ${color.rgb})`;
-    };
-    const outerRingTarget = 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 = 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)}`;
-    });
-    createEffect(()=>{
-        if (!outerRingRef) return;
-        const target = outerRingTarget();
-        outerRingControl?.stop();
-        outerRingControl = runMotion(outerRingRef, readMotionState(outerRingRef), target, ringTransition);
-    });
-    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$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
-        var _ref$ = containerRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$) : containerRef = _el$;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, clsx({
-                    [CLASSES.flag.disabled]: context.disabled()
-                }), local.class, local.className)
-            }), {
-            onMouseMove: handlePointerMove,
-            onMouseLeave: handlePointerLeave,
-            "data-slot": "color-wheel-flower",
-            get ["data-disabled"] () {
-                return context.disabled() ? "true" : "false";
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.rings
-            })), false, true);
-        spread(_el$3, mergeProps(()=>({
-                class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.outer)
-            })), false, true);
-        var _ref$2 = outerRingRef;
-        "function" == typeof _ref$2 ? use(_ref$2, _el$4) : outerRingRef = _el$4;
-        spread(_el$4, mergeProps(()=>({
-                class: twMerge(CLASSES.ring.base, CLASSES.ring.outer)
-            }), {
-            get style () {
-                return {
-                    background: outerRingBackground(),
-                    "box-shadow": outerRingGlow(),
-                    transition: reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out"
-                };
-            }
-        }), false, false);
-        spread(_el$5, mergeProps(()=>({
-                class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.inner)
-            })), false, true);
-        spread(_el$6, mergeProps(()=>({
-                class: twMerge(CLASSES.ring.base, CLASSES.ring.inner)
-            })), false, false);
-        insert(_el$, createComponent(color_swatch_picker, mergeProps(()=>({
-                class: CLASSES.picker
-            }), {
-            get value () {
-                return pickerValue();
-            },
-            onChange: handlePickerChange,
-            get isDisabled () {
-                return context.disabled();
-            },
-            "aria-label": "Flower color palette",
-            get children () {
-                return createComponent(For, {
-                    get each () {
-                        return colors();
-                    },
-                    children: (item, index)=>{
-                        let motionRef;
-                        let dotControl = null;
-                        const isHovered = ()=>hoveredIndex() === index();
-                        const isPressed = ()=>pressedIndex() === index();
-                        const isPulsing = ()=>pulseState()?.index === index();
-                        const dotBaseTarget = createMemo(()=>{
-                            if (context.disabled()) return {
-                                opacity: 0.5,
-                                scale: 1,
-                                x: 0,
-                                y: 0
-                            };
-                            const pointerState = pointer();
-                            const anchorIdx = hoveredIndex();
-                            let scale = 1;
-                            let offsetX = 0;
-                            let offsetY = 0;
-                            if (null !== anchorIdx && pointerState.active) {
-                                const anchor = colors()[anchorIdx];
-                                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 = createMemo(()=>{
-                            const base = dotBaseTarget();
-                            let scale = base.scale ?? 1;
-                            if (isPulsing()) scale *= pulseScale;
-                            if (isPressed()) scale *= pressScale;
-                            return {
-                                ...base,
-                                scale
-                            };
-                        });
-                        const glowOpacity = 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 anchorIdx = hoveredIndex();
-                            const pointerState = pointer();
-                            let delay = 0;
-                            if (null !== anchorIdx && pointerState.active) {
-                                const anchor = colors()[anchorIdx];
-                                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: motionDurations.fast,
-                                easing: easeOutBack(1.25)
-                            };
-                            if (isHovered()) return {
-                                duration: motionDurations.fast,
-                                easing: motionEasings.out,
-                                delay
-                            };
-                            return {
-                                duration: motionDurations.base,
-                                easing: motionEasings.out,
-                                delay
-                            };
-                        };
-                        createEffect(()=>{
-                            if (!motionRef) return;
-                            const target = dotTarget();
-                            const transition = dotTransition();
-                            dotControl?.stop();
-                            dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);
-                        });
-                        onCleanup(()=>{
-                            dotControl?.stop();
-                        });
-                        return (()=>{
-                            var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-                            spread(_el$7, mergeProps(()=>({
-                                    class: CLASSES.dot.base
-                                }), {
-                                get style () {
-                                    return {
-                                        left: `calc(50% + ${item.offsetX}px)`,
-                                        top: `calc(50% + ${item.offsetY}px)`
-                                    };
-                                }
-                            }), false, true);
-                            spread(_el$8, mergeProps(()=>({
-                                    class: CLASSES.dot.frame
-                                })), false, true);
-                            use((el)=>{
-                                motionRef = el;
-                            }, _el$9);
-                            spread(_el$9, mergeProps(()=>({
-                                    class: CLASSES.dot.motion
-                                })), false, true);
-                            spread(_el$0, mergeProps(()=>({
-                                    class: CLASSES.halo
-                                }), {
-                                get style () {
-                                    return {
-                                        opacity: glowOpacity(),
-                                        "box-shadow": `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`,
-                                        transition: reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out"
-                                    };
-                                }
-                            }), false, false);
-                            insert(_el$9, createComponent(color_swatch, mergeProps({
-                                get color () {
-                                    return item.hex;
-                                },
-                                size: "lg"
-                            }, ()=>({
-                                    class: twMerge(CLASSES.swatch.base, item.isCenter && CLASSES.swatch.center)
-                                }), {
-                                get colorName () {
-                                    return memo(()=>!!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$1);
-                            spread(_el$1, mergeProps(()=>({
-                                    class: clsx(CLASSES.highlight.base, isHovered() && CLASSES.highlight.hovered, isPulsing() && CLASSES.highlight.pulsing)
-                                })), false, false);
-                            return _el$7;
-                        })();
-                    }
-                });
-            }
-        })), null);
-        return _el$;
-    })();
-};
-const color_wheel_flower_ColorWheelFlower = ColorWheelFlower;
-export default color_wheel_flower_ColorWheelFlower;