@pathscale/ui 1.1.37 → 1.1.39

package/dist/components/footer/footer.css

@@ -1,51 +1,51 @@
 @layer components {
-  .footer-title {
-      margin-bottom: calc(0.25rem * 2);
-      text-transform: uppercase;
-      opacity: 60%;
-      font-weight: 600;
-    }
+  .footer__title {
+    margin-bottom: calc(0.25rem * 2);
+    text-transform: uppercase;
+    opacity: 60%;
+    font-weight: 600;
+  }
 
   .footer {
-      display: grid;
-      width: 100%;
-      grid-auto-flow: row;
-      place-items: start;
-      column-gap: calc(0.25rem * 4);
-      row-gap: calc(0.25rem * 10);
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-    }
+    display: grid;
+    width: 100%;
+    grid-auto-flow: row;
+    place-items: start;
+    column-gap: calc(0.25rem * 4);
+    row-gap: calc(0.25rem * 10);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 
   .footer > * {
-      display: grid;
-      place-items: start;
-      gap: calc(0.25rem * 2);
-    }
-
-  .footer.footer-center {
-      grid-auto-flow: column dense;
-      place-items: center;
-      text-align: center;
-    }
-
-  .footer.footer-center > * {
-      place-items: center;
-    }
-
-  .footer-horizontal {
-      grid-auto-flow: column;
-    }
-
-  .footer-horizontal.footer-center {
-      grid-auto-flow: row dense;
-    }
-
-  .footer-vertical {
-      grid-auto-flow: row;
-    }
-
-  .footer-vertical.footer-center {
-      grid-auto-flow: column dense;
-    }
+    display: grid;
+    place-items: start;
+    gap: calc(0.25rem * 2);
+  }
+
+  .footer--center {
+    grid-auto-flow: column dense;
+    place-items: center;
+    text-align: center;
+  }
+
+  .footer--center > * {
+    place-items: center;
+  }
+
+  .footer--horizontal {
+    grid-auto-flow: column;
+  }
+
+  .footer--horizontal.footer--center {
+    grid-auto-flow: row dense;
+  }
+
+  .footer--vertical {
+    grid-auto-flow: row;
+  }
+
+  .footer--vertical.footer--center {
+    grid-auto-flow: column dense;
+  }
 }

package/dist/components/glass-panel/GlassPanel.classes.d.ts

@@ -0,0 +1,44 @@
+export declare const CLASSES: {
+    readonly base: "glass-panel";
+    readonly blur: {
+        readonly none: "glass-panel--blur-none";
+        readonly sm: "glass-panel--blur-sm";
+        readonly md: "glass-panel--blur-md";
+        readonly lg: "glass-panel--blur-lg";
+        readonly xl: "glass-panel--blur-xl";
+        readonly "2xl": "glass-panel--blur-2xl";
+    };
+    readonly size: {
+        readonly xs: "glass-panel__content--xs";
+        readonly sm: "glass-panel__content--sm";
+        readonly md: "glass-panel__content--md";
+        readonly lg: "glass-panel__content--lg";
+        readonly xl: "glass-panel__content--xl";
+    };
+    readonly accent: {
+        readonly primary: "glass-panel--accent-primary";
+        readonly secondary: "glass-panel--accent-secondary";
+        readonly accent: "glass-panel--accent-accent";
+        readonly info: "glass-panel--accent-info";
+        readonly success: "glass-panel--accent-success";
+        readonly warning: "glass-panel--accent-warning";
+        readonly error: "glass-panel--accent-error";
+        readonly neutral: "glass-panel--accent-neutral";
+        readonly ghost: "glass-panel--accent-ghost";
+    };
+    readonly flag: {
+        readonly transparent: "glass-panel--transparent";
+        readonly glow: "glass-panel--glow";
+        readonly contentCollapsed: "glass-panel__content--collapsed";
+        readonly contentCollapsible: "glass-panel__content--collapsible";
+        readonly contentInnerHidden: "glass-panel__content-inner--hidden";
+        readonly chevronOpen: "glass-panel__chevron--open";
+    };
+    readonly slot: {
+        readonly headerButton: "glass-panel__header-button";
+        readonly headerLabel: "glass-panel__header-label";
+        readonly chevron: "glass-panel__chevron";
+        readonly content: "glass-panel__content";
+        readonly contentInner: "glass-panel__content-inner";
+    };
+};

