@pathscale/ui 1.3.1 → 1.4.0

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

@@ -0,0 +1,728 @@
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+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, parseColor, rgbToHex, rgbToHsl } from "./ColorUtils.js";
+import { resolveColorWheelFlowerPalette } from "./ColorWheelFlower.palette.js";
+import { motionDistances, motionDurations, motionEasings, prefersReducedMotion, runMotion } from "../../motion/index.js";
+import { CLASSES, componentRecipe } from "./ColorWheelFlower.recipe.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, color, offsetX, offsetY, options)=>{
+    const parsed = parseColor(color) ?? parseColor("#ffffff");
+    const r = parsed?.rgb.r ?? 255;
+    const g = parsed?.rgb.g ?? 255;
+    const b = parsed?.rgb.b ?? 255;
+    const rgb = `rgb(${r},${g},${b})`;
+    const hsl = parseRgbToHsl(rgb);
+    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
+    }
+];
+function buildColors(palette) {
+    return LAYOUT.map((layout, i)=>createColorItem(layout.id, palette[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 __solidLayoutColorWheelFlower = (_stable, p)=>{
+    const [local] = splitProps(p, [
+        "class",
+        "className",
+        "mode",
+        "palette"
+    ]);
+    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 && "dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "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 mode = ()=>local.mode ?? currentTheme();
+    const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), local.palette)));
+    const rainbowGradient = ()=>{
+        const outer = colors().slice(0, 12);
+        const stops = outer.map((item, index)=>`${item.rgb} ${index / outer.length * 360}deg`);
+        stops.push(`${outer[0].rgb} 360deg`);
+        return `conic-gradient(from 0deg, ${stops.join(", ")})`;
+    };
+    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-color-mode"] () {
+                return mode();
+            },
+            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 ColorWheelFlower = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutColorWheelFlower,
+    embedded: true
+});
+const ColorWheelFlower_generated = ColorWheelFlower;
+export default ColorWheelFlower_generated;