@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/DateInput/index.js

@@ -1,249 +1,260 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { TextInput } from "../TextInput/index.js";
-import { Card } from "../Card/index.js";
-import { DateInputContext } from "./Context.js";
-import { createDate, createDateRange, formatValue } from "./helpers.js";
-import { CalendarContent } from "./components/CalendarContent.js";
-import { CalendarPopup } from "./components/Popup.js";
-import { getDays, getLocalizedMonths, getMonths } from "./helpersLocale.js";
-import { calendarContentWrapper, dateinputContainer } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { TextInput, init_TextInput } from "../TextInput/index.js";
+import { Card, init_Card } from "../Card/index.js";
+import { DateInputContext, init_Context } from "./Context.js";
+import { createDate, createDateRange, formatValue, init_helpers } from "./helpers.js";
+import { dateInputStyle, init_styles_css } from "./styles.css.js";
+import { CalendarContent, init_CalendarContent } from "./components/CalendarContent.js";
+import { CalendarPopup, init_Popup } from "./components/Popup.js";
+import { getDays, getLocalizedMonths, getMonths, init_helpersLocale } from "./helpersLocale.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarRangeIcon } from "@ultraviolet/icons/CalendarRangeIcon";
 
 //#region src/components/DateInput/index.tsx
-/**
-* DateInput can be used to select a specific date
-*/
-const 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 }) => {
-	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());
+var DateInput;
+var init_DateInput = __esmMin(() => {
+	init_Card();
+	init_Stack();
+	init_Text();
+	init_TextInput();
+	init_Context();
+	init_CalendarContent();
+	init_Popup();
+	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 }) => {
+		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);
-			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);
-			onChange === null || onChange === void 0 || onChange(computedDate, void 0);
-		}
-	};
-	return /* @__PURE__ */ jsx(DateInputContext.Provider, {
-		value: valueContext,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn(className, dateinputContainer),
-			"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, {
-					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);
+				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);
+				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, {
+						autoComplete: "false",
+						autoFocus,
+						clearable,
 						disabled,
-						sentiment: "neutral",
-						size: "medium"
-					}),
-					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",
+							size: "medium"
+						}),
+						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: calendarContentWrapper({ disabled }),
-					disabled,
-					children: /* @__PURE__ */ jsx(CalendarContent, {})
-				})]
+					}), /* @__PURE__ */ jsx(Card, {
+						className: dateInputStyle.calendarContentWrapper({ disabled }),
+						disabled,
+						children: /* @__PURE__ */ jsx(CalendarContent, {})
+					})]
+				})
 			})
-		})
-	});
-};
+		});
+	};
+});
 
 //#endregion
-export { DateInput };
+init_DateInput();
+export { DateInput, init_DateInput };

package/dist/components/DateInput/styles.css.d.ts

@@ -1,9 +1,15 @@
-export declare const dateinputContainer: string;
-export declare const calendarContentWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
-    disabled: {
-        true: {
-            cursor: "not-allowed";
+export declare const dateInputStyle: {
+    container: string;
+    calendarContentWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+        disabled: {
+            true: {
+                cursor: "not-allowed";
+            };
         };
-    };
-}>;
+    }>;
+    popup: string;
+    capitalizedText: string;
+    capitalizedTextDay: string;
+    dayMonth: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/DateInput/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,QAA2B,CAAA;AAE1D,eAAO,MAAM,sBAAsB;;;;;;EAajC,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.css.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAO1B,CAAA"}

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

@@ -1,14 +1,28 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./components/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/DateInput/styles.css.ts
-var dateinputContainer = "uv_9rlyg90";
-var calendarContentWrapper = createRuntimeFn({
-	defaultClassName: "uv_9rlyg91",
-	variantClassNames: { disabled: { true: "uv_9rlyg92" } },
-	defaultVariants: {},
-	compoundVariants: []
+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"
+	};
 });
 
 //#endregion
-export { calendarContentWrapper, dateinputContainer };
+init_styles_css();
+export { dateInputStyle, init_styles_css };

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

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/DateInput/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/Dialog/Context.js

@@ -1,14 +1,18 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { createContext, useContext } from "react";
 
 //#region src/components/Dialog/Context.tsx
-const DialogContext = createContext(void 0);
-const useDialogContext = () => {
-	const context = useContext(DialogContext);
-	if (!context) throw new Error("Dialog context can only be used inside a Dialog component");
-	return context;
-};
+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;
+	};
+});
 
 //#endregion
-export { DialogContext, useDialogContext };
+init_Context();
+export { DialogContext, init_Context, useDialogContext };

package/dist/components/Dialog/components/Button.js

@@ -1,20 +1,26 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Button } from "../../Button/index.js";
-import { useDialogContext } from "../Context.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Button, init_Button as init_Button$1 } from "../../Button/index.js";
+import { init_Context, useDialogContext } from "../Context.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Dialog/components/Button.tsx
-const DialogButton = ({ children, onClick, disabled, tooltip, style }) => {
-	return /* @__PURE__ */ jsx(Button, {
-		disabled,
-		onClick,
-		sentiment: useDialogContext().sentiment,
-		style,
-		tooltip,
-		children
-	});
-};
+var DialogButton;
+var init_Button = __esmMin(() => {
+	init_Button$1();
+	init_Context();
+	DialogButton = ({ children, onClick, disabled, tooltip, style }) => {
+		return /* @__PURE__ */ jsx(Button, {
+			disabled,
+			onClick,
+			sentiment: useDialogContext().sentiment,
+			style,
+			tooltip,
+			children
+		});
+	};
+});
 
 //#endregion
-export { DialogButton };
+init_Button();
+export { DialogButton, init_Button };