@pathscale/ui 1.2.1 → 1.2.2

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

@@ -1,6 +1 @@
-export { default } from "./Modal";
-export type { ModalProps as TModalProps, DialogProps as TDialogProps, } from "./Modal";
-export type { ModalHeaderProps as TModalHeaderProps } from "./ModalHeader";
-export type { ModalBodyProps as TModalBodyProps } from "./ModalBody";
-export type { ModalActionsProps as TModalActionsProps } from "./ModalActions";
-export type { ModalLegacyProps as TModalLegacyProps } from "./ModalLegacy";
+export { default, ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, type ModalProps, type DialogProps, type ModalPlacement, type ModalSize, type ModalBackdropVariant, type ModalScrollBehavior, type ModalRootProps, type ModalTriggerProps, type ModalBackdropProps, type ModalContentProps, type ModalHeaderProps, type ModalHeadingProps, type ModalIconProps, type ModalBodyProps, type ModalFooterProps, type ModalCloseTriggerProps, } from "./Modal";

package/dist/components/modal/index.js

@@ -1,3 +1,13 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
+var __webpack_exports__ModalBackdrop = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalBackdrop;
+var __webpack_exports__ModalBody = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalBody;
+var __webpack_exports__ModalCloseTrigger = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalCloseTrigger;
+var __webpack_exports__ModalContent = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalContent;
+var __webpack_exports__ModalFooter = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalFooter;
+var __webpack_exports__ModalHeader = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalHeader;
+var __webpack_exports__ModalHeading = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalHeading;
+var __webpack_exports__ModalIcon = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalIcon;
+var __webpack_exports__ModalRoot = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalRoot;
+var __webpack_exports__ModalTrigger = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__.ModalTrigger;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"];
-export { __webpack_exports__default as default };
+export { __webpack_exports__ModalBackdrop as ModalBackdrop, __webpack_exports__ModalBody as ModalBody, __webpack_exports__ModalCloseTrigger as ModalCloseTrigger, __webpack_exports__ModalContent as ModalContent, __webpack_exports__ModalFooter as ModalFooter, __webpack_exports__ModalHeader as ModalHeader, __webpack_exports__ModalHeading as ModalHeading, __webpack_exports__ModalIcon as ModalIcon, __webpack_exports__ModalRoot as ModalRoot, __webpack_exports__ModalTrigger as ModalTrigger, __webpack_exports__default as default };

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

@@ -0,0 +1,38 @@
+export declare const CLASSES: {
+    readonly navbar: {
+        readonly base: "navbar";
+    };
+    readonly section: {
+        readonly base: "navbar__section";
+        readonly variant: {
+            readonly start: "navbar__section--start";
+            readonly center: "navbar__section--center";
+            readonly end: "navbar__section--end";
+        };
+    };
+    readonly stack: {
+        readonly base: "navbar__stack";
+        readonly flag: {
+            readonly sticky: "navbar__stack--sticky";
+            readonly container: "navbar__stack--container";
+        };
+    };
+    readonly row: {
+        readonly base: "navbar__row";
+        readonly flag: {
+            readonly bordered: "navbar__row--bordered";
+            readonly padded: "navbar__row--padded";
+        };
+        readonly color: {
+            readonly ghost: "navbar__row--ghost";
+            readonly neutral: "navbar__row--neutral";
+            readonly primary: "navbar__row--primary";
+            readonly secondary: "navbar__row--secondary";
+            readonly accent: "navbar__row--accent";
+            readonly info: "navbar__row--info";
+            readonly success: "navbar__row--success";
+            readonly warning: "navbar__row--warning";
+            readonly error: "navbar__row--error";
+        };
+    };
+};

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

@@ -0,0 +1,39 @@
+const CLASSES = {
+    navbar: {
+        base: "navbar"
+    },
+    section: {
+        base: "navbar__section",
+        variant: {
+            start: "navbar__section--start",
+            center: "navbar__section--center",
+            end: "navbar__section--end"
+        }
+    },
+    stack: {
+        base: "navbar__stack",
+        flag: {
+            sticky: "navbar__stack--sticky",
+            container: "navbar__stack--container"
+        }
+    },
+    row: {
+        base: "navbar__row",
+        flag: {
+            bordered: "navbar__row--bordered",
+            padded: "navbar__row--padded"
+        },
+        color: {
+            ghost: "navbar__row--ghost",
+            neutral: "navbar__row--neutral",
+            primary: "navbar__row--primary",
+            secondary: "navbar__row--secondary",
+            accent: "navbar__row--accent",
+            info: "navbar__row--info",
+            success: "navbar__row--success",
+            warning: "navbar__row--warning",
+            error: "navbar__row--error"
+        }
+    }
+};
+export { CLASSES };