package/dist/components/glass-panel/GlassPanel.classes.js

@@ -0,0 +1,45 @@
+const CLASSES = {
+    base: "glass-panel",
+    blur: {
+        none: "glass-panel--blur-none",
+        sm: "glass-panel--blur-sm",
+        md: "glass-panel--blur-md",
+        lg: "glass-panel--blur-lg",
+        xl: "glass-panel--blur-xl",
+        "2xl": "glass-panel--blur-2xl"
+    },
+    size: {
+        xs: "glass-panel__content--xs",
+        sm: "glass-panel__content--sm",
+        md: "glass-panel__content--md",
+        lg: "glass-panel__content--lg",
+        xl: "glass-panel__content--xl"
+    },
+    accent: {
+        primary: "glass-panel--accent-primary",
+        secondary: "glass-panel--accent-secondary",
+        accent: "glass-panel--accent-accent",
+        info: "glass-panel--accent-info",
+        success: "glass-panel--accent-success",
+        warning: "glass-panel--accent-warning",
+        error: "glass-panel--accent-error",
+        neutral: "glass-panel--accent-neutral",
+        ghost: "glass-panel--accent-ghost"
+    },
+    flag: {
+        transparent: "glass-panel--transparent",
+        glow: "glass-panel--glow",
+        contentCollapsed: "glass-panel__content--collapsed",
+        contentCollapsible: "glass-panel__content--collapsible",
+        contentInnerHidden: "glass-panel__content-inner--hidden",
+        chevronOpen: "glass-panel__chevron--open"
+    },
+    slot: {
+        headerButton: "glass-panel__header-button",
+        headerLabel: "glass-panel__header-label",
+        chevron: "glass-panel__chevron",
+        content: "glass-panel__content",
+        contentInner: "glass-panel__content-inner"
+    }
+};
+export { CLASSES };

package/dist/components/glass-panel/GlassPanel.css

