@pathscale/ui 0.1.1 → 1.2.0

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

@@ -0,0 +1,615 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./FloatingDock.css";
+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=floating-dock__icon>"), _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 class=floating-dock__bg>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=toolbar aria-label=Actions>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><button type=button class=floating-dock__mobile-toggle>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=floating-dock__mobile-toggle>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__mobile-item>"), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a class=floating-dock__item>"), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock__item>"), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="h-5 w-5"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">'), _tmpl$11 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=floating-dock>");
+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;
+        },
+        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)("floating-dock__tooltip", 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)("floating-dock__item", 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 bgRef;
+    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 = mp - anchorCenters[i];
+                const absDist = Math.abs(dist);
+                const ts = mp === 1 / 0 ? cfg.baseSize : mapRange(absDist, 0, cfg.magnifyRange, cfg.hoverSize, cfg.baseSize);
+                const ti = mp === 1 / 0 ? cfg.iconSize : mapRange(absDist, 0, cfg.magnifyRange, cfg.hoverIconSize, cfg.iconSize);
+                s.sScale.set(ts);
+                s.sIconScale.set(ti);
+                if (mp === 1 / 0 || absDist > cfg.magnifyRange) s.sNudge.set(0);
+                else {
+                    const scale = mapRange(absDist, 0, cfg.magnifyRange, cfg.hoverSize / cfg.baseSize, 1);
+                    const nudgeAmount = -dist / cfg.magnifyRange * cfg.nudge * scale;
+                    s.sNudge.set(nudgeAmount);
+                }
+            }
+        }
+        let allSettled = true;
+        for(let i = 0; i < itemSprings.length; i++){
+            const s = itemSprings[i];
+            s.sScale.step(dt);
+            s.sIconScale.step(dt);
+            s.sNudge.step(dt);
+            if (allSettled && !(s.sScale.settled() && s.sIconScale.settled() && s.sNudge.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.sScale.get() / cfg.baseSize, maxScale));
+                const nudge = s.sNudge.get();
+                if (isH()) s.wrapRef.style.transform = `translateX(${nudge}px) scale(${scale})`;
+                else s.wrapRef.style.transform = `translateY(${nudge}px) scale(${scale})`;
+            }
+            if (s.iconRef) {
+                const iconScale = Math.max(0.8, Math.min(s.sIconScale.get() / cfg.iconSize, maxIconScale));
+                s.iconRef.style.transform = `scale(${iconScale})`;
+            }
+        }
+        if (bgRef && props.showContainer) {
+            let minEdge = 1 / 0;
+            let maxEdge = -1 / 0;
+            for(let i = 0; i < itemSprings.length; i++){
+                const s = itemSprings[i];
+                if (!s.wrapRef) continue;
+                const scale = s.sScale.get() / cfg.baseSize;
+                const nudge = s.sNudge.get();
+                const halfScaled = cfg.baseSize * scale / 2;
+                const center = anchorCenters[i] + nudge;
+                minEdge = Math.min(minEdge, center - halfScaled);
+                maxEdge = Math.max(maxEdge, center + halfScaled);
+            }
+            if (isH() && minEdge !== 1 / 0) {
+                const barRect = bgRef.parentElement?.getBoundingClientRect();
+                if (barRect) {
+                    const pad = 16;
+                    bgRef.style.left = `${minEdge - barRect.left - pad}px`;
+                    bgRef.style.right = `${barRect.right - maxEdge - pad}px`;
+                }
+            }
+        }
+        if (allSettled) return void stopLoop();
+        rafId = requestAnimationFrame(tick);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopLoop();
+    });
+    return (()=>{
+        var _el$6 = _tmpl$6();
+        _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__.Show, {
+            get when () {
+                return props.showContainer;
+            },
+            get children () {
+                var _el$7 = _tmpl$5();
+                var _ref$3 = bgRef;
+                "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$7) : bgRef = _el$7;
+                return _el$7;
+            }
+        }), null);
+        (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 = {
+                    sScale: createSpring(cfg.baseSize, cfg.springOpts),
+                    sIconScale: createSpring(cfg.iconSize, cfg.springOpts),
+                    sNudge: createSpring(0, 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;
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$0 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__bar", isH() ? "floating-dock__bar--horizontal" : "floating-dock__bar--vertical", props.class), _v$1 = {
+                gap: `${cfg.gap}px`,
+                padding: props.showContainer ? isH() ? "0.5rem 1rem" : "1rem 0.5rem" : void 0,
+                ...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_CLASS = {
+    top: "floating-dock__mobile-popup--top",
+    bottom: "floating-dock__mobile-popup--bottom",
+    left: "floating-dock__mobile-popup--left",
+    right: "floating-dock__mobile-popup--right"
+};
+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$8 = _tmpl$7(), _el$0 = _el$8.firstChild;
+        (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__.Show, {
+            get when () {
+                return open();
+            },
+            get children () {
+                var _el$9 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (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$1 = _tmpl$9();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, (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$12 = _tmpl$1();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>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$12.style.setProperty("width", _v$20) : _el$12.style.removeProperty("width"));
+                                                    _v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$12.style.setProperty("height", _v$21) : _el$12.style.removeProperty("height"));
+                                                    _v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$12, "title", _p$.a = _v$22);
+                                                    return _p$;
+                                                }, {
+                                                    e: void 0,
+                                                    t: void 0,
+                                                    a: void 0
+                                                });
+                                                return _el$12;
+                                            })();
+                                        },
+                                        get children () {
+                                            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$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$11, "href", _p$.e = _v$16);
+                                                _v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$11.style.setProperty("width", _v$17) : _el$11.style.removeProperty("width"));
+                                                _v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$11.style.setProperty("height", _v$18) : _el$11.style.removeProperty("height"));
+                                                _v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.o = _v$19);
+                                                return _p$;
+                                            }, {
+                                                e: void 0,
+                                                t: void 0,
+                                                a: void 0,
+                                                o: void 0
+                                            });
+                                            return _el$11;
+                                        }
+                                    });
+                                },
+                                get children () {
+                                    var _el$10 = _tmpl$8();
+                                    _el$10.$$click = (e)=>handleItemClick(item, e);
+                                    (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$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$10.style.setProperty("width", _v$13) : _el$10.style.removeProperty("width"));
+                                        _v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$10.style.setProperty("height", _v$14) : _el$10.style.removeProperty("height"));
+                                        _v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.a = _v$15);
+                                        return _p$;
+                                    }, {
+                                        e: void 0,
+                                        t: void 0,
+                                        a: void 0
+                                    });
+                                    return _el$10;
+                                }
+                            }));
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_$p)=>(_$p = `${(props.items.length - 1 - idx()) * 0.05}s`, _el$1.style.setProperty("animation-delay", _$p)));
+                            return _el$1;
+                        })()
+                }));
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile-popup", MOBILE_POPUP_CLASS[props.popupDirection])));
+                return _el$9;
+            }
+        }), _el$0);
+        _el$0.$$click = ()=>setOpen(!open());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>props.toggleIcon ?? (()=>{
+                var _el$13 = _tmpl$10();
+                _el$13.style.setProperty("color", "color-mix(in oklab, var(--color-base-content) 60%, transparent)");
+                return _el$13;
+            })());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$10 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("floating-dock__mobile", 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$8, _p$.e = _v$10);
+            _v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$0.style.setProperty("width", _v$11) : _el$0.style.removeProperty("width"));
+            _v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$0.style.setProperty("height", _v$12) : _el$0.style.removeProperty("height"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$8;
+    })();
+};
+const FloatingDock = (rawProps)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(rawProps, [
+        "items",
+        "orientation",
+        "tooltipDirection",
+        "mobilePopupDirection",
+        "mobileMode",
+        "gap",
+        "baseSize",
+        "hoverSize",
+        "iconSize",
+        "hoverIconSize",
+        "magnifyRange",
+        "magnify",
+        "nudge",
+        "showDesktop",
+        "showMobile",
+        "showContainer",
+        "desktopClass",
+        "mobileClass",
+        "itemClass",
+        "tooltipClass",
+        "mobileToggleIcon",
+        "springMass",
+        "springStiffness",
+        "springDamping",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const cfg = ()=>({
+            baseSize: local.baseSize ?? 40,
+            hoverSize: local.hoverSize ?? 64,
+            iconSize: local.iconSize ?? 20,
+            hoverIconSize: local.hoverIconSize ?? 20,
+            magnifyRange: local.magnifyRange ?? 110,
+            magnify: false !== local.magnify,
+            nudge: local.nudge ?? 20,
+            gap: local.gap ?? 8,
+            tooltipDir: local.tooltipDirection ?? "top",
+            orientation: local.orientation ?? "horizontal",
+            itemClass: local.itemClass,
+            tooltipClass: local.tooltipClass,
+            springOpts: {
+                mass: local.springMass ?? 0.1,
+                stiffness: local.springStiffness ?? 170,
+                damping: local.springDamping ?? 12
+            }
+        });
+    return (()=>{
+        var _el$14 = _tmpl$11();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (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$14, (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$14, (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)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return "dock" !== local.mobileMode;
+                    },
+                    get fallback () {
+                        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)("floating-dock__bar--mobile-dock", local.mobileClass);
+                            },
+                            get cfg () {
+                                return cfg();
+                            },
+                            get showContainer () {
+                                return false !== local.showContainer;
+                            }
+                        });
+                    },
+                    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$14;
+    })();
+};
+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.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./FloatingDock";
+export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection, } from "./FloatingDock";

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 };