@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/Meter/index.js

@@ -7,55 +7,57 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Meter/index.tsx
 var Meter;
-var init_Meter = __esmMin(() => {
-	init_Text();
-	init_styles_css();
-	Meter = ({ strength, title, value, className, "data-testid": dataTestId, style, id }) => {
-		var _strength$value$color;
-		var _strength$value;
-		var _strength$value$text;
-		var _strength$value2;
-		var _strength$length;
-		const width = `${(value + 1) / strength.length * 100}%`;
-		const backgroundColor = (_strength$value$color = (_strength$value = strength[value]) === null || _strength$value === void 0 ? void 0 : _strength$value.color) !== null && _strength$value$color !== void 0 ? _strength$value$color : strength[0].color;
-		const text = (_strength$value$text = (_strength$value2 = strength[value]) === null || _strength$value2 === void 0 ? void 0 : _strength$value2.text) !== null && _strength$value$text !== void 0 ? _strength$value$text : strength[0].text;
-		return /* @__PURE__ */ jsxs("div", {
-			"aria-labelledby": "meter-label",
-			"aria-live": "polite",
-			"aria-valuemax": (_strength$length = strength.length) !== null && _strength$length !== void 0 ? _strength$length : 0,
-			"aria-valuemin": 0,
-			"aria-valuenow": value,
-			className,
-			"data-testid": dataTestId,
-			id,
-			role: "meter",
-			style,
-			title,
-			children: [/* @__PURE__ */ jsxs(Text, {
-				as: "p",
-				id: "meter-label",
-				variant: "bodySmallStrong",
-				children: [title, /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					className: meterStyle.strength,
-					style: assignInlineVars({ [colorMeter]: strength[value].color }),
+function init_Meter() {
+	return (init_Meter = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Meter = ({ strength, title, value, className, "data-testid": dataTestId, style, id }) => {
+			var _strength$value$color;
+			var _strength$value;
+			var _strength$value$text;
+			var _strength$value2;
+			var _strength$length;
+			const width = `${(value + 1) / strength.length * 100}%`;
+			const backgroundColor = (_strength$value$color = (_strength$value = strength[value]) === null || _strength$value === void 0 ? void 0 : _strength$value.color) !== null && _strength$value$color !== void 0 ? _strength$value$color : strength[0].color;
+			const text = (_strength$value$text = (_strength$value2 = strength[value]) === null || _strength$value2 === void 0 ? void 0 : _strength$value2.text) !== null && _strength$value$text !== void 0 ? _strength$value$text : strength[0].text;
+			return /* @__PURE__ */ jsxs("div", {
+				"aria-labelledby": "meter-label",
+				"aria-live": "polite",
+				"aria-valuemax": (_strength$length = strength.length) !== null && _strength$length !== void 0 ? _strength$length : 0,
+				"aria-valuemin": 0,
+				"aria-valuenow": value,
+				className,
+				"data-testid": dataTestId,
+				id,
+				role: "meter",
+				style,
+				title,
+				children: [/* @__PURE__ */ jsxs(Text, {
+					as: "p",
+					id: "meter-label",
 					variant: "bodySmallStrong",
-					children: text
+					children: [title, /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: meterStyle.strength,
+						style: assignInlineVars({ [colorMeter]: strength[value].color }),
+						variant: "bodySmallStrong",
+						children: text
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: meterStyle.wrapper,
+					children: /* @__PURE__ */ jsx("div", {
+						className: meterStyle.meter,
+						style: {
+							backgroundColor,
+							width
+						}
+					})
 				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: meterStyle.wrapper,
-				children: /* @__PURE__ */ jsx("div", {
-					className: meterStyle.meter,
-					style: {
-						backgroundColor,
-						width
-					}
-				})
-			})]
-		});
-	};
-	Meter.displayName = "Meter";
-});
+			});
+		};
+		Meter.displayName = "Meter";
+	}))();
+}
 
 //#endregion
 init_Meter();

package/dist/components/Meter/styles.css.js

@@ -3,15 +3,17 @@ import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/components/Meter/styles.css.ts
 var colorMeter, meterStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	colorMeter = "var(--uv_1enq5vc0)";
-	meterStyle = {
-		strength: "uv_1enq5vc1",
-		wrapper: "uv_1enq5vc2",
-		meter: "uv_1enq5vc3"
-	};
-});
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		colorMeter = "var(--uv_1enq5vc0)";
+		meterStyle = {
+			strength: "uv_1enq5vc1",
+			wrapper: "uv_1enq5vc2",
+			meter: "uv_1enq5vc3"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/Meter/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/Meter/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();

package/dist/components/Modal/ModalContent.d.ts

@@ -2,7 +2,6 @@ import type { ComponentProps, CSSProperties } from 'react';
 import type { Modal } from '.';
 import type { ModalPlacement, ModalSize } from './types';
 type ModalContentProps = ComponentProps<typeof Modal> & {
-    visible: boolean;
     open: boolean;
     placement: ModalPlacement;
     finalSize: ModalSize;
@@ -14,6 +13,6 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
     image?: string;
     style?: CSSProperties;
 };
-export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, closeButtonSentiment, style, ref, isDrawer, }: ModalContentProps) => import("react").JSX.Element | null;
+export declare const ModalContent: ({ open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, closeButtonSentiment, style, ref, isDrawer, }: ModalContentProps) => import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=ModalContent.d.ts.map

