npm - @acronis-platform/ui-react - Versions diffs - 3.0.0 → 4.1.0 - Mend

@acronis-platform/ui-react 3.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (772) hide show

package/dist/components/ui/sidebar-primary/sidebar-primary.js CHANGED Viewed

@@ -1,369 +1,225 @@
-import { jsx as a, jsxs as y, Fragment as k } from "react/jsx-runtime";
-import * as n from "react";
-import { mergeProps as P } from "@base-ui/react/merge-props";
-import { useRender as R } from "@base-ui/react/use-render";
-import { SquareArrowUpRightIcon as M } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as z } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as c } from "../../../lib/utils.js";
-import { useDocDir as _ } from "../../../lib/use-doc-dir.js";
-import { Tooltip as f, TooltipTrigger as h, TooltipContent as x } from "../tooltip/tooltip.js";
-import { ScrollArea as O } from "../scroll-area/scroll-area.js";
-const T = n.createContext(null);
-function w() {
-  return n.useContext(T) ?? {
-    expanded: !0,
-    toggleExpanded: () => {
-    }
-  };
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { useDocDir as n } from "../../../lib/use-doc-dir.js";
+import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../tooltip/tooltip.js";
+import { ScrollArea as o } from "../scroll-area/scroll-area.js";
+import * as s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { SquareArrowUpRightIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { useRender as f } from "@base-ui/react/use-render";
+import { mergeProps as p } from "@base-ui/react/merge-props";
+//#region src/components/ui/sidebar-primary/sidebar-primary.tsx
+var m = s.createContext(null);
+function h() {
+	return s.useContext(m) ?? {
+		expanded: !0,
+		toggleExpanded: () => {}
+	};
 }
-function C(i, e, r) {
-  const [l, s] = n.useState(e), t = i !== void 0, d = t ? i : l, m = n.useCallback(
-    (o) => {
-      t || s(o), r == null || r(o);
-    },
-    [t, r]
-  );
-  return [d, m];
+function g(e, t, n) {
+	let [r, i] = s.useState(t), a = e !== void 0;
+	return [a ? e : r, s.useCallback((e) => {
+		a || i(e), n?.(e);
+	}, [a, n])];
 }
-function E(i, { enabled: e }) {
-  const [r, l] = n.useState(!1);
-  return n.useEffect(() => {
-    const s = i.current;
-    if (!e || !s) {
-      l(!1);
-      return;
-    }
-    const t = () => l(s.scrollWidth > s.clientWidth);
-    t();
-    const d = new ResizeObserver(t);
-    return d.observe(s), () => d.disconnect();
-  }, [i, e]), r;
+function _(e, { enabled: t }) {
+	let [n, r] = s.useState(!1);
+	return s.useEffect(() => {
+		let n = e.current;
+		if (!t || !n) {
+			r(!1);
+			return;
+		}
+		let i = () => r(n.scrollWidth > n.clientWidth);
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(n), () => a.disconnect();
+	}, [e, t]), n;
 }
-const D = n.forwardRef(
-  ({
-    className: i,
-    expanded: e,
-    defaultExpanded: r = !0,
-    onExpandedChange: l,
-    "aria-label": s = "Primary",
-    render: t,
-    children: d,
-    ...m
-  }, o) => {
-    const [u, p] = C(
-      e,
-      r,
-      l
-    ), v = n.useMemo(
-      () => ({ expanded: u, toggleExpanded: () => p(!u) }),
-      [u, p]
-    ), g = R({
-      render: t,
-      ref: o,
-      defaultTagName: "nav",
-      props: P(
-        {
-          "aria-label": s,
-          "data-state": u ? "expanded" : "collapsed",
-          className: c(
-            "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]",
-            i
-          ),
-          children: d
-        },
-        m
-      )
-    });
-    return /* @__PURE__ */ a(T.Provider, { value: v, children: g });
-  }
-);
-D.displayName = "SidebarPrimary";
-const F = n.forwardRef(({ className: i, logo: e, collapsedLogo: r, children: l, ...s }, t) => {
-  const { expanded: d } = w(), o = e != null || r != null ? d ? e ?? r : r ?? e : l;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: c(
-        "flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)] transition-[padding]",
-        "px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]",
-        // `logo`/`collapsedLogo` are two separate elements swapped by a JS
-        // conditional (not one element whose size CSS-transitions) — the new
-        // one mounts at its final height instantly, while `padding-y` is
-        // still mid-transition. Since the two states' (padding*2 + logo
-        // height) sums only match at the transition's start/end, that instant
-        // pop makes the row briefly overshoot/undershoot its resting height
-        // and "jump". Pinning the row to the larger of the two sums makes the
-        // outer box's height constant across the whole transition regardless
-        // of that mismatch — padding/logo-height still animate cosmetically
-        // inside it.
-        "h-[max(calc(var(--ui-sidebar-primary-collapsed-container-header-padding-y)*2+var(--ui-sidebar-primary-collapsed-logo-height)),calc(var(--ui-sidebar-primary-expanded-container-header-padding-y)*2+var(--ui-sidebar-primary-expanded-logo-height)))]",
-        // Animate the logo's own height alongside the header's padding transition
-        // (both keyed off the same `data-state` flip) — without it the logo swaps
-        // size instantly while the rail width is still animating, reading as a jump.
-        "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto [&_:where(img,svg)]:transition-[height]",
-        "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-primary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-primary-expanded-container-header-padding-y)]",
-        "group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]",
-        i
-      ),
-      ...s,
-      children: o
-    }
-  );
+var v = s.forwardRef(({ className: t, expanded: n, defaultExpanded: r = !0, onExpandedChange: i, "aria-label": a = "Primary", render: o, children: c, ...u }, d) => {
+	let [h, _] = g(n, r, i), v = s.useMemo(() => ({
+		expanded: h,
+		toggleExpanded: () => _(!h)
+	}), [h, _]), y = f({
+		render: o,
+		ref: d,
+		defaultTagName: "nav",
+		props: p({
+			"aria-label": a,
+			"data-state": h ? "expanded" : "collapsed",
+			className: e("group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]", t),
+			children: c
+		}, u)
+	});
+	return /* @__PURE__ */ l(m.Provider, {
+		value: v,
+		children: y
+	});
 });
-F.displayName = "SidebarPrimaryHeader";
-const L = n.forwardRef(({ className: i, children: e, ...r }, l) => (
-  // The section list scrolls inside a ScrollArea: its overlay scrollbar floats
-  // over the content and reserves no gutter, so the full-bleed selected row is
-  // never cropped — on every OS, unlike a native `overflow` scrollbar.
-  //
-  // Base UI's Scroll Area Content sets `min-width: fit-content` inline (it
-  // needs the content's true intrinsic width to detect horizontal overflow),
-  // which forces every row wider than the rail — overriding `min-w-0` +
-  // `truncate` on a long label, since intrinsic-width calculations ignore
-  // `text-overflow`. We only ever scroll vertically here, so cancel it: the
-  // `!` (important) is required to beat the inline style's specificity.
-  /* @__PURE__ */ a(
-    O,
-    {
-      ref: l,
-      className: c(
-        "min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!",
-        i
-      ),
-      ...r,
-      children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e })
-    }
-  )
-));
-L.displayName = "SidebarPrimaryContent";
-const V = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: r,
-    className: c(
-      "flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]",
-      "border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]",
-      i
-    ),
-    ...e
-  }
-));
-V.displayName = "SidebarPrimaryFooter";
-const j = n.forwardRef(({ className: i, ...e }, r) => (
-  // position (`:not(:first-child)`) instead of a prop.
-  /* @__PURE__ */ a(
-    "div",
-    {
-      ref: r,
-      className: c(
-        "flex flex-col pb-[var(--ui-sidebar-primary-section-container-padding-y)]",
-        "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)] [&:not(:first-child)]:pt-[var(--ui-sidebar-primary-section-container-padding-y)]",
-        i
-      ),
-      ...e
-    }
-  )
-));
-j.displayName = "SidebarPrimarySection";
-const A = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
-  "ul",
-  {
-    ref: r,
-    className: c(
-      "flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]",
-      i
-    ),
-    ...e
-  }
-));
-A.displayName = "SidebarPrimaryMenu";
-const I = z(
-  "group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline cursor-pointer ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]",
-  {
-    variants: {
-      variant: {
-        unselected: "bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-active)]",
-        selected: "bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-selected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-active)]"
-      }
-    },
-    defaultVariants: {
-      variant: "unselected"
-    }
-  }
-), H = n.forwardRef(
-  ({
-    className: i,
-    selected: e = !1,
-    icon: r,
-    noIcon: l,
-    render: s,
-    children: t,
-    extras: d,
-    ...m
-  }, o) => {
-    const { expanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: u }), S = R({
-      render: s,
-      ref: [o, v],
-      defaultTagName: "a",
-      props: P(
-        {
-          className: c(
-            I({
-              variant: e ? "selected" : "unselected"
-            }),
-            i
-          ),
-          "aria-current": e ? "page" : void 0,
-          onKeyDown: (b) => {
-            b.key === " " && (b.preventDefault(), b.currentTarget.click());
-          },
-          children: /* @__PURE__ */ y(k, { children: [
-            r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
-            /* @__PURE__ */ y(f, { disabled: !N, children: [
-              /* @__PURE__ */ a(
-                h,
-                {
-                  render: /* @__PURE__ */ a(
-                    "span",
-                    {
-                      ref: g,
-                      className: c(
-                        "min-w-0 flex-1 truncate text-start",
-                        !u && "sr-only"
-                      )
-                    }
-                  ),
-                  children: t
-                }
-              ),
-              /* @__PURE__ */ a(
-                x,
-                {
-                  anchor: v,
-                  side: p === "rtl" ? "left" : "right",
-                  children: t
-                }
-              )
-            ] }),
-            d != null && /* @__PURE__ */ a("span", { className: c(!u && "hidden"), children: d })
-          ] })
-        },
-        m
-      )
-    });
-    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: u, children: [
-      /* @__PURE__ */ a(h, { render: S }),
-      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: t })
-    ] }) });
-  }
-);
-H.displayName = "SidebarPrimaryMenuItem";
-const U = n.forwardRef(({ className: i, variant: e, shortcut: r, tag: l, children: s, ...t }, d) => {
-  const { expanded: m } = w(), o = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
-  return /* @__PURE__ */ y(
-    "span",
-    {
-      ref: d,
-      className: c(
-        "inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]",
-        !m && "hidden",
-        i
-      ),
-      ...t,
-      children: [
-        o && (l ?? s),
-        p && /* @__PURE__ */ a("span", { className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]", children: r ?? s }),
-        u && /* @__PURE__ */ a(
-          M,
-          {
-            size: 16,
-            className: "text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]"
-          }
-        )
-      ]
-    }
-  );
+v.displayName = "SidebarPrimary";
+var y = s.forwardRef(({ className: t, logo: n, collapsedLogo: r, children: i, ...a }, o) => {
+	let { expanded: s } = h(), c = n != null || r != null ? s ? n ?? r : r ?? n : i;
+	return /* @__PURE__ */ l("div", {
+		ref: o,
+		className: e("flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)] transition-[padding]", "px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]", "h-[max(calc(var(--ui-sidebar-primary-collapsed-container-header-padding-y)*2+var(--ui-sidebar-primary-collapsed-logo-height)),calc(var(--ui-sidebar-primary-expanded-container-header-padding-y)*2+var(--ui-sidebar-primary-expanded-logo-height)))]", "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto [&_:where(img,svg)]:transition-[height]", "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-primary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-primary-expanded-container-header-padding-y)]", "group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]", t),
+		...a,
+		children: c
+	});
 });
-U.displayName = "SidebarPrimaryMenuItemExtras";
-const W = n.forwardRef(
-  ({ className: i, icon: e, children: r, extras: l, expandTooltip: s = "Expand", onClick: t, ...d }, m) => {
-    const { expanded: o, toggleExpanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: o }), S = /* @__PURE__ */ y(
-      "button",
-      {
-        ref: (b) => {
-          v.current = b, typeof m == "function" ? m(b) : m && (m.current = b);
-        },
-        type: "button",
-        "aria-expanded": o,
-        className: c(
-          I({ variant: "unselected" }),
-          "text-start",
-          i
-        ),
-        onClick: (b) => {
-          t == null || t(b), b.defaultPrevented || u();
-        },
-        ...d,
-        children: [
-          e != null && /* @__PURE__ */ a(
-            "span",
-            {
-              className: c(
-                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform",
-                o ? "rtl:rotate-180" : "ltr:rotate-180"
-              ),
-              children: e
-            }
-          ),
-          /* @__PURE__ */ y(f, { disabled: !N, children: [
-            /* @__PURE__ */ a(
-              h,
-              {
-                render: /* @__PURE__ */ a(
-                  "span",
-                  {
-                    ref: g,
-                    className: c(
-                      "min-w-0 flex-1 truncate",
-                      !o && "sr-only"
-                    )
-                  }
-                ),
-                children: r
-              }
-            ),
-            /* @__PURE__ */ a(
-              x,
-              {
-                anchor: v,
-                side: p === "rtl" ? "left" : "right",
-                children: r
-              }
-            )
-          ] }),
-          l != null && /* @__PURE__ */ a("span", { className: c(!o && "hidden"), children: l })
-        ]
-      }
-    );
-    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: o, children: [
-      /* @__PURE__ */ a(h, { render: S }),
-      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: s })
-    ] }) });
-  }
-);
-W.displayName = "SidebarPrimaryCollapseTrigger";
-export {
-  D as SidebarPrimary,
-  W as SidebarPrimaryCollapseTrigger,
-  L as SidebarPrimaryContent,
-  V as SidebarPrimaryFooter,
-  F as SidebarPrimaryHeader,
-  A as SidebarPrimaryMenu,
-  H as SidebarPrimaryMenuItem,
-  U as SidebarPrimaryMenuItemExtras,
-  j as SidebarPrimarySection,
-  I as sidebarPrimaryMenuItemVariants,
-  E as useIsOverflowing
-};
-//# sourceMappingURL=sidebar-primary.js.map
+y.displayName = "SidebarPrimaryHeader";
+var b = s.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ l(o, {
+	ref: i,
+	className: e("min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!", t),
+	...r,
+	children: /* @__PURE__ */ l("div", {
+		className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]",
+		children: n
+	})
+}));
+b.displayName = "SidebarPrimaryContent";
+var x = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: e("flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]", "border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]", t),
+	...n
+}));
+x.displayName = "SidebarPrimaryFooter";
+var S = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	ref: r,
+	className: e("flex flex-col pb-[var(--ui-sidebar-primary-section-container-padding-y)]", "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)] [&:not(:first-child)]:pt-[var(--ui-sidebar-primary-section-container-padding-y)]", t),
+	...n
+}));
+S.displayName = "SidebarPrimarySection";
+var C = s.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("ul", {
+	ref: r,
+	className: e("flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]", t),
+	...n
+}));
+C.displayName = "SidebarPrimaryMenu";
+var w = t("group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline cursor-pointer ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]", {
+	variants: { variant: {
+		unselected: "bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-active)]",
+		selected: "bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-selected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-active)]"
+	} },
+	defaultVariants: { variant: "unselected" }
+}), T = s.forwardRef(({ className: t, selected: o = !1, icon: d, noIcon: m, render: g, children: v, extras: y, ...b }, x) => {
+	let { expanded: S } = h(), C = n(), T = s.useRef(null), E = s.useRef(null), D = _(E, { enabled: S }), O = f({
+		render: g,
+		ref: [x, T],
+		defaultTagName: "a",
+		props: p({
+			className: e(w({ variant: o ? "selected" : "unselected" }), t),
+			"aria-current": o ? "page" : void 0,
+			onKeyDown: (e) => {
+				e.key === " " && (e.preventDefault(), e.currentTarget.click());
+			},
+			children: /* @__PURE__ */ u(c, { children: [
+				d != null && /* @__PURE__ */ l("span", {
+					className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]",
+					children: d
+				}),
+				/* @__PURE__ */ u(r, {
+					disabled: !D,
+					children: [/* @__PURE__ */ l(a, {
+						render: /* @__PURE__ */ l("span", {
+							ref: E,
+							className: e("min-w-0 flex-1 truncate text-start", !S && "sr-only")
+						}),
+						children: v
+					}), /* @__PURE__ */ l(i, {
+						anchor: T,
+						side: C === "rtl" ? "left" : "right",
+						children: v
+					})]
+				}),
+				y != null && /* @__PURE__ */ l("span", {
+					className: e(!S && "hidden"),
+					children: y
+				})
+			] })
+		}, b)
+	});
+	return /* @__PURE__ */ l("li", {
+		className: "contents",
+		children: /* @__PURE__ */ u(r, {
+			disabled: S,
+			children: [/* @__PURE__ */ l(a, { render: O }), /* @__PURE__ */ l(i, {
+				side: C === "rtl" ? "left" : "right",
+				children: v
+			})]
+		})
+	});
+});
+T.displayName = "SidebarPrimaryMenuItem";
+var E = s.forwardRef(({ className: t, variant: n, shortcut: r, tag: i, children: a, ...o }, s) => {
+	let { expanded: c } = h(), f = n === "tag" || n === "tag-externalLink", p = n === "externalLink" || n === "tag-externalLink", m = n === "shortcut";
+	return /* @__PURE__ */ u("span", {
+		ref: s,
+		className: e("inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]", !c && "hidden", t),
+		...o,
+		children: [
+			f && (i ?? a),
+			m && /* @__PURE__ */ l("span", {
+				className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]",
+				children: r ?? a
+			}),
+			p && /* @__PURE__ */ l(d, {
+				size: 16,
+				className: "text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]"
+			})
+		]
+	});
+});
+E.displayName = "SidebarPrimaryMenuItemExtras";
+var D = s.forwardRef(({ className: t, icon: o, children: c, extras: d, expandTooltip: f = "Expand", onClick: p, ...m }, g) => {
+	let { expanded: v, toggleExpanded: y } = h(), b = n(), x = s.useRef(null), S = s.useRef(null), C = _(S, { enabled: v }), T = /* @__PURE__ */ u("button", {
+		ref: (e) => {
+			x.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+		},
+		type: "button",
+		"aria-expanded": v,
+		className: e(w({ variant: "unselected" }), "text-start", t),
+		onClick: (e) => {
+			p?.(e), e.defaultPrevented || y();
+		},
+		...m,
+		children: [
+			o != null && /* @__PURE__ */ l("span", {
+				className: e("flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform", v ? "rtl:rotate-180" : "ltr:rotate-180"),
+				children: o
+			}),
+			/* @__PURE__ */ u(r, {
+				disabled: !C,
+				children: [/* @__PURE__ */ l(a, {
+					render: /* @__PURE__ */ l("span", {
+						ref: S,
+						className: e("min-w-0 flex-1 truncate", !v && "sr-only")
+					}),
+					children: c
+				}), /* @__PURE__ */ l(i, {
+					anchor: x,
+					side: b === "rtl" ? "left" : "right",
+					children: c
+				})]
+			}),
+			d != null && /* @__PURE__ */ l("span", {
+				className: e(!v && "hidden"),
+				children: d
+			})
+		]
+	});
+	return /* @__PURE__ */ l("li", {
+		className: "contents",
+		children: /* @__PURE__ */ u(r, {
+			disabled: v,
+			children: [/* @__PURE__ */ l(a, { render: T }), /* @__PURE__ */ l(i, {
+				side: b === "rtl" ? "left" : "right",
+				children: f
+			})]
+		})
+	});
+});
+D.displayName = "SidebarPrimaryCollapseTrigger";
+//#endregion
+export { v as SidebarPrimary, D as SidebarPrimaryCollapseTrigger, b as SidebarPrimaryContent, x as SidebarPrimaryFooter, y as SidebarPrimaryHeader, C as SidebarPrimaryMenu, T as SidebarPrimaryMenuItem, E as SidebarPrimaryMenuItemExtras, S as SidebarPrimarySection, w as sidebarPrimaryMenuItemVariants, _ as useIsOverflowing };
+//# sourceMappingURL=sidebar-primary.js.map