@cloudflare/kumo 2.4.1 → 2.5.1

package/dist/chunks/sidebar-nbdw4rgvuabxp5nj.js

@@ -0,0 +1,1144 @@
+"use client";
+import { jsx as n, jsxs as H, Fragment as Le } from "react/jsx-runtime";
+import _, { forwardRef as x, useState as P, useCallback as w, useMemo as Z, createContext as U, useRef as B, useEffect as $, useContext as z, useId as De } 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-mn2voeohon7cj9o4.js";
+import { a as ze, T as Oe } from "./tooltip-ken77ixya0qpidie.js";
+import { bz as Fe, bA as Pe, bB as Ve, bC as We, bD as He } from "./vendor-base-ui-knphx7dts1vm1x37.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
+  }
+}, Ke = "16.25rem", Xe = "57px", Ge = "cubic-bezier(0.77, 0, 0.175, 1)", Ue = 250, $e = 768, qe = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function je(t = $e) {
+  const [a, e] = P(() => typeof window > "u" ? !1 : window.matchMedia(`(max-width: ${t - 1}px)`).matches);
+  return $(() => {
+    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 = U(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: r,
+  contained: p = !1,
+  peekable: v = !1,
+  animationDuration: f = Ue,
+  mobileBreakpoint: S,
+  children: k,
+  className: A,
+  style: h
+}) {
+  const m = je(S), [y, L] = P(!1), [R, T] = P(u), [N, M] = P(!1), [O, C] = P(!1), F = m && a !== void 0 ? a : y, K = w(
+    (E) => {
+      L(E), m && a !== void 0 && e?.(E);
+    },
+    [m, a, e]
+  ), Q = w(
+    (E) => {
+      const X = Math.min(d, Math.max(l, E));
+      T(X), r?.(X);
+    },
+    [l, d, r]
+  ), [q, j] = P(t), b = a ?? q, D = w(
+    (E) => {
+      const X = typeof E == "function" ? E(b) : E;
+      e?.(X), j(X);
+    },
+    [e, b]
+  ), W = w(() => {
+    m ? K(!F) : (C(!1), D((E) => !E));
+  }, [m, F, K, D]), I = w(() => {
+    v && !b && !m && C(!0);
+  }, [v, b, m]), Ee = w(() => {
+    C(!1);
+  }, []), Y = O ? "peeking" : b ? "expanded" : "collapsed", Te = c ? `${R}px` : Ke, _e = Z(
+    () => ({
+      state: Y,
+      open: b,
+      setOpen: D,
+      openMobile: F,
+      setOpenMobile: K,
+      isMobile: m,
+      toggleSidebar: W,
+      variant: i,
+      side: s,
+      collapsible: g,
+      width: R,
+      resizable: c,
+      minWidth: l,
+      maxWidth: d,
+      isResizing: N,
+      setIsResizing: M,
+      setWidth: Q,
+      isPeeking: O,
+      peekable: v,
+      startPeek: I,
+      stopPeek: Ee,
+      contained: p,
+      animationDuration: f
+    }),
+    [Y, b, F, m, R, N, O]
+  );
+  return /* @__PURE__ */ n(te.Provider, { value: _e, children: /* @__PURE__ */ n(
+    "div",
+    {
+      "data-sidebar-wrapper": "",
+      "data-state": Y,
+      "data-side": s,
+      style: {
+        "--sidebar-width": Te,
+        "--sidebar-width-icon": Xe,
+        "--sidebar-animation-duration": `${f}ms`,
+        "--sidebar-easing": Ge,
+        ...h
+      },
+      className: o(
+        "group/sidebar-wrapper relative isolate flex w-full [--sidebar-bg:var(--color-kumo-base)] [--sidebar-active-bg:var(--color-kumo-tint)]",
+        !p && !m && "min-h-svh",
+        "has-data-[variant=inset]:bg-kumo-recessed",
+        N && "select-none",
+        A
+      ),
+      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: r,
+      variant: p,
+      collapsible: v,
+      isResizing: f,
+      resizable: S,
+      width: k,
+      isPeeking: A,
+      startPeek: h,
+      stopPeek: m,
+      contained: y
+    } = V(), L = w(
+      (b) => {
+        b && (l ? b.removeAttribute("inert") : b.setAttribute("inert", ""));
+      },
+      [l]
+    ), R = w(
+      (b) => {
+        L(b), typeof s == "function" ? s(b) : s && (s.current = b);
+      },
+      [s, L]
+    ), T = B(null), N = B(null), M = B(!1);
+    $(() => {
+      if (!u || !l) return;
+      const b = N.current, D = (I) => {
+        I.key === "Escape" && (M.current = !0, d(!1));
+      }, W = (I) => {
+        b && !b.contains(I.relatedTarget) && (M.current = !1, d(!1));
+      };
+      return document.addEventListener("keydown", D), b?.addEventListener("focusout", W), () => {
+        document.removeEventListener("keydown", D), b?.removeEventListener("focusout", W);
+      };
+    }, [u, l, d]), $(() => {
+      u && (l ? (T.current = document.activeElement, M.current = !1, requestAnimationFrame(() => {
+        (N.current?.querySelector(
+          qe
+        ) ?? N.current)?.focus();
+      })) : M.current && T.current instanceof HTMLElement && (T.current.focus(), M.current = !1, T.current = null));
+    }, [u, l]);
+    const O = w(
+      (b) => {
+        b.currentTarget.contains(b.relatedTarget) || m();
+      },
+      [m]
+    );
+    if (v === "none")
+      return /* @__PURE__ */ n(
+        "aside",
+        {
+          ref: s,
+          "data-state": "expanded",
+          "data-side": r,
+          "data-variant": p,
+          "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-kumo-default",
+            p === "sidebar" && (r === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line"),
+            p === "floating" && "m-2 rounded-lg border border-kumo-line shadow-lg",
+            t
+          ),
+          ...i,
+          children: e
+        }
+      );
+    if (u)
+      return /* @__PURE__ */ H(Le, { children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            "data-sidebar-backdrop": "",
+            className: o(
+              y ? "absolute inset-0 z-40 bg-kumo-recessed" : "fixed inset-0 z-40 bg-kumo-recessed",
+              "transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              "motion-reduce:transition-none",
+              l ? "opacity-80" : "opacity-0 pointer-events-none"
+            ),
+            onClick: () => {
+              M.current = !0, d(!1);
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "nav",
+          {
+            ref: (b) => {
+              R(b), N.current = b;
+            },
+            tabIndex: -1,
+            "aria-label": "Navigation",
+            "aria-hidden": !l,
+            "data-state": l ? "expanded" : "collapsed",
+            "data-side": r,
+            "data-variant": p,
+            "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-kumo-line bg-(--sidebar-bg) text-kumo-default",
+              "transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              "motion-reduce:transition-none",
+              r === "left" && "left-0",
+              r === "right" && "right-0",
+              r === "left" && (l ? "translate-x-0" : "-translate-x-full"),
+              r === "right" && (l ? "translate-x-0" : "translate-x-full"),
+              t
+            ),
+            ...i,
+            children: e
+          }
+        )
+      ] });
+    const C = v === "icon" ? "var(--sidebar-width-icon)" : "0px", F = S ? `${k}px` : "var(--sidebar-width)", K = c ? F : C, q = c || A ? F : C, j = p === "sidebar" ? r === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line" : p === "floating" ? "border border-kumo-line" : "";
+    return /* @__PURE__ */ n(
+      "aside",
+      {
+        ref: s,
+        "data-state": g,
+        "data-side": r,
+        "data-variant": p,
+        "data-collapsible": v,
+        "data-sidebar": "sidebar",
+        style: { width: K },
+        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",
+          f && "transition-none!",
+          p === "floating" && "m-2 rounded-lg shadow-lg",
+          t
+        ),
+        ...i,
+        children: /* @__PURE__ */ n(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: q },
+              className: o(
+                "flex h-full flex-col",
+                "min-w-0 overflow-hidden whitespace-nowrap",
+                "bg-(--sidebar-bg) text-kumo-default",
+                j,
+                "transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+                "motion-reduce:transition-none",
+                f && "transition-none!",
+                !c && o(
+                  y ? "absolute" : "fixed",
+                  "inset-y-0 z-40",
+                  r === "left" && "left-0",
+                  r === "right" && "right-0"
+                ),
+                c && "relative",
+                a
+              ),
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    "data-sidebar": "peek-zone",
+                    className: "flex flex-1 flex-col min-h-0",
+                    onMouseEnter: h,
+                    onMouseLeave: m,
+                    onFocus: h,
+                    onBlur: O,
+                    children: W
+                  }
+                ),
+                D
+              ]
+            }
+          );
+        })() })
+      }
+    );
+  }
+);
+ie.displayName = "Sidebar";
+const ne = x(({ className: t, ...a }, e) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "header",
+    className: o(
+      "flex h-[58px] shrink-0 items-center gap-1 border-b border-kumo-line",
+      "px-3 overflow-hidden",
+      t
+    ),
+    ...a
+  }
+));
+ne.displayName = "Sidebar.Header";
+const re = 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__ */ n(
+        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)",
+            "group-data-[state=collapsed]/sidebar: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__ */ n(Ve, { className: "flex min-w-0! flex-col", children: a })
+        }
+      ),
+      /* @__PURE__ */ n(
+        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__ */ n(He, { className: "flex-1 rounded-full bg-kumo-line" })
+        }
+      )
+    ]
+  }
+));
+re.displayName = "Sidebar.Content";
+const se = x(({ className: t, ...a }, e) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "footer",
+    className: o(
+      "flex h-12 shrink-0 items-center gap-4 overflow-hidden whitespace-nowrap border-t border-kumo-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-kumo-line",
+      t
+    ),
+    ...a
+  }
+));
+se.displayName = "Sidebar.Footer";
+const oe = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ n(
+  "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__ */ n(
+  "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-kumo-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__ */ n("div", { className: "min-h-0 min-w-0", children: /* @__PURE__ */ n(
+      "div",
+      {
+        className: o(
+          "truncate px-3 mt-6 mb-2 text-sm font-medium text-kumo-subtle",
+          // First group: less top margin
+          "[[data-sidebar=group]:first-child_&]:mt-2"
+        ),
+        children: a
+      }
+    ) })
+  }
+));
+de.displayName = "Sidebar.GroupLabel";
+const le = U(!1), ce = U(!1), ue = x(({ className: t, ...a }, e) => /* @__PURE__ */ n(
+  "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__ */ n(le.Provider, { value: !0, children: /* @__PURE__ */ n(
+  "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 me = x(
+  ({
+    className: t,
+    icon: a,
+    active: e = !1,
+    size: i = "base",
+    href: s,
+    target: g,
+    tooltip: c,
+    children: u,
+    ...l
+  }, d) => {
+    const { state: r, peekable: p } = V(), v = ee(), f = z(le), S = a ? _.isValidElement(a) ? a : /* @__PURE__ */ n(
+      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__ */ n(
+            "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__ */ n("span", { className: "truncate", children: y }) : y
+              )
+            }
+          )
+        ]
+      }
+    ), A = 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-kumo-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-kumo-strong focus-visible:bg-(--sidebar-active-bg)",
+      t
+    );
+    let h;
+    return s ? h = /* @__PURE__ */ n(
+      v,
+      {
+        ref: d,
+        className: o(A, "no-underline!"),
+        href: s,
+        to: s,
+        target: g,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-kumo-component": "Sidebar",
+        "data-kumo-part": "menu-button-link",
+        "data-size": i,
+        onClick: l.onClick,
+        children: k
+      }
+    ) : h = /* @__PURE__ */ n(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        className: A,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-kumo-component": "Sidebar",
+        "data-kumo-part": "menu-button",
+        "data-size": i,
+        ...l,
+        children: k
+      }
+    ), c && (h = /* @__PURE__ */ n(
+      Oe,
+      {
+        content: r === "collapsed" && !p ? c : null,
+        side: "right",
+        render: h
+      }
+    )), f ? h : /* @__PURE__ */ n(
+      "li",
+      {
+        "data-sidebar": "menu-item",
+        className: "relative group-data-[state=collapsed]/sidebar:overflow-hidden",
+        children: h
+      }
+    );
+  }
+);
+me.displayName = "Sidebar.MenuButton";
+const pe = x(({ className: t, ...a }, e) => /* @__PURE__ */ n(
+  "span",
+  {
+    ref: e,
+    "data-sidebar": "menu-badge",
+    className: o(
+      "inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-line",
+      "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-strong",
+      // Hidden when collapsed
+      "group-data-[state=collapsed]/sidebar:hidden",
+      t
+    ),
+    ...a
+  }
+));
+pe.displayName = "Sidebar.MenuBadge";
+const fe = 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__ */ n("div", { className: "absolute left-[19px] inset-y-px w-px bg-kumo-line z-10" }),
+      a
+    ]
+  }
+));
+fe.displayName = "Sidebar.MenuSub";
+const ge = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ n(ce.Provider, { value: !0, children: /* @__PURE__ */ n(
+  "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-kumo-default transition-[color] duration-150",
+    !a && "hover:bg-(--sidebar-active-bg)",
+    a && "bg-(--sidebar-active-bg)",
+    "focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-(--sidebar-active-bg)",
+    t
+  ), d = /* @__PURE__ */ n("span", { className: "flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden", children: _.Children.map(
+    i,
+    (p) => typeof p == "string" || typeof p == "number" ? /* @__PURE__ */ n("span", { className: "truncate", children: p }) : p
+  ) });
+  let r;
+  return e ? r = /* @__PURE__ */ n(
+    c,
+    {
+      ref: g,
+      className: o(l, "no-underline!"),
+      href: e,
+      to: e,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "menu-sub-button-link",
+      onClick: s.onClick,
+      children: d
+    }
+  ) : r = /* @__PURE__ */ n(
+    "button",
+    {
+      ref: g,
+      type: "button",
+      className: l,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "menu-sub-button",
+      ...s,
+      children: d
+    }
+  ), u ? r : /* @__PURE__ */ n("li", { "data-sidebar": "menu-sub-item", className: "relative", children: r });
+});
+he.displayName = "Sidebar.MenuSubButton";
+const ve = x(({ className: t, ...a }, e) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "separator",
+    className: o("my-3 px-2", t),
+    ...a,
+    children: /* @__PURE__ */ n("div", { className: "border-b border-kumo-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__ */ n("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__ */ n(
+          "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__ */ n(
+    "button",
+    {
+      ref: s,
+      type: "button",
+      "data-sidebar": "trigger",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-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-kumo-subtle hover:text-kumo-default hover:bg-(--sidebar-active-bg)",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand",
+        t
+      ),
+      onClick: (u) => {
+        e?.(u), c();
+      },
+      ...i,
+      children: a ?? /* @__PURE__ */ n(xe, {})
+    }
+  );
+});
+we.displayName = "Sidebar.Trigger";
+const Se = x(({ className: t, ...a }, e) => {
+  const { toggleSidebar: i } = V();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "data-sidebar": "rail",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-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-kumo-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: r,
+    maxWidth: p
+  } = V(), v = B(0), f = B(0), S = B(!1);
+  if (!s) return null;
+  const k = 10, A = (m) => {
+    m.preventDefault(), g(!0), v.current = m.clientX, S.current = !l;
+    const L = m.currentTarget.closest(
+      "[data-sidebar-wrapper]"
+    )?.querySelector("[data-sidebar='sidebar']");
+    f.current = L?.getBoundingClientRect().width ?? 0;
+    const R = () => {
+      g(!1), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", N);
+    }, T = (M) => {
+      const O = i === "left" ? M.clientX - v.current : v.current - M.clientX, C = f.current + O;
+      if (S.current) {
+        C >= d && (S.current = !1, u(!0), c(C));
+        return;
+      }
+      if (C < d) {
+        u(!1), S.current = !0;
+        return;
+      }
+      c(C);
+    }, N = () => {
+      R();
+    };
+    document.addEventListener("pointermove", T), document.addEventListener("pointerup", N);
+  }, h = (m) => {
+    const y = i === "left" ? "ArrowRight" : "ArrowLeft", L = i === "left" ? "ArrowLeft" : "ArrowRight";
+    if (m.key === y)
+      m.preventDefault(), l ? c(Math.min(r + k, p)) : (u(!0), c(d));
+    else if (m.key === L) {
+      m.preventDefault();
+      const R = r - k;
+      R < d ? u(!1) : c(R);
+    } else m.key === "Home" ? (m.preventDefault(), u(!1)) : m.key === "End" && (m.preventDefault(), u(!0), c(p));
+  };
+  return /* @__PURE__ */ n(
+    "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-kumo-hairline active:after:bg-kumo-hairline focus-visible:after:bg-kumo-hairline",
+        "focus:outline-none",
+        i === "left" && "right-0 after:right-0",
+        i === "right" && "left-0 after:left-0",
+        t
+      ),
+      onPointerDown: A,
+      onKeyDown: h,
+      ...a
+    }
+  );
+});
+ye.displayName = "Sidebar.ResizeHandle";
+const G = U({
+  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), r = a ?? l, p = De(), v = B(!1), f = w(() => {
+      const h = !r;
+      d(h), e?.(h), v.current = !1;
+    }, [r, e]), S = Z(
+      () => ({
+        contentId: p,
+        isOpen: r,
+        isCollapsible: !0,
+        autoScrollOnOpen: i,
+        toggle: f
+      }),
+      [p, r, i, f]
+    ), k = w(
+      (h) => {
+        !r && h.target.matches(":focus-visible") && (v.current = !0, d(!0), e?.(!0));
+      },
+      [r, e]
+    ), A = w(
+      (h) => {
+        v.current && !h.currentTarget.contains(h.relatedTarget) && !h.currentTarget.querySelector("[data-active]") && (v.current = !1, d(!1), e?.(!1));
+      },
+      [e]
+    );
+    return /* @__PURE__ */ n(G.Provider, { value: S, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: u,
+        "data-open": r || void 0,
+        className: o("min-w-0", s),
+        onFocus: k,
+        onBlur: A,
+        ...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 Me = 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), r = g && c !== "collapsed";
+  $(() => {
+    if (!r || !l) return;
+    const f = window.setTimeout(() => {
+      const S = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      d.current?.scrollIntoView({
+        block: "nearest",
+        behavior: S ? "auto" : "smooth"
+      });
+    }, u);
+    return () => window.clearTimeout(f);
+  }, [r, l, u]);
+  const p = w(
+    (f) => {
+      f && (r ? f.removeAttribute("inert") : f.setAttribute("inert", ""));
+    },
+    [r]
+  ), v = w(
+    (f) => {
+      d.current = f, p(f), typeof i == "function" ? i(f) : i && (i.current = f);
+    },
+    [i, p]
+  );
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: v,
+      id: s,
+      role: "region",
+      "aria-hidden": !r,
+      className: o(
+        "grid",
+        "transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+        "motion-reduce:transition-none",
+        r ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        t
+      ),
+      ...e,
+      children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: a })
+    }
+  );
+});
+Me.displayName = "Sidebar.CollapsibleContent";
+function Ce({ className: t }) {
+  const { isOpen: a, isCollapsible: e } = z(G);
+  return /* @__PURE__ */ n(
+    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
+      )
+    }
+  );
+}
+Ce.displayName = "Sidebar.MenuChevron";
+const Ie = U(""), Ae = x(
+  ({
+    activeKey: t,
+    direction: a = "left",
+    className: e,
+    children: i,
+    ...s
+  }, g) => {
+    const u = _.Children.toArray(i).findIndex(
+      (r) => _.isValidElement(r) && r.props.value === t
+    ), l = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, d = u > 0 ? `-${u * 100}%` : "0%";
+    return /* @__PURE__ */ n(Ie.Provider, { value: t, children: /* @__PURE__ */ n(
+      "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__ */ n(
+          "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
+          }
+        )
+      }
+    ) });
+  }
+);
+Ae.displayName = "Sidebar.SlidingViews";
+const Re = 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__ */ n(
+      "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
+      }
+    );
+  }
+);
+Re.displayName = "Sidebar.SlidingView";
+const dt = Object.assign(ie, {
+  Provider: ae,
+  Header: ne,
+  Content: re,
+  Footer: se,
+  Group: oe,
+  GroupLabel: de,
+  Menu: ue,
+  MenuItem: be,
+  MenuButton: me,
+  MenuBadge: pe,
+  MenuSub: fe,
+  MenuSubItem: ge,
+  MenuSubButton: he,
+  Separator: ve,
+  Trigger: we,
+  Rail: Se,
+  ResizeHandle: ye,
+  MenuChevron: Ce,
+  Collapsible: ke,
+  CollapsibleTrigger: Ne,
+  CollapsibleContent: Me,
+  SlidingViews: Ae,
+  SlidingView: Re
+});
+export {
+  ot as A,
+  st as K,
+  dt as S,
+  ae as a,
+  ie as b,
+  ne as c,
+  re as d,
+  se as e,
+  oe as f,
+  de as g,
+  ue as h,
+  be as i,
+  me as j,
+  pe as k,
+  fe as l,
+  ge as m,
+  he as n,
+  ve as o,
+  we as p,
+  Se as q,
+  ye as r,
+  Ce as s,
+  ke as t,
+  Ne as u,
+  Me as v,
+  Ae as w,
+  Re as x,
+  V as y,
+  J as z
+};
+//# sourceMappingURL=sidebar-nbdw4rgvuabxp5nj.js.map