@pathscale/ui 1.3.1 → 1.4.0

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

@@ -1,648 +0,0 @@
-import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import "./FloatingDock.css";
-import { For, Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./FloatingDock.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div role=toolbar aria-label=Actions>"), _tmpl$6 = /*#__PURE__*/ template("<div><button type=button>"), _tmpl$7 = /*#__PURE__*/ template('<svg xmlns=http://www.w3.org/2000/svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
-const prefersReducedMotion = "u" > 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] = createSignal(false);
-    const [tooltipStyle, setTooltipStyle] = createSignal({
-        top: "0",
-        left: "0"
-    });
-    const cfg = props.cfg;
-    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$ ? use(_ref$, _el$) : wrapRef = _el$;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.item, cfg.itemClass)
-            }), {
-            get style () {
-                return {
-                    width: `${cfg.baseSize}px`,
-                    height: `${cfg.baseSize}px`
-                };
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return hovered();
-            },
-            get children () {
-                return createComponent(Portal, {
-                    get children () {
-                        var _el$2 = _tmpl$();
-                        spread(_el$2, mergeProps(()=>({
-                                class: twMerge(CLASSES.tooltip, cfg.tooltipClass)
-                            }), {
-                            get style () {
-                                return {
-                                    top: tooltipStyle().top,
-                                    left: tooltipStyle().left,
-                                    transform: TOOLTIP_TRANSFORM[cfg.tooltipDir]
-                                };
-                            }
-                        }), false, true);
-                        insert(_el$2, ()=>props.item.title);
-                        return _el$2;
-                    }
-                });
-            }
-        }), _el$3);
-        var _ref$2 = iconRef;
-        "function" == typeof _ref$2 ? use(_ref$2, _el$3) : iconRef = _el$3;
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.icon
-            })), false, true);
-        insert(_el$3, ()=>props.item.icon);
-        return _el$;
-    })();
-    return createComponent(Show, {
-        get when () {
-            return props.item.onClick;
-        },
-        get fallback () {
-            return createComponent(Show, {
-                get when () {
-                    return props.item.href;
-                },
-                fallback: inner,
-                get children () {
-                    var _el$5 = _tmpl$4();
-                    insert(_el$5, inner);
-                    effect((_p$)=>{
-                        var _v$ = props.item.href, _v$2 = props.item.title;
-                        _v$ !== _p$.e && setAttribute(_el$5, "href", _p$.e = _v$);
-                        _v$2 !== _p$.t && setAttribute(_el$5, "aria-label", _p$.t = _v$2);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0
-                    });
-                    return _el$5;
-                }
-            });
-        },
-        get children () {
-            var _el$4 = _tmpl$3();
-            _el$4.$$click = handleClick;
-            spread(_el$4, mergeProps({
-                get ["aria-label"] () {
-                    return props.item.title;
-                }
-            }, ()=>({
-                    class: CLASSES.buttonReset
-                })), false, true);
-            insert(_el$4, inner);
-            return _el$4;
-        }
-    });
-};
-const FloatingDockDesktop = (props)=>{
-    const [mousePos, setMousePos] = 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);
-    };
-    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);
-        spread(_el$6, mergeProps(()=>({
-                class: twMerge(CLASSES.bar, isH() ? CLASSES.barOrientation.horizontal : CLASSES.barOrientation.vertical, props.class)
-            }), {
-            get style () {
-                return {
-                    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`
-                    }
-                };
-            }
-        }), false, true);
-        insert(_el$6, createComponent(Show, {
-            get when () {
-                return props.showContainer;
-            },
-            get children () {
-                var _el$7 = _tmpl$();
-                var _ref$3 = bgRef;
-                "function" == typeof _ref$3 ? use(_ref$3, _el$7) : bgRef = _el$7;
-                spread(_el$7, mergeProps(()=>({
-                        class: CLASSES.bg
-                    })), false, false);
-                return _el$7;
-            }
-        }), null);
-        insert(_el$6, createComponent(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 createComponent(DockItem, {
-                    item: item,
-                    cfg: cfg,
-                    registerRefs: (wrap, icon)=>{
-                        springs.wrapRef = wrap;
-                        springs.iconRef = icon;
-                    }
-                });
-            }
-        }), null);
-        return _el$6;
-    })();
-};
-const FloatingDockMobile = (props)=>{
-    const [open, setOpen] = createSignal(false);
-    const handleItemClick = (item, e)=>{
-        if (item.onClick) {
-            e.preventDefault();
-            item.onClick(e);
-        }
-        setOpen(false);
-    };
-    return (()=>{
-        var _el$8 = _tmpl$6(), _el$0 = _el$8.firstChild;
-        spread(_el$8, mergeProps(()=>({
-                class: twMerge(CLASSES.mobile, props.class)
-            })), false, true);
-        insert(_el$8, createComponent(Show, {
-            get when () {
-                return open();
-            },
-            get children () {
-                var _el$9 = _tmpl$();
-                spread(_el$9, mergeProps(()=>({
-                        class: twMerge(CLASSES.mobilePopup, CLASSES.mobilePopupDirection[props.popupDirection])
-                    })), false, true);
-                insert(_el$9, createComponent(For, {
-                    get each () {
-                        return props.items;
-                    },
-                    children: (item, idx)=>(()=>{
-                            var _el$1 = _tmpl$();
-                            spread(_el$1, mergeProps(()=>({
-                                    class: CLASSES.mobileItem
-                                }), {
-                                get style () {
-                                    return {
-                                        "animation-delay": `${(props.items.length - 1 - idx()) * 0.05}s`
-                                    };
-                                }
-                            }), false, true);
-                            insert(_el$1, createComponent(Show, {
-                                get when () {
-                                    return item.onClick;
-                                },
-                                get fallback () {
-                                    return createComponent(Show, {
-                                        get when () {
-                                            return item.href;
-                                        },
-                                        get fallback () {
-                                            return (()=>{
-                                                var _el$12 = _tmpl$();
-                                                spread(_el$12, mergeProps(()=>({
-                                                        class: CLASSES.item
-                                                    }), {
-                                                    get style () {
-                                                        return {
-                                                            width: `${props.cfg.baseSize}px`,
-                                                            height: `${props.cfg.baseSize}px`
-                                                        };
-                                                    },
-                                                    get title () {
-                                                        return item.title;
-                                                    }
-                                                }), false, true);
-                                                insert(_el$12, ()=>item.icon);
-                                                return _el$12;
-                                            })();
-                                        },
-                                        get children () {
-                                            var _el$11 = _tmpl$4();
-                                            spread(_el$11, mergeProps({
-                                                get href () {
-                                                    return item.href;
-                                                }
-                                            }, ()=>({
-                                                    class: CLASSES.item
-                                                }), {
-                                                get style () {
-                                                    return {
-                                                        width: `${props.cfg.baseSize}px`,
-                                                        height: `${props.cfg.baseSize}px`
-                                                    };
-                                                },
-                                                get title () {
-                                                    return item.title;
-                                                }
-                                            }), false, true);
-                                            insert(_el$11, ()=>item.icon);
-                                            return _el$11;
-                                        }
-                                    });
-                                },
-                                get children () {
-                                    var _el$10 = _tmpl$3();
-                                    _el$10.$$click = (e)=>handleItemClick(item, e);
-                                    spread(_el$10, mergeProps(()=>({
-                                            class: CLASSES.mobileToggle
-                                        }), {
-                                        get style () {
-                                            return {
-                                                width: `${props.cfg.baseSize}px`,
-                                                height: `${props.cfg.baseSize}px`
-                                            };
-                                        },
-                                        get title () {
-                                            return item.title;
-                                        }
-                                    }), false, true);
-                                    insert(_el$10, ()=>item.icon);
-                                    return _el$10;
-                                }
-                            }));
-                            return _el$1;
-                        })()
-                }));
-                return _el$9;
-            }
-        }), _el$0);
-        _el$0.$$click = ()=>setOpen(!open());
-        spread(_el$0, mergeProps(()=>({
-                class: CLASSES.mobileToggle
-            }), {
-            get style () {
-                return {
-                    width: `${props.cfg.baseSize}px`,
-                    height: `${props.cfg.baseSize}px`
-                };
-            }
-        }), false, true);
-        insert(_el$0, ()=>props.toggleIcon ?? (()=>{
-                var _el$13 = _tmpl$7();
-                spread(_el$13, mergeProps(()=>({
-                        class: CLASSES.menuIcon
-                    }), {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    "stroke-width": "2",
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round"
-                }), true, true);
-                return _el$13;
-            })());
-        return _el$8;
-    })();
-};
-const FloatingDock = (rawProps)=>{
-    const [local, others] = 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: true === 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$();
-        spread(_el$14, mergeProps(()=>({
-                class: CLASSES.base
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }, others), false, true);
-        insert(_el$14, createComponent(Show, {
-            get when () {
-                return false !== local.showDesktop;
-            },
-            get children () {
-                return createComponent(FloatingDockDesktop, mergeProps({
-                    get items () {
-                        return local.items;
-                    }
-                }, ()=>({
-                        class: twMerge(local.class, local.className, local.desktopClass)
-                    }), {
-                    get cfg () {
-                        return cfg();
-                    },
-                    get showContainer () {
-                        return false !== local.showContainer;
-                    }
-                }));
-            }
-        }), null);
-        insert(_el$14, createComponent(Show, {
-            get when () {
-                return false !== local.showMobile;
-            },
-            get children () {
-                return createComponent(Show, {
-                    get when () {
-                        return "dock" !== local.mobileMode;
-                    },
-                    get fallback () {
-                        return createComponent(FloatingDockDesktop, mergeProps({
-                            get items () {
-                                return local.items;
-                            }
-                        }, ()=>({
-                                class: twMerge(CLASSES.barMobileDock, local.mobileClass)
-                            }), {
-                            get cfg () {
-                                return cfg();
-                            },
-                            get showContainer () {
-                                return false !== local.showContainer;
-                            }
-                        }));
-                    },
-                    get children () {
-                        return createComponent(FloatingDockMobile, mergeProps({
-                            get items () {
-                                return local.items;
-                            }
-                        }, ()=>({
-                                class: 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;
-delegateEvents([
-    "click",
-    "mousemove"
-]);
-export default floating_dock_FloatingDock;

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

@@ -1,9 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "footer";
-    readonly title: "footer__title";
-    readonly flag: {
-        readonly center: "footer--center";
-        readonly horizontal: "footer--horizontal";
-        readonly vertical: "footer--vertical";
-    };
-};

package/dist/components/footer/Footer.classes.js

@@ -1,10 +0,0 @@
-const CLASSES = {
-    base: "footer",
-    title: "footer__title",
-    flag: {
-        center: "footer--center",
-        horizontal: "footer--horizontal",
-        vertical: "footer--vertical"
-    }
-};
-export { CLASSES };

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

@@ -1,12 +0,0 @@
-import "./footer.css";
-import { type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type FooterProps = IComponentBaseProps & {
-    center?: boolean;
-    horizontal?: boolean;
-    vertical?: boolean;
-};
-declare const FooterNamespaces: ParentComponent<FooterProps> & {
-    Title: ParentComponent<IComponentBaseProps>;
-};
-export default FooterNamespaces;