@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/menu/MenuSection.generated.d.ts

@@ -0,0 +1,12 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MenuSectionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    title?: JSX.Element;
+};
+declare const MenuSectionRoot: __LayoutComponent<MenuSectionRootProps>;
+declare const MenuSection: __LayoutComponent<MenuSectionRootProps>;
+export default MenuSection;
+export { MenuSection, MenuSectionRoot };
+export type { MenuSectionRootProps as MenuSectionProps };

package/dist/components/menu/MenuSection.generated.js

@@ -0,0 +1,61 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Menu.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div>");
+const __solidLayoutMenuSectionRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "title",
+        "role"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$2();
+        spread(_el$, mergeProps(others, {
+            get role () {
+                return local.role ?? "group";
+            },
+            "data-slot": "menu-section",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.Section.base, local.class, local.className)
+            }), {
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.title;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                spread(_el$2, mergeProps(()=>({
+                        class: CLASSES.Section.title
+                    }), {
+                    "data-slot": "heading"
+                }), false, true);
+                insert(_el$2, ()=>local.title);
+                return _el$2;
+            }
+        }), null);
+        insert(_el$, ()=>local.children, null);
+        return _el$;
+    })();
+};
+const MenuSectionRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutMenuSectionRoot,
+    embedded: true
+});
+const MenuSection = MenuSectionRoot;
+const MenuSection_generated = MenuSection;
+export default MenuSection_generated;
+export { MenuSection, MenuSectionRoot };

package/dist/components/menu/index.d.ts

@@ -1,4 +1,4 @@
-export { default, Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot, type MenuProps, type MenuRootProps, type MenuSelectionMode, } from "./Menu";
-export { MenuItemSubmenuIndicator } from "./MenuItem";
-export type { MenuItemProps, MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, MenuItemRenderProps, MenuItemVariant, } from "./MenuItem";
-export type { MenuSectionProps, MenuSectionRootProps, } from "./MenuSection";
+export { default, Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot, type MenuProps, type MenuRootProps, type MenuSelectionMode, } from "./Menu.generated";
+export { MenuItemSubmenuIndicator } from "./MenuItem.generated";
+export type { MenuItemProps, MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, MenuItemRenderProps, MenuItemVariant, } from "./MenuItem.generated";
+export type { MenuSectionProps, MenuSectionRootProps, } from "./MenuSection.generated";

package/dist/components/menu/index.js

@@ -1,4 +1,2 @@
-import { Menu as external_Menu_js_Menu, MenuItem, MenuItemIndicator, MenuItemRoot, MenuRoot, MenuSection, MenuSectionRoot } from "./Menu.js";
-export { MenuItemSubmenuIndicator } from "./MenuItem.js";
-export default external_Menu_js_Menu;
-export { MenuItem, MenuItemIndicator, MenuItemRoot, MenuRoot, MenuSection, MenuSectionRoot, external_Menu_js_Menu as Menu };
+export { Menu, MenuItem, MenuItemIndicator, MenuItemRoot, MenuRoot, MenuSection, MenuSectionRoot, default } from "./Menu.generated.js";
+export { MenuItemSubmenuIndicator } from "./MenuItem.generated.js";

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

@@ -37,4 +37,93 @@
     z-index: 0;
     border-radius: inherit;
   }