@@ -0,0 +1,170 @@
+@layer components {
+  .glass-panel {
+    border-radius: 0.75rem;
+    transition: all 200ms ease-in-out;
+    background: color-mix(in srgb, var(--color-base-300) 45%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent);
+  }
+
+  .glass-panel--transparent {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  .glass-panel--glow {
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
+  }
+
+  .glass-panel--blur-none {
+    backdrop-filter: none;
+  }
+
+  .glass-panel--blur-sm {
+    backdrop-filter: blur(4px);
+  }
+
+  .glass-panel--blur-md {
+    backdrop-filter: blur(12px);
+  }
+
+  .glass-panel--blur-lg {
+    backdrop-filter: blur(16px);
+  }
+
+  .glass-panel--blur-xl {
+    backdrop-filter: blur(24px);
+  }
+
+  .glass-panel--blur-2xl {
+    backdrop-filter: blur(40px);
+  }
+
+  .glass-panel--accent-primary,
+  .glass-panel--accent-secondary,
+  .glass-panel--accent-accent,
+  .glass-panel--accent-info,
+  .glass-panel--accent-success,
+  .glass-panel--accent-warning,
+  .glass-panel--accent-error,
+  .glass-panel--accent-neutral,
+  .glass-panel--accent-ghost {
+    border-left-width: 2px;
+  }
+
+  .glass-panel--accent-primary {
+    border-left-color: var(--color-primary);
+  }
+
+  .glass-panel--accent-secondary {
+    border-left-color: var(--color-secondary);
+  }
+
+  .glass-panel--accent-accent {
+    border-left-color: var(--color-accent);
+  }
+
+  .glass-panel--accent-info {
+    border-left-color: var(--color-info);
+  }
+
+  .glass-panel--accent-success {
+    border-left-color: var(--color-success);
+  }
+
+  .glass-panel--accent-warning {
+    border-left-color: var(--color-warning);
+  }
+
+  .glass-panel--accent-error {
+    border-left-color: var(--color-error);
+  }
+
+  .glass-panel--accent-neutral {
+    border-left-color: var(--color-neutral);
+  }
+
+  .glass-panel--accent-ghost {
+    border-left-color: transparent;
+  }
+
+  .glass-panel__header-button {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease;
+  }
+
+  .glass-panel__header-button:hover {
+    color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
+  }
+
+  .glass-panel__header-button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .glass-panel__header-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .glass-panel__chevron {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 200ms ease;
+  }
+
+  .glass-panel__chevron--open {
+    transform: rotate(180deg);
+  }
+
+  .glass-panel__content {
+    display: grid;
+    transition:
+      grid-template-rows 200ms ease-in-out,
+      opacity 200ms ease-in-out;
+  }
+
+  .glass-panel__content--collapsible {
+    overflow: hidden;
+  }
+
+  .glass-panel__content--collapsed {
+    opacity: 0;
+  }
+
+  .glass-panel__content-inner--hidden {
+    overflow: hidden;
+  }
+
+  .glass-panel__content--xs {
+    padding: 0.5rem;
+  }
+
+  .glass-panel__content--sm {
+    padding: 0.75rem;
+  }
+
+  .glass-panel__content--md {
+    padding: 1rem;
+  }
+
+  .glass-panel__content--lg {
+    padding: 1.25rem;
+  }
+
+  .glass-panel__content--xl {
+    padding: 1.5rem;
+  }
+}

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -1,3 +1,4 @@
+import "./GlassPanel.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
 export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";

package/dist/components/glass-panel/GlassPanel.js

@@ -1,34 +1,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./GlassPanel.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex w-full items-center justify-between gap-2 px-4 py-3 text-sm font-medium cursor-pointer select-none transition-colors duration-150 text-base-content/50 hover:text-base-content/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="flex items-center gap-2"></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
-const BLUR_MAP = {
-    none: "",
-    sm: "backdrop-blur-sm",
-    md: "backdrop-blur-md",
-    lg: "backdrop-blur-lg",
-    xl: "backdrop-blur-xl",
-    "2xl": "backdrop-blur-2xl"
-};
-const SIZE_PADDING = {
-    xs: "p-2",
-    sm: "p-3",
-    md: "p-4",
-    lg: "p-5",
-    xl: "p-6"
-};
-const ACCENT_BORDER = {
-    primary: "border-l-primary",
-    secondary: "border-l-secondary",
-    accent: "border-l-accent",
-    info: "border-l-info",
-    success: "border-l-success",
-    warning: "border-l-warning",
-    error: "border-l-error",
-    neutral: "border-l-neutral",
-    ghost: "border-l-transparent"
-};
+import * as __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "blur",
@@ -56,29 +31,14 @@ const GlassPanel = (props)=>{
     const isControlled = ()=>void 0 !== local.open;
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
     const isOpen = ()=>isControlled() ? local.open : internalOpen();
+    const accentKey = ()=>local.accent ?? "ghost";
     const handleToggle = ()=>{
         const next = !isOpen();
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("glass-panel", "rounded-xl", "transition-all duration-200 ease-in-out", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "bg-transparent": local.transparent,
-            [BLUR_MAP[blur()]]: !local.transparent && "none" !== blur(),
-            "border-l-2": !!local.accent,
-            [ACCENT_BORDER[local.accent ?? ""]]: !!local.accent
-        }), local.class, local.className);
-    const glassStyle = ()=>{
-        const base = {
-            ...local.style || {}
-        };
-        if (!local.transparent) {
-            base.background = "color-mix(in srgb, var(--color-base-300) 45%, transparent)";
-            base.border = "1px solid color-mix(in srgb, var(--color-base-content) 12%, transparent)";
-        }
-        if (local.glow) base["box-shadow"] = "inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent)";
-        return base;
-    };
-    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.paddingX || local.paddingY ? "" : SIZE_PADDING[size()], local.paddingX, local.paddingY);
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
+    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.content, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsible, local.collapsible && !isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsed, (!local.collapsible || isOpen()) && !(local.paddingX || local.paddingY) && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.size[size()], local.paddingX, local.paddingY);
     return (()=>{
         var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
@@ -89,7 +49,7 @@ const GlassPanel = (props)=>{
                 return local.dataTheme;
             },
             get style () {
-                return glassStyle();
+                return local.style;
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -110,15 +70,17 @@ const GlassPanel = (props)=>{
                 }), null);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title, null);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                    var _v$ = isOpen(), _v$2 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("h-4 w-4 transition-transform duration-200", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-                        "rotate-180": isOpen()
-                    }));
-                    _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-expanded", _p$.e = _v$);
-                    _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", _p$.t = _v$2);
+                    var _v$ = __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerButton, _v$2 = isOpen(), _v$3 = __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerLabel, _v$4 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.chevron, isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.chevronOpen);
+                    _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                    _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-expanded", _p$.t = _v$2);
+                    _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.a = _v$3);
+                    _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", _p$.o = _v$4);
                     return _p$;
                 }, {
                     e: void 0,
-                    t: void 0
+                    t: void 0,
+                    a: void 0,
+                    o: void 0
                 });
                 return _el$2;
             }
