@cloudflare/kumo 1.14.1 → 1.16.0

package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js

@@ -0,0 +1,875 @@
+"use client";
+import { jsx as s, jsxs as E, Fragment as ye } from "react/jsx-runtime";
+import ke, { forwardRef as u, useState as k, useCallback as D, useMemo as W, createContext as L, useContext as R, useRef as P, useEffect as Ne } from "react";
+import { CaretRightIcon as F, MagnifyingGlassIcon as Ce, SidebarSimpleIcon as Me } from "@phosphor-icons/react";
+import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
+import { u as X } from "./link-provider-mn2voeohon7cj9o4.js";
+import { a as Ie, T as Re } from "./tooltip-hnc71tg4gz2gpcvc.js";
+import { bn as U, bo as V, ap as Te, au as ze, av as _e, aw as Be, bp as De } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
+const $e = {
+  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"
+    }
+  }
+}, G = {
+  variant: "sidebar",
+  collapsible: "icon",
+  side: "left"
+}, Ye = {
+  width: {
+    expanded: "16rem",
+    icon: "3rem"
+  },
+  mobile: {
+    breakpoint: 768
+  }
+}, j = "16rem", Ae = "3rem", Ee = 768;
+function Le() {
+  const [t, a] = k(!1);
+  return Ne(() => {
+    const e = window.matchMedia(`(max-width: ${Ee - 1}px)`), n = () => a(e.matches);
+    return e.addEventListener("change", n), a(e.matches), () => e.removeEventListener("change", n);
+  }, []), t;
+}
+const K = L(null);
+function T() {
+  const t = R(K);
+  if (!t)
+    throw new Error("useSidebar must be used within a Sidebar.Provider");
+  return t;
+}
+const Oe = 256, Pe = 200, Ge = 480;
+function q({
+  defaultOpen: t = !0,
+  open: a,
+  onOpenChange: e,
+  variant: n = G.variant,
+  side: r = G.side,
+  collapsible: o = G.collapsible,
+  resizable: b = !1,
+  defaultWidth: m = Oe,
+  minWidth: d = Pe,
+  maxWidth: l = Ge,
+  onWidthChange: c,
+  children: x,
+  className: g,
+  style: h
+}) {
+  const p = Le(), [f, S] = k(!1), [N, z] = k(m), [w, C] = k(!1), _ = D(
+    (v) => {
+      const I = Math.min(l, Math.max(d, v));
+      z(I), c?.(I);
+    },
+    [d, l, c]
+  ), [y, ve] = k(t), M = a ?? y, B = D(
+    (v) => {
+      const I = typeof v == "function" ? v(M) : v;
+      e?.(I), ve(I);
+    },
+    [e, M]
+  ), H = D(() => {
+    p ? S((v) => !v) : B((v) => !v);
+  }, [p, B]), O = M ? "expanded" : "collapsed", Se = b ? `${N}px` : j, we = W(
+    () => ({
+      state: O,
+      open: M,
+      setOpen: B,
+      openMobile: f,
+      setOpenMobile: S,
+      isMobile: p,
+      toggleSidebar: H,
+      variant: n,
+      side: r,
+      collapsible: o,
+      width: N,
+      resizable: b,
+      minWidth: d,
+      maxWidth: l,
+      isResizing: w,
+      setIsResizing: C,
+      setWidth: _
+    }),
+    [
+      O,
+      M,
+      B,
+      f,
+      S,
+      p,
+      H,
+      n,
+      r,
+      o,
+      N,
+      b,
+      d,
+      l,
+      w,
+      C,
+      _
+    ]
+  );
+  return /* @__PURE__ */ s(K.Provider, { value: we, children: /* @__PURE__ */ s(
+    "div",
+    {
+      "data-sidebar-wrapper": "",
+      "data-state": O,
+      "data-side": r,
+      style: {
+        "--sidebar-width": Se,
+        "--sidebar-width-icon": Ae,
+        ...h
+      },
+      className: i(
+        "group/sidebar-wrapper flex min-h-svh w-full",
+        "has-data-[variant=inset]:bg-kumo-recessed",
+        w && "select-none",
+        g
+      ),
+      children: x
+    }
+  ) });
+}
+q.displayName = "Sidebar.Provider";
+const $ = u(
+  ({ className: t, children: a, ...e }, n) => {
+    const {
+      state: r,
+      isMobile: o,
+      openMobile: b,
+      setOpenMobile: m,
+      side: d,
+      variant: l,
+      collapsible: c,
+      isResizing: x,
+      resizable: g,
+      width: h
+    } = T();
+    if (c === "none")
+      return /* @__PURE__ */ s(
+        "aside",
+        {
+          ref: n,
+          "data-state": "expanded",
+          "data-side": d,
+          "data-variant": l,
+          "data-sidebar": "sidebar",
+          style: {
+            width: "var(--sidebar-width)",
+            minWidth: "var(--sidebar-width)",
+            maxWidth: "var(--sidebar-width)"
+          },
+          className: i(
+            "relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-kumo-base text-kumo-default",
+            l === "sidebar" && (d === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line"),
+            l === "floating" && "m-2 rounded-lg border border-kumo-line shadow-lg",
+            t
+          ),
+          ...e,
+          children: a
+        }
+      );
+    if (o)
+      return /* @__PURE__ */ s(Te, { open: b, onOpenChange: m, children: /* @__PURE__ */ E(ze, { children: [
+        /* @__PURE__ */ s(_e, { className: "fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" }),
+        /* @__PURE__ */ s(
+          Be,
+          {
+            className: i(
+              "fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-kumo-base p-0",
+              "duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+              d === "left" && "left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full",
+              d === "right" && "right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full"
+            ),
+            style: {
+              "--sidebar-width": j,
+              transitionProperty: "transform, opacity",
+              transitionTimingFunction: "var(--default-transition-timing-function)"
+            },
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-mobile": "true",
+                className: i(
+                  "flex h-full w-full flex-col bg-kumo-base text-kumo-default",
+                  t
+                ),
+                children: a
+              }
+            )
+          }
+        )
+      ] }) });
+    const p = c === "icon" ? "var(--sidebar-width-icon)" : "0px", f = g ? `${h}px` : "var(--sidebar-width)";
+    return /* @__PURE__ */ s(
+      "aside",
+      {
+        ref: n,
+        "data-state": r,
+        "data-side": d,
+        "data-variant": l,
+        "data-collapsible": c,
+        "data-sidebar": "sidebar",
+        style: { width: r === "expanded" ? f : p },
+        className: i(
+          "group/sidebar relative flex h-full shrink-0 grow-0 flex-col",
+          // overflow-hidden makes flex min-width resolve to 0 (per spec),
+          // preventing children from pushing the sidebar wider than its width
+          "min-w-0 overflow-hidden whitespace-nowrap",
+          "bg-kumo-base text-kumo-default",
+          // Transition width — matches production SidebarNav curve exactly
+          "transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]",
+          "motion-reduce:transition-none",
+          // Disable transition during resize drag
+          x && "transition-none!",
+          l === "sidebar" && (d === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line"),
+          l === "floating" && "m-2 rounded-lg border border-kumo-line shadow-lg",
+          t
+        ),
+        ...e,
+        children: /* @__PURE__ */ s(Ie, { children: a })
+      }
+    );
+  }
+);
+$.displayName = "Sidebar";
+const Y = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "header",
+    className: i(
+      "flex items-center gap-2 border-b border-kumo-line px-2 py-3",
+      "overflow-hidden",
+      // Collapsed: just remove border, keep same height
+      "group-data-[state=collapsed]/sidebar:border-b-0",
+      t
+    ),
+    ...a
+  }
+));
+Y.displayName = "Sidebar.Header";
+const J = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "content",
+    className: i(
+      "flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2",
+      // Collapsed: flatten spacing so icons are evenly spaced
+      "group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0",
+      "group-data-[state=collapsed]/sidebar:overflow-x-hidden",
+      t
+    ),
+    ...a
+  }
+));
+J.displayName = "Sidebar.Content";
+const Q = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: e,
+    "data-sidebar": "footer",
+    className: i(
+      "flex min-w-0 flex-col gap-2 border-t border-kumo-line px-2 py-2",
+      // Collapsed: remove border, tighten padding
+      "group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1",
+      t
+    ),
+    ...a
+  }
+));
+Q.displayName = "Sidebar.Footer";
+const A = L({
+  isCollapsible: !1,
+  isOpen: !0
+}), Z = u(
+  ({
+    className: t,
+    collapsible: a = !1,
+    defaultOpen: e = !0,
+    open: n,
+    onOpenChange: r,
+    children: o,
+    ...b
+  }, m) => {
+    const [d, l] = k(e), c = n ?? d, x = D(
+      (p) => {
+        l(p), r?.(p);
+      },
+      [r]
+    ), g = W(
+      () => ({ isCollapsible: a, isOpen: c }),
+      [a, c]
+    ), h = /* @__PURE__ */ s(
+      "div",
+      {
+        ref: m,
+        "data-sidebar": "group",
+        className: i(
+          "flex min-w-0 flex-col gap-0.5",
+          // Collapsed: remove internal gap so icons stack uniformly
+          "group-data-[state=collapsed]/sidebar:gap-0",
+          t
+        ),
+        ...b,
+        children: o
+      }
+    );
+    return a ? /* @__PURE__ */ s(A.Provider, { value: g, children: /* @__PURE__ */ s(
+      U,
+      {
+        defaultOpen: e,
+        open: n,
+        onOpenChange: x,
+        className: "min-w-0",
+        children: h
+      }
+    ) }) : /* @__PURE__ */ s(A.Provider, { value: g, children: h });
+  }
+);
+Z.displayName = "Sidebar.Group";
+const ee = u(({ className: t, children: a, ...e }, n) => {
+  const { isCollapsible: r } = R(A);
+  return r ? /* @__PURE__ */ E(
+    V,
+    {
+      ref: n,
+      "data-sidebar": "group-label",
+      className: i(
+        "group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-kumo-subtle",
+        "group-data-[state=collapsed]/sidebar:hidden",
+        t
+      ),
+      ...e,
+      children: [
+        /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left", children: a }),
+        /* @__PURE__ */ s(
+          F,
+          {
+            className: i(
+              "ml-auto size-3 shrink-0 text-kumo-subtle transition-transform duration-200",
+              "group-data-[panel-open]/group-label:rotate-90"
+            )
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      "data-sidebar": "group-label",
+      className: i(
+        "truncate px-3 py-1 text-xs font-medium text-kumo-subtle",
+        "group-data-[state=collapsed]/sidebar:hidden",
+        t
+      ),
+      ...e,
+      children: a
+    }
+  );
+});
+ee.displayName = "Sidebar.GroupLabel";
+const ae = u(({ className: t, children: a, ...e }, n) => {
+  const { isCollapsible: r, isOpen: o } = R(A);
+  return r ? /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      "data-sidebar": "group-content",
+      className: i(
+        "grid",
+        // Animate height via grid-rows — matches production NavGroup pattern
+        "transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
+        "motion-reduce:transition-none",
+        // Default: collapsed
+        "grid-rows-[0fr]",
+        // When sidebar is expanded, respect group open/close state
+        o ? "group-data-[state=expanded]/sidebar:grid-rows-[1fr]" : "group-data-[state=expanded]/sidebar:grid-rows-[0fr]",
+        t
+      ),
+      ...e,
+      children: /* @__PURE__ */ s("div", { className: "overflow-hidden", children: a })
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      "data-sidebar": "group-content",
+      className: i("flex flex-col", t),
+      ...e,
+      children: a
+    }
+  );
+});
+ae.displayName = "Sidebar.GroupContent";
+const te = L(!1), se = L(!1), ne = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "ul",
+  {
+    ref: e,
+    "data-sidebar": "menu",
+    className: i(
+      "m-0 flex min-w-0 list-none flex-col gap-0.5 p-0",
+      "group-data-[state=collapsed]/sidebar:gap-0",
+      t
+    ),
+    ...a
+  }
+));
+ne.displayName = "Sidebar.Menu";
+const ie = u(({ className: t, children: a, ...e }, n) => /* @__PURE__ */ s(te.Provider, { value: !0, children: /* @__PURE__ */ s(
+  "li",
+  {
+    ref: n,
+    "data-sidebar": "menu-item",
+    className: i("relative", t),
+    ...e,
+    children: a
+  }
+) }));
+ie.displayName = "Sidebar.MenuItem";
+const re = u(
+  ({
+    className: t,
+    icon: a,
+    active: e = !1,
+    size: n = "base",
+    href: r,
+    tooltip: o,
+    children: b,
+    ...m
+  }, d) => {
+    const { state: l } = T(), c = X(), x = R(te), g = a ? ke.isValidElement(a) ? a : /* @__PURE__ */ s(
+      a,
+      {
+        className: i("shrink-0", n === "base" ? "size-4" : "size-3.5")
+      }
+    ) : null, h = /* @__PURE__ */ E(ye, { children: [
+      g,
+      /* @__PURE__ */ s(
+        "span",
+        {
+          className: i(
+            "flex flex-1 items-center min-w-0 text-left overflow-hidden",
+            "group-data-[state=collapsed]/sidebar:hidden"
+          ),
+          children: b
+        }
+      )
+    ] }), p = i(
+      // Layout
+      "group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer",
+      // Sizing
+      n === "base" && "min-h-[34px] px-3 py-1.5 text-sm font-medium",
+      n === "sm" && "min-h-[28px] px-2 py-1 text-sm",
+      // Default state — transition includes padding so collapsed centering animates smoothly
+      "text-kumo-default",
+      "transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]",
+      // Icon color
+      "[&>svg]:text-kumo-subtle",
+      !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-visible:ring-1 focus-visible:ring-kumo-ring",
+      // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;
+      // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.
+      "group-data-[state=collapsed]/sidebar:px-2",
+      t
+    );
+    let f;
+    return r ? f = /* @__PURE__ */ s(
+      c,
+      {
+        ref: d,
+        className: i(p, "no-underline!"),
+        href: r,
+        to: r,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-size": n,
+        onClick: m.onClick,
+        children: h
+      }
+    ) : f = /* @__PURE__ */ s(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        className: p,
+        "data-active": e || void 0,
+        "data-sidebar": "menu-button",
+        "data-size": n,
+        ...m,
+        children: h
+      }
+    ), l === "collapsed" && o && (f = /* @__PURE__ */ s(Re, { content: o, side: "right", asChild: !0, children: f })), x ? f : /* @__PURE__ */ s("li", { "data-sidebar": "menu-item", className: "relative", children: f });
+  }
+);
+re.displayName = "Sidebar.MenuButton";
+const oe = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "button",
+  {
+    ref: e,
+    type: "button",
+    "data-sidebar": "menu-action",
+    className: i(
+      "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1",
+      "text-kumo-strong hover:bg-kumo-overlay",
+      "transition-colors duration-150",
+      "group-data-[state=collapsed]/sidebar:hidden",
+      t
+    ),
+    ...a
+  }
+));
+oe.displayName = "Sidebar.MenuAction";
+const de = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "span",
+  {
+    ref: e,
+    "data-sidebar": "menu-badge",
+    className: i(
+      "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
+  }
+));
+de.displayName = "Sidebar.MenuBadge";
+const le = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "ul",
+  {
+    ref: e,
+    "data-sidebar": "menu-sub",
+    className: i(
+      "m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-line p-0 pl-2.5",
+      // Hidden when collapsed
+      "group-data-[state=collapsed]/sidebar:hidden",
+      t
+    ),
+    ...a
+  }
+));
+le.displayName = "Sidebar.MenuSub";
+const ue = u(({ className: t, children: a, ...e }, n) => /* @__PURE__ */ s(se.Provider, { value: !0, children: /* @__PURE__ */ s(
+  "li",
+  {
+    ref: n,
+    "data-sidebar": "menu-sub-item",
+    className: i("relative", t),
+    ...e,
+    children: a
+  }
+) }));
+ue.displayName = "Sidebar.MenuSubItem";
+const ce = u(({ className: t, active: a = !1, href: e, children: n, ...r }, o) => {
+  const b = X(), m = R(se), d = i(
+    "flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none",
+    "text-kumo-default transition-colors duration-150",
+    !a && "hover:bg-kumo-tint",
+    a && "bg-kumo-tint",
+    "focus-visible:ring-1 focus-visible:ring-kumo-ring",
+    t
+  ), l = /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left", children: n });
+  let c;
+  return e ? c = /* @__PURE__ */ s(
+    b,
+    {
+      ref: o,
+      className: i(d, "no-underline!"),
+      href: e,
+      to: e,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      onClick: r.onClick,
+      children: l
+    }
+  ) : c = /* @__PURE__ */ s(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: d,
+      "data-active": a || void 0,
+      "data-sidebar": "menu-sub-button",
+      ...r,
+      children: l
+    }
+  ), m ? c : /* @__PURE__ */ s("li", { "data-sidebar": "menu-sub-item", className: "relative", children: c });
+});
+ce.displayName = "Sidebar.MenuSubButton";
+const be = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  "hr",
+  {
+    ref: e,
+    "data-sidebar": "separator",
+    className: i("mx-2 min-h-px h-px border-0 bg-kumo-line", t),
+    ...a
+  }
+));
+be.displayName = "Sidebar.Separator";
+const pe = u(
+  ({ className: t, placeholder: a = "Search...", shortcut: e, children: n, ...r }, o) => /* @__PURE__ */ E(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      "data-sidebar": "input",
+      className: i(
+        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm",
+        "bg-kumo-base text-kumo-subtle ring ring-kumo-line",
+        "transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
+        "hover:bg-kumo-overlay",
+        // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition
+        "group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0",
+        t
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ s(Ce, { className: "size-4 shrink-0 text-kumo-subtle" }),
+        /* @__PURE__ */ s("span", { className: "flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden", children: n ?? a }),
+        e && /* @__PURE__ */ s("kbd", { className: "ml-auto font-sans text-xs text-kumo-subtle group-data-[state=collapsed]/sidebar:hidden", children: e })
+      ]
+    }
+  )
+);
+pe.displayName = "Sidebar.Input";
+const me = u(({ className: t, children: a, onClick: e, ...n }, r) => {
+  const { toggleSidebar: o } = T();
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      "data-sidebar": "trigger",
+      "aria-label": "Toggle sidebar",
+      className: i(
+        "flex items-center rounded-md p-1.5",
+        "text-kumo-subtle hover:text-kumo-strong hover:bg-kumo-overlay",
+        "transition-colors duration-150",
+        t
+      ),
+      onClick: (b) => {
+        e?.(b), o();
+      },
+      ...n,
+      children: a ?? /* @__PURE__ */ s(Me, { className: "size-5" })
+    }
+  );
+});
+me.displayName = "Sidebar.Trigger";
+const ge = u(({ className: t, ...a }, e) => {
+  const { toggleSidebar: n } = T();
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      "data-sidebar": "rail",
+      "aria-label": "Toggle sidebar",
+      tabIndex: -1,
+      className: i(
+        "absolute inset-y-0 z-20 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: n,
+      ...a
+    }
+  );
+});
+ge.displayName = "Sidebar.Rail";
+const fe = u(({ className: t, ...a }, e) => {
+  const {
+    side: n,
+    resizable: r,
+    setIsResizing: o,
+    setWidth: b,
+    setOpen: m,
+    open: d,
+    minWidth: l
+  } = T(), c = P(0), x = P(0), g = P(!1);
+  if (!r) return null;
+  const h = (p) => {
+    p.preventDefault(), o(!0), c.current = p.clientX, g.current = !d;
+    const S = p.currentTarget.closest(
+      "[data-sidebar-wrapper]"
+    )?.querySelector("[data-sidebar='sidebar']");
+    x.current = S?.getBoundingClientRect().width ?? 0;
+    const N = () => {
+      o(!1), document.removeEventListener("pointermove", z), document.removeEventListener("pointerup", w);
+    }, z = (C) => {
+      const _ = n === "left" ? C.clientX - c.current : c.current - C.clientX, y = x.current + _;
+      if (g.current) {
+        y >= l && (g.current = !1, m(!0), b(y));
+        return;
+      }
+      if (y < l) {
+        m(!1), g.current = !0;
+        return;
+      }
+      b(y);
+    }, w = () => {
+      N();
+    };
+    document.addEventListener("pointermove", z), document.addEventListener("pointerup", w);
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      "data-sidebar": "resize-handle",
+      className: i(
+        "absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block",
+        "hover:bg-kumo-brand/30 active:bg-kumo-brand/50",
+        n === "left" && "right-0",
+        n === "right" && "left-0",
+        t
+      ),
+      onPointerDown: h,
+      ...a
+    }
+  );
+});
+fe.displayName = "Sidebar.ResizeHandle";
+function he({ className: t }) {
+  return /* @__PURE__ */ s(
+    F,
+    {
+      className: i(
+        "ml-auto size-4 shrink-0 text-kumo-subtle transition-transform duration-200",
+        // Auto-rotate when inside an open Collapsible trigger
+        "group-data-[panel-open]/menu-button:rotate-90",
+        // Hidden when collapsed
+        "group-data-[state=collapsed]/sidebar:hidden",
+        t
+      )
+    }
+  );
+}
+he.displayName = "Sidebar.MenuChevron";
+const He = U, We = V, xe = u(({ className: t, keepMounted: a = !0, ...e }, n) => /* @__PURE__ */ s(
+  De,
+  {
+    ref: n,
+    keepMounted: a,
+    className: i(
+      "overflow-hidden",
+      // Default: show at measured height (when data-open, no override matches)
+      "h-[var(--collapsible-panel-height)]",
+      // Transition height — matches production NavGroup easing
+      "transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
+      "motion-reduce:transition-none",
+      // Closed / animating in / animating out: height 0
+      "data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0",
+      t
+    ),
+    ...e
+  }
+));
+xe.displayName = "Sidebar.CollapsibleContent";
+const Je = Object.assign($, {
+  Provider: q,
+  Header: Y,
+  Content: J,
+  Footer: Q,
+  Group: Z,
+  GroupLabel: ee,
+  GroupContent: ae,
+  Menu: ne,
+  MenuItem: ie,
+  MenuButton: re,
+  MenuAction: oe,
+  MenuBadge: de,
+  MenuSub: le,
+  MenuSubItem: ue,
+  MenuSubButton: ce,
+  Separator: be,
+  Input: pe,
+  Trigger: me,
+  Rail: ge,
+  ResizeHandle: fe,
+  MenuChevron: he,
+  Collapsible: He,
+  CollapsibleTrigger: We,
+  CollapsibleContent: xe
+});
+export {
+  G as A,
+  Ye as B,
+  $e as K,
+  Je as S,
+  q as a,
+  $ as b,
+  Y as c,
+  J as d,
+  Q as e,
+  Z as f,
+  ee as g,
+  ae as h,
+  ne as i,
+  ie as j,
+  re as k,
+  oe as l,
+  de as m,
+  le as n,
+  ue as o,
+  ce as p,
+  be as q,
+  pe as r,
+  me as s,
+  ge as t,
+  fe as u,
+  he as v,
+  He as w,
+  We as x,
+  xe as y,
+  T as z
+};
+//# sourceMappingURL=sidebar-l6rk9o5qf8k5vth1.js.map