laif-ds 0.2.91 → 1.0.0

package/dist/components/ui/app-sidebar.js

@@ -1,67 +1,92 @@
 "use client";
-import { jsxs as n, jsx as t, Fragment as R } from "react/jsx-runtime";
-import * as s from "react";
-import { designTokens as J } from "../design-tokens.js";
-import { DropdownMenu as Q, DropdownMenuTrigger as U, DropdownMenuContent as V, DropdownMenuItem as W } from "./dropdown-menu.js";
-import { Icon as h } from "./icon.js";
-import { useSidebar as X, Sidebar as Y, SidebarHeader as Z, SidebarContent as _, SidebarRail as k, SidebarGroup as P, SidebarGroupLabel as L, SidebarGroupContent as ee, SidebarMenu as re, SidebarMenuItem as x, SidebarMenuButton as M, SidebarMenuSub as te, SidebarMenuSubItem as ie, SidebarMenuSubButton as T } from "./sidebar.js";
-import { Tooltip as ne, TooltipTrigger as ce, TooltipContent as se } from "./tooltip.js";
-import { cn as le } from "../../lib/utils.js";
-const $ = (c, l) => `${c.title} ${l.url} ${l.title}`, D = (c) => `${c.url} ${c.title}`;
-function me({
-  navigation: c,
-  navigationFooter: l,
-  headerContent: w,
-  footerContent: j,
-  showRail: z = !0,
-  collapsible: f,
-  linkComponent: a,
-  linkProps: p = {},
-  ...G
+import { jsx as t, jsxs as s, Fragment as E } from "react/jsx-runtime";
+import * as o from "react";
+import { designTokens as l } from "../design-tokens.js";
+import { AppSidebarMobile as de } from "./app-sidebar-mobile.js";
+import { DropdownMenu as q, DropdownMenuTrigger as J, DropdownMenuContent as Q, DropdownMenuRadioGroup as ue, DropdownMenuRadioItem as he, DropdownMenuItem as pe } from "./dropdown-menu.js";
+import { Icon as k } from "./icon.js";
+import { useSidebar as fe, Sidebar as W, SidebarHeader as me, SidebarContent as be, SidebarRail as ge, SidebarGroup as z, SidebarSeparator as ve, SidebarGroupLabel as xe, SidebarGroupContent as Se, SidebarMenu as Ne, SidebarMenuItem as D, SidebarMenuButton as _, SidebarMenuSub as Ae, SidebarMenuSubItem as we, SidebarMenuSubButton as X } from "./sidebar.js";
+import { Tabs as ye, TabsList as Me, TabsContent as Te, TabsTrigger as Ce } from "./tabs.js";
+import { Tooltip as j, TooltipTrigger as K, TooltipContent as O } from "./tooltip.js";
+import { cn as d } from "../../lib/utils.js";
+const Z = (i, a) => `${i.title} ${a.url} ${a.title}`, P = (i) => `${i.url} ${i.title}`, Ie = { xs: "size-4", sm: "size-5" }, T = (i, a, b) => {
+  if (i.icon) {
+    const h = i.icon;
+    return /* @__PURE__ */ t(h, { className: d(Ie[a], "shrink-0", b) });
+  }
+  return i.iconName ? /* @__PURE__ */ t(k, { name: i.iconName, size: a, className: b }) : null;
+}, C = "__group-selector";
+function Oe({
+  navigation: i,
+  navigationFooter: a,
+  navigationDisplay: b = "list",
+  headerContent: h,
+  footerContent: B,
+  showRail: L = !0,
+  collapsible: g,
+  linkComponent: u,
+  linkProps: v = {},
+  ...F
 }) {
-  const { state: K, isMobile: I } = X(), B = s.useId(), m = f === "icon" && K === "collapsed" && !I, [O, y] = s.useState({}), g = s.useMemo(
-    () => [...c, ...l ?? []].flatMap(
+  const { state: ee, isMobile: V } = fe(), re = o.useId(), x = g === "icon" && ee === "collapsed" && !V, [te, H] = o.useState({}), I = o.useMemo(
+    () => [...i, ...a ?? []].flatMap(
       (e) => e.items.filter(
-        (r) => r.subItems?.length && (r.isActive || r.subItems.some((i) => i.isActive))
-      ).map((r) => $(e, r))
+        (r) => r.subItems?.length && (r.isActive || r.subItems.some((n) => n.isActive))
+      ).map((r) => Z(e, r))
     ).join("|"),
-    [c, l]
+    [i, a]
   );
-  s.useEffect(() => {
-    g && y((e) => {
-      const r = g.split("|").filter((i) => e[i] === void 0);
-      return r.length ? { ...e, ...Object.fromEntries(r.map((i) => [i, !0])) } : e;
+  o.useEffect(() => {
+    I && H((e) => {
+      const r = I.split("|").filter((n) => e[n] === void 0);
+      return r.length ? { ...e, ...Object.fromEntries(r.map((n) => [n, !0])) } : e;
     });
-  }, [g]);
-  const v = s.useRef(/* @__PURE__ */ new Map()), A = s.useRef(null), N = (e) => (r) => {
-    r ? v.current.set(e, r) : v.current.delete(e);
+  }, [I]);
+  const $ = o.useRef(/* @__PURE__ */ new Map()), p = o.useRef(null), S = (e) => (r) => {
+    r ? $.current.set(e, r) : $.current.delete(e);
   };
-  s.useLayoutEffect(() => {
-    const e = A.current;
-    !e || document.activeElement !== document.body || v.current.get(e)?.focus();
-  }, [m]);
-  const o = (e) => e.iconName ? /* @__PURE__ */ t(h, { name: e.iconName, size: "sm" }) : f !== "icon" ? null : /* @__PURE__ */ t(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase opacity-0 transition-opacity group-data-[collapsible=icon]:opacity-100",
-      children: e.title.charAt(0)
-    }
-  ), F = (e) => {
-    const r = /* @__PURE__ */ n(R, { children: [
-      e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
+  o.useLayoutEffect(() => {
+    const e = p.current;
+    !e || document.activeElement !== document.body || $.current.get(e)?.focus();
+  }, [x]);
+  const ne = b === "tab" && i.length > 1, N = o.useMemo(() => {
+    const e = i.findIndex(
+      (r) => r.items.some(
+        (n) => n.isActive || n.subItems?.some((c) => c.isActive)
+      )
+    );
+    return e === -1 ? null : e;
+  }, [i]), [U, G] = o.useState(
+    N ?? 0
+  );
+  o.useEffect(() => {
+    N !== null && G(N);
+  }, [N]);
+  const A = U < i.length ? U : 0, w = (e) => {
+    const r = T(e, "sm");
+    return r || (g !== "icon" ? null : /* @__PURE__ */ t(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase opacity-0 transition-opacity group-data-[collapsible=icon]:opacity-100",
+        children: e.title.charAt(0)
+      }
+    ));
+  }, ie = (e) => {
+    const r = /* @__PURE__ */ s(E, { children: [
+      T(e, "xs"),
       /* @__PURE__ */ t("span", { children: e.title })
     ] });
-    return a ? /* @__PURE__ */ t(T, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
-      a,
+    return u ? /* @__PURE__ */ t(X, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
+      u,
       {
         href: e.url,
         className: "flex w-full items-center gap-2",
         "aria-current": e.isActive ? "page" : void 0,
-        ...p,
+        ...v,
         children: r
       }
-    ) }) : /* @__PURE__ */ t(T, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
+    ) }) : /* @__PURE__ */ t(X, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
       "a",
       {
         href: e.url,
@@ -70,141 +95,373 @@ function me({
         children: r
       }
     ) });
-  }, H = (e) => {
-    const r = /* @__PURE__ */ n(R, { children: [
-      e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
+  }, se = (e) => {
+    const r = /* @__PURE__ */ s(E, { children: [
+      T(e, "xs"),
       /* @__PURE__ */ t("span", { children: e.title })
-    ] }), i = le(
+    ] }), n = d(
       "flex w-full items-center gap-2",
-      e.isActive && J.dropdownItem.selected
+      e.isActive && l.dropdownItem.selected
     );
-    return /* @__PURE__ */ t(W, { asChild: !0, children: a ? /* @__PURE__ */ t(
-      a,
+    return /* @__PURE__ */ t(pe, { asChild: !0, children: u ? /* @__PURE__ */ t(
+      u,
       {
         href: e.url,
-        className: i,
+        className: n,
         "aria-current": e.isActive ? "page" : void 0,
-        ...p,
+        ...v,
         children: r
       }
     ) : /* @__PURE__ */ t(
       "a",
       {
         href: e.url,
-        className: i,
+        className: n,
         "aria-current": e.isActive ? "page" : void 0,
         children: r
       }
-    ) }, D(e));
-  }, q = (e, r) => {
-    const i = $(e, r), S = r.subItems ?? [], b = O[i] ?? !1, E = `${B}-${i.replace(/[^\w-]+/g, "-")}-submenu`, u = /* @__PURE__ */ t("span", { className: "truncate", children: r.title });
-    return S.length === 0 ? /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(
-      M,
+    ) }, P(e));
+  }, ce = (e, r) => {
+    const n = Z(e, r), c = r.subItems ?? [], f = te[n] ?? !1, Y = `${re}-${n.replace(/[^\w-]+/g, "-")}-submenu`, M = /* @__PURE__ */ t("span", { className: "truncate", children: r.title });
+    return c.length === 0 ? /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
+      _,
       {
         asChild: !0,
         isActive: r.isActive,
         tooltip: r.title,
-        children: a ? /* @__PURE__ */ n(
-          a,
+        children: u ? /* @__PURE__ */ s(
+          u,
           {
             href: r.url,
             "aria-current": r.isActive ? "page" : void 0,
-            ...p,
+            ...v,
             children: [
-              o(r),
-              u
+              w(r),
+              M
             ]
           }
-        ) : /* @__PURE__ */ n(
+        ) : /* @__PURE__ */ s(
           "a",
           {
             href: r.url,
             "aria-current": r.isActive ? "page" : void 0,
             children: [
-              o(r),
-              u
+              w(r),
+              M
             ]
           }
         )
       }
-    ) }, i) : m ? /* @__PURE__ */ t(x, { children: /* @__PURE__ */ n(ne, { children: [
-      /* @__PURE__ */ n(Q, { modal: !1, children: [
-        /* @__PURE__ */ t(U, { asChild: !0, children: /* @__PURE__ */ t(ce, { asChild: !0, children: /* @__PURE__ */ n(
-          M,
+    ) }, n) : x ? /* @__PURE__ */ t(D, { children: /* @__PURE__ */ s(j, { children: [
+      /* @__PURE__ */ s(q, { modal: !1, children: [
+        /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ s(
+          _,
           {
-            ref: N(i),
+            ref: S(n),
             type: "button",
             isActive: r.isActive,
             onFocus: () => {
-              A.current = i;
+              p.current = n;
             },
             children: [
-              o(r),
-              u
+              w(r),
+              M
             ]
           }
         ) }) }),
         /* @__PURE__ */ t(
-          V,
+          Q,
           {
             side: "right",
             align: "start",
             sideOffset: 8,
             className: "min-w-48",
-            children: S.map(H)
+            children: c.map(se)
           }
         )
       ] }),
       /* @__PURE__ */ t(
-        se,
+        O,
         {
           side: "right",
           align: "center",
-          hidden: !m,
+          hidden: !x,
           children: r.title
         }
       )
-    ] }) }, i) : /* @__PURE__ */ n(x, { children: [
-      /* @__PURE__ */ n(
-        M,
+    ] }) }, n) : /* @__PURE__ */ s(D, { children: [
+      /* @__PURE__ */ s(
+        _,
         {
-          ref: N(i),
+          ref: S(n),
           type: "button",
           isActive: r.isActive,
           tooltip: r.title,
-          "aria-expanded": b,
-          "aria-controls": E,
+          "aria-expanded": f,
+          "aria-controls": Y,
           onFocus: () => {
-            A.current = i;
+            p.current = n;
           },
-          onClick: () => y((d) => ({ ...d, [i]: !d[i] })),
+          onClick: () => H((m) => ({ ...m, [n]: !m[n] })),
           children: [
-            o(r),
-            u,
+            w(r),
+            M,
             /* @__PURE__ */ t(
-              h,
+              k,
               {
-                name: b ? "ChevronDown" : "ChevronRight",
+                name: f ? "ChevronDown" : "ChevronRight",
                 className: "text-d-muted-foreground ml-auto size-4 shrink-0 group-data-[collapsible=icon]:hidden"
               }
             )
           ]
         }
       ),
-      b && /* @__PURE__ */ t(te, { id: E, children: S.map((d) => /* @__PURE__ */ t(ie, { children: F(d) }, D(d))) })
-    ] }, i);
-  }, C = (e) => /* @__PURE__ */ n(P, { children: [
-    e.title && /* @__PURE__ */ t(L, { children: e.title }),
-    /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(re, { children: e.items.map((r) => q(e, r)) }) })
-  ] }, e.title);
-  return /* @__PURE__ */ n(Y, { collapsible: f, ...G, children: [
-    w && /* @__PURE__ */ t(Z, { children: w }),
-    /* @__PURE__ */ t(_, { children: c.map((e) => C(e)) }),
-    l?.map((e) => C(e)),
-    j,
-    z && /* @__PURE__ */ t(k, {})
+      f && /* @__PURE__ */ t(Ae, { id: Y, children: c.map((m) => /* @__PURE__ */ t(we, { children: ie(m) }, P(m))) })
+    ] }, n);
+  }, y = (e, r = !0, n) => /* @__PURE__ */ s(
+    z,
+    {
+      role: n ? "group" : void 0,
+      "aria-label": n,
+      children: [
+        r && e.title && /* @__PURE__ */ t(xe, { children: e.title }),
+        /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(Ne, { children: e.items.map((c) => ce(e, c)) }) })
+      ]
+    },
+    e.title
+  ), R = (e) => {
+    const r = T(e, "sm");
+    return r || /* @__PURE__ */ t(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase",
+        children: e.title.charAt(0)
+      }
+    );
+  }, ae = (e, r) => {
+    const n = `${r} ${e.title}`, c = r === A, f = /* @__PURE__ */ s(
+      Ce,
+      {
+        value: String(r),
+        ref: c ? S(C) : void 0,
+        onFocus: c ? () => {
+          p.current = C;
+        } : void 0,
+        className: d(
+          "text-d-sidebar-foreground/70 h-8 min-w-0 flex-initial justify-start gap-0 p-2",
+          // Overrides the `transition-all duration-200` the primitive inherits
+          // from `focusRing`: `all` would also pick up the width the label
+          // animation drives from the child, and 200ms/`ease-out` is not the
+          // house curve.
+          //
+          // No `interaction.active` here. These tabs are styled as sidebar rows,
+          // and no row in the sidebar squashes — `SidebarMenuButton` has no
+          // press state at all, and `app-sidebar-mobile.tsx` turns the token
+          // down in as many words ("that is the button squash, wrong on a list
+          // row"). A tab that squashed above nav rows that do not would break
+          // the rail's homogeneity, which is the same reason the icon-mode
+          // selector button below refuses it.
+          "transition-[box-shadow,background-color,border-color,color]",
+          l.motion.duration,
+          l.motion.ease,
+          // Only the *unselected* tabs take a hover tint.
+          // `hover:bg-d-sidebar-accent/50` has specificity 0-2-0 and so beat the
+          // selected tab's own background, halving its alpha (0.4 -> 0.2): the
+          // hover *lightened* the selected tab instead of darkening it. The
+          // pointer query is the second half of the same fix — without it a tap
+          // on a tablet (>= 768px, where this bar is rendered) leaves the hover
+          // tint stuck on the tab it opened.
+          !c && "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent/50 [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
+          c && "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-semibold shadow-none"
+        ),
+        children: [
+          R(e),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: d(
+                // Deliberate exception: `grid-template-columns` is a layout
+                // property, so this animation runs on the main thread and cannot be
+                // composited. It is kept on purpose — it is the only CSS-only way to
+                // animate to the *content's* width (`width: auto` is not
+                // animatable), and the alternative is a JS measurement or a
+                // `max-width` guess to keep in sync with the longest title. The cost
+                // is bounded by there being a handful of tabs, each reflowing a
+                // single text node. Do not "fix" this into a transform.
+                "grid grid-cols-[0fr] transition-[grid-template-columns] motion-reduce:transition-none",
+                l.motion.duration,
+                l.motion.ease,
+                c && "grid-cols-[1fr]"
+              ),
+              children: /* @__PURE__ */ t(
+                "span",
+                {
+                  className: d(
+                    // `text-ellipsis` needs all three of overflow/nowrap/ellipsis on
+                    // this box: it is the grid item, so the 0fr/1fr column is what
+                    // gives it the definite width the text overflows.
+                    "overflow-hidden text-ellipsis whitespace-nowrap",
+                    // Clipping alone let the text slide out from under the icon with a
+                    // hard edge, so it fades. Asymmetric on purpose, and both halves
+                    // are timed against the *same* front-loaded curve the width uses —
+                    // which covers ~90% of its travel in the first quarter of its
+                    // 160ms, so "half the duration" would not have been half the
+                    // distance.
+                    //   Exit: 60ms, no delay. Measured, the tab is ~91% shut 43ms in,
+                    //   so anything slower leaves the text visibly under the closing
+                    //   edge; at 60ms on this curve it is at ~2% opacity by then.
+                    //   Entry: delayed 70ms, by which point the box is already ~88%
+                    //   open. That delay doubles as the ellipsis mitigation — the
+                    //   narrow "A…"/"Am…" intermediate states play out while the text
+                    //   is still transparent.
+                    "transition-opacity motion-reduce:transition-none",
+                    l.motion.ease,
+                    c ? "opacity-100 delay-[70ms] duration-[140ms]" : "opacity-0 delay-0 duration-[60ms]"
+                  ),
+                  children: /* @__PURE__ */ t("span", { className: "pl-2", children: e.title })
+                }
+              )
+            }
+          )
+        ]
+      },
+      n
+    );
+    return /* @__PURE__ */ s(j, { children: [
+      /* @__PURE__ */ t(K, { asChild: !0, children: f }),
+      /* @__PURE__ */ t(O, { side: "right", align: "center", hidden: c, children: e.title })
+    ] }, n);
+  }, oe = () => {
+    const e = i[A];
+    return /* @__PURE__ */ s(E, { children: [
+      /* @__PURE__ */ t(z, { className: "pb-0", children: /* @__PURE__ */ s(j, { children: [
+        /* @__PURE__ */ s(q, { modal: !1, children: [
+          /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              ref: S(C),
+              onFocus: () => {
+                p.current = C;
+              },
+              "aria-label": `Navigation group: ${e.title}`,
+              className: d(
+                // Not `SidebarMenuButton`: in icon mode the primitive
+                // forces `!size-8 !p-2`, which would flatten the
+                // icon-over-chevron stack this button is.
+                "group/tab-selector flex h-10 w-8 cursor-pointer flex-col items-center gap-0.5 pt-2 pb-0.5",
+                // `renderGroupTabIcon` asks for `size="sm"` (20px) and
+                // relies on the host to bring it down; expanded, that host
+                // is `TabsTrigger`. Without the same rule here the icon
+                // rendered 20px wide and was squashed to 16 tall by the
+                // column — measured, and visibly distorted. `:not([class*='size-'])`
+                // is what keeps it off the chevron's own `size-3`.
+                "[&_svg:not([class*='size-'])]:size-4",
+                // Same surface as the selected tab when expanded, so the
+                // swap reads as a change of shape, not of state.
+                "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-semibold",
+                l.radius.default,
+                l.focusRing
+              ),
+              children: [
+                R(e),
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    name: "ChevronDown",
+                    className: d(
+                      "text-d-sidebar-foreground/70 size-3 shrink-0 transition-colors",
+                      "group-hover/tab-selector:text-d-sidebar-accent-foreground",
+                      "group-data-[state=open]/tab-selector:text-d-sidebar-accent-foreground",
+                      "animate-in fade-in motion-reduce:animate-none motion-reduce:transition-none"
+                    )
+                  }
+                )
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ t(
+            Q,
+            {
+              side: "right",
+              align: "start",
+              sideOffset: 8,
+              "aria-label": "Navigation groups",
+              className: "max-w-64 min-w-48",
+              children: /* @__PURE__ */ t(
+                ue,
+                {
+                  value: String(A),
+                  onValueChange: (r) => G(Number(r)),
+                  children: i.map((r, n) => /* @__PURE__ */ s(
+                    he,
+                    {
+                      value: String(n),
+                      className: "cursor-pointer gap-2 [&>svg]:size-4",
+                      children: [
+                        R(r),
+                        /* @__PURE__ */ t("span", { className: "truncate", children: r.title })
+                      ]
+                    },
+                    `${n} ${r.title}`
+                  ))
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(O, { side: "right", align: "center", children: e.title })
+      ] }) }),
+      /* @__PURE__ */ t(ve, {}),
+      y(e, !1, e.title)
+    ] });
+  }, le = () => /* @__PURE__ */ s(
+    ye,
+    {
+      value: String(A),
+      onValueChange: (e) => G(Number(e)),
+      className: "gap-0",
+      children: [
+        /* @__PURE__ */ t(z, { className: "pb-0", children: /* @__PURE__ */ t(
+          Me,
+          {
+            className: d(
+              // `justify-start`: tabs are sized by their content now, not stretched
+              // to equal widths, so the row packs to the left and the space the
+              // selected tab does not need stays empty.
+              "h-auto w-full justify-start gap-1 bg-transparent p-0"
+              // 3rem of rail leaves no room for a row of tabs: they stack into an
+              // icon-only strip instead of falling back to a flat list, so the
+              // "one group at a time" model survives the collapse.
+            ),
+            children: i.map((e, r) => ae(e, r))
+          }
+        ) }),
+        i.map((e, r) => /* @__PURE__ */ t(Te, { value: String(r), children: y(e, !1) }, `${r} ${e.title}`))
+      ]
+    }
+  );
+  return V ? /* @__PURE__ */ t(W, { collapsible: g, ...F, children: /* @__PURE__ */ t(
+    de,
+    {
+      navigation: i,
+      navigationFooter: a,
+      headerContent: h,
+      footerContent: B,
+      linkComponent: u,
+      linkProps: v
+    }
+  ) }) : /* @__PURE__ */ s(W, { collapsible: g, ...F, children: [
+    h && /* @__PURE__ */ t(me, { children: h }),
+    /* @__PURE__ */ t(be, { children: ne ? x ? oe() : le() : i.map(
+      (e) => y(e, i.length > 1)
+    ) }),
+    a?.map((e) => y(e)),
+    B,
+    L && /* @__PURE__ */ t(ge, {})
   ] });
 }
 export {
-  me as AppSidebar
+  Oe as AppSidebar
 };