@cloudflare/kumo 2.2.2 → 2.4.0

package/dist/chunks/sidebar-hzio700cg85f7f31.js

@@ -0,0 +1,1014 @@
+"use client";
+import { jsx as i, jsxs as B } from "react/jsx-runtime";
+import D, { forwardRef as p, useState as E, useCallback as I, useMemo as $, createContext as V, useContext as P, useRef as W, useId as _e, useEffect as Te } from "react";
+import { CaretRightIcon as Ee } from "@phosphor-icons/react";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+import { u as j } from "./link-provider-mn2voeohon7cj9o4.js";
+import { a as De, T as Pe } from "./tooltip-ken77ixya0qpidie.js";
+import { ar as Be, ax as ze, ay as Le, az as Oe, bz as Ve, bA as We, bB as Fe, bC as He, bD as Xe } from "./vendor-base-ui-knphx7dts1vm1x37.js";
+const ra = {
+  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"
+    }
+  }
+}, U = {
+  variant: "sidebar",
+  collapsible: "icon",
+  side: "left"
+}, sa = {
+  width: {
+    expanded: "16.25rem",
+    icon: "57px"
+  },
+  mobile: {
+    breakpoint: 768
+  }
+}, q = "16.25rem", Ke = "57px", Ge = "cubic-bezier(0.77, 0, 0.175, 1)", Ue = 250, $e = 768;
+function je() {
+  const [a, t] = E(!1);
+  return Te(() => {
+    const e = window.matchMedia(`(max-width: ${$e - 1}px)`), n = () => t(e.matches);
+    return e.addEventListener("change", n), t(e.matches), () => e.removeEventListener("change", n);
+  }, []), a;
+}
+const Y = V(null);
+function z() {
+  const a = P(Y);
+  if (!a)
+    throw new Error("useSidebar must be used within a Sidebar.Provider");
+  return a;
+}
+const qe = 256, Ye = 200, Je = 480;
+function J({
+  defaultOpen: a = !0,
+  open: t,
+  onOpenChange: e,
+  variant: n = U.variant,
+  side: l = U.side,
+  collapsible: o = U.collapsible,
+  resizable: c = !1,
+  defaultWidth: u = qe,
+  minWidth: m = Ye,
+  maxWidth: s = Je,
+  onWidthChange: d,
+  contained: g = !1,
+  peekable: h = !1,
+  animationDuration: k = Ue,
+  children: x,
+  className: y,
+  style: b
+}) {
+  const v = je(), [f, _] = E(!1), [N, C] = E(u), [A, L] = E(!1), [R, T] = E(!1), S = I(
+    (M) => {
+      const O = Math.min(s, Math.max(m, M));
+      C(O), d?.(O);
+    },
+    [m, s, d]
+  ), [H, X] = E(a), w = t ?? H, K = I(
+    (M) => {
+      const O = typeof M == "function" ? M(w) : M;
+      e?.(O), X(O);
+    },
+    [e, w]
+  ), Ce = I(() => {
+    v ? _((M) => !M) : (T(!1), K((M) => !M));
+  }, [v, K]), Me = I(() => {
+    h && !w && !v && T(!0);
+  }, [h, w, v]), Ie = I(() => {
+    T(!1);
+  }, []), G = R ? "peeking" : w ? "expanded" : "collapsed", Ae = c ? `${N}px` : q, Re = $(() => ({
+    state: G,
+    open: w,
+    setOpen: K,
+    openMobile: f,
+    setOpenMobile: _,
+    isMobile: v,
+    toggleSidebar: Ce,
+    variant: n,
+    side: l,
+    collapsible: o,
+    width: N,
+    resizable: c,
+    minWidth: m,
+    maxWidth: s,
+    isResizing: A,
+    setIsResizing: L,
+    setWidth: S,
+    isPeeking: R,
+    peekable: h,
+    startPeek: Me,
+    stopPeek: Ie,
+    contained: g,
+    animationDuration: k
+  }), [G, w, f, v, N, A, R]);
+  return /* @__PURE__ */ i(Y.Provider, { value: Re, children: /* @__PURE__ */ i(
+    "div",
+    {
+      "data-sidebar-wrapper": "",
+      "data-state": G,
+      "data-side": l,
+      style: {
+        "--sidebar-width": Ae,
+        "--sidebar-width-icon": Ke,
+        "--sidebar-animation-duration": `${k}ms`,
+        "--sidebar-easing": Ge,
+        "--sidebar-bg": "var(--color-kumo-base)",
+        ...b
+      },
+      className: r(
+        "group/sidebar-wrapper isolate flex w-full",
+        !g && "min-h-svh",
+        "has-data-[variant=inset]:bg-kumo-recessed",
+        A && "select-none",
+        y
+      ),
+      children: x
+    }
+  ) });
+}
+J.displayName = "Sidebar.Provider";
+const Q = p(
+  ({ className: a, children: t, ...e }, n) => {
+    const {
+      state: l,
+      open: o,
+      isMobile: c,
+      openMobile: u,
+      setOpenMobile: m,
+      side: s,
+      variant: d,
+      collapsible: g,
+      isResizing: h,
+      resizable: k,
+      width: x,
+      isPeeking: y,
+      startPeek: b,
+      stopPeek: v,
+      contained: f
+    } = z();
+    if (g === "none")
+      return /* @__PURE__ */ i(
+        "aside",
+        {
+          ref: n,
+          "data-state": "expanded",
+          "data-side": s,
+          "data-variant": d,
+          "data-sidebar": "sidebar",
+          style: {
+            width: "var(--sidebar-width)",
+            minWidth: "var(--sidebar-width)",
+            maxWidth: "var(--sidebar-width)"
+          },
+          className: r(
+            "relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-(--sidebar-bg) text-kumo-default",
+            d === "sidebar" && (s === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line"),
+            d === "floating" && "m-2 rounded-lg border border-kumo-line shadow-lg",
+            a
+          ),
+          ...e,
+          children: t
+        }
+      );
+    if (c)
+      return /* @__PURE__ */ i(Be, { open: u, onOpenChange: m, children: /* @__PURE__ */ B(ze, { children: [
+        /* @__PURE__ */ i(Le, { "data-sidebar-backdrop": "", className: "fixed inset-0 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" }),
+        /* @__PURE__ */ i(
+          Oe,
+          {
+            "data-sidebar-popup": "",
+            className: r(
+              "fixed inset-y-0 flex w-[--sidebar-width] flex-col bg-kumo-base p-0",
+              "duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+              s === "left" && "left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
+              s === "right" && "right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full"
+            ),
+            style: {
+              "--sidebar-width": q,
+              transitionProperty: "transform, opacity",
+              transitionTimingFunction: "var(--default-transition-timing-function)"
+            },
+            children: /* @__PURE__ */ i(
+              "div",
+              {
+                "data-state": "expanded",
+                "data-side": s,
+                "data-variant": d,
+                "data-collapsible": g,
+                "data-sidebar": "sidebar",
+                "data-mobile": "true",
+                className: r(
+                  "group/sidebar flex h-full w-full flex-col bg-kumo-base text-kumo-default",
+                  a
+                ),
+                children: t
+              }
+            )
+          }
+        )
+      ] }) });
+    const _ = I(
+      (S) => {
+        S.currentTarget.contains(S.relatedTarget) || v();
+      },
+      [v]
+    ), N = g === "icon" ? "var(--sidebar-width-icon)" : "0px", C = k ? `${x}px` : "var(--sidebar-width)", A = o ? C : N, R = o || y ? C : N, T = d === "sidebar" ? s === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line" : d === "floating" ? "border border-kumo-line" : "";
+    return /* @__PURE__ */ i(
+      "aside",
+      {
+        ref: n,
+        "data-state": l,
+        "data-side": s,
+        "data-variant": d,
+        "data-collapsible": g,
+        "data-sidebar": "sidebar",
+        style: { width: A },
+        className: r(
+          "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",
+          h && "transition-none!",
+          d === "floating" && "m-2 rounded-lg shadow-lg",
+          a
+        ),
+        ...e,
+        children: /* @__PURE__ */ i(De, { children: (() => {
+          const S = D.Children.toArray(t), H = S.filter(
+            (w) => D.isValidElement(w) && w.type?.displayName === "Sidebar.Footer"
+          ), X = S.filter(
+            (w) => !D.isValidElement(w) || w.type?.displayName !== "Sidebar.Footer"
+          );
+          return /* @__PURE__ */ B(
+            "div",
+            {
+              "data-sidebar": "content-container",
+              style: { width: R },
+              className: r(
+                "flex h-full flex-col",
+                "min-w-0 overflow-hidden whitespace-nowrap",
+                "bg-(--sidebar-bg) text-kumo-default",
+                T,
+                "transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+                "motion-reduce:transition-none",
+                h && "transition-none!",
+                !o && r(
+                  f ? "absolute" : "fixed",
+                  "inset-y-0 z-40",
+                  s === "left" && "left-0",
+                  s === "right" && "right-0"
+                ),
+                o && "relative"
+              ),
+              children: [
+                /* @__PURE__ */ i(
+                  "div",
+                  {
+                    "data-sidebar": "peek-zone",
+                    className: "flex flex-1 flex-col min-h-0",
+                    onMouseEnter: b,
+                    onMouseLeave: v,
+                    onFocus: b,
+                    onBlur: _,
+                    children: X
+                  }
+                ),
+                H
+              ]
+            }
+          );
+        })() })
+      }
+    );
+  }
+);
+Q.displayName = "Sidebar";
+const Z = p(({ className: a, ...t }, e) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "header",
+    className: r(
+      "flex h-[58px] items-center gap-1 border-b border-kumo-line px-3.5",
+      "overflow-hidden",
+      a
+    ),
+    ...t
+  }
+));
+Z.displayName = "Sidebar.Header";
+const ee = p(({ className: a, children: t, ...e }, n) => /* @__PURE__ */ B(
+  Ve,
+  {
+    ref: n,
+    "data-sidebar": "content",
+    className: r("relative min-w-0 flex-1 overflow-hidden", a),
+    ...e,
+    children: [
+      /* @__PURE__ */ i(
+        We,
+        {
+          className: r(
+            "h-full px-[11px] py-[13px] 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__ */ i(Fe, { className: "flex min-w-0 flex-col gap-2 group-data-[state=collapsed]/sidebar:min-w-0!", children: t })
+        }
+      ),
+      /* @__PURE__ */ i(
+        He,
+        {
+          orientation: "vertical",
+          className: r(
+            "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__ */ i(
+            Xe,
+            {
+              className: "flex-1 rounded-full bg-kumo-line"
+            }
+          )
+        }
+      )
+    ]
+  }
+));
+ee.displayName = "Sidebar.Content";
+const ae = p(({ className: a, ...t }, e) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "footer",
+    className: r(
+      "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",
+      a
+    ),
+    ...t
+  }
+));
+ae.displayName = "Sidebar.Footer";
+const te = p(
+  ({ className: a, children: t, ...e }, n) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: n,
+      "data-sidebar": "group",
+      className: r("flex min-w-0 flex-col gap-y-px", a),
+      ...e,
+      children: t
+    }
+  )
+);
+te.displayName = "Sidebar.Group";
+const ie = p(({ className: a, children: t, ...e }, n) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: n,
+    "data-sidebar": "group-label",
+    className: r(
+      // Grid-rows for smooth collapse animation
+      "grid overflow-hidden",
+      "transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+      // 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",
+      a
+    ),
+    ...e,
+    children: /* @__PURE__ */ i("div", { className: "min-h-0", children: /* @__PURE__ */ i(
+      "div",
+      {
+        className: r(
+          "truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-subtle",
+          // First group: less top margin
+          "[[data-sidebar=group]:first-child_&]:mt-2"
+        ),
+        children: t
+      }
+    ) })
+  }
+));
+ie.displayName = "Sidebar.GroupLabel";
+const ne = V(!1), re = V(!1), se = p(({ className: a, ...t }, e) => /* @__PURE__ */ i(
+  "ul",
+  {
+    ref: e,
+    "data-sidebar": "menu",
+    className: r(
+      "m-0 flex min-w-0 list-none flex-col items-stretch gap-y-px p-0",
+      a
+    ),
+    ...t
+  }
+));
+se.displayName = "Sidebar.Menu";
+const oe = p(({ className: a, children: t, ...e }, n) => /* @__PURE__ */ i(ne.Provider, { value: !0, children: /* @__PURE__ */ i(
+  "li",
+  {
+    ref: n,
+    "data-sidebar": "menu-item",
+    className: r("relative group-data-[state=collapsed]/sidebar:overflow-hidden", a),
+    ...e,
+    children: t
+  }
+) }));
+oe.displayName = "Sidebar.MenuItem";
+const de = p(
+  ({
+    className: a,
+    icon: t,
+    active: e = !1,
+    size: n = "base",
+    href: l,
+    tooltip: o,
+    children: c,
+    ...u
+  }, m) => {
+    const { state: s, peekable: d } = z(), g = j(), h = P(ne), k = t ? D.isValidElement(t) ? t : /* @__PURE__ */ i(
+      t,
+      {
+        className: r("shrink-0 opacity-50", n === "base" ? "size-4" : "size-3.5")
+      }
+    ) : null, x = /* @__PURE__ */ B(
+      "div",
+      {
+        className: r(
+          "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: [
+          k,
+          /* @__PURE__ */ i(
+            "span",
+            {
+              className: r(
+                "flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden"
+              ),
+              children: c
+            }
+          )
+        ]
+      }
+    ), y = r(
+      // 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
+      n === "base" && "min-h-8.5 px-3 py-0 text-sm font-medium",
+      n === "sm" && "min-h-7 px-2 py-0 text-sm",
+      "text-kumo-default",
+      "transition-[color,background-color,box-shadow,outline] duration-(--sidebar-animation-duration)",
+      !e && "hover:bg-kumo-tint",
+      // Active state
+      e && "bg-kumo-tint",
+      // 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-kumo-tint",
+      // Focus
+      "focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-kumo-tint",
+      a
+    );
+    let b;
+    return l ? b = /* @__PURE__ */ i(
+      g,
+      {
+        ref: m,
+        className: r(y, "no-underline!"),
+        href: l,
+        to: l,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-kumo-component": "Sidebar",
+        "data-kumo-part": "menu-button-link",
+        "data-size": n,
+        onClick: u.onClick,
+        children: x
+      }
+    ) : b = /* @__PURE__ */ i(
+      "button",
+      {
+        ref: m,
+        type: "button",
+        className: y,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-kumo-component": "Sidebar",
+        "data-kumo-part": "menu-button",
+        "data-size": n,
+        ...u,
+        children: x
+      }
+    ), o && (b = /* @__PURE__ */ i(
+      Pe,
+      {
+        content: s === "collapsed" && !d ? o : null,
+        side: "right",
+        render: b
+      }
+    )), h ? b : /* @__PURE__ */ i("li", { "data-sidebar": "menu-item", className: "relative group-data-[state=collapsed]/sidebar:overflow-hidden", children: b });
+  }
+);
+de.displayName = "Sidebar.MenuButton";
+const le = p(({ className: a, ...t }, e) => /* @__PURE__ */ i(
+  "span",
+  {
+    ref: e,
+    "data-sidebar": "menu-badge",
+    className: r(
+      "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",
+      a
+    ),
+    ...t
+  }
+));
+le.displayName = "Sidebar.MenuBadge";
+const ce = p(({ className: a, children: t, ...e }, n) => /* @__PURE__ */ B(
+  "ul",
+  {
+    ref: n,
+    "data-sidebar": "menu-sub",
+    className: r(
+      "relative m-0 flex min-w-0 list-none flex-col gap-y-px p-0 pl-7 pr-0 overflow-hidden",
+      // Hidden when collapsed
+      "group-data-[state=collapsed]/sidebar:hidden",
+      a
+    ),
+    ...e,
+    children: [
+      /* @__PURE__ */ i("div", { className: "absolute left-[19px] inset-y-px w-px bg-kumo-line z-10" }),
+      t
+    ]
+  }
+));
+ce.displayName = "Sidebar.MenuSub";
+const ue = p(({ className: a, children: t, ...e }, n) => /* @__PURE__ */ i(re.Provider, { value: !0, children: /* @__PURE__ */ i(
+  "li",
+  {
+    ref: n,
+    "data-sidebar": "menu-sub-item",
+    className: r("relative", a),
+    ...e,
+    children: t
+  }
+) }));
+ue.displayName = "Sidebar.MenuSubItem";
+const be = p(({ className: a, active: t = !1, href: e, children: n, ...l }, o) => {
+  const c = j(), u = P(re), m = r(
+    "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-colors duration-150",
+    !t && "hover:bg-kumo-tint",
+    t && "bg-kumo-tint",
+    "focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-kumo-tint",
+    a
+  ), s = /* @__PURE__ */ i("span", { className: "flex flex-1 items-center gap-2 truncate text-left", children: n });
+  let d;
+  return e ? d = /* @__PURE__ */ i(
+    c,
+    {
+      ref: o,
+      className: r(m, "no-underline!"),
+      href: e,
+      to: e,
+      "data-active": t || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "menu-sub-button-link",
+      onClick: l.onClick,
+      children: s
+    }
+  ) : d = /* @__PURE__ */ i(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: m,
+      "data-active": t || void 0,
+      "data-sidebar": "menu-sub-button",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "menu-sub-button",
+      ...l,
+      children: s
+    }
+  ), u ? d : /* @__PURE__ */ i("li", { "data-sidebar": "menu-sub-item", className: "relative", children: d });
+});
+be.displayName = "Sidebar.MenuSubButton";
+const pe = p(({ className: a, ...t }, e) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "separator",
+    className: r(
+      "my-3 px-2",
+      a
+    ),
+    ...t,
+    children: /* @__PURE__ */ i("div", { className: "border-b border-kumo-line" })
+  }
+));
+pe.displayName = "Sidebar.Separator";
+function me({ className: a }) {
+  const { open: t } = z();
+  return /* @__PURE__ */ B(
+    "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: r("shrink-0", a),
+      children: [
+        /* @__PURE__ */ i("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__ */ i(
+          "path",
+          {
+            d: "M6.25 7.25v9.5",
+            className: r(
+              "transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+              t ? "translate-x-px" : "translate-x-[10.5px]"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+me.displayName = "Sidebar.PanelIcon";
+const fe = p(({ className: a, children: t, onClick: e, ...n }, l) => {
+  const { open: o, toggleSidebar: c } = z();
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      ref: l,
+      type: "button",
+      "data-sidebar": "trigger",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "trigger",
+      "aria-expanded": o,
+      "aria-label": o ? "Collapse sidebar" : "Expand sidebar",
+      className: r(
+        "flex size-8.5 justify-center items-center rounded-lg cursor-pointer",
+        "text-kumo-subtle hover:text-kumo-default hover:bg-kumo-tint",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand",
+        a
+      ),
+      onClick: (u) => {
+        e?.(u), c();
+      },
+      ...n,
+      children: t ?? /* @__PURE__ */ i(me, {})
+    }
+  );
+});
+fe.displayName = "Sidebar.Trigger";
+const ge = p(({ className: a, ...t }, e) => {
+  const { toggleSidebar: n } = z();
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "data-sidebar": "rail",
+      "data-kumo-component": "Sidebar",
+      "data-kumo-part": "rail",
+      "aria-label": "Toggle sidebar",
+      tabIndex: -1,
+      className: r(
+        "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",
+        a
+      ),
+      onClick: n,
+      ...t
+    }
+  );
+});
+ge.displayName = "Sidebar.Rail";
+const he = p(({ className: a, ...t }, e) => {
+  const { side: n, resizable: l, setIsResizing: o, setWidth: c, setOpen: u, open: m, minWidth: s, width: d, maxWidth: g } = z(), h = W(0), k = W(0), x = W(!1);
+  if (!l) return null;
+  const y = 10, b = (f) => {
+    f.preventDefault(), o(!0), h.current = f.clientX, x.current = !m;
+    const N = f.currentTarget.closest(
+      "[data-sidebar-wrapper]"
+    )?.querySelector("[data-sidebar='sidebar']");
+    k.current = N?.getBoundingClientRect().width ?? 0;
+    const C = () => {
+      o(!1), document.removeEventListener("pointermove", A), document.removeEventListener("pointerup", L);
+    }, A = (R) => {
+      const T = n === "left" ? R.clientX - h.current : h.current - R.clientX, S = k.current + T;
+      if (x.current) {
+        S >= s && (x.current = !1, u(!0), c(S));
+        return;
+      }
+      if (S < s) {
+        u(!1), x.current = !0;
+        return;
+      }
+      c(S);
+    }, L = () => {
+      C();
+    };
+    document.addEventListener("pointermove", A), document.addEventListener("pointerup", L);
+  }, v = (f) => {
+    const _ = n === "left" ? "ArrowRight" : "ArrowLeft", N = n === "left" ? "ArrowLeft" : "ArrowRight";
+    if (f.key === _)
+      f.preventDefault(), m ? c(Math.min(d + y, g)) : (u(!0), c(s));
+    else if (f.key === N) {
+      f.preventDefault();
+      const C = d - y;
+      C < s ? u(!1) : c(C);
+    } else f.key === "Home" ? (f.preventDefault(), u(!1)) : f.key === "End" && (f.preventDefault(), u(!0), c(g));
+  };
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "aria-label": "Resize sidebar",
+      tabIndex: 0,
+      "data-sidebar": "resize-handle",
+      className: r(
+        // 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",
+        n === "left" && "right-0 after:right-0",
+        n === "right" && "left-0 after:left-0",
+        a
+      ),
+      onPointerDown: b,
+      onKeyDown: v,
+      ...t
+    }
+  );
+});
+he.displayName = "Sidebar.ResizeHandle";
+const F = V({
+  contentId: "",
+  isOpen: !0,
+  isCollapsible: !1,
+  toggle: () => {
+  }
+}), xe = p(
+  ({ defaultOpen: a = !1, open: t, onOpenChange: e, className: n, children: l, ...o }, c) => {
+    const [u, m] = E(a), s = t ?? u, d = _e(), g = W(!1), h = I(() => {
+      const b = !s;
+      m(b), e?.(b), g.current = !1;
+    }, [s, e]), k = $(
+      () => ({ contentId: d, isOpen: s, isCollapsible: !0, toggle: h }),
+      [d, s, h]
+    ), x = I(
+      (b) => {
+        !s && b.target.matches(":focus-visible") && (g.current = !0, m(!0), e?.(!0));
+      },
+      [s, e]
+    ), y = I(
+      (b) => {
+        g.current && !b.currentTarget.contains(b.relatedTarget) && !b.currentTarget.querySelector("[data-active]") && (g.current = !1, m(!1), e?.(!1));
+      },
+      [e]
+    );
+    return /* @__PURE__ */ i(F.Provider, { value: k, children: /* @__PURE__ */ i(
+      "div",
+      {
+        ref: c,
+        "data-open": s || void 0,
+        className: r("min-w-0", n),
+        onFocus: x,
+        onBlur: y,
+        ...o,
+        children: l
+      }
+    ) });
+  }
+);
+xe.displayName = "Sidebar.Collapsible";
+function ve({ render: a }) {
+  const { contentId: t, isOpen: e, toggle: n } = P(F);
+  return D.cloneElement(a, {
+    "aria-expanded": e,
+    "aria-controls": t,
+    "data-open": e || void 0,
+    onClick: (l) => {
+      const o = a.props.onClick;
+      o?.(l), n();
+    }
+  });
+}
+ve.displayName = "Sidebar.CollapsibleTrigger";
+const we = p(({ className: a, children: t, ...e }, n) => {
+  const { contentId: l, isOpen: o } = P(F);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: n,
+      id: l,
+      role: "region",
+      "aria-hidden": !o,
+      inert: o ? void 0 : !0,
+      "data-open": o || void 0,
+      className: r(
+        "grid",
+        "transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)",
+        "motion-reduce:transition-none",
+        o ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        a
+      ),
+      ...e,
+      children: /* @__PURE__ */ i("div", { className: "overflow-hidden", children: t })
+    }
+  );
+});
+we.displayName = "Sidebar.CollapsibleContent";
+function Se({ className: a }) {
+  const { isOpen: t, isCollapsible: e } = P(F);
+  return /* @__PURE__ */ i(
+    Ee,
+    {
+      size: 12,
+      weight: "bold",
+      className: r(
+        "ml-auto shrink-0 text-kumo-subtle transition-transform duration-200",
+        e && t && "rotate-90",
+        // Hidden when sidebar is collapsed
+        "group-data-[state=collapsed]/sidebar:hidden",
+        a
+      )
+    }
+  );
+}
+Se.displayName = "Sidebar.MenuChevron";
+const ke = V(""), ye = p(
+  ({ activeKey: a, direction: t = "left", className: e, children: n, ...l }, o) => {
+    const u = D.Children.toArray(n).findIndex(
+      (d) => D.isValidElement(d) && d.props.value === a
+    ), m = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, s = u > 0 ? `-${u * 100}%` : "0%";
+    return /* @__PURE__ */ i(ke.Provider, { value: a, children: /* @__PURE__ */ i(
+      "div",
+      {
+        ref: o,
+        "data-sidebar": "sliding-views",
+        className: r("flex flex-1 min-h-0 overflow-hidden", e),
+        ...l,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: "flex min-h-0 w-full shrink-0",
+            style: {
+              transform: `translateX(${s})`,
+              transition: m ? "none" : "transform var(--sidebar-animation-duration) var(--sidebar-easing)"
+            },
+            children: n
+          }
+        )
+      }
+    ) });
+  }
+);
+ye.displayName = "Sidebar.SlidingViews";
+const Ne = p(
+  ({ value: a, className: t, children: e, ...n }, l) => {
+    const c = P(ke) === a;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: l,
+        "data-sidebar": "sliding-view",
+        "data-value": a,
+        "aria-hidden": !c,
+        inert: c ? void 0 : !0,
+        className: r(
+          "flex w-full shrink-0 flex-col min-h-0",
+          !c && "pointer-events-none",
+          t
+        ),
+        ...n,
+        children: e
+      }
+    );
+  }
+);
+Ne.displayName = "Sidebar.SlidingView";
+const oa = Object.assign(Q, {
+  Provider: J,
+  Header: Z,
+  Content: ee,
+  Footer: ae,
+  Group: te,
+  GroupLabel: ie,
+  Menu: se,
+  MenuItem: oe,
+  MenuButton: de,
+  MenuBadge: le,
+  MenuSub: ce,
+  MenuSubItem: ue,
+  MenuSubButton: be,
+  Separator: pe,
+  Trigger: fe,
+  Rail: ge,
+  ResizeHandle: he,
+  MenuChevron: Se,
+  Collapsible: xe,
+  CollapsibleTrigger: ve,
+  CollapsibleContent: we,
+  SlidingViews: ye,
+  SlidingView: Ne
+});
+export {
+  sa as A,
+  ra as K,
+  oa as S,
+  J as a,
+  Q as b,
+  Z as c,
+  ee as d,
+  ae as e,
+  te as f,
+  ie as g,
+  se as h,
+  oe as i,
+  de as j,
+  le as k,
+  ce as l,
+  ue as m,
+  be as n,
+  pe as o,
+  fe as p,
+  ge as q,
+  he as r,
+  Se as s,
+  xe as t,
+  ve as u,
+  we as v,
+  ye as w,
+  Ne as x,
+  z as y,
+  U as z
+};
+//# sourceMappingURL=sidebar-hzio700cg85f7f31.js.map