laif-ds 1.0.0 → 1.0.2

package/dist/components/ui/sidebar.js

@@ -1,129 +1,139 @@
 "use client";
-import { jsx as d, jsxs as S } from "react/jsx-runtime";
-import { Root as N } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as I } from "../../node_modules/class-variance-authority/dist/index.js";
+import { jsx as i, jsxs as N } from "react/jsx-runtime";
+import { Root as y } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as A } from "../../node_modules/class-variance-authority/dist/index.js";
 import * as r from "react";
-import { Button as T } from "./button.js";
-import { Input as E } from "./input.js";
-import { Separator as A } from "./separator.js";
-import { Sheet as B, SheetContent as D, SheetHeader as O, SheetTitle as G } from "./sheet.js";
-import { Skeleton as C } from "./skeleton.js";
-import { Tooltip as H, TooltipTrigger as j, TooltipContent as K, TooltipProvider as L } from "./tooltip.js";
-import { useIsMobile as F } from "../../hooks/use-mobile.js";
-import { cn as i } from "../../lib/utils.js";
-import P from "../../node_modules/lucide-react/dist/esm/icons/panel-left.js";
-const $ = "sidebar_state", V = 3600 * 24 * 7, q = "16rem", W = "3rem", U = "b", k = r.createContext(null);
+import { designTokens as C } from "../design-tokens.js";
+import { navTokens as B } from "../nav-tokens.js";
+import { Button as D } from "./button.js";
+import { Input as O } from "./input.js";
+import { Separator as G } from "./separator.js";
+import { Sheet as H, SheetContent as j, SheetHeader as K, SheetTitle as L } from "./sheet.js";
+import { Skeleton as z } from "./skeleton.js";
+import { Tooltip as P, TooltipTrigger as F, TooltipContent as $, TooltipProvider as V } from "./tooltip.js";
+import { useIsMobile as q } from "../../hooks/use-mobile.js";
+import { cn as o } from "../../lib/utils.js";
+import W from "../../node_modules/lucide-react/dist/esm/icons/panel-left.js";
+const U = "sidebar_state", X = 3600 * 24 * 7, Y = "16rem", J = "3rem", Q = "b", I = r.createContext(null);
 function M() {
-  const a = r.useContext(k);
+  const a = r.useContext(I);
   if (!a)
     throw new Error("useSidebar must be used within a SidebarProvider.");
   return a;
 }
