@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/metal-border/MetalBorder.d.ts

@@ -1,20 +0,0 @@
-import "./MetalBorder.css";
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import { type PresetName, type PresetTheme } from "./engine";
-export type MetalBorderPreset = PresetName;
-export type MetalBorderKind = "pill" | "circle";
-export type MetalBorderTheme = PresetTheme | "auto";
-export type MetalBorderResolvedTheme = PresetTheme;
-export type MetalBorderProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children?: JSX.Element;
-    preset?: MetalBorderPreset;
-    strength?: number;
-    kind?: MetalBorderKind;
-    glow?: boolean;
-    paused?: boolean;
-    theme?: MetalBorderTheme;
-    cornerRadius?: number | string;
-    contentClass?: string;
-};
-export default function MetalBorder(props: MetalBorderProps): JSX.Element;

package/dist/components/metal-border/MetalBorder.js

@@ -1,322 +0,0 @@
-import { className, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import "./MetalBorder.css";
-import { createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { prefersReducedMotion } from "../../motion/reduced-motion.js";
-import { CLASSES } from "./MetalBorder.classes.js";
-import { createInstance, destroyInstance, injectGlow, registerGlowInstance, resizeGlow, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateGlow, updateInstance } from "./engine/index.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div aria-hidden=true><canvas></canvas><div>");
-const DEFAULT_PRESET = "silver";
-const DEFAULT_STRENGTH = 90;
-const DEFAULT_KIND = "pill";
-const DEFAULT_THEME = "auto";
-const clampStrength = (value)=>{
-    if ("number" != typeof value || Number.isNaN(value)) return DEFAULT_STRENGTH / 100;
-    return Math.min(100, Math.max(0, value)) / 100;
-};
-const toRadiusCssValue = (value)=>{
-    if ("number" == typeof value) return `${value}px`;
-    return value;
-};
-const readRadiusPx = (element)=>{
-    if (!element || "u" < typeof window) return 0;
-    const computed = window.getComputedStyle(element);
-    const candidates = [
-        computed.borderTopLeftRadius,
-        computed.borderTopRightRadius,
-        computed.borderBottomRightRadius,
-        computed.borderBottomLeftRadius,
-        computed.borderRadius
-    ];
-    for (const candidate of candidates){
-        const parsed = Number.parseFloat(candidate);
-        if (Number.isFinite(parsed)) return parsed;
-    }
-    return 0;
-};
-const resolveThemeValue = (explicitTheme, dataTheme, host)=>{
-    if ("dark" === explicitTheme || "light" === explicitTheme) return explicitTheme;
-    if ("dark" === dataTheme || "light" === dataTheme) return dataTheme;
-    const themeRoot = host?.closest("[data-theme]") ?? document.documentElement;
-    const themeAttr = themeRoot?.getAttribute("data-theme")?.toLowerCase();
-    if (themeAttr?.includes("light")) return "light";
-    if (themeAttr?.includes("dark")) return "dark";
-    return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
-};
-const getGlowOptions = (host, kind, cornerRadius)=>{
-    const rect = host?.getBoundingClientRect();
-    return {
-        width: Math.max(1, Math.round(rect?.width ?? 1)),
-        height: Math.max(1, Math.round(rect?.height ?? 1)),
-        cornerRadius,
-        kind
-    };
-};
-const glowMap = new Map();
-let glowCallbackSet = false;
-const ensureGlowCallback = ()=>{
-    if (glowCallbackSet) return;
-    glowCallbackSet = true;
-    setGlowCallback((instance, nowMs)=>{
-        const entry = glowMap.get(instance);
-        if (entry) updateGlow(entry.handles, instance, nowMs, instance.opacityMul, entry.theme);
-    });
-};
-function MetalBorder(props) {
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "contentClass",
-        "dataTheme",
-        "style",
-        "preset",
-        "strength",
-        "kind",
-        "glow",
-        "paused",
-        "theme",
-        "cornerRadius",
-        "ref"
-    ]);
-    let hostRef;
-    let contentRef;
-    let canvasRef;
-    let glowRef;
-    let instance = null;
-    let glowHandles = null;
-    let resizeObserver = null;
-    let intersectionObserver = null;
-    let mutationObserver = null;
-    let mediaQueryList = null;
-    let resizeRaf = 0;
-    const [resolvedTheme, setResolvedTheme] = createSignal("dark");
-    const [prefersReduced, setPrefersReduced] = createSignal(false);
-    const [isWebGlUnavailable, setIsWebGlUnavailable] = createSignal(false);
-    const preset = ()=>local.preset ?? DEFAULT_PRESET;
-    const kind = ()=>local.kind ?? DEFAULT_KIND;
-    const theme = ()=>local.theme ?? DEFAULT_THEME;
-    const strength = ()=>clampStrength(local.strength);
-    const glow = ()=>local.glow ?? false;
-    const effectivePaused = ()=>(local.paused ?? false) || prefersReduced();
-    const radiusCssValue = ()=>toRadiusCssValue(local.cornerRadius);
-    const effectEnabled = ()=>!isWebGlUnavailable();
-    const syncResolvedTheme = ()=>{
-        if ("u" < typeof window) return;
-        setResolvedTheme(resolveThemeValue(theme(), local.dataTheme, hostRef));
-    };
-    const readCornerRadius = ()=>{
-        if ("number" == typeof local.cornerRadius) return local.cornerRadius;
-        if ("string" == typeof local.cornerRadius) return readRadiusPx(hostRef);
-        const firstChild = contentRef?.firstElementChild;
-        return readRadiusPx(firstChild instanceof HTMLElement ? firstChild : hostRef);
-    };
-    const syncInstanceGeometry = ()=>{
-        if (!instance || !hostRef) return;
-        updateInstance(instance, {
-            cssWidth: Math.max(1, Math.round(hostRef.getBoundingClientRect().width)),
-            cssHeight: Math.max(1, Math.round(hostRef.getBoundingClientRect().height)),
-            cornerRadius: readCornerRadius()
-        });
-        if (glowHandles && glowRef) {
-            glowHandles = resizeGlow(glowHandles, glowRef, {
-                ...getGlowOptions(hostRef, kind(), readCornerRadius()),
-                scale: 1
-            });
-            glowMap.set(instance, {
-                handles: glowHandles,
-                theme: resolvedTheme()
-            });
-        }
-    };
-    const attachGlow = ()=>{
-        if (!instance || !glowRef || glowHandles || !glow()) return;
-        ensureGlowCallback();
-        glowHandles = injectGlow(glowRef, {
-            ...getGlowOptions(hostRef, kind(), readCornerRadius()),
-            scale: 1
-        });
-        glowMap.set(instance, {
-            handles: glowHandles,
-            theme: resolvedTheme()
-        });
-        registerGlowInstance(instance);
-    };
-    const detachGlow = ()=>{
-        if (!instance) return;
-        unregisterGlowInstance(instance);
-        glowMap.delete(instance);
-        glowHandles = null;
-        if (glowRef) glowRef.innerHTML = "";
-    };
-    onMount(()=>{
-        if ("u" < typeof window) return;
-        setPrefersReduced(prefersReducedMotion());
-        syncResolvedTheme();
-        mediaQueryList = window.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
-        const handleMotionChange = ()=>{
-            setPrefersReduced(prefersReducedMotion());
-        };
-        mediaQueryList?.addEventListener?.("change", handleMotionChange);
-        if (hostRef) {
-            const themeRoot = hostRef.closest("[data-theme]") ?? document.documentElement;
-            mutationObserver = new MutationObserver(()=>{
-                syncResolvedTheme();
-            });
-            mutationObserver.observe(themeRoot, {
-                attributes: true,
-                attributeFilter: [
-                    "data-theme"
-                ]
-            });
-        }
-        onCleanup(()=>{
-            resizeObserver?.disconnect();
-            intersectionObserver?.disconnect();
-            mutationObserver?.disconnect();
-            mediaQueryList?.removeEventListener?.("change", handleMotionChange);
-            if (0 !== resizeRaf) cancelAnimationFrame(resizeRaf);
-            detachGlow();
-            if (instance) destroyInstance(instance);
-            instance = null;
-        });
-        if (!canvasRef || !hostRef) return;
-        try {
-            instance = createInstance({
-                hostCanvas: canvasRef,
-                cssWidth: Math.max(1, Math.round(hostRef.getBoundingClientRect().width)),
-                cssHeight: Math.max(1, Math.round(hostRef.getBoundingClientRect().height)),
-                cornerRadius: readCornerRadius(),
-                kind: kind(),
-                opacityMul: strength(),
-                paused: effectivePaused(),
-                presetName: preset(),
-                presetTheme: resolvedTheme()
-            });
-            setIsWebGlUnavailable(false);
-        } catch  {
-            setIsWebGlUnavailable(true);
-            return;
-        }
-        if (glow()) attachGlow();
-        resizeObserver = new ResizeObserver(()=>{
-            if (0 !== resizeRaf) return;
-            resizeRaf = requestAnimationFrame(()=>{
-                resizeRaf = 0;
-                syncResolvedTheme();
-                syncInstanceGeometry();
-            });
-        });
-        resizeObserver.observe(hostRef);
-        if ("u" > typeof IntersectionObserver) {
-            intersectionObserver = new IntersectionObserver((entries)=>{
-                if (!instance) return;
-                for (const entry of entries)setInstanceVisible(instance, entry.isIntersecting);
-            }, {
-                rootMargin: "64px"
-            });
-            intersectionObserver.observe(hostRef);
-        }
-    });
-    createEffect(()=>{
-        syncResolvedTheme();
-        if (!instance) return;
-        updateInstance(instance, {
-            presetName: preset(),
-            presetTheme: resolvedTheme()
-        });
-        if (glowHandles) glowMap.set(instance, {
-            handles: glowHandles,
-            theme: resolvedTheme()
-        });
-    });
-    createEffect(()=>{
-        if (!instance) return;
-        updateInstance(instance, {
-            opacityMul: strength()
-        });
-    });
-    createEffect(()=>{
-        if (!instance) return;
-        updateInstance(instance, {
-            kind: kind(),
-            cornerRadius: readCornerRadius()
-        });
-        if (glowHandles && glowRef) {
-            glowHandles = resizeGlow(glowHandles, glowRef, {
-                ...getGlowOptions(hostRef, kind(), readCornerRadius()),
-                scale: 1
-            });
-            glowMap.set(instance, {
-                handles: glowHandles,
-                theme: resolvedTheme()
-            });
-        }
-    });
-    createEffect(()=>{
-        if (!instance) return;
-        updateInstance(instance, {
-            paused: effectivePaused()
-        });
-    });
-    createEffect(()=>{
-        if (!instance) return;
-        if (glow()) attachGlow();
-        else if (glowHandles) detachGlow();
-    });
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-        use((element)=>{
-            hostRef = element;
-            if ("function" == typeof local.ref) local.ref(element);
-        }, _el$);
-        spread(_el$, mergeProps(others, {
-            get ["class"] () {
-                return twMerge(CLASSES.Root.base, CLASSES.Root.kind[kind()], effectEnabled() && CLASSES.Root.flag.enabled, isWebGlUnavailable() && CLASSES.Root.flag.unavailable, effectivePaused() && CLASSES.Root.flag.paused, local.class, local.className);
-            },
-            get ["data-kind"] () {
-                return kind();
-            },
-            get ["data-preset"] () {
-                return preset();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return {
-                    ...local.style ?? {},
-                    "--metal-border-radius": radiusCssValue()
-                };
-            }
-        }), false, true);
-        insert(_el$, (()=>{
-            var _c$ = memo(()=>!!effectEnabled());
-            return ()=>_c$() && (()=>{
-                    var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-                    var _ref$2 = canvasRef;
-                    "function" == typeof _ref$2 ? use(_ref$2, _el$4) : canvasRef = _el$4;
-                    var _ref$3 = glowRef;
-                    "function" == typeof _ref$3 ? use(_ref$3, _el$5) : glowRef = _el$5;
-                    effect((_p$)=>{
-                        var _v$ = CLASSES.Effect.base, _v$2 = CLASSES.Canvas.base, _v$3 = CLASSES.Glow.base;
-                        _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                        _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-                        _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
-                        return _p$;
-                    }, {
-                        e: void 0,
-                        t: void 0,
-                        a: void 0
-                    });
-                    return _el$3;
-                })();
-        })(), _el$2);
-        var _ref$ = contentRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$2) : contentRef = _el$2;
-        insert(_el$2, ()=>local.children);
-        effect(()=>className(_el$2, twMerge(CLASSES.Content.base, local.contentClass)));
-        return _el$;
-    })();
-}
-export default MetalBorder;

