alif-ui 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/components/NativeAccordion/NativeAccordionTrigger/NativeAccordionTrigger.js

@@ -0,0 +1,27 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import { OutlineNavigationChevronDown as t } from "../../../icons/components/OutlineNavigationChevronDown.js";
+import { useNativeAccordionItemContext as n } from "../NativeAccordion.context.js";
+import r from "../../../lib/components/NativeAccordion/NativeAccordion.module.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/components/NativeAccordion/NativeAccordionTrigger/NativeAccordionTrigger.tsx
+var o = ({ chevron: o, children: s, className: c, style: l, ref: u }) => {
+	let { disabled: d, isOpen: f, toggle: p } = n();
+	return /* @__PURE__ */ a("summary", {
+		ref: u,
+		style: l,
+		onClick: (e) => {
+			e.preventDefault(), d || p();
+		},
+		"aria-disabled": d || void 0,
+		tabIndex: d ? -1 : void 0,
+		className: e(r.trigger, d && r.disabled, c),
+		children: [/* @__PURE__ */ i("div", { children: s }), /* @__PURE__ */ i("span", {
+			className: r.triggerIcon,
+			"aria-hidden": "true",
+			children: typeof o == "function" ? o(f) : o ?? /* @__PURE__ */ i(t, { className: r.chevron })
+		})]
+	});
+};
+//#endregion
+export { o as NativeAccordionTrigger };

package/dist/components/Pagination/Pagination.js

@@ -1,10 +1,10 @@
 "use client";
 import { classNames as e } from "../../utils/class-names.js";
-import { OutlineNavigationChevronLeft as t } from "../../icons/components/OutlineNavigationChevronLeft.js";
-import { OutlineNavigationChevronRight as n } from "../../icons/components/OutlineNavigationChevronRight.js";
-import { OutlineNavigationDoubleLeft as r } from "../../icons/components/OutlineNavigationDoubleLeft.js";
-import { OutlineNavigationDoubleRight as i } from "../../icons/components/OutlineNavigationDoubleRight.js";
-import { useLocale as a } from "../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as t } from "../../providers/hooks/useLocale/useLocale.js";
+import { OutlineNavigationChevronLeft as n } from "../../icons/components/OutlineNavigationChevronLeft.js";
+import { OutlineNavigationChevronRight as r } from "../../icons/components/OutlineNavigationChevronRight.js";
+import { OutlineNavigationDoubleLeft as i } from "../../icons/components/OutlineNavigationDoubleLeft.js";
+import { OutlineNavigationDoubleRight as a } from "../../icons/components/OutlineNavigationDoubleRight.js";
 import { Button as o } from "../Button/Button.js";
 import { Divider as s } from "../Divider/Divider.js";
 import { Select as c } from "../Select/Select.js";