package/dist/components/navbar/Navbar.css

@@ -0,0 +1,110 @@
+@layer components {
+  .navbar {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: 4rem;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  .navbar__section {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .navbar__section--start {
+    width: 50%;
+    justify-content: flex-start;
+  }
+
+  .navbar__section--center {
+    flex-shrink: 0;
+    justify-content: center;
+  }
+
+  .navbar__section--end {
+    width: 50%;
+    justify-content: flex-end;
+  }
+
+  .navbar__stack {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .navbar__stack--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+  }
+
+  .navbar__stack--container {
+    width: 100%;
+    max-width: 80rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+
+  .navbar__row {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  .navbar__row--bordered {
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
+  }
+
+  .navbar__row--padded {
+    padding: 0.5rem 1rem;
+  }
+
+  .navbar__row--ghost {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+  }
+
+  .navbar__row--neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+  }
+
+  .navbar__row--primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .navbar__row--secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+  }
+
+  .navbar__row--accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+  }
+
+  .navbar__row--info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+  }
+
+  .navbar__row--success {
+    background-color: var(--color-success);
+    color: var(--color-success-foreground);
+  }
+
+  .navbar__row--warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-foreground);
+  }
+
+  .navbar__row--error {
+    background-color: var(--color-error);
+    color: var(--color-error-foreground);
+  }
+}

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

@@ -1,4 +1,4 @@
-import "./navbar.css";
+import "./Navbar.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps & {

package/dist/components/navbar/Navbar.js

@@ -1,10 +1,11 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./navbar.css";
+import "./Navbar.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__NavbarSection_js_c2bbb2b2__ from "./NavbarSection.js";
 import * as __WEBPACK_EXTERNAL_MODULE__NavbarStack_js_59d9b581__ from "./NavbarStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__NavbarRow_js_2f1ed444__ from "./NavbarRow.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
 const Navbar = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "as",
@@ -15,7 +16,7 @@ const Navbar = (props)=>{
         "dataTheme"
     ]);
     const Tag = local.as || "div";
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("navbar", local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.navbar.base, local.class, local.className);
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         component: Tag,
         role: "navigation",
@@ -23,10 +24,10 @@ const Navbar = (props)=>{
     }, others, {
         get ["data-theme"] () {
             return local.dataTheme;
-        },
-        get ["class"] () {
-            return classes();
-        },
+        }
+    }, ()=>({
+            class: classes()
+        }), {
         get style () {
             return local.style;
         },

package/dist/components/navbar/NavbarRow.js

@@ -1,7 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 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 * as __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const NavbarRow = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,25 +15,13 @@ const NavbarRow = (props)=>{
         "dataTheme"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex items-center", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "border-b border-gray-200": true === local.bordered,
-            "px-4 py-2": false !== local.padded,
-            "bg-base-100": !local.color || "ghost" === local.color,
-            "bg-neutral text-neutral-content": "neutral" === local.color,
-            "bg-primary text-primary-content": "primary" === local.color,
-            "bg-secondary text-secondary-content": "secondary" === local.color,
-            "bg-accent text-accent-content": "accent" === local.color,
-            "bg-info text-info-content": "info" === local.color,
-            "bg-success text-success-content": "success" === local.color,
-            "bg-warning text-warning-content": "warning" === local.color,
-            "bg-error text-error-content": "error" === local.color
-        }), local.class, local.className));
+    const colorKey = ()=>local.color && "ghost" !== local.color ? local.color : "ghost";
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.row.base, true === local.bordered && __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.row.flag.bordered, false !== local.padded && __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.row.flag.padded, __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.row.color[colorKey()], local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             },

package/dist/components/navbar/NavbarSection.js

@@ -1,7 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const NavbarSection = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -12,20 +12,16 @@ const NavbarSection = (props)=>{
         "className",
         "style"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "navbar-start": "start" === local.section,
-            "navbar-center": "center" === local.section,
-            "navbar-end": "end" === local.section
-        }));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.section.base, __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.section.variant[local.section], local.class, local.className);
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
+            }
+        }, ()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             }

package/dist/components/navbar/NavbarStack.js