+
+  /* The fallback for engines with no WebGL, and the cheap path everywhere.
+   *
+   * `MetalBorder.tsx` already sets `--unavailable` when the renderer fails to
+   * start, but nothing styled it, so the class was applied and the border
+   * simply vanished. That is the whole bug: not a missing detector, a missing
+   * rule.
+   *
+   * A conic gradient on a padded box, with the content painting its own fill
+   * over the middle, leaves a ring exactly `--metal-border-width` thick. The
+   * sweep is a rotation of that layer rather than an animated gradient angle,
+   * because animating the angle needs `@property` to register `<angle>` as an
+   * interpolable custom property, and an engine without WebGL usually has no
+   * `@property` either. Rotation is also the cheaper of the two: one transform
+   * per frame against re-rasterising a gradient.
+   *
+   * Cost is a transform on a single compositor-friendly layer — no canvas, no
+   * `requestAnimationFrame`, no GL context, and none of the per-frame pixel
+   * readback the shader path does to sample its own output.
+   */
+  .metal-border--unavailable {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    padding: var(--metal-border-width, 1.5px);
+    border-radius: var(--metal-border-radius, inherit);
+    background: var(--metal-border-rail, #3a3d44);
+  }
+
+  .metal-border--unavailable::before {
+    content: "";
+    position: absolute;
+    /* Deliberately not `top/left: 50%` with `translate(-50%, -50%)`. The
+     * percentage there resolves against the element's own box, which several
+     * engines get wrong, and being wrong decentres the sweep. Insets resolve
+     * against the containing block, which is unambiguous. Overshooting past
+     * every corner is what keeps the ring lit all the way round. */
+    inset: -60%;
+    z-index: 0;
+    background: conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      var(--metal-border-sheen-edge, #8b9096) 40deg,
+      var(--metal-border-sheen, #ffffff) 62deg,
+      var(--metal-border-sheen-edge, #8b9096) 84deg,
+      transparent 150deg,
+      transparent 360deg
+    );
+    animation: metal-border-sweep var(--metal-border-duration, 6s) linear
+      infinite;
+  }
+
+  /* `paused` is the author's choice; `prefers-reduced-motion` is the reader's.
+   * Both stop the sweep and keep the ring, so the border never disappears
+   * just because it stopped moving. */
+  .metal-border--unavailable.metal-border--paused::before {
+    animation: none;
+  }
+
+  /* What hides the sweep everywhere except the ring is the content's own
+   * background, which is why this defaults to `transparent` rather than to a
+   * colour: a card that already paints a background needs nothing, and picking
+   * a colour for it would paint over the consumer's.
+   *
+   * The consequence, stated because it is easy to hit and hard to diagnose:
+   * **translucent content lets the sweep through**, and it reads as a grey cone
+   * across the card rather than as a ring. Set `--metal-border-fill` to an
+   * opaque colour when the content is glass, or leave the effect off.
+   *
+   * The fix that would make this unconditional is `mask-composite: exclude`,
+   * cutting the interior out of the gradient layer so nothing is painted there
+   * to bleed. That needs `mask-image`, which is the one primitive this
+   * technique cannot be written without. */
+  .metal-border--unavailable > .metal-border__content {
+    z-index: 1;
+    background: var(--metal-border-fill, transparent);
+  }
+}
+
+@keyframes metal-border-sweep {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .metal-border--unavailable::before {
+    animation: none;
+  }
 }

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

@@ -0,0 +1,22 @@
+import type { Component as __LayoutComponent } from "solid-js";
+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;
+};
+declare const MetalBorder: __LayoutComponent<MetalBorderProps>;
+export default MetalBorder;

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

@@ -0,0 +1,329 @@
+import { className, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+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, componentRecipe } from "./MetalBorder.recipe.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);
+    });
+};
+const __solidLayoutMetalBorder = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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$;
+    })();
+};
+const MetalBorder = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutMetalBorder,
+    embedded: true
+});
+const MetalBorder_generated = MetalBorder;
+export default MetalBorder_generated;

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

@@ -0,0 +1,32 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "metal-border";
+        readonly kind: {
+            readonly pill: "metal-border--pill";
+            readonly circle: "metal-border--circle";
+        };
+        readonly flag: {
+            readonly enabled: "metal-border--enabled";
+            readonly unavailable: "metal-border--unavailable";
+            readonly paused: "metal-border--paused";
+        };
+    };
+    readonly Effect: {
+        readonly base: "metal-border__effect";
+    };
+    readonly Canvas: {
+        readonly base: "metal-border__canvas";
+    };
+    readonly Glow: {
+        readonly base: "metal-border__glow";
+    };
+    readonly Content: {
+        readonly base: "metal-border__content";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "metal-border";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,46 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "metal-border",
+        kind: {
+            pill: "metal-border--pill",
+            circle: "metal-border--circle"
+        },
+        flag: {
+            enabled: "metal-border--enabled",
+            unavailable: "metal-border--unavailable",
+            paused: "metal-border--paused"
+        }
+    },
+    Effect: {
+        base: "metal-border__effect"
+    },
+    Canvas: {
+        base: "metal-border__canvas"
+    },
+    Glow: {
+        base: "metal-border__glow"
+    },
+    Content: {
+        base: "metal-border__content"
+    }
+};
+const componentRecipe = recipe({
+    component: "metal-border",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,2 +1,2 @@
-export { default as MetalBorder } from "./MetalBorder";
-export type { MetalBorderProps, MetalBorderKind, MetalBorderPreset, MetalBorderResolvedTheme, MetalBorderTheme, } from "./MetalBorder";
+export { default as MetalBorder } from "./MetalBorder.generated";
+export type { MetalBorderProps, MetalBorderKind, MetalBorderPreset, MetalBorderResolvedTheme, MetalBorderTheme, } from "./MetalBorder.generated";

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

@@ -1 +1 @@
-export { default as MetalBorder } from "./MetalBorder.js";
+export { default as MetalBorder } from "./MetalBorder.generated.js";

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

@@ -0,0 +1,44 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Meter.css";
+import { 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: __LayoutComponent<MeterRootProps>;
+declare const MeterOutput: __LayoutComponent<MeterOutputProps>;
+declare const MeterTrack: __LayoutComponent<MeterTrackProps>;
+declare const MeterFill: __LayoutComponent<MeterFillProps>;
+declare const Meter: __LayoutComponent<MeterRootProps> & {
+    Root: __LayoutComponent<MeterRootProps>;
+    Output: __LayoutComponent<MeterOutputProps>;
+    Track: __LayoutComponent<MeterTrackProps>;
+    Fill: __LayoutComponent<MeterFillProps>;
+};
+export default Meter;
+export { Meter, MeterRoot, MeterOutput, MeterTrack, MeterFill };
+export type { MeterRootProps as MeterProps };