-const X = r.forwardRef(
+const Z = r.forwardRef(
   ({
     defaultOpen: a = !0,
     open: e,
     onOpenChange: t,
-    className: o,
+    className: d,
     style: n,
     children: s,
     ...m
-  }, h) => {
-    const c = F(), [u, b] = r.useState(!1), [f, g] = r.useState(
+  }, v) => {
+    const l = q(), [b, f] = r.useState(!1), [g, u] = r.useState(!1);
+    r.useEffect(() => {
+      l && u(!1);
+    }, [l]);
+    const [x, h] = r.useState(
       null
     );
     r.useEffect(() => {
-      u || g(null);
-    }, [u]);
-    const [v, x] = r.useState(a), w = e ?? v, y = r.useCallback(
-      (l) => {
-        const p = typeof l == "function" ? l(w) : l;
-        t ? t(p) : x(p), document.cookie = `${$}=${p}; path=/; max-age=${V}`;
+      b || h(null);
+    }, [b]);
+    const [w, T] = r.useState(a), S = e ?? w, R = r.useCallback(
+      (c) => {
+        const p = typeof c == "function" ? c(S) : c;
+        t ? t(p) : T(p), document.cookie = `${U}=${p}; path=/; max-age=${X}`;
       },
-      [t, w]
-    ), R = r.useCallback(() => c ? b((l) => !l) : y((l) => !l), [c, y, b]);
+      [t, S]
+    ), k = r.useCallback(() => l ? f((c) => !c) : R((c) => !c), [l, R, f]);
     r.useEffect(() => {
-      const l = (p) => {
-        p.key === U && (p.metaKey || p.ctrlKey) && (p.preventDefault(), R());
+      const c = (p) => {
+        p.key === Q && (p.metaKey || p.ctrlKey) && (p.preventDefault(), k());
       };
-      return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
-    }, [R]);
-    const _ = w ? "expanded" : "collapsed", z = r.useMemo(
+      return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+    }, [k]);
+    const _ = S || g ? "expanded" : "collapsed", E = r.useMemo(
       () => ({
         state: _,
-        open: w,
-        setOpen: y,
-        isMobile: c,
-        openMobile: u,
-        setOpenMobile: b,
-        mobileNavTarget: f,
-        setMobileNavTarget: g,
-        toggleSidebar: R
+        open: S,
+        setOpen: R,
+        peek: g,
+        setPeek: u,
+        isMobile: l,
+        openMobile: b,
+        setOpenMobile: f,
+        mobileNavTarget: x,
+        setMobileNavTarget: h,
+        toggleSidebar: k
       }),
       [
         _,
-        w,
-        y,
-        c,
+        S,
+        R,
+        g,
         u,
+        l,
         b,
         f,
-        g,
-        R
+        x,
+        h,
+        k
       ]
     );
-    return /* @__PURE__ */ d(k.Provider, { value: z, children: /* @__PURE__ */ d(L, { delayDuration: 0, children: /* @__PURE__ */ d(
+    return /* @__PURE__ */ i(I.Provider, { value: E, children: /* @__PURE__ */ i(V, { delayDuration: 0, children: /* @__PURE__ */ i(
       "div",
       {
         style: {
-          "--sidebar-width": q,
-          "--sidebar-width-icon": W,
+          "--sidebar-width": Y,
+          "--sidebar-width-icon": J,
           ...n
         },
-        className: i(
+        className: o(
           "group/sidebar-wrapper has-[[data-variant=inset]]:bg-d-sidebar flex min-h-svh w-full",
-          o
+          d
         ),
-        ref: h,
+        ref: v,
         ...m,
         children: s
       }
     ) }) });
   }
 );
-X.displayName = "SidebarProvider";
-const Y = r.forwardRef(
+Z.displayName = "SidebarProvider";
+const ee = r.forwardRef(
   ({
     side: a = "left",
     variant: e = "sidebar",
     collapsible: t = "offcanvas",
-    className: o,
+    className: d,
     children: n,
     ...s
   }, m) => {
-    const { isMobile: h, state: c, openMobile: u, setOpenMobile: b } = M(), f = r.useRef(null), g = r.useRef(null);
-    return h ? /* @__PURE__ */ d(B, { open: u, onOpenChange: b, ...s, children: /* @__PURE__ */ S(
-      D,
+    const { isMobile: v, state: l, peek: b, openMobile: f, setOpenMobile: g } = M(), u = r.useRef(null), x = r.useRef(null);
+    return v ? /* @__PURE__ */ i(H, { open: f, onOpenChange: g, ...s, children: /* @__PURE__ */ N(
+      j,
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "bg-d-sidebar text-d-sidebar-foreground p-0 [&_[data-sidebar=header]]:pr-12 [&>button]:top-2 [&>button]:right-2 [&>button]:flex [&>button]:size-11 [&>button]:items-center [&>button]:justify-center [&>button]:opacity-100",
+        className: "bg-d-sidebar text-d-sidebar-foreground p-0 [&>button]:top-2 [&>button]:right-2 [&>button]:flex [&>button]:size-11 [&>button]:items-center [&>button]:justify-center [&>button]:opacity-100",
         side: "full",
         "aria-describedby": void 0,
-        onOpenAutoFocus: (v) => {
-          v.preventDefault();
-          const x = document.activeElement;
-          g.current = x instanceof HTMLElement && x !== document.body ? x : null, f.current?.focus();
+        onOpenAutoFocus: (h) => {
+          h.preventDefault();
+          const w = document.activeElement;
+          x.current = w instanceof HTMLElement && w !== document.body ? w : null, u.current?.focus();
         },
-        onCloseAutoFocus: (v) => {
-          v.preventDefault(), g.current?.focus();
+        onCloseAutoFocus: (h) => {
+          h.preventDefault(), x.current?.focus();
         },
         children: [
-          /* @__PURE__ */ d(O, { className: "sr-only", children: /* @__PURE__ */ d(G, { children: "Navigation menu" }) }),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ i(K, { className: "sr-only", children: /* @__PURE__ */ i(L, { children: "Navigation menu" }) }),
+          /* @__PURE__ */ i(
             "div",
             {
-              ref: f,
+              ref: u,
               tabIndex: -1,
               className: "flex h-full w-full flex-col outline-none",
               children: n
@@ -131,54 +141,94 @@ const Y = r.forwardRef(
           )
         ]
       }
-    ) }) : t === "none" ? /* @__PURE__ */ d(
+    ) }) : t === "none" ? /* @__PURE__ */ i(
       "div",
       {
-        className: i(
+        className: o(
           "bg-d-sidebar text-d-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
-          o
+          d
         ),
         ref: m,
         ...s,
         children: n
       }
-    ) : /* @__PURE__ */ S(
+    ) : /* @__PURE__ */ N(
       "div",
       {
         ref: m,
         className: "group peer text-d-sidebar-foreground hidden md:block",
-        "data-state": c,
-        "data-collapsible": c === "collapsed" ? t : "",
+        "data-state": l,
+        "data-collapsible": l === "collapsed" ? t : "",
         "data-variant": e,
         "data-side": a,
+        "data-peek": b ? "true" : void 0,
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ i(
             "div",
             {
-              className: i(
-                "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
+              className: o(
+                "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear motion-reduce:transition-none",
                 "group-data-[collapsible=offcanvas]:w-0",
                 "group-data-[side=right]:rotate-180",
-                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+                // The peek rule repeats the icon width instead of sharing the
+                // selector with `collapsible=icon`: `data-collapsible` is emptied
+                // the moment `state` flips to "expanded", so during a peek that
+                // selector no longer matches and the gap would grow to the full
+                // width — dragging the whole page 13rem to the right. Holding the
+                // gap here is what makes the peek an overlay. Same formula per
+                // variant, or floating/inset lose the 16px of padding they reserve.
+                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))] group-data-[peek=true]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[peek=true]:w-[var(--sidebar-width-icon)]"
               )
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ i(
             "div",
             {
-              className: i(
-                "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
+              className: o(
+                "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear motion-reduce:transition-none md:flex",
                 a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
                 // Adjust the padding for floating and inset variants.
-                e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-                o
+                e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : (
+                  // `border-d-sidebar-border` is not decoration, it is the fix: the
+                  // v4 entry (`src/styles/index.css`) carries no
+                  // `* { border-color }` base reset — only `index.v3.css` does —
+                  // so a bare `border-r` resolves to Tailwind v4's default,
+                  // `currentColor`. That inherits the host app's body text
+                  // colour, which is how the panel's edge came out near-white on
+                  // a dark theme and near-black on a light one. Naming the token
+                  // pins it to `--colors--border--subtle`, the same value the
+                  // rail, the separator and the floating variant already use.
+                  "border-d-sidebar-border group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"
+                ),
+                // PENDING PO DECISION: the resting `z-10` sits under the sticky
+                // header the template apps put in the main area, so a peeking panel
+                // would slide *behind* it. `z-30` clears every sticky layer in the
+                // current templates but the right value depends on the host app's
+                // stack, which the library cannot know — hence a working default
+                // rather than a prop. Raised only while peeking: pinned is a push,
+                // it covers nothing, and leaving it high would change what the
+                // sidebar overlaps in a state that works today.
+                "group-data-[peek=true]:z-30",
+                d
               ),
               ...s,
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ i(
                 "div",
                 {
                   "data-sidebar": "sidebar",
-                  className: "bg-d-sidebar group-data-[variant=floating]:border-d-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
+                  className: o(
+                    "bg-d-sidebar group-data-[variant=floating]:border-d-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow",
+                    // The overlay's shadow lives on this element and not on the
+                    // panel: the panel's transition is a single declaration shared by
+                    // `left`/`right`/`width`, and those must stay on the primitive's
+                    // 200ms linear (the gap div animates in lockstep with them during
+                    // a pin, and a second curve would desync the two). A shadow is not
+                    // a layout property, so here it can take the house curve without
+                    // dragging the width along.
+                    "transition-shadow group-data-[peek=true]:shadow-lg motion-reduce:transition-none",
+                    C.motion.duration,
+                    C.motion.ease
+                  ),
                   children: n
                 }
               )
@@ -189,41 +239,41 @@ const Y = r.forwardRef(
     );
   }
 );
-Y.displayName = "Sidebar";
-const J = r.forwardRef(({ className: a, onClick: e, ...t }, o) => {
+ee.displayName = "Sidebar";
+const ae = r.forwardRef(({ className: a, onClick: e, ...t }, d) => {
   const { toggleSidebar: n } = M();
-  return /* @__PURE__ */ S(
-    T,
+  return /* @__PURE__ */ N(
+    D,
     {
-      ref: o,
+      ref: d,
       "data-sidebar": "trigger",
       variant: "ghost",
       size: "icon",
-      className: i("h-7 w-7", a),
+      className: o("h-7 w-7", a),
       onClick: (s) => {
         e?.(s), n();
       },
       ...t,
       children: [
-        /* @__PURE__ */ d(P, {}),
-        /* @__PURE__ */ d("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ i(W, {}),
+        /* @__PURE__ */ i("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
-J.displayName = "SidebarTrigger";
-const Q = r.forwardRef(({ className: a, ...e }, t) => {
-  const { toggleSidebar: o } = M();
-  return /* @__PURE__ */ d(
+ae.displayName = "SidebarTrigger";
+const te = r.forwardRef(({ className: a, ...e }, t) => {
+  const { toggleSidebar: d } = M();
+  return /* @__PURE__ */ i(
     "button",
     {
       ref: t,
       "data-sidebar": "rail",
       "aria-label": "Toggle Sidebar",
       tabIndex: -1,
-      onClick: o,
+      onClick: d,
       title: "Toggle Sidebar",
-      className: i(
+      className: o(
         "hover:after:bg-d-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
@@ -236,92 +286,97 @@ const Q = r.forwardRef(({ className: a, ...e }, t) => {
     }
   );
 });
-Q.displayName = "SidebarRail";
-const Z = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+te.displayName = "SidebarRail";
+const re = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "main",
   {
     ref: t,
-    className: i(
+    className: o(
       "bg-d-background relative flex w-full flex-1 flex-col",
       "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2",
+      // Second half of the overlay fix, and easy to miss: the inset's left
+      // margin keys off `data-state`, which a peek flips to "expanded" — so
+      // without this the main area would slide by the 8px the collapsed rule
+      // adds, exactly the shift the gap div is being held still to prevent.
+      "md:peer-data-[peek=true]:peer-data-[variant=inset]:ml-2",
       a
     ),
     ...e
   }
 ));
-Z.displayName = "SidebarInset";
-const ee = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
-  E,
+re.displayName = "SidebarInset";
+const ie = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
+  O,
   {
     ref: t,
     "data-sidebar": "input",
-    className: i(
+    className: o(
       "bg-d-background focus-visible:ring-d-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
       a
     ),
     ...e
   }
 ));
-ee.displayName = "SidebarInput";
-const ae = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+ie.displayName = "SidebarInput";
+const oe = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "header",
-    className: i("flex flex-col gap-2 p-2", a),
+    className: o("flex flex-col gap-2 p-2", a),
     ...e
   }
 ));
-ae.displayName = "SidebarHeader";
-const te = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+oe.displayName = "SidebarHeader";
+const de = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "footer",
-    className: i("flex flex-col gap-2 p-2", a),
+    className: o("flex flex-col gap-2 p-2", a),
     ...e
   }
 ));
-te.displayName = "SidebarFooter";
-const re = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
-  A,
+de.displayName = "SidebarFooter";
+const ne = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
+  G,
   {
     ref: t,
     "data-sidebar": "separator",
-    className: i("bg-d-sidebar-border mx-2 w-auto", a),
+    className: o("bg-d-sidebar-border mx-2 w-auto", a),
     ...e
   }
 ));
-re.displayName = "SidebarSeparator";
-const de = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+ne.displayName = "SidebarSeparator";
+const se = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "content",
-    className: i(
+    className: o(
       "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-x-hidden group-data-[collapsible=icon]:overflow-y-auto",
       a
     ),
     ...e
   }
 ));
-de.displayName = "SidebarContent";
-const ie = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+se.displayName = "SidebarContent";
+const le = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "group",
-    className: i("relative flex w-full min-w-0 flex-col p-2", a),
+    className: o("relative flex w-full min-w-0 flex-col p-2", a),
     ...e
   }
 ));
-ie.displayName = "SidebarGroup";
-const oe = r.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ d(
-  e ? N : "div",
+le.displayName = "SidebarGroup";
+const ce = r.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ i(
+  e ? y : "div",
   {
-    ref: o,
+    ref: d,
     "data-sidebar": "group-label",
-    className: i(
+    className: o(
       "text-d-sidebar-foreground/70 ring-d-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
       a
@@ -329,13 +384,13 @@ const oe = r.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
     ...t
   }
 ));
-oe.displayName = "SidebarGroupLabel";
-const ne = r.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ d(
-  e ? N : "button",
+ce.displayName = "SidebarGroupLabel";
+const ue = r.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ i(
+  e ? y : "button",
   {
-    ref: o,
+    ref: d,
     "data-sidebar": "group-action",
-    className: i(
+    className: o(
       "text-d-sidebar-foreground ring-d-sidebar-ring hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       // Increases the hit area of the button on mobile.
       "after:absolute after:-inset-2 after:md:hidden",
@@ -345,39 +400,49 @@ const ne = r.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
     ...t
   }
 ));
-ne.displayName = "SidebarGroupAction";
-const se = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+ue.displayName = "SidebarGroupAction";
+const be = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "group-content",
-    className: i("w-full text-sm", a),
+    className: o("w-full text-sm", a),
     ...e
   }
 ));
-se.displayName = "SidebarGroupContent";
-const le = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+be.displayName = "SidebarGroupContent";
+const fe = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "ul",
   {
     ref: t,
     "data-sidebar": "menu",
-    className: i("flex w-full min-w-0 flex-col gap-1", a),
+    className: o("flex w-full min-w-0 flex-col gap-1", a),
     ...e
   }
 ));
-le.displayName = "SidebarMenu";
-const ce = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+fe.displayName = "SidebarMenu";
+const pe = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "li",
   {
     ref: t,
     "data-sidebar": "menu-item",
-    className: i("group/menu-item relative", a),
+    className: o("group/menu-item relative", a),
     ...e
   }
 ));
-ce.displayName = "SidebarMenuItem";
-const ue = I(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-d-sidebar-ring transition-[width,height,padding] hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground focus-visible:ring-2 active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-d-sidebar-accent data-[active=true]:font-bold data-[active=true]:text-d-sidebar-accent-foreground data-[state=open]:hover:bg-d-sidebar-accent data-[state=open]:hover:text-d-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+pe.displayName = "SidebarMenuItem";
+const me = A(
+  o(
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-d-sidebar-ring transition-[width,height,padding] hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground focus-visible:ring-2 active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-d-sidebar-accent data-[active=true]:font-bold data-[active=true]:text-d-sidebar-accent-foreground data-[state=open]:hover:bg-d-sidebar-accent data-[state=open]:hover:text-d-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    // The rail's own geometry — 32px pill, 6px padding, 20px glyph — and the
+    // reason those three numbers are one decision is in the token.
+    //
+    // Its `[&>svg]:size-5` outranks the `[&>svg]:size-4` above it on
+    // specificity, not on order (`.group[data-collapsible=icon] .btn > svg` is
+    // one class more), so expanded rows keep 16px glyphs whichever way Tailwind
+    // sorts the two rules.
+    B.rail.button
+  ),
   {
     variants: {
       variant: {
@@ -395,50 +460,50 @@ const ue = I(
       size: "default"
     }
   }
-), be = r.forwardRef(
+), ge = r.forwardRef(
   ({
     asChild: a = !1,
     isActive: e = !1,
     variant: t = "default",
-    size: o = "default",
+    size: d = "default",
     tooltip: n,
     className: s,
     ...m
-  }, h) => {
-    const c = a ? N : "button", { isMobile: u, state: b } = M(), f = /* @__PURE__ */ d(
-      c,
+  }, v) => {
+    const l = a ? y : "button", { isMobile: b, state: f } = M(), g = f !== "collapsed" || b, u = /* @__PURE__ */ i(
+      l,
       {
-        ref: h,
+        ref: v,
         "data-sidebar": "menu-button",
-        "data-size": o,
+        "data-size": d,
         "data-active": e,
-        className: i(ue({ variant: t, size: o }), s),
+        className: o(me({ variant: t, size: d }), s),
         ...m
       }
     );
     return n ? (typeof n == "string" && (n = {
       children: n
-    }), /* @__PURE__ */ S(H, { children: [
-      /* @__PURE__ */ d(j, { asChild: !0, children: f }),
-      /* @__PURE__ */ d(
-        K,
+    }), /* @__PURE__ */ N(P, { children: [
+      /* @__PURE__ */ i(F, { asChild: !0, children: u }),
+      /* @__PURE__ */ i(
+        $,
         {
           side: "right",
           align: "center",
-          hidden: b !== "collapsed" || u,
+          hidden: g,
           ...n
         }
       )
-    ] })) : f;
+    ] })) : u;
   }
 );
-be.displayName = "SidebarMenuButton";
-const fe = r.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...o }, n) => /* @__PURE__ */ d(
-  e ? N : "button",
+ge.displayName = "SidebarMenuButton";
+const he = r.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, n) => /* @__PURE__ */ i(
+  e ? y : "button",
   {
     ref: n,
     "data-sidebar": "menu-action",
-    className: i(
+    className: o(
       "text-d-sidebar-foreground ring-d-sidebar-ring hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground peer-hover/menu-button:text-d-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
       // Increases the hit area of the button on mobile.
       "after:absolute after:-inset-2 after:md:hidden",
@@ -449,16 +514,16 @@ const fe = r.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, .
       t && "peer-data-[active=true]/menu-button:text-d-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
       a
     ),
-    ...o
+    ...d
   }
 ));
-fe.displayName = "SidebarMenuAction";
-const pe = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+he.displayName = "SidebarMenuAction";
+const ve = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "div",
   {
     ref: t,
     "data-sidebar": "menu-badge",
-    className: i(
+    className: o(
       "text-d-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
       "peer-hover/menu-button:text-d-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-d-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
@@ -470,26 +535,26 @@ const pe = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
     ...e
   }
 ));
-pe.displayName = "SidebarMenuBadge";
-const me = r.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
+ve.displayName = "SidebarMenuBadge";
+const xe = r.forwardRef(({ className: a, showIcon: e = !1, ...t }, d) => {
   const n = r.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ N(
     "div",
     {
-      ref: o,
+      ref: d,
       "data-sidebar": "menu-skeleton",
-      className: i("flex h-8 items-center gap-2 rounded-md px-2", a),
+      className: o("flex h-8 items-center gap-2 rounded-md px-2", a),
       ...t,
       children: [
-        e && /* @__PURE__ */ d(
-          C,
+        e && /* @__PURE__ */ i(
+          z,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ d(
-          C,
+        /* @__PURE__ */ i(
+          z,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
             "data-sidebar": "menu-skeleton-text",
@@ -502,13 +567,13 @@ const me = r.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
     }
   );
 });
-me.displayName = "SidebarMenuSkeleton";
-const ge = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
+xe.displayName = "SidebarMenuSkeleton";
+const we = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ i(
   "ul",
   {
     ref: t,
     "data-sidebar": "menu-sub",
-    className: i(
+    className: o(
       "border-d-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       a
@@ -516,51 +581,51 @@ const ge = r.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ d(
     ...e
   }
 ));
-ge.displayName = "SidebarMenuSub";
-const he = r.forwardRef(({ ...a }, e) => /* @__PURE__ */ d("li", { ref: e, ...a }));
-he.displayName = "SidebarMenuSubItem";
-const ve = r.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: o, ...n }, s) => /* @__PURE__ */ d(
-  a ? N : "a",
+we.displayName = "SidebarMenuSub";
+const Se = r.forwardRef(({ ...a }, e) => /* @__PURE__ */ i("li", { ref: e, ...a }));
+Se.displayName = "SidebarMenuSubItem";
+const Ne = r.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...n }, s) => /* @__PURE__ */ i(
+  a ? y : "a",
   {
     ref: s,
     "data-sidebar": "menu-sub-button",
     "data-size": e,
     "data-active": t,
-    className: i(
+    className: o(
       "text-d-sidebar-foreground ring-d-sidebar-ring hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground [&>svg]:text-d-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
       "data-[active=true]:bg-d-sidebar-accent data-[active=true]:text-d-sidebar-accent-foreground data-[active=true]:font-bold",
       e === "sm" && "text-xs",
       e === "md" && "text-sm",
       "group-data-[collapsible=icon]:hidden",
-      o
+      d
     ),
     ...n
   }
 ));
-ve.displayName = "SidebarMenuSubButton";
+Ne.displayName = "SidebarMenuSubButton";
 export {
-  Y as Sidebar,
-  de as SidebarContent,
-  te as SidebarFooter,
-  ie as SidebarGroup,
-  ne as SidebarGroupAction,
-  se as SidebarGroupContent,
-  oe as SidebarGroupLabel,
-  ae as SidebarHeader,
-  ee as SidebarInput,
-  Z as SidebarInset,
-  le as SidebarMenu,
-  fe as SidebarMenuAction,
-  pe as SidebarMenuBadge,
-  be as SidebarMenuButton,
-  ce as SidebarMenuItem,
-  me as SidebarMenuSkeleton,
-  ge as SidebarMenuSub,
-  ve as SidebarMenuSubButton,
-  he as SidebarMenuSubItem,
-  X as SidebarProvider,
-  Q as SidebarRail,
-  re as SidebarSeparator,
-  J as SidebarTrigger,
+  ee as Sidebar,
+  se as SidebarContent,
+  de as SidebarFooter,
+  le as SidebarGroup,
+  ue as SidebarGroupAction,
+  be as SidebarGroupContent,
+  ce as SidebarGroupLabel,
+  oe as SidebarHeader,
+  ie as SidebarInput,
+  re as SidebarInset,
+  fe as SidebarMenu,
+  he as SidebarMenuAction,
+  ve as SidebarMenuBadge,
+  ge as SidebarMenuButton,
+  pe as SidebarMenuItem,
+  xe as SidebarMenuSkeleton,
+  we as SidebarMenuSub,
+  Ne as SidebarMenuSubButton,
+  Se as SidebarMenuSubItem,
+  Z as SidebarProvider,
+  te as SidebarRail,
+  ne as SidebarSeparator,
+  ae as SidebarTrigger,
   M as useSidebar
 };