@ztwoint/z-ui 0.1.27 → 0.1.29

package/dist/components/collapsible-side-nav-bar/side-nav-bar-header.js

@@ -1,114 +1,120 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import * as n from "react";
-import { cn as x } from "../../lib/utils.js";
-import { useZ2SideNavBar as N } from "./context.js";
-import u from "../assets/icons/window-left-copy.js";
-import w from "../assets/icons/sidebar-left-show-copy.js";
-const C = n.forwardRef(
+import { cn as p } from "../../lib/utils.js";
+import { useZ2SideNavBar as C } from "./context.js";
+import x from "../assets/icons/window-left-copy.js";
+import { Button as v } from "../button/button.js";
+const w = n.forwardRef(
   ({
     className: o,
-    children: l,
+    children: s,
     showCollapseButton: g = !0,
-    icon: s,
-    title: r,
-    forceMultiLine: c = !1,
-    ...d
+    icon: r,
+    title: a,
+    forceMultiLine: d = !1,
+    ...c
   }, m) => {
-    const { toggleCollapsed: p, isCollapsed: i } = N(), [v, h] = n.useState(c), f = n.useRef(null), b = v || !!l;
+    const { toggleCollapsed: f, isCollapsed: i } = C(), [y, u] = n.useState(d), h = n.useRef(null), b = y || !!s;
     return n.useEffect(() => {
-      if (c) {
-        h(!0);
+      if (d) {
+        u(!0);
         return;
       }
-      if (f.current && !i && r) {
+      if (h.current && !i && a) {
         const t = document.createElement("span");
-        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = r, document.body.appendChild(t);
-        const y = t.offsetWidth;
-        document.body.removeChild(t), h(y > 168);
+        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = a, document.body.appendChild(t);
+        const N = t.offsetWidth;
+        document.body.removeChild(t), u(N > 168);
       }
-    }, [r, i, c]), i ? /* @__PURE__ */ e(
+    }, [a, i, d]), i ? /* @__PURE__ */ e(
       "div",
       {
         ref: m,
-        className: x(
+        className: p(
           "flex flex-col items-center gap-1.5 self-stretch border-b border-gray-200 p-2",
           o
         ),
-        ...d,
+        ...c,
         children: /* @__PURE__ */ e(
-          "button",
+          v,
           {
-            onClick: p,
-            className: "flex items-center justify-center cursor-pointer p-1.5 gap-1 rounded-lg relative bg-transparent border-none",
-            title: "Expand sidebar",
-            children: /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-(--color-neutral-600)" })
+            variant: "ghost",
+            shade: "neutralGhost",
+            size: "small",
+            onClick: f,
+            title: "Collapse sidebar",
+            leftIcon: /* @__PURE__ */ e(x, {})
           }
         )
       }
-    ) : b && !i ? /* @__PURE__ */ a(
+    ) : b && !i ? /* @__PURE__ */ l(
       "div",
       {
         ref: m,
-        className: x(
+        className: p(
           "flex flex-col items-start gap-5 self-stretch border-b border-gray-100 w-60 px-2.5 py-4 pl-4 relative",
           o
         ),
-        ...d,
+        ...c,
         children: [
-          /* @__PURE__ */ a("div", { className: "header-icons-container flex justify-between items-center self-stretch relative", children: [
-            s && /* @__PURE__ */ e("div", { className: "database-icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
+          /* @__PURE__ */ l("div", { className: "header-icons-container flex justify-between items-center self-stretch relative", children: [
+            r && /* @__PURE__ */ e("div", { className: "database-icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: r }) }),
             g && /* @__PURE__ */ e(
-              "button",
+              v,
               {
-                onClick: p,
-                className: "sidebar-toggle-button flex p-1.5 justify-center items-center gap-1 rounded-lg relative bg-transparent border-none cursor-pointer",
+                variant: "ghost",
+                shade: "neutralGhost",
+                size: "small",
+                onClick: f,
                 title: "Collapse sidebar",
-                children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5 text-(--color-neutral-600)" }) })
+                leftIcon: /* @__PURE__ */ e(x, {})
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "text-preset-container flex flex-col items-start gap-2.5 self-stretch relative", children: [
-            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: r }),
+          /* @__PURE__ */ l("div", { className: "text-preset-container flex flex-col items-start gap-2.5 self-stretch relative", children: [
+            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: a }),
             /* @__PURE__ */ e(
               "div",
               {
-                ref: f,
+                ref: h,
                 className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-gray-600 text-ellipsis text-sm font-normal leading-none tracking-tight relative",
-                children: l
+                children: s
               }
             )
           ] })
         ]
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ l(
       "div",
       {
         ref: m,
-        className: x(
-          "flex items-center gap-2.5 border-b header-default-layout w-60 px-2.5 py-2.5 pl-3 border-gray-100 relative",
+        className: p(
+          "flex items-center gap-2.5 border-b header-default-layout w-full pr-2.5 pl-3 py-2.5 stroke-solid-light relative",
           o
         ),
-        ...d,
+        ...c,
         children: [
-          s && /* @__PURE__ */ e("div", { className: "icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
-          /* @__PURE__ */ a(
+          r && /* @__PURE__ */ e("div", { className: "icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: r }) }),
+          /* @__PURE__ */ l(
             "div",
             {
-              ref: f,
+              ref: h,
               className: "text-content flex flex-col items-start gap-2.5 flex-1 relative",
               children: [
-                /* @__PURE__ */ e("div", { className: "primary-text line-clamp-1 self-stretch overflow-hidden text-gray-950 text-ellipsis text-sm font-medium leading-none tracking-tight relative", children: r }),
-                l && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: l })
+                /* @__PURE__ */ e("div", { className: "leading-none-medium-sm text-neutral-primary", children: a }),
+                s && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: s })
               ]
             }
           ),
           g && /* @__PURE__ */ e(
-            "button",
+            v,
             {
-              onClick: p,
-              className: "collapse-button flex p-1.5 justify-center items-center gap-1 rounded-lg relative bg-transparent border-none cursor-pointer",
+              variant: "ghost",
+              shade: "neutralGhost",
+              size: "small",
+              onClick: f,
               title: "Collapse sidebar",
-              children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: /* @__PURE__ */ e(u, { className: "text-(--color-neutral-600)" }) })
+              leftIcon: /* @__PURE__ */ e(x, {})
             }
           )
         ]
@@ -116,7 +122,7 @@ const C = n.forwardRef(
     );
   }
 );
-C.displayName = "Z2SideNavBarHeader";
+w.displayName = "Z2SideNavBarHeader";
 export {
-  C as Z2SideNavBarHeader
+  w as Z2SideNavBarHeader
 };

package/dist/components/collapsible-side-nav-bar/side-nav-bar-item.js

@@ -1,47 +1,48 @@
-import { jsxs as i, jsx as r, Fragment as P } from "react/jsx-runtime";
+import { jsxs as i, jsx as r, Fragment as D } from "react/jsx-runtime";
 import * as d from "react";
 import { cn as f } from "../../lib/utils.js";
-import { useZ2SideNavBar as A } from "./context.js";
-import { ChevronUpIcon as B } from "../assets/icons/chevron-up-icon.js";
-import M from "../assets/icons/sub-nav-indicator.js";
-import Z from "../assets/icons/circles-icon.js";
-import { Z2Popover as R } from "./popover/popover.js";
-import q from "../assets/icons/chevron-down.js";
+import { useZ2SideNavBar as B } from "./context.js";
+import { ChevronUpIcon as M } from "../assets/icons/chevron-up-icon.js";
+import Z from "../assets/icons/sub-nav-indicator.js";
+import { Z2Popover as A } from "./popover/popover.js";
+import R from "../assets/icons/chevron-down.js";
 import { Z2PopoverTrigger as E } from "./popover/popover-trigger.js";
 import { Z2PopoverContent as F } from "./popover/popover-content.js";
 const K = d.forwardRef(
   ({
     className: x,
     children: u,
-    icon: m,
-    label: c,
-    href: y,
-    isActive: h = !1,
-    onClick: v,
-    tooltip: p,
-    subItems: s,
-    ...N
-  }, D) => {
-    const { isCollapsed: l } = A(), [t, k] = d.useState(!1), o = c && !l, n = s && s.length > 0, C = d.useMemo(() => l ? n ? /* @__PURE__ */ i("div", { className: "text-left", children: [
-      /* @__PURE__ */ r("div", { className: "text-gray-500 mt-2 mb-1", children: p || c }),
-      /* @__PURE__ */ r("div", { className: "space-y-1", children: s.map((e) => {
-        const g = (a) => {
-          a.preventDefault(), a.stopPropagation(), e.onClick ? e.onClick() : e.href && (window.location.href = e.href);
-        }, S = /* @__PURE__ */ i(
+    icon: h,
+    label: o,
+    href: N,
+    isActive: m = !1,
+    onClick: p,
+    tooltip: v,
+    subItems: c,
+    ...y
+  }, P) => {
+    const { isCollapsed: a } = B(), [t, k] = d.useState(!1), s = o && !a, n = c && c.length > 0, C = d.useMemo(() => a ? n ? /* @__PURE__ */ i("div", { className: "text-left", children: [
+      /* @__PURE__ */ r("div", { className: "text-gray-500 mt-2 mb-1", children: v || o }),
+      /* @__PURE__ */ r("div", { className: "space-y-1", children: c.map((e) => {
+        const g = (l) => {
+          l.preventDefault(), l.stopPropagation(), e.onClick ? e.onClick() : e.href && (window.location.href = e.href);
+        }, b = /* @__PURE__ */ i(
           "div",
           {
             className: f(
-              "text-sm ml-2 px-2 py-2 rounded transition-colors cursor-pointer flex items-center gap-2",
+              "cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
               {
-                "hover:!bg-gray-200 bg-gray-100": e.isActive,
-                "hover:!bg-gray-100": !e.isActive
+                "hover:!bg-gray-100 bg-gray-100": e.isActive,
+                "hover:!bg-gray-50": !e.isActive
               }
             ),
+            onClick: e.onClick,
             children: [
-              /* @__PURE__ */ r("div", { className: "w-3.5 h-3.5 flex-shrink-0 text-(--color-neutral-600)", children: e.icon || /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-600)" }) }),
-              e.label
+              /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-150)" }),
+              /* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
             ]
-          }
+          },
+          e.id
         );
         return e.href && !e.onClick ? /* @__PURE__ */ r(
           "a",
@@ -49,7 +50,7 @@ const K = d.forwardRef(
             href: e.href,
             className: "block mt-2",
             onClick: g,
-            children: S
+            children: b
           },
           e.id
         ) : /* @__PURE__ */ r(
@@ -59,23 +60,23 @@ const K = d.forwardRef(
             role: "button",
             tabIndex: 0,
             className: "block",
-            onKeyDown: (a) => {
-              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), g(a));
+            onKeyDown: (l) => {
+              (l.key === "Enter" || l.key === " ") && (l.preventDefault(), g(l));
             },
-            children: S
+            children: b
           },
           e.id
         );
       }) })
-    ] }) : p || c : null, [l, n, p, c, s]), w = d.useCallback(
+    ] }) : v || o : null, [a, n, v, o, c]), w = d.useCallback(
       (e) => {
         e.stopPropagation(), k(!t);
       },
       [t]
-    ), b = d.useCallback(() => {
-      n && !l ? k(!t) : v && v();
-    }, [n, l, t, v]);
-    if (l) {
+    ), S = d.useCallback(() => {
+      n && !a ? k(!t) : p && p();
+    }, [n, a, t, p]);
+    if (a) {
       const e = /* @__PURE__ */ i(
         "div",
         {
@@ -83,18 +84,18 @@ const K = d.forwardRef(
             "flex items-center justify-center gap-1.5 rounded-lg cursor-pointer transition-all duration-200",
             "p-2 justify-center gap-1.5 self-stretch relative",
             "hover:bg-gray-50 text-gray-700 hover:text-gray-900",
-            h && "bg-(--color-neutral-100)",
+            m && "bg-(--color-neutral-100)",
             x
           ),
-          onClick: b,
-          ...N,
+          onClick: S,
+          ...y,
           children: [
-            m && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: m }),
+            h && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: h }),
             u
           ]
         }
       );
-      return C ? /* @__PURE__ */ i(R, { children: [
+      return C ? /* @__PURE__ */ i(A, { children: [
         /* @__PURE__ */ r(E, { children: e }),
         /* @__PURE__ */ r(F, { side: "right", children: C })
       ] }) : /* @__PURE__ */ r("div", { children: e });
@@ -103,36 +104,35 @@ const K = d.forwardRef(
       "div",
       {
         className: f(
-          "nav-item-container flex flex-col justify-center items-center gap-1.5 rounded-lg relative overflow-hidden p-0",
-          o ? "w-56 max-w-56" : "w-auto max-w-none"
+          "nav-item-container flex flex-col justify-center items-center gap-1.5 rounded-lg relative overflow-hidden p-0 w-full"
         ),
         children: [
           /* @__PURE__ */ i(
             "div",
             {
               className: f(
-                "nav-item-main flex items-center justify-center gap-1.5 self-stretch rounded-lg cursor-pointer transition-all duration-200 my-1 p-2 relative",
+                "nav-item-main flex items-center justify-center gap-1.5 self-stretch rounded-lg cursor-pointer transition-all duration-200 p-2 relative",
                 {
                   // Background colors based on state
-                  "hover:bg-gray-50 text-gray-700 hover:text-gray-900": !h && !(o && n && t),
+                  "hover:bg-gray-50 text-gray-700 hover:text-gray-900": !m && !(s && n && t),
                   // Focused state for expanded nav with sub items (matching component design)
-                  "text-black bg-gray-100": h || o && n && t
+                  "text-black bg-gray-100": m || s && n && t
                 },
                 x
               ),
-              onClick: b,
-              ...N,
+              onClick: S,
+              ...y,
               children: [
-                m && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: m }),
-                o && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1 py-1", children: c }) }),
-                o && n && /* @__PURE__ */ r(P, { children: t ? /* @__PURE__ */ r(
-                  B,
+                h && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: h }),
+                s && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: o }) }),
+                s && n && /* @__PURE__ */ r(D, { children: t ? /* @__PURE__ */ r(
+                  M,
                   {
                     className: "w-3.5 h-3.5 cursor-pointer text-(--color-neutral-600)",
                     onClick: w
                   }
                 ) : /* @__PURE__ */ r(
-                  q,
+                  R,
                   {
                     className: "w-3.5 h-3.5 text-(--color-neutral-600) cursor-pointer",
                     onClick: w
@@ -142,13 +142,13 @@ const K = d.forwardRef(
               ]
             }
           ),
-          o && n && t && /* @__PURE__ */ i("div", { className: "sub-nav-container flex items-start gap-0 self-stretch relative p-0", children: [
-            /* @__PURE__ */ r("div", { className: "divider-group flex w-6 px-2 items-center gap-2.5 self-stretch relative" }),
-            /* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1 relative", children: s.map((e) => /* @__PURE__ */ i(
+          s && n && t && /* @__PURE__ */ i("div", { className: "sub-nav-container flex items-start gap-0 self-stretch p-0", children: [
+            /* @__PURE__ */ r("div", { className: "divider-group flex w-2 items-center gap-2.5 self-stretch" }),
+            /* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1", children: c.map((e) => /* @__PURE__ */ i(
               "div",
               {
                 className: f(
-                  "sub-nav-item cursor-pointer transition-colors flex justify-center items-center gap-1.5 self-stretch rounded-lg p-2 relative",
+                  "cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
                   {
                     "hover:!bg-gray-100 bg-gray-100": e.isActive,
                     "hover:!bg-gray-50": !e.isActive
@@ -156,9 +156,8 @@ const K = d.forwardRef(
                 ),
                 onClick: e.onClick,
                 children: [
-                  /* @__PURE__ */ r(M, { className: "text-(--color-neutral-100)", secondaryfill: "white" }),
-                  /* @__PURE__ */ r("div", { className: "sub-nav-icon w-3.5 h-3.5 aspect-square relative text-(--color-neutral-600)", children: e.icon || /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-600)" }) }),
-                  /* @__PURE__ */ r("div", { className: "sub-nav-label-container flex px-0.5 items-center gap-2.5 flex-1 relative", children: /* @__PURE__ */ r("div", { className: "sub-nav-label flex-1 overflow-hidden text-black text-ellipsis text-sm font-medium leading-none tracking-tight relative line-clamp-1", children: e.label }) })
+                  /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-150)" }),
+                  /* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
                 ]
               },
               e.id
@@ -167,7 +166,7 @@ const K = d.forwardRef(
         ]
       }
     );
-    return y ? /* @__PURE__ */ r("a", { href: y, children: j }) : /* @__PURE__ */ r("div", { ref: D, children: j });
+    return N ? /* @__PURE__ */ r("a", { href: N, children: j }) : /* @__PURE__ */ r("div", { ref: P, children: j });
   }
 );
 K.displayName = "Z2SideNavBarItem";

package/dist/components/collapsible-side-nav-bar/side-nav-bar-provider.js

@@ -1,39 +1,39 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as r from "react";
-import { cn as f } from "../../lib/utils.js";
+import { cn as l } from "../../lib/utils.js";
 import { Z2SideNavBarContext as S } from "./context.js";
-import { SIDEBAR_WIDTH_COLLAPSED as i, SIDEBAR_WIDTH as C } from "./constants.js";
-const h = r.forwardRef(
-  ({ children: d, defaultCollapsed: l = !1, style: o, className: m, ...c }, n) => {
-    const [e, p] = r.useState(l), t = r.useCallback(() => {
-      p(!e);
-    }, [e]), u = r.useMemo(
+import { SIDEBAR_WIDTH_COLLAPSED as d, SIDEBAR_WIDTH as h } from "./constants.js";
+const C = r.forwardRef(
+  ({ children: m, defaultCollapsed: c = !1, style: t, className: a, ...n }, p) => {
+    const [e, u] = r.useState(c), s = r.useCallback(() => {
+      u(!e);
+    }, [e]), v = r.useMemo(
       () => ({
         isCollapsed: e,
-        toggleCollapsed: t
+        toggleCollapsed: s
       }),
-      [e, t]
-    ), a = r.useMemo(() => e ? i : C, [e]), v = r.useMemo(
+      [e, s]
+    ), i = r.useMemo(() => e ? d : h, [e]), f = r.useMemo(
       () => ({
-        "--sidebar-width": a,
-        "--sidebar-width-collapsed": i,
-        ...o
+        "--sidebar-width": i,
+        "--sidebar-width-collapsed": d,
+        ...t
       }),
-      [a, o]
+      [i, t]
     );
-    return /* @__PURE__ */ s(S.Provider, { value: u, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ o(S.Provider, { value: v, children: /* @__PURE__ */ o(
       "div",
       {
-        ref: n,
-        className: f("relative h-full", m),
-        style: v,
-        ...c,
-        children: d
+        ref: p,
+        className: l("relative h-full", a),
+        style: f,
+        ...n,
+        children: /* @__PURE__ */ o("div", { className: l("h-full", a), children: m })
       }
     ) });
   }
 );
-h.displayName = "Z2SideNavBarProvider";
+C.displayName = "Z2SideNavBarProvider";
 export {
-  h as Z2SideNavBarProvider
+  C as Z2SideNavBarProvider
 };

package/dist/components/collapsible-side-nav-bar/side-nav-bar.d.ts

@@ -1,7 +1,7 @@
 import { Z2SideNavBarProps } from './types';
 import * as React from 'react';
 export declare const Z2SidebarVariants: (props?: ({
-    variant?: "default" | "inset" | "floating" | null | undefined;
+    variant?: "default" | "floating" | "inset" | null | undefined;
     side?: "left" | "right" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export declare const Z2SideNavBar: React.ForwardRefExoticComponent<Z2SideNavBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible-side-nav-bar/side-nav-bar.js

@@ -1,10 +1,10 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as f from "react";
 import { cva as n } from "class-variance-authority";
 import { cn as u } from "../../lib/utils.js";
 import { useZ2SideNavBar as m } from "./context.js";
-const p = n(
-  "relative flex flex-col h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
+const c = n(
+  " flex flex-col h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
   {
     variants: {
       variant: {
@@ -22,21 +22,21 @@ const p = n(
       side: "left"
     }
   }
-), c = f.forwardRef(
-  ({ className: a, variant: e, side: t, children: i, ...l }, o) => {
-    const { isCollapsed: r } = m(), s = u(
-      p({ variant: e, side: t }),
+), h = f.forwardRef(
+  ({ className: e, variant: t, side: i, children: l, ...o }, s) => {
+    const { isCollapsed: r } = m(), d = u(
+      c({ variant: t, side: i }),
       {
-        "w-42px": r,
-        "w-240px": !r
+        "w-[42px]": r,
+        "w-[240px]": !r
       },
-      a
+      e
     );
-    return /* @__PURE__ */ d("div", { ref: o, "data-sidebar": !0, className: s, ...l, children: i });
+    return /* @__PURE__ */ a("div", { ref: s, "data-sidebar": !0, className: "h-full relative", ...o, children: /* @__PURE__ */ a("div", { className: d, children: l }) });
   }
 );
-c.displayName = "Z2SideNavBar";
+h.displayName = "Z2SideNavBar";
 export {
-  c as Z2SideNavBar,
-  p as Z2SidebarVariants
+  h as Z2SideNavBar,
+  c as Z2SidebarVariants
 };

package/dist/components/dialog/dialog.js

@@ -41,7 +41,7 @@ function m({
       {
         "data-slot": "dialog-content",
         className: l(
-          "surface-neutral-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg duration-200 sm:max-w-lg",
+          "bg-surface-neutral-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg duration-200 sm:max-w-lg",
           t
         ),
         ...i,