@@ -1,9 +1,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 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 * as __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const NavbarStack_NavbarStack = (props)=>{
+const NavbarStack = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "sticky",
@@ -14,16 +14,12 @@ const NavbarStack_NavbarStack = (props)=>{
         "dataTheme"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("navbar-stack", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "sticky top-0 z-30": local.sticky,
-            "max-w-screen-xl mx-auto px-4": local.container
-        })));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.stack.base, local.sticky && __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.stack.flag.sticky, local.container && __WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.stack.flag.container, local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             },
@@ -35,5 +31,5 @@ const NavbarStack_NavbarStack = (props)=>{
         return _el$;
     })();
 };
-const NavbarStack = NavbarStack_NavbarStack;
-export { NavbarStack as default };
+const navbar_NavbarStack = NavbarStack;
+export { navbar_NavbarStack as default };

package/dist/components/noise-background/NoiseBackground.classes.d.ts

@@ -0,0 +1,15 @@
+export declare const CLASSES: {
+    readonly base: "noise-background";
+    readonly flag: {
+        readonly backdropBlur: "noise-background--backdrop-blur";
+    };
+    readonly slot: {
+        readonly layer0: "noise-background__layer noise-background__layer--0";
+        readonly layer1: "noise-background__layer noise-background__layer--1";
+        readonly layer2: "noise-background__layer noise-background__layer--2";
+        readonly strip: "noise-background__strip";
+        readonly noiseWrap: "noise-background__noise-wrap";
+        readonly noiseImage: "noise-background__noise-image";
+        readonly content: "noise-background__content";
+    };
+};

package/dist/components/noise-background/NoiseBackground.classes.js

@@ -0,0 +1,16 @@
+const CLASSES = {
+    base: "noise-background",
+    flag: {
+        backdropBlur: "noise-background--backdrop-blur"
+    },
+    slot: {
+        layer0: "noise-background__layer noise-background__layer--0",
+        layer1: "noise-background__layer noise-background__layer--1",
+        layer2: "noise-background__layer noise-background__layer--2",
+        strip: "noise-background__strip",
+        noiseWrap: "noise-background__noise-wrap",
+        noiseImage: "noise-background__noise-image",
+        content: "noise-background__content"
+    }
+};
+export { CLASSES };

package/dist/components/noise-background/NoiseBackground.css

@@ -0,0 +1,66 @@
+@layer components {
+  .noise-background {
+    position: relative;
+    overflow: hidden;
+    background: var(--color-base-200);
+    backdrop-filter: blur(4px);
+    box-shadow:
+      0 1px 0 0 var(--color-base-300) inset,
+      0 1px 0 0 var(--color-base-100);
+  }
+
+  .noise-background--backdrop-blur::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(16px);
+    pointer-events: none;
+  }
+
+  .noise-background__layer {
+    position: absolute;
+    inset: 0;
+  }
+
+  .noise-background__layer--0 {
+    opacity: 0.4;
+  }
+
+  .noise-background__layer--1 {
+    opacity: 0.3;
+  }
+
+  .noise-background__layer--2 {
+    opacity: 0.25;
+  }
+
+  .noise-background__strip {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    height: 0.25rem;
+    opacity: 0.8;
+    filter: blur(4px);
+  }
+
+  .noise-background__noise-wrap {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .noise-background__noise-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    mix-blend-mode: overlay;
+  }
+
+  .noise-background__content {
+    position: relative;
+    z-index: 10;
+  }
+}

package/dist/components/noise-background/NoiseBackground.d.ts

@@ -1,3 +1,4 @@
+import "./NoiseBackground.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type NoiseBackgroundProps = {

package/dist/components/noise-background/NoiseBackground.js

@@ -1,7 +1,9 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./NoiseBackground.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0 opacity-40"></div><div class="absolute inset-0 opacity-30"></div><div class="absolute inset-0 opacity-25"></div><div class="absolute inset-x-0 top-0 h-1 opacity-80 blur-sm"></div><div>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pointer-events-none absolute inset-0 overflow-hidden"><img alt class="h-full w-full object-cover mix-blend-overlay">');
+import * as __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__ from "./NoiseBackground.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div></div><div></div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><img alt>");
 function createSpring(initial, stiffness = 100, damping = 30) {
     let current = initial;
     let velocity = 0;
@@ -138,16 +140,15 @@ const NoiseBackground = (rawProps)=>{
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
         if (void 0 !== rafId) cancelAnimationFrame(rafId);
     });
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("group relative overflow-hidden bg-base-200 backdrop-blur-sm", "shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", local.containerClass);
-    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative z-10", local.class, local.className);
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.base, (local.backdropBlur ?? false) && __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.flag.backdropBlur, local.containerClass);
+    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.content, local.class, local.className);
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
         var _ref$ = containerRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return containerClasses();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: containerClasses()
