@cloudraker/reki 2.6.1

package/dist/chunks/sidebar-noz668nhdu2gso12.js

@@ -0,0 +1,1144 @@
+"use client";
+import { jsx as r, jsxs as H, Fragment as Le } from "react/jsx-runtime";
+import _, { forwardRef as x, useState as P, useId as De, useRef as B, useCallback as w, useMemo as Z, useContext as z, useEffect as q, createContext as $ } from "react";
+import { CaretRightIcon as Be } from "@phosphor-icons/react";
+import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
+import { u as ee } from "./link-provider-bgljdgs4hs438h0u.js";
+import { a as ze, T as Oe } from "./tooltip-ncaia8n1lavkyw8n.js";
+import { bz as Fe, bA as Pe, bB as Ve, bC as We, bD as He } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const st = {
+  variant: {
+    sidebar: {
+      classes: "",
+      description: "Standard sidebar with border separator"
+    },
+    floating: {
+      classes: "",
+      description: "Floating sidebar with shadow and rounded corners"
+    },
+    inset: {
+      classes: "",
+      description: "Inset sidebar within the content area"
+    }
+  },
+  collapsible: {
+    icon: {
+      classes: "",
+      description: "Collapses to show icons only"
+    },
+    offcanvas: {
+      classes: "",
+      description: "Slides off screen when collapsed"
+    },
+    none: {
+      classes: "",
+      description: "Cannot be collapsed"
+    }
+  },
+  side: {
+    left: {
+      classes: "",
+      description: "Left-aligned sidebar"
+    },
+    right: {
+      classes: "",
+      description: "Right-aligned sidebar"
+    }
+  }
+}, J = {
+  variant: "sidebar",
+  collapsible: "icon",
+  side: "left"
+}, ot = {
+  width: {
+    expanded: "16.25rem",
+    icon: "57px"
+  },
+  mobile: {
+    breakpoint: 768
+  }
+}, Xe = "16.25rem", Ke = "57px", Ge = "cubic-bezier(0.77, 0, 0.175, 1)", $e = 250, qe = 768, je = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Ue(t = qe) {
+  const [a, e] = P(() => typeof window > "u" ? !1 : window.matchMedia(`(max-width: ${t - 1}px)`).matches);
+  return q(() => {
+    const i = window.matchMedia(`(max-width: ${t - 1}px)`), s = () => e(i.matches);
+    return i.addEventListener("change", s), e(i.matches), () => i.removeEventListener("change", s);
+  }, [t]), a;
+}
+const te = $(null);
+function V() {
+  const t = z(te);
+  if (!t)
+    throw new Error("useSidebar must be used within a Sidebar.Provider");
+  return t;
+}
+const Ye = 256, Je = 200, Qe = 480;
+function ae({
+  defaultOpen: t = !0,
+  open: a,
+  onOpenChange: e,
+  variant: i = J.variant,
+  side: s = J.side,
+  collapsible: g = J.collapsible,
+  resizable: c = !1,
+  defaultWidth: u = Ye,
+  minWidth: l = Je,
+  maxWidth: d = Qe,
+  onWidthChange: n,
+  contained: f = !1,
+  peekable: v = !1,
+  animationDuration: m = $e,
+  mobileBreakpoint: S,
+  children: k,
+  className: R,
+  style: h
+}) {
+  const p = Ue(S), [y, L] = P(!1), [A, T] = P(u), [N, C] = P(!1), [O, M] = P(!1), F = p && a !== void 0 ? a : y, X = w(
+    (E) => {
+      L(E), p && a !== void 0 && e?.(E);
+    },
+    [p, a, e]
+  ), Q = w(
+    (E) => {
+      const K = Math.min(d, Math.max(l, E));
+      T(K), n?.(K);
+    },
+    [l, d, n]
+  ), [j, U] = P(t), b = a ?? j, D = w(
+    (E) => {
+      const K = typeof E == "function" ? E(b) : E;
+      e?.(K), U(K);
+    },
+    [e, b]
+  ), W = w(() => {
+    p ? X(!F) : (M(!1), D((E) => !E));
+  }, [p, F, X, D]), I = w(() => {
+    v && !b && !p && M(!0);
+  }, [v, b, p]), Ee = w(() => {
+    M(!1);
+  }, []), Y = O ? "peeking" : b ? "expanded" : "collapsed", Te = c ? `${A}px` : Xe, _e = Z(
+    () => ({
+      state: Y,
+      open: b,
+      setOpen: D,
+      openMobile: F,
+      setOpenMobile: X,
+      isMobile: p,
+      toggleSidebar: W,
+      variant: i,
+      side: s,
+      collapsible: g,
+      width: A,
+      resizable: c,
+      minWidth: l,
+      maxWidth: d,
+      isResizing: N,
+      setIsResizing: C,
+      setWidth: Q,
+      isPeeking: O,
+      peekable: v,
+      startPeek: I,
+      stopPeek: Ee,
+      contained: f,
+      animationDuration: m
+    }),
+    [Y, b, F, p, A, N, O]
+  );
+  return /* @__PURE__ */ r(te.Provider, { value: _e, children: /* @__PURE__ */ r(
+    "div",
+    {
+      "data-sidebar-wrapper": "",
+      "data-state": Y,
+      "data-side": s,
+      style: {
+        "--sidebar-width": Te,
+        "--sidebar-width-icon": Ke,
+        "--sidebar-animation-duration": `${m}ms`,
+        "--sidebar-easing": Ge,
+        ...h
+      },
+      className: o(
+        "group/sidebar-wrapper relative isolate flex w-full [--sidebar-bg:var(--color-reki-canvas)] [--sidebar-active-bg:var(--color-reki-tint)]",
+        !f && !p && "min-h-svh",
+        "has-data-[variant=inset]:bg-reki-recessed",
+        N && "select-none",
+        R
+      ),
+      children: k
+    }
+  ) });
+}
+ae.displayName = "Sidebar.Provider";
+const ie = x(
+  ({ className: t, contentClassName: a, children: e, ...i }, s) => {
+    const {
+      state: g,
+      open: c,
+      isMobile: u,
+      openMobile: l,
+      setOpenMobile: d,
+      side: n,
+      variant: f,
+      collapsible: v,
+      isResizing: m,
+      resizable: S,
+      width: k,
+      isPeeking: R,
+      startPeek: h,
+      stopPeek: p,
+      contained: y
+    } = V(), L = w(
+      (b) => {
+        b && (l ? b.removeAttribute("inert") : b.setAttribute("inert", ""));
+      },
+      [l]
+    ), A = w(
+      (b) => {
+        L(b), typeof s == "function" ? s(b) : s && (s.current = b);
+      },
+      [s, L]
+    ), T = B(null), N = B(null), C = B(!1);
+    q(() => {
+      if (!u || !l) return;
+      const b = N.current, D = (I) => {
+        I.key === "Escape" && (C.current = !0, d(!1));
+      }, W = (I) => {
+        b && !b.contains(I.relatedTarget) && (C.current = !1, d(!1));
+      };
+      return document.addEventListener("keydown", D), b?.addEventListener("focusout", W), () => {
+        document.removeEventListener("keydown", D), b?.removeEventListener("focusout", W);
+      };
+    }, [u, l, d]), q(() => {
+      u && (l ? (T.current = document.activeElement, C.current = !1, requestAnimationFrame(() => {
+        (N.current?.querySelector(
+          je
+        ) ?? N.current)?.focus();
+      })) : C.current && T.current instanceof HTMLElement && (T.current.focus(), C.current = !1, T.current = null));
+    }, [u, l]);
+    const O = w(
+      (b) => {
+        b.currentTarget.contains(b.relatedTarget) || p();
+      },
+      [p]
+    );
+    if (v === "none")
+      return /* @__PURE__ */ r(
+        "aside",
+        {
+          ref: s,
+          "data-state": "expanded",
+          "data-side": n,
+          "data-variant": f,
+          "data-sidebar": "sidebar",
+          style: {
+            width: "var(--sidebar-width)",
+            minWidth: "var(--sidebar-width)",
+            maxWidth: "var(--sidebar-width)"
+          },
+          className: o(
+            "relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-(--sidebar-bg) text-reki-default",
+            f === "sidebar" && (n === "left" ? "border-r border-reki-line" : "border-l border-reki-line"),
+            f === "floating" && "m-2 rounded-lg border border-reki-line shadow-lg",
+            t
+          ),
+          ...i,
+          children: e
+        }
+      );
+    if (u)
+      return /* @__PURE__ */ H(Le, { children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            "data-sidebar-backdrop": "",
+            className: o(
+              y ? "absolute inset-0 z-40 bg-reki-recessed" : "fixed inset-0 z-40 bg-reki-recessed",
+              "transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              "motion-reduce:transition-none",
+              l ? "opacity-80" : "opacity-0 pointer-events-none"
+            ),
+            onClick: () => {
+              C.current = !0, d(!1);
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "nav",
+          {
+            ref: (b) => {
+              A(b), N.current = b;
+            },
+            tabIndex: -1,
+            "aria-label": "Navigation",
+            "aria-hidden": !l,
+            "data-state": l ? "expanded" : "collapsed",
+            "data-side": n,
+            "data-variant": f,
+            "data-collapsible": v,
+            "data-sidebar": "sidebar",
+            "data-mobile": "true",
+            className: o(
+              y ? "group/sidebar absolute inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden" : "group/sidebar fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden",
+              "border-r border-reki-line bg-(--sidebar-bg) text-reki-default",
+              "transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              "motion-reduce:transition-none",
+              n === "left" && "left-0",
+              n === "right" && "right-0",
+              n === "left" && (l ? "translate-x-0" : "-translate-x-full"),
+              n === "right" && (l ? "translate-x-0" : "translate-x-full"),
+              t
+            ),
+            ...i,
+            children: e
+          }
+        )
+      ] });
+    const M = v === "icon" ? "var(--sidebar-width-icon)" : "0px", F = S ? `${k}px` : "var(--sidebar-width)", X = c ? F : M, j = c || R ? F : M, U = f === "sidebar" ? n === "left" ? "border-r border-reki-line" : "border-l border-reki-line" : f === "floating" ? "border border-reki-line" : "";
+    return /* @__PURE__ */ r(
+      "aside",
+      {
+        ref: s,
+        "data-state": g,
+        "data-side": n,
+        "data-variant": f,
+        "data-collapsible": v,
+        "data-sidebar": "sidebar",
+        style: { width: X },
+        className: o(
+          "group/sidebar relative h-full shrink-0 grow-0",
+          "overflow-visible",
+          // allow content container to overlay when peeking
+          "transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+          "motion-reduce:transition-none",
+          m && "transition-none!",
+          f === "floating" && "m-2 rounded-lg shadow-lg",
+          t
+        ),
+        ...i,
+        children: /* @__PURE__ */ r(ze, { children: (() => {
+          const b = _.Children.toArray(e), D = b.filter(
+            (I) => _.isValidElement(I) && I.type?.displayName === "Sidebar.Footer"
+          ), W = b.filter(
+            (I) => !_.isValidElement(I) || I.type?.displayName !== "Sidebar.Footer"
+          );
+          return /* @__PURE__ */ H(
+            "div",
+            {
+              "data-sidebar": "content-container",
+              style: { width: j },
+              className: o(
+                "flex h-full flex-col",
+                "min-w-0 overflow-hidden whitespace-nowrap",
+                "bg-(--sidebar-bg) text-reki-default",
+                U,
+                "transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+                "motion-reduce:transition-none",
+                m && "transition-none!",
+                !c && o(
+                  y ? "absolute" : "fixed",
+                  "inset-y-0 z-40",
+                  n === "left" && "left-0",
+                  n === "right" && "right-0"
+                ),
+                c && "relative",
+                a
+              ),
+              children: [
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    "data-sidebar": "peek-zone",
+                    className: "flex flex-1 flex-col min-h-0",
+                    onMouseEnter: h,
+                    onMouseLeave: p,
+                    onFocus: h,
+                    onBlur: O,
+                    children: W
+                  }
+                ),
+                D
+              ]
+            }
+          );
+        })() })
+      }
+    );
+  }
+);
+ie.displayName = "Sidebar";
+const re = x(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "header",
+    className: o(
+      "flex h-[58px] shrink-0 items-center gap-1 border-b border-reki-line",
+      "px-3 overflow-hidden",
+      t
+    ),
+    ...a
+  }
+));
+re.displayName = "Sidebar.Header";
+const ne = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ H(
+  Fe,
+  {
+    ref: i,
+    "data-sidebar": "content",
+    className: o("relative min-w-0 flex-1 overflow-hidden", t),
+    ...e,
+    children: [
+      /* @__PURE__ */ r(
+        Pe,
+        {
+          tabIndex: -1,
+          className: o(
+            "h-full px-[11px] py-3 group-not-data-[state=collapsed]/sidebar:px-3.5",
+            "transition-[padding] duration-(--sidebar-animation-duration)",
+            "overflow-x-hidden!",
+            // Scroll fade via CSS mask driven by Base UI overflow CSS variables
+            "[mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]"
+          ),
+          children: /* @__PURE__ */ r(Ve, { className: "flex min-w-0! flex-col", children: a })
+        }
+      ),
+      /* @__PURE__ */ r(
+        We,
+        {
+          orientation: "vertical",
+          className: o(
+            "flex w-1.5 touch-none select-none p-px",
+            "opacity-0 transition-opacity duration-150",
+            "data-[scrolling]:opacity-100 data-[hovering]:opacity-100"
+          ),
+          children: /* @__PURE__ */ r(He, { className: "flex-1 rounded-full bg-reki-line" })
+        }
+      )
+    ]
+  }
+));
+ne.displayName = "Sidebar.Content";
+const se = x(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "footer",
+    className: o(
+      "flex h-12 shrink-0 items-center gap-4 overflow-hidden whitespace-nowrap border-t border-reki-line",
+      "px-[11px] group-not-data-[state=collapsed]/sidebar:px-4",
+      "bg-(--sidebar-bg)",
+      "w-(--sidebar-width)",
+      "transition-[width,padding] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+      "motion-reduce:transition-none",
+      "sticky bottom-0",
+      "group-data-[state=collapsed]/sidebar:w-(--sidebar-width-icon) bg-clip-padding",
+      "group-data-[state=collapsed]/sidebar:border-r group-data-[state=collapsed]/sidebar:border-reki-line",
+      t
+    ),
+    ...a
+  }
+));
+se.displayName = "Sidebar.Footer";
+const oe = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: i,
+    "data-sidebar": "group",
+    className: o("flex min-w-0 flex-col gap-y-px", t),
+    ...e,
+    children: a
+  }
+));
+oe.displayName = "Sidebar.Group";
+const de = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: i,
+    "data-sidebar": "group-label",
+    className: o(
+      // Grid-rows for smooth collapse animation
+      "grid overflow-hidden",
+      "transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+      // Mobile: no collapse animation — sidebar is always expanded
+      "group-data-[mobile=true]/sidebar:transition-none",
+      // Collapsed: spacer with divider line between icon groups
+      "grid-rows-[0fr] my-3 border-b border-reki-line",
+      // First group: no spacer or divider needed
+      "[[data-sidebar=group]:first-child_&]:my-0 [[data-sidebar=group]:first-child_&]:border-transparent",
+      // Expanded: reveal the label text
+      "group-not-data-[state=collapsed]/sidebar:grid-rows-[1fr] group-not-data-[state=collapsed]/sidebar:my-0 group-not-data-[state=collapsed]/sidebar:border-transparent",
+      // Mobile: always show labels (sidebar content is always expanded on mobile)
+      "group-data-[mobile=true]/sidebar:grid-rows-[1fr] group-data-[mobile=true]/sidebar:my-0 group-data-[mobile=true]/sidebar:border-transparent",
+      t
+    ),
+    ...e,
+    children: /* @__PURE__ */ r("div", { className: "min-h-0 min-w-0", children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: o(
+          "truncate px-3 mt-4 mb-2 text-sm font-medium text-reki-subtle",
+          // First group: less top margin
+          "[[data-sidebar=group]:first-child_&]:mt-2"
+        ),
+        children: a
+      }
+    ) })
+  }
+));
+de.displayName = "Sidebar.GroupLabel";
+const le = $(!1), ce = $(!1), ue = x(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "ul",
+  {
+    ref: e,
+    "data-sidebar": "menu",
+    className: o(
+      "m-0 flex min-w-0 list-none flex-col items-stretch gap-y-px p-0",
+      t
+    ),
+    ...a
+  }
+));
+ue.displayName = "Sidebar.Menu";
+const be = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ r(le.Provider, { value: !0, children: /* @__PURE__ */ r(
+  "li",
+  {
+    ref: i,
+    "data-sidebar": "menu-item",
+    className: o(
+      "relative group-data-[state=collapsed]/sidebar:overflow-hidden",
+      t
+    ),
+    ...e,
+    children: a
+  }
+) }));
+be.displayName = "Sidebar.MenuItem";
+const pe = x(
+  ({
+    className: t,
+    icon: a,
+    active: e = !1,
+    size: i = "base",
+    href: s,
+    target: g,
+    tooltip: c,
+    children: u,
+    ...l
+  }, d) => {
+    const { state: n, peekable: f } = V(), v = ee(), m = z(le), S = a ? _.isValidElement(a) ? a : /* @__PURE__ */ r(
+      a,
+      {
+        className: o(
+          "shrink-0 opacity-40",
+          i === "base" ? "size-4" : "size-3.5"
+        )
+      }
+    ) : null, k = /* @__PURE__ */ H(
+      "div",
+      {
+        className: o(
+          "flex flex-1 items-center min-w-0 gap-3",
+          "translate-x-[-3px] group-not-data-[state=collapsed]/sidebar:translate-x-0",
+          "transition-transform duration-(--sidebar-animation-duration)"
+        ),
+        children: [
+          S,
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: o(
+                "flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden"
+              ),
+              children: _.Children.map(
+                u,
+                (y) => typeof y == "string" || typeof y == "number" ? /* @__PURE__ */ r("span", { className: "truncate", children: y }) : y
+              )
+            }
+          )
+        ]
+      }
+    ), R = o(
+      // Layout
+      "group/menu-button relative flex w-full min-w-0 items-center gap-2.5 rounded-lg outline-none cursor-pointer",
+      "before:absolute before:inset-x-0 before:-inset-y-px",
+      // Sizing
+      i === "base" && "min-h-8.5 px-3 py-0 text-sm font-medium",
+      i === "sm" && "min-h-7 px-2 py-0 text-sm",
+      "text-reki-default",
+      "transition-[color,box-shadow,outline] duration-(--sidebar-animation-duration)",
+      !e && "hover:bg-(--sidebar-active-bg)",
+      // Active state
+      e && "bg-(--sidebar-active-bg)",
+      // When a child sub-button is active, don't show active styling on the parent trigger
+      "has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-(--sidebar-active-bg)",
+      // Focus
+      "focus:outline-none focus-visible:text-reki-strong focus-visible:bg-(--sidebar-active-bg)",
+      t
+    );
+    let h;
+    return s ? h = /* @__PURE__ */ r(
+      v,
+      {
+        ref: d,
+        className: o(R, "no-underline!"),
+        href: s,
+        to: s,
+        target: g,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-reki-component": "Sidebar",
+        "data-reki-part": "menu-button-link",
+        "data-size": i,
+        onClick: l.onClick,
+        children: k
+      }
+    ) : h = /* @__PURE__ */ r(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        className: R,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-reki-component": "Sidebar",
+        "data-reki-part": "menu-button",
+        "data-size": i,
+        ...l,
+        children: k
+      }
+    ), c && (h = /* @__PURE__ */ r(
+      Oe,
+      {
+        content: n === "collapsed" && !f ? c : null,
+        side: "right",
+        render: h
+      }
+    )), m ? h : /* @__PURE__ */ r(
+      "li",
+      {
+        "data-sidebar": "menu-item",
+        className: "relative group-data-[state=collapsed]/sidebar:overflow-hidden",
+        children: h
+      }
+    );
+  }
+);
+pe.displayName = "Sidebar.MenuButton";
+const fe = x(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "span",
+  {
+    ref: e,
+    "data-sidebar": "menu-badge",
+    className: o(
+      "inline-flex shrink-0 items-center rounded-full border border-dashed border-reki-line",
+      "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-reki-strong",
+      // Hidden when collapsed
+      "group-data-[state=collapsed]/sidebar:hidden",
+      t
+    ),
+    ...a
+  }
+));
+fe.displayName = "Sidebar.MenuBadge";
+const me = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ H(
+  "ul",
+  {
+    ref: i,
+    "data-sidebar": "menu-sub",
+    className: o(
+      "relative m-0 flex min-w-0 list-none flex-col gap-y-px p-0 pl-7 pr-0 overflow-hidden",
+      t
+    ),
+    ...e,
+    children: [
+      /* @__PURE__ */ r("div", { className: "absolute left-[19px] inset-y-px w-px bg-reki-line z-10" }),
+      a
+    ]
+  }
+));
+me.displayName = "Sidebar.MenuSub";
+const ge = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ r(ce.Provider, { value: !0, children: /* @__PURE__ */ r(
+  "li",
+  {
+    ref: i,
+    "data-sidebar": "menu-sub-item",
+    className: o("relative", t),
+    ...e,
+    children: a
+  }
+) }));
+ge.displayName = "Sidebar.MenuSubItem";
+const he = x(({ className: t, active: a = !1, href: e, children: i, ...s }, g) => {
+  const c = ee(), u = z(ce), l = o(
+    "group/menu-button relative flex w-full min-w-0 items-center gap-2 rounded-lg min-h-8.5 px-3 py-0 text-sm font-medium outline-none cursor-pointer",
+    "before:absolute before:inset-x-0 before:-inset-y-px",
+    "text-reki-default transition-[color] duration-150",
+    !a && "hover:bg-(--sidebar-active-bg)",
+    a && "bg-(--sidebar-active-bg)",
+    "focus:outline-none focus-visible:text-reki-strong focus-visible:bg-(--sidebar-active-bg)",
+    t
+  ), d = /* @__PURE__ */ r("span", { className: "flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden", children: _.Children.map(
+    i,
+    (f) => typeof f == "string" || typeof f == "number" ? /* @__PURE__ */ r("span", { className: "truncate", children: f }) : f
+  ) });
+  let n;
+  return e ? n = /* @__PURE__ */ r(
+    c,
+    {
+      ref: g,
+      className: o(l, "no-underline!"),
+      href: e,
+      to: e,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-reki-component": "Sidebar",
+      "data-reki-part": "menu-sub-button-link",
+      onClick: s.onClick,
+      children: d
+    }
+  ) : n = /* @__PURE__ */ r(
+    "button",
+    {
+      ref: g,
+      type: "button",
+      className: l,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-reki-component": "Sidebar",
+      "data-reki-part": "menu-sub-button",
+      ...s,
+      children: d
+    }
+  ), u ? n : /* @__PURE__ */ r("li", { "data-sidebar": "menu-sub-item", className: "relative", children: n });
+});
+he.displayName = "Sidebar.MenuSubButton";
+const ve = x(({ className: t, ...a }, e) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "separator",
+    className: o("my-3 px-2", t),
+    ...a,
+    children: /* @__PURE__ */ r("div", { className: "border-b border-reki-line" })
+  }
+));
+ve.displayName = "Sidebar.Separator";
+function xe({ className: t }) {
+  const { open: a } = V();
+  return /* @__PURE__ */ H(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      className: o("shrink-0", t),
+      children: [
+        /* @__PURE__ */ r("path", { d: "M21.25 6.72v10.56a2.97 2.97 0 0 1-2.97 2.97H5.72a2.97 2.97 0 0 1-2.97-2.97V6.72a2.97 2.97 0 0 1 2.97-2.97h12.56a2.97 2.97 0 0 1 2.97 2.97" }),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M6.25 7.25v9.5",
+            className: o(
+              "transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              a ? "translate-x-px" : "translate-x-[10.5px]"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+xe.displayName = "Sidebar.PanelIcon";
+const we = x(({ className: t, children: a, onClick: e, ...i }, s) => {
+  const { open: g, toggleSidebar: c } = V();
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      ref: s,
+      type: "button",
+      "data-sidebar": "trigger",
+      "data-reki-component": "Sidebar",
+      "data-reki-part": "trigger",
+      "aria-expanded": g,
+      "aria-label": g ? "Collapse sidebar" : "Expand sidebar",
+      className: o(
+        "flex shrink-0 size-8.5 justify-center items-center rounded-lg cursor-pointer",
+        "text-reki-subtle hover:text-reki-default hover:bg-(--sidebar-active-bg)",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-reki-brand",
+        t
+      ),
+      onClick: (u) => {
+        e?.(u), c();
+      },
+      ...i,
+      children: a ?? /* @__PURE__ */ r(xe, {})
+    }
+  );
+});
+we.displayName = "Sidebar.Trigger";
+const Se = x(({ className: t, ...a }, e) => {
+  const { toggleSidebar: i } = V();
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "data-sidebar": "rail",
+      "data-reki-component": "Sidebar",
+      "data-reki-part": "rail",
+      "aria-label": "Toggle sidebar",
+      tabIndex: -1,
+      className: o(
+        "absolute inset-y-0 z-1 hidden w-4 -translate-x-1/2 cursor-pointer transition-all",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
+        "hover:after:bg-reki-brand/20",
+        "group-data-[side=left]/sidebar-wrapper:right-0",
+        "group-data-[side=right]/sidebar-wrapper:left-0",
+        "sm:flex",
+        t
+      ),
+      onClick: i,
+      ...a
+    }
+  );
+});
+Se.displayName = "Sidebar.Rail";
+const ye = x(({ className: t, ...a }, e) => {
+  const {
+    side: i,
+    resizable: s,
+    setIsResizing: g,
+    setWidth: c,
+    setOpen: u,
+    open: l,
+    minWidth: d,
+    width: n,
+    maxWidth: f
+  } = V(), v = B(0), m = B(0), S = B(!1);
+  if (!s) return null;
+  const k = 10, R = (p) => {
+    p.preventDefault(), g(!0), v.current = p.clientX, S.current = !l;
+    const L = p.currentTarget.closest(
+      "[data-sidebar-wrapper]"
+    )?.querySelector("[data-sidebar='sidebar']");
+    m.current = L?.getBoundingClientRect().width ?? 0;
+    const A = () => {
+      g(!1), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", N);
+    }, T = (C) => {
+      const O = i === "left" ? C.clientX - v.current : v.current - C.clientX, M = m.current + O;
+      if (S.current) {
+        M >= d && (S.current = !1, u(!0), c(M));
+        return;
+      }
+      if (M < d) {
+        u(!1), S.current = !0;
+        return;
+      }
+      c(M);
+    }, N = () => {
+      A();
+    };
+    document.addEventListener("pointermove", T), document.addEventListener("pointerup", N);
+  }, h = (p) => {
+    const y = i === "left" ? "ArrowRight" : "ArrowLeft", L = i === "left" ? "ArrowLeft" : "ArrowRight";
+    if (p.key === y)
+      p.preventDefault(), l ? c(Math.min(n + k, f)) : (u(!0), c(d));
+    else if (p.key === L) {
+      p.preventDefault();
+      const A = n - k;
+      A < d ? u(!1) : c(A);
+    } else p.key === "Home" ? (p.preventDefault(), u(!1)) : p.key === "End" && (p.preventDefault(), u(!0), c(f));
+  };
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "aria-label": "Resize sidebar",
+      tabIndex: 0,
+      "data-sidebar": "resize-handle",
+      className: o(
+        // Hit area inside the sidebar edge; thin visual line pinned to the edge via ::after
+        "absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block",
+        "after:absolute after:inset-y-0 after:w-0.5",
+        "after:bg-transparent after:transition-colors",
+        "hover:after:bg-reki-hairline active:after:bg-reki-hairline focus-visible:after:bg-reki-hairline",
+        "focus:outline-none",
+        i === "left" && "right-0 after:right-0",
+        i === "right" && "left-0 after:left-0",
+        t
+      ),
+      onPointerDown: R,
+      onKeyDown: h,
+      ...a
+    }
+  );
+});
+ye.displayName = "Sidebar.ResizeHandle";
+const G = $({
+  contentId: "",
+  isOpen: !0,
+  isCollapsible: !1,
+  autoScrollOnOpen: !1,
+  toggle: () => {
+  }
+}), ke = x(
+  ({
+    defaultOpen: t = !1,
+    open: a,
+    onOpenChange: e,
+    autoScrollOnOpen: i = !1,
+    className: s,
+    children: g,
+    ...c
+  }, u) => {
+    const [l, d] = P(t), n = a ?? l, f = De(), v = B(!1), m = w(() => {
+      const h = !n;
+      d(h), e?.(h), v.current = !1;
+    }, [n, e]), S = Z(
+      () => ({
+        contentId: f,
+        isOpen: n,
+        isCollapsible: !0,
+        autoScrollOnOpen: i,
+        toggle: m
+      }),
+      [f, n, i, m]
+    ), k = w(
+      (h) => {
+        !n && h.target.matches(":focus-visible") && (v.current = !0, d(!0), e?.(!0));
+      },
+      [n, e]
+    ), R = w(
+      (h) => {
+        v.current && !h.currentTarget.contains(h.relatedTarget) && !h.currentTarget.querySelector("[data-active]") && (v.current = !1, d(!1), e?.(!1));
+      },
+      [e]
+    );
+    return /* @__PURE__ */ r(G.Provider, { value: S, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: u,
+        "data-open": n || void 0,
+        className: o("min-w-0", s),
+        onFocus: k,
+        onBlur: R,
+        ...c,
+        children: g
+      }
+    ) });
+  }
+);
+ke.displayName = "Sidebar.Collapsible";
+function Ne({ render: t }) {
+  const { contentId: a, isOpen: e, toggle: i } = z(G);
+  return _.cloneElement(t, {
+    "aria-expanded": e,
+    "aria-controls": a,
+    "data-open": e || void 0,
+    onClick: (s) => {
+      const g = t.props.onClick;
+      g?.(s), i();
+    }
+  });
+}
+Ne.displayName = "Sidebar.CollapsibleTrigger";
+const Ce = x(({ className: t, children: a, ...e }, i) => {
+  const { contentId: s, isOpen: g } = z(
+    G
+  ), { state: c, animationDuration: u } = V(), { autoScrollOnOpen: l } = z(G), d = B(null), n = g && c !== "collapsed";
+  q(() => {
+    if (!n || !l) return;
+    const m = window.setTimeout(() => {
+      const S = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      d.current?.scrollIntoView({
+        block: "nearest",
+        behavior: S ? "auto" : "smooth"
+      });
+    }, u);
+    return () => window.clearTimeout(m);
+  }, [n, l, u]);
+  const f = w(
+    (m) => {
+      m && (n ? m.removeAttribute("inert") : m.setAttribute("inert", ""));
+    },
+    [n]
+  ), v = w(
+    (m) => {
+      d.current = m, f(m), typeof i == "function" ? i(m) : i && (i.current = m);
+    },
+    [i, f]
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: v,
+      id: s,
+      role: "region",
+      "aria-hidden": !n,
+      className: o(
+        "grid",
+        "transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+        "motion-reduce:transition-none",
+        n ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        t
+      ),
+      ...e,
+      children: /* @__PURE__ */ r("div", { className: "overflow-hidden", children: a })
+    }
+  );
+});
+Ce.displayName = "Sidebar.CollapsibleContent";
+function Me({ className: t }) {
+  const { isOpen: a, isCollapsible: e } = z(G);
+  return /* @__PURE__ */ r(
+    Be,
+    {
+      size: 12,
+      weight: "bold",
+      className: o(
+        "ml-auto shrink-0 opacity-40 group-hover/menu-button:opacity-100 transition-[transform,rotate,opacity] duration-200",
+        e && a && "rotate-90",
+        // Hidden when sidebar is collapsed
+        "group-data-[state=collapsed]/sidebar:hidden",
+        t
+      )
+    }
+  );
+}
+Me.displayName = "Sidebar.MenuChevron";
+const Ie = $(""), Re = x(
+  ({
+    activeKey: t,
+    direction: a = "left",
+    className: e,
+    children: i,
+    ...s
+  }, g) => {
+    const u = _.Children.toArray(i).findIndex(
+      (n) => _.isValidElement(n) && n.props.value === t
+    ), l = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, d = u > 0 ? `-${u * 100}%` : "0%";
+    return /* @__PURE__ */ r(Ie.Provider, { value: t, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: g,
+        "data-sidebar": "sliding-views",
+        className: o(
+          "flex flex-1 min-h-0 max-w-(--sidebar-width) overflow-hidden",
+          e
+        ),
+        ...s,
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex min-h-0 w-full shrink-0",
+            style: {
+              transform: `translateX(${d})`,
+              transition: l ? "none" : "transform var(--sidebar-animation-duration) var(--sidebar-easing)"
+            },
+            children: i
+          }
+        )
+      }
+    ) });
+  }
+);
+Re.displayName = "Sidebar.SlidingViews";
+const Ae = x(
+  ({ value: t, className: a, children: e, ...i }, s) => {
+    const c = z(Ie) === t, u = w(
+      (d) => {
+        d && (c ? d.removeAttribute("inert") : d.setAttribute("inert", ""));
+      },
+      [c]
+    ), l = w(
+      (d) => {
+        u(d), typeof s == "function" ? s(d) : s && (s.current = d);
+      },
+      [s, u]
+    );
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: l,
+        "data-sidebar": "sliding-view",
+        "data-value": t,
+        "aria-hidden": !c,
+        className: o(
+          "flex w-full shrink-0 flex-col min-h-0",
+          !c && "pointer-events-none",
+          a
+        ),
+        ...i,
+        children: e
+      }
+    );
+  }
+);
+Ae.displayName = "Sidebar.SlidingView";
+const dt = Object.assign(ie, {
+  Provider: ae,
+  Header: re,
+  Content: ne,
+  Footer: se,
+  Group: oe,
+  GroupLabel: de,
+  Menu: ue,
+  MenuItem: be,
+  MenuButton: pe,
+  MenuBadge: fe,
+  MenuSub: me,
+  MenuSubItem: ge,
+  MenuSubButton: he,
+  Separator: ve,
+  Trigger: we,
+  Rail: Se,
+  ResizeHandle: ye,
+  MenuChevron: Me,
+  Collapsible: ke,
+  CollapsibleTrigger: Ne,
+  CollapsibleContent: Ce,
+  SlidingViews: Re,
+  SlidingView: Ae
+});
+export {
+  V as A,
+  J as R,
+  dt as S,
+  ot as a,
+  st as b,
+  ke as c,
+  Ce as d,
+  Ne as e,
+  ne as f,
+  se as g,
+  oe as h,
+  de as i,
+  re as j,
+  ue as k,
+  fe as l,
+  pe as m,
+  Me as n,
+  be as o,
+  me as p,
+  he as q,
+  ge as r,
+  ae as s,
+  Se as t,
+  ye as u,
+  ie as v,
+  ve as w,
+  Ae as x,
+  Re as y,
+  we as z
+};
+//# sourceMappingURL=sidebar-noz668nhdu2gso12.js.map