@pathscale/ui 1.1.54 → 1.1.56

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

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+export type ModalActionsProps = JSX.HTMLAttributes<HTMLDivElement>;
+export default function ModalActions(props: ModalActionsProps): JSX.Element;

package/dist/components/modal/ModalActions.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalActions(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return props.class;
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalActions as default };

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

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+export type ModalBodyProps = JSX.HTMLAttributes<HTMLDivElement>;
+export default function ModalBody(props: ModalBodyProps): JSX.Element;

package/dist/components/modal/ModalBody.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalBody(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return props.class;
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalBody as default };

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

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+export type ModalHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;
+export default function ModalHeader(props: ModalHeaderProps): JSX.Element;

package/dist/components/modal/ModalHeader.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ModalHeader(props) {
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full mb-8 text-xl", props.class);
+            }
+        }), false, false);
+        return _el$;
+    })();
+}
+export { ModalHeader as default };

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

@@ -0,0 +1,8 @@
+import type { JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ModalLegacyProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    open?: boolean;
+    responsive?: boolean;
+    onClickBackdrop?: () => void;
+};
+export default function ModalLegacy(props: ModalLegacyProps): JSX.Element;

package/dist/components/modal/ModalLegacy.js

@@ -0,0 +1,36 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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)("<div aria-label=Modal><div>");
+function ModalLegacy(props) {
+    const { children, open, responsive, onClickBackdrop, dataTheme, class: classProp, className, ...rest } = props;
+    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "modal-open": open,
+        "modal-bottom modal-responsive-middle": responsive
+    }));
+    const bodyClasses = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal-box", classProp, className);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$click = (e)=>{
+            e.stopPropagation();
+            if (e.target === e.currentTarget) {
+                e.stopPropagation();
+                onClickBackdrop?.();
+            }
+        };
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-hidden", !open);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-modal", open);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", dataTheme);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, containerClasses);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            "data-theme": dataTheme,
+            class: bodyClasses
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, children);
+        return _el$;
+    })();
+}
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { ModalLegacy as default };

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

@@ -1 +1,6 @@
-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";
+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";

package/dist/components/modal/index.js

@@ -1,13 +1,3 @@
 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__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 };
+export { __webpack_exports__default as default };

package/dist/components/modal/modal.css

