@pathscale/ui 0.0.111 → 0.0.112

package/dist/index.js

@@ -7148,7 +7148,7 @@ const runMotion = (el, from, to, transition, onComplete)=>{
         }
     };
 };
-var ColorWheelFlower_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">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="w-[32px] h-[32px]"><button type=button><span>');
+var ColorWheelFlower_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">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="relative w-[32px] h-[32px]"><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 {
@@ -7218,6 +7218,11 @@ const getLiftOffset = (item, 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 COLORS = [
     createColorItem("rgb(245,245,61)", 34.641, -20),
     createColorItem("rgb(245,153,61)", 20, -34.641),
@@ -7239,6 +7244,8 @@ const COLORS = [
     createColorItem("rgb(217,240,194)", 20, 0),
     createColorItem("rgb(255,255,255)", 0, 0)
 ];
+const MAX_WAVE_DISTANCE = 2 * Math.max(...COLORS.map((item)=>Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2)));
+const MAX_WAVE_DELAY = 0.12;
 const RAINBOW_GRADIENT = `conic-gradient(
   from 0deg,
   rgb(245,61,61) 0deg,
@@ -7254,21 +7261,17 @@ const ColorWheelFlower = (props)=>{
     const context = 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 reduceMotion = prefersReducedMotion();
-    const dotTransition = reduceMotion ? {
-        duration: 0
-    } : {
-        duration: motionDurations.fast,
-        easing: motionEasings.out
-    };
     const ringTransition = reduceMotion ? {
         duration: 0
     } : {
-        duration: motionDurations.base,
-        easing: motionEasings.out
+        duration: motionDurations.slow,
+        easing: motionEasings.inOut
     };
-    const hoverLift = reduceMotion ? 0 : motionDistances.sm / 2;
-    const selectLift = reduceMotion ? 0 : motionDistances.sm;
+    const hoverLift = reduceMotion ? 0 : motionDistances.sm;
+    const selectLift = reduceMotion ? 0 : motionDistances.md;
+    const pressScale = 0.96;
     let outerRingRef;
     let outerRingControl = null;
     const handleDotClick = (index)=>{
@@ -7298,17 +7301,24 @@ const ColorWheelFlower = (props)=>{
         };
         if (null !== selectedIndex()) return {
             opacity: 1,
-            scale: 1.04
+            scale: 1.06
         };
         if (null !== hoveredIndex()) return {
-            opacity: 0.96,
-            scale: 1.02
+            opacity: 0.98,
+            scale: 1.03
         };
         return {
-            opacity: 0.9,
+            opacity: 0.92,
             scale: 1
         };
     });
+    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 12px rgba(255,255,255,0.12)";
+        const color = COLORS[idx].rgb;
+        return `0 0 12px rgba(255,255,255,0.35), 0 0 28px ${color}`;
+    });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!outerRingRef) return;
         const target = outerRingTarget();
@@ -7323,7 +7333,7 @@ const ColorWheelFlower = (props)=>{
         _el$3.style.setProperty("transform", "scale(1.1)");
         var _ref$ = outerRingRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : outerRingRef = _el$4;
-        _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 500ms ease-out");
+        _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, {
@@ -7333,9 +7343,10 @@ const ColorWheelFlower = (props)=>{
                 let dotControl = null;
                 const isSelected = ()=>selectedIndex() === index();
                 const isHovered = ()=>hoveredIndex() === index();
+                const isPressed = ()=>pressedIndex() === index();
                 const hasSelection = ()=>null !== selectedIndex();
                 const hasHover = ()=>null !== hoveredIndex();
-                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                const dotBaseTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
                     if (context.disabled()) return {
                         opacity: 0.5,
                         scale: 1,
@@ -7361,68 +7372,131 @@ const ColorWheelFlower = (props)=>{
                         };
                     }
                     if (hasSelection()) return {
-                        opacity: 0.65,
-                        scale: 0.92,
+                        opacity: 1,
+                        scale: 0.98,
                         x: 0,
                         y: 0
                     };
                     if (hasHover()) return {
-                        opacity: 0.85,
-                        scale: 0.96,
+                        opacity: 1,
+                        scale: 0.99,
                         x: 0,
                         y: 0
                     };
                     return {
-                        opacity: 0.95,
+                        opacity: 1,
                         scale: 1,
                         x: 0,
                         y: 0
                     };
                 });
+                const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    const base = dotBaseTarget();
+                    if (!isPressed()) return base;
+                    return {
+                        ...base,
+                        scale: (base.scale ?? 1) * pressScale
+                    };
+                });
+                const glowOpacity = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                    if (context.disabled()) return 0;
+                    if (isHovered()) return 1;
+                    if (isSelected()) return 0.75;
+                    return 0;
+                });
+                const dotTransition = ()=>{
+                    if (reduceMotion) return {
+                        duration: 0
+                    };
+                    const anchorIndex = hoveredIndex() ?? selectedIndex();
+                    let delay = 0;
+                    if (null !== anchorIndex) {
+                        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 (isSelected()) return {
+                        duration: motionDurations.fast,
+                        easing: easeOutBack(1.25),
+                        delay
+                    };
+                    if (isHovered()) return {
+                        duration: motionDurations.fast,
+                        easing: motionEasings.out,
+                        delay
+                    };
+                    return {
+                        duration: motionDurations.base,
+                        easing: motionEasings.out,
+                        delay
+                    };
+                };
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
                     if (!motionRef) return;
                     const target = dotTarget();
+                    const transition = dotTransition();
                     dotControl?.stop();
-                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, dotTransition);
+                    dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);
                 });
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
                     dotControl?.stop();
                 });
                 return (()=>{
-                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild;
+                    var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
                     _el$8.style.setProperty("transform", "translate(-50%, -50%)");
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
                         motionRef = el;
                     }, _el$9);
-                    _el$0.addEventListener("blur", ()=>{
+                    _el$0.style.setProperty("top", "-5px");
+                    _el$0.style.setProperty("left", "-5px");
+                    _el$0.style.setProperty("right", "-5px");
+                    _el$0.style.setProperty("bottom", "-5px");
+                    _el$0.style.setProperty("background", "radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 65%)");
+                    _el$0.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
+                    _el$1.addEventListener("pointercancel", ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    });
+                    _el$1.addEventListener("pointerleave", ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    });
+                    _el$1.$$pointerup = ()=>{
+                        if (!context.disabled()) setPressedIndex(null);
+                    };
+                    _el$1.$$pointerdown = ()=>{
+                        if (!context.disabled()) setPressedIndex(index());
+                    };
+                    _el$1.addEventListener("blur", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$0.addEventListener("focus", ()=>{
+                    _el$1.addEventListener("focus", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$0.addEventListener("mouseleave", ()=>{
+                    _el$1.addEventListener("mouseleave", ()=>{
                         if (!context.disabled()) setHoveredIndex(null);
                     });
-                    _el$0.addEventListener("mouseenter", ()=>{
+                    _el$1.addEventListener("mouseenter", ()=>{
                         if (!context.disabled()) setHoveredIndex(index());
                     });
-                    _el$0.$$click = ()=>handleDotClick(index());
-                    _el$0.style.setProperty("box-shadow", "0 2px 8px rgba(0,0,0,0.3)");
-                    _el$1.style.setProperty("mix-blend-mode", "overlay");
+                    _el$1.$$click = ()=>handleDotClick(index());
+                    _el$1.style.setProperty("transition", reduceMotion ? "none" : "box-shadow 200ms ease-out");
+                    _el$10.style.setProperty("mix-blend-mode", "overlay");
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                        var _v$3 = `calc(50% + ${item.offsetX}px)`, _v$4 = `calc(50% + ${item.offsetY}px)`, _v$5 = context.disabled() ? -1 : 0, _v$6 = 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", {
+                        var _v$4 = `calc(50% + ${item.offsetX}px)`, _v$5 = `calc(50% + ${item.offsetY}px)`, _v$6 = glowOpacity(), _v$7 = `0 0 16px ${item.rgb}, 0 0 6px rgba(255,255,255,0.6)`, _v$8 = context.disabled() ? -1 : 0, _v$9 = 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$7 = item.rgb, _v$8 = `Select color ${item.rgb}`, _v$9 = selectedIndex() === index(), _v$0 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$1 = selectedIndex() === index() ? "1" : "0";
-                        _v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$8.style.setProperty("left", _v$3) : _el$8.style.removeProperty("left"));
-                        _v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$8.style.setProperty("top", _v$4) : _el$8.style.removeProperty("top"));
-                        _v$5 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "tabindex", _p$.a = _v$5);
-                        _v$6 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.o = _v$6);
-                        _v$7 !== _p$.i && (null != (_p$.i = _v$7) ? _el$0.style.setProperty("background", _v$7) : _el$0.style.removeProperty("background"));
-                        _v$8 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-label", _p$.n = _v$8);
-                        _v$9 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-pressed", _p$.s = _v$9);
-                        _v$0 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.h = _v$0);
-                        _v$1 !== _p$.r && (null != (_p$.r = _v$1) ? _el$1.style.setProperty("opacity", _v$1) : _el$1.style.removeProperty("opacity"));
+                        }), _v$0 = item.rgb, _v$1 = isSelected() ? "0 6px 16px rgba(0,0,0,0.35)" : isHovered() ? "0 4px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.3)", _v$10 = `Select color ${item.rgb}`, _v$11 = selectedIndex() === index(), _v$12 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$13 = selectedIndex() === index() ? "1" : "0";
+                        _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$0.style.setProperty("opacity", _v$6) : _el$0.style.removeProperty("opacity"));
+                        _v$7 !== _p$.o && (null != (_p$.o = _v$7) ? _el$0.style.setProperty("box-shadow", _v$7) : _el$0.style.removeProperty("box-shadow"));
+                        _v$8 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "tabindex", _p$.i = _v$8);
+                        _v$9 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.n = _v$9);
+                        _v$0 !== _p$.s && (null != (_p$.s = _v$0) ? _el$1.style.setProperty("background", _v$0) : _el$1.style.removeProperty("background"));
+                        _v$1 !== _p$.h && (null != (_p$.h = _v$1) ? _el$1.style.setProperty("box-shadow", _v$1) : _el$1.style.removeProperty("box-shadow"));
+                        _v$10 !== _p$.r && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-label", _p$.r = _v$10);
+                        _v$11 !== _p$.d && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "aria-pressed", _p$.d = _v$11);
+                        _v$12 !== _p$.l && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$10, _p$.l = _v$12);
+                        _v$13 !== _p$.u && (null != (_p$.u = _v$13) ? _el$10.style.setProperty("opacity", _v$13) : _el$10.style.removeProperty("opacity"));
                         return _p$;
                     }, {
                         e: void 0,
@@ -7433,27 +7507,34 @@ const ColorWheelFlower = (props)=>{
                         n: void 0,
                         s: void 0,
                         h: void 0,
-                        r: void 0
+                        r: void 0,
+                        d: void 0,
+                        l: void 0,
+                        u: void 0
                     });
                     return _el$8;
                 })();
             }
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = containerClasses(), _v$2 = outerRingBackground();
+            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
+            t: void 0,
+            a: void 0
         });
         return _el$;
     })();
 };
 const colorpicker_ColorWheelFlower = ColorWheelFlower;
 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
+    "click",
+    "pointerdown",
+    "pointerup"
 ]);
 const ColorPickerFlowerSelector_ColorPickerFlowerSelector = ()=>[
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorWheelFlower, {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "author": "pathscale",
   "repository": {
     "type": "git",