@ztwoint/z-ui 0.1.46 → 0.1.49

package/dist/components/alert/alert.const.d.ts

@@ -4,6 +4,3 @@ export declare const alertVariants: (props?: ({
 export declare const iconVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "accent" | "neutral" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export declare const buttonVariants: (props?: ({
-    appearance?: "stroke" | "ghost" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;

package/dist/components/alert/alert.const.js

@@ -1,48 +1,33 @@
-import { cva as e } from "class-variance-authority";
-const a = e(
+import { cva as t } from "class-variance-authority";
+const e = t(
   "relative w-full rounded-lg border pl-2.5 pr-0.5 py-2.5 text-sm flex flex-col gap-2 items-start",
   // Flex, column, gap for flexible content & action placement
   {
     variants: {
       variant: {
-        success: "alert-success-stroke alert-success-bg alert-success-title alert-success-body",
-        warning: "alert-warning-stroke alert-warning-bg alert-warning-title alert-warning-body",
-        danger: "alert-danger-stroke alert-danger-bg alert-danger-title alert-danger-body",
-        accent: "alert-accent-stroke alert-accent-bg alert-accent-title alert-accent-body",
-        neutral: "alert-neutral-stroke alert-neutral-bg alert-neutral-title alert-neutral-body"
+        success: "border-alert-stroke-success bg-alert-surface-success text-text-success-primary",
+        warning: "border-alert-stroke-warning bg-alert-surface-warning text-text-warning-primary",
+        danger: "border-alert-stroke-danger bg-alert-surface-danger text-text-danger-primary",
+        accent: "border-alert-stroke-accent bg-alert-surface-accent text-text-brand-primary",
+        neutral: "border-alert-stroke-neutral bg-alert-surface-neutral text-text-neutral-primary"
       }
     },
     defaultVariants: {
       variant: "accent"
     }
   }
-), r = e("h-5 w-5 flex-shrink-0", {
+), a = t("h-5 w-5 flex-shrink-0", {
   variants: {
     variant: {
-      success: "alert-success-icon",
-      warning: "alert-warning-icon",
-      danger: "alert-danger-icon",
-      accent: "alert-accent-icon",
-      neutral: "alert-neutral-icon"
+      success: "text-text-success-secondary",
+      warning: "text-text-warning-secondary",
+      danger: "text-text-danger-secondary",
+      accent: "text-text-brand-secondary",
+      neutral: "text-text-neutral-primary"
     }
   }
-}), n = e(
-  "inline-flex items-center justify-center gap-1 rounded-md px-2 py-2 text-sm transition focus:outline-none focus:ring-2",
-  // Responsive and basic
-  {
-    variants: {
-      appearance: {
-        ghost: "bg-transparent hover:cursor-pointer",
-        stroke: "bg-(--color-neutral-00) hover:cursor-pointer"
-      }
-    },
-    defaultVariants: {
-      appearance: "ghost"
-    }
-  }
-);
+});
 export {
-  a as alertVariants,
-  n as buttonVariants,
-  r as iconVariants
+  e as alertVariants,
+  a as iconVariants
 };

package/dist/components/alert/alert.js

@@ -1,52 +1,40 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import * as x from "react";
 import u from "../assets/icons/x.js";
 import N from "../assets/icons/left-arrow.js";
 import { cn as l } from "../../lib/utils.js";
-import { iconVariants as c, buttonVariants as h, alertVariants as w } from "./alert.const.js";
-function C({
-  className: a,
+import { iconVariants as n, alertVariants as k } from "./alert.const.js";
+import { Button as h } from "../button/button.js";
+function A({
+  className: i,
   variant: r,
-  title: f,
-  description: o,
-  leadingIcon: t,
+  title: c,
+  description: f,
+  leadingIcon: s,
   showActions: p = !1,
-  onClose: i,
+  onClose: t,
   onAction: m,
-  actionLabel: n,
+  actionLabel: o,
   ...d
 }) {
-  return /* @__PURE__ */ e("div", { role: "alert", className: l(w({ variant: r }), a), ...d, children: /* @__PURE__ */ s("div", { className: "flex flex-row flex-wrap w-full items-start gap-1", children: [
-    t && /* @__PURE__ */ e("span", { className: l(c({ variant: r }), "flex-shrink-0"), children: (x.isValidElement(t), t) }),
-    /* @__PURE__ */ s("div", { className: "flex flex-col gap-1", children: [
-      f && /* @__PURE__ */ e(k, { className: "flex-shrink-0", children: f }),
-      /* @__PURE__ */ s("div", { className: "flex flex-row flex-wrap w-full items-center", children: [
-        o && /* @__PURE__ */ e("span", { className: "flex-shrink-1", children: /* @__PURE__ */ e(b, { children: o }) }),
-        p && (i || m) && /* @__PURE__ */ s("div", { className: "flex items-center self-end flex-shrink-0", children: [
-          i && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: i,
-              className: l(h({ appearance: "ghost" })),
-              "aria-label": "Close alert",
-              children: /* @__PURE__ */ e(u, { className: l(c({ variant: r }), "h-2.2 w-2.2") })
-            }
-          ),
-          m && /* @__PURE__ */ s(
-            "button",
+  return /* @__PURE__ */ e("div", { role: "alert", className: l(k({ variant: r }), i), ...d, children: /* @__PURE__ */ a("div", { className: "flex flex-row flex-wrap w-full items-start gap-1", children: [
+    s && /* @__PURE__ */ e("span", { className: l(n({ variant: r }), "flex-shrink-0"), children: (x.isValidElement(s), s) }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+      c && /* @__PURE__ */ e(w, { className: "flex-shrink-0", children: c }),
+      /* @__PURE__ */ a("div", { className: "flex flex-row flex-wrap w-full items-center", children: [
+        f && /* @__PURE__ */ e("span", { className: "flex-shrink-1", children: /* @__PURE__ */ e(v, { children: f }) }),
+        p && (t || m) && /* @__PURE__ */ a("div", { className: "flex items-center self-end flex-shrink-0", children: [
+          t && /* @__PURE__ */ e(h, { type: "button", variant: "ghost", size: "medium", onClick: t, children: /* @__PURE__ */ e(u, { className: l(n({ variant: r }), "h-2.2 w-2.2") }) }),
+          m && /* @__PURE__ */ e(
+            h,
             {
               type: "button",
+              variant: "stroke",
+              size: "medium",
               onClick: m,
-              className: l(
-                h({ appearance: "stroke" }),
-                "shadow-[0_1px_2px_0_rgba(0,0,0,0.05)]"
-              ),
-              "aria-label": n,
-              children: [
-                /* @__PURE__ */ e(N, { className: l(c({ variant: r }), "h-2.2 w-2.2") }),
-                n && n
-              ]
+              "aria-label": o,
+              leftIcon: /* @__PURE__ */ e(N, { className: l(n({ variant: r }), "h-2.2 w-2.2") }),
+              children: o
             }
           )
         ] })
@@ -55,14 +43,14 @@ function C({
     d.children
   ] }) });
 }
-function k({ className: a, ...r }) {
-  return /* @__PURE__ */ e("div", { className: l("tracking-tight leading-none-medium-sm", a), ...r });
+function w({ className: i, ...r }) {
+  return /* @__PURE__ */ e("div", { className: l("tracking-tight leading-none-medium-sm", i), ...r });
 }
-function b({ className: a, ...r }) {
-  return /* @__PURE__ */ e("div", { className: l("leading-none-regular-sm", a), ...r });
+function v({ className: i, ...r }) {
+  return /* @__PURE__ */ e("div", { className: l("leading-none-regular-sm", i), ...r });
 }
 export {
-  C as Alert,
-  b as AlertDescription,
-  k as AlertTitle
+  A as Alert,
+  v as AlertDescription,
+  w as AlertTitle
 };

package/dist/components/assets/icons/check.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+export declare function Check({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Check;

package/dist/components/assets/icons/check.js

@@ -0,0 +1,17 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+function s({ title: r = "badge 13", ...t }) {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ l("title", { children: r }),
+    /* @__PURE__ */ l("g", { fill: "currentColor", children: /* @__PURE__ */ l(
+      "path",
+      {
+        d: "M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16,16-7.163,16-16C31.974,7.174,24.826,.026,16,0Zm7.707,11.707l-10,10c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293,9.293-9.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z",
+        fill: "currentColor"
+      }
+    ) })
+  ] });
+}
+export {
+  s as Check,
+  s as default
+};

package/dist/components/assets/icons/x-mark.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+export declare function XMark({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default XMark;

package/dist/components/assets/icons/x-mark.js

@@ -0,0 +1,17 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+function i({ title: r = "badge 13", ...t }) {
+  return /* @__PURE__ */ s("svg", { height: "48", width: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+    /* @__PURE__ */ l("title", { children: r }),
+    /* @__PURE__ */ l("g", { fill: "currentColor", children: /* @__PURE__ */ l(
+      "path",
+      {
+        d: "M24,1C11.3,1,1,11.3,1,24s10.3,23,23,23s23-10.3,23-23S36.7,1,24,1z M32.7,31.3c0.4,0.4,0.4,1,0,1.4 C32.5,32.9,32.3,33,32,33s-0.5-0.1-0.7-0.3L24,25.4l-7.3,7.3C16.5,32.9,16.3,33,16,33s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4 l7.3-7.3l-7.3-7.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l7.3,7.3l7.3-7.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L25.4,24L32.7,31.3z",
+        fill: "currentColor"
+      }
+    ) })
+  ] });
+}
+export {
+  i as XMark,
+  i as default
+};

package/dist/components/button/button.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "stroke" | "ghost" | "filled" | null | undefined;
-    shade?: "danger" | "neutral" | "brand" | "neutralGhost" | null | undefined;
-    size?: "small" | "large" | null | undefined;
+    variant?: "stroke" | "filled" | "ghost" | null | undefined;
+    shade?: "danger" | "neutral" | "brand" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly'> {

package/dist/components/button/button.js

@@ -1,26 +1,31 @@
-import { jsx as e, jsxs as v, Fragment as h } from "react/jsx-runtime";
-import w from "react";
-import { Slot as k } from "@radix-ui/react-slot";
-import { cva as O } from "class-variance-authority";
+import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
+import k from "react";
+import { Slot as w } from "@radix-ui/react-slot";
+import { cva as N } from "class-variance-authority";
 import { cn as d } from "../../lib/utils.js";
-const z = O(
-  "box-border h-7.5 leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg  select-none hover:cursor-pointer active:outline-none border-solid",
+const C = N(
+  "box-border leading-none-medium-sm flex items-center justify-center whitespace-nowrap rounded-lg select-none hover:cursor-pointer disabled:cursor-not-allowed active:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
   {
     variants: {
       variant: {
-        filled: ["border-[.5px] disabled:border-none disabled:shadow-button-disabled"],
-        stroke: ["disabled:shadow-button-disabled"],
-        ghost: [""]
+        filled: [""],
+        stroke: [
+          "ring-[0.5px] ring-btn-secondary-stroke-default hover:ring-btn-secondary-stroke-hover active:ring-btn-secondary-stroke-pressed disabled:ring-btn-secondary-stroke-disabled",
+          "bg-btn-secondary-surface-default hover:bg-btn-secondary-surface-hover active:bg-btn-secondary-surface-pressed disabled:bg-btn-secondary-surface-disabled"
+        ],
+        ghost: [
+          "hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted"
+        ]
       },
       shade: {
-        brand: "bg-button-primary-brand-surface-default border-button-primary-brand-surface-default  text-text-inverted-primary hover:bg-button-primary-brand-surface-hover active:bg-button-primary-brand-surface-pressed disabled:bg-button-primary-brand-surface-disabled disabled:text-text-neutral-muted disabled:border-button-primary-brand-surface-disabled",
-        neutral: "bg-button-primary-neutral-surface-default border-button-primary-neutral-surface-default disabled:border-none text-text-inverted-primary  hover:bg-button-primary-neutral-surface-hover active:bg-button-primary-neutral-surface-pressed  disabled:bg-button-primary-neutral-surface-disabled disabled:text-text-neutral-muted",
-        danger: "bg-button-primary-danger-surface-default border-button-primary-danger-stroke-default text-text-inverted-primary hover:bg-button-primary-danger-surface-hover active:bg-button-primary-danger-surface-pressed disabled:bg-button-primary-danger-surface-disabled disabled:text-text-neutral-muted",
-        neutralGhost: "border-none text-text-neutral-primary hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted"
+        brand: "",
+        neutral: "",
+        danger: ""
       },
       size: {
-        large: "gap-1",
-        small: "gap-1"
+        large: "gap-1.5 p-2.5 h-8.5",
+        medium: "gap-1 p-2 h-7.5",
+        small: "gap-0.5 p-1.5 h-6.5"
       },
       iconOnly: {
         true: "[&>span]:m-0"
@@ -28,89 +33,84 @@ const z = O(
     },
     compoundVariants: [
       {
-        iconOnly: !0,
-        size: "large",
-        class: "p-2"
-      },
-      {
-        iconOnly: !0,
-        size: "small",
-        class: "p-1.5 h-6.5"
+        variant: "filled",
+        shade: "brand",
+        class: "bg-btn-primary-brand-surface-default hover:bg-btn-primary-brand-surface-hover active:bg-btn-primary-brand-surface-pressed disabled:bg-btn-primary-brand-surface-disabled ring-[0.5px] ring-btn-primary-brand-stroke-default hover:ring-btn-primary-brand-stroke-hover active:ring-btn-primary-brand-stroke-pressed disabled:ring-btn-primary-brand-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
-        iconOnly: !1,
-        size: "large",
-        class: "p-2 gap-1"
+        variant: "filled",
+        shade: "neutral",
+        class: "bg-btn-primary-neutral-surface-default hover:bg-btn-primary-neutral-surface-hover active:bg-btn-primary-neutral-surface-pressed disabled:bg-btn-primary-neutral-surface-disabled ring-[0.5px] ring-btn-primary-neutral-stroke-default hover:ring-btn-primary-neutral-stroke-hover active:ring-btn-primary-neutral-stroke-pressed disabled:ring-btn-primary-neutral-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
-        iconOnly: !1,
-        size: "small",
-        class: "p-1.5 gap-0.5"
+        variant: "filled",
+        shade: "danger",
+        class: "bg-btn-primary-danger-surface-default hover:bg-btn-primary-danger-surface-hover active:bg-btn-primary-danger-surface-pressed disabled:bg-btn-primary-danger-surface-disabled ring-[0.5px] ring-btn-primary-danger-stroke-default hover:ring-btn-primary-danger-stroke-hover active:ring-btn-primary-danger-stroke-pressed disabled:ring-btn-primary-danger-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
         shade: "neutral",
-        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-neutral-primary hover:bg-button-secondary-surface-hover hover:text-text-neutral-primary active:bg-button-secondary-surface-pressed active:text-text-neutral-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        class: "text-text-neutral-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
-        shade: "danger",
-        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-danger-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        shade: "brand",
+        class: "text-text-brand-secondary disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
-        shade: "brand",
-        class: "border-none shadow-button-default disabled:shadow-none dark:shadow-none bg-button-secondary-surface-default text-text-brand-secondary hover:bg-button-secondary-surface-hover hover:text-text-secondary active:bg-button-secondary-surface-pressed active:text-text-primary disabled:bg-button-secondary-surface-disabled disabled:text-text-neutral-muted"
+        shade: "danger",
+        class: "text-text-danger-secondary disabled:text-text-neutral-muted"
       },
       {
         variant: "ghost",
         shade: "neutral",
-        class: "bg-transparent text-text-neutral-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
+        class: "text-text-neutral-primary"
       },
       {
         variant: "ghost",
         shade: "brand",
-        class: "bg-transparent text-text-brand-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
+        class: "text-text-brand-secondary"
       },
       {
         variant: "ghost",
         shade: "danger",
-        class: "bg-transparent text-text-danger-primary hover:text-text-neutral-secondary  active:text-text-neutral-muted disabled:text-text-neutral-muted hover:bg-transparent active:bg-transparent"
+        class: "text-text-danger-secondary"
       }
     ],
     defaultVariants: {
       variant: "filled",
       shade: "neutral",
-      size: "large",
+      size: "medium",
       iconOnly: !1
     }
   }
-), N = w.forwardRef(
+), O = k.forwardRef(
   ({
-    className: i,
-    shade: b = "neutral",
+    className: b,
+    shade: u = "neutral",
     size: c,
-    variant: x = "filled",
-    asChild: o = !1,
-    leftIcon: t,
-    rightIcon: a,
-    label: m,
-    children: u,
-    ...p
+    variant: m = "filled",
+    asChild: i = !1,
+    leftIcon: r,
+    rightIcon: t,
+    label: p,
+    children: l,
+    ...g
   }, y) => {
-    const f = o ? k : "button", r = m || u, n = !r && !!(t || a), l = n ? t || a : null, g = d(
-      z({ shade: b, size: c, variant: x, iconOnly: n }),
-      i
+    const f = i ? w : "button", a = p || l, n = !a && !!(r || t), o = n ? r || t : null, v = d(
+      C({ shade: u, size: c, variant: m, iconOnly: n }),
+      b
     ), s = "w-3.5 h-3.5 min-w-max";
-    return /* @__PURE__ */ e(f, { className: g, ref: y, ...p, children: o ? u : n ? l ? /* @__PURE__ */ e("span", { className: s, children: l }) : null : /* @__PURE__ */ v(h, { children: [
-      t && /* @__PURE__ */ e("span", { className: d(s), children: t }),
-      r && /* @__PURE__ */ e("span", { children: r }),
-      a && /* @__PURE__ */ e("span", { className: d(s), children: a })
+    return /* @__PURE__ */ e(f, { className: v, ref: y, ...g, children: i ? l : n ? o ? /* @__PURE__ */ e("span", { className: s, children: o }) : null : /* @__PURE__ */ x(h, { children: [
+      r && /* @__PURE__ */ e("span", { className: d(s), children: r }),
+      a && /* @__PURE__ */ e("span", { children: a }),
+      t && /* @__PURE__ */ e("span", { className: d(s), children: t })
     ] }) });
   }
 );
-N.displayName = "Button";
+O.displayName = "Button";
 export {
-  N as Button,
-  z as buttonVariants
+  O as Button,
+  C as buttonVariants
 };

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

@@ -1,26 +1,26 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import * as n from "react";
-import { cn as p } from "../../lib/utils.js";
+import { cn as h } 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: s,
+    children: r,
     showCollapseButton: g = !0,
-    icon: r,
+    icon: s,
     title: a,
     forceMultiLine: d = !1,
     ...c
   }, m) => {
-    const { toggleCollapsed: f, isCollapsed: i } = C(), [y, u] = n.useState(d), h = n.useRef(null), b = y || !!s;
+    const { toggleCollapsed: f, isCollapsed: i } = C(), [y, u] = n.useState(d), p = n.useRef(null), b = y || !!r;
     return n.useEffect(() => {
       if (d) {
         u(!0);
         return;
       }
-      if (h.current && !i && a) {
+      if (p.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 = a, document.body.appendChild(t);
         const N = t.offsetWidth;
@@ -30,7 +30,7 @@ const w = n.forwardRef(
       "div",
       {
         ref: m,
-        className: p(
+        className: h(
           "flex flex-col items-center gap-1.5 self-stretch border-b border-gray-200 p-2",
           o
         ),
@@ -39,7 +39,7 @@ const w = n.forwardRef(
           v,
           {
             variant: "ghost",
-            shade: "neutralGhost",
+            shade: "neutral",
             size: "small",
             onClick: f,
             title: "Collapse sidebar",
@@ -51,19 +51,19 @@ const w = n.forwardRef(
       "div",
       {
         ref: m,
-        className: p(
+        className: h(
           "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
         ),
         ...c,
         children: [
           /* @__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 }) }),
+            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 }) }),
             g && /* @__PURE__ */ e(
               v,
               {
                 variant: "ghost",
-                shade: "neutralGhost",
+                shade: "neutral",
                 size: "small",
                 onClick: f,
                 title: "Collapse sidebar",
@@ -76,9 +76,9 @@ const w = n.forwardRef(
             /* @__PURE__ */ e(
               "div",
               {
-                ref: h,
+                ref: p,
                 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: s
+                children: r
               }
             )
           ] })
@@ -88,21 +88,21 @@ const w = n.forwardRef(
       "div",
       {
         ref: m,
-        className: p(
+        className: h(
           "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
         ),
         ...c,
         children: [
-          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 }) }),
+          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__ */ l(
             "div",
             {
-              ref: h,
+              ref: p,
               className: "text-content flex flex-col items-start gap-2.5 flex-1 relative",
               children: [
                 /* @__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 })
+                r && /* @__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: r })
               ]
             }
           ),
@@ -110,7 +110,7 @@ const w = n.forwardRef(
             v,
             {
               variant: "ghost",
-              shade: "neutralGhost",
+              shade: "neutral",
               size: "small",
               onClick: f,
               title: "Collapse sidebar",

package/dist/components/nav-header/nav-item/nav-item.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { ButtonProps } from '../../button/button';
-export interface NavItemProps extends ButtonProps {
+export interface NavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isActive?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    label?: string;
 }
 export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/nav-header/nav-item/nav-item.js

@@ -1,31 +1,32 @@
-import { jsx as u } from "react/jsx-runtime";
-import v from "react";
-import { Button as f } from "../../button/button.js";
-import { cn as c } from "../../../lib/utils.js";
-const d = v.forwardRef(
-  ({ leftIcon: r, label: t, rightIcon: a, onClick: o, className: m, isActive: l, asChild: e, children: n, ...i }, s) => /* @__PURE__ */ u(
-    f,
-    {
-      variant: "ghost",
-      shade: "neutralGhost",
-      size: "large",
-      leftIcon: r,
-      rightIcon: a,
-      label: t,
-      onClick: o,
-      className: c(
-        "text-inverted-primary hover:text-inverted-primary hover:surface-neutral-elevated active:surface-neutral-elevated ",
-        l && "surface-neutral-elevated",
-        m
-      ),
-      asChild: e,
-      ...i,
-      ref: s,
-      children: e ? n : null
-    }
-  )
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import u from "react";
+import { cn as f } from "../../../lib/utils.js";
+const p = u.forwardRef(
+  ({ leftIcon: n, label: o, rightIcon: r, className: t, isActive: a, children: l, ...c }, d) => {
+    const i = o ?? l, s = "w-3.5 h-3.5 min-w-max";
+    return /* @__PURE__ */ m(
+      "button",
+      {
+        ref: d,
+        className: f(
+          "h-7.5 inline-flex items-center justify-center p-2 gap-1 rounded-lg",
+          "hover:bg-background-inverted-elevated text-inverted-primary",
+          "leading-none-medium-sm",
+          "select-none hover:cursor-pointer disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
+          a && "bg-background-inverted-elevated",
+          t
+        ),
+        ...c,
+        children: [
+          n && /* @__PURE__ */ e("span", { className: s, children: n }),
+          i && /* @__PURE__ */ e("span", { children: i }),
+          r && /* @__PURE__ */ e("span", { className: s, children: r })
+        ]
+      }
+    );
+  }
 );
-d.displayName = "NavItem";
+p.displayName = "NavItem";
 export {
-  d as NavItem
+  p as NavItem
 };