@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/sidebar-OVzwN3jE.js

@@ -0,0 +1,1077 @@
+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 * 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 { Slot as ts } from "@radix-ui/react-slot";
+import { c as k } 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";
+import { C as L } from "./chevron-right-BrpYejk0.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ls = [
+  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
+  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
+  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
+  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
+  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
+  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+], cs = R("grip-vertical", ls);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const us = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+], ms = R("panel-left-close", us);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fs = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
+], vs = R("panel-left-open", fs);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ps = [
+  [
+    "path",
+    {
+      d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
+      key: "r04s7s"
+    }
+  ]
+], gs = R("star", ps), H = q({
+  mode: "expanded",
+  density: "default"
+}), w = () => G(H), U = "ui.sidebar.state";
+function bs(s) {
+  if (typeof window > "u") return s;
+  try {
+    const e = window.localStorage.getItem(U);
+    if (e === "expanded" || e === "icon" || e === "overlay") return e;
+  } catch {
+  }
+  return s;
+}
+function hs(s) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(U, s);
+    } catch {
+    }
+}
+function Zs(s, e) {
+  const [r, i] = 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);
+    } catch {
+    }
+    return typeof e == "function" ? e() : e;
+  });
+  return $(() => {
+    if (!(typeof window > "u"))
+      try {
+        window.localStorage.setItem(s, JSON.stringify(r));
+      } catch {
+      }
+  }, [s, r]), [r, i];
+}
+const V = k(
+  [
+    "ds:flex ds:flex-col",
+    // Sidebar sits at the page background in light mode (white-on-white
+    // chrome separated by the inline-end border + --shadow-md). In dark
+    // mode the Header already blends with --background, so we step the
+    // sidebar one layer down (blue-600) to keep it visually distinct from
+    // the header band — matches the PDF dark mockups' "flat Dark Blue
+    // surface with subtle depth via layering" recipe.
+    "ds:bg-[var(--background)] ds:[.theme-dark_&]:bg-[color:var(--color-blue-600)] ds:text-[var(--foreground)]",
+    "ds:border-inline-end ds:border-[var(--border)]",
+    // Resting-surface elevation — `--shadow-md` is deliberately lighter
+    // than `--shadow-card` so it reads as chrome, not a floating card,
+    // while still separating the rail from the page content on light
+    // backgrounds. Forced-colors strips shadows globally, so the
+    // `border-inline-end` above carries the separation cue for HCM.
+    //
+    // `relative z-[1]` lifts the rail above any sibling that paints a
+    // solid background (e.g. AppFrame's `<main>` surface), otherwise
+    // the shadow that projects towards the inline-end gets covered.
+    "ds:relative ds:z-[1] ds:shadow-[var(--shadow-md)]",
+    "ds:h-full",
+    "ds:transition-[inline-size] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        // Tokenised widths modelled on Linear / Jira proportions.
+        expanded: "ds:w-[var(--sidebar-modern-expanded-size)]",
+        icon: "ds:w-[var(--sidebar-modern-icon-size)]",
+        overlay: "ds:w-[var(--sidebar-modern-expanded-size)]"
+      },
+      density: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: { mode: "expanded", density: "default" }
+  }
+), xs = g(
+  ({
+    state: s,
+    defaultState: e = "expanded",
+    onStateChange: r,
+    density: i = "default",
+    open: n,
+    onOpenChange: o,
+    "aria-label": c,
+    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;
+    $(() => {
+      b || hs(x);
+    }, [x, b]);
+    const N = K(
+      (j) => {
+        b || d(j), r == null || r(j);
+      },
+      [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: [
+      /* @__PURE__ */ a(
+        B.Overlay,
+        {
+          className: [
+            "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+            "ds:bg-[var(--foreground)]/20 ds:backdrop-blur-sm",
+            "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in",
+            "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
+            "ds:motion-reduce:animate-none"
+          ].join(" ")
+        }
+      ),
+      /* @__PURE__ */ f(
+        B.Content,
+        {
+          "aria-label": p,
+          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 }),
+            "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",
+            "ds:rtl:data-[state=open]:slide-in-from-right ds:rtl:data-[state=closed]:slide-out-to-right",
+            "ds:motion-reduce:animate-none",
+            "ds:focus:outline-none",
+            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(B.Close, { asChild: !0, children: /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                "aria-label": h("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",
+                  "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+                  "ds:rounded-[var(--radius-sm)] ds:text-[var(--muted-foreground)]",
+                  "ds:hover:bg-[var(--muted)]/20 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)]"
+                ].join(" "),
+                children: /* @__PURE__ */ a(os, { "aria-hidden": "true", className: "ds:size-4" })
+              }
+            ) })
+          ]
+        }
+      )
+    ] }) }) }) : /* @__PURE__ */ a(H.Provider, { value: { mode: y, density: i, transitionTo: N }, children: /* @__PURE__ */ a(S.Provider, { delayDuration: 300, children: /* @__PURE__ */ a(
+      "nav",
+      {
+        ref: v,
+        "aria-label": p,
+        "data-component": "sidebar",
+        "data-mode": y,
+        "data-density": i,
+        className: [
+          V({ mode: y, density: i }),
+          i === "compact" ? "ds:density-compact" : "",
+          t ?? ""
+        ].filter(Boolean).join(" "),
+        ...u,
+        children: m
+      }
+    ) }) });
+  }
+);
+xs.displayName = "Sidebar";
+const ys = g(
+  ({ className: s, ...e }, r) => {
+    const { mode: i } = w();
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: r,
+        className: [
+          "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+          "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)]",
+          "ds:py-[var(--spacing-sm)]",
+          // Hairline border + downward chrome shadow cast the header as a
+          // sticky top band above the scrolling body.
+          "ds:border-block-end ds:border-[var(--border)]",
+          "ds:shadow-[var(--shadow-chrome-down)]",
+          s ?? ""
+        ].filter(Boolean).join(" "),
+        ...e
+      }
+    );
+  }
+);
+ys.displayName = "SidebarHeader";
+const ws = g(
+  ({ className: s, ...e }, r) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      className: [
+        "ds:flex-1 ds:overflow-auto",
+        "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]",
+        "ds:py-[var(--spacing-sm)]",
+        s ?? ""
+      ].filter(Boolean).join(" "),
+      ...e
+    }
+  )
+);
+ws.displayName = "SidebarBody";
+const Ns = g(
+  ({ className: s, ...e }, r) => {
+    const { mode: i } = w();
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: r,
+        className: [
+          "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)]",
+          "ds:min-h-[var(--min-target-size)]",
+          "ds:py-[var(--spacing-sm)]",
+          // Hairline border + upward chrome shadow cast the footer as a
+          // sticky bottom band below the scrolling body.
+          "ds:border-block-start ds:border-[var(--border)]",
+          "ds:shadow-[var(--shadow-chrome-up)]",
+          s ?? ""
+        ].filter(Boolean).join(" "),
+        ...e
+      }
+    );
+  }
+);
+Ns.displayName = "SidebarFooter";
+const Ss = [
+  "ds:group/section-label ds:flex ds:w-full ds:items-center",
+  "type-eyebrow",
+  "ds:text-[var(--muted-foreground)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:py-[var(--spacing-xs)]",
+  "ds:hover:text-[var(--foreground)]",
+  "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(" "), M = [
+  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+  "ds:size-4",
+  "ds:text-[var(--accent)]",
+  "ds:me-[var(--spacing-xs)]"
+].join(" "), J = g(
+  ({
+    label: s,
+    icon: e,
+    collapsible: r = !0,
+    defaultOpen: i = !0,
+    open: n,
+    onOpenChange: o,
+    className: c,
+    children: t,
+    ...m
+  }, u) => {
+    const { mode: v } = w(), h = v === "icon", b = r && !h && !!s, x = [
+      "ds:flex ds:flex-col",
+      "ds:gap-[var(--spacing-xs)]",
+      "ds:mt-[var(--spacing-sm)]",
+      c ?? ""
+    ].filter(Boolean).join(" ");
+    if (!b)
+      return /* @__PURE__ */ f("div", { ref: u, className: x, ...m, children: [
+        !!s || !!e ? /* @__PURE__ */ f(
+          "span",
+          {
+            className: [
+              "ds:flex ds:items-center",
+              "type-eyebrow",
+              "ds:text-[var(--muted-foreground)]",
+              "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+              "ds:py-[var(--spacing-xs)]",
+              h && !e ? "ds:sr-only" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              e ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: M, children: e }) : null,
+              s ? /* @__PURE__ */ a("span", { className: h ? "ds:sr-only" : "", children: s }) : null
+            ]
+          }
+        ) : null,
+        t
+      ] });
+    const d = "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,
+        asChild: !0,
+        children: /* @__PURE__ */ a("div", { ref: u, className: x, ...m, children: /* @__PURE__ */ f(A.Item, { value: d, 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 }),
+            /* @__PURE__ */ a(
+              L,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-3 ds:transition-transform ds:group-data-[state=open]/section-label:rotate-90 ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ a(
+            ns,
+            {
+              "aria-label": s,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
+              children: t
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+J.displayName = "SidebarSection";
+const js = [
+  "ds:group ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--foreground)] ds:text-[var(--font-size-sm)]",
+  "ds:font-[var(--font-weight-medium)]",
+  "ds:hover:bg-[var(--muted)]/20",
+  "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();
+    return /* @__PURE__ */ f(
+      F.Root,
+      {
+        ref: m,
+        defaultOpen: n,
+        open: o,
+        onOpenChange: c,
+        className: i,
+        ...t,
+        children: [
+          /* @__PURE__ */ f(F.Trigger, { className: js, children: [
+            e ? /* @__PURE__ */ a(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-flex ds:items-center ds:text-[var(--accent)]",
+                children: e
+              }
+            ) : null,
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: [
+                  "ds:flex-1 ds:text-start",
+                  u === "icon" ? "ds:sr-only" : ""
+                ].join(" "),
+                children: s
+              }
+            ),
+            u !== "icon" ? /* @__PURE__ */ a(
+              L,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-4 ds:transition-transform ds:group-data-[state=open]:rotate-90 ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ a(
+            F.Content,
+            {
+              className: [
+                "ds:overflow-hidden",
+                "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+                "ds:motion-reduce:animate-none",
+                "ds:ps-[var(--spacing-md)]"
+              ].join(" "),
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+zs.displayName = "SidebarGroup";
+const ks = k(
+  [
+    // 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.
+    // `!text-[var(--foreground)]` forces the label colour over the browser's
+    // default `<a>` link colour (blue-violet) and any inherited hue. The
+    // active variant also uses `!text-*` so it still wins when needed.
+    "ds:group/item ds:relative ds:flex ds:items-center",
+    "ds:gap-[var(--spacing-sm)]",
+    "ds:no-underline ds:!text-[var(--foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--muted)]/12",
+    "ds:transition-colors ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "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:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        expanded: [
+          "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]"
+        ].join(" "),
+        // Icon-only: each item is a 44×44 pill tile centered in the rail.
+        // The active / hover background fills just the tile rather than the
+        // whole row — matching Linear / Asana chrome.
+        icon: [
+          "ds:justify-center ds:ms-auto ds:me-auto",
+          "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
+          "ds:ps-0 ds:pe-0 ds:rounded-[var(--radius-md)]"
+        ].join(" "),
+        overlay: [
+          "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]"
+        ].join(" ")
+      },
+      density: {
+        default: "",
+        compact: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+      },
+      isActive: {
+        // Filled pill — multi-carrier (bg + text + weight + aria-current at
+        // render time) so colour is never the sole identifier. `!text-*`
+        // forces the foreground over any inherited / base rule so the icon
+        // and label read clearly against the primary fill in every theme.
+        true: [
+          "ds:bg-[var(--primary)] ds:!text-[var(--primary-foreground)]",
+          "ds:font-[var(--font-weight-semibold)]",
+          // Keep hover from dimming the active fill.
+          "ds:hover:bg-[var(--primary)]"
+        ].join(" "),
+        false: ""
+      }
+    },
+    defaultVariants: {
+      mode: "expanded",
+      density: "default",
+      isActive: !1
+    }
+  }
+), W = g(
+  ({
+    asChild: s = !1,
+    isActive: e = !1,
+    isPinned: r = !1,
+    onPinChange: i,
+    pinLabel: n,
+    className: o,
+    children: c,
+    "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,
+      {
+        ref: u,
+        "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
+        }),
+        ...m,
+        children: c
+      }
+    ), y = x ? /* @__PURE__ */ f(
+      "div",
+      {
+        className: [
+          "ds:group/item ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+          o ?? ""
+        ].filter(Boolean).join(" "),
+        children: [
+          d,
+          /* @__PURE__ */ a(
+            _,
+            {
+              isPinned: r,
+              label: n ?? t ?? "",
+              onPinChange: i
+            }
+          )
+        ]
+      }
+    ) : d;
+    return v === "icon" && t ? /* @__PURE__ */ f(S.Root, { children: [
+      /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: y }),
+      /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ f(
+        S.Content,
+        {
+          side: "right",
+          sideOffset: 6,
+          className: [
+            "ds:z-[var(--z-tooltip)] ds:max-w-[16rem]",
+            "ds:rounded-[var(--radius-sm)]",
+            "ds:bg-[var(--foreground)] ds:text-[var(--background)]",
+            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[length:var(--font-size-xs)]",
+            "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
+          ].join(" "),
+          children: [
+            t,
+            /* @__PURE__ */ a(S.Arrow, { className: "ds:fill-[var(--foreground)]" })
+          ]
+        }
+      ) })
+    ] }) : y;
+  }
+);
+W.displayName = "SidebarItem";
+const Cs = g(
+  ({ className: s, children: e, ...r }, i) => /* @__PURE__ */ a(
+    "span",
+    {
+      ref: i,
+      "aria-hidden": "true",
+      className: [
+        "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+        "ds:size-5",
+        // Icons carry the accent tint by default so the rail reads less
+        // monotone against the violet active pill. The active row sets
+        // `aria-current="page"` on the anchor (which is `group/item`), so
+        // the icon flips to the primary-foreground (white) on the filled
+        // pill — keeping it readable on the primary background.
+        "ds:text-[var(--accent)]",
+        "ds:group-aria-[current=page]/item:text-[var(--primary-foreground)]",
+        s ?? ""
+      ].filter(Boolean).join(" "),
+      ...r,
+      children: e
+    }
+  )
+);
+Cs.displayName = "SidebarItemIcon";
+const Ts = g(
+  ({ className: s, children: e, ...r }, i) => {
+    const { mode: n } = w();
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: i,
+        className: [
+          "ds:flex-1",
+          "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
+          "ds:text-start",
+          n === "icon" ? "ds:sr-only" : "",
+          s ?? ""
+        ].filter(Boolean).join(" "),
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+Ts.displayName = "SidebarItemLabel";
+const Bs = g(
+  ({ className: s, children: e, ...r }, i) => {
+    const { mode: n } = w(), o = n === "icon";
+    return /* @__PURE__ */ a(
+      "span",
+      {
+        ref: i,
+        "aria-hidden": o ? "true" : void 0,
+        className: [
+          "ds:inline-flex ds:items-center ds:justify-center",
+          "ds:font-[var(--font-weight-semibold)]",
+          o ? [
+            "ds:absolute ds:top-[2px] ds:end-[2px]",
+            "ds:min-w-0 ds:size-[10px] ds:ps-0 ds:pe-0",
+            "ds:rounded-[var(--radius-full)]",
+            "ds:bg-[var(--primary)] ds:text-transparent",
+            "ds:ring-2 ds:ring-[var(--background)]",
+            "ds:pointer-events-none"
+          ].join(" ") : [
+            "ds:min-w-[var(--spacing-lg)] ds:h-[var(--spacing-lg)]",
+            "ds:rounded-[var(--radius-full)]",
+            "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+            "ds:text-[length:var(--font-size-xs)]",
+            "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+          ].join(" "),
+          s ?? ""
+        ].filter(Boolean).join(" "),
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+Bs.displayName = "SidebarItemBadge";
+const Ds = k(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:text-[var(--foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--muted)]/20",
+    "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: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";
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      "aria-label": e,
+      className: [Ds(), i].filter(Boolean).join(" "),
+      ...n,
+      children: [
+        /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:shrink-0", children: s }),
+        t ? /* @__PURE__ */ f(O, { children: [
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: "ds:truncate ds:flex-1 ds:text-start ds:max-w-[var(--header-workspace-max-inline-size)]",
+              children: e
+            }
+          ),
+          r ? /* @__PURE__ */ a(
+            L,
+            {
+              "aria-hidden": "true",
+              className: "ds:size-4 ds:shrink-0 ds:rotate-90"
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Is.displayName = "SidebarWorkspaceSwitcher";
+const As = k(
+  [
+    "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+    "ds:font-[var(--font-weight-semibold)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--primary-hover)]",
+    "ds:transition-colors ds:motion-reduce:transition-none",
+    "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:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        expanded: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        icon: "ds:ps-0 ds:pe-0 ds:w-[var(--sidebar-modern-tile)] ds:h-[var(--sidebar-modern-tile)] ds:ms-auto ds:me-auto",
+        overlay: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
+      }
+    },
+    defaultVariants: { mode: "expanded" }
+  }
+), Rs = g(({ icon: s, label: e, shortcut: r, className: i, ...n }, o) => {
+  const { mode: c } = w(), t = c !== "icon";
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      "aria-label": e,
+      "aria-keyshortcuts": r,
+      className: [As({ mode: c }), i].filter(Boolean).join(" "),
+      ...n,
+      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: [
+          /* @__PURE__ */ a("span", { className: "ds:truncate", children: e }),
+          r ? /* @__PURE__ */ a("kbd", { className: "ds:ms-auto ds:text-[length:var(--font-size-xs)] ds:font-[family-name:var(--font-mono)] ds:opacity-80", children: r }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Rs.displayName = "SidebarPrimaryAction";
+const Ps = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:size-6 ds:rounded-[var(--radius-sm)]",
+  // Pin stars carry the accent tint to match every other icon in the rail.
+  // Stays quiet via opacity — reveals only on row hover / focus.
+  "ds:text-[var(--accent)]",
+  "ds:opacity-0 ds:group-hover/item:opacity-100 ds:focus-visible:opacity-100",
+  "ds:hover:bg-[var(--muted)]/20",
+  "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: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();
+    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 });
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        ref: c,
+        type: "button",
+        "aria-label": u,
+        "aria-pressed": s,
+        className: [Ps, i].filter(Boolean).join(" "),
+        onClick: (v) => {
+          v.preventDefault(), v.stopPropagation(), e == null || e(!s), n == null || n(v);
+        },
+        ...o,
+        children: /* @__PURE__ */ a(
+          gs,
+          {
+            "aria-hidden": "true",
+            className: "ds:size-4",
+            fill: s ? "currentColor" : "none"
+          }
+        )
+      }
+    );
+  }
+);
+_.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}​`
+      );
+    }, []), j = ds(
+      () => ({ onReorder: r, count: v, dragSource: b, setDragSource: x, announce: p }),
+      [r, v, b, p]
+    );
+    return !h && !e ? null : /* @__PURE__ */ a(X.Provider, { value: j, children: /* @__PURE__ */ f(
+      J,
+      {
+        ref: c,
+        label: m,
+        className: i,
+        ...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 })
+        ]
+      }
+    ) });
+  }
+);
+Hs.displayName = "SidebarFavorites";
+const Ls = k(
+  [
+    "ds:group/item ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      dragging: {
+        true: "ds:opacity-60",
+        false: ""
+      },
+      dropTarget: {
+        true: "ds:outline-[length:var(--focus-ring-width)] ds:outline-dashed ds:outline-[var(--primary)] ds:outline-offset-[-2px]",
+        false: ""
+      }
+    },
+    defaultVariants: { dragging: !1, dropTarget: !1 }
+  }
+), _s = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:size-6 ds:rounded-[var(--radius-sm)]",
+  "ds:cursor-grab ds:active:cursor-grabbing",
+  "ds:text-[var(--muted-foreground)]",
+  // Quiet chrome — only reveal the grip when the row is hovered or the
+  // handle itself is focused (keyboard / AT). Matches the pin-star's
+  // reveal-on-hover behaviour so the two siblings appear together.
+  "ds:opacity-0 ds:group-hover/item:opacity-100 ds:focus-visible:opacity-100",
+  "ds:hover:bg-[var(--muted)]/20 ds:hover:text-[var(--foreground)]",
+  "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: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(
+  ({
+    index: s,
+    isActive: e = !1,
+    asChild: r = !1,
+    reorderLabel: i,
+    isPinned: n = !1,
+    onPinChange: o,
+    pinLabel: c,
+    "aria-label": t,
+    className: m,
+    children: u,
+    ...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(
+          "ui.navigation.sidebar.reorderAnnounce",
+          "{{label}} moved to position {{to}} of {{total}}",
+          { label: j, to: P + 1, total: d.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))));
+    }, 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;
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        className: Ls({
+          dragging: E,
+          dropTarget: y && !E
+        }),
+        draggable: p || void 0,
+        onDragStart: p ? Q : void 0,
+        onDragEnd: p ? Z : void 0,
+        onDragOver: ss,
+        onDragLeave: es,
+        onDrop: as,
+        children: [
+          /* @__PURE__ */ a(
+            W,
+            {
+              ref: h,
+              isActive: e,
+              asChild: r,
+              "aria-label": t,
+              "aria-describedby": p ? C : void 0,
+              draggable: p ? !1 : void 0,
+              className: [
+                p ? "ds:flex-1 ds:min-w-0" : "",
+                m ?? ""
+              ].filter(Boolean).join(" "),
+              ...v,
+              children: u
+            }
+          ),
+          p ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              id: C,
+              "aria-label": b(
+                "ui.navigation.sidebar.reorderHandle",
+                "Reorder {{label}}. Press Alt + Up or Alt + Down to move.",
+                { label: j }
+              ),
+              className: _s,
+              onKeyDown: Y,
+              children: /* @__PURE__ */ a(cs, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : null,
+          o && x !== "icon" ? /* @__PURE__ */ a(
+            _,
+            {
+              isPinned: n,
+              label: c ?? t ?? "",
+              onPinChange: o
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Es.displayName = "SidebarFavoriteItem";
+const Vs = k(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:text-[var(--foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--muted)]/20",
+    "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: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;
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      ref: c,
+      type: "button",
+      "aria-label": u ? `${e}, ${u}` : e,
+      className: [Vs(), n].filter(Boolean).join(" "),
+      ...o,
+      children: [
+        /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:shrink-0", children: s }),
+        m ? /* @__PURE__ */ f("span", { className: "ds:flex-1 ds:min-w-0 ds:text-start", children: [
+          /* @__PURE__ */ a("span", { className: "ds:block ds:truncate type-label", children: e }),
+          r ? typeof r == "string" ? /* @__PURE__ */ a("span", { className: "ds:block ds:truncate type-meta ds:text-[color:var(--muted-foreground)]", children: r }) : /* @__PURE__ */ a("span", { className: "ds:flex ds:items-center ds:gap-[length:var(--spacing-xs)] ds:min-w-0 type-meta ds:text-[color:var(--muted-foreground)]", children: r }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Ms.displayName = "SidebarProfilePill";
+const Os = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--muted-foreground)]",
+  "ds:hover:bg-[var(--muted)]/20 ds:hover:text-[var(--foreground)]",
+  "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: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(
+      "button",
+      {
+        ref: n,
+        type: "button",
+        "aria-label": u,
+        "aria-expanded": m,
+        onClick: (h) => {
+          t == null || t(m ? "icon" : "expanded"), r == null || r(h);
+        },
+        className: [Os, s].filter(Boolean).join(" "),
+        ...i,
+        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" })
+      }
+    );
+    return /* @__PURE__ */ f(S.Root, { children: [
+      /* @__PURE__ */ a(S.Trigger, { asChild: !0, children: v }),
+      /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ f(
+        S.Content,
+        {
+          side: c === "icon" ? "right" : "top",
+          sideOffset: 6,
+          className: [
+            "ds:z-[var(--z-tooltip)] ds:max-w-[16rem]",
+            "ds:rounded-[var(--radius-sm)]",
+            "ds:bg-[var(--foreground)] ds:text-[var(--background)]",
+            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[length:var(--font-size-xs)]",
+            "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
+          ].join(" "),
+          children: [
+            u,
+            /* @__PURE__ */ a(S.Arrow, { className: "ds:fill-[var(--foreground)]" })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+$s.displayName = "SidebarCollapseTrigger";
+export {
+  xs as S,
+  ws as a,
+  $s as b,
+  Es as c,
+  Hs as d,
+  Ns as e,
+  zs as f,
+  ys as g,
+  W as h,
+  Bs as i,
+  Cs as j,
+  Ts as k,
+  _ as l,
+  Rs as m,
+  Ms as n,
+  J as o,
+  Is as p,
+  w as q,
+  Zs as u
+};
+//# sourceMappingURL=sidebar-OVzwN3jE.js.map