@@ -0,0 +1,170 @@
+@layer components {
+  .modal {
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      inset: calc(0.25rem * 0);
+      margin: calc(0.25rem * 0);
+      display: grid;
+      height: 100%;
+      max-height: none;
+      width: 100%;
+      max-width: none;
+      align-items: center;
+      justify-items: center;
+      background-color: transparent;
+      padding: calc(0.25rem * 0);
+      color: inherit;
+      transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+      overflow: clip;
+      overscroll-behavior: contain;
+      z-index: 999;
+      scrollbar-gutter: auto;
+    }
+
+  .modal::backdrop {
+      display: none;
+    }
+
+  .modal.modal-open,
+    .modal[open],
+    .modal:target,
+    .modal-toggle:checked + .modal {
+      pointer-events: auto;
+      visibility: visible;
+      opacity: 100%;
+      transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+      background-color: oklch(0% 0 0/ 0.4);
+    }
+
+  .modal.modal-open .modal-box,
+    .modal[open] .modal-box,
+    .modal:target .modal-box,
+    .modal-toggle:checked + .modal .modal-box {
+      translate: 0 0;
+      scale: 1;
+      opacity: 1;
+    }
+
+  :root:has(.modal.modal-open),
+    :root:has(.modal[open]),
+    :root:has(.modal:target),
+    :root:has(.modal-toggle:checked + .modal) {
+      --page-has-backdrop: 1;
+      --page-overflow: hidden;
+      --page-scroll-bg: var(--page-scroll-bg-on);
+      --page-scroll-gutter: stable;
+      --page-scroll-transition: var(--page-scroll-transition-on);
+      animation: set-page-has-scroll forwards;
+      animation-timeline: scroll();
+    }
+
+  @starting-style {
+    .modal.modal-open,
+    .modal[open],
+    .modal:target,
+    .modal-toggle:checked + .modal {
+      opacity: 0%;
+    }
+    }
+
+  .modal-toggle {
+      position: fixed;
+      height: calc(0.25rem * 0);
+      width: calc(0.25rem * 0);
+      appearance: none;
+      opacity: 0%;
+    }
+
+  .modal-backdrop {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      align-self: stretch;
+      justify-self: stretch;
+      color: transparent;
+      z-index: -1;
+    }
+
+  .modal-backdrop button {
+      cursor: pointer;
+    }
+
+  .modal-box {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      max-height: 100vh;
+      width: calc(11/12 * 100%);
+      max-width: 32rem;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 6);
+      transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;
+      border-top-left-radius: var(--modal-tl, var(--radius-box));
+      border-top-right-radius: var(--modal-tr, var(--radius-box));
+      border-bottom-left-radius: var(--modal-bl, var(--radius-box));
+      border-bottom-right-radius: var(--modal-br, var(--radius-box));
+      scale: 95%;
+      opacity: 0;
+      box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+  .modal-action {
+      margin-top: calc(0.25rem * 6);
+      display: flex;
+      justify-content: flex-end;
+      gap: calc(0.25rem * 2);
+    }
+
+  .modal-bottom {
+      place-items: end;
+    }
+
+  .modal-bottom .modal-box {
+      height: auto;
+      width: 100%;
+      max-width: none;
+      max-height: calc(100vh - 5em);
+      translate: 0 100%;
+      scale: 1;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: 0;
+      --modal-br: 0;
+    }
+
+  .modal-middle {
+      place-items: center;
+    }
+
+  .modal-middle .modal-box {
+      height: auto;
+      width: calc(11/12 * 100%);
+      max-width: 32rem;
+      max-height: calc(100vh - 5em);
+      translate: 0 2%;
+      scale: 98%;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+
+  .modal-top {
+      place-items: start;
+    }
+
+  .modal-top .modal-box {
+      height: auto;
+      width: 100%;
+      max-width: none;
+      max-height: calc(100vh - 5em);
+      translate: 0 -100%;
+      scale: 1;
+      --modal-tl: 0;
+      --modal-tr: 0;
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+}

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,11 +1,10 @@
 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",
@@ -16,7 +15,7 @@ const Navbar = (props)=>{
         "dataTheme"
     ]);
     const Tag = local.as || "div";
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Navbar_classes_js_dd9fd35b__.CLASSES.navbar.base, local.class, local.className);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("navbar", 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",
@@ -24,10 +23,10 @@ const Navbar = (props)=>{
     }, others, {
         get ["data-theme"] () {
             return local.dataTheme;
-        }
-    }, ()=>({
-            class: classes()
-        }), {
+        },
+        get ["class"] () {
+            return 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__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 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,13 +15,25 @@ const NavbarRow = (props)=>{
         "dataTheme"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    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));
+    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));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: classes()
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return 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,16 +12,20 @@ const NavbarSection = (props)=>{
         "className",
         "style"
     ]);
-    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);
+    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
+        }));
     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;
-            }
-        }, ()=>({
-                class: classes()
-            }), {
+            },
+            get ["class"] () {
+                return 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__Navbar_classes_js_dd9fd35b__ from "./Navbar.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const NavbarStack = (props)=>{
+const NavbarStack_NavbarStack = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "sticky",
@@ -14,12 +14,16 @@ const 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)(__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));
+    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
+        })));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: classes()
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            },
             get style () {
                 return local.style;
             },
@@ -31,5 +35,5 @@ const NavbarStack = (props)=>{
         return _el$;
     })();
 };
-const navbar_NavbarStack = NavbarStack;
-export { navbar_NavbarStack as default };
+const NavbarStack = NavbarStack_NavbarStack;
+export { NavbarStack as default };

package/dist/components/navbar/navbar.css

@@ -0,0 +1,33 @@
+@layer components {
+  .navbar {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 0.5rem;
+      min-height: 4rem;
+    }
+
+  :where(.navbar) {
+      position: relative;
+    }
+
+  .navbar-end {
+      display: inline-flex;
+      align-items: center;
+      width: 50%;
+      justify-content: flex-end;
+    }
+
+  .navbar-start {
+      display: inline-flex;
+      align-items: center;
+      width: 50%;
+      justify-content: flex-start;
+    }
+
+  .navbar-center {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+}

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

@@ -1,4 +1,3 @@
-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,9 +1,7 @@
 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";
-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>");
+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">');
 function createSpring(initial, stiffness = 100, damping = 30) {
     let current = initial;
     let velocity = 0;
@@ -140,15 +138,16 @@ 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)(__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);
+    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);
     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)(()=>({
-                class: containerClasses()
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return containerClasses();
+            },
             get style () {
                 return {
                     "--noise-opacity": noiseIntensity(),
@@ -156,62 +155,44 @@ 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;
-                    (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);
+                    _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"));
                     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$;
     })();
 };