@@ -126,11 +88,11 @@ const GlassPanel = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$3 = `grid transition-[grid-template-rows,opacity] duration-200 ease-in-out ${local.collapsible ? "overflow-hidden" : ""} ${local.collapsible && !isOpen() ? "" : contentClasses()}`, _v$4 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$5 = !local.collapsible || isOpen() ? "1" : "0", _v$6 = local.collapsible ? "overflow-hidden" : "";
-            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.e = _v$3);
-            _v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$5.style.setProperty("grid-template-rows", _v$4) : _el$5.style.removeProperty("grid-template-rows"));
-            _v$5 !== _p$.a && (null != (_p$.a = _v$5) ? _el$5.style.setProperty("opacity", _v$5) : _el$5.style.removeProperty("opacity"));
-            _v$6 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.o = _v$6);
+            var _v$5 = contentClasses(), _v$6 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$7 = !local.collapsible || isOpen() ? "1" : "0", _v$8 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.contentInner, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentInnerHidden);
+            _v$5 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.e = _v$5);
+            _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$5.style.setProperty("grid-template-rows", _v$6) : _el$5.style.removeProperty("grid-template-rows"));
+            _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$5.style.setProperty("opacity", _v$7) : _el$5.style.removeProperty("opacity"));
+            _v$8 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.o = _v$8);
             return _p$;
         }, {
             e: void 0,

package/dist/components/glow-card/GlowCard.classes.d.ts

@@ -0,0 +1,4 @@
+export declare const CLASSES: {
+    readonly base: "glow-card";
+    readonly isolate: "glow-card--isolate";
+};

package/dist/components/glow-card/GlowCard.classes.js

@@ -0,0 +1,5 @@
+const CLASSES = {
+    base: "glow-card",
+    isolate: "glow-card--isolate"
+};
+export { CLASSES };

package/dist/components/glow-card/GlowCard.css

@@ -5,6 +5,10 @@
   border-radius: inherit;
 }
 
