@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/DateInput/index.js

@@ -1,325 +1,249 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CalendarRangeIcon } from "@ultraviolet/icons/CalendarRangeIcon";
-import { cn } from "@ultraviolet/utils";
-import { useMemo, useState, useRef, useEffect } from "react";
-import { Card } from "../Card/index.js";
+'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 { formatValue, createDateRange, createDate } from "./helpers.js";
-import { getMonths, getDays, getLocalizedMonths } from "./helpersLocale.js";
+import { getDays, getLocalizedMonths, getMonths } from "./helpersLocale.js";
 import { calendarContentWrapper, dateinputContainer } from "./styles.css.js";
-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,
-    start: 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) {
-      setValue(value ?? null);
-      setInputValue(
-        formatValue(
-          value ? new Date(value) : null,
-          null,
-          showMonthYearPicker,
-          selectsRange,
-          format
-        ) ?? ""
-        // Text Input which will use this value, won't update value if value is undefined, so we need force empty string is there is no date
-      );
-    }
-    if (selectsRange) {
-      setRange({
-        end: endDate ?? null,
-        start: startDate ?? null
-      });
-      setInputValue(
-        formatValue(
-          null,
-          { start: startDate ?? null, end: endDate ?? null },
-          showMonthYearPicker,
-          true,
-          format
-        )
-      );
-    }
-  }, [endDate, startDate, value, selectsRange, format, showMonthYearPicker]);
-  const manageOnChange = (event) => {
-    const newValue = event.currentTarget.value;
-    if (!newValue) {
-      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?.(computedNewRange, void 0);
-      } else {
-        const computedDate = createDate(inputValue, showMonthYearPicker);
-        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) => {
-                if (!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: 0.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
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Card,
-          {
-            className: calendarContentWrapper({ disabled }),
-            disabled,
-            children: /* @__PURE__ */ jsx(CalendarContent, {})
-          }
-        )
-      ] })
-    }
-  ) });
-};
-export {
-  DateInput
+import { cn } from "@ultraviolet/utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+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());
+			}
+		} 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, 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, {
+						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
+				}), /* @__PURE__ */ jsx(Card, {
+					className: calendarContentWrapper({ disabled }),
+					disabled,
+					children: /* @__PURE__ */ jsx(CalendarContent, {})
+				})]
+			})
+		})
+	});
 };
+
+//#endregion
+export { DateInput };

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

@@ -1,8 +1,14 @@
-/* empty css                          */
+/* empty css                      */
 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: [] });
-export {
-  calendarContentWrapper,
-  dateinputContainer
-};
+var calendarContentWrapper = createRuntimeFn({
+	defaultClassName: "uv_9rlyg91",
+	variantClassNames: { disabled: { true: "uv_9rlyg92" } },
+	defaultVariants: {},
+	compoundVariants: []
+});
+
+//#endregion
+export { calendarContentWrapper, dateinputContainer };

package/dist/components/Dialog/Context.js

@@ -1,16 +1,14 @@
-"use client";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { createContext, useContext } from "react";
-const DialogContext = createContext(
-  void 0
-);
+
+//#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;
-};
-export {
-  DialogContext,
-  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 };

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,CACN,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC7C,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,kDAM1B,iBAAiB,4CAcnB,CAAA"}
+{"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,CACN,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAC7C,CAAA;AAED,eAAO,MAAM,YAAY,kHAoBxB,CAAA"}