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

package/dist/components/Drawer/Drawer.js

@@ -4,25 +4,25 @@ import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClo
 import { Backdrop as n } from "../Backdrop/Backdrop.js";
 import { useLocale as r } from "../../providers/hooks/useLocale/useLocale.js";
 import { Button as i } from "../Button/Button.js";
-import { useFocusTrapAndRestore as a } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
-import o from "../../lib/components/Drawer/Drawer.module.js";
-import { DrawerHeader as s } from "./DrawerHeader/DrawerHeader.js";
-import { DrawerContent as c } from "./DrawerContent/DrawerContent.js";
-import { DrawerActions as l } from "./DrawerActions/DrawerActions.js";
-import { ARIA_CLOSE_LABEL as u, getDrawerStyle as d, positionToTransitionName as f } from "./Drawer.utils.js";
+import a from "../../lib/components/Drawer/Drawer.module.js";
+import { DrawerHeader as o } from "./DrawerHeader/DrawerHeader.js";
+import { DrawerContent as s } from "./DrawerContent/DrawerContent.js";
+import { DrawerActions as c } from "./DrawerActions/DrawerActions.js";
+import { ARIA_CLOSE_LABEL as l, getDrawerStyle as u, positionToTransitionName as d } from "./Drawer.utils.js";
+import { useFocusTrapAndRestore as f } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/lib/components/Drawer/Drawer.tsx
-var h = ({ isOpen: s, onClose: c, children: l, withCloseButton: h = !0, closeOnClickOutside: g = !0, scrollable: _ = !0, width: v, height: y, maxWidth: b, maxHeight: x, variant: S = "default", position: C = "right", zIndex: w, className: T, style: E, ref: D, ...O }) => {
-	let { locale: k } = r(), A = a(s), j = e(o.root, S === "floating" && o.rounded, o[C]), M = e(o.drawer, (_ || C === "bottom" || C === "top") && o.scrollable, T);
+var h = ({ isOpen: o, onClose: s, children: c, withCloseButton: h = !0, closeOnClickOutside: g = !0, scrollable: _ = !0, width: v, height: y, maxWidth: b, maxHeight: x, variant: S = "default", position: C = "right", zIndex: w, className: T, style: E, ref: D, ...O }) => {
+	let { locale: k } = r(), A = f(o), j = e(a.root, S === "floating" && a.rounded, a[C]), M = e(a.drawer, (_ || C === "bottom" || C === "top") && a.scrollable, T);
 	return /* @__PURE__ */ p(n, {
 		ref: D,
-		isOpen: s,
-		onClose: c,
+		isOpen: o,
+		onClose: s,
 		closeOnClickOutside: g,
 		className: j,
 		"data-testid": "container",
 		zIndex: w,
-		transitionProps: { transition: f[C] },
+		transitionProps: { transition: d[C] },
 		children: /* @__PURE__ */ m("div", {
 			ref: A,
 			role: "dialog",
@@ -30,19 +30,19 @@ var h = ({ isOpen: s, onClose: c, children: l, withCloseButton: h = !0, closeOnC
 			"data-testid": "drawer",
 			"aria-modal": "true",
 			className: M,
-			style: d(C, v, y, b, x, E),
+			style: u(C, v, y, b, x, E),
 			...O,
-			children: [l, h && /* @__PURE__ */ p(i, {
-				className: o.closeButton,
+			children: [c, h && /* @__PURE__ */ p(i, {
+				className: a.closeButton,
 				variant: "ghost",
 				color: "tertiary",
-				"aria-label": u[k],
-				onClick: c,
+				"aria-label": l[k],
+				onClick: s,
 				children: /* @__PURE__ */ p(t, {})
 			})]
 		})
 	});
 };
-h.Header = s, h.Content = c, h.Actions = l;
+h.Header = o, h.Content = s, h.Actions = c;
 //#endregion
 export { h as Drawer };

package/dist/components/Modal/Modal.js

@@ -2,36 +2,36 @@ import { classNames as e } from "../../utils/class-names.js";
 import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClose.js";
 import { Backdrop as n } from "../Backdrop/Backdrop.js";
 import { Button as r } from "../Button/Button.js";
-import i from "../../lib/components/Modal/Modal.module.js";
-import { ModalHeader as a } from "./ModalHeader/ModalHeader.js";
-import { ModalContent as o } from "./ModalContent/ModalContent.js";
-import { ModalActions as s } from "./ModalActions/ModalActions.js";
-import { getModalStyles as c } from "./Modal.utils.js";
-import { useFocusTrapAndRestore as l } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
+import { useFocusTrapAndRestore as i } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
+import a from "../../lib/components/Modal/Modal.module.js";
+import { ModalHeader as o } from "./ModalHeader/ModalHeader.js";
+import { ModalContent as s } from "./ModalContent/ModalContent.js";
+import { ModalActions as c } from "./ModalActions/ModalActions.js";
+import { getModalStyles as l } from "./Modal.utils.js";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/components/Modal/Modal.tsx
-var f = ({ children: a, device: o = "desktop", centered: s = !0, withCloseButton: f = !0, scrollable: p = !1, className: m, style: h, ...g }) => {
-	let _ = l(g.isOpen);
+var f = ({ children: o, device: s = "desktop", centered: c = !0, withCloseButton: f = !0, scrollable: p = !1, className: m, style: h, ...g }) => {
+	let _ = i(g.isOpen);
 	return /* @__PURE__ */ u(n, {
-		className: e(!s && i.start),
+		className: e(!c && a.start),
 		...g,
 		children: /* @__PURE__ */ d("div", {
 			role: "dialog",
 			"aria-modal": "true",
 			tabIndex: -1,
 			ref: _,
-			style: c(o, f, h),
-			className: e(i.root, p && i.scrollable, m),
-			children: [a, f && /* @__PURE__ */ u(r, {
+			style: l(s, f, h),
+			className: e(a.root, p && a.scrollable, m),
+			children: [o, f && /* @__PURE__ */ u(r, {
 				variant: "ghost",
 				color: "tertiary",
-				className: i.closeButton,
+				className: a.closeButton,
 				onClick: g.onClose,
 				children: /* @__PURE__ */ u(t, {})
 			})]
 		})
 	});
 };
-f.Header = a, f.Content = o, f.Actions = s;
+f.Header = o, f.Content = s, f.Actions = c;
 //#endregion
 export { f as Modal };

package/dist/components/NativeDialog/NativeDialog.js

@@ -0,0 +1,41 @@
+"use client";
+import { syncRefs as e } from "../../utils/sync-refs.js";
+import { RemoveScroll as t } from "../RemoveScroll/RemoveScroll.js";
+import { useDelayedUnmount as n } from "../../hooks/useDelayedUnmount/useDelayedUnmount.js";
+import { getClosedBy as r } from "./NativeDialog.utils.js";
+import { useControlledDialog as i } from "./useControlledDialog.js";
+import { useFocusWrap as a } from "./useFocusWrap.js";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/lib/components/NativeDialog/NativeDialog.tsx
+var s = ({ isOpen: s, onClose: c, children: l, closeOnClickOutside: u = !0, closeOnEscape: d = !0, keepMounted: f = !1, withNativeLightDismiss: p = !1, exitDuration: m, ref: h, ...g }) => {
+	let _ = r(u, d, p), { dialogRef: v, dialogProps: y } = i({
+		isOpen: s,
+		onClose: c,
+		closeOnClickOutside: u,
+		closeOnEscape: d,
+		closedBy: _,
+		exitDuration: m
+	});
+	a({
+		isOpen: s,
+		dialogRef: v
+	});
+	let b = n({
+		keepMounted: f,
+		isOpen: s,
+		exitDuration: m
+	});
+	return /* @__PURE__ */ o(t, {
+		enabled: s,
+		children: /* @__PURE__ */ o("dialog", {
+			ref: e(v, h),
+			closedby: _,
+			"data-state": s ? "open" : "closed",
+			...g,
+			...y,
+			children: b && l
+		})
+	});
+};
+//#endregion
+export { s as NativeDialog };

package/dist/components/NativeDialog/NativeDialog.utils.js

@@ -0,0 +1,4 @@
+//#region src/lib/components/NativeDialog/NativeDialog.utils.ts
+var e = (e, t, n) => t ? e && n ? "any" : "closerequest" : "none";
+//#endregion
+export { e as getClosedBy };

package/dist/components/NativeDialog/useControlledDialog.js

@@ -0,0 +1,36 @@
+"use client";
+import { useEffect as e, useRef as t } from "react";
+//#region src/lib/components/NativeDialog/useControlledDialog.ts
+var n = () => typeof HTMLDialogElement < "u" && "closedBy" in HTMLDialogElement.prototype, r = ({ isOpen: r, onClose: i, closeOnClickOutside: a, closeOnEscape: o, closedBy: s, exitDuration: c }) => {
+	let l = t(null), u = t(!1);
+	return e(() => {
+		let e = l.current;
+		if (typeof e?.showModal != "function") return;
+		if (r) {
+			e.open || e.showModal();
+			return;
+		}
+		if (!e.open) return;
+		let t = window.setTimeout(() => e.close(), c);
+		return () => window.clearTimeout(t);
+	}, [r, c]), {
+		dialogRef: l,
+		dialogProps: {
+			onCancel: (e) => {
+				e.target === e.currentTarget && (e.preventDefault(), o && i());
+			},
+			onClose: (e) => {
+				e.target === e.currentTarget && r && i();
+			},
+			onPointerDown: (e) => {
+				let { clientWidth: t, clientHeight: n } = e.currentTarget, { offsetX: r, offsetY: i } = e.nativeEvent, a = r > t || i > n;
+				u.current = e.target === e.currentTarget && !a;
+			},
+			onClick: (e) => {
+				!a || !u.current || s === "any" && n() || e.target === e.currentTarget && i();
+			}
+		}
+	};
+};
+//#endregion
+export { n as isClosedBySupported, r as useControlledDialog };

package/dist/components/NativeDialog/useFocusWrap.js

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect as e } from "react";
+//#region src/lib/components/NativeDialog/useFocusWrap.ts
+var t = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", "), n = (e) => typeof e.checkVisibility == "function" ? e.checkVisibility() : !0, r = ({ isOpen: r, dialogRef: i }) => {
+	e(() => {
+		let e = i.current;
+		if (!r || !e) return;
+		let a = (r) => {
+			if (r.key !== "Tab") return;
+			let i = Array.from(e.querySelectorAll(t)).filter(n), a = i[0], o = i.at(-1);
+			if (!a || !o) return;
+			let s = document.activeElement;
+			if (r.shiftKey && s === a) {
+				r.preventDefault(), o.focus();
+				return;
+			}
+			!r.shiftKey && s === o && (r.preventDefault(), a.focus());
+		};
+		return e.addEventListener("keydown", a), () => e.removeEventListener("keydown", a);
+	}, [r, i]);
+};
+//#endregion
+export { r as useFocusWrap };

package/dist/components/NativeDrawer/NativeDrawer.js

@@ -0,0 +1,55 @@
+"use client";
+import { classNames as e } from "../../utils/class-names.js";
+import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClose.js";
+import { Button as n } from "../Button/Button.js";
+import { NativeDialog as r } from "../NativeDialog/NativeDialog.js";
+import i from "../../lib/components/NativeDrawer/NativeDrawer.module.js";
+import { getNativeDrawerStyles as a, isHorizontal as o } from "./NativeDrawer.utils.js";
+import { NativeDrawerHeader as s } from "./NativeDrawerHeader/NativeDrawerHeader.js";
+import { NativeDrawerContent as c } from "./NativeDrawerContent/NativeDrawerContent.js";
+import { NativeDrawerActions as l } from "./NativeDrawerActions/NativeDrawerActions.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/lib/components/NativeDrawer/NativeDrawer.tsx
+var f = ({ isOpen: s, onClose: c, children: l, position: f = "right", variant: p = "default", width: m, height: h, maxWidth: g, maxHeight: _, withCloseButton: v = !0, scrollable: y = !0, closeOnClickOutside: b = !0, closeOnEscape: x = !0, blur: S, keepMounted: C = !1, transitionProps: w, className: T, style: E, ref: D, ...O }) => {
+	let { duration: k = 250, exitDuration: A = 200, timingFunction: j } = w ?? {};
+	return /* @__PURE__ */ u(r, {
+		ref: D,
+		isOpen: s,
+		onClose: c,
+		closeOnClickOutside: b,
+		closeOnEscape: x,
+		keepMounted: C,
+		exitDuration: A,
+		withNativeLightDismiss: !0,
+		"data-position": f,
+		className: e(i.root, i[f], p === "floating" && i.floating, S && i.blurred, (y || !o(f)) && i.scrollable, T),
+		style: a({
+			position: f,
+			blur: S,
+			width: m,
+			height: h,
+			maxWidth: g,
+			maxHeight: _,
+			transitionProps: {
+				duration: k,
+				exitDuration: A,
+				timingFunction: j
+			},
+			style: E
+		}),
+		...O,
+		children: /* @__PURE__ */ d("div", {
+			className: i.panel,
+			children: [l, v && /* @__PURE__ */ u(n, {
+				variant: "ghost",
+				color: "tertiary",
+				className: i.closeButton,
+				onClick: c,
+				children: /* @__PURE__ */ u(t, {})
+			})]
+		})
+	});
+};
+f.Header = s, f.Content = c, f.Actions = l;
+//#endregion
+export { f as NativeDrawer };

package/dist/components/NativeDrawer/NativeDrawer.utils.js

@@ -0,0 +1,18 @@
+import { resolveUnit as e } from "../../utils/unit-resolver.js";
+//#region src/lib/components/NativeDrawer/NativeDrawer.utils.ts
+var t = ["left", "right"], n = (e) => t.includes(e), r = ({ position: t, blur: r, width: i, height: a, maxWidth: o, maxHeight: s, transitionProps: c, style: l }) => {
+	let { duration: u, exitDuration: d, timingFunction: f } = c, p = n(t);
+	return {
+		"--drawer-width": p ? e(i ?? "100dvw") : "100dvw",
+		"--drawer-height": p ? "100dvh" : e(a ?? "100dvh"),
+		"--drawer-max-width": p ? e(o ?? "500px") : "100dvw",
+		"--drawer-max-height": p ? "100dvh" : e(s ?? "500px"),
+		"--drawer-backdrop-blur": r ? `${r}px` : void 0,
+		"--drawer-duration": `${u}ms`,
+		"--drawer-exit-duration": `${d}ms`,
+		"--drawer-timing": f ?? "ease",
+		...l
+	};
+};
+//#endregion
+export { r as getNativeDrawerStyles, n as isHorizontal };

package/dist/components/NativeDrawer/NativeDrawerActions/NativeDrawerActions.js

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/lib/components/NativeDrawer/NativeDrawerActions/NativeDrawerActions.tsx
+var t = ({ ...t }) => /* @__PURE__ */ e("div", { ...t });
+//#endregion
+export { t as NativeDrawerActions };

package/dist/components/NativeDrawer/NativeDrawerContent/NativeDrawerContent.js

@@ -0,0 +1,10 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../../../lib/components/NativeDrawer/NativeDrawer.module.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/NativeDrawer/NativeDrawerContent/NativeDrawerContent.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n("div", {
+	className: e(t.content, r),
+	...i
+});
+//#endregion
+export { r as NativeDrawerContent };

package/dist/components/NativeDrawer/NativeDrawerHeader/NativeDrawerHeader.js

@@ -0,0 +1,28 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../../../lib/components/NativeDrawer/NativeDrawer.module.js";
+import { Typography as n } from "../../Typography/Typography.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/lib/components/NativeDrawer/NativeDrawerHeader/NativeDrawerHeader.tsx
+var a = ({ title: a, description: o, className: s, children: c, ...l }) => /* @__PURE__ */ i("div", {
+	className: e(t.header, s),
+	...l,
+	children: [
+		a && /* @__PURE__ */ r(n, {
+			className: t.title,
+			variant: "heading",
+			size: "h4",
+			children: a
+		}),
+		o && /* @__PURE__ */ r(n, {
+			element: "div",
+			className: t.description,
+			variant: "body",
+			size: "l",
+			children: o
+		}),
+		c
+	]
+});
+//#endregion
+export { a as NativeDrawerHeader };

package/dist/components/NativeModal/NativeModal.js

@@ -0,0 +1,51 @@
+"use client";
+import { classNames as e } from "../../utils/class-names.js";
+import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClose.js";
+import { Button as n } from "../Button/Button.js";
+import r from "../../lib/components/NativeModal/NativeModal.module.js";
+import { getNativeModalStyles as i } from "./NativeModal.utils.js";
+import { NativeModalHeader as a } from "./NativeModalHeader/NativeModalHeader.js";
+import { NativeModalContent as o } from "./NativeModalContent/NativeModalContent.js";
+import { NativeModalActions as s } from "./NativeModalActions/NativeModalActions.js";
+import { NativeDialog as c } from "../NativeDialog/NativeDialog.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/lib/components/NativeModal/NativeModal.tsx
+var d = ({ isOpen: a, onClose: o, children: s, device: d = "desktop", centered: f = !0, withCloseButton: p = !0, scrollable: m = !0, closeOnClickOutside: h = !0, closeOnEscape: g = !0, blur: _, keepMounted: v = !1, transitionProps: y, className: b, style: x, ref: S, ...C }) => {
+	let { transition: w = "scale", duration: T = 200, exitDuration: E = 150, timingFunction: D } = y ?? {};
+	return /* @__PURE__ */ l(c, {
+		ref: S,
+		isOpen: a,
+		onClose: o,
+		closeOnClickOutside: h,
+		closeOnEscape: g,
+		keepMounted: v,
+		exitDuration: E,
+		className: e(r.root, !f && r.start, _ && r.blurred, m && r.scrollable, b),
+		style: i({
+			device: d,
+			blur: _,
+			withCloseButton: p,
+			transitionProps: {
+				transition: w,
+				duration: T,
+				exitDuration: E,
+				timingFunction: D
+			},
+			style: x
+		}),
+		...C,
+		children: /* @__PURE__ */ u("div", {
+			className: r.panel,
+			children: [s, p && /* @__PURE__ */ l(n, {
+				variant: "ghost",
+				color: "tertiary",
+				className: r.closeButton,
+				onClick: o,
+				children: /* @__PURE__ */ l(t, {})
+			})]
+		})
+	});
+};
+d.Header = a, d.Content = o, d.Actions = s;
+//#endregion
+export { d as NativeModal };

package/dist/components/NativeModal/NativeModal.utils.js

@@ -0,0 +1,25 @@
+//#region src/lib/components/NativeModal/NativeModal.utils.ts
+var e = {
+	fade: "none",
+	scale: "scale(0.96)",
+	"slide-up": "translateY(1.5rem)",
+	"slide-down": "translateY(-1.5rem)"
+}, t = (e) => e ? "closerequest" : "none", n = ({ device: t, blur: n, withCloseButton: r, transitionProps: i, style: a }) => {
+	let { transition: o, duration: s, exitDuration: c, timingFunction: l } = i;
+	return {
+		"--modal-spacing-vertical": `var(--modal-spacing-vertical-${t})`,
+		"--modal-spacing-horizontal": `var(--modal-spacing-horizontal-${t})`,
+		"--modal-spacing-between": `var(--modal-spacing-between-${t})`,
+		"--modal-close-button-position-right": `var(--modal-close-button-position-right-${t})`,
+		"--modal-close-button-position-top": `var(--modal-close-button-position-top-${t})`,
+		"--modal-spacing-padding-horizontal-heading": r ? "var(--modal-spacing-padding-heading)" : "0",
+		"--modal-backdrop-blur": n ? `${n}px` : void 0,
+		"--modal-from-transform": e[o],
+		"--modal-duration": `${s}ms`,
+		"--modal-exit-duration": `${c}ms`,
+		"--modal-timing": l ?? "ease",
+		...a
+	};
+};
+//#endregion
+export { e as TRANSITION_FROM_TRANSFORM, t as getClosedBy, n as getNativeModalStyles };

package/dist/components/NativeModal/NativeModalActions/NativeModalActions.js

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/lib/components/NativeModal/NativeModalActions/NativeModalActions.tsx
+var t = ({ ...t }) => /* @__PURE__ */ e("div", { ...t });
+//#endregion
+export { t as NativeModalActions };

package/dist/components/NativeModal/NativeModalContent/NativeModalContent.js

@@ -0,0 +1,10 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../../../lib/components/NativeModal/NativeModal.module.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/NativeModal/NativeModalContent/NativeModalContent.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n("div", {
+	className: e(t.content, r),
+	...i
+});
+//#endregion
+export { r as NativeModalContent };

package/dist/components/NativeModal/NativeModalHeader/NativeModalHeader.js

@@ -0,0 +1,27 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../../../lib/components/NativeModal/NativeModal.module.js";
+import { Typography as n } from "../../Typography/Typography.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/lib/components/NativeModal/NativeModalHeader/NativeModalHeader.tsx
+var a = ({ title: a, description: o, align: s = "start", className: c, children: l, ...u }) => /* @__PURE__ */ i("div", {
+	className: e(t.header, s === "center" && t.alignCenter, c),
+	...u,
+	children: [
+		a && /* @__PURE__ */ r(n, {
+			className: t.title,
+			variant: "heading",
+			size: "h1",
+			children: a
+		}),
+		o && /* @__PURE__ */ r(n, {
+			className: t.description,
+			variant: "body",
+			size: "m",
+			children: o
+		}),
+		l
+	]
+});
+//#endregion
+export { a as NativeModalHeader };

package/dist/components/NativePopover/NativePopoverDropdown/NativePopoverDropdown.js

@@ -5,7 +5,7 @@ import { getDropdownStyles as n } from "../NativePopover.utils.js";
 import r from "../../../lib/components/NativePopover/NativePopover.module.js";
 import { useNativeVisibility as i } from "./useNativeVisibility.js";
 import { useArrowPlacement as a } from "./useArrowPlacement.js";
-import { useMountedContent as o } from "./useMountedContent.js";
+import { useDelayedUnmount as o } from "../../../hooks/useDelayedUnmount/useDelayedUnmount.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/lib/components/NativePopover/NativePopoverDropdown/NativePopoverDropdown.tsx
 var l = ({ children: l, className: u, style: d, onClick: f, onMouseEnter: p, onMouseLeave: m, onToggle: h, ...g }) => {
@@ -24,7 +24,7 @@ var l = ({ children: l, className: u, style: d, onClick: f, onMouseEnter: p, onM
 	let H = o({
 		keepMounted: M,
 		isOpen: y,
-		dropdown: S,
+		element: S,
 		exitDuration: B
 	});
 	return /* @__PURE__ */ c("div", {

package/dist/hooks/useDelayedUnmount/useDelayedUnmount.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/lib/hooks/useDelayedUnmount/useDelayedUnmount.ts
+var n = ({ keepMounted: n, isOpen: r, exitDuration: i, element: a }) => {
+	let [o, s] = t(r);
+	return r && !o && s(!0), e(() => {
+		if (r || n) return;
+		let e = () => s(!1), t = window.setTimeout(e, i);
+		return a?.addEventListener("transitionend", e), () => {
+			window.clearTimeout(t), a?.removeEventListener("transitionend", e);
+		};
+	}, [
+		r,
+		n,
+		i,
+		a
+	]), n || o;
+};
+//#endregion
+export { n as useDelayedUnmount };

package/dist/lib/components/NativeDrawer/NativeDrawer.module.js

@@ -0,0 +1,18 @@
+var e = {
+	root: "_root_2tb2n_1",
+	right: "_right_2tb2n_47",
+	left: "_left_2tb2n_53",
+	top: "_top_2tb2n_59",
+	bottom: "_bottom_2tb2n_65",
+	floating: "_floating_2tb2n_71",
+	blurred: "_blurred_2tb2n_96",
+	panel: "_panel_2tb2n_111",
+	scrollable: "_scrollable_2tb2n_122",
+	content: "_content_2tb2n_130",
+	header: "_header_2tb2n_140",
+	title: "_title_2tb2n_147",
+	description: "_description_2tb2n_152",
+	closeButton: "_closeButton_2tb2n_157"
+};
+//#endregion
+export { e as default };

package/dist/lib/components/NativeModal/NativeModal.module.js

@@ -0,0 +1,15 @@
+var e = {
+	root: "_root_nuokb_1",
+	panel: "_panel_nuokb_40",
+	blurred: "_blurred_nuokb_81",
+	start: "_start_nuokb_96",
+	scrollable: "_scrollable_nuokb_100",
+	content: "_content_nuokb_108",
+	header: "_header_nuokb_113",
+	alignCenter: "_alignCenter_nuokb_120",
+	title: "_title_nuokb_126",
+	description: "_description_nuokb_131",
+	closeButton: "_closeButton_nuokb_136"
+};
+//#endregion
+export { e as default };