@ultraviolet/ui 3.21.1 → 3.22.0

package/dist/components/DateInput/index.js

@@ -17,246 +17,248 @@ import { CalendarRangeIcon } from "@ultraviolet/icons/CalendarRangeIcon";
 
 //#region src/components/DateInput/index.tsx
 var DateInput;
-var init_DateInput = __esmMin(() => {
-	init_Card();
-	init_Stack();
-	init_Text();
-	init_TextInput();
-	init_CalendarContent();
-	init_Popup();
-	init_Context();
-	init_helpers();
-	init_helpersLocale();
-	init_styles_css();
-	DateInput = ({ autoFocus = false, disabled = false, error, format, label, labelDescription, locale = "en-US", maxDate, minDate, startDate, endDate, name, onBlur, onChange, placeholder, onFocus, required = false, excludeDates, value, className, id, success, helper, size = "large", readOnly = false, tooltip, clearable, selectsRange = false, showMonthYearPicker = false, input = "text", "data-testid": dataTestId, style, "aria-describedBy": ariaDescribedBy }) => {
-		const defaultMonthToShow = useMemo(() => {
-			if (value) return new Date(value).getMonth() + 1;
-			if (startDate && selectsRange) return startDate.getMonth() + 1;
-			if (endDate && selectsRange) return endDate.getMonth() + 1;
-			return (/* @__PURE__ */ new Date()).getMonth() + 1;
-		}, [
-			endDate,
-			selectsRange,
-			startDate,
-			value
-		]);
-		const defaultYearToShow = useMemo(() => {
-			if (value) return new Date(value).getFullYear();
-			if (startDate && selectsRange) return startDate.getFullYear();
-			if (endDate && selectsRange) return endDate.getFullYear();
-			return (/* @__PURE__ */ new Date()).getFullYear();
-		}, [
-			endDate,
-			selectsRange,
-			startDate,
-			value
-		]);
-		const [computedValue, setValue] = useState(value && !selectsRange ? new Date(value) : null);
-		const [computedRange, setRange] = useState({
-			end: endDate !== null && endDate !== void 0 ? endDate : null,
-			start: startDate !== null && startDate !== void 0 ? startDate : null
-		});
-		const [isPopupVisible, setVisible] = useState(false);
-		const [monthToShow, setMonthToShow] = useState(defaultMonthToShow);
-		const [yearToShow, setYearToShow] = useState(defaultYearToShow);
-		const [inputValue, setInputValue] = useState(formatValue(computedValue, computedRange, showMonthYearPicker, selectsRange, format));
-		const [hoveredDate, setHoveredDate] = useState(null);
-		const refInput = useRef(null);
-		const popupRef = useRef(null);
-		const MONTHS = getMonths(locale);
-		const DAYS = getDays(locale);
-		const MONTHS_ARR = getLocalizedMonths(locale);
-		const valueContext = useMemo(() => ({
-			DAYS,
-			disabled,
-			excludeDates,
-			format,
-			hoveredDate,
-			MONTHS,
-			MONTHS_ARR,
-			maxDate,
-			minDate,
-			monthToShow,
-			onChange,
-			range: computedRange,
-			readOnly,
-			selectsRange,
-			setHoveredDate,
-			setInputValue,
-			setMonthToShow,
-			setRange,
-			setValue,
-			setVisible,
-			setYearToShow,
-			showMonthYearPicker,
-			value: computedValue,
-			yearToShow
-		}), [
-			showMonthYearPicker,
-			disabled,
-			readOnly,
-			selectsRange,
-			computedValue,
-			computedRange,
-			monthToShow,
-			yearToShow,
-			excludeDates,
-			maxDate,
-			minDate,
-			MONTHS,
-			MONTHS_ARR,
-			DAYS,
-			onChange,
-			format,
-			setInputValue,
-			setVisible,
-			hoveredDate,
-			setHoveredDate
-		]);
-		useEffect(() => {
-			if (!selectsRange) {
-				var _formatValue;
-				setValue(value !== null && value !== void 0 ? value : null);
-				setInputValue((_formatValue = formatValue(value ? new Date(value) : null, null, showMonthYearPicker, selectsRange, format)) !== null && _formatValue !== void 0 ? _formatValue : "");
-			}
-			if (selectsRange) {
-				setRange({
-					end: endDate !== null && endDate !== void 0 ? endDate : null,
-					start: startDate !== null && startDate !== void 0 ? startDate : null
-				});
-				setInputValue(formatValue(null, {
-					start: startDate !== null && startDate !== void 0 ? startDate : null,
-					end: endDate !== null && endDate !== void 0 ? endDate : null
-				}, showMonthYearPicker, true, format));
-			}
-		}, [
-			endDate,
-			startDate,
-			value,
-			selectsRange,
-			format,
-			showMonthYearPicker
-		]);
-		const manageOnChange = (event) => {
-			const newValue = event.currentTarget.value;
-			if (!newValue) onChange === null || onChange === void 0 || onChange(selectsRange ? [null, null] : null);
-			if (selectsRange) {
-				const computedNewRange = createDateRange(newValue, showMonthYearPicker);
-				setRange({
-					end: computedNewRange[1],
-					start: computedNewRange[0]
-				});
-				setInputValue(newValue);
-				if (computedNewRange[0]) {
-					setMonthToShow(computedNewRange[0].getMonth() + 1);
-					setYearToShow(computedNewRange[0].getFullYear());
+function init_DateInput() {
+	return (init_DateInput = __esmMin(() => {
+		init_Card();
+		init_Stack();
+		init_Text();
+		init_TextInput();
+		init_CalendarContent();
+		init_Popup();
+		init_Context();
+		init_helpers();
+		init_helpersLocale();
+		init_styles_css();
+		DateInput = ({ autoFocus = false, disabled = false, error, format, label, labelDescription, locale = "en-US", maxDate, minDate, startDate, endDate, name, onBlur, onChange, placeholder, onFocus, required = false, excludeDates, value, className, id, success, helper, size = "large", readOnly = false, tooltip, clearable, selectsRange = false, showMonthYearPicker = false, input = "text", "data-testid": dataTestId, style, "aria-describedBy": ariaDescribedBy }) => {
+			const defaultMonthToShow = useMemo(() => {
+				if (value) return new Date(value).getMonth() + 1;
+				if (startDate && selectsRange) return startDate.getMonth() + 1;
+				if (endDate && selectsRange) return endDate.getMonth() + 1;
+				return (/* @__PURE__ */ new Date()).getMonth() + 1;
+			}, [
+				endDate,
+				selectsRange,
+				startDate,
+				value
+			]);
+			const defaultYearToShow = useMemo(() => {
+				if (value) return new Date(value).getFullYear();
+				if (startDate && selectsRange) return startDate.getFullYear();
+				if (endDate && selectsRange) return endDate.getFullYear();
+				return (/* @__PURE__ */ new Date()).getFullYear();
+			}, [
+				endDate,
+				selectsRange,
+				startDate,
+				value
+			]);
+			const [computedValue, setValue] = useState(value && !selectsRange ? new Date(value) : null);
+			const [computedRange, setRange] = useState({
+				end: endDate !== null && endDate !== void 0 ? endDate : null,
+				start: startDate !== null && startDate !== void 0 ? startDate : null
+			});
+			const [isPopupVisible, setVisible] = useState(false);
+			const [monthToShow, setMonthToShow] = useState(defaultMonthToShow);
+			const [yearToShow, setYearToShow] = useState(defaultYearToShow);
+			const [inputValue, setInputValue] = useState(formatValue(computedValue, computedRange, showMonthYearPicker, selectsRange, format));
+			const [hoveredDate, setHoveredDate] = useState(null);
+			const refInput = useRef(null);
+			const popupRef = useRef(null);
+			const MONTHS = getMonths(locale);
+			const DAYS = getDays(locale);
+			const MONTHS_ARR = getLocalizedMonths(locale);
+			const valueContext = useMemo(() => ({
+				DAYS,
+				disabled,
+				excludeDates,
+				format,
+				hoveredDate,
+				MONTHS,
+				MONTHS_ARR,
+				maxDate,
+				minDate,
+				monthToShow,
+				onChange,
+				range: computedRange,
+				readOnly,
+				selectsRange,
+				setHoveredDate,
+				setInputValue,
+				setMonthToShow,
+				setRange,
+				setValue,
+				setVisible,
+				setYearToShow,
+				showMonthYearPicker,
+				value: computedValue,
+				yearToShow
+			}), [
+				showMonthYearPicker,
+				disabled,
+				readOnly,
+				selectsRange,
+				computedValue,
+				computedRange,
+				monthToShow,
+				yearToShow,
+				excludeDates,
+				maxDate,
+				minDate,
+				MONTHS,
+				MONTHS_ARR,
+				DAYS,
+				onChange,
+				format,
+				setInputValue,
+				setVisible,
+				hoveredDate,
+				setHoveredDate
+			]);
+			useEffect(() => {
+				if (!selectsRange) {
+					var _formatValue;
+					setValue(value !== null && value !== void 0 ? value : null);
+					setInputValue((_formatValue = formatValue(value ? new Date(value) : null, null, showMonthYearPicker, selectsRange, format)) !== null && _formatValue !== void 0 ? _formatValue : "");
 				}
-			} else {
-				const computedDate = createDate(newValue, showMonthYearPicker, minDate, maxDate);
-				if (computedDate) {
-					setMonthToShow(computedDate.getMonth() + 1);
-					setYearToShow(computedDate.getFullYear());
-					setValue(computedDate);
+				if (selectsRange) {
+					setRange({
+						end: endDate !== null && endDate !== void 0 ? endDate : null,
+						start: startDate !== null && startDate !== void 0 ? startDate : null
+					});
+					setInputValue(formatValue(null, {
+						start: startDate !== null && startDate !== void 0 ? startDate : null,
+						end: endDate !== null && endDate !== void 0 ? endDate : null
+					}, showMonthYearPicker, true, format));
 				}
-			}
-			setInputValue(newValue);
-		};
-		const onBlurInput = () => {
-			if (inputValue) if (selectsRange) {
-				const computedNewRange = createDateRange(inputValue, showMonthYearPicker);
-				onChange === null || onChange === void 0 || onChange(computedNewRange, void 0);
-			} else {
-				const computedDate = createDate(inputValue, showMonthYearPicker, minDate, maxDate);
-				onChange === null || onChange === void 0 || onChange(computedDate, void 0);
-			}
-		};
-		return /* @__PURE__ */ jsx(DateInputContext.Provider, {
-			value: valueContext,
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn(className, dateInputStyle.container),
-				"data-testid": dataTestId,
-				id,
-				onBlur,
-				onClick: () => {
-					if (!isPopupVisible) setVisible(true);
-				},
-				onFocus,
-				onKeyDown: (event) => {
-					if ([" ", "Enter"].includes(event.key) && !isPopupVisible) setVisible(true);
-				},
-				ref: popupRef,
-				style,
-				children: input === "text" ? /* @__PURE__ */ jsx(CalendarPopup, {
-					content: /* @__PURE__ */ jsx(CalendarContent, {}),
-					refInput,
-					setVisible,
-					visible: isPopupVisible,
-					children: /* @__PURE__ */ jsx(TextInput, {
-						"aria-describedBy": ariaDescribedBy,
-						autoComplete: "false",
-						autoFocus,
-						clearable,
-						disabled,
-						error,
-						helper,
-						label,
-						labelDescription,
-						name,
-						onBlur: (event) => {
-							var _popupRef$current;
-							if (!((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(event.relatedTarget))) onBlurInput();
-						},
-						onChange: manageOnChange,
-						onKeyDown: (event) => {
-							if (event.key === "Enter") {
-								setVisible(!isPopupVisible);
-								onBlurInput();
-							}
-						},
-						placeholder,
-						readOnly,
-						ref: refInput,
-						required,
-						size,
-						success,
-						suffix: /* @__PURE__ */ jsx(CalendarRangeIcon, {
+			}, [
+				endDate,
+				startDate,
+				value,
+				selectsRange,
+				format,
+				showMonthYearPicker
+			]);
+			const manageOnChange = (event) => {
+				const newValue = event.currentTarget.value;
+				if (!newValue) onChange === null || onChange === void 0 || onChange(selectsRange ? [null, null] : null);
+				if (selectsRange) {
+					const computedNewRange = createDateRange(newValue, showMonthYearPicker);
+					setRange({
+						end: computedNewRange[1],
+						start: computedNewRange[0]
+					});
+					setInputValue(newValue);
+					if (computedNewRange[0]) {
+						setMonthToShow(computedNewRange[0].getMonth() + 1);
+						setYearToShow(computedNewRange[0].getFullYear());
+					}
+				} else {
+					const computedDate = createDate(newValue, showMonthYearPicker, minDate, maxDate);
+					if (computedDate) {
+						setMonthToShow(computedDate.getMonth() + 1);
+						setYearToShow(computedDate.getFullYear());
+						setValue(computedDate);
+					}
+				}
+				setInputValue(newValue);
+			};
+			const onBlurInput = () => {
+				if (inputValue) if (selectsRange) {
+					const computedNewRange = createDateRange(inputValue, showMonthYearPicker);
+					onChange === null || onChange === void 0 || onChange(computedNewRange, void 0);
+				} else {
+					const computedDate = createDate(inputValue, showMonthYearPicker, minDate, maxDate);
+					onChange === null || onChange === void 0 || onChange(computedDate, void 0);
+				}
+			};
+			return /* @__PURE__ */ jsx(DateInputContext.Provider, {
+				value: valueContext,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn(className, dateInputStyle.container),
+					"data-testid": dataTestId,
+					id,
+					onBlur,
+					onClick: () => {
+						if (!isPopupVisible) setVisible(true);
+					},
+					onFocus,
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key) && !isPopupVisible) setVisible(true);
+					},
+					ref: popupRef,
+					style,
+					children: input === "text" ? /* @__PURE__ */ jsx(CalendarPopup, {
+						content: /* @__PURE__ */ jsx(CalendarContent, {}),
+						refInput,
+						setVisible,
+						visible: isPopupVisible,
+						children: /* @__PURE__ */ jsx(TextInput, {
+							"aria-describedBy": ariaDescribedBy,
+							autoComplete: "false",
+							autoFocus,
+							clearable,
 							disabled,
-							sentiment: "neutral",
-							prominence: "weak",
-							size: "small"
-						}),
-						tooltip,
-						value: inputValue
-					})
-				}) : /* @__PURE__ */ jsxs(Stack, {
-					gap: .5,
-					children: [labelDescription ? /* @__PURE__ */ jsxs(Stack, {
-						direction: "row",
-						gap: "1",
-						children: [/* @__PURE__ */ jsx(Text, {
+							error,
+							helper,
+							label,
+							labelDescription,
+							name,
+							onBlur: (event) => {
+								var _popupRef$current;
+								if (!((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.contains(event.relatedTarget))) onBlurInput();
+							},
+							onChange: manageOnChange,
+							onKeyDown: (event) => {
+								if (event.key === "Enter") {
+									setVisible(!isPopupVisible);
+									onBlurInput();
+								}
+							},
+							placeholder,
+							readOnly,
+							ref: refInput,
+							required,
+							size,
+							success,
+							suffix: /* @__PURE__ */ jsx(CalendarRangeIcon, {
+								disabled,
+								sentiment: "neutral",
+								prominence: "weak",
+								size: "small"
+							}),
+							tooltip,
+							value: inputValue
+						})
+					}) : /* @__PURE__ */ jsxs(Stack, {
+						gap: .5,
+						children: [labelDescription ? /* @__PURE__ */ jsxs(Stack, {
+							direction: "row",
+							gap: "1",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "label",
+								prominence: "strong",
+								sentiment: "neutral",
+								variant: "bodyStrong",
+								children: label
+							}), labelDescription]
+						}) : /* @__PURE__ */ jsx(Text, {
 							as: "label",
 							prominence: "strong",
 							sentiment: "neutral",
 							variant: "bodyStrong",
 							children: label
-						}), labelDescription]
-					}) : /* @__PURE__ */ jsx(Text, {
-						as: "label",
-						prominence: "strong",
-						sentiment: "neutral",
-						variant: "bodyStrong",
-						children: label
-					}), /* @__PURE__ */ jsx(Card, {
-						className: dateInputStyle.calendarContentWrapper({ disabled }),
-						disabled,
-						children: /* @__PURE__ */ jsx(CalendarContent, {})
-					})]
+						}), /* @__PURE__ */ jsx(Card, {
+							className: dateInputStyle.calendarContentWrapper({ disabled }),
+							disabled,
+							children: /* @__PURE__ */ jsx(CalendarContent, {})
+						})]
+					})
 				})
-			})
-		});
-	};
-	DateInput.displayName = "DateInput";
-});
+			});
+		};
+		DateInput.displayName = "DateInput";
+	}))();
+}
 
 //#endregion
 init_DateInput();

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

