@pathscale/ui 2.4.0 → 2.6.0

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

@@ -1,8 +1,8 @@
-import { className, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { className, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./MetalBorder.css";
-import { createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createEffect, createSignal, omit, onCleanup, onSettled } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 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";
@@ -64,21 +64,7 @@ const ensureGlowCallback = ()=>{
     });
 };
 const __solidLayoutMetalBorder = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "contentClass",
-        "dataTheme",
-        "style",
-        "preset",
-        "strength",
-        "kind",
-        "glow",
-        "paused",
-        "theme",
-        "cornerRadius",
-        "ref"
-    ]);
+    const others = omit(p, "children", "class", "contentClass", "dataTheme", "style", "preset", "strength", "kind", "glow", "paused", "theme", "cornerRadius", "ref");
     let hostRef;
     let contentRef;
     let canvasRef;
@@ -93,21 +79,21 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
     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 preset = ()=>p.preset ?? DEFAULT_PRESET;
+    const kind = ()=>p.kind ?? DEFAULT_KIND;
+    const theme = ()=>p.theme ?? DEFAULT_THEME;
+    const strength = ()=>clampStrength(p.strength);
+    const glow = ()=>p.glow ?? false;
+    const effectivePaused = ()=>(p.paused ?? false) || prefersReduced();
+    const radiusCssValue = ()=>toRadiusCssValue(p.cornerRadius);
     const effectEnabled = ()=>!isWebGlUnavailable();
     const syncResolvedTheme = ()=>{
         if ("u" < typeof window) return;
-        setResolvedTheme(resolveThemeValue(theme(), local.dataTheme, hostRef));
+        setResolvedTheme(resolveThemeValue(theme(), p.dataTheme, hostRef));
     };
     const readCornerRadius = ()=>{
-        if ("number" == typeof local.cornerRadius) return local.cornerRadius;
-        if ("string" == typeof local.cornerRadius) return readRadiusPx(hostRef);
+        if ("number" == typeof p.cornerRadius) return p.cornerRadius;
+        if ("string" == typeof p.cornerRadius) return readRadiusPx(hostRef);
         const firstChild = contentRef?.firstElementChild;
         return readRadiusPx(firstChild instanceof HTMLElement ? firstChild : hostRef);
     };
@@ -118,8 +104,9 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             cssHeight: Math.max(1, Math.round(hostRef.getBoundingClientRect().height)),
             cornerRadius: readCornerRadius()
         });
