@cloudflare/kumo 2.0.2 → 2.0.4

package/dist/chunks/{sidebar-kb9kykqfgy5yzqwr.js → sidebar-jjptencqv1jgztgu.js}

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as s, jsxs as P, Fragment as ye } from "react/jsx-runtime";
-import ke, { forwardRef as u, useState as k, useCallback as D, useMemo as W, createContext as A, useContext as R, useRef as L, useEffect as Ne } from "react";
+import { jsx as s, jsxs as P, Fragment as ke } from "react/jsx-runtime";
+import ye, { forwardRef as u, useState as y, useCallback as D, useMemo as W, createContext as A, useContext as R, useRef as L, useEffect as Ne } from "react";
 import { CaretRightIcon as F, MagnifyingGlassIcon as Ce, SidebarSimpleIcon as Me } from "@phosphor-icons/react";
-import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as X } from "./link-provider-mn2voeohon7cj9o4.js";
 import { a as Ie, T as Re } from "./tooltip-odudhkxe282wxinq.js";
 import { aO as U, aQ as V, aq as Te, av as ze, aw as _e, ax as Be, aP as De } from "./vendor-base-ui-ie71jahf0czyf58j.js";
@@ -59,7 +59,7 @@ const $e = {
   }
 }, j = "16rem", Oe = "3rem", Pe = 768;
 function Ae() {
-  const [t, a] = k(!1);
+  const [t, a] = y(!1);
   return Ne(() => {
     const e = window.matchMedia(`(max-width: ${Pe - 1}px)`), i = () => a(e.matches);
     return e.addEventListener("change", i), a(e.matches), () => e.removeEventListener("change", i);
@@ -78,7 +78,7 @@ function q({
   open: a,
   onOpenChange: e,
   variant: i = G.variant,
-  side: r = G.side,
+  side: n = G.side,
   collapsible: o = G.collapsible,
   resizable: b = !1,
   defaultWidth: m = Ee,
@@ -89,13 +89,13 @@ function q({
   className: g,
   style: h
 }) {
-  const p = Ae(), [f, S] = k(!1), [N, z] = k(m), [w, C] = k(!1), _ = D(
+  const p = Ae(), [f, S] = y(!1), [N, z] = y(m), [w, C] = y(!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(
+  ), [k, ve] = y(t), M = a ?? k, B = D(
     (v) => {
       const I = typeof v == "function" ? v(M) : v;
       e?.(I), ve(I);
@@ -113,7 +113,7 @@ function q({
       isMobile: p,
       toggleSidebar: H,
       variant: i,
-      side: r,
+      side: n,
       collapsible: o,
       width: N,
       resizable: b,
@@ -132,7 +132,7 @@ function q({
       p,
       H,
       i,
-      r,
+      n,
       o,
       N,
       b,
@@ -148,13 +148,13 @@ function q({
     {
       "data-sidebar-wrapper": "",
       "data-state": E,
-      "data-side": r,
+      "data-side": n,
       style: {
         "--sidebar-width": Se,
         "--sidebar-width-icon": Oe,
         ...h
       },
-      className: n(
+      className: r(
         "group/sidebar-wrapper flex min-h-svh w-full",
         "has-data-[variant=inset]:bg-kumo-recessed",
         w && "select-none",
@@ -168,7 +168,7 @@ q.displayName = "Sidebar.Provider";
 const $ = u(
   ({ className: t, children: a, ...e }, i) => {
     const {
-      state: r,
+      state: n,
       isMobile: o,
       openMobile: b,
       setOpenMobile: m,
@@ -193,7 +193,7 @@ const $ = u(
             minWidth: "var(--sidebar-width)",
             maxWidth: "var(--sidebar-width)"
           },
-          className: n(
+          className: r(
             "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-hairline" : "border-l border-kumo-hairline"),
             l === "floating" && "m-2 rounded-lg border border-kumo-hairline shadow-lg",
@@ -205,12 +205,13 @@ const $ = u(
       );
     if (o)
       return /* @__PURE__ */ s(Te, { open: b, onOpenChange: m, children: /* @__PURE__ */ P(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(_e, { "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__ */ s(
           Be,
           {
-            className: n(
-              "fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-kumo-base p-0",
+            "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",
               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"
@@ -225,7 +226,7 @@ const $ = u(
               {
                 "data-sidebar": "sidebar",
                 "data-mobile": "true",
-                className: n(
+                className: r(
                   "flex h-full w-full flex-col bg-kumo-base text-kumo-default",
                   t
                 ),
@@ -240,13 +241,13 @@ const $ = u(
       "aside",
       {
         ref: i,
-        "data-state": r,
+        "data-state": n,
         "data-side": d,
         "data-variant": l,
         "data-collapsible": c,
         "data-sidebar": "sidebar",
-        style: { width: r === "expanded" ? f : p },
-        className: n(
+        style: { width: n === "expanded" ? f : p },
+        className: r(
           "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
@@ -273,7 +274,7 @@ const Q = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "header",
-    className: n(
+    className: r(
       "flex items-center gap-2 border-b border-kumo-hairline px-2 py-3",
       "overflow-hidden",
       // Collapsed: just remove border, keep same height
@@ -289,7 +290,7 @@ const Y = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "content",
-    className: n(
+    className: r(
       "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",
@@ -305,7 +306,7 @@ const J = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "footer",
-    className: n(
+    className: r(
       "flex min-w-0 flex-col gap-2 border-t border-kumo-hairline px-2 py-2",
       // Collapsed: remove border, tighten padding
       "group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1",
@@ -324,15 +325,15 @@ const O = A({
     collapsible: a = !1,
     defaultOpen: e = !0,
     open: i,
-    onOpenChange: r,
+    onOpenChange: n,
     children: o,
     ...b
   }, m) => {
-    const [d, l] = k(e), c = i ?? d, x = D(
+    const [d, l] = y(e), c = i ?? d, x = D(
       (p) => {
-        l(p), r?.(p);
+        l(p), n?.(p);
       },
-      [r]
+      [n]
     ), g = W(
       () => ({ isCollapsible: a, isOpen: c }),
       [a, c]
@@ -341,7 +342,7 @@ const O = A({
       {
         ref: m,
         "data-sidebar": "group",
-        className: n(
+        className: r(
           "flex min-w-0 flex-col gap-0.5",
           // Collapsed: remove internal gap so icons stack uniformly
           "group-data-[state=collapsed]/sidebar:gap-0",
@@ -365,13 +366,13 @@ const O = A({
 );
 Z.displayName = "Sidebar.Group";
 const ee = u(({ className: t, children: a, ...e }, i) => {
-  const { isCollapsible: r } = R(O);
-  return r ? /* @__PURE__ */ P(
+  const { isCollapsible: n } = R(O);
+  return n ? /* @__PURE__ */ P(
     V,
     {
       ref: i,
       "data-sidebar": "group-label",
-      className: n(
+      className: r(
         "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
@@ -382,7 +383,7 @@ const ee = u(({ className: t, children: a, ...e }, i) => {
         /* @__PURE__ */ s(
           F,
           {
-            className: n(
+            className: r(
               "ml-auto size-3 shrink-0 text-kumo-subtle transition-transform duration-200",
               "group-data-[panel-open]/group-label:rotate-90"
             )
@@ -395,7 +396,7 @@ const ee = u(({ className: t, children: a, ...e }, i) => {
     {
       ref: i,
       "data-sidebar": "group-label",
-      className: n(
+      className: r(
         "truncate px-3 py-1 text-xs font-medium text-kumo-subtle",
         "group-data-[state=collapsed]/sidebar:hidden",
         t
@@ -407,13 +408,13 @@ const ee = u(({ className: t, children: a, ...e }, i) => {
 });
 ee.displayName = "Sidebar.GroupLabel";
 const ae = u(({ className: t, children: a, ...e }, i) => {
-  const { isCollapsible: r, isOpen: o } = R(O);
-  return r ? /* @__PURE__ */ s(
+  const { isCollapsible: n, isOpen: o } = R(O);
+  return n ? /* @__PURE__ */ s(
     "div",
     {
       ref: i,
       "data-sidebar": "group-content",
-      className: n(
+      className: r(
         "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)]",
@@ -432,7 +433,7 @@ const ae = u(({ className: t, children: a, ...e }, i) => {
     {
       ref: i,
       "data-sidebar": "group-content",
-      className: n("flex flex-col", t),
+      className: r("flex flex-col", t),
       ...e,
       children: a
     }
@@ -444,7 +445,7 @@ const te = A(!1), se = A(!1), ie = u(({ className: t, ...a }, e) => /* @__PURE__
   {
     ref: e,
     "data-sidebar": "menu",
-    className: n(
+    className: r(
       "m-0 flex min-w-0 list-none flex-col gap-0.5 p-0",
       "group-data-[state=collapsed]/sidebar:gap-0",
       t
@@ -453,46 +454,46 @@ const te = A(!1), se = A(!1), ie = u(({ className: t, ...a }, e) => /* @__PURE__
   }
 ));
 ie.displayName = "Sidebar.Menu";
-const ne = u(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ s(te.Provider, { value: !0, children: /* @__PURE__ */ s(
+const re = u(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ s(te.Provider, { value: !0, children: /* @__PURE__ */ s(
   "li",
   {
     ref: i,
     "data-sidebar": "menu-item",
-    className: n("relative", t),
+    className: r("relative", t),
     ...e,
     children: a
   }
 ) }));
-ne.displayName = "Sidebar.MenuItem";
-const re = u(
+re.displayName = "Sidebar.MenuItem";
+const ne = u(
   ({
     className: t,
     icon: a,
     active: e = !1,
     size: i = "base",
-    href: r,
+    href: n,
     tooltip: o,
     children: b,
     ...m
   }, d) => {
-    const { state: l } = T(), c = X(), x = R(te), g = a ? ke.isValidElement(a) ? a : /* @__PURE__ */ s(
+    const { state: l } = T(), c = X(), x = R(te), g = a ? ye.isValidElement(a) ? a : /* @__PURE__ */ s(
       a,
       {
-        className: n("shrink-0", i === "base" ? "size-4" : "size-3.5")
+        className: r("shrink-0", i === "base" ? "size-4" : "size-3.5")
       }
-    ) : null, h = /* @__PURE__ */ P(ye, { children: [
+    ) : null, h = /* @__PURE__ */ P(ke, { children: [
       g,
       /* @__PURE__ */ s(
         "span",
         {
-          className: n(
+          className: r(
             "flex flex-1 items-center min-w-0 text-left overflow-hidden",
             "group-data-[state=collapsed]/sidebar:hidden"
           ),
           children: b
         }
       )
-    ] }), p = n(
+    ] }), p = r(
       // Layout
       "group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg cursor-pointer",
       // Sizing
@@ -516,13 +517,13 @@ const re = u(
       t
     );
     let f;
-    return r ? f = /* @__PURE__ */ s(
+    return n ? f = /* @__PURE__ */ s(
       c,
       {
         ref: d,
-        className: n(p, "no-underline!"),
-        href: r,
-        to: r,
+        className: r(p, "no-underline!"),
+        href: n,
+        to: n,
         "data-active": e || void 0,
         "data-sidebar": "menu-button",
         "data-size": i,
@@ -544,14 +545,14 @@ const re = u(
     ), l === "collapsed" && o && (f = /* @__PURE__ */ s(Re, { content: o, side: "right", render: f })), x ? f : /* @__PURE__ */ s("li", { "data-sidebar": "menu-item", className: "relative", children: f });
   }
 );
-re.displayName = "Sidebar.MenuButton";
+ne.displayName = "Sidebar.MenuButton";
 const oe = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   "button",
   {
     ref: e,
     type: "button",
     "data-sidebar": "menu-action",
-    className: n(
+    className: r(
       "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1",
       "text-kumo-subtle hover:bg-kumo-overlay",
       "focus-visible:ring-2 focus-visible:ring-kumo-brand",
@@ -568,7 +569,7 @@ const de = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "menu-badge",
-    className: n(
+    className: r(
       "inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-hairline",
       "select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-subtle",
       // Hidden when collapsed
@@ -584,7 +585,7 @@ const le = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "menu-sub",
-    className: n(
+    className: r(
       "m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-hairline p-0 pl-2.5",
       // Hidden when collapsed
       "group-data-[state=collapsed]/sidebar:hidden",
@@ -599,14 +600,14 @@ const ue = u(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ s(se.Pr
   {
     ref: i,
     "data-sidebar": "menu-sub-item",
-    className: n("relative", t),
+    className: r("relative", t),
     ...e,
     children: a
   }
 ) }));
 ue.displayName = "Sidebar.MenuSubItem";
-const ce = u(({ className: t, active: a = !1, href: e, children: i, ...r }, o) => {
-  const b = X(), m = R(se), d = n(
+const ce = u(({ className: t, active: a = !1, href: e, children: i, ...n }, o) => {
+  const b = X(), m = R(se), d = r(
     "flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium",
     "text-kumo-default transition-colors duration-150",
     !a && "hover:bg-kumo-tint",
@@ -619,12 +620,12 @@ const ce = u(({ className: t, active: a = !1, href: e, children: i, ...r }, o) =
     b,
     {
       ref: o,
-      className: n(d, "no-underline!"),
+      className: r(d, "no-underline!"),
       href: e,
       to: e,
       "data-active": a || void 0,
       "data-sidebar": "menu-sub-button",
-      onClick: r.onClick,
+      onClick: n.onClick,
       children: l
     }
   ) : c = /* @__PURE__ */ s(
@@ -635,7 +636,7 @@ const ce = u(({ className: t, active: a = !1, href: e, children: i, ...r }, o) =
       className: d,
       "data-active": a || void 0,
       "data-sidebar": "menu-sub-button",
-      ...r,
+      ...n,
       children: l
     }
   ), m ? c : /* @__PURE__ */ s("li", { "data-sidebar": "menu-sub-item", className: "relative", children: c });
@@ -646,19 +647,19 @@ const be = u(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   {
     ref: e,
     "data-sidebar": "separator",
-    className: n("mx-2 min-h-px h-px border-0 bg-kumo-hairline", t),
+    className: r("mx-2 min-h-px h-px border-0 bg-kumo-hairline", t),
     ...a
   }
 ));
 be.displayName = "Sidebar.Separator";
 const pe = u(
-  ({ className: t, placeholder: a = "Search...", shortcut: e, children: i, ...r }, o) => /* @__PURE__ */ P(
+  ({ className: t, placeholder: a = "Search...", shortcut: e, children: i, ...n }, o) => /* @__PURE__ */ P(
     "button",
     {
       ref: o,
       type: "button",
       "data-sidebar": "input",
-      className: n(
+      className: r(
         "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm",
         "bg-kumo-base text-kumo-subtle ring ring-kumo-hairline",
         "transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]",
@@ -668,7 +669,7 @@ const pe = u(
         "group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0",
         t
       ),
-      ...r,
+      ...n,
       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: i ?? a }),
@@ -678,16 +679,16 @@ const pe = u(
   )
 );
 pe.displayName = "Sidebar.Input";
-const me = u(({ className: t, children: a, onClick: e, ...i }, r) => {
+const me = u(({ className: t, children: a, onClick: e, ...i }, n) => {
   const { toggleSidebar: o } = T();
   return /* @__PURE__ */ s(
     "button",
     {
-      ref: r,
+      ref: n,
       type: "button",
       "data-sidebar": "trigger",
       "aria-label": "Toggle sidebar",
-      className: n(
+      className: r(
         "flex items-center rounded-md p-1.5",
         "text-kumo-subtle hover:text-kumo-default hover:bg-kumo-overlay",
         "focus-visible:ring-2 focus-visible:ring-kumo-brand",
@@ -713,7 +714,7 @@ const ge = u(({ className: t, ...a }, e) => {
       "data-sidebar": "rail",
       "aria-label": "Toggle sidebar",
       tabIndex: -1,
-      className: n(
+      className: r(
         "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",
@@ -729,8 +730,8 @@ const ge = u(({ className: t, ...a }, e) => {
 });
 ge.displayName = "Sidebar.Rail";
 const fe = u(({ className: t, ...a }, e) => {
-  const { side: i, resizable: r, setIsResizing: o, setWidth: b, setOpen: m, open: d, minWidth: l } = T(), c = L(0), x = L(0), g = L(!1);
-  if (!r) return null;
+  const { side: i, resizable: n, setIsResizing: o, setWidth: b, setOpen: m, open: d, minWidth: l } = T(), c = L(0), x = L(0), g = L(!1);
+  if (!n) return null;
   const h = (p) => {
     p.preventDefault(), o(!0), c.current = p.clientX, g.current = !d;
     const S = p.currentTarget.closest(
@@ -740,16 +741,16 @@ const fe = u(({ className: t, ...a }, e) => {
     const N = () => {
       o(!1), document.removeEventListener("pointermove", z), document.removeEventListener("pointerup", w);
     }, z = (C) => {
-      const _ = i === "left" ? C.clientX - c.current : c.current - C.clientX, y = x.current + _;
+      const _ = i === "left" ? C.clientX - c.current : c.current - C.clientX, k = x.current + _;
       if (g.current) {
-        y >= l && (g.current = !1, m(!0), b(y));
+        k >= l && (g.current = !1, m(!0), b(k));
         return;
       }
-      if (y < l) {
+      if (k < l) {
         m(!1), g.current = !0;
         return;
       }
-      b(y);
+      b(k);
     }, w = () => {
       N();
     };
@@ -760,7 +761,7 @@ const fe = u(({ className: t, ...a }, e) => {
     {
       ref: e,
       "data-sidebar": "resize-handle",
-      className: n(
+      className: r(
         "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",
         i === "left" && "right-0",
@@ -777,7 +778,7 @@ function he({ className: t }) {
   return /* @__PURE__ */ s(
     F,
     {
-      className: n(
+      className: r(
         "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",
@@ -794,7 +795,7 @@ const He = U, We = V, xe = u(({ className: t, keepMounted: a = !0, ...e }, i) =>
   {
     ref: i,
     keepMounted: a,
-    className: n(
+    className: r(
       "overflow-hidden",
       // Default: keep the measured height that Base UI writes to --collapsible-panel-height.
       // This must also remain true during the initial close frame so the exit transition has
@@ -822,8 +823,8 @@ const Ye = Object.assign($, {
   GroupLabel: ee,
   GroupContent: ae,
   Menu: ie,
-  MenuItem: ne,
-  MenuButton: re,
+  MenuItem: re,
+  MenuButton: ne,
   MenuAction: oe,
   MenuBadge: de,
   MenuSub: le,
@@ -853,8 +854,8 @@ export {
   ee as g,
   ae as h,
   ie as i,
-  ne as j,
-  re as k,
+  re as j,
+  ne as k,
   oe as l,
   de as m,
   le as n,
@@ -871,4 +872,4 @@ export {
   xe as y,
   T as z
 };
-//# sourceMappingURL=sidebar-kb9kykqfgy5yzqwr.js.map
+//# sourceMappingURL=sidebar-jjptencqv1jgztgu.js.map