@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/{sidebar-OVzwN3jE.js → sidebar-CHF5xr_P.js}

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as f, Fragment as O } from "react/jsx-runtime";
-import { forwardRef as g, useState as D, useEffect as $, useCallback as K, useId as rs, useRef as is, useMemo as ds, useContext as G, createContext as q } from "react";
+import { forwardRef as b, useState as D, useEffect as $, useCallback as K, useId as rs, useRef as is, useMemo as ns, useContext as G, createContext as q } from "react";
 import * as B from "@radix-ui/react-dialog";
 import * as F from "@radix-ui/react-collapsible";
 import * as A from "@radix-ui/react-accordion";
 import * as S from "@radix-ui/react-tooltip";
-import { a as ns } from "./accordion-B6fyINUk.js";
+import { a as ds } from "./accordion-BEnrZmAn.js";
 import { Slot as ts } from "@radix-ui/react-slot";
-import { c as k } from "./index-D2ZczOXr.js";
+import { c as C } from "./index-D2ZczOXr.js";
 import { useTranslation as I } from "react-i18next";
 import { X as os } from "./x-CCcI3eJp.js";
 import { c as R } from "./createLucideIcon-CrFbzy84.js";
@@ -64,7 +64,7 @@ const ps = [
 ], gs = R("star", ps), H = q({
   mode: "expanded",
   density: "default"
-}), w = () => G(H), U = "ui.sidebar.state";
+}), y = () => G(H), U = "ui.sidebar.state";
 function bs(s) {
   if (typeof window > "u") return s;
   try {
@@ -82,12 +82,12 @@ function hs(s) {
     }
 }
 function Zs(s, e) {
-  const [r, i] = D(() => {
+  const [r, n] = D(() => {
     if (typeof window > "u")
       return typeof e == "function" ? e() : e;
     try {
-      const n = window.localStorage.getItem(s);
-      if (n !== null) return JSON.parse(n);
+      const d = window.localStorage.getItem(s);
+      if (d !== null) return JSON.parse(d);
     } catch {
     }
     return typeof e == "function" ? e() : e;
@@ -98,9 +98,9 @@ function Zs(s, e) {
         window.localStorage.setItem(s, JSON.stringify(r));
       } catch {
       }
-  }, [s, r]), [r, i];
+  }, [s, r]), [r, n];
 }
-const V = k(
+const V = C(
   [
     "ds:flex ds:flex-col",
     // Sidebar sits at the page background in light mode (white-on-white
@@ -140,32 +140,33 @@ const V = k(
     },
     defaultVariants: { mode: "expanded", density: "default" }
   }
-), xs = g(
+), xs = b(
   ({
     state: s,
     defaultState: e = "expanded",
     onStateChange: r,
-    density: i = "default",
-    open: n,
+    density: n = "default",
+    open: d,
     onOpenChange: o,
-    "aria-label": c,
+    "aria-label": u,
     className: t,
     children: m,
-    ...u
-  }, v) => {
-    const { t: h } = I(), b = s !== void 0, [x, d] = D(
-      () => b ? s : bs(e)
-    ), y = b ? s : x;
+    id: l,
+    ...v
+  }, h) => {
+    const { t: w } = I(), p = s !== void 0, [i, N] = D(
+      () => p ? s : bs(e)
+    ), x = p ? s : i;
     $(() => {
-      b || hs(x);
-    }, [x, b]);
-    const N = K(
-      (j) => {
-        b || d(j), r == null || r(j);
+      p || hs(i);
+    }, [i, p]);
+    const g = K(
+      (z) => {
+        p || N(z), r == null || r(z);
       },
-      [b, r]
-    ), p = c ?? h("ui.navigation.sidebar.label");
-    return y === "overlay" ? /* @__PURE__ */ a(H.Provider, { value: { mode: "overlay", density: i, transitionTo: N }, children: /* @__PURE__ */ a(B.Root, { open: n, onOpenChange: o, children: /* @__PURE__ */ f(B.Portal, { children: [
+      [p, r]
+    ), j = u ?? w("ui.navigation.sidebar.label");
+    return x === "overlay" ? /* @__PURE__ */ a(H.Provider, { value: { mode: "overlay", density: n, transitionTo: g }, children: /* @__PURE__ */ a(B.Root, { open: d, onOpenChange: o, children: /* @__PURE__ */ f(B.Portal, { children: [
       /* @__PURE__ */ a(
         B.Overlay,
         {
@@ -181,12 +182,12 @@ const V = k(
       /* @__PURE__ */ f(
         B.Content,
         {
-          "aria-label": p,
+          "aria-label": j,
           className: [
             "ds:fixed ds:z-[var(--z-modal)]",
             "ds:inset-inline-start-0 ds:inset-block-start-0",
             "ds:h-dvh",
-            V({ mode: "overlay", density: i }),
+            V({ mode: "overlay", density: n }),
             "ds:shadow-[var(--shadow-xl)]",
             "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
             "ds:data-[state=open]:slide-in-from-left ds:data-[state=closed]:slide-out-to-left",
@@ -196,12 +197,12 @@ const V = k(
             t ?? ""
           ].filter(Boolean).join(" "),
           children: [
-            /* @__PURE__ */ a("nav", { ref: v, "aria-label": p, "data-component": "sidebar", className: "ds:flex ds:flex-col ds:h-full", ...u, children: m }),
+            /* @__PURE__ */ a("nav", { ref: h, id: l, "aria-label": j, "data-component": "sidebar", "data-component-id": l, className: "ds:flex ds:flex-col ds:h-full", ...v, children: m }),
             /* @__PURE__ */ a(B.Close, { asChild: !0, children: /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
-                "aria-label": h("ui.navigation.sidebar.close"),
+                "aria-label": w("ui.navigation.sidebar.close"),
                 className: [
                   "ds:absolute ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]",
                   "ds:inline-flex ds:items-center ds:justify-center",
@@ -217,29 +218,31 @@ const V = k(
           ]
         }
       )
-    ] }) }) }) : /* @__PURE__ */ a(H.Provider, { value: { mode: y, density: i, transitionTo: N }, children: /* @__PURE__ */ a(S.Provider, { delayDuration: 300, children: /* @__PURE__ */ a(
+    ] }) }) }) : /* @__PURE__ */ a(H.Provider, { value: { mode: x, density: n, transitionTo: g }, children: /* @__PURE__ */ a(S.Provider, { delayDuration: 300, children: /* @__PURE__ */ a(
       "nav",
       {
-        ref: v,
-        "aria-label": p,
+        ref: h,
+        id: l,
+        "aria-label": j,
         "data-component": "sidebar",
-        "data-mode": y,
-        "data-density": i,
+        "data-component-id": l,
+        "data-mode": x,
+        "data-density": n,
         className: [
-          V({ mode: y, density: i }),
-          i === "compact" ? "ds:density-compact" : "",
+          V({ mode: x, density: n }),
+          n === "compact" ? "ds:density-compact" : "",
           t ?? ""
         ].filter(Boolean).join(" "),
-        ...u,
+        ...v,
         children: m
       }
     ) }) });
   }
 );
 xs.displayName = "Sidebar";
-const ys = g(
+const ys = b(
   ({ className: s, ...e }, r) => {
-    const { mode: i } = w();
+    const { mode: n } = y();
     return /* @__PURE__ */ a(
       "div",
       {
@@ -249,7 +252,7 @@ const ys = g(
           "ds:min-h-[var(--min-target-size)]",
           // Icon-rail is 64px — shrink horizontal padding so a 44×44
           // control fits centred inside the header.
-          i === "icon" ? "ds:justify-center ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+          n === "icon" ? "ds:justify-center ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
           "ds:py-[var(--spacing-sm)]",
           // Hairline border + downward chrome shadow cast the header as a
           // sticky top band above the scrolling body.
@@ -263,7 +266,7 @@ const ys = g(
   }
 );
 ys.displayName = "SidebarHeader";
-const ws = g(
+const ws = b(
   ({ className: s, ...e }, r) => /* @__PURE__ */ a(
     "div",
     {
@@ -279,9 +282,9 @@ const ws = g(
   )
 );
 ws.displayName = "SidebarBody";
-const Ns = g(
+const Ns = b(
   ({ className: s, ...e }, r) => {
-    const { mode: i } = w();
+    const { mode: n } = y();
     return /* @__PURE__ */ a(
       "div",
       {
@@ -290,7 +293,7 @@ const Ns = g(
           "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
           // Icon-rail is 64px — two 44×44 controls can't sit side-by-side,
           // so switch to a vertical stack and let each row self-centre.
-          i === "icon" ? "ds:flex-col ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+          n === "icon" ? "ds:flex-col ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
           "ds:min-h-[var(--min-target-size)]",
           "ds:py-[var(--spacing-sm)]",
           // Hairline border + upward chrome shadow cast the footer as a
@@ -320,26 +323,26 @@ const Ss = [
   "ds:size-4",
   "ds:text-[var(--accent)]",
   "ds:me-[var(--spacing-xs)]"
-].join(" "), J = g(
+].join(" "), J = b(
   ({
     label: s,
     icon: e,
     collapsible: r = !0,
-    defaultOpen: i = !0,
-    open: n,
+    defaultOpen: n = !0,
+    open: d,
     onOpenChange: o,
-    className: c,
+    className: u,
     children: t,
     ...m
-  }, u) => {
-    const { mode: v } = w(), h = v === "icon", b = r && !h && !!s, x = [
+  }, l) => {
+    const { mode: v } = y(), h = v === "icon", w = r && !h && !!s, p = [
       "ds:flex ds:flex-col",
       "ds:gap-[var(--spacing-xs)]",
       "ds:mt-[var(--spacing-sm)]",
-      c ?? ""
+      u ?? ""
     ].filter(Boolean).join(" ");
-    if (!b)
-      return /* @__PURE__ */ f("div", { ref: u, className: x, ...m, children: [
+    if (!w)
+      return /* @__PURE__ */ f("div", { ref: l, className: p, ...m, children: [
         !!s || !!e ? /* @__PURE__ */ f(
           "span",
           {
@@ -359,17 +362,17 @@ const Ss = [
         ) : null,
         t
       ] });
-    const d = "section";
+    const i = "section";
     return /* @__PURE__ */ a(
       A.Root,
       {
         type: "single",
         collapsible: !0,
-        defaultValue: n === void 0 && i ? d : void 0,
-        value: n === void 0 ? void 0 : n ? d : "",
-        onValueChange: o ? (y) => o(y === d) : void 0,
+        defaultValue: d === void 0 && n ? i : void 0,
+        value: d === void 0 ? void 0 : d ? i : "",
+        onValueChange: o ? (N) => o(N === i) : void 0,
         asChild: !0,
-        children: /* @__PURE__ */ a("div", { ref: u, className: x, ...m, children: /* @__PURE__ */ f(A.Item, { value: d, children: [
+        children: /* @__PURE__ */ a("div", { ref: l, className: p, ...m, children: /* @__PURE__ */ f(A.Item, { value: i, children: [
           /* @__PURE__ */ a(A.Header, { className: "ds:flex", children: /* @__PURE__ */ f(A.Trigger, { className: Ss, children: [
             e ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: M, children: e }) : null,
             /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:text-start", children: s }),
@@ -382,7 +385,7 @@ const Ss = [
             )
           ] }) }),
           /* @__PURE__ */ a(
-            ns,
+            ds,
             {
               "aria-label": s,
               className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
@@ -406,17 +409,17 @@ const js = [
   "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
   "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
-].join(" "), zs = g(
-  ({ label: s, icon: e, children: r, className: i, defaultOpen: n, open: o, onOpenChange: c, ...t }, m) => {
-    const { mode: u } = w();
+].join(" "), zs = b(
+  ({ label: s, icon: e, children: r, className: n, defaultOpen: d, open: o, onOpenChange: u, ...t }, m) => {
+    const { mode: l } = y();
     return /* @__PURE__ */ f(
       F.Root,
       {
         ref: m,
-        defaultOpen: n,
+        defaultOpen: d,
         open: o,
-        onOpenChange: c,
-        className: i,
+        onOpenChange: u,
+        className: n,
         ...t,
         children: [
           /* @__PURE__ */ f(F.Trigger, { className: js, children: [
@@ -433,12 +436,12 @@ const js = [
               {
                 className: [
                   "ds:flex-1 ds:text-start",
-                  u === "icon" ? "ds:sr-only" : ""
+                  l === "icon" ? "ds:sr-only" : ""
                 ].join(" "),
                 children: s
               }
             ),
-            u !== "icon" ? /* @__PURE__ */ a(
+            l !== "icon" ? /* @__PURE__ */ a(
               L,
               {
                 "aria-hidden": "true",
@@ -464,7 +467,7 @@ const js = [
   }
 );
 zs.displayName = "SidebarGroup";
-const ks = k(
+const ks = C(
   [
     // Every row is a pin-hover parent so inline pin / reorder affordances can
     // fade in on hover of the whole row — keep `group/item` on this selector.
@@ -525,34 +528,34 @@ const ks = k(
       isActive: !1
     }
   }
-), W = g(
+), W = b(
   ({
     asChild: s = !1,
     isActive: e = !1,
     isPinned: r = !1,
-    onPinChange: i,
-    pinLabel: n,
+    onPinChange: n,
+    pinLabel: d,
     className: o,
-    children: c,
+    children: u,
     "aria-label": t,
     ...m
-  }, u) => {
-    const { mode: v, density: h } = w(), b = s ? ts : "a", x = i !== void 0 && v !== "icon", d = /* @__PURE__ */ a(
-      b,
+  }, l) => {
+    const { mode: v, density: h } = y(), w = s ? ts : "a", p = n !== void 0 && v !== "icon", i = /* @__PURE__ */ a(
+      w,
       {
-        ref: u,
+        ref: l,
         "aria-current": e ? "page" : void 0,
         "aria-label": t,
         className: ks({
           mode: v,
           density: h,
           isActive: e,
-          className: x ? "ds:flex-1 ds:min-w-0" : o
+          className: p ? "ds:flex-1 ds:min-w-0" : o
         }),
         ...m,
-        children: c
+        children: u
       }
-    ), y = x ? /* @__PURE__ */ f(
+    ), N = p ? /* @__PURE__ */ f(
       "div",
       {
         className: [
@@ -560,20 +563,20 @@ const ks = k(
           o ?? ""
         ].filter(Boolean).join(" "),
         children: [
-          d,
+          i,
           /* @__PURE__ */ a(
             _,
             {
               isPinned: r,
-              label: n ?? t ?? "",
-              onPinChange: i
+              label: d ?? t ?? "",
+              onPinChange: n
             }
           )
         ]
       }
-    ) : d;
+    ) : i;
     return v === "icon" && t ? /* @__PURE__ */ f(S.Root, { children: [
-      /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: y }),
+      /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: N }),
       /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ f(
         S.Content,
         {
@@ -592,15 +595,15 @@ const ks = k(
           ]
         }
       ) })
-    ] }) : y;
+    ] }) : N;
   }
 );
 W.displayName = "SidebarItem";
-const Cs = g(
-  ({ className: s, children: e, ...r }, i) => /* @__PURE__ */ a(
+const Cs = b(
+  ({ className: s, children: e, ...r }, n) => /* @__PURE__ */ a(
     "span",
     {
-      ref: i,
+      ref: n,
       "aria-hidden": "true",
       className: [
         "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
@@ -620,18 +623,18 @@ const Cs = g(
   )
 );
 Cs.displayName = "SidebarItemIcon";
-const Ts = g(
-  ({ className: s, children: e, ...r }, i) => {
-    const { mode: n } = w();
+const Ts = b(
+  ({ className: s, children: e, ...r }, n) => {
+    const { mode: d } = y();
     return /* @__PURE__ */ a(
       "span",
       {
-        ref: i,
+        ref: n,
         className: [
           "ds:flex-1",
           "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
           "ds:text-start",
-          n === "icon" ? "ds:sr-only" : "",
+          d === "icon" ? "ds:sr-only" : "",
           s ?? ""
         ].filter(Boolean).join(" "),
         ...r,
@@ -641,13 +644,13 @@ const Ts = g(
   }
 );
 Ts.displayName = "SidebarItemLabel";
-const Bs = g(
-  ({ className: s, children: e, ...r }, i) => {
-    const { mode: n } = w(), o = n === "icon";
+const Bs = b(
+  ({ className: s, children: e, ...r }, n) => {
+    const { mode: d } = y(), o = d === "icon";
     return /* @__PURE__ */ a(
       "span",
       {
-        ref: i,
+        ref: n,
         "aria-hidden": o ? "true" : void 0,
         className: [
           "ds:inline-flex ds:items-center ds:justify-center",
@@ -675,7 +678,7 @@ const Bs = g(
   }
 );
 Bs.displayName = "SidebarItemBadge";
-const Ds = k(
+const Ds = C(
   [
     "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:min-h-[var(--min-target-size)]",
@@ -688,16 +691,16 @@ const Ds = k(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:no-underline"
   ].join(" ")
-), Is = g(({ logo: s, name: e, showChevron: r = !0, className: i, ...n }, o) => {
-  const { mode: c } = w(), t = c !== "icon";
+), Is = b(({ logo: s, name: e, showChevron: r = !0, className: n, ...d }, o) => {
+  const { mode: u } = y(), t = u !== "icon";
   return /* @__PURE__ */ f(
     "button",
     {
       ref: o,
       type: "button",
       "aria-label": e,
-      className: [Ds(), i].filter(Boolean).join(" "),
-      ...n,
+      className: [Ds(), n].filter(Boolean).join(" "),
+      ...d,
       children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:shrink-0", children: s }),
         t ? /* @__PURE__ */ f(O, { children: [
@@ -721,7 +724,7 @@ const Ds = k(
   );
 });
 Is.displayName = "SidebarWorkspaceSwitcher";
-const As = k(
+const As = C(
   [
     "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
     "ds:min-h-[var(--min-target-size)]",
@@ -744,8 +747,8 @@ const As = k(
     },
     defaultVariants: { mode: "expanded" }
   }
-), Rs = g(({ icon: s, label: e, shortcut: r, className: i, ...n }, o) => {
-  const { mode: c } = w(), t = c !== "icon";
+), Rs = b(({ icon: s, label: e, shortcut: r, className: n, ...d }, o) => {
+  const { mode: u } = y(), t = u !== "icon";
   return /* @__PURE__ */ f(
     "button",
     {
@@ -753,8 +756,8 @@ const As = k(
       type: "button",
       "aria-label": e,
       "aria-keyshortcuts": r,
-      className: [As({ mode: c }), i].filter(Boolean).join(" "),
-      ...n,
+      className: [As({ mode: u }), n].filter(Boolean).join(" "),
+      ...d,
       children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:inline-flex ds:size-4 ds:items-center ds:justify-center", children: s }),
         t ? /* @__PURE__ */ f(O, { children: [
@@ -779,21 +782,21 @@ const Ps = [
   "ds:forced-colors:focus-visible:outline-[CanvasText]",
   "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)]",
   "ds:motion-reduce:transition-none"
-].join(" "), _ = g(
-  ({ isPinned: s, onPinChange: e, label: r, className: i, onClick: n, ...o }, c) => {
-    const { t } = I(), { mode: m } = w();
+].join(" "), _ = b(
+  ({ isPinned: s, onPinChange: e, label: r, className: n, onClick: d, ...o }, u) => {
+    const { t } = I(), { mode: m } = y();
     if (m === "icon") return null;
-    const u = s ? t("ui.navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : t("ui.navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
+    const l = s ? t("ui.navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : t("ui.navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
     return /* @__PURE__ */ a(
       "button",
       {
-        ref: c,
+        ref: u,
         type: "button",
-        "aria-label": u,
+        "aria-label": l,
         "aria-pressed": s,
-        className: [Ps, i].filter(Boolean).join(" "),
+        className: [Ps, n].filter(Boolean).join(" "),
         onClick: (v) => {
-          v.preventDefault(), v.stopPropagation(), e == null || e(!s), n == null || n(v);
+          v.preventDefault(), v.stopPropagation(), e == null || e(!s), d == null || d(v);
         },
         ...o,
         children: /* @__PURE__ */ a(
@@ -809,33 +812,33 @@ const Ps = [
   }
 );
 _.displayName = "SidebarPinButton";
-const X = q(null), Fs = () => G(X), Hs = g(
-  ({ heading: s, emptyMessage: e, onReorder: r, className: i, children: n, ...o }, c) => {
-    const { t } = I(), m = s ?? t("ui.navigation.sidebar.favorites", "Favourites"), u = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], v = u.length, h = v > 0, [b, x] = D(null), [d, y] = D(""), N = is(!1), p = K((C) => {
-      N.current = !N.current, y(
-        N.current ? C : `${C}​`
+const X = q(null), Fs = () => G(X), Hs = b(
+  ({ heading: s, emptyMessage: e, onReorder: r, className: n, children: d, ...o }, u) => {
+    const { t } = I(), m = s ?? t("ui.navigation.sidebar.favorites", "Favourites"), l = Array.isArray(d) ? d.filter(Boolean) : d ? [d] : [], v = l.length, h = v > 0, [w, p] = D(null), [i, N] = D(""), x = is(!1), g = K((z) => {
+      x.current = !x.current, N(
+        x.current ? z : `${z}​`
       );
-    }, []), j = ds(
-      () => ({ onReorder: r, count: v, dragSource: b, setDragSource: x, announce: p }),
-      [r, v, b, p]
+    }, []), j = ns(
+      () => ({ onReorder: r, count: v, dragSource: w, setDragSource: p, announce: g }),
+      [r, v, w, g]
     );
     return !h && !e ? null : /* @__PURE__ */ a(X.Provider, { value: j, children: /* @__PURE__ */ f(
       J,
       {
-        ref: c,
+        ref: u,
         label: m,
-        className: i,
+        className: n,
         ...o,
         children: [
-          h ? u : /* @__PURE__ */ a("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: e }),
-          /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: d })
+          h ? l : /* @__PURE__ */ a("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: e }),
+          /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: i })
         ]
       }
     ) });
   }
 );
 Hs.displayName = "SidebarFavorites";
-const Ls = k(
+const Ls = C(
   [
     "ds:group/item ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -868,54 +871,54 @@ const Ls = k(
   "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:outline-[CanvasText]",
   "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
-].join(" "), Es = g(
+].join(" "), Es = b(
   ({
     index: s,
     isActive: e = !1,
     asChild: r = !1,
-    reorderLabel: i,
-    isPinned: n = !1,
+    reorderLabel: n,
+    isPinned: d = !1,
     onPinChange: o,
-    pinLabel: c,
+    pinLabel: u,
     "aria-label": t,
     className: m,
-    children: u,
+    children: l,
     ...v
   }, h) => {
-    const { t: b } = I(), { mode: x } = w(), d = Fs(), [y, N] = D(!1), p = !!(d != null && d.onReorder) && x !== "icon", j = i ?? t ?? "", C = rs(), T = (l, z) => {
-      if (!(d != null && d.onReorder)) return;
-      const P = Math.max(0, Math.min(d.count - 1, z));
-      P !== l && (d.onReorder(l, P), d.announce(
-        b(
+    const { t: w } = I(), { mode: p } = y(), i = Fs(), [N, x] = D(!1), g = !!(i != null && i.onReorder) && p !== "icon", j = n ?? t ?? "", z = rs(), T = (c, k) => {
+      if (!(i != null && i.onReorder)) return;
+      const P = Math.max(0, Math.min(i.count - 1, k));
+      P !== c && (i.onReorder(c, P), i.announce(
+        w(
           "ui.navigation.sidebar.reorderAnnounce",
           "{{label}} moved to position {{to}} of {{total}}",
-          { label: j, to: P + 1, total: d.count }
+          { label: j, to: P + 1, total: i.count }
         )
       ));
-    }, Y = (l) => {
-      p && (l.altKey && l.key === "ArrowUp" ? (l.preventDefault(), T(s, s - 1)) : l.altKey && l.key === "ArrowDown" ? (l.preventDefault(), T(s, s + 1)) : l.key === "Home" && l.altKey ? (l.preventDefault(), T(s, 0)) : l.key === "End" && l.altKey && (l.preventDefault(), T(s, d.count - 1)));
-    }, Q = (l) => {
-      p && (d == null || d.setDragSource(s), l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("ds:text/plain", String(s))));
+    }, Y = (c) => {
+      g && (c.altKey && c.key === "ArrowUp" ? (c.preventDefault(), T(s, s - 1)) : c.altKey && c.key === "ArrowDown" ? (c.preventDefault(), T(s, s + 1)) : c.key === "Home" && c.altKey ? (c.preventDefault(), T(s, 0)) : c.key === "End" && c.altKey && (c.preventDefault(), T(s, i.count - 1)));
+    }, Q = (c) => {
+      g && (i == null || i.setDragSource(s), c.dataTransfer && (c.dataTransfer.effectAllowed = "move", c.dataTransfer.setData("ds:text/plain", String(s))));
     }, Z = () => {
-      d == null || d.setDragSource(null), N(!1);
-    }, ss = (l) => {
-      !p || (d == null ? void 0 : d.dragSource) === null || (l.preventDefault(), l.dataTransfer && (l.dataTransfer.dropEffect = "move"), N(!0));
-    }, es = () => N(!1), as = (l) => {
-      if (!p) return;
-      l.preventDefault();
-      const z = d == null ? void 0 : d.dragSource;
-      N(!1), !(z == null || z === s) && T(z, s);
-    }, E = (d == null ? void 0 : d.dragSource) === s;
+      i == null || i.setDragSource(null), x(!1);
+    }, ss = (c) => {
+      !g || (i == null ? void 0 : i.dragSource) === null || (c.preventDefault(), c.dataTransfer && (c.dataTransfer.dropEffect = "move"), x(!0));
+    }, es = () => x(!1), as = (c) => {
+      if (!g) return;
+      c.preventDefault();
+      const k = i == null ? void 0 : i.dragSource;
+      x(!1), !(k == null || k === s) && T(k, s);
+    }, E = (i == null ? void 0 : i.dragSource) === s;
     return /* @__PURE__ */ f(
       "div",
       {
         className: Ls({
           dragging: E,
-          dropTarget: y && !E
+          dropTarget: N && !E
         }),
-        draggable: p || void 0,
-        onDragStart: p ? Q : void 0,
-        onDragEnd: p ? Z : void 0,
+        draggable: g || void 0,
+        onDragStart: g ? Q : void 0,
+        onDragEnd: g ? Z : void 0,
         onDragOver: ss,
         onDragLeave: es,
         onDrop: as,
@@ -927,22 +930,22 @@ const Ls = k(
               isActive: e,
               asChild: r,
               "aria-label": t,
-              "aria-describedby": p ? C : void 0,
-              draggable: p ? !1 : void 0,
+              "aria-describedby": g ? z : void 0,
+              draggable: g ? !1 : void 0,
               className: [
-                p ? "ds:flex-1 ds:min-w-0" : "",
+                g ? "ds:flex-1 ds:min-w-0" : "",
                 m ?? ""
               ].filter(Boolean).join(" "),
               ...v,
-              children: u
+              children: l
             }
           ),
-          p ? /* @__PURE__ */ a(
+          g ? /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              id: C,
-              "aria-label": b(
+              id: z,
+              "aria-label": w(
                 "ui.navigation.sidebar.reorderHandle",
                 "Reorder {{label}}. Press Alt + Up or Alt + Down to move.",
                 { label: j }
@@ -952,11 +955,11 @@ const Ls = k(
               children: /* @__PURE__ */ a(cs, { "aria-hidden": "true", className: "ds:size-4" })
             }
           ) : null,
-          o && x !== "icon" ? /* @__PURE__ */ a(
+          o && p !== "icon" ? /* @__PURE__ */ a(
             _,
             {
-              isPinned: n,
-              label: c ?? t ?? "",
+              isPinned: d,
+              label: u ?? t ?? "",
               onPinChange: o
             }
           ) : null
@@ -966,7 +969,7 @@ const Ls = k(
   }
 );
 Es.displayName = "SidebarFavoriteItem";
-const Vs = k(
+const Vs = C(
   [
     "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:min-h-[var(--min-target-size)]",
@@ -979,15 +982,15 @@ const Vs = k(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:no-underline"
   ].join(" ")
-), Ms = g(({ avatar: s, name: e, subtitle: r, subtitleLabel: i, className: n, ...o }, c) => {
-  const { mode: t } = w(), m = t !== "icon", u = typeof r == "string" ? r : i;
+), Ms = b(({ avatar: s, name: e, subtitle: r, subtitleLabel: n, className: d, ...o }, u) => {
+  const { mode: t } = y(), m = t !== "icon", l = typeof r == "string" ? r : n;
   return /* @__PURE__ */ f(
     "button",
     {
-      ref: c,
+      ref: u,
       type: "button",
-      "aria-label": u ? `${e}, ${u}` : e,
-      className: [Vs(), n].filter(Boolean).join(" "),
+      "aria-label": l ? `${e}, ${l}` : e,
+      className: [Vs(), d].filter(Boolean).join(" "),
       ...o,
       children: [
         /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:shrink-0", children: s }),
@@ -1010,22 +1013,22 @@ const Os = [
   "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:outline-[CanvasText]",
   "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
-].join(" "), $s = g(
-  ({ className: s, "aria-label": e, onClick: r, ...i }, n) => {
-    const { t: o } = I(), { mode: c, transitionTo: t } = w();
-    if (c === "overlay") return null;
-    const m = c === "expanded", u = e ?? (m ? o("ui.navigation.sidebar.collapse", "Collapse sidebar") : o("ui.navigation.sidebar.expand", "Expand sidebar")), v = /* @__PURE__ */ a(
+].join(" "), $s = b(
+  ({ className: s, "aria-label": e, onClick: r, ...n }, d) => {
+    const { t: o } = I(), { mode: u, transitionTo: t } = y();
+    if (u === "overlay") return null;
+    const m = u === "expanded", l = e ?? (m ? o("ui.navigation.sidebar.collapse", "Collapse sidebar") : o("ui.navigation.sidebar.expand", "Expand sidebar")), v = /* @__PURE__ */ a(
       "button",
       {
-        ref: n,
+        ref: d,
         type: "button",
-        "aria-label": u,
+        "aria-label": l,
         "aria-expanded": m,
         onClick: (h) => {
           t == null || t(m ? "icon" : "expanded"), r == null || r(h);
         },
         className: [Os, s].filter(Boolean).join(" "),
-        ...i,
+        ...n,
         children: m ? /* @__PURE__ */ a(ms, { "aria-hidden": "true", className: "ds:size-4 ds:rtl:-scale-x-100" }) : /* @__PURE__ */ a(vs, { "aria-hidden": "true", className: "ds:size-4 ds:rtl:-scale-x-100" })
       }
     );
@@ -1034,7 +1037,7 @@ const Os = [
       /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ f(
         S.Content,
         {
-          side: c === "icon" ? "right" : "top",
+          side: u === "icon" ? "right" : "top",
           sideOffset: 6,
           className: [
             "ds:z-[var(--z-tooltip)] ds:max-w-[16rem]",
@@ -1044,7 +1047,7 @@ const Os = [
             "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
           ].join(" "),
           children: [
-            u,
+            l,
             /* @__PURE__ */ a(S.Arrow, { className: "ds:fill-[var(--foreground)]" })
           ]
         }
@@ -1071,7 +1074,7 @@ export {
   Ms as n,
   J as o,
   Is as p,
-  w as q,
+  y as q,
   Zs as u
 };
-//# sourceMappingURL=sidebar-OVzwN3jE.js.map
+//# sourceMappingURL=sidebar-CHF5xr_P.js.map