@@ -15,7 +15,7 @@ import f from "../../lib/components/Pagination/Pagination.module.js";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/lib/components/Pagination/Pagination.tsx
 var g = ({ page: g, totalPages: _, itemsPerPage: v = 10, itemsPerPageOptions: y, onPageChange: b, onItemsPerPageChange: x, size: S = "m", className: C, style: w, showFirstLastButtons: T = !1, showPageNumbers: E = !0, siblingCount: D = 1, disableFirstButton: O = !1, disableLastButton: k = !1, disablePreviousButton: A = !1, disableNextButton: j = !1 }) => {
-	let { locale: M } = a(), N = l[M], P = d({
+	let { locale: M } = t(), N = l[M], P = d({
 		currentPage: g,
 		totalPages: _,
 		siblingCount: D
@@ -35,7 +35,7 @@ var g = ({ page: g, totalPages: _, itemsPerPage: v = 10, itemsPerPageOptions: y,
 					disabled: g === 1 || O,
 					onClick: () => b(1),
 					"aria-label": N.firstPage,
-					children: /* @__PURE__ */ m(r, {})
+					children: /* @__PURE__ */ m(i, {})
 				}),
 				/* @__PURE__ */ m(o, {
 					size: S,
@@ -44,7 +44,7 @@ var g = ({ page: g, totalPages: _, itemsPerPage: v = 10, itemsPerPageOptions: y,
 					disabled: g === 1 || A,
 					onClick: () => b(g - 1),
 					"aria-label": N.previousPage,
-					children: /* @__PURE__ */ m(t, {})
+					children: /* @__PURE__ */ m(n, {})
 				}),
 				E && P.map((e, t) => e === "..." ? /* @__PURE__ */ m(o, {
 					size: S,
@@ -69,7 +69,7 @@ var g = ({ page: g, totalPages: _, itemsPerPage: v = 10, itemsPerPageOptions: y,
 					disabled: g === F || j,
 					onClick: () => b(g + 1),
 					"aria-label": N.nextPage,
-					children: /* @__PURE__ */ m(n, {})
+					children: /* @__PURE__ */ m(r, {})
 				}),
 				T && /* @__PURE__ */ m(o, {
 					size: S,
@@ -78,7 +78,7 @@ var g = ({ page: g, totalPages: _, itemsPerPage: v = 10, itemsPerPageOptions: y,
 					disabled: g === F || k,
 					onClick: () => b(F),
 					"aria-label": N.lastPage,
-					children: /* @__PURE__ */ m(i, {})
+					children: /* @__PURE__ */ m(a, {})
 				})
 			]
 		}), y && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(s, {

package/dist/components/Select/SelectMultiple/SelectMultiple.js

@@ -1,9 +1,9 @@
 "use client";
 import { classNames as e } from "../../../utils/class-names.js";
 import { syncRefs as t } from "../../../utils/sync-refs.js";
-import { OutlineNavigationChevronDown as ee } from "../../../icons/components/OutlineNavigationChevronDown.js";
-import { OutlineSystemClose as n } from "../../../icons/components/OutlineSystemClose.js";
-import { Badge as r } from "../../Badge/Badge.js";
+import { Badge as ee } from "../../Badge/Badge.js";
+import { OutlineNavigationChevronDown as n } from "../../../icons/components/OutlineNavigationChevronDown.js";
+import { OutlineSystemClose as r } from "../../../icons/components/OutlineSystemClose.js";
 import { useComponentId as te } from "../../../hooks/useComponentId/useComponentId.js";
 import { PopoverWithFallback as i } from "../../NativePopover/PopoverWithFallback.js";
 import { InputBaseWrapper as ne } from "../../Field/InputBaseWrapper/InputBaseWrapper.js";
@@ -74,11 +74,11 @@ var g = ({ id: g, name: ae, ref: oe, values: _, options: v, label: y, placeholde
 				inputRef: U,
 				hintLeftSection: L,
 				hintRightSection: R,
-				rightIcon: /* @__PURE__ */ m(ee, { className: e(l.chevron, G && l.chevronActive) }),
+				rightIcon: /* @__PURE__ */ m(n, { className: e(l.chevron, G && l.chevronActive) }),
 				children: /* @__PURE__ */ h("div", {
 					ref: H,
 					className: l.tags,
-					children: [fe.map((e, t) => /* @__PURE__ */ h(r, {
+					children: [fe.map((e, t) => /* @__PURE__ */ h(ee, {
 						variant: "light",
 						color: "neutral",
 						size: b === "l" ? "s" : "xs",
@@ -87,7 +87,7 @@ var g = ({ id: g, name: ae, ref: oe, values: _, options: v, label: y, placeholde
 							e.leftSection,
 							e.label,
 							e.rightSection,
-							/* @__PURE__ */ m(n, {
+							/* @__PURE__ */ m(r, {
 								className: l.tagCloseIcon,
 								onClick: (t) => {
 									t.stopPropagation(), me(e.value);

package/dist/components/Sidebar/Sidebar.js

@@ -11,47 +11,48 @@ import { SidebarCollapse as l } from "./SidebarCollapse/SidebarCollapse.js";
 import { SidebarFooter as u } from "./SidebarFooter/SidebarFooter.js";
 import { SidebarElement as d } from "./SidebarElement/SidebarElement.js";
 import { SidebarProfile as f } from "./SidebarProfile/SidebarProfile.js";
-import { Children as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Children as p, useId as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/lib/components/Sidebar/Sidebar.tsx
-var _ = ({ ref: o, children: c, size: l = "large", color: d = "default", variant: f = "default", withControlButton: _ = !0, hideScrollbar: v = !0, className: y, style: b }) => {
-	let [x, S] = m(null), [C, w] = m(l), [T, E] = m(C === "compact"), D = C === "compact", O = f === "default", k = p.toArray(c), A = r(k, a), j = r(k, s), M = r(k, u), N = () => {
-		w(T ? "large" : "compact"), E((e) => !e);
-	}, P = () => {
-		T && w("large");
-	}, F = () => {
-		T && (w("compact"), S(null));
-	}, I = e(t.sidebar, v && "hideScrollbar", t.absoluteContent, T && !D && t.shadow, y);
-	return /* @__PURE__ */ h(n, {
+var v = ({ ref: o, children: c, size: l = "large", color: d = "default", variant: f = "default", withControlButton: v = !0, hideScrollbar: y = !0, className: b, style: x }) => {
+	let S = m(), [C, w] = h(null), [T, E] = h(l), [D, O] = h(T === "compact"), k = T === "compact", A = f === "default", j = p.toArray(c), M = r(j, a), N = r(j, s), P = r(j, u), F = () => {
+		E(D ? "large" : "compact"), O((e) => !e);
+	}, I = () => {
+		D && E("large");
+	}, L = () => {
+		D && (E("compact"), w(null));
+	}, R = e(t.sidebar, y && "hideScrollbar", t.absoluteContent, D && !k && t.shadow, b);
+	return /* @__PURE__ */ g(n, {
 		value: {
 			color: d,
-			isCompactSize: D,
-			isDefaultVariant: O,
-			hoverEnabled: T,
-			withControlButton: _,
-			openCollapseId: x,
-			setOpenCollapseId: S,
-			handleToggleHover: N
+			isCompactSize: k,
+			isDefaultVariant: A,
+			hoverEnabled: D,
+			withControlButton: v,
+			openCollapseId: C,
+			setOpenCollapseId: w,
+			collapseGroupName: S,
+			handleToggleHover: F
 		},
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ _("div", {
 			className: t.root,
 			ref: o,
-			children: [/* @__PURE__ */ h("div", { className: e(t.placeholder, T ? t.compactWidth : t.largeWidth) }), /* @__PURE__ */ g("aside", {
-				className: I,
-				onMouseEnter: P,
-				onMouseLeave: F,
-				style: i(C, d, f, b),
-				children: [/* @__PURE__ */ g("div", {
+			children: [/* @__PURE__ */ g("div", { className: e(t.placeholder, D ? t.compactWidth : t.largeWidth) }), /* @__PURE__ */ _("aside", {
+				className: R,
+				onMouseEnter: I,
+				onMouseLeave: L,
+				style: i(T, d, f, x),
+				children: [/* @__PURE__ */ _("div", {
 					className: t.mainSection,
-					children: [_ && (!O || !A) && /* @__PURE__ */ h(a, {}), /* @__PURE__ */ g("nav", {
+					children: [v && (!A || !M) && /* @__PURE__ */ g(a, {}), /* @__PURE__ */ _("nav", {
 						className: t.mainSectionWrapper,
-						children: [O && A, j]
+						children: [A && M, N]
 					})]
-				}), M]
+				}), P]
 			})]
 		})
 	});
 };
-_.Header = a, _.Items = s, _.Item = c, _.Group = o, _.Collapse = l, _.Footer = u, _.Element = d, _.Profile = f;
+v.Header = a, v.Items = s, v.Item = c, v.Group = o, v.Collapse = l, v.Footer = u, v.Element = d, v.Profile = f;
 //#endregion
-export { _ as Sidebar };
+export { v as Sidebar };

package/dist/components/Sidebar/SidebarCollapse/SidebarCollapse.js

@@ -2,39 +2,48 @@
 import { classNames as e } from "../../../utils/class-names.js";
 import { SolidNavigationChevronUp as t } from "../../../icons/components/SolidNavigationChevronUp.js";
 import { SolidNavigationChevronDown as n } from "../../../icons/components/SolidNavigationChevronDown.js";
-import { Collapse as r } from "../../Collapse/Collapse.js";
-import { useSidebarContext as i } from "../Sidebar.context.js";
-import { SidebarItem as a } from "../SidebarItem/SidebarItem.js";
+import { useSidebarContext as r } from "../Sidebar.context.js";
+import i from "../../../lib/components/Sidebar/SidebarItem/SidebarItem.module.js";
+import { SidebarItemContent as a } from "../SidebarItem/SidebarItemContent.js";
 import o from "../../../lib/components/Sidebar/SidebarCollapse/SidebarCollapse.module.js";
 import { Children as s, isValidElement as c, useEffect as l, useId as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/lib/components/Sidebar/SidebarCollapse/SidebarCollapse.tsx
 var p = ({ children: p, icon: m, label: h, counter: g, className: _, style: v }) => {
-	let y = u(), { isCompactSize: b, openCollapseId: x, setOpenCollapseId: S } = i(), C = y === x, w = s.toArray(p).map((e) => c(e) ? e.props.active : !1).find(Boolean);
+	let y = u(), { isCompactSize: b, openCollapseId: x, setOpenCollapseId: S, collapseGroupName: C } = r(), w = y === x, T = s.toArray(p).map((e) => c(e) ? e.props.active : !1).find(Boolean);
 	return l(() => {
-		w && S(y);
+		T && S(y);
 	}, [
-		w,
+		T,
 		y,
 		S
-	]), /* @__PURE__ */ f("div", {
+	]), /* @__PURE__ */ f("details", {
+		open: w,
+		name: C,
 		style: v,
+		onToggle: (e) => {
+			let { open: t } = e.currentTarget;
+			e.target !== e.currentTarget || t === w || S(t ? y : null);
+		},
 		className: e(o.sidebarCollapse, _),
-		children: [/* @__PURE__ */ d(a, {
-			icon: m,
-			counter: g,
-			active: !!(w && (b || !C)),
-			onClick: () => {
-				b || S(y === x ? null : y);
+		children: [/* @__PURE__ */ d("summary", {
+			"aria-label": h,
+			onClick: (e) => {
+				e.preventDefault(), !b && S(w ? null : y);
 			},
-			rightSection: /* @__PURE__ */ d("span", {
-				className: o.collapseIcon,
-				"aria-hidden": "true",
-				children: d(C ? t : n, {})
-			}),
-			children: h
-		}), !b && /* @__PURE__ */ d(r, {
-			isOpen: C,
+			className: e(i.sidebarItem, b && i.sidebarItemCompact, T && (b || !w) && i.itemActive, o.summary),
+			children: /* @__PURE__ */ d(a, {
+				icon: m,
+				counter: g,
+				rightSection: /* @__PURE__ */ d("span", {
+					className: o.collapseIcon,
+					"aria-hidden": "true",
+					children: d(w ? t : n, {})
+				}),
+				children: h
+			})
+		}), !b && /* @__PURE__ */ d("div", {
+			className: o.clip,
 			children: /* @__PURE__ */ d("div", {
 				id: y,
 				role: "group",

package/dist/components/Sidebar/SidebarItem/SidebarItem.js

@@ -1,54 +1,32 @@
 "use client";
 import { classNames as e } from "../../../utils/class-names.js";
 import { UnstyledButton as t } from "../../UnstyledButton/UnstyledButton.js";
-import { Indicator as n } from "../../Indicator/Indicator.js";
-import { useSidebarContext as r } from "../Sidebar.context.js";
-import i from "../../../lib/components/Sidebar/SidebarItem/SidebarItem.module.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useSidebarContext as n } from "../Sidebar.context.js";
+import r from "../../../lib/components/Sidebar/SidebarItem/SidebarItem.module.js";
+import { SidebarItemContent as i } from "./SidebarItemContent.js";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/Sidebar/SidebarItem/SidebarItem.tsx
-var c = ({ children: c, icon: l, counter: u, rightSection: d, path: f = "", active: p, onClick: m, className: h, style: g, linkComponent: _, linkProps: v }) => {
-	let { isCompactSize: y } = r(), b = {
-		style: g,
-		className: e(i.sidebarItem, y && i.sidebarItemCompact, p && i.itemActive, h),
-		onClick: () => m?.(f),
-		"aria-label": c
-	}, x = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("div", {
-		className: i.itemContent,
-		children: [
-			l && /* @__PURE__ */ o("span", {
-				className: i.itemIcon,
-				children: y && u ? /* @__PURE__ */ o(n, {
-					size: "s",
-					color: "danger",
-					label: u,
-					children: l
-				}) : l
-			}),
-			!l && y && u ? /* @__PURE__ */ o(n, {
-				size: "s",
-				color: "danger",
-				label: u,
-				children: /* @__PURE__ */ o("span", { children: c.slice(0, 2).toLocaleUpperCase() })
-			}) : !l && y && /* @__PURE__ */ o("span", { children: c.slice(0, 2).toLocaleUpperCase() }),
-			!y && c
-		]
-	}), !y && (d || u) && /* @__PURE__ */ s("div", {
-		className: i.rightSection,
-		children: [!!u && /* @__PURE__ */ o(n, {
-			size: "s",
-			color: "danger",
-			label: u
-		}), d]
-	})] });
-	return _ ? /* @__PURE__ */ o(_, {
-		...b,
-		...v ? v(f) : {},
-		children: x
-	}) : /* @__PURE__ */ o(t, {
+var o = ({ children: o, icon: s, counter: c, rightSection: l, path: u = "", active: d, onClick: f, className: p, style: m, linkComponent: h, linkProps: g }) => {
+	let { isCompactSize: _ } = n(), v = {
+		style: m,
+		className: e(r.sidebarItem, _ && r.sidebarItemCompact, d && r.itemActive, p),
+		onClick: () => f?.(u),
+		"aria-label": o
+	}, y = /* @__PURE__ */ a(i, {
+		icon: s,
+		counter: c,
+		rightSection: l,
+		children: o
+	});
+	return h ? /* @__PURE__ */ a(h, {
+		...v,
+		...g ? g(u) : {},
+		children: y
+	}) : /* @__PURE__ */ a(t, {
 		type: "button",
-		...b,
-		children: x
+		...v,
+		children: y
 	});
 };
 //#endregion
-export { c as SidebarItem };
+export { o as SidebarItem };

package/dist/components/Sidebar/SidebarItem/SidebarItemContent.js

@@ -0,0 +1,39 @@
+"use client";
+import { Indicator as e } from "../../Indicator/Indicator.js";
+import { useSidebarContext as t } from "../Sidebar.context.js";
+import n from "../../../lib/components/Sidebar/SidebarItem/SidebarItem.module.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/components/Sidebar/SidebarItem/SidebarItemContent.tsx
+var o = ({ children: o, icon: s, counter: c, rightSection: l }) => {
+	let { isCompactSize: u } = t();
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+		className: n.itemContent,
+		children: [
+			s && /* @__PURE__ */ i("span", {
+				className: n.itemIcon,
+				children: u && c ? /* @__PURE__ */ i(e, {
+					size: "s",
+					color: "danger",
+					label: c,
+					children: s
+				}) : s
+			}),
+			!s && u && c ? /* @__PURE__ */ i(e, {
+				size: "s",
+				color: "danger",
+				label: c,
+				children: /* @__PURE__ */ i("span", { children: o.slice(0, 2).toLocaleUpperCase() })
+			}) : !s && u && /* @__PURE__ */ i("span", { children: o.slice(0, 2).toLocaleUpperCase() }),
+			!u && o
+		]
+	}), !u && (l || c) && /* @__PURE__ */ a("div", {
+		className: n.rightSection,
+		children: [!!c && /* @__PURE__ */ i(e, {
+			size: "s",
+			color: "danger",
+			label: c
+		}), l]
+	})] });
+};
+//#endregion
+export { o as SidebarItemContent };

package/dist/components/Snackbar/SnackbarCard/SnackbarCard.js

@@ -1,12 +1,12 @@
 "use client";
 import { resolveTypography as e } from "../../../utils/typography.js";
 import { classNames as t } from "../../../utils/class-names.js";
-import { OutlineSystemClose as n } from "../../../icons/components/OutlineSystemClose.js";
-import { SolidSystemCheckCircle as r } from "../../../icons/components/SolidSystemCheckCircle.js";
-import { SolidSystemInfo as i } from "../../../icons/components/SolidSystemInfo.js";
-import { SolidSystemRemoveCircle as a } from "../../../icons/components/SolidSystemRemoveCircle.js";
-import { SolidSystemAlertCircle as o } from "../../../icons/components/SolidSystemAlertCircle.js";
-import { useLocale as s } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as n } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemClose as r } from "../../../icons/components/OutlineSystemClose.js";
+import { SolidSystemCheckCircle as i } from "../../../icons/components/SolidSystemCheckCircle.js";
+import { SolidSystemInfo as a } from "../../../icons/components/SolidSystemInfo.js";
+import { SolidSystemRemoveCircle as o } from "../../../icons/components/SolidSystemRemoveCircle.js";
+import { SolidSystemAlertCircle as s } from "../../../icons/components/SolidSystemAlertCircle.js";
 import { Loader as c } from "../../Loader/Loader.js";
 import { Button as l } from "../../Button/Button.js";
 import u from "../../../lib/components/Snackbar/Snackbar.module.js";
@@ -14,18 +14,18 @@ import { SnackbarTimer as d } from "../SnackbarTimer/SnackbarTimer.js";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/lib/components/Snackbar/SnackbarCard/SnackbarCard.tsx
 var m = {
-	success: /* @__PURE__ */ f(r, {}),
-	error: /* @__PURE__ */ f(a, {}),
-	warning: /* @__PURE__ */ f(o, {}),
-	info: /* @__PURE__ */ f(i, {})
+	success: /* @__PURE__ */ f(i, {}),
+	error: /* @__PURE__ */ f(o, {}),
+	warning: /* @__PURE__ */ f(s, {}),
+	info: /* @__PURE__ */ f(a, {})
 }, h = {
 	en: "Close notification",
 	ru: "Закрыть уведомление",
 	tj: "Пӯшидани огоҳӣ"
-}, g = ({ item: r, onDismiss: i }) => {
-	let { locale: a } = s(), { id: o, message: g, type: _, leftSlot: v, description: y, rightSlot: b, actionSlot: x, withCloseButton: S = !0, loading: C, custom: w, render: T, mounted: E } = r;
+}, g = ({ item: i, onDismiss: a }) => {
+	let { locale: o } = n(), { id: s, message: g, type: _, leftSlot: v, description: y, rightSlot: b, actionSlot: x, withCloseButton: S = !0, loading: C, custom: w, render: T, mounted: E } = i;
 	if (w) {
-		let e = T ? T(o) : g;
+		let e = T ? T(s) : g;
 		return /* @__PURE__ */ f("div", {
 			role: "status",
 			className: t(u.scaleIn, !E && u.scaleOut),
@@ -39,13 +39,13 @@ var m = {
 		"aria-hidden": "true",
 		className: t(u.typeIcon, u[_]),
 		children: m[_]
-	}) : r.withTimer && r.duration > 0 ? /* @__PURE__ */ f(d, { duration: r.duration }) : null : /* @__PURE__ */ f("div", {
+	}) : i.withTimer && i.duration > 0 ? /* @__PURE__ */ f(d, { duration: i.duration }) : null : /* @__PURE__ */ f("div", {
 		className: u.leftSlot,
 		children: v
 	});
 	return /* @__PURE__ */ p("div", {
 		role: "status",
-		style: r.style,
+		style: i.style,
 		className: t(u.root, u.scaleIn, !E && u.scaleOut),
 		children: [
 			D,
@@ -69,9 +69,9 @@ var m = {
 			S && /* @__PURE__ */ f(l, {
 				variant: "function",
 				color: "tertiary",
-				onClick: () => i(o),
-				"aria-label": h[a],
-				children: /* @__PURE__ */ f(n, {})
+				onClick: () => a(s),
+				"aria-label": h[o],
+				children: /* @__PURE__ */ f(r, {})
 			})
 		]
 	});

package/dist/components/Table/Table.js

@@ -1,48 +1,32 @@
 import { classNames as e } from "../../utils/class-names.js";
-import { Collapse as t } from "../Collapse/Collapse.js";
-import { Divider as n } from "../Divider/Divider.js";
-import r from "../../lib/components/Table/Table.module.js";
-import { getTableStyles as i } from "./Table.utils.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import t from "../../lib/components/Table/Table.module.js";
+import { getTableStyles as n } from "./Table.utils.js";
+import { TableCollapseRow as r } from "./TableCollapseRow/TableCollapseRow.js";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/Table/Table.tsx
-var s = ({ className: t, ...n }) => /* @__PURE__ */ a("td", {
-	className: e(r.td, "uiFont", t),
-	...n
-}), c = ({ className: t, ...n }) => /* @__PURE__ */ a("th", {
-	className: e(r.th, "uiFont", t),
-	...n
-}), l = ({ className: t, ...n }) => /* @__PURE__ */ a("tr", {
-	className: e(r.tr, t),
-	...n
-}), u = ({ className: t, ...n }) => /* @__PURE__ */ a("thead", {
-	className: e(r.thead, t),
-	...n
-}), d = ({ className: t, ...n }) => /* @__PURE__ */ a("tbody", {
-	className: e(r.tbody, t),
-	...n
-}), f = ({ className: t, ...n }) => /* @__PURE__ */ a("tfoot", {
-	className: e(r.tfoot, t),
-	...n
-}), p = ({ isOpen: i, colSpan: c, children: u, className: d, ...f }) => /* @__PURE__ */ a(l, {
-	...f,
-	className: e(r.collapseRow, i && r.collapseRowOpen, d),
-	children: /* @__PURE__ */ a(s, {
-		colSpan: c,
-		className: e(r.collapseCell, i && r.collapseCellOpen),
-		children: /* @__PURE__ */ o(t, {
-			isOpen: i,
-			className: r.collapseContent,
-			children: [/* @__PURE__ */ a(n, {
-				className: r.collapseDivider,
-				color: "secondary"
-			}), u]
-		})
-	})
-}), m = ({ variant: t = "default", headerColor: n = "primary", verticalSpacing: o = "m", rowGap: s, withRowBorders: c = !0, withColumnBorders: l = !1, highlightOnHover: u = !1, stickyHeader: d = !1, stickyFooter: f = !1, className: p, style: m, ...h }) => /* @__PURE__ */ a("table", {
-	style: i(t, n, o, s, c, m),
-	className: e(r.table, c && r.withRowBorders, l && r.withColumnBorders, u && r.highlightOnHover, d && r.stickyHeader, f && r.stickyFooter, s && r.withRowGap, p),
+var a = ({ className: n, ...r }) => /* @__PURE__ */ i("td", {
+	className: e(t.td, "uiFont", n),
+	...r
+}), o = ({ className: n, ...r }) => /* @__PURE__ */ i("th", {
+	className: e(t.th, "uiFont", n),
+	...r
+}), s = ({ className: n, ...r }) => /* @__PURE__ */ i("tr", {
+	className: e(t.tr, n),
+	...r
+}), c = ({ className: n, ...r }) => /* @__PURE__ */ i("thead", {
+	className: e(t.thead, n),
+	...r
+}), l = ({ className: n, ...r }) => /* @__PURE__ */ i("tbody", {
+	className: e(t.tbody, n),
+	...r
+}), u = ({ className: n, ...r }) => /* @__PURE__ */ i("tfoot", {
+	className: e(t.tfoot, n),
+	...r
+}), d = ({ variant: r = "default", headerColor: a = "primary", verticalSpacing: o = "m", rowGap: s, withRowBorders: c = !0, withColumnBorders: l = !1, highlightOnHover: u = !1, stickyHeader: d = !1, stickyFooter: f = !1, className: p, style: m, ...h }) => /* @__PURE__ */ i("table", {
+	style: n(r, a, o, s, c, m),
+	className: e(t.table, c && t.withRowBorders, l && t.withColumnBorders, u && t.highlightOnHover, d && t.stickyHeader, f && t.stickyFooter, s && t.withRowGap, p),
 	...h
 });
-m.Td = s, m.Th = c, m.Tr = l, m.CollapseRow = p, m.Thead = u, m.Tbody = d, m.Tfoot = f;
+d.Td = a, d.Th = o, d.Tr = s, d.CollapseRow = r, d.Thead = c, d.Tbody = l, d.Tfoot = u;
 //#endregion
-export { m as Table, p as TableCollapseRow };
+export { d as Table };

package/dist/components/Table/TableCollapseRow/TableCollapseRow.js

@@ -0,0 +1,42 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import { Divider as t } from "../../Divider/Divider.js";
+import { useDelayedUnmount as n } from "../../../hooks/useDelayedUnmount/useDelayedUnmount.js";
+import r from "../../../lib/components/Table/Table.module.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lib/components/Table/TableCollapseRow/TableCollapseRow.tsx
+var o = ({ isOpen: o, colSpan: s, keepMounted: c = !1, children: l, className: u, ...d }) => {
+	let f = n({
+		keepMounted: c,
+		isOpen: o,
+		exitDuration: 300
+	}), p = (e) => {
+		let t = e.currentTarget;
+		e.target !== t || t.open === o || (t.open = o);
+	};
+	return /* @__PURE__ */ i("tr", {
+		...d,
+		className: e(r.tr, r.collapseRow, o && r.collapseRowOpen, u),
+		children: /* @__PURE__ */ i("td", {
+			colSpan: s,
+			className: e(r.td, "uiFont", r.collapseCell, o && r.collapseCellOpen),
+			children: /* @__PURE__ */ a("details", {
+				open: o,
+				onToggle: p,
+				className: r.collapse,
+				children: [/* @__PURE__ */ i("summary", { hidden: !0 }), f && /* @__PURE__ */ i("div", {
+					className: r.clip,
+					children: /* @__PURE__ */ a("div", {
+						className: r.collapseContent,
+						children: [/* @__PURE__ */ i(t, {
+							className: r.collapseDivider,
+							color: "secondary"
+						}), l]
+					})
+				})]
+			})
+		})
+	});
+};
+//#endregion
+export { o as TableCollapseRow };