@pathscale/ui 0.0.161 → 0.0.163

package/dist/components/floating-dock/FloatingDock.js

@@ -0,0 +1,550 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center justify-center shrink-0">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="appearance-none bg-transparent border-0 p-0 cursor-pointer">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><button type=button class="flex items-center justify-center rounded-full bg-base-200 cursor-pointer border-0 p-0">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex items-center justify-center rounded-full bg-base-100 cursor-pointer border-0 p-0">'), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=animate-fade-in>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<a class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center justify-center rounded-full bg-base-100">'), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5 text-base-content/60"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
+const prefersReducedMotion = "undefined" != typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function createSpring(initial, opts = {}) {
+    const mass = opts.mass ?? 1;
+    const stiffness = opts.stiffness ?? 150;
+    const damping = opts.damping ?? 12;
+    let current = initial;
+    let velocity = 0;
+    let target = initial;
+    return {
+        set (v) {
+            target = v;
+        },
+        get () {
+            return current;
+        },
+        settled () {
+            return current === target && 0 === velocity;
+        },
+        snap () {
+            current = target;
+            velocity = 0;
+        },
+        step (dt) {
+            if (prefersReducedMotion) {
+                current = target;
+                velocity = 0;
+                return;
+            }
+            const substeps = Math.ceil(dt / 0.004);
+            const subDt = dt / substeps;
+            for(let i = 0; i < substeps; i++){
+                const force = -stiffness * (current - target);
+                const accel = (force - damping * velocity) / mass;
+                velocity += accel * subDt;
+                current += velocity * subDt;
+            }
+            if (Math.abs(current - target) < 0.01 && Math.abs(velocity) < 0.01) {
+                current = target;
+                velocity = 0;
+            }
+        }
+    };
+}
+function mapRange(value, inMin, inMax, outMin, outMax) {
+    const t = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin)));
+    return outMin + t * (outMax - outMin);
+}
+const TOOLTIP_OFFSET = 8;
+function computeTooltipPos(rect, dir) {
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    switch(dir){
+        case "top":
+            return {
+                left: `${cx}px`,
+                top: `${rect.top - TOOLTIP_OFFSET}px`
+            };
+        case "bottom":
+            return {
+                left: `${cx}px`,
+                top: `${rect.bottom + TOOLTIP_OFFSET}px`
+            };
+        case "left":
+            return {
+                left: `${rect.left - TOOLTIP_OFFSET}px`,
+                top: `${cy}px`
+            };
+        case "right":
+            return {
+                left: `${rect.right + TOOLTIP_OFFSET}px`,
+                top: `${cy}px`
+            };
+    }
+}
+const TOOLTIP_TRANSFORM = {
+    top: "translate(-50%, -100%)",
+    bottom: "translate(-50%, 0)",
+    left: "translate(-100%, -50%)",
+    right: "translate(0, -50%)"
+};
+const DockItem = (props)=>{
+    let wrapRef;
+    let iconRef;
+    const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [tooltipStyle, setTooltipStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        top: "0",
+        left: "0"
+    });
+    const cfg = props.cfg;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (wrapRef && iconRef) props.registerRefs(wrapRef, iconRef);
+    });
+    const handleMouseEnter = ()=>{
+        if (wrapRef) setTooltipStyle(computeTooltipPos(wrapRef.getBoundingClientRect(), cfg.tooltipDir));
+        setHovered(true);
+    };
+    const handleClick = (e)=>{
+        if (props.item.onClick) {
+            e.preventDefault();
+            props.item.onClick(e);
+        }
+    };
+    const inner = (()=>{
+        var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+        _el$.addEventListener("mouseleave", ()=>setHovered(false));
+        _el$.addEventListener("mouseenter", handleMouseEnter);
+        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, {
+            get when () {
+                return hovered();
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
+                    get children () {
+                        var _el$2 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("fixed w-fit rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in z-[9999] pointer-events-none", cfg.tooltipClass), _v$2 = tooltipStyle().top, _v$3 = tooltipStyle().left, _v$4 = TOOLTIP_TRANSFORM[cfg.tooltipDir];
+                            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("top", _v$2) : _el$2.style.removeProperty("top"));
+                            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$2.style.setProperty("left", _v$3) : _el$2.style.removeProperty("left"));
+                            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$2.style.setProperty("transform", _v$4) : _el$2.style.removeProperty("transform"));
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0,
+                            o: void 0
+                        });
+                        return _el$2;
+                    }
+                });
+            }
+        }), _el$3);
+        var _ref$2 = iconRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$3) : iconRef = _el$3;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.icon);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$5 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative flex items-center justify-center rounded-full bg-base-200 transition-opacity duration-150 hover:opacity-100 active:opacity-60", "opacity-80", cfg.itemClass), _v$6 = `${cfg.baseSize}px`, _v$7 = `${cfg.baseSize}px`;
+            _v$5 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$5);
+            _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$.style.setProperty("width", _v$6) : _el$.style.removeProperty("width"));
+            _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$.style.setProperty("height", _v$7) : _el$.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$;
+    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return props.item.onClick;
+        },
+        get fallback () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return props.item.href;
+                },
+                fallback: inner,
+                get children () {
+                    var _el$5 = _tmpl$4();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, inner);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$8 = props.item.href, _v$9 = props.item.title;
+                        _v$8 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$8);
+                        _v$9 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$9);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0
+                    });
+                    return _el$5;
+                }
+            });
+        },
+        get children () {
+            var _el$4 = _tmpl$3();
+            _el$4.$$click = handleClick;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, inner);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "aria-label", props.item.title));
+            return _el$4;
+        }
+    });
+};
+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;
+    let anchorCenters = [];
+    const captureAnchors = ()=>{
+        anchorCenters = [];
+        for(let i = 0; i < itemSprings.length; i++){
+            const wrap = itemSprings[i].wrapRef;
+            if (wrap) {
+                const b = wrap.getBoundingClientRect();
+                anchorCenters[i] = isH() ? b.x + b.width / 2 : b.y + b.height / 2;
+            }
+        }
+    };
+    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;
+            for(let i = 0; i < itemSprings.length; i++){
+                const s = itemSprings[i];
+                if (!s.wrapRef || void 0 === anchorCenters[i]) continue;
+                const dist = Math.abs(mp - anchorCenters[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;
+        }
+        const maxScale = cfg.hoverSize / cfg.baseSize;
+        const maxIconScale = cfg.hoverIconSize / cfg.iconSize;
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            if (s.wrapRef) {
+                const scale = Math.max(0.8, Math.min(s.sW.get() / cfg.baseSize, maxScale));
+                s.wrapRef.style.transform = `scale(${scale})`;
+            }
+            if (s.iconRef) {
+                const iconScale = Math.max(0.8, Math.min(s.sIW.get() / cfg.iconSize, maxIconScale));
+                s.iconRef.style.transform = `scale(${iconScale})`;
+            }
+        }
+        if (allSettled) return void stopLoop();
+        rafId = requestAnimationFrame(tick);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopLoop();
+    });
+    return (()=>{
+        var _el$6 = _tmpl$5();
+        _el$6.addEventListener("mouseleave", ()=>{
+            setMousePos(1 / 0);
+            startLoop();
+        });
+        _el$6.$$mousemove = (e)=>{
+            setMousePos(isH() ? e.clientX : e.clientY);
+            startLoop();
+        };
+        _el$6.addEventListener("mouseenter", captureAnchors);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return props.items;
+            },
+            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)(DockItem, {
+                    item: item,
+                    cfg: cfg,
+                    registerRefs: (wrap, icon)=>{
+                        springs.wrapRef = wrap;
+                        springs.iconRef = icon;
+                    }
+                });
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$0 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mx-auto flex overflow-visible", "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$1 = {
+                "flex-direction": isH() ? "row" : "column",
+                gap: `${cfg.gap}px`,
+                ...isH() ? {
+                    height: `${cfg.baseSize + 16}px`
+                } : {
+                    width: `${cfg.baseSize + 16}px`
+                }
+            };
+            _v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$0);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$1, _p$.t);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
+        return _el$6;
+    })();
+};
+const MOBILE_POPUP = {
+    top: "absolute inset-x-0 bottom-full mb-2 flex flex-col gap-2",
+    bottom: "absolute inset-x-0 top-full mt-2 flex flex-col gap-2",
+    left: "absolute right-full top-0 mr-2 flex flex-col gap-2",
+    right: "absolute left-full top-0 ml-2 flex flex-col gap-2"
+};
+const FloatingDockMobile = (props)=>{
+    const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const handleItemClick = (item, e)=>{
+        if (item.onClick) {
+            e.preventDefault();
+            item.onClick(e);
+        }
+        setOpen(false);
+    };
+    return (()=>{
+        var _el$7 = _tmpl$6(), _el$9 = _el$7.firstChild;
+        (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__.Show, {
+            get when () {
+                return open();
+            },
+            get children () {
+                var _el$8 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return props.items;
+                    },
+                    children: (item, idx)=>(()=>{
+                            var _el$0 = _tmpl$8();
+                            _el$0.style.setProperty("animation-fill-mode", "backwards");
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                get when () {
+                                    return item.onClick;
+                                },
+                                get fallback () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                        get when () {
+                                            return item.href;
+                                        },
+                                        get fallback () {
+                                            return (()=>{
+                                                var _el$11 = _tmpl$0();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>item.icon);
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                    var _v$20 = `${props.cfg.baseSize}px`, _v$21 = `${props.cfg.baseSize}px`, _v$22 = item.title;
+                                                    _v$20 !== _p$.e && (null != (_p$.e = _v$20) ? _el$11.style.setProperty("width", _v$20) : _el$11.style.removeProperty("width"));
+                                                    _v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$11.style.setProperty("height", _v$21) : _el$11.style.removeProperty("height"));
+                                                    _v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$22);
+                                                    return _p$;
+                                                }, {
+                                                    e: void 0,
+                                                    t: void 0,
+                                                    a: void 0
+                                                });
+                                                return _el$11;
+                                            })();
+                                        },
+                                        get children () {
+                                            var _el$10 = _tmpl$9();
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>item.icon);
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                var _v$16 = item.href, _v$17 = `${props.cfg.baseSize}px`, _v$18 = `${props.cfg.baseSize}px`, _v$19 = item.title;
+                                                _v$16 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$16);
+                                                _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$10.style.setProperty("width", _v$17) : _el$10.style.removeProperty("width"));
+                                                _v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$10.style.setProperty("height", _v$18) : _el$10.style.removeProperty("height"));
+                                                _v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$19);
+                                                return _p$;
+                                            }, {
+                                                e: void 0,
+                                                t: void 0,
+                                                a: void 0,
+                                                o: void 0
+                                            });
+                                            return _el$10;
+                                        }
+                                    });
+                                },
+                                get children () {
+                                    var _el$1 = _tmpl$7();
+                                    _el$1.$$click = (e)=>handleItemClick(item, e);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>item.icon);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                        var _v$13 = `${props.cfg.baseSize}px`, _v$14 = `${props.cfg.baseSize}px`, _v$15 = item.title;
+                                        _v$13 !== _p$.e && (null != (_p$.e = _v$13) ? _el$1.style.setProperty("width", _v$13) : _el$1.style.removeProperty("width"));
+                                        _v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$1.style.setProperty("height", _v$14) : _el$1.style.removeProperty("height"));
+                                        _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$15);
+                                        return _p$;
+                                    }, {
+                                        e: void 0,
+                                        t: void 0,
+                                        a: void 0
+                                    });
+                                    return _el$1;
+                                }
+                            }));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${(props.items.length - 1 - idx()) * 0.05}s`, _el$0.style.setProperty("animation-delay", _$p)));
+                            return _el$0;
+                        })()
+                }));
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, MOBILE_POPUP[props.popupDirection]));
+                return _el$8;
+            }
+        }), _el$9);
+        _el$9.$$click = ()=>setOpen(!open());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>props.toggleIcon ?? _tmpl$1());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$10 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative block md:hidden", props.class), _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`;
+            _v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$10);
+            _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$9.style.setProperty("width", _v$11) : _el$9.style.removeProperty("width"));
+            _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$9.style.setProperty("height", _v$12) : _el$9.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$7;
+    })();
+};
+const FloatingDock = (rawProps)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(rawProps, [
+        "items",
+        "orientation",
+        "tooltipDirection",
+        "mobilePopupDirection",
+        "gap",
+        "baseSize",
+        "hoverSize",
+        "iconSize",
+        "hoverIconSize",
+        "magnifyRange",
+        "magnify",
+        "showDesktop",
+        "showMobile",
+        "showContainer",
+        "desktopClass",
+        "mobileClass",
+        "itemClass",
+        "tooltipClass",
+        "mobileToggleIcon",
+        "springMass",
+        "springStiffness",
+        "springDamping",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const cfg = ()=>({
+            baseSize: local.baseSize ?? 40,
+            hoverSize: local.hoverSize ?? 80,
+            iconSize: local.iconSize ?? 20,
+            hoverIconSize: local.hoverIconSize ?? 40,
+            magnifyRange: local.magnifyRange ?? 150,
+            magnify: false !== local.magnify,
+            gap: local.gap ?? 16,
+            tooltipDir: local.tooltipDirection ?? "top",
+            orientation: local.orientation ?? "horizontal",
+            itemClass: local.itemClass,
+            tooltipClass: local.tooltipClass,
+            springOpts: {
+                mass: local.springMass ?? 0.1,
+                stiffness: local.springStiffness ?? 150,
+                damping: local.springDamping ?? 12
+            }
+        });
+    return (()=>{
+        var _el$13 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return false !== local.showDesktop;
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockDesktop, {
+                    get items () {
+                        return local.items;
+                    },
+                    get ["class"] () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, local.desktopClass);
+                    },
+                    get cfg () {
+                        return cfg();
+                    },
+                    get showContainer () {
+                        return false !== local.showContainer;
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return false !== local.showMobile;
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FloatingDockMobile, {
+                    get items () {
+                        return local.items;
+                    },
+                    get ["class"] () {
+                        return local.mobileClass;
+                    },
+                    get toggleIcon () {
+                        return local.mobileToggleIcon;
+                    },
+                    get popupDirection () {
+                        return local.mobilePopupDirection ?? "top";
+                    },
+                    get cfg () {
+                        return cfg();
+                    }
+                });
+            }
+        }), null);
+        return _el$13;
+    })();
+};
+const floating_dock_FloatingDock = FloatingDock;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "mousemove"
+]);
+export { floating_dock_FloatingDock as default };

package/dist/components/floating-dock/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__FloatingDock_js_bc6c96fc__ from "./FloatingDock.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__FloatingDock_js_bc6c96fc__["default"];
+export { __webpack_exports__default as default };

package/dist/components/footer/Footer.d.ts

@@ -1,3 +1,4 @@
+import "./footer.css";
 import { type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type FooterProps = IComponentBaseProps & {

package/dist/components/footer/Footer.js

@@ -0,0 +1,41 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./footer.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__FooterTitle_js_92d7fa24__ from "./FooterTitle.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<footer>");
+const Footer = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "center",
+        "horizontal",
+        "vertical"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "footer-center": local.center,
+            "footer-horizontal": local.horizontal,
+            "footer-vertical": local.vertical
+        }));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const FooterNamespaces = Object.assign(Footer, {
+    Title: __WEBPACK_EXTERNAL_MODULE__FooterTitle_js_92d7fa24__.FooterTitle
+});
+const footer_Footer = FooterNamespaces;
+export { footer_Footer as default };

package/dist/components/footer/FooterTitle.js

@@ -0,0 +1,27 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h6>");
+const FooterTitle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("footer-title", local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+export { FooterTitle };