@pathscale/ui 2.5.0 → 2.6.0

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

@@ -1,9 +1,9 @@
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorWheelFlower.css";
-import { For, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { For, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../lib/twMerge.js";
 import color_swatch from "../color-swatch/index.js";
 import color_swatch_picker from "../color-swatch-picker/index.js";
 import { useColorPickerContext } from "./colorWheelFlowerContext.js";
@@ -284,11 +284,6 @@ const MAX_RADIUS = Math.max(...LAYOUT.map((l)=>Math.sqrt(l.offsetX ** 2 + l.offs
 const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
 const MAX_WAVE_DELAY = 0.12;
 const __solidLayoutColorWheelFlower = (_stable, p)=>{
-    const [local] = splitProps(p, [
-        "class",
-        "mode",
-        "palette"
-    ]);
     const context = useColorPickerContext();
     const [selectedIndex, setSelectedIndex] = createSignal(null);
     const [hoveredIndex, setHoveredIndex] = createSignal(null);
@@ -313,8 +308,8 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         });
         onCleanup(()=>observer.disconnect());
     }
-    const mode = ()=>local.mode ?? currentTheme();
-    const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), local.palette)));
+    const mode = ()=>p.mode ?? currentTheme();
+    const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), p.palette)));
     const rainbowGradient = ()=>{
         const outer = colors().slice(0, 12);
         const stops = outer.map((item, index)=>`${item.rgb} ${index / outer.length * 360}deg`);
@@ -409,8 +404,9 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         if (!isNearColor(current, selectedItem)) setSelectedIndex(null);
     });
     const handlePointerMove = (event)=>{
-        if (!containerRef) return;
-        const rect = containerRef.getBoundingClientRect();
+        const node = containerRef;
+        if (!node) return;
+        const rect = node.getBoundingClientRect();
         const x = event.clientX - rect.left - rect.width / 2;
         const y = event.clientY - rect.top - rect.height / 2;
         setPointer({
@@ -466,10 +462,11 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
     });
     createEffect(()=>{
-        if (!outerRingRef) return;
+        const node = outerRingRef;
+        if (!node) return;
         const target = outerRingTarget();
         outerRingControl?.stop();
-        outerRingControl = runMotion(outerRingRef, readMotionState(outerRingRef), target, ringTransition);
+        outerRingControl = runMotion(node, readMotionState(node), target, ringTransition);
     });
     onCleanup(()=>{
         outerRingControl?.stop();
@@ -477,246 +474,242 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         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)
-            }), {
-            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 state () {
-                return context.disabled() ? "disabled" : void 0;
-            },
-            "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;
-                                }
+    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$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : containerRef = _el$;
+    spread(_el$, mergeProps(()=>({
+            class: twMerge(CLASSES.base, clsx({
+                [CLASSES.flag.disabled]: context.disabled()
+            }), p.class)
+        }), {
+        onMouseMove: handlePointerMove,
+        onMouseLeave: handlePointerLeave,
+        "data-slot": "color-wheel-flower",
+        get ["data-color-mode"] () {
+            return mode();
+        },
+        get ["data-disabled"] () {
+            return context.disabled() ? "true" : "false";
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>({
+            class: CLASSES.rings
+        })), true);
+    spread(_el$3, mergeProps(()=>({
+            class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.outer)
+        })), true);
+    var _ref$2 = outerRingRef;
+    "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_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);
+    spread(_el$5, mergeProps(()=>({
+            class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.inner)
+        })), true);
+    spread(_el$6, mergeProps(()=>({
+            class: twMerge(CLASSES.ring.base, CLASSES.ring.inner)
+        })), false);
+    insert(_el$, createComponent(color_swatch_picker, mergeProps(()=>({
+            class: CLASSES.picker
+        }), {
+        get value () {
+            return pickerValue();
+        },
+        onChange: handlePickerChange,
+        get state () {
+            return context.disabled() ? "disabled" : void 0;
+        },
+        "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();
+                    });
+                    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 {
-                                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
+                                left: `calc(50% + ${item.offsetX}px)`,
+                                top: `calc(50% + ${item.offsetY}px)`
                             };
+                        }
+                    }), true);
+                    spread(_el$8, mergeProps(()=>({
+                            class: CLASSES.dot.frame
+                        })), true);
+                    ref(()=>(el)=>{
+                            motionRef = el;
+                        }, _el$9);
+                    spread(_el$9, mergeProps(()=>({
+                            class: CLASSES.dot.motion
+                        })), true);
+                    spread(_el$0, mergeProps(()=>({
+                            class: CLASSES.halo
+                        }), {
+                        get style () {
                             return {
-                                duration: motionDurations.base,
-                                easing: motionEasings.out,
-                                delay
+                                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"
                             };
-                        };
-                        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 state () {
-                                    return context.disabled() ? "disabled" : void 0;
-                                },
-                                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$;
-    })();
+                        }
+                    }), 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 state () {
+                            return context.disabled() ? "disabled" : void 0;
+                        },
+                        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);
+                    return _el$7;
+                }
+            });
+        }
+    })), null);
+    return _el$;
 };
 const ColorWheelFlower = defineComponent({
     recipe: componentRecipe,

package/dist/components/color-wheel-flower/ColorWheelFlower.recipe.d.ts

@@ -31,7 +31,7 @@ export declare const CLASSES: {
         readonly pulsing: "color-wheel-flower__highlight--pulsing";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "color-wheel-flower";
     readonly slots: {
         readonly "color-wheel-flower": {};

package/dist/components/combo-box/ComboBox.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ComboBox.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type ComboBoxVariant = "primary" | "secondary";
 export type ComboBoxMenuTrigger = "focus" | "input" | "manual";