@pathscale/ui 0.0.147 → 0.0.149

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -1,6 +1,8 @@
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
+export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+    blur?: GlassPanelBlur;
     collapsible?: boolean;
     open?: boolean;
     defaultOpen?: boolean;

package/dist/components/glass-panel/index.d.ts

@@ -1 +1 @@
-export { default, type GlassPanelProps } from "./GlassPanel";
+export { default, type GlassPanelProps, type GlassPanelBlur } from "./GlassPanel";

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection } from
 export { default as Flex } from "./components/flex";
 export { default as GlassPanel } from "./components/glass-panel";
 export { GlowCard, type GlowCardProps } from "./components/glow-card";
-export type { GlassPanelProps } from "./components/glass-panel";
+export type { GlassPanelProps, GlassPanelBlur } from "./components/glass-panel";
 export { default as Footer } from "./components/footer";
 export type { FooterProps, FooterTitleProps } from "./components/footer";
 export { FormActions, type FormActionsProps } from "./components/form-actions";

package/dist/index.js

@@ -10431,64 +10431,8 @@ const FloatingDock_DockItem = (props)=>{
     let iconRef;
     const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const cfg = props.cfg;
-    const sW = createSpring(cfg.baseSize, cfg.springOpts);
-    const sH = createSpring(cfg.baseSize, cfg.springOpts);
-    const sIW = createSpring(cfg.iconSize, cfg.springOpts);
-    const sIH = createSpring(cfg.iconSize, cfg.springOpts);
-    let rafId;
-    let prevTime = 0;
-    let lastMousePos = 1 / 0;
-    let loopRunning = false;
-    const startLoop = ()=>{
-        if (loopRunning || !cfg.magnify) return;
-        loopRunning = true;
-        prevTime = 0;
-        rafId = requestAnimationFrame(tick);
-    };
-    const stopLoop = ()=>{
-        if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        rafId = void 0;
-        loopRunning = false;
-    };
-    const tick = (time)=>{
-        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
-        prevTime = time;
-        const mp = props.mousePos();
-        if (mp !== lastMousePos) {
-            lastMousePos = mp;
-            if (wrapRef) {
-                const b = wrapRef.getBoundingClientRect();
-                const isH = "horizontal" === cfg.orientation;
-                const center = isH ? b.x + b.width / 2 : b.y + b.height / 2;
-                const dist = Math.abs(mp - center);
-                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
-                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
-                sW.set(ts);
-                sH.set(ts);
-                sIW.set(ti);
-                sIH.set(ti);
-            }
-        }
-        sW.step(dt);
-        sH.step(dt);
-        sIW.step(dt);
-        sIH.step(dt);
-        if (wrapRef) {
-            wrapRef.style.width = `${sW.get()}px`;
-            wrapRef.style.height = `${sH.get()}px`;
-        }
-        if (iconRef) {
-            iconRef.style.width = `${sIW.get()}px`;
-            iconRef.style.height = `${sIH.get()}px`;
-        }
-        if (sW.settled() && sH.settled() && sIW.settled() && sIH.settled()) return void stopLoop();
-        rafId = requestAnimationFrame(tick);
-    };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        startLoop();
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        stopLoop();
+        if (wrapRef && iconRef) props.registerRefs(wrapRef, iconRef);
     });
     const handleClick = (e)=>{
         if (props.item.onClick) {
@@ -10499,10 +10443,7 @@ const FloatingDock_DockItem = (props)=>{
     const inner = (()=>{
         var _el$ = FloatingDock_tmpl$2(), _el$3 = _el$.firstChild;
         _el$.addEventListener("mouseleave", ()=>setHovered(false));
-        _el$.addEventListener("mouseenter", ()=>{
-            setHovered(true);
-            startLoop();
-        });
+        _el$.addEventListener("mouseenter", ()=>setHovered(true));
         var _ref$ = wrapRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -10570,6 +10511,82 @@ const FloatingDock_DockItem = (props)=>{
 const FloatingDockDesktop = (props)=>{
     const [mousePos, setMousePos] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(1 / 0);
     const isH = ()=>"horizontal" === props.cfg.orientation;
+    const cfg = props.cfg;
+    const itemSprings = [];
+    let rafId;
+    let prevTime = 0;
+    let lastMousePos = 1 / 0;
+    let loopRunning = false;
+    const startLoop = ()=>{
+        if (loopRunning || !cfg.magnify) return;
+        loopRunning = true;
+        prevTime = 0;
+        rafId = requestAnimationFrame(tick);
+    };
+    const stopLoop = ()=>{
+        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+        rafId = void 0;
+        loopRunning = false;
+    };
+    const tick = (time)=>{
+        const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
+        prevTime = time;
+        const mp = mousePos();
+        if (mp !== lastMousePos) {
+            lastMousePos = mp;
+            const centers = [];
+            for(let i = 0; i < itemSprings.length; i++){
+                const wrap = itemSprings[i].wrapRef;
+                if (wrap) {
+                    const b = wrap.getBoundingClientRect();
+                    centers[i] = isH() ? b.x + b.width / 2 : b.y + b.height / 2;
+                } else centers[i] = 0;
+            }
+            for(let i = 0; i < itemSprings.length; i++){
+                const s = itemSprings[i];
+                if (!s.wrapRef) continue;
+                const dist = Math.abs(mp - centers[i]);
+                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
+                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(dist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
+                s.sW.set(ts);
+                s.sH.set(ts);
+                s.sIW.set(ti);
+                s.sIH.set(ti);
+            }
+        }
+        let allSettled = true;
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            s.sW.step(dt);
+            s.sH.step(dt);
+            s.sIW.step(dt);
+            s.sIH.step(dt);
+            if (allSettled && !(s.sW.settled() && s.sH.settled() && s.sIW.settled() && s.sIH.settled())) allSettled = false;
+        }
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            if (s.wrapRef) {
+                s.wrapRef.style.width = `${s.sW.get()}px`;
+                s.wrapRef.style.height = `${s.sH.get()}px`;
+            }
+            if (s.iconRef) {
+                s.iconRef.style.width = `${s.sIW.get()}px`;
+                s.iconRef.style.height = `${s.sIH.get()}px`;
+            }
+        }
+        if (allSettled) return void stopLoop();
+        rafId = requestAnimationFrame(tick);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!cfg.magnify) return;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+            mousePos();
+            startLoop();
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopLoop();
+    });
     return (()=>{
         var _el$6 = FloatingDock_tmpl$5();
         _el$6.addEventListener("mouseleave", ()=>setMousePos(1 / 0));
@@ -10578,23 +10595,33 @@ const FloatingDockDesktop = (props)=>{
             get each () {
                 return props.items;
             },
-            children: (item)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
+            children: (item, idx)=>{
+                const springs = {
+                    sW: createSpring(cfg.baseSize, cfg.springOpts),
+                    sH: createSpring(cfg.baseSize, cfg.springOpts),
+                    sIW: createSpring(cfg.iconSize, cfg.springOpts),
+                    sIH: createSpring(cfg.iconSize, cfg.springOpts)
+                };
+                itemSprings[idx()] = springs;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDock_DockItem, {
                     item: item,
-                    mousePos: mousePos,
-                    get cfg () {
-                        return props.cfg;
+                    cfg: cfg,
+                    registerRefs: (wrap, icon)=>{
+                        springs.wrapRef = wrap;
+                        springs.iconRef = icon;
                     }
-                })
+                });
+            }
         }));
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
             var _v$6 = twMerge("mx-auto", "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "px-4 py-2", !isH() && props.showContainer && "py-4 px-2", props.class), _v$7 = {
                 display: "flex",
                 "flex-direction": isH() ? "row" : "column",
-                gap: `${props.cfg.gap}px`,
+                gap: `${cfg.gap}px`,
                 ...isH() ? {
-                    height: `${props.cfg.baseSize + 16}px`
+                    height: `${cfg.baseSize + 16}px`
                 } : {
-                    width: `${props.cfg.baseSize + 16}px`
+                    width: `${cfg.baseSize + 16}px`
                 },
                 overflow: "visible"
             };
@@ -10838,6 +10865,14 @@ const floating_dock_FloatingDock = FloatingDock;
     "mousemove"
 ]);
 var GlassPanel_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex w-full items-center justify-between gap-2 px-4 py-3 text-sm font-medium cursor-pointer select-none transition-colors duration-150 text-base-content/50 hover:text-base-content/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="flex items-center gap-2"></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), GlassPanel_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="grid transition-[grid-template-rows] duration-200 ease-in-out"><div>');