-        if (glowHandles && glowRef) {
-            glowHandles = resizeGlow(glowHandles, glowRef, {
+        const glowNode = glowRef;
+        if (glowHandles && glowNode) {
+            glowHandles = resizeGlow(glowHandles, glowNode, {
                 ...getGlowOptions(hostRef, kind(), readCornerRadius()),
                 scale: 1
             });
@@ -149,7 +136,7 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
         glowHandles = null;
         if (glowRef) glowRef.innerHTML = "";
     };
-    onMount(()=>{
+    onSettled(()=>{
         if ("u" < typeof window) return;
         setPrefersReduced(prefersReducedMotion());
         syncResolvedTheme();
@@ -242,8 +229,9 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             kind: kind(),
             cornerRadius: readCornerRadius()
         });
-        if (glowHandles && glowRef) {
-            glowHandles = resizeGlow(glowHandles, glowRef, {
+        const glowNode = glowRef;
+        if (glowHandles && glowNode) {
+            glowHandles = resizeGlow(glowHandles, glowNode, {
                 ...getGlowOptions(hostRef, kind(), readCornerRadius()),
                 scale: 1
             });
@@ -264,60 +252,58 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
         if (glow()) attachGlow();
         else if (glowHandles) detachGlow();
     });
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-        use((element)=>{
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    ref(()=>(element)=>{
             hostRef = element;
-            if ("function" == typeof local.ref) local.ref(element);
+            if ("function" == typeof p.ref) p.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);
-            },
-            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$;
-    })();
+    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, p.class);
+        },
+        get ["data-kind"] () {
+            return kind();
+        },
+        get ["data-preset"] () {
+            return preset();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return {
+                ..."object" == typeof p.style && null !== p.style ? p.style : {},
+                "--metal-border-radius": radiusCssValue()
+            };
+        }
+    }), 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 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$4) : canvasRef = _el$4;
+                var _ref$3 = glowRef;
+                "function" == typeof _ref$3 || Array.isArray(_ref$3) ? ref(()=>_ref$3, _el$5) : glowRef = _el$5;
+                effect(()=>({
+                        e: CLASSES.Effect.base,
+                        t: CLASSES.Canvas.base,
+                        a: CLASSES.Glow.base
+                    }), ({ e, t, a }, _p$)=>{
+                    className(_el$3, e, _p$?.e);
+                    className(_el$4, t, _p$?.t);
+                    className(_el$5, a, _p$?.a);
+                });
+                return _el$3;
+            })() : effectEnabled();
+    })(), _el$2);
+    var _ref$ = contentRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$2) : contentRef = _el$2;
+    insert(_el$2, ()=>p.children);
+    effect(()=>twMerge(CLASSES.Content.base, p.contentClass), (_v$, _$p)=>{
+        className(_el$2, _v$, _$p);
+    });
+    return _el$;
 };
 const MetalBorder = defineComponent({
     recipe: componentRecipe,

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

@@ -24,7 +24,7 @@ export declare const CLASSES: {
         readonly base: "metal-border__content";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "metal-border";
     readonly slots: {
         readonly root: {};

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Meter.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, Flavor, State } from "../vocabulary";
 export type MeterSize = "sm" | "md" | "lg";
 export type MeterColor = "default" | "accent" | "success" | "warning" | "danger";

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

@@ -1,8 +1,8 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Meter.css";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createMemo, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Meter.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
 const MeterContext = createContext();
@@ -13,35 +13,19 @@ const useMeterContext = ()=>{
 };
 const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
 const __solidLayoutMeterRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "value",
-        "minValue",
-        "maxValue",
-        "lowValue",
-        "highValue",
-        "optimumValue",
-        "state",
-        "size",
-        "flavor",
-        "formatOptions",
-        "formatValue"
-    ]);
-    const minValue = createMemo(()=>local.minValue ?? 0);
+    const others = omit(p, "children", "class", "dataTheme", "style", "value", "minValue", "maxValue", "lowValue", "highValue", "optimumValue", "state", "size", "flavor", "formatOptions", "formatValue");
+    const minValue = createMemo(()=>p.minValue ?? 0);
     const maxValue = createMemo(()=>{
         const resolvedMin = minValue();
-        const resolvedMax = local.maxValue ?? 100;
+        const resolvedMax = p.maxValue ?? 100;
         return resolvedMax > resolvedMin ? resolvedMax : resolvedMin + 1;
     });
-    const clampedValue = createMemo(()=>clamp(local.value ?? minValue(), minValue(), maxValue()));
+    const clampedValue = createMemo(()=>clamp(p.value ?? minValue(), minValue(), maxValue()));
     const percentage = createMemo(()=>(clampedValue() - minValue()) / (maxValue() - minValue()) * 100);
     const formatter = createMemo(()=>{
-        if (!local.formatOptions) return;
+        if (!p.formatOptions) return;
         try {
-            return new Intl.NumberFormat(void 0, local.formatOptions);
+            return new Intl.NumberFormat(void 0, p.formatOptions);
         } catch  {
             return;
         }
@@ -52,16 +36,16 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
             minValue: minValue(),
             maxValue: maxValue(),
             percentage: percentage(),
-            isDisabled: Boolean("disabled" === local.state)
+            isDisabled: Boolean("disabled" === p.state)
         };
-        const valueText = local.formatValue ? local.formatValue(base.value, base) : formatter()?.format(base.value) ?? `${Math.round(base.percentage)}%`;
+        const valueText = p.formatValue ? p.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.flavor[local.flavor ?? "accent"] ?? `meter--flavor-${local.flavor ?? "accent"}`, "disabled" === local.state && CLASSES.state.disabled, local.class));
-    return createComponent(MeterContext.Provider, {
+    const rootClasses = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[p.size ?? "md"], CLASSES.flavor[p.flavor ?? "accent"] ?? `meter--flavor-${p.flavor ?? "accent"}`, "disabled" === p.state && CLASSES.state.disabled, p.class));
+    return createComponent(MeterContext, {
         value: {
             state
         },
@@ -84,33 +68,33 @@ const __solidLayoutMeterRoot = (_stable, p)=>{
                     return state().valueText;
                 },
                 get ["aria-disabled"] () {
-                    return "disabled" === local.state ? "true" : void 0;
+                    return "disabled" === p.state ? "true" : void 0;
                 },
                 get ["data-disabled"] () {
-                    return "disabled" === local.state ? "true" : void 0;
+                    return "disabled" === p.state ? "true" : void 0;
                 },
                 "data-slot": "meter",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get ["data-low-value"] () {
-                    return local.lowValue;
+                    return p.lowValue;
                 },
                 get ["data-high-value"] () {
-                    return local.highValue;
+                    return p.highValue;
                 },
                 get ["data-optimum-value"] () {
-                    return local.optimumValue;
+                    return p.optimumValue;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
             }, ()=>({
                     class: rootClasses()
-                })), false, true);
+                })), true);
             insert(_el$, (()=>{
-                var _c$ = memo(()=>"function" == typeof local.children);
-                return ()=>_c$() ? local.children(state()) : local.children;
+                var _c$ = memo(()=>"function" == typeof p.children);
+                return ()=>_c$() ? p.children(state()) : p.children;
             })());
             return _el$;
         }