+            }), {
             get style () {
                 return {
                     "--noise-opacity": noiseIntensity(),
@@ -155,44 +156,62 @@ const NoiseBackground = (rawProps)=>{
                     ..."object" == typeof local.style ? local.style : {}
                 };
             },
-            get classList () {
-                return {
-                    "after:absolute after:inset-0 after:h-full after:w-full after:backdrop-blur-lg after:content-['']": local.backdropBlur ?? false
-                };
-            },
             get ["data-theme"] () {
                 return local.dataTheme;
             }
         }, others), false, true);
         var _ref$2 = layer0;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : layer0 = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.layer0
+            })), false, false);
         var _ref$3 = layer1;
         "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$3) : layer1 = _el$3;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.layer1
+            })), false, false);
         var _ref$4 = layer2;
         "function" == typeof _ref$4 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$4, _el$4) : layer2 = _el$4;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.layer2
+            })), false, false);
         var _ref$5 = stripEl;
         "function" == typeof _ref$5 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$5, _el$5) : stripEl = _el$5;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.strip
+            }), {
+            get style () {
+                return {
+                    background: `linear-gradient(to right, ${colors().join(", ")})`,
+                    "border-radius": `${borderRadius()} ${borderRadius()} 0 0`
+                };
+            }
+        }), false, false);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
             var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(local.showNoise ?? false));
             return ()=>_c$() && (()=>{
                     var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild;
-                    _el$8.style.setProperty("opacity", "var(--noise-opacity, 0.2)");
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "src", local.noiseSrc ?? "/noise.webp"));
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.noiseWrap
+                        })), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                        get src () {
+                            return local.noiseSrc ?? "/noise.webp";
+                        }
+                    }, ()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__NoiseBackground_classes_js_aea288b9__.CLASSES.slot.noiseImage
+                        }), {
+                        style: {
+                            opacity: "var(--noise-opacity, 0.2)"
+                        }
+                    }), false, false);
                     return _el$7;
                 })();
         })(), _el$6);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: contentClasses()
+            })), false, true);
         (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$ = `linear-gradient(to right, ${colors().join(", ")})`, _v$2 = `${borderRadius()} ${borderRadius()} 0 0`, _v$3 = contentClasses();
-            _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$5.style.setProperty("background", _v$) : _el$5.style.removeProperty("background"));
-            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$5.style.setProperty("border-radius", _v$2) : _el$5.style.removeProperty("border-radius"));
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.a = _v$3);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
         return _el$;
     })();
 };

package/dist/components/number-field/NumberField.classes.d.ts

@@ -0,0 +1,27 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "number-field";
+        readonly variant: {
+            readonly primary: "number-field--primary";
+            readonly secondary: "number-field--secondary";
+        };
+        readonly flag: {
+            readonly fullWidth: "number-field--full-width";
+        };
+    };
+    readonly Group: {
+        readonly base: "number-field__group";
+        readonly flag: {
+            readonly fullWidth: "number-field__group--full-width";
+        };
+    };
+    readonly Input: {
+        readonly base: "number-field__input";
+    };
+    readonly IncrementButton: {
+        readonly base: "number-field__increment-button";
+    };
+    readonly DecrementButton: {
+        readonly base: "number-field__decrement-button";
+    };
+};

package/dist/components/number-field/NumberField.classes.js

@@ -0,0 +1,28 @@
+const CLASSES = {
+    Root: {
+        base: "number-field",
+        variant: {
+            primary: "number-field--primary",
+            secondary: "number-field--secondary"
+        },
+        flag: {
+            fullWidth: "number-field--full-width"
+        }
+    },
+    Group: {
+        base: "number-field__group",
+        flag: {
+            fullWidth: "number-field__group--full-width"
+        }
+    },
+    Input: {
+        base: "number-field__input"
+    },
+    IncrementButton: {
+        base: "number-field__increment-button"
+    },
+    DecrementButton: {
+        base: "number-field__decrement-button"
+    }
+};
+export { CLASSES };