@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js

@@ -0,0 +1,650 @@
+import { jsxs as v, Fragment as H, jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import { mergeProps as q } from "@base-ui/react/merge-props";
+import { useRender as G } from "@base-ui/react/use-render";
+import { Collapsible as X } from "@base-ui/react/collapsible";
+import { SquareArrowUpRightIcon as ae, ChevronDownIcon as J } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as te } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as f } from "../../../lib/utils.js";
+import { useDocDir as B } from "../../../lib/use-doc-dir.js";
+import { Tooltip as I, TooltipTrigger as O, TooltipContent as A } from "../tooltip/tooltip.js";
+function F(n, { enabled: a }) {
+  const [o, d] = t.useState(!1);
+  return t.useEffect(() => {
+    const i = n.current;
+    if (!a || !i) {
+      d(!1);
+      return;
+    }
+    const r = () => d(i.scrollWidth > i.clientWidth);
+    r();
+    const s = new ResizeObserver(r);
+    return s.observe(i), () => s.disconnect();
+  }, [n, a]), o;
+}
+const E = 256, Q = E * 2, Y = /* @__PURE__ */ v(H, { children: [
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
+  " Drag",
+  /* @__PURE__ */ e("br", {}),
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Collapse:" }),
+  " Click",
+  /* @__PURE__ */ e("br", {}),
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Reset size:" }),
+  " Double click"
+] }), Z = /* @__PURE__ */ v(H, { children: [
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
+  " Drag",
+  /* @__PURE__ */ e("br", {}),
+  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Expand:" }),
+  " Click"
+] }), $ = t.createContext(null);
+function P() {
+  return t.useContext($) ?? {
+    expanded: !0,
+    toggleExpanded: () => {
+    },
+    resizable: !1,
+    width: E,
+    setWidth: () => {
+    },
+    minWidth: E,
+    maxWidth: Q,
+    defaultWidth: E,
+    headerLabel: void 0,
+    setHeaderLabel: () => {
+    },
+    selectedLabel: void 0,
+    setSelectedLabel: () => {
+    },
+    resizeAriaLabel: "Resize sidebar",
+    resizeTooltipExpanded: Y,
+    resizeTooltipCollapsed: Z
+  };
+}
+function ne(n, a, o) {
+  const [d, i] = t.useState(a), r = n !== void 0, s = r ? n : d, c = t.useCallback(
+    (l) => {
+      r || i(l), o == null || o(l);
+    },
+    [r, o]
+  );
+  return [s, c];
+}
+function ie() {
+  const n = P(), { expanded: a, toggleExpanded: o, resizable: d } = n, i = B(), r = t.useRef(n);
+  r.current = n;
+  const s = t.useRef(!1), [c, l] = t.useState(!1), [p, g] = t.useState(!1), u = t.useRef(
+    null
+  );
+  if (t.useEffect(() => () => {
+    u.current && clearTimeout(u.current);
+  }, []), !d) return null;
+  const x = (b) => {
+    b.preventDefault();
+    const k = b.currentTarget;
+    k.setPointerCapture(b.pointerId), s.current = !1, g(!0), l(!1);
+    const y = k.closest("[data-state]");
+    if (!y) {
+      g(!1), k.releasePointerCapture(b.pointerId);
+      return;
+    }
+    y.style.transitionProperty = "none";
+    const N = getComputedStyle(y).direction === "rtl", R = y.getBoundingClientRect(), { minWidth: S, maxWidth: C } = r.current, w = S / 2, D = (M) => {
+      s.current = !0;
+      const W = N ? R.right - M.clientX : M.clientX - R.left, { expanded: K } = r.current;
+      K ? W < w ? r.current.toggleExpanded() : r.current.setWidth(
+        Math.min(Math.max(W, S), C)
+      ) : W > w && r.current.toggleExpanded();
+    }, L = () => {
+      g(!1), y && (y.style.transitionProperty = ""), window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", L);
+    };
+    window.addEventListener("pointermove", D), window.addEventListener("pointerup", L);
+  }, h = () => {
+    s.current || (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+      o();
+    }, 250));
+  }, T = () => {
+    u.current && (clearTimeout(u.current), u.current = null), a || o(), r.current.setWidth(r.current.defaultWidth);
+  }, m = (b) => {
+    const {
+      minWidth: k,
+      maxWidth: y,
+      defaultWidth: N,
+      width: R,
+      setWidth: S,
+      expanded: C,
+      toggleExpanded: w
+    } = r.current, D = 16, L = i === "rtl" ? "ArrowLeft" : "ArrowRight", M = i === "rtl" ? "ArrowRight" : "ArrowLeft";
+    if (b.key === L && C)
+      b.preventDefault(), S(Math.min(R + D, y));
+    else if (b.key === L && !C)
+      b.preventDefault(), w();
+    else if (b.key === M && C) {
+      b.preventDefault();
+      const W = R - D;
+      W < k ? w() : S(W);
+    } else b.key === "Enter" || b.key === " " ? (b.preventDefault(), w()) : b.key === "Home" && (b.preventDefault(), C || w(), S(N));
+  };
+  return /* @__PURE__ */ v(I, { open: c, onOpenChange: (b) => {
+    p || l(b);
+  }, trackCursorAxis: "y", children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        render: /* @__PURE__ */ e(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": n.resizeAriaLabel,
+            className: f(
+              // 17px hit area, absolutely positioned on inline-end edge.
+              // The sidebar's own border-e provides the visible 1px line; its color
+              // changes via :has() on hover/active/focus-visible.
+              "absolute end-0 top-0 h-full w-[17px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10",
+              // On focus: 1px active-color line (after pseudo, CSS border for pixel-snap) + 3px box-shadow ring centered on it.
+              "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none",
+              "after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent",
+              "focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]"
+            ),
+            tabIndex: 0,
+            onKeyDown: m,
+            onPointerDown: x,
+            onClick: h,
+            onDoubleClick: T
+          }
+        )
+      }
+    ),
+    (a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed) != null && /* @__PURE__ */ e(A, { side: i === "rtl" ? "left" : "right", align: "center", children: a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed })
+  ] });
+}
+const oe = t.forwardRef(
+  ({
+    className: n,
+    expanded: a,
+    defaultExpanded: o = !0,
+    onExpandedChange: d,
+    resizable: i = !0,
+    width: r,
+    onWidthChange: s,
+    resizeAriaLabel: c = "Resize sidebar",
+    resizeTooltipExpanded: l = Y,
+    resizeTooltipCollapsed: p = Z,
+    "aria-label": g = "Section navigation",
+    render: u,
+    children: x,
+    ...h
+  }, T) => {
+    const [m, z] = ne(
+      a,
+      o,
+      d
+    ), [b, k] = t.useState(E), y = r !== void 0, N = y ? r : b, R = t.useCallback(
+      (U) => {
+        y || k(U), s == null || s(U);
+      },
+      [y, s]
+    ), [S, C] = t.useState(void 0), [w, D] = t.useState(void 0), L = t.useMemo(
+      () => ({
+        expanded: m,
+        toggleExpanded: () => z(!m),
+        resizable: i,
+        width: N,
+        setWidth: R,
+        minWidth: E,
+        maxWidth: Q,
+        defaultWidth: E,
+        headerLabel: S,
+        setHeaderLabel: C,
+        selectedLabel: w,
+        setSelectedLabel: D,
+        resizeAriaLabel: c,
+        resizeTooltipExpanded: l,
+        resizeTooltipCollapsed: p
+      }),
+      [
+        m,
+        z,
+        i,
+        N,
+        R,
+        S,
+        w,
+        c,
+        l,
+        p
+      ]
+    ), K = G({
+      render: u,
+      ref: T,
+      defaultTagName: "nav",
+      props: q(
+        {
+          "aria-label": g,
+          "data-state": m ? "expanded" : "collapsed",
+          style: i && m && (y || N !== E) ? { width: N } : void 0,
+          className: f(
+            "group/sidebar relative flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-e border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-inline-end-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
+            i && "transition-[width,border-color] has-[[role=separator]:hover]:[border-inline-end-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-end-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-end-color:var(--ui-resizable-border-color-active)]",
+            n
+          ),
+          children: /* @__PURE__ */ v(H, { children: [
+            /* @__PURE__ */ e(ee, {}),
+            x,
+            /* @__PURE__ */ e(ie, {})
+          ] })
+        },
+        h
+      )
+    });
+    return /* @__PURE__ */ e($.Provider, { value: L, children: K });
+  }
+);
+oe.displayName = "SidebarSecondary";
+const se = t.forwardRef(({ className: n, label: a, children: o, ...d }, i) => {
+  const { setHeaderLabel: r } = P(), s = a ?? o;
+  return t.useEffect(() => {
+    r(s);
+  }, [s, r]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: i,
+      className: f(
+        "hidden items-center shrink-0",
+        "group-data-[state=expanded]/sidebar:flex",
+        "px-[var(--ui-sidebar-secondary-global-container-header-padding-x)] py-[var(--ui-sidebar-secondary-global-container-header-padding-y)]",
+        n
+      ),
+      ...d,
+      children: /* @__PURE__ */ e("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: s })
+    }
+  );
+});
+se.displayName = "SidebarSecondaryHeader";
+const le = t.forwardRef(({ className: n, ...a }, o) => (
+  // Expanded: the section list. Hidden in collapsed mode, where the
+  // CollapsedBreadcrumb sibling takes over.
+  /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      className: f(
+        "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
+        "hidden group-data-[state=expanded]/sidebar:flex",
+        n
+      ),
+      ...a
+    }
+  )
+));
+le.displayName = "SidebarSecondaryContent";
+const ee = t.forwardRef(({ className: n, parentLabel: a, currentLabel: o, separator: d, ...i }, r) => {
+  const { headerLabel: s, selectedLabel: c } = P(), l = a ?? s, p = o ?? c;
+  return (
+    // Shown only in collapsed mode — toggled by the same data-[state] selector so
+    // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:
+    // parent → separator → current page.
+    /* @__PURE__ */ v(
+      "div",
+      {
+        ref: r,
+        className: f(
+          "flex flex-1 flex-col items-center min-h-0",
+          "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
+          "flex group-data-[state=expanded]/sidebar:hidden",
+          n
+        ),
+        ...i,
+        children: [
+          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: l }),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
+              children: d ?? /* @__PURE__ */ e(J, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: p })
+        ]
+      }
+    )
+  );
+});
+ee.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+const de = t.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: o,
+    className: f(
+      "flex flex-col shrink-0",
+      "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
+      "py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
+      n
+    ),
+    ...a
+  }
+));
+de.displayName = "SidebarSecondaryFooter";
+const _ = t.createContext({
+  expandable: !1
+}), ce = {
+  expandable: !1
+}, ue = {
+  expandable: !0
+}, be = t.forwardRef(
+  ({
+    className: n,
+    expandable: a = !1,
+    open: o,
+    defaultOpen: d = !0,
+    onOpenChange: i,
+    children: r,
+    ...s
+  }, c) => {
+    const l = f(
+      "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
+      n
+    );
+    return a ? /* @__PURE__ */ e(_.Provider, { value: ue, children: /* @__PURE__ */ e(
+      X.Root,
+      {
+        ref: c,
+        open: o,
+        defaultOpen: d,
+        onOpenChange: i,
+        render: /* @__PURE__ */ e("div", { className: l }),
+        ...s,
+        children: r
+      }
+    ) }) : /* @__PURE__ */ e(_.Provider, { value: ce, children: /* @__PURE__ */ e("div", { ref: c, className: l, ...s, children: r }) });
+  }
+);
+be.displayName = "SidebarSecondarySection";
+const V = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", j = "min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", fe = t.forwardRef(({ className: n, actions: a, unreadRollup: o, children: d, ...i }, r) => {
+  const { expandable: s } = t.useContext(_), c = B(), l = t.useRef(null), p = t.useRef(null), g = F(p, { enabled: !0 }), u = (h) => {
+    l.current = h, typeof r == "function" ? r(h) : r && (r.current = h);
+  }, x = /* @__PURE__ */ v(I, { disabled: !g, children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        render: /* @__PURE__ */ e(
+          "span",
+          {
+            ref: p,
+            className: "min-w-0 flex-1 truncate"
+          }
+        ),
+        children: d
+      }
+    ),
+    /* @__PURE__ */ e(A, { anchor: l, side: c === "rtl" ? "left" : "right", children: d })
+  ] });
+  if (!s) {
+    const h = f(V, j, n);
+    return a == null ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        className: f(
+          h,
+          "flex items-center"
+        ),
+        ...i,
+        children: x
+      }
+    ) : /* @__PURE__ */ v(
+      "div",
+      {
+        ref: u,
+        className: f(
+          h,
+          "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
+        ),
+        ...i,
+        children: [
+          x,
+          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: u,
+      className: f(
+        "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
+        j,
+        n
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ v(
+          X.Trigger,
+          {
+            className: f(
+              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer",
+              V,
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                J,
+                {
+                  size: 16,
+                  "aria-hidden": "true",
+                  className: "shrink-0 ltr:-rotate-90 rtl:rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]"
+                }
+              ),
+              x,
+              o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: o })
+            ]
+          }
+        ),
+        a != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
+      ]
+    }
+  );
+});
+fe.displayName = "SidebarSecondarySectionLabel";
+const pe = t.forwardRef(({ className: n, ...a }, o) => {
+  const { expandable: d } = t.useContext(_), i = /* @__PURE__ */ e(
+    "ul",
+    {
+      ref: o,
+      className: f(
+        "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
+        n
+      ),
+      ...a
+    }
+  );
+  return d ? /* @__PURE__ */ e(X.Panel, { children: i }) : i;
+});
+pe.displayName = "SidebarSecondaryMenu";
+const me = "group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", re = te(me, {
+  variants: {
+    variant: {
+      unselected: "bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]",
+      selected: "bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]"
+    }
+  },
+  defaultVariants: {
+    variant: "unselected"
+  }
+}), ve = t.forwardRef(
+  ({ className: n, selected: a = !1, icon: o, extras: d, render: i, children: r, ...s }, c) => {
+    const { expanded: l, setSelectedLabel: p } = P(), { expandable: g } = t.useContext(_), u = B(), x = t.useRef(null), h = t.useRef(null), T = F(h, { enabled: l });
+    t.useEffect(() => {
+      a && p(r);
+    }, [a, r, p]);
+    const m = G({
+      render: i,
+      ref: [c, x],
+      defaultTagName: "a",
+      props: q(
+        {
+          className: f(
+            re({
+              variant: a ? "selected" : "unselected"
+            }),
+            // Inside an expandable section, increase start padding so the
+            // label aligns with the section header text (after chevron + gap)
+            // while keeping the container full-width for hover/active fills.
+            g && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]",
+            n
+          ),
+          "aria-current": a ? "page" : void 0,
+          onKeyDown: (z) => {
+            z.key === " " && (z.preventDefault(), z.currentTarget.click());
+          },
+          children: /* @__PURE__ */ v(H, { children: [
+            o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: o }),
+            /* @__PURE__ */ v(I, { disabled: !T, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  render: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      ref: h,
+                      className: f(
+                        "flex-1 min-w-[60px] truncate text-start",
+                        !l && "sr-only"
+                      )
+                    }
+                  ),
+                  children: r
+                }
+              ),
+              /* @__PURE__ */ e(
+                A,
+                {
+                  anchor: x,
+                  side: u === "rtl" ? "left" : "right",
+                  children: r
+                }
+              )
+            ] }),
+            d
+          ] })
+        },
+        s
+      )
+    });
+    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
+      /* @__PURE__ */ e(O, { render: m }),
+      /* @__PURE__ */ e(A, { side: u === "rtl" ? "left" : "right", children: r })
+    ] }) });
+  }
+);
+ve.displayName = "SidebarSecondaryMenuItem";
+const he = t.forwardRef(({ className: n, variant: a, shortcut: o, tag: d, children: i, ...r }, s) => {
+  const { expanded: c } = P(), l = a === "tag" || a === "tag-externalLink", p = a === "externalLink" || a === "tag-externalLink", g = a === "shortcut";
+  return /* @__PURE__ */ v(
+    "span",
+    {
+      ref: s,
+      className: f(
+        "inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
+        !c && "hidden",
+        n
+      ),
+      ...r,
+      children: [
+        l && (d ?? i),
+        g && /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: o ?? i }),
+        p && /* @__PURE__ */ e(
+          ae,
+          {
+            size: 16,
+            className: "text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]"
+          }
+        )
+      ]
+    }
+  );
+});
+he.displayName = "SidebarSecondaryMenuItemExtras";
+const ge = t.forwardRef(
+  ({
+    className: n,
+    icon: a,
+    expandTooltip: o = "Expand",
+    extras: d,
+    children: i,
+    onClick: r,
+    ...s
+  }, c) => {
+    const { expanded: l, toggleExpanded: p } = P(), g = B(), u = t.useRef(null), x = t.useRef(null), h = F(x, { enabled: l }), T = /* @__PURE__ */ v(
+      "button",
+      {
+        ref: (m) => {
+          u.current = m, typeof c == "function" ? c(m) : c && (c.current = m);
+        },
+        type: "button",
+        "aria-expanded": l,
+        className: f(
+          re({ variant: "unselected" }),
+          "text-start",
+          n
+        ),
+        onClick: (m) => {
+          r == null || r(m), m.defaultPrevented || p();
+        },
+        ...s,
+        children: [
+          a != null && /* @__PURE__ */ e(
+            "span",
+            {
+              className: f(
+                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
+                l ? "rtl:rotate-180" : "ltr:rotate-180"
+              ),
+              children: a
+            }
+          ),
+          /* @__PURE__ */ v(I, { disabled: !h, children: [
+            /* @__PURE__ */ e(
+              O,
+              {
+                render: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    ref: x,
+                    className: f("flex-1 min-w-[60px] truncate", !l && "sr-only")
+                  }
+                ),
+                children: i
+              }
+            ),
+            /* @__PURE__ */ e(A, { anchor: u, side: g === "rtl" ? "left" : "right", children: i })
+          ] }),
+          d
+        ]
+      }
+    );
+    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
+      /* @__PURE__ */ e(O, { render: T }),
+      /* @__PURE__ */ e(A, { side: g === "rtl" ? "left" : "right", children: o })
+    ] }) });
+  }
+);
+ge.displayName = "SidebarSecondaryCollapseTrigger";
+export {
+  oe as SidebarSecondary,
+  ge as SidebarSecondaryCollapseTrigger,
+  ee as SidebarSecondaryCollapsedBreadcrumb,
+  le as SidebarSecondaryContent,
+  de as SidebarSecondaryFooter,
+  se as SidebarSecondaryHeader,
+  pe as SidebarSecondaryMenu,
+  ve as SidebarSecondaryMenuItem,
+  he as SidebarSecondaryMenuItemExtras,
+  be as SidebarSecondarySection,
+  fe as SidebarSecondarySectionLabel,
+  re as sidebarSecondaryMenuItemVariants
+};
+//# sourceMappingURL=sidebar-secondary.js.map