+.glow-card--isolate {
+  isolation: isolate;
+}
+
 .glow-card::before,
 .glow-card::after {
   content: "";

package/dist/components/glow-card/GlowCard.js

@@ -3,6 +3,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import "./GlowCard.css";
+import * as __WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__ from "./GlowCard.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 function GlowCard(props) {
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -29,7 +30,7 @@ function GlowCard(props) {
                 return local.dataTheme;
             },
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("glow-card isolate", local.class, local.className));
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(__WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__.CLASSES.isolate, local.class, local.className));
             },
             get style () {
                 return local.style;

package/dist/components/grid/Grid.classes.d.ts

@@ -0,0 +1,54 @@
+export declare const CLASSES: {
+    readonly base: "grid-layout";
+    readonly cols: {
+        readonly "1": "grid-cols-1";
+        readonly "2": "grid-cols-2";
+        readonly "3": "grid-cols-3";
+        readonly "4": "grid-cols-4";
+        readonly "5": "grid-cols-5";
+        readonly "6": "grid-cols-6";
+        readonly "7": "grid-cols-7";
+        readonly "8": "grid-cols-8";
+        readonly "9": "grid-cols-9";
+        readonly "10": "grid-cols-10";
+        readonly "11": "grid-cols-11";
+        readonly "12": "grid-cols-12";
+    };
+    readonly rows: {
+        readonly "1": "grid-rows-1";
+        readonly "2": "grid-rows-2";
+        readonly "3": "grid-rows-3";
+        readonly "4": "grid-rows-4";
+        readonly "5": "grid-rows-5";
+        readonly "6": "grid-rows-6";
+        readonly "7": "grid-rows-7";
+        readonly "8": "grid-rows-8";
+        readonly "9": "grid-rows-9";
+        readonly "10": "grid-rows-10";
+        readonly "11": "grid-rows-11";
+        readonly "12": "grid-rows-12";
+    };
+    readonly flow: {
+        readonly row: "grid-flow-row";
+        readonly col: "grid-flow-col";
+        readonly "row-dense": "grid-flow-row-dense";
+        readonly "col-dense": "grid-flow-col-dense";
+    };
+    readonly gap: {
+        readonly none: "gap-0";
+        readonly sm: "gap-2";
+        readonly md: "gap-4";
+        readonly lg: "gap-6";
+        readonly xl: "gap-8";
+    };
+    readonly autoCols: {
+        readonly min: "auto-cols-min";
+        readonly max: "auto-cols-max";
+        readonly fr: "auto-cols-fr";
+    };
+    readonly autoRows: {
+        readonly min: "auto-rows-min";
+        readonly max: "auto-rows-max";
+        readonly fr: "auto-rows-fr";
+    };
+};

package/dist/components/grid/Grid.classes.js

@@ -0,0 +1,55 @@
+const CLASSES = {
+    base: "grid-layout",
+    cols: {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+        7: "grid-cols-7",
+        8: "grid-cols-8",
+        9: "grid-cols-9",
+        10: "grid-cols-10",
+        11: "grid-cols-11",
+        12: "grid-cols-12"
+    },
+    rows: {
+        1: "grid-rows-1",
+        2: "grid-rows-2",
+        3: "grid-rows-3",
+        4: "grid-rows-4",
+        5: "grid-rows-5",
+        6: "grid-rows-6",
+        7: "grid-rows-7",
+        8: "grid-rows-8",
+        9: "grid-rows-9",
+        10: "grid-rows-10",
+        11: "grid-rows-11",
+        12: "grid-rows-12"
+    },
+    flow: {
+        row: "grid-flow-row",
+        col: "grid-flow-col",
+        "row-dense": "grid-flow-row-dense",
+        "col-dense": "grid-flow-col-dense"
+    },
+    gap: {
+        none: "gap-0",
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+        xl: "gap-8"
+    },
+    autoCols: {
+        min: "auto-cols-min",
+        max: "auto-cols-max",
+        fr: "auto-cols-fr"
+    },
+    autoRows: {
+        min: "auto-rows-min",
+        max: "auto-rows-max",
+        fr: "auto-rows-fr"
+    }
+};
+export { CLASSES };

package/dist/components/grid/Grid.css

@@ -0,0 +1,5 @@
+@layer components {
+  .grid-layout {
+    display: grid;
+  }
+}

package/dist/components/grid/Grid.d.ts

@@ -1,3 +1,4 @@
+import "./Grid.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { ResponsiveProp } from "../types";