@@ -122,29 +106,22 @@ const MeterRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutMeterOutput = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "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)
-            })), false, true);
-        insert(_el$2, ()=>local.children ?? state().valueText);
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$2();
+    spread(_el$2, mergeProps(others, {
+        "data-slot": "meter-output",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.output, p.class)
+        })), true);
+    insert(_el$2, ()=>p.children ?? state().valueText);
+    return _el$2;
 };
 const MeterOutput = defineComponent({
     recipe: componentRecipe,
@@ -152,28 +129,21 @@ const MeterOutput = defineComponent({
     embedded: true
 });
 const __solidLayoutMeterTrack = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "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)
-            })), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$3 = _tmpl$();
+    spread(_el$3, mergeProps(others, {
+        "data-slot": "meter-track",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.track, p.class)
+        })), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const MeterTrack = defineComponent({
     recipe: componentRecipe,
@@ -181,38 +151,32 @@ const MeterTrack = defineComponent({
     embedded: true
 });
 const __solidLayoutMeterFill = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "class", "dataTheme", "style");
     const { state } = useMeterContext();
     const style = createMemo(()=>{
-        if ("string" == typeof local.style) {
-            const trimmed = local.style.trim();
+        if ("string" == typeof p.style) {
+            const trimmed = p.style.trim();
             const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
             return `${trimmed}${suffix} width: ${state().percentage}%;`;
         }
         return {
-            ...local.style ?? {},
+            ...p.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)
-            })), false, false);
-        return _el$4;
-    })();
+    var _el$4 = _tmpl$();
+    spread(_el$4, mergeProps(others, {
+        "data-slot": "meter-fill",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return style();
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.fill, p.class)
+        })), false);
+    return _el$4;
 };
 const MeterFill = defineComponent({
     recipe: componentRecipe,

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

@@ -22,7 +22,7 @@ export declare const CLASSES: {
         readonly disabled: "meter--disabled";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "meter";
     readonly slots: {
         readonly meter: {};

package/dist/components/navbar/Navbar.generated.d.ts

@@ -1,10 +1,13 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Navbar.css";
-import { type JSX } from "solid-js";
-import type { UIBaseProps } from "../vocabulary";
+import { type JSX } from "@solidjs/web";
+import "../_shared/material.css";
+import type { Material, UIBaseProps } from "../vocabulary";
 export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & UIBaseProps & {
     as?: keyof JSX.IntrinsicElements;
     dataTheme?: string;
+    /** What the bar is made of. `solid` by default. */
+    material?: Material;
 };
 declare const _default: __LayoutComponent<NavbarProps> & {
     Start: __LayoutComponent<JSX.HTMLAttributes<HTMLDivElement>>;

package/dist/components/navbar/Navbar.generated.js

@@ -1,38 +1,36 @@
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Navbar.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import NavbarSection_generated from "./NavbarSection.generated.js";
 import NavbarStack_generated from "./NavbarStack.generated.js";
 import NavbarRow_generated from "./NavbarRow.generated.js";
+import "../_shared/material.css";
 import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
 const __solidLayoutNavbar = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "as",
-        "class",
-        "style",
-        "children",
-        "dataTheme"
-    ]);
-    const Tag = local.as || "div";
-    const classes = ()=>twMerge(CLASSES.navbar.base, local.class);
+    const others = omit(p, "as", "class", "style", "children", "dataTheme", "material");
+    const Tag = p.as || "div";
+    const classes = ()=>twMerge(CLASSES.navbar.base, p.class);
     return createComponent(Dynamic, mergeProps({
         component: Tag,
         role: "navigation",
         "aria-label": "Navbar"
     }, others, {
         get ["data-theme"] () {
-            return local.dataTheme;
+            return p.dataTheme;
+        },
+        get ["data-material"] () {
+            return p.material ?? "solid";
         }
     }, ()=>({
             class: classes()
         }), {
         get style () {
-            return local.style;
+            return p.style;
         },
         get children () {
-            return local.children;
+            return p.children;
         }
     }));
 };

package/dist/components/navbar/Navbar.recipe.d.ts

@@ -48,7 +48,7 @@ export declare const CLASSES: {
         };
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "navbar";
     readonly slots: {
         readonly root: {};

package/dist/components/navbar/NavbarRow.generated.d.ts

@@ -1,5 +1,5 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, Flavor, Variant } from "../vocabulary";
 export type NavbarRowProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps & {
     bordered?: boolean;