package/dist/components/meter/Meter.classes.d.ts

@@ -1,21 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "meter";
-    readonly output: "meter__output";
-    readonly track: "meter__track";
-    readonly fill: "meter__fill";
-    readonly size: {
-        readonly sm: "meter--sm";
-        readonly md: "meter--md";
-        readonly lg: "meter--lg";
-    };
-    readonly color: {
-        readonly default: "meter--default";
-        readonly accent: "meter--accent";
-        readonly success: "meter--success";
-        readonly warning: "meter--warning";
-        readonly danger: "meter--danger";
-    };
-    readonly state: {
-        readonly disabled: "meter--disabled";
-    };
-};

package/dist/components/meter/Meter.classes.js

@@ -1,22 +0,0 @@
-const CLASSES = {
-    base: "meter",
-    output: "meter__output",
-    track: "meter__track",
-    fill: "meter__fill",
-    size: {
-        sm: "meter--sm",
-        md: "meter--md",
-        lg: "meter--lg"
-    },
-    color: {
-        default: "meter--default",
-        accent: "meter--accent",
-        success: "meter--success",
-        warning: "meter--warning",
-        danger: "meter--danger"
-    },
-    state: {
-        disabled: "meter--disabled"
-    }
-};
-export { CLASSES };

package/dist/components/meter/Meter.d.ts