@@ -5,23 +5,25 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/DateInput/styles.css.ts
 var dateInputStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	init_styles_css_ts_vanilla$1();
-	dateInputStyle = {
-		container: "uv_9rlyg90",
-		calendarContentWrapper: createRuntimeFn({
-			defaultClassName: "uv_9rlyg91",
-			variantClassNames: { disabled: { true: "uv_9rlyg92" } },
-			defaultVariants: {},
-			compoundVariants: []
-		}),
-		popup: "uv_9rlyg93 uv_9rlyg91",
-		capitalizedText: "uv_705z6f0",
-		capitalizedTextDay: "uv_705z6f1 uv_705z6f0",
-		dayMonth: "uv_705z6f2"
-	};
-});
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$1();
+		dateInputStyle = {
+			container: "uv_9rlyg90",
+			calendarContentWrapper: createRuntimeFn({
+				defaultClassName: "uv_9rlyg91",
+				variantClassNames: { disabled: { true: "uv_9rlyg92" } },
+				defaultVariants: {},
+				compoundVariants: []
+			}),
+			popup: "uv_9rlyg93 uv_9rlyg91",
+			capitalizedText: "uv_705z6f0",
+			capitalizedTextDay: "uv_705z6f1 uv_705z6f0",
+			dayMonth: "uv_705z6f2"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

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

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/DateInput/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/Description/index.js

@@ -7,43 +7,45 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Description/index.tsx
 var Description;
-var init_Description = __esmMin(() => {
-	init_hasHelperText();
-	init_Text();
-	Description = ({ size = "large", id, disabled, helper, success, error, style, className }) => {
-		const hasTextError = typeof error === "string" || canDisplay(error);
-		const hasTextSuccess = typeof success === "string";
-		const computedSentiment = useMemo(() => {
-			if (error) return "danger";
-			if (success) return "success";
-			return "neutral";
-		}, [error, success]);
-		const computedContent = useMemo(() => {
-			if (hasTextError) return error;
-			if (hasTextSuccess && !error) return success;
-			return helper;
-		}, [
-			error,
-			success,
-			helper,
-			hasTextError,
-			hasTextSuccess
-		]);
-		return helper || hasTextError || hasTextSuccess ? /* @__PURE__ */ jsx(Text, {
-			role: "status",
-			as: "span",
-			variant: size === "small" ? "captionSmall" : "caption",
-			sentiment: computedSentiment,
-			prominence: error || success ? "default" : "weak",
-			disabled,
-			style,
-			className,
-			id,
-			children: computedContent
-		}) : null;
-	};
-	Description.displayName = "Description";
-});
+function init_Description() {
+	return (init_Description = __esmMin(() => {
+		init_hasHelperText();
+		init_Text();
+		Description = ({ size = "large", id, disabled, helper, success, error, style, className }) => {
+			const hasTextError = typeof error === "string" || canDisplay(error);
+			const hasTextSuccess = typeof success === "string";
+			const computedSentiment = useMemo(() => {
+				if (error) return "danger";
+				if (success) return "success";
+				return "neutral";
+			}, [error, success]);
+			const computedContent = useMemo(() => {
+				if (hasTextError) return error;
+				if (hasTextSuccess && !error) return success;
+				return helper;
+			}, [
+				error,
+				success,
+				helper,
+				hasTextError,
+				hasTextSuccess
+			]);
+			return helper || hasTextError || hasTextSuccess ? /* @__PURE__ */ jsx(Text, {
+				role: "status",
+				as: "span",
+				variant: size === "small" ? "captionSmall" : "caption",
+				sentiment: computedSentiment,
+				prominence: error || success ? "default" : "weak",
+				disabled,
+				style,
+				className,
+				id,
+				children: computedContent
+			}) : null;
+		};
+		Description.displayName = "Description";
+	}))();
+}
 
 //#endregion
 init_Description();

package/dist/components/Dialog/Context.js

@@ -4,14 +4,16 @@ import { createContext, useContext } from "react";
 
 //#region src/components/Dialog/Context.tsx
 var DialogContext, useDialogContext;
-var init_Context = __esmMin(() => {
-	DialogContext = createContext(void 0);
-	useDialogContext = () => {
-		const context = useContext(DialogContext);
-		if (!context) throw new Error("Dialog context can only be used inside a Dialog component");
-		return context;
-	};
-});
+function init_Context() {
+	return (init_Context = __esmMin(() => {
+		DialogContext = createContext(void 0);
+		useDialogContext = () => {
+			const context = useContext(DialogContext);
+			if (!context) throw new Error("Dialog context can only be used inside a Dialog component");
+			return context;
+		};
+	}))();
+}
 
 //#endregion
 init_Context();

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAGrC,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;qCAExD,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,iBAAiB"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAGrC,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;qCAExD,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,iBAAiB"}