@alfadocs/ui-kit-debug 0.72.2 → 0.73.0

package/dist/_chunks/{sidebar-B0OBmJrC.js → sidebar-CtU35PIX.js}

@@ -1,5 +1,5 @@
 import { jsx as s, jsxs as u, Fragment as q } from "react/jsx-runtime";
-import { forwardRef as b, useState as R, useEffect as U, useCallback as ss, useRef as $, useMemo as O, useId as ds, useContext as Z, createContext as W } from "react";
+import { forwardRef as b, useState as R, useEffect as U, useCallback as ss, useRef as $, useMemo as O, useId as ns, useContext as Z, createContext as W } from "react";
 import * as B from "@radix-ui/react-dialog";
 import * as V from "@radix-ui/react-collapsible";
 import * as E from "@radix-ui/react-accordion";
@@ -168,8 +168,8 @@ const J = I(
     state: e,
     defaultState: a = "expanded",
     onStateChange: r,
-    density: n = "default",
-    open: d,
+    density: d = "default",
+    open: n,
     onOpenChange: l,
     resizable: t = !1,
     "aria-label": o,
@@ -216,8 +216,8 @@ const J = I(
     return m === "overlay" ? /* @__PURE__ */ s(
       G.Provider,
       {
-        value: { mode: "overlay", density: n, transitionTo: S },
-        children: /* @__PURE__ */ s(B.Root, { open: d, onOpenChange: l, children: /* @__PURE__ */ u(B.Portal, { children: [
+        value: { mode: "overlay", density: d, transitionTo: S },
+        children: /* @__PURE__ */ s(B.Root, { open: n, onOpenChange: l, children: /* @__PURE__ */ u(B.Portal, { children: [
           /* @__PURE__ */ s(
             B.Overlay,
             {
@@ -236,9 +236,12 @@ const J = I(
               "aria-label": j,
               className: [
                 "ds:fixed ds:z-[var(--z-modal)]",
-                "ds:inset-inline-start-0 ds:inset-block-start-0",
+                // `start-0`/`top-0` — the `inset-inline-start-0` /
+                // `inset-block-start-0` spellings are not Tailwind
+                // utilities and compiled to nothing.
+                "ds:start-0 ds:top-0",
                 "ds:h-dvh",
-                J({ mode: "overlay", density: n }),
+                J({ mode: "overlay", density: d }),
                 "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",
@@ -286,7 +289,7 @@ const J = I(
     ) : /* @__PURE__ */ s(
       G.Provider,
       {
-        value: { mode: m, density: n, transitionTo: S },
+        value: { mode: m, density: d, transitionTo: S },
         children: /* @__PURE__ */ s(h.Provider, { delayDuration: 300, children: /* @__PURE__ */ u(
           "nav",
           {
@@ -296,11 +299,11 @@ const J = I(
             "data-component": "sidebar",
             "data-component-id": f,
             "data-mode": m,
-            "data-density": n,
+            "data-density": d,
             "data-resizing": _ ? "" : void 0,
             className: [
-              J({ mode: m, density: n }),
-              n === "compact" ? "ds:density-compact" : "",
+              J({ mode: m, density: d }),
+              d === "compact" ? "ds:density-compact" : "",
               c ?? ""
             ].filter(Boolean).join(" "),
             ...g,
@@ -324,7 +327,7 @@ const J = I(
 );
 Ts.displayName = "Sidebar";
 const Bs = b(({ className: e, ...a }, r) => {
-  const { mode: n } = x();
+  const { mode: d } = x();
   return /* @__PURE__ */ s(
     "div",
     {
@@ -334,7 +337,7 @@ const Bs = b(({ className: e, ...a }, r) => {
         "ds:min-h-[var(--min-target-size)]",
         // Icon-rail is 64px — shrink horizontal padding so a 44×44
         // control fits centred inside the header.
-        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)]",
+        d === "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.
@@ -348,7 +351,7 @@ const Bs = b(({ className: e, ...a }, r) => {
 });
 Bs.displayName = "SidebarHeader";
 const Rs = b(
-  ({ className: e, children: a, ...r }, n) => (
+  ({ className: e, children: a, ...r }, d) => (
     // Scroll the nav sections through the kit `ScrollArea` (8px tokenised
     // scrollbar) instead of native `overflow-auto` (the OS scrollbar), so the
     // sidebar matches the Control Room rail and the kit's trays. `flex-1 min-h-0`
@@ -363,7 +366,7 @@ const Rs = b(
         children: /* @__PURE__ */ s(
           "div",
           {
-            ref: n,
+            ref: d,
             className: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-sm)]",
             ...r,
             children: a
@@ -375,7 +378,7 @@ const Rs = b(
 );
 Rs.displayName = "SidebarBody";
 const Ds = b(({ className: e, ...a }, r) => {
-  const { mode: n } = x();
+  const { mode: d } = x();
   return /* @__PURE__ */ s(
     "div",
     {
@@ -384,7 +387,7 @@ const Ds = b(({ className: e, ...a }, r) => {
         "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.
-        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)]",
+        d === "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
@@ -418,8 +421,8 @@ const As = [
     label: e,
     icon: a,
     collapsible: r = !0,
-    defaultOpen: n = !0,
-    open: d,
+    defaultOpen: d = !0,
+    open: n,
     onOpenChange: l,
     className: t,
     children: o,
@@ -458,8 +461,8 @@ const As = [
       {
         type: "single",
         collapsible: !0,
-        defaultValue: d === void 0 && n ? i : void 0,
-        value: d === void 0 ? void 0 : d ? i : "",
+        defaultValue: n === void 0 && d ? i : void 0,
+        value: n === void 0 ? void 0 : n ? i : "",
         onValueChange: l ? (w) => l(w === i) : void 0,
         asChild: !0,
         children: /* @__PURE__ */ s("div", { ref: p, className: y, ...c, children: /* @__PURE__ */ u(E.Item, { value: i, children: [
@@ -504,8 +507,8 @@ const Ps = [
     label: e,
     icon: a,
     children: r,
-    className: n,
-    defaultOpen: d,
+    className: d,
+    defaultOpen: n,
     open: l,
     onOpenChange: t,
     ...o
@@ -515,10 +518,10 @@ const Ps = [
       V.Root,
       {
         ref: c,
-        defaultOpen: d,
+        defaultOpen: n,
         open: l,
         onOpenChange: t,
-        className: n,
+        className: d,
         ...o,
         children: [
           /* @__PURE__ */ u(V.Trigger, { className: Ps, children: [
@@ -632,15 +635,15 @@ const Es = I(
     asChild: e = !1,
     isActive: a = !1,
     navId: r,
-    isPinned: n = !1,
-    onPinChange: d,
+    isPinned: d = !1,
+    onPinChange: n,
     pinLabel: l,
     className: t,
     children: o,
     "aria-label": c,
     ...p
   }, f) => {
-    const { mode: g, density: N } = x(), y = e ? ls : "a", i = d !== void 0 && g !== "icon", [w, z] = R(null), m = g === "icon" && c != null && w ? `${c}, ${w}` : c, S = /* @__PURE__ */ s(
+    const { mode: g, density: N } = x(), y = e ? ls : "a", i = n !== void 0 && g !== "icon", [w, z] = R(null), m = g === "icon" && c != null && w ? `${c}, ${w}` : c, S = /* @__PURE__ */ s(
       y,
       {
         ref: f,
@@ -668,9 +671,9 @@ const Es = I(
           /* @__PURE__ */ s(
             Y,
             {
-              isPinned: n,
+              isPinned: d,
               label: l ?? c ?? "",
-              onPinChange: d
+              onPinChange: n
             }
           )
         ]
@@ -700,10 +703,10 @@ const Es = I(
   }
 );
 is.displayName = "SidebarItem";
-const Hs = b(({ className: e, children: a, ...r }, n) => /* @__PURE__ */ s(
+const Hs = b(({ className: e, children: a, ...r }, d) => /* @__PURE__ */ s(
   "span",
   {
-    ref: n,
+    ref: d,
     "aria-hidden": "true",
     className: [
       "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
@@ -722,17 +725,17 @@ const Hs = b(({ className: e, children: a, ...r }, n) => /* @__PURE__ */ s(
   }
 ));
 Hs.displayName = "SidebarItemIcon";
-const Fs = b(({ className: e, children: a, ...r }, n) => {
-  const { mode: d } = x();
+const Fs = b(({ className: e, children: a, ...r }, d) => {
+  const { mode: n } = x();
   return /* @__PURE__ */ s(
     "span",
     {
-      ref: n,
+      ref: d,
       className: [
         "ds:flex-1",
         "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
         "ds:text-start",
-        d === "icon" ? "ds:sr-only" : "",
+        n === "icon" ? "ds:sr-only" : "",
         e ?? ""
       ].filter(Boolean).join(" "),
       ...r,
@@ -741,8 +744,8 @@ const Fs = b(({ className: e, children: a, ...r }, n) => {
   );
 });
 Fs.displayName = "SidebarItemLabel";
-const Ms = b(({ className: e, children: a, ...r }, n) => {
-  const { mode: d } = x(), l = d === "icon", t = Z(rs);
+const Ms = b(({ className: e, children: a, ...r }, d) => {
+  const { mode: n } = x(), l = n === "icon", t = Z(rs);
   return U(() => {
     if (!t || !l) return;
     const o = a == null || a === !1 ? null : String(a).trim() || null;
@@ -750,7 +753,7 @@ const Ms = b(({ className: e, children: a, ...r }, n) => {
   }, [t, a, l]), /* @__PURE__ */ s(
     "span",
     {
-      ref: n,
+      ref: d,
       "aria-hidden": l ? "true" : void 0,
       className: [
         "ds:inline-flex ds:items-center ds:justify-center",
@@ -790,7 +793,7 @@ const Ks = I(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:no-underline"
   ].join(" ")
-), Ls = b(({ logo: e, name: a, showChevron: r = !0, className: n, ...d }, l) => {
+), Ls = b(({ logo: e, name: a, showChevron: r = !0, className: d, ...n }, l) => {
   const { mode: t } = x(), o = t !== "icon";
   return /* @__PURE__ */ u(
     "button",
@@ -798,8 +801,8 @@ const Ks = I(
       ref: l,
       type: "button",
       "aria-label": a,
-      className: [Ks(), n].filter(Boolean).join(" "),
-      ...d,
+      className: [Ks(), d].filter(Boolean).join(" "),
+      ...n,
       children: [
         /* @__PURE__ */ s(
           "span",
@@ -847,7 +850,7 @@ const Vs = I(
     },
     defaultVariants: { mode: "expanded" }
   }
-), Us = b(({ icon: e, label: a, shortcut: r, className: n, ...d }, l) => {
+), Us = b(({ icon: e, label: a, shortcut: r, className: d, ...n }, l) => {
   const { mode: t } = x(), o = t !== "icon";
   return /* @__PURE__ */ u(
     "button",
@@ -856,8 +859,8 @@ const Vs = I(
       type: "button",
       "aria-label": a,
       "aria-keyshortcuts": r,
-      className: [Vs({ mode: t }), n].filter(Boolean).join(" "),
-      ...d,
+      className: [Vs({ mode: t }), d].filter(Boolean).join(" "),
+      ...n,
       children: [
         /* @__PURE__ */ s(
           "span",
@@ -901,7 +904,7 @@ const $s = [
   "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)]",
   "ds:motion-reduce:transition-none"
 ].join(" "), Y = b(
-  ({ isPinned: e, onPinChange: a, label: r, className: n, onClick: d, ...l }, t) => {
+  ({ isPinned: e, onPinChange: a, label: r, className: d, onClick: n, ...l }, t) => {
     const { t: o } = D(), { mode: c } = x();
     if (c === "icon") return null;
     const p = e ? o("navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : o("navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
@@ -912,9 +915,9 @@ const $s = [
         type: "button",
         "aria-label": p,
         "aria-pressed": e,
-        className: [$s, n].filter(Boolean).join(" "),
+        className: [$s, d].filter(Boolean).join(" "),
         onClick: (f) => {
-          f.preventDefault(), f.stopPropagation(), a == null || a(!e), d == null || d(f);
+          f.preventDefault(), f.stopPropagation(), a == null || a(!e), n == null || n(f);
         },
         ...l,
         children: /* @__PURE__ */ s(
@@ -930,20 +933,20 @@ const $s = [
   }
 );
 Y.displayName = "SidebarPinButton";
-const ns = W(null), Os = () => Z(ns), Gs = b(
-  ({ heading: e, emptyMessage: a, onReorder: r, className: n, children: d, ...l }, t) => {
-    const { t: o } = D(), c = e ?? o("navigation.sidebar.favorites", "Favourites"), p = Array.isArray(d) ? d.filter(Boolean) : d ? [d] : [], f = p.length, g = f > 0, [N, y] = R(null), [i, w] = R(""), z = $(!1), m = ss((j) => {
+const ds = W(null), Os = () => Z(ds), Gs = b(
+  ({ heading: e, emptyMessage: a, onReorder: r, className: d, children: n, ...l }, t) => {
+    const { t: o } = D(), c = e ?? o("navigation.sidebar.favorites", "Favourites"), p = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], f = p.length, g = f > 0, [N, y] = R(null), [i, w] = R(""), z = $(!1), m = ss((j) => {
       z.current = !z.current, w(z.current ? j : `${j}​`);
     }, []), S = O(
       () => ({ onReorder: r, count: f, dragSource: N, setDragSource: y, announce: m }),
       [r, f, N, m]
     );
-    return !g && !a ? null : /* @__PURE__ */ s(ns.Provider, { value: S, children: /* @__PURE__ */ u(
+    return !g && !a ? null : /* @__PURE__ */ s(ds.Provider, { value: S, children: /* @__PURE__ */ u(
       as,
       {
         ref: t,
         label: c,
-        className: n,
+        className: d,
         ...l,
         children: [
           g ? p : /* @__PURE__ */ s("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: a }),
@@ -992,8 +995,8 @@ const qs = I(
     index: e,
     isActive: a = !1,
     asChild: r = !1,
-    reorderLabel: n,
-    isPinned: d = !1,
+    reorderLabel: d,
+    isPinned: n = !1,
     onPinChange: l,
     pinLabel: t,
     "aria-label": o,
@@ -1001,7 +1004,7 @@ const qs = I(
     children: p,
     ...f
   }, g) => {
-    const { t: N } = D(), { mode: y } = x(), i = Os(), [w, z] = R(!1), m = !!(i != null && i.onReorder) && y !== "icon", S = n ?? o ?? "", j = ds(), C = (v, T) => {
+    const { t: N } = D(), { mode: y } = x(), i = Os(), [w, z] = R(!1), m = !!(i != null && i.onReorder) && y !== "icon", S = d ?? o ?? "", j = ns(), C = (v, T) => {
       if (!(i != null && i.onReorder)) return;
       const L = Math.max(0, Math.min(i.count - 1, T));
       L !== v && (i.onReorder(v, L), i.announce(
@@ -1071,7 +1074,7 @@ const qs = I(
           l && y !== "icon" ? /* @__PURE__ */ s(
             Y,
             {
-              isPinned: d,
+              isPinned: n,
               label: t ?? o ?? "",
               onPinChange: l
             }
@@ -1095,15 +1098,15 @@ const Xs = I(
     "ds:forced-colors:focus-visible:outline-[CanvasText]",
     "ds:no-underline"
   ].join(" ")
-), Ys = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: n, className: d, ...l }, t) => {
-  const { mode: o } = x(), c = o !== "icon", p = typeof r == "string" ? r : n;
+), Ys = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: d, className: n, ...l }, t) => {
+  const { mode: o } = x(), c = o !== "icon", p = typeof r == "string" ? r : d;
   return /* @__PURE__ */ u(
     "button",
     {
       ref: t,
       type: "button",
       "aria-label": p ? `${a}, ${p}` : a,
-      className: [Xs(), d].filter(Boolean).join(" "),
+      className: [Xs(), n].filter(Boolean).join(" "),
       ...l,
       children: [
         /* @__PURE__ */ s(
@@ -1133,13 +1136,13 @@ const Js = [
   "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(" "), Qs = b(({ className: e, "aria-label": a, onClick: r, ...n }, d) => {
+].join(" "), Qs = b(({ className: e, "aria-label": a, onClick: r, ...d }, n) => {
   const { t: l } = D(), { mode: t, transitionTo: o } = x();
   if (t === "overlay") return null;
   const c = t === "expanded", p = a ?? (c ? l("navigation.sidebar.collapse", "Collapse sidebar") : l("navigation.sidebar.expand", "Expand sidebar")), f = /* @__PURE__ */ s(
     "button",
     {
-      ref: d,
+      ref: n,
       type: "button",
       "aria-label": p,
       "aria-expanded": c,
@@ -1147,7 +1150,7 @@ const Js = [
         o == null || o(c ? "icon" : "expanded"), r == null || r(g);
       },
       className: [Js, e].filter(Boolean).join(" "),
-      ...n,
+      ...d,
       children: c ? /* @__PURE__ */ s(
         bs,
         {
@@ -1217,7 +1220,7 @@ const se = I(
     },
     defaultVariants: { mode: "expanded" }
   }
-), ee = b(({ title: e, description: a, icon: r, className: n, ...d }, l) => {
+), ee = b(({ title: e, description: a, icon: r, className: d, ...n }, l) => {
   const { mode: t } = x(), o = t === "icon", c = (
     // aria-label only in icon mode (where the copy is hidden) — in
     // expanded mode the accessible name comes from the visible contents
@@ -1227,8 +1230,8 @@ const se = I(
       {
         ref: l,
         "aria-label": o ? e : void 0,
-        className: se({ mode: t, className: n }),
-        ...d,
+        className: se({ mode: t, className: d }),
+        ...n,
         children: [
           /* @__PURE__ */ s(
             "span",
@@ -1308,4 +1311,4 @@ export {
   Ns as s,
   x as u
 };
-//# sourceMappingURL=sidebar-B0OBmJrC.js.map
+//# sourceMappingURL=sidebar-CtU35PIX.js.map