@@ -1,43 +0,0 @@
-import "./Meter.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type MeterSize = "sm" | "md" | "lg";
-export type MeterColor = "default" | "accent" | "success" | "warning" | "danger";
-export type MeterRenderState = {
-    value: number;
-    minValue: number;
-    maxValue: number;
-    percentage: number;
-    valueText: string;
-    isDisabled: boolean;
-};
-export type MeterRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children?: JSX.Element | ((state: MeterRenderState) => JSX.Element);
-    value?: number;
-    minValue?: number;
-    maxValue?: number;
-    lowValue?: number;
-    highValue?: number;
-    optimumValue?: number;
-    isDisabled?: boolean;
-    size?: MeterSize;
-    color?: MeterColor;
-    formatOptions?: Intl.NumberFormatOptions;
-    formatValue?: (value: number, state: Omit<MeterRenderState, "valueText">) => string;
-};
-export type MeterOutputProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLSpanElement>;
-export type MeterTrackProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
-export type MeterFillProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement>;
-declare const MeterRoot: Component<MeterRootProps>;
-declare const MeterOutput: Component<MeterOutputProps>;
-declare const MeterTrack: Component<MeterTrackProps>;
-declare const MeterFill: Component<MeterFillProps>;
-declare const Meter: Component<MeterRootProps> & {
-    Root: Component<MeterRootProps>;
-    Output: Component<MeterOutputProps>;
-    Track: Component<MeterTrackProps>;
-    Fill: Component<MeterFillProps>;
-};
-export default Meter;
-export { Meter, MeterRoot, MeterOutput, MeterTrack, MeterFill };
-export type { MeterRootProps as MeterProps };