+const BLUR_MAP = {
+    none: "",
+    sm: "backdrop-blur-sm",
+    md: "backdrop-blur-md",
+    lg: "backdrop-blur-lg",
+    xl: "backdrop-blur-xl",
+    "2xl": "backdrop-blur-2xl"
+};
 const SIZE_PADDING = {
     xs: "p-2",
     sm: "p-3",
@@ -10858,6 +10893,7 @@ const ACCENT_BORDER = {
 };
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "blur",
         "collapsible",
         "open",
         "defaultOpen",
@@ -10875,6 +10911,7 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const blur = ()=>local.blur ?? "none";
     const size = ()=>local.size ?? "md";
     const isControlled = ()=>void 0 !== local.open;
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
@@ -10884,7 +10921,9 @@ const GlassPanel = (props)=>{
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>twMerge("glass-panel", "rounded-xl", "backdrop-blur-sm", "transition-all duration-200 ease-in-out", clsx({
+    const containerClasses = ()=>twMerge("glass-panel", "rounded-xl", "transition-all duration-200 ease-in-out", clsx({
+            "bg-transparent": local.transparent,
+            [BLUR_MAP[blur()]]: !local.transparent && "none" !== blur(),
             "border-l-2": !!local.accent,
             [ACCENT_BORDER[local.accent ?? ""]]: !!local.accent
         }), local.class, local.className);
@@ -10893,7 +10932,7 @@ const GlassPanel = (props)=>{
             ...local.style || {}
         };
         if (!local.transparent) {
-            base.background = "color-mix(in srgb, var(--color-base-200) 80%, transparent)";
+            base.background = "color-mix(in srgb, var(--color-base-200) 85%, transparent)";
             base.border = "1px solid color-mix(in srgb, var(--color-base-content) 8%, transparent)";
         }
         if (local.glow) base["box-shadow"] = "inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent)";

package/package.json

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