package/dist/components/Modal/ModalContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,CAAA;AAG9B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxD,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,cAAc,CAAA;IACzB,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,YAAY,6QAuBtB,iBAAiB,uCA4CV,CAAA"}
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,CAAA;AAG9B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKxD,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IACtD,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,cAAc,CAAA;IACzB,SAAS,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,YAAY,oQAsBtB,iBAAiB,uCAoDnB,CAAA"}

package/dist/components/Modal/ModalContent.js

@@ -3,52 +3,61 @@ import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Button, init_Button } from "../Button/index.js";
 import { init_styles_css, modalStyle } from "./styles.css.js";
 import { Dialog, init_Dialog } from "./components/Dialog.js";
+import { init_useDelayUnmount, useDelayUnmount } from "./useDelayUnmount.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { usePrefersReducedMotion } from "@ultraviolet/animations";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 
 //#region src/components/Modal/ModalContent.tsx
 var ModalContent;
-var init_ModalContent = __esmMin(() => {
-	init_Button();
-	init_Dialog();
-	init_styles_css();
-	ModalContent = ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, closeButtonSentiment, style, ref, isDrawer }) => visible || open ? /* @__PURE__ */ jsxs(Dialog, {
-		ariaLabel,
-		backdropClassName,
-		className,
-		"data-testid": dataTestId,
-		hideOnClickOutside,
-		hideOnEsc,
-		id: finalId,
-		image,
-		isDrawer,
-		onClose: handleClose,
-		open: visible || open,
-		placement,
-		preventBodyScroll,
-		ref,
-		size: finalSize,
-		style,
-		children: [typeof children === "function" ? children({
-			close: handleClose,
-			modalId: finalId,
-			show: handleOpen,
-			toggle: handleToggle,
-			visible
-		}) : children, /* @__PURE__ */ jsx("div", {
-			className: modalStyle.container,
-			children: isClosable ? /* @__PURE__ */ jsx(Button, {
-				"aria-label": "close",
-				"data-testid": dataTestId ? `${dataTestId}-close-button` : void 0,
-				onClick: handleClose,
-				sentiment: closeButtonSentiment,
-				size: "small",
-				variant: "ghost",
-				children: /* @__PURE__ */ jsx(CloseIcon, {})
-			}) : null
-		})]
-	}) : null;
-});
+function init_ModalContent() {
+	return (init_ModalContent = __esmMin(() => {
+		init_Button();
+		init_Dialog();
+		init_useDelayUnmount();
+		init_styles_css();
+		ModalContent = ({ open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, closeButtonSentiment, style, ref, isDrawer }) => {
+			const prefersReducedMotion = usePrefersReducedMotion();
+			if (!useDelayUnmount(open, prefersReducedMotion ? 0 : 250)) return null;
+			return /* @__PURE__ */ jsxs(Dialog, {
+				ariaLabel,
+				backdropClassName,
+				className,
+				"data-testid": dataTestId,
+				hideOnClickOutside,
+				hideOnEsc,
+				id: finalId,
+				image,
+				isDrawer,
+				onClose: handleClose,
+				open,
+				placement,
+				preventBodyScroll,
+				ref,
+				size: finalSize,
+				style,
+				children: [typeof children === "function" ? children({
+					close: handleClose,
+					modalId: finalId,
+					show: handleOpen,
+					toggle: handleToggle,
+					visible: open
+				}) : children, /* @__PURE__ */ jsx("div", {
+					className: modalStyle.container,
+					children: isClosable ? /* @__PURE__ */ jsx(Button, {
+						"aria-label": "close",
+						"data-testid": dataTestId ? `${dataTestId}-close-button` : void 0,
+						onClick: handleClose,
+						sentiment: closeButtonSentiment,
+						size: "small",
+						variant: "ghost",
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					}) : null
+				})]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_ModalContent();

package/dist/components/Modal/ModalProvider.js

@@ -5,45 +5,47 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Modal/ModalProvider.tsx
 var ModalContext, useModal, ModalProvider;
-var init_ModalProvider = __esmMin(() => {
-	ModalContext = createContext(void 0);
-	useModal = () => {
-		const context = useContext(ModalContext);
-		if (!context) throw new Error("useModal must be used within a ModalProvider");
-		return context;
-	};
-	ModalProvider = ({ children }) => {
-		const [openedModals, setOpenedModals] = useState([]);
-		const [previsousOpenedModales, setPreviousOpenedModales] = useState([]);
-		const registerModal = useCallback((object) => {
-			setOpenedModals((prev) => {
-				setPreviousOpenedModales(prev);
-				return [...prev, object];
+function init_ModalProvider() {
+	return (init_ModalProvider = __esmMin(() => {
+		ModalContext = createContext(void 0);
+		useModal = () => {
+			const context = useContext(ModalContext);
+			if (!context) throw new Error("useModal must be used within a ModalProvider");
+			return context;
+		};
+		ModalProvider = ({ children }) => {
+			const [openedModals, setOpenedModals] = useState([]);
+			const [previsousOpenedModales, setPreviousOpenedModales] = useState([]);
+			const registerModal = useCallback((object) => {
+				setOpenedModals((prev) => {
+					setPreviousOpenedModales(prev);
+					return [...prev, object];
+				});
+			}, []);
+			const unregisterModal = useCallback((id) => {
+				setOpenedModals((prev) => {
+					setPreviousOpenedModales(prev);
+					return prev.filter((modalId) => modalId.id !== id);
+				});
+			}, []);
+			const value = useMemo(() => ({
+				openedModals,
+				previsousOpenedModales,
+				registerModal,
+				unregisterModal
+			}), [
+				openedModals,
+				registerModal,
+				unregisterModal,
+				previsousOpenedModales
+			]);
+			return /* @__PURE__ */ jsx(ModalContext.Provider, {
+				value,
+				children
 			});
-		}, []);
-		const unregisterModal = useCallback((id) => {
-			setOpenedModals((prev) => {
-				setPreviousOpenedModales(prev);
-				return prev.filter((modalId) => modalId.id !== id);
-			});
-		}, []);
-		const value = useMemo(() => ({
-			openedModals,
-			previsousOpenedModales,
-			registerModal,
-			unregisterModal
-		}), [
-			openedModals,
-			registerModal,
-			unregisterModal,
-			previsousOpenedModales
-		]);
-		return /* @__PURE__ */ jsx(ModalContext.Provider, {
-			value,
-			children
-		});
-	};
-});
+		};
+	}))();
+}
 
 //#endregion
 init_ModalProvider();

package/dist/components/Modal/components/Dialog.d.ts

@@ -1,3 +1,3 @@
 import type { DialogProps } from '../types';
-export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, 'data-testid': dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, ref, isDrawer, }: DialogProps) => import("react").ReactPortal;
+export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, 'data-testid': dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, backdropStyle, image, style, ref, isDrawer, open, }: DialogProps) => import("react").ReactPortal;
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Modal/components/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/Dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAS3C,eAAO,MAAM,MAAM,mMAiBhB,WAAW,gCAyNb,CAAA"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/Dialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAS3C,eAAO,MAAM,MAAM,wNAmBhB,WAAW,gCA4Nb,CAAA"}