package/dist/components/meter/Meter.js

@@ -1,213 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import "./Meter.css";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Meter.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
-const MeterContext = createContext();
-const useMeterContext = ()=>{
-    const context = useContext(MeterContext);
-    if (!context) throw new Error("Meter compound components must be used within <Meter>");
-    return context;
-};
-const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
-const MeterRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "value",
-        "minValue",
-        "maxValue",
-        "lowValue",
-        "highValue",
-        "optimumValue",
-        "isDisabled",
-        "size",
-        "color",
-        "formatOptions",
-        "formatValue"
-    ]);
-    const minValue = createMemo(()=>local.minValue ?? 0);
-    const maxValue = createMemo(()=>{
-        const resolvedMin = minValue();
-        const resolvedMax = local.maxValue ?? 100;
-        return resolvedMax > resolvedMin ? resolvedMax : resolvedMin + 1;
-    });
-    const clampedValue = createMemo(()=>clamp(local.value ?? minValue(), minValue(), maxValue()));
-    const percentage = createMemo(()=>(clampedValue() - minValue()) / (maxValue() - minValue()) * 100);
-    const formatter = createMemo(()=>{
-        if (!local.formatOptions) return;
-        try {
-            return new Intl.NumberFormat(void 0, local.formatOptions);
-        } catch  {
-            return;
-        }
-    });
-    const state = createMemo(()=>{
-        const base = {
-            value: clampedValue(),
-            minValue: minValue(),
-            maxValue: maxValue(),
-            percentage: percentage(),
-            isDisabled: Boolean(local.isDisabled)
-        };
-        const valueText = local.formatValue ? local.formatValue(base.value, base) : formatter()?.format(base.value) ?? `${Math.round(base.percentage)}%`;
-        return {
-            ...base,
-            valueText
-        };
-    });
-    const rootClasses = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], local.isDisabled && CLASSES.state.disabled, local.class, local.className));
-    return createComponent(MeterContext.Provider, {
-        value: {
-            state
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            spread(_el$, mergeProps(others, {
-                get role () {
-                    return others.role ?? "meter";
-                },
-                get ["aria-valuemin"] () {
-                    return minValue();
-                },
-                get ["aria-valuemax"] () {
-                    return maxValue();
-                },
-                get ["aria-valuenow"] () {
-                    return state().value;
-                },
-                get ["aria-valuetext"] () {
-                    return state().valueText;
-                },
-                get ["aria-disabled"] () {
-                    return local.isDisabled ? "true" : void 0;
-                },
-                get ["data-disabled"] () {
-                    return local.isDisabled ? "true" : void 0;
-                },
-                "data-slot": "meter",
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get ["data-low-value"] () {
-                    return local.lowValue;
-                },
-                get ["data-high-value"] () {
-                    return local.highValue;
-                },
-                get ["data-optimum-value"] () {
-                    return local.optimumValue;
-                },
-                get style () {
-                    return local.style;
-                }
-            }, ()=>({
-                    class: rootClasses()
-                })), false, true);
-            insert(_el$, (()=>{
-                var _c$ = memo(()=>"function" == typeof local.children);
-                return ()=>_c$() ? local.children(state()) : local.children;
-            })());
-            return _el$;
-        }
-    });
-};
-const MeterOutput = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    const { state } = useMeterContext();
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, {
-            "data-slot": "meter-output",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.output, local.class, local.className)
-            })), false, true);
-        insert(_el$2, ()=>local.children ?? state().valueText);
-        return _el$2;
-    })();
-};
-const MeterTrack = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$3 = _tmpl$();
-        spread(_el$3, mergeProps(others, {
-            "data-slot": "meter-track",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.track, local.class, local.className)
-            })), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
-};
-const MeterFill = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    const { state } = useMeterContext();
-    const style = createMemo(()=>{
-        if ("string" == typeof local.style) {
-            const trimmed = local.style.trim();
-            const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
-            return `${trimmed}${suffix} width: ${state().percentage}%;`;
-        }
-        return {
-            ...local.style ?? {},
-            width: `${state().percentage}%`
-        };
-    });
-    return (()=>{
-        var _el$4 = _tmpl$();
-        spread(_el$4, mergeProps(others, {
-            "data-slot": "meter-fill",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return style();
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.fill, local.class, local.className)
-            })), false, false);
-        return _el$4;
-    })();
-};
-const Meter = Object.assign(MeterRoot, {
-    Root: MeterRoot,
-    Output: MeterOutput,
-    Track: MeterTrack,
-    Fill: MeterFill
-});
-const meter_Meter = Meter;
-export default meter_Meter;
-export { Meter, MeterFill, MeterOutput, MeterRoot, MeterTrack };