asheeui 0.6.2 → 0.6.3

package/dist/components/sidebar/Sidebar.js

@@ -1,29 +1,29 @@
 "use client";
-import { jsxs as d, jsx as l, Fragment as R } from "react/jsx-runtime";
-import { useState as Te, useEffect as je, useCallback as V, useMemo as C } from "react";
-import { ArrowLeftIcon as ze } from "../../icons/ArrowLeftIcon.js";
-import { ChevronLeftIcon as Ke } from "../../icons/ChevronLeftIcon.js";
-import { ChevronRightIcon as Fe } from "../../icons/ChevronRightIcon.js";
-import { useAsheeConfig as He } from "../../libs/context.js";
-import { RADIUS_CLASS as T } from "../../shared/radius.js";
-import { resolveVariantClass as j } from "../../shared/variant.js";
-import { resolveCascade as s, resolveRadiusKey as z, resolveClassKey as K } from "../../utils/resolve-token.js";
-import { Button as F } from "../button/Button.js";
-import { Tooltip as Oe } from "../tooltip/Tooltip.js";
-import { FALLBACK_SIDEBAR_CONFIG as t } from "./sidebar-config.js";
-import { SIDEBAR_VARIANT_CLASS as Pe, SIDEBAR_SECTION_LABEL_CLASS as Ge, SIDEBAR_COLLAPSED_WIDTH_CLASS as Me, SIDEBAR_EXPANDED_WIDTH_CLASS as We, SIDEBAR_ITEM_CLASS as Ue, SIDEBAR_HEADER_CLASS as Xe } from "./sidebar-styles.js";
-import { cn as o } from "../../utils/cn.js";
-function qe(f) {
-  return "items" in f && Array.isArray(f.items);
+import { jsxs as d, jsx as t, Fragment as V } from "react/jsx-runtime";
+import { useState as De, useEffect as Le, useCallback as C, useMemo as B } from "react";
+import { ArrowLeftIcon as Re } from "../../icons/ArrowLeftIcon.js";
+import { ChevronLeftIcon as Ve } from "../../icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as Ce } from "../../icons/ChevronRightIcon.js";
+import { useAsheeConfig as Be } from "../../libs/context.js";
+import { resolveCascade as s, resolveRadiusKey as T, resolveClassKey as j } from "../../utils/resolve-token.js";
+import { Button as z } from "../button/Button.js";
+import { Tooltip as Te } from "../tooltip/Tooltip.js";
+import { FALLBACK_SIDEBAR_CONFIG as a } from "./sidebar-config.js";
+import { SIDEBAR_VARIANT_CLASS as je, SIDEBAR_SECTION_LABEL_CLASS as ze, SIDEBAR_COLLAPSED_WIDTH_CLASS as Ke, SIDEBAR_EXPANDED_WIDTH_CLASS as Fe, SIDEBAR_ITEM_CLASS as He, SIDEBAR_HEADER_CLASS as Oe } from "./sidebar-styles.js";
+import { resolveVariantClass as K } from "../../shared/variant.js";
+import { cn as i } from "../../utils/cn.js";
+import { RADIUS_CLASS as F } from "../../shared/radius.js";
+function Pe(v) {
+  return "items" in v && Array.isArray(v.items);
 }
-function Je({
-  items: f,
+function Ge({
+  items: v,
   activeKey: H,
   onSelect: h,
-  isCollapsed: c,
-  onCollapseChange: I,
-  title: x,
-  onBack: B,
+  isCollapsed: m,
+  onCollapseChange: x,
+  title: N,
+  onBack: y,
   backIcon: O,
   userRole: u,
   footer: b,
@@ -32,315 +32,294 @@ function Je({
   radius: M,
   itemRadius: W,
   itemVariant: U,
-  activeItemColor: X,
-  backButtonVariant: q,
-  backButtonColor: J,
-  collapseButtonVariant: Q,
-  collapseButtonColor: Y,
-  showCollapseButton: Z,
-  collapsible: $,
-  defaultCollapsed: g,
-  showTooltips: ee,
-  tooltipPlacement: re,
-  headerClassName: te,
-  bodyClassName: le,
-  itemClassName: ae,
-  sectionLabelClassName: se,
-  footerClassName: k,
-  anchorProps: oe,
-  linkComponent: ne,
-  linkProps: ie,
-  className: de,
-  style: ce,
-  ...ue
+  activeItemVariant: X,
+  activeItemColor: q,
+  showCollapseButton: J,
+  collapsible: Q,
+  defaultCollapsed: Y,
+  showTooltips: Z,
+  tooltipPlacement: $,
+  headerClassName: g,
+  bodyClassName: ee,
+  itemClassName: re,
+  sectionLabelClassName: te,
+  footerClassName: E,
+  anchorProps: ae,
+  linkComponent: le,
+  linkProps: se,
+  className: ie,
+  style: ne,
+  ...oe
 }) {
-  var D;
-  const m = He(), e = (D = m.components) == null ? void 0 : D.sidebar, N = s(
-    $,
-    e == null ? void 0 : e.collapsible,
+  var L;
+  const c = Be(), r = (L = c.components) == null ? void 0 : L.sidebar, _ = s(
+    Q,
+    r == null ? void 0 : r.collapsible,
     void 0,
-    t.collapsible
-  ), _ = s(
-    Z,
-    e == null ? void 0 : e.showCollapseButton,
+    a.collapsible
+  ), k = s(
+    J,
+    r == null ? void 0 : r.showCollapseButton,
     void 0,
-    t.showCollapseButton
-  ), me = s(
-    g,
-    e == null ? void 0 : e.defaultCollapsed,
+    a.showCollapseButton
+  ), de = s(
+    Y,
+    r == null ? void 0 : r.defaultCollapsed,
     void 0,
-    t.defaultCollapsed
-  ), [pe, y] = Te(
-    c ?? me
+    a.defaultCollapsed
+  ), [ce, w] = De(
+    m ?? de
   );
-  je(() => {
-    c !== void 0 && y(c);
-  }, [c]);
-  const a = c ?? pe, ve = V(() => {
-    if (!N) return;
-    const r = !a;
-    I ? I(r) : y(r);
-  }, [a, I, N]), i = s(
+  Le(() => {
+    m !== void 0 && w(m);
+  }, [m]);
+  const l = m ?? ce, me = C(() => {
+    if (!_) return;
+    const e = !l;
+    x ? x(e) : w(e);
+  }, [l, x, _]), o = s(
     G,
-    e == null ? void 0 : e.size,
+    r == null ? void 0 : r.size,
     void 0,
-    t.size
-  ), fe = s(
+    a.size
+  ), ue = s(
     P,
-    e == null ? void 0 : e.variant,
+    r == null ? void 0 : r.variant,
     void 0,
-    t.variant
-  ), S = (r) => r === "full" ? "xl" : r, he = z(
+    a.variant
+  ), S = (e) => e === "full" ? "xl" : e, pe = T(
     S(M),
-    S(e == null ? void 0 : e.radius),
-    m.defaultRadius,
-    t.radius
-  ), A = z(
+    S(r == null ? void 0 : r.radius),
+    c.defaultRadius,
+    a.radius
+  ), I = T(
     S(W),
-    S(e == null ? void 0 : e.itemRadius),
-    m.defaultRadius,
-    t.itemRadius
-  ), E = s(
+    S(r == null ? void 0 : r.itemRadius),
+    c.defaultRadius,
+    a.itemRadius
+  ), A = s(
     U,
-    e == null ? void 0 : e.itemVariant,
-    m.defaultVariant,
-    t.itemVariant
-  ), be = s(
+    r == null ? void 0 : r.itemVariant,
+    c.defaultVariant,
+    a.itemVariant
+  ), fe = s(
     X,
-    e == null ? void 0 : e.activeItemColor,
-    m.defaultColor,
-    t.activeItemColor
-  ), Se = j(
-    E,
-    be
-  ), Ae = j(
-    "ghost",
-    "none"
-  ), Ie = s(
+    r == null ? void 0 : r.activeItemVariant,
+    c.defaultVariant,
+    a.activeItemVariant
+  ), ve = s(
     q,
-    e == null ? void 0 : e.backButtonVariant,
-    void 0,
-    t.backButtonVariant
-  ), xe = s(
-    J,
-    e == null ? void 0 : e.backButtonColor,
-    void 0,
-    t.backButtonColor
-  ), Be = s(
-    Q,
-    e == null ? void 0 : e.collapseButtonVariant,
-    void 0,
-    t.collapseButtonVariant
-  ), Ne = s(
-    Y,
-    e == null ? void 0 : e.collapseButtonColor,
-    void 0,
-    t.collapseButtonColor
-  ), ke = s(
-    ee,
-    e == null ? void 0 : e.showTooltips,
+    r == null ? void 0 : r.activeItemColor,
+    c.defaultColor,
+    a.activeItemColor
+  ), he = K(
+    fe,
+    ve
+  ), be = K(
+    A,
+    "none"
+  ), Se = s(
+    Z,
+    r == null ? void 0 : r.showTooltips,
     void 0,
-    t.showTooltips
-  ), _e = s(
-    re,
-    e == null ? void 0 : e.tooltipPlacement,
+    a.showTooltips
+  ), Ie = s(
+    $,
+    r == null ? void 0 : r.tooltipPlacement,
     void 0,
-    t.tooltipPlacement
-  ), p = f, w = C(() => {
+    a.tooltipPlacement
+  ), p = v, D = B(() => {
     if (!p) return [];
-    const r = p[0];
-    return r ? qe(r) ? p : [
+    const e = p[0];
+    return e ? Pe(e) ? p : [
       {
         id: "__root",
         label: void 0,
         items: p
       }
     ] : [];
-  }, [p]), ye = C(() => w.filter((r) => !r.roles || r.roles.length === 0 ? !0 : u ? r.roles.includes(u) : !1).map((r) => {
+  }, [p]), Ae = B(() => D.filter((e) => !e.roles || e.roles.length === 0 ? !0 : u ? e.roles.includes(u) : !1).map((e) => {
     var n;
     return {
-      ...r,
-      items: (n = r.items) == null ? void 0 : n.filter((v) => !v.roles || v.roles.length === 0 ? !0 : u ? v.roles.includes(u) : !1)
+      ...e,
+      items: (n = e.items) == null ? void 0 : n.filter((f) => !f.roles || f.roles.length === 0 ? !0 : u ? f.roles.includes(u) : !1)
     };
-  }).filter((r) => r.items && r.items.length > 0), [w, u]), Ee = V(
-    (r, n) => {
+  }).filter((e) => e.items && e.items.length > 0), [D, u]), xe = C(
+    (e, n) => {
       if (n.disabled) {
-        r.preventDefault();
+        e.preventDefault();
         return;
       }
       h == null || h(n);
     },
     [h]
-  ), we = a ? Me[i] : We[i], De = (r) => {
-    const n = r.id === H, v = o(
+  ), Ne = l ? Ke[o] : Fe[o], ye = (e) => {
+    const n = e.id === H, f = i(
       "w-full flex items-center gap-3 transition-all truncate no-underline",
-      Ue[i],
-      a ? "justify-center px-0" : "justify-start",
+      He[o],
+      l ? "justify-center px-0" : "justify-start",
       n && "font-medium",
-      // Use the resolved variant classes
-      n ? Se : Ae,
-      // Disabled styles
-      r.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
-      // Radius
-      K(
-        E === "underlined" ? "none" : A,
-        T,
-        t.itemRadius
+      // Use resolved variant classes - active items use activeItemVariant
+      n ? he : be,
+      e.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+      j(
+        A === "underlined" ? "none" : I,
+        F,
+        a.itemRadius
       ),
-      ae
-    ), Re = ne || "a", Ve = {
-      href: r.disabled ? void 0 : r.href,
-      target: r.target,
-      rel: r.rel,
-      onClick: (Ce) => Ee(Ce, r),
-      className: v,
-      ...oe,
-      ...ie || {}
-    }, L = /* @__PURE__ */ d(Re, { ...Ve, children: [
-      r.icon && /* @__PURE__ */ l(
+      re
+    ), Ee = le || "a", ke = {
+      href: e.disabled ? void 0 : e.href,
+      target: e.target,
+      rel: e.rel,
+      onClick: (we) => xe(we, e),
+      className: f,
+      ...ae,
+      ...se || {}
+    }, R = /* @__PURE__ */ d(Ee, { ...ke, children: [
+      e.icon && /* @__PURE__ */ t(
         "span",
         {
-          className: o(
+          className: i(
             "shrink-0 flex items-center justify-center",
-            a && "w-full"
-            // Make the icon span take full width in collapsed mode
+            l && "w-full"
           ),
-          children: r.icon
+          children: e.icon
         }
       ),
-      !a && /* @__PURE__ */ d(R, { children: [
-        /* @__PURE__ */ l("span", { className: "truncate flex-1 text-left", children: r.label }),
-        r.badge && /* @__PURE__ */ l("span", { className: "shrink-0", children: r.badge })
+      !l && /* @__PURE__ */ d(V, { children: [
+        /* @__PURE__ */ t("span", { className: "truncate flex-1 text-left", children: e.label }),
+        e.badge && /* @__PURE__ */ t("span", { className: "shrink-0", children: e.badge })
       ] })
-    ] }, String(r.id));
-    return a && ke ? /* @__PURE__ */ l(
-      Oe,
+    ] }, String(e.id));
+    return l && Se ? /* @__PURE__ */ t(
+      Te,
       {
-        content: r.label,
-        placement: _e,
-        variant: (e == null ? void 0 : e.tooltipVariant) ?? t.tooltipVariant,
-        color: (e == null ? void 0 : e.tooltipColor) ?? t.tooltipColor,
-        radius: A,
-        children: L
+        content: e.label,
+        placement: Ie,
+        variant: (r == null ? void 0 : r.tooltipVariant) ?? a.tooltipVariant,
+        color: (r == null ? void 0 : r.tooltipColor) ?? a.tooltipColor,
+        radius: I,
+        children: R
       },
-      String(r.id)
-    ) : L;
-  }, Le = (r) => !r.items || r.items.length === 0 ? null : /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5", children: [
-    !a && r.label && /* @__PURE__ */ l(
+      String(e.id)
+    ) : R;
+  }, _e = (e) => !e.items || e.items.length === 0 ? null : /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5", children: [
+    !l && e.label && /* @__PURE__ */ t(
       "div",
       {
-        className: o(
+        className: i(
           "text-foreground/70 font-medium uppercase tracking-wider truncate",
-          Ge[i],
-          se
+          ze[o],
+          te
         ),
-        children: r.label
+        children: e.label
       }
     ),
-    r.items.map(De)
-  ] }, String(r.id));
+    e.items.map(ye)
+  ] }, String(e.id));
   return /* @__PURE__ */ d(
     "aside",
     {
-      className: o(
+      className: i(
         "h-full flex flex-col transition-all duration-200 select-none shrink-0",
-        we,
-        Pe[fe],
-        K(
-          he,
-          T,
-          t.radius
+        Ne,
+        je[ue],
+        j(
+          pe,
+          F,
+          a.radius
         ),
-        de
+        ie
       ),
-      style: ce,
-      ...ue,
+      style: ne,
+      ...oe,
       children: [
-        (B || x) && /* @__PURE__ */ d(
+        (y || N) && /* @__PURE__ */ d(
           "div",
           {
-            className: o(
+            className: i(
               "flex items-center gap-3 border-b border-border border-dashed shrink-0",
-              Xe[i],
-              a && "justify-center px-0",
-              te
+              Oe[o],
+              l && "justify-center px-0",
+              g
             ),
             children: [
-              B && /* @__PURE__ */ l(
-                F,
+              y && /* @__PURE__ */ t(
+                z,
                 {
                   icon: !0,
                   "aria-label": "Go back",
-                  variant: Ie,
-                  color: xe,
-                  size: i,
-                  radius: A,
-                  onClick: B,
+                  variant: A,
+                  color: "secondary",
+                  size: o,
+                  radius: I,
+                  onClick: y,
                   className: "shrink-0",
-                  children: /* @__PURE__ */ l(
+                  children: /* @__PURE__ */ t(
                     "span",
                     {
-                      className: o(
+                      className: i(
                         "flex items-center justify-center transition-transform duration-200"
                       ),
-                      children: O ?? /* @__PURE__ */ l(ze, { className: "size-4" })
+                      children: O ?? /* @__PURE__ */ t(Re, { className: "size-4" })
                     }
                   )
                 }
               ),
-              !a && x && /* @__PURE__ */ l("span", { className: "font-semibold text-foreground truncate tracking-tight transition-opacity duration-200", children: x })
+              !l && N && /* @__PURE__ */ t("span", { className: "font-semibold text-foreground truncate tracking-tight transition-opacity duration-200", children: N })
             ]
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ t(
           "nav",
           {
-            className: o(
+            className: i(
               "flex-1 overflow-y-auto py-3 px-2 flex flex-col gap-3 scrollbar-hide",
-              le
+              ee
             ),
-            children: ye.map(Le)
+            children: Ae.map(_e)
           }
         ),
-        _ && N && /* @__PURE__ */ d(
+        k && _ && /* @__PURE__ */ d(
           "div",
           {
-            className: o(
+            className: i(
               "border-t border-border shrink-0",
-              a ? "p-2" : "p-3",
-              k
+              l ? "p-2" : "p-3",
+              E
             ),
             children: [
-              !a && b && /* @__PURE__ */ l("div", { className: "mb-2", children: b }),
-              /* @__PURE__ */ l(
-                F,
+              !l && b && /* @__PURE__ */ t("div", { className: "mb-2", children: b }),
+              /* @__PURE__ */ t(
+                z,
                 {
                   icon: !0,
-                  "aria-label": a ? "Expand sidebar" : "Collapse sidebar",
-                  variant: Be,
-                  color: Ne,
-                  size: i,
-                  radius: A,
-                  onClick: ve,
-                  className: o(
+                  "aria-label": l ? "Expand sidebar" : "Collapse sidebar",
+                  variant: A,
+                  color: "secondary",
+                  size: o,
+                  radius: I,
+                  onClick: me,
+                  className: i(
                     "w-full",
-                    a ? "justify-center px-0" : "justify-start"
+                    l ? "justify-center px-0" : "justify-start"
                   ),
-                  children: /* @__PURE__ */ l("span", { className: "flex items-center gap-2", children: a ? /* @__PURE__ */ l(Fe, { className: "size-4" }) : /* @__PURE__ */ d(R, { children: [
-                    /* @__PURE__ */ l(Ke, { className: "size-4" }),
-                    /* @__PURE__ */ l("span", { className: "text-sm", children: "Collapse" })
+                  children: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: l ? /* @__PURE__ */ t(Ce, { className: "size-4" }) : /* @__PURE__ */ d(V, { children: [
+                    /* @__PURE__ */ t(Ve, { className: "size-4" }),
+                    /* @__PURE__ */ t("span", { className: "text-sm", children: "Collapse" })
                   ] }) })
                 }
               )
             ]
           }
         ),
-        !_ && b && /* @__PURE__ */ l(
+        !k && b && /* @__PURE__ */ t(
           "div",
           {
-            className: o(
+            className: i(
               "border-t border-border shrink-0 p-3",
-              k
+              E
             ),
             children: b
           }
@@ -349,7 +328,7 @@ function Je({
     }
   );
 }
-Je.displayName = "Sidebar";
+Ge.displayName = "Sidebar";
 export {
-  Je as Sidebar
+  Ge as Sidebar
 };