@acronis-platform/ui-react 4.1.0 → 5.1.0

package/dist/components/ui/separator/separator.js

@@ -1,16 +1,58 @@
 import { cn as e } from "../../../lib/utils.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Separator as r } from "@base-ui/react/separator";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Separator as i } from "@base-ui/react/separator";
 //#region src/components/ui/separator/separator.tsx
-var i = t.forwardRef(({ className: t, orientation: i = "horizontal", ...a }, o) => /* @__PURE__ */ n(r, {
-	ref: o,
-	orientation: i,
-	className: e("shrink-0 bg-border", i === "horizontal" ? "h-px w-full" : "h-full w-px", t),
-	...a
+var a = t("shrink-0 bg-[var(--ui-border-on-surface-divider)]", {
+	variants: {
+		orientation: {
+			horizontal: "h-px w-full",
+			vertical: "h-full w-px"
+		},
+		size: {
+			S1: "",
+			S2: "",
+			S3: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			size: "S2",
+			class: "my-[var(--ui-gap-4)]"
+		},
+		{
+			orientation: "horizontal",
+			size: "S3",
+			class: "my-[var(--ui-gap-8)]"
+		},
+		{
+			orientation: "vertical",
+			size: "S2",
+			class: "mx-[var(--ui-gap-4)]"
+		},
+		{
+			orientation: "vertical",
+			size: "S3",
+			class: "mx-[var(--ui-gap-8)]"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "S1"
+	}
+}), o = n.forwardRef(({ className: t, orientation: n = "horizontal", size: o = "S1", ...s }, c) => /* @__PURE__ */ r(i, {
+	ref: c,
+	orientation: n,
+	className: e(a({
+		orientation: n,
+		size: o
+	}), t),
+	...s
 }));
-i.displayName = "Separator";
+o.displayName = "Separator";
 //#endregion
-export { i as Separator };
+export { o as Separator };
 
 //# sourceMappingURL=separator.js.map

package/dist/components/ui/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token `bg-border`\n// (--ui-border-on-surface-border), replacing the legacy `bg-primary/10` hack.\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>\n>(({ className, orientation = 'horizontal', ...props }, ref) => (\n  <SeparatorPrimitive\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'shrink-0 bg-border',\n      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n      className\n    )}\n    {...props}\n  />\n));\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"mappings":";;;;;AAWA,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,iBAAc,cAAc,GAAG,KAAS,MACtD,kBAAC,GAAD;CACO;CACQ;CACb,WAAW,EACT,sBACA,MAAgB,eAAe,gBAAgB,eAC/C,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc"}
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token\n// `--ui-border-on-surface-divider` directly, matching every other divider\n// consumer in this package (Card, Wizard, Section, ...) rather than the\n// `bg-border` bridge (`--ui-border-on-surface-border`), a distinct semantic role\n// that happens to share the same value today.\n// `size` (Figma: S1/S2/S3) is the surrounding spacing Figma bakes into the\n// component itself; S1 (default) has none.\n\nconst separatorVariants = cva('shrink-0 bg-[var(--ui-border-on-surface-divider)]', {\n  variants: {\n    orientation: {\n      horizontal: 'h-px w-full',\n      vertical: 'h-full w-px',\n    },\n    size: {\n      S1: '',\n      S2: '',\n      S3: '',\n    },\n  },\n  compoundVariants: [\n    { orientation: 'horizontal', size: 'S2', class: 'my-[var(--ui-gap-4)]' },\n    { orientation: 'horizontal', size: 'S3', class: 'my-[var(--ui-gap-8)]' },\n    { orientation: 'vertical', size: 'S2', class: 'mx-[var(--ui-gap-4)]' },\n    { orientation: 'vertical', size: 'S3', class: 'mx-[var(--ui-gap-8)]' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    size: 'S1',\n  },\n});\n\ninterface SeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>,\n    Pick<VariantProps<typeof separatorVariants>, 'size'> {}\n\nconst Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive>, SeparatorProps>(\n  ({ className, orientation = 'horizontal', size = 'S1', ...props }, ref) => (\n    <SeparatorPrimitive\n      ref={ref}\n      orientation={orientation}\n      className={cn(separatorVariants({ orientation, size }), className)}\n      {...props}\n    />\n  )\n);\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"mappings":";;;;;;AAiBA,IAAM,IAAoB,EAAI,qDAAqD;CACjF,UAAU;EACR,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,kBAAkB;EAChB;GAAE,aAAa;GAAc,MAAM;GAAM,OAAO;EAAuB;EACvE;GAAE,aAAa;GAAc,MAAM;GAAM,OAAO;EAAuB;EACvE;GAAE,aAAa;GAAY,MAAM;GAAM,OAAO;EAAuB;EACrE;GAAE,aAAa;GAAY,MAAM;GAAM,OAAO;EAAuB;CACvE;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC,GAMK,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,cAAc,UAAO,MAAM,GAAG,KAAS,MACjE,kBAAC,GAAD;CACO;CACQ;CACb,WAAW,EAAG,EAAkB;EAAE;EAAa;CAAK,CAAC,GAAG,CAAS;CACjE,GAAI;AACL,CAAA,CAEL;AACA,EAAU,cAAc"}

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

@@ -42,6 +42,18 @@ var g = 256, _ = g * 2, v = /* @__PURE__ */ l(s, { children: [
 	}),
 	" Double click"
 ] }), y = /* @__PURE__ */ l(s, { children: [
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Resize:"
+	}),
+	" Drag",
+	/* @__PURE__ */ c("br", {}),
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Reset size:"
+	}),
+	" Double click"
+] }), b = /* @__PURE__ */ l(s, { children: [
 	/* @__PURE__ */ c("span", {
 		className: "font-semibold",
 		children: "Resize:"
@@ -53,11 +65,15 @@ var g = 256, _ = g * 2, v = /* @__PURE__ */ l(s, { children: [
 		children: "Expand:"
 	}),
 	" Click"
-] }), b = o.createContext(null);
-function x() {
-	return o.useContext(b) ?? {
+] }), x = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+	className: "font-semibold",
+	children: "Reset size:"
+}), " Double click"] }), S = o.createContext(null);
+function C() {
+	return o.useContext(S) ?? {
 		expanded: !0,
 		toggleExpanded: () => {},
+		collapsible: !0,
 		resizable: !1,
 		width: g,
 		setWidth: () => {},
@@ -70,25 +86,25 @@ function x() {
 		setSelectedLabel: () => {},
 		resizeAriaLabel: "Resize sidebar",
 		resizeTooltipExpanded: v,
-		resizeTooltipCollapsed: y
+		resizeTooltipCollapsed: b
 	};
 }
-function S(e, t, n) {
+function w(e, t, n) {
 	let [r, i] = o.useState(t), a = e !== void 0;
 	return [a ? e : r, o.useCallback((e) => {
 		a || i(e), n?.(e);
 	}, [a, n])];
 }
-function C() {
-	let t = x(), { expanded: s, toggleExpanded: u, resizable: d } = t, f = n(), p = o.useRef(t);
-	p.current = t;
-	let m = o.useRef(!1), [h, g] = o.useState(!1), [_, v] = o.useState(!1), y = o.useRef(null);
+function T() {
+	let t = C(), { expanded: s, toggleExpanded: u, resizable: d, collapsible: f } = t, p = n(), m = o.useRef(t);
+	m.current = t;
+	let h = o.useRef(!1), [g, _] = o.useState(!1), [v, y] = o.useState(!1), b = o.useRef(null);
 	return o.useEffect(() => () => {
-		y.current && clearTimeout(y.current);
+		b.current && clearTimeout(b.current);
 	}, []), d ? /* @__PURE__ */ l(r, {
-		open: h,
+		open: g,
 		onOpenChange: (e) => {
-			_ || g(e);
+			v || _(e);
 		},
 		trackCursorAxis: "y",
 		children: [/* @__PURE__ */ c(a, { render: /* @__PURE__ */ c("div", {
@@ -98,103 +114,109 @@ function C() {
 			className: e("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", "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: (e) => {
-				let { minWidth: t, maxWidth: n, defaultWidth: r, width: i, setWidth: a, expanded: o, toggleExpanded: s } = p.current, c = f === "rtl" ? "ArrowLeft" : "ArrowRight", l = f === "rtl" ? "ArrowRight" : "ArrowLeft";
-				if (e.key === c && o) e.preventDefault(), a(Math.min(i + 16, n));
-				else if (e.key === c && !o) e.preventDefault(), s();
-				else if (e.key === l && o) {
+				let { minWidth: t, maxWidth: n, defaultWidth: r, width: i, setWidth: a, expanded: o, toggleExpanded: s, collapsible: c } = m.current, l = p === "rtl" ? "ArrowLeft" : "ArrowRight", u = p === "rtl" ? "ArrowRight" : "ArrowLeft";
+				if (e.key === l && o) e.preventDefault(), a(Math.min(i + 16, n));
+				else if (e.key === l && !o) e.preventDefault(), c && s();
+				else if (e.key === u && o) {
 					e.preventDefault();
 					let n = i - 16;
-					n < t ? s() : a(n);
-				} else e.key === "Enter" || e.key === " " ? (e.preventDefault(), s()) : e.key === "Home" && (e.preventDefault(), o || s(), a(r));
+					n < t ? c ? s() : a(t) : a(n);
+				} else e.key === "Enter" || e.key === " " ? (e.preventDefault(), c && s()) : e.key === "Home" && (e.preventDefault(), !o && c && s(), a(r));
 			},
 			onPointerDown: (e) => {
 				e.preventDefault();
 				let t = e.currentTarget;
-				t.setPointerCapture(e.pointerId), m.current = !1, v(!0), g(!1);
+				t.setPointerCapture(e.pointerId), h.current = !1, y(!0), _(!1);
 				let n = t.closest("[data-state]");
 				if (!n) {
-					v(!1), t.releasePointerCapture(e.pointerId);
+					y(!1), t.releasePointerCapture(e.pointerId);
 					return;
 				}
 				n.style.transitionProperty = "none";
-				let r = getComputedStyle(n).direction === "rtl", i = n.getBoundingClientRect(), { minWidth: a, maxWidth: o } = p.current, s = a / 2, c = (e) => {
-					m.current = !0;
-					let t = r ? i.right - e.clientX : e.clientX - i.left, { expanded: n } = p.current;
-					n ? t < s ? p.current.toggleExpanded() : p.current.setWidth(Math.min(Math.max(t, a), o)) : t > s && p.current.toggleExpanded();
+				let r = getComputedStyle(n).direction === "rtl", i = n.getBoundingClientRect(), { minWidth: a, maxWidth: o } = m.current, s = a / 2, c = (e) => {
+					h.current = !0;
+					let t = r ? i.right - e.clientX : e.clientX - i.left, { expanded: n, collapsible: c } = m.current;
+					n ? t < s && c ? m.current.toggleExpanded() : m.current.setWidth(Math.min(Math.max(t, a), o)) : t > s && c && m.current.toggleExpanded();
 				}, l = () => {
-					v(!1), n && (n.style.transitionProperty = ""), window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l);
+					y(!1), n && (n.style.transitionProperty = ""), window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l);
 				};
 				window.addEventListener("pointermove", c), window.addEventListener("pointerup", l);
 			},
 			onClick: () => {
-				m.current || (y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-					u();
-				}, 250));
+				f && (h.current || (b.current && clearTimeout(b.current), b.current = setTimeout(() => {
+					m.current.collapsible && m.current.toggleExpanded();
+				}, 250)));
 			},
 			onDoubleClick: () => {
-				y.current &&= (clearTimeout(y.current), null), s || u(), p.current.setWidth(p.current.defaultWidth);
+				b.current &&= (clearTimeout(b.current), null), !s && f && u(), m.current.setWidth(m.current.defaultWidth);
 			}
 		}) }), (s ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed) != null && /* @__PURE__ */ c(i, {
-			side: f === "rtl" ? "left" : "right",
+			side: p === "rtl" ? "left" : "right",
 			align: "center",
 			children: s ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed
 		})]
 	}) : null;
 }
-var w = o.forwardRef(({ className: t, expanded: n, defaultExpanded: r = !0, onExpandedChange: i, resizable: a = !0, width: u, onWidthChange: d, resizeAriaLabel: f = "Resize sidebar", resizeTooltipExpanded: h = v, resizeTooltipCollapsed: x = y, "aria-label": w = "Section navigation", render: T, children: E, ...O }, k) => {
-	let [A, j] = S(n, r, i), [M, N] = o.useState(g), P = u !== void 0, F = P ? u : M, I = o.useCallback((e) => {
-		P || N(e), d?.(e);
-	}, [P, d]), [L, R] = o.useState(void 0), [z, B] = o.useState(void 0), V = o.useMemo(() => ({
-		expanded: A,
-		toggleExpanded: () => j(!A),
-		resizable: a,
-		width: F,
-		setWidth: I,
+var E = o.forwardRef(({ className: t, expanded: n, defaultExpanded: r = !0, onExpandedChange: i, collapsible: a = !0, resizable: u = !0, width: d, onWidthChange: f, resizeAriaLabel: h = "Resize sidebar", resizeTooltipExpanded: C = a ? v : y, resizeTooltipCollapsed: E = a ? b : x, "aria-label": D = "Section navigation", render: O, children: A, ...j }, M) => {
+	let [N, P] = w(n, r, i), [F, I] = o.useState(g), L = d !== void 0, R = L ? d : F, z = o.useCallback((e) => {
+		e !== R && (L || I(e), f?.(e));
+	}, [
+		L,
+		f,
+		R
+	]), [B, V] = o.useState(void 0), [H, U] = o.useState(void 0), W = o.useMemo(() => ({
+		expanded: N,
+		toggleExpanded: () => P(!N),
+		collapsible: a,
+		resizable: u,
+		width: R,
+		setWidth: z,
 		minWidth: g,
 		maxWidth: _,
 		defaultWidth: g,
-		headerLabel: L,
-		setHeaderLabel: R,
-		selectedLabel: z,
-		setSelectedLabel: B,
-		resizeAriaLabel: f,
-		resizeTooltipExpanded: h,
-		resizeTooltipCollapsed: x
+		headerLabel: B,
+		setHeaderLabel: V,
+		selectedLabel: H,
+		setSelectedLabel: U,
+		resizeAriaLabel: h,
+		resizeTooltipExpanded: C,
+		resizeTooltipCollapsed: E
 	}), [
-		A,
-		j,
+		N,
+		P,
 		a,
-		F,
-		I,
-		L,
+		u,
+		R,
 		z,
-		f,
+		B,
+		H,
 		h,
-		x
-	]), H = p({
-		render: T,
-		ref: k,
+		C,
+		E
+	]), G = p({
+		render: O,
+		ref: M,
 		defaultTagName: "nav",
 		props: m({
-			"aria-label": w,
-			"data-state": A ? "expanded" : "collapsed",
-			style: a && A && (P || F !== g) ? { width: F } : void 0,
-			className: e("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]", a && "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)]", t),
+			"aria-label": D,
+			"data-state": N ? "expanded" : "collapsed",
+			style: u && N && (L || R !== g) ? { width: R } : void 0,
+			className: e("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]", u && "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)]", t),
 			children: /* @__PURE__ */ l(s, { children: [
-				/* @__PURE__ */ c(D, {}),
-				E,
-				/* @__PURE__ */ c(C, {})
+				/* @__PURE__ */ c(k, {}),
+				A,
+				/* @__PURE__ */ c(T, {})
 			] })
-		}, O)
+		}, j)
 	});
-	return /* @__PURE__ */ c(b.Provider, {
-		value: V,
-		children: H
+	return /* @__PURE__ */ c(S.Provider, {
+		value: W,
+		children: G
 	});
 });
-w.displayName = "SidebarSecondary";
-var T = o.forwardRef(({ className: t, label: n, children: r, ...i }, a) => {
-	let { setHeaderLabel: s } = x(), l = n ?? r;
+E.displayName = "SidebarSecondary";
+var D = o.forwardRef(({ className: t, label: n, children: r, ...i }, a) => {
+	let { setHeaderLabel: s } = C(), l = n ?? r;
 	return o.useEffect(() => {
 		s(l);
 	}, [l, s]), /* @__PURE__ */ c("div", {
@@ -207,15 +229,15 @@ var T = o.forwardRef(({ className: t, label: n, children: r, ...i }, a) => {
 		})
 	});
 });
-T.displayName = "SidebarSecondaryHeader";
-var E = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
+D.displayName = "SidebarSecondaryHeader";
+var O = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
 	ref: r,
 	className: e("flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]", "hidden group-data-[state=expanded]/sidebar:flex", t),
 	...n
 }));
-E.displayName = "SidebarSecondaryContent";
-var D = o.forwardRef(({ className: t, parentLabel: n, currentLabel: r, separator: i, ...a }, o) => {
-	let { headerLabel: s, selectedLabel: d } = x(), f = n ?? s, p = r ?? d;
+O.displayName = "SidebarSecondaryContent";
+var k = o.forwardRef(({ className: t, parentLabel: n, currentLabel: r, separator: i, ...a }, o) => {
+	let { headerLabel: s, selectedLabel: d } = C(), f = n ?? s, p = r ?? d;
 	return /* @__PURE__ */ l("div", {
 		ref: o,
 		className: e("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", t),
@@ -237,17 +259,17 @@ var D = o.forwardRef(({ className: t, parentLabel: n, currentLabel: r, separator
 		]
 	});
 });
-D.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-var O = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
+k.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+var A = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
 	ref: r,
 	className: e("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)]", t),
 	...n
 }));
-O.displayName = "SidebarSecondaryFooter";
-var k = o.createContext({ expandable: !1 }), A = { expandable: !1 }, j = { expandable: !0 }, M = o.forwardRef(({ className: t, expandable: n = !1, open: r, defaultOpen: i = !0, onOpenChange: a, children: o, ...s }, l) => {
+A.displayName = "SidebarSecondaryFooter";
+var j = o.createContext({ expandable: !1 }), M = { expandable: !1 }, N = { expandable: !0 }, P = o.forwardRef(({ className: t, expandable: n = !1, open: r, defaultOpen: i = !0, onOpenChange: a, children: o, ...s }, l) => {
 	let u = e("flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]", t);
-	return n ? /* @__PURE__ */ c(k.Provider, {
-		value: j,
+	return n ? /* @__PURE__ */ c(j.Provider, {
+		value: N,
 		children: /* @__PURE__ */ c(f.Root, {
 			ref: l,
 			open: r,
@@ -257,8 +279,8 @@ var k = o.createContext({ expandable: !1 }), A = { expandable: !1 }, j = { expan
 			...s,
 			children: o
 		})
-	}) : /* @__PURE__ */ c(k.Provider, {
-		value: A,
+	}) : /* @__PURE__ */ c(j.Provider, {
+		value: M,
 		children: /* @__PURE__ */ c("div", {
 			ref: l,
 			className: u,
@@ -267,9 +289,9 @@ var k = o.createContext({ expandable: !1 }), A = { expandable: !1 }, j = { expan
 		})
 	});
 });
-M.displayName = "SidebarSecondarySection";
-var N = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", P = "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)]", F = o.forwardRef(({ className: t, actions: s, unreadRollup: d, children: p, ...m }, g) => {
-	let { expandable: _ } = o.useContext(k), v = n(), y = o.useRef(null), b = o.useRef(null), x = h(b, { enabled: !0 }), S = (e) => {
+P.displayName = "SidebarSecondarySection";
+var F = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", I = "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)]", L = o.forwardRef(({ className: t, actions: s, unreadRollup: d, children: p, ...m }, g) => {
+	let { expandable: _ } = o.useContext(j), v = n(), y = o.useRef(null), b = o.useRef(null), x = h(b, { enabled: !0 }), S = (e) => {
 		y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
 	}, C = /* @__PURE__ */ l(r, {
 		disabled: !x,
@@ -286,7 +308,7 @@ var N = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-si
 		})]
 	});
 	if (!_) {
-		let n = e(N, P, t);
+		let n = e(F, I, t);
 		return s == null ? /* @__PURE__ */ c("div", {
 			ref: S,
 			className: e(n, "flex items-center"),
@@ -304,10 +326,10 @@ var N = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-si
 	}
 	return /* @__PURE__ */ l("div", {
 		ref: S,
-		className: e("flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]", P, t),
+		className: e("flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]", I, t),
 		...m,
 		children: [/* @__PURE__ */ l(f.Trigger, {
-			className: e("group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer", N, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"),
+			className: e("group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer", F, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"),
 			children: [
 				/* @__PURE__ */ c(u, {
 					size: 16,
@@ -326,37 +348,37 @@ var N = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-si
 		})]
 	});
 });
-F.displayName = "SidebarSecondarySectionLabel";
-var I = o.forwardRef(({ className: t, ...n }, r) => {
-	let { expandable: i } = o.useContext(k), a = /* @__PURE__ */ c("ul", {
+L.displayName = "SidebarSecondarySectionLabel";
+var R = o.forwardRef(({ className: t, ...n }, r) => {
+	let { expandable: i } = o.useContext(j), a = /* @__PURE__ */ c("ul", {
 		ref: r,
 		className: e("flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", t),
 		...n
 	});
 	return i ? /* @__PURE__ */ c(f.Panel, { children: a }) : a;
 });
-I.displayName = "SidebarSecondaryMenu";
-var L = t("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)]", {
+R.displayName = "SidebarSecondaryMenu";
+var z = t("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)]", {
 	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" }
-}), R = o.forwardRef(({ className: t, selected: u = !1, icon: d, extras: f, render: g, children: _, ...v }, y) => {
-	let { expanded: b, setSelectedLabel: S } = x(), { expandable: C } = o.useContext(k), w = n(), T = o.useRef(null), E = o.useRef(null), D = h(E, { enabled: b });
+}), B = o.forwardRef(({ className: t, selected: u = !1, icon: d, extras: f, render: g, children: _, ...v }, y) => {
+	let { expanded: b, setSelectedLabel: x } = C(), { expandable: S } = o.useContext(j), w = n(), T = o.useRef(null), E = o.useRef(null), D = h(E, { enabled: b });
 	o.useEffect(() => {
-		u && S(_);
+		u && x(_);
 	}, [
 		u,
 		_,
-		S
+		x
 	]);
 	let O = p({
 		render: g,
 		ref: [y, T],
 		defaultTagName: "a",
 		props: m({
-			className: e(L({ variant: u ? "selected" : "unselected" }), C && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]", t),
+			className: e(z({ variant: u ? "selected" : "unselected" }), S && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]", t),
 			"aria-current": u ? "page" : void 0,
 			onKeyDown: (e) => {
 				e.key === " " && (e.preventDefault(), e.currentTarget.click());
@@ -395,9 +417,9 @@ var L = t("group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-men
 		})
 	});
 });
-R.displayName = "SidebarSecondaryMenuItem";
-var z = o.forwardRef(({ className: t, variant: n, shortcut: r, tag: i, children: a, ...o }, s) => {
-	let { expanded: u } = x(), f = n === "tag" || n === "tag-externalLink", p = n === "externalLink" || n === "tag-externalLink", m = n === "shortcut";
+B.displayName = "SidebarSecondaryMenuItem";
+var V = o.forwardRef(({ className: t, variant: n, shortcut: r, tag: i, children: a, ...o }, s) => {
+	let { expanded: u } = C(), f = n === "tag" || n === "tag-externalLink", p = n === "externalLink" || n === "tag-externalLink", m = n === "shortcut";
 	return /* @__PURE__ */ l("span", {
 		ref: s,
 		className: e("inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]", !u && "hidden", t),
@@ -415,35 +437,36 @@ var z = o.forwardRef(({ className: t, variant: n, shortcut: r, tag: i, children:
 		]
 	});
 });
-z.displayName = "SidebarSecondaryMenuItemExtras";
-var B = o.forwardRef(({ className: t, icon: s, expandTooltip: u = "Expand", extras: d, children: f, onClick: p, ...m }, g) => {
-	let { expanded: _, toggleExpanded: v } = x(), y = n(), b = o.useRef(null), S = o.useRef(null), C = h(S, { enabled: _ }), w = /* @__PURE__ */ l("button", {
+V.displayName = "SidebarSecondaryMenuItemExtras";
+var H = o.forwardRef(({ className: t, icon: s, expandTooltip: u = "Expand", extras: d, children: f, onClick: p, disabled: m, ...g }, _) => {
+	let { expanded: v, toggleExpanded: y, collapsible: b } = C(), x = n(), S = o.useRef(null), w = o.useRef(null), T = h(w, { enabled: v }), E = /* @__PURE__ */ l("button", {
 		ref: (e) => {
-			b.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+			S.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
 		},
 		type: "button",
-		"aria-expanded": _,
-		className: e(L({ variant: "unselected" }), "text-start", t),
+		"aria-expanded": b ? v : void 0,
+		disabled: m || !b,
+		className: e(z({ variant: "unselected" }), "text-start", "disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)] disabled:[&_svg]:text-[var(--ui-text-on-surface-disabled)] disabled:hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] disabled:active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)]", t),
 		onClick: (e) => {
-			p?.(e), e.defaultPrevented || v();
+			p?.(e), !e.defaultPrevented && b && y();
 		},
-		...m,
+		...g,
 		children: [
 			s != null && /* @__PURE__ */ c("span", {
-				className: e("flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform", _ ? "rtl:rotate-180" : "ltr:rotate-180"),
+				className: e("flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform", v ? "rtl:rotate-180" : "ltr:rotate-180"),
 				children: s
 			}),
 			/* @__PURE__ */ l(r, {
-				disabled: !C,
+				disabled: !T,
 				children: [/* @__PURE__ */ c(a, {
 					render: /* @__PURE__ */ c("span", {
-						ref: S,
-						className: e("flex-1 min-w-[60px] truncate", !_ && "sr-only")
+						ref: w,
+						className: e("flex-1 min-w-[60px] truncate", !v && "sr-only")
 					}),
 					children: f
 				}), /* @__PURE__ */ c(i, {
-					anchor: b,
-					side: y === "rtl" ? "left" : "right",
+					anchor: S,
+					side: x === "rtl" ? "left" : "right",
 					children: f
 				})]
 			}),
@@ -453,16 +476,16 @@ var B = o.forwardRef(({ className: t, icon: s, expandTooltip: u = "Expand", extr
 	return /* @__PURE__ */ c("li", {
 		className: "contents",
 		children: /* @__PURE__ */ l(r, {
-			disabled: _,
-			children: [/* @__PURE__ */ c(a, { render: w }), /* @__PURE__ */ c(i, {
-				side: y === "rtl" ? "left" : "right",
+			disabled: v || !b,
+			children: [/* @__PURE__ */ c(a, { render: E }), /* @__PURE__ */ c(i, {
+				side: x === "rtl" ? "left" : "right",
 				children: u
 			})]
 		})
 	});
 });
-B.displayName = "SidebarSecondaryCollapseTrigger";
+H.displayName = "SidebarSecondaryCollapseTrigger";
 //#endregion
-export { w as SidebarSecondary, B as SidebarSecondaryCollapseTrigger, D as SidebarSecondaryCollapsedBreadcrumb, E as SidebarSecondaryContent, O as SidebarSecondaryFooter, T as SidebarSecondaryHeader, I as SidebarSecondaryMenu, R as SidebarSecondaryMenuItem, z as SidebarSecondaryMenuItemExtras, M as SidebarSecondarySection, F as SidebarSecondarySectionLabel, L as sidebarSecondaryMenuItemVariants };
+export { E as SidebarSecondary, H as SidebarSecondaryCollapseTrigger, k as SidebarSecondaryCollapsedBreadcrumb, O as SidebarSecondaryContent, A as SidebarSecondaryFooter, D as SidebarSecondaryHeader, R as SidebarSecondaryMenu, B as SidebarSecondaryMenuItem, V as SidebarSecondaryMenuItemExtras, P as SidebarSecondarySection, L as SidebarSecondarySectionLabel, z as sidebarSecondaryMenuItemVariants };
 
 //# sourceMappingURL=sidebar-secondary.js.map