@povio/ui 2.1.14 → 2.1.15

package/dist/CheckboxCheckmark2.js

@@ -0,0 +1,25 @@
+import { CheckboxCheckmarkIcon } from "./CheckboxCheckmark.js";
+import { CheckboxIndeterminateIcon } from "./CheckboxIndeterminate.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { checkbox, checkboxIcon } from "./checkbox.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const checkboxCva = uiStyle?.checkbox?.cva ?? checkbox;
+	const checkboxIconCva = uiStyle?.checkbox?.iconCva ?? checkboxIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: checkboxCva({
+			variant,
+			...props,
+			className
+		}),
+		children: [/* @__PURE__ */ jsx(SelectedIcon, { className: checkboxIconCva({
+			...props,
+			iconVariant: "selected"
+		}) }), /* @__PURE__ */ jsx(IndeterminateIcon, { className: checkboxIconCva({
+			...props,
+			iconVariant: "indeterminate"
+		}) })]
+	});
+};
+export { CheckboxCheckmark };

package/dist/CheckboxIndeterminate.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+const CheckboxIndeterminateIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 10 2",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M9 1H1"
+	})
+});
+export { CheckboxIndeterminateIcon };

package/dist/ChevronDown.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronDownIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronDownIcon };

package/dist/ChevronLeft.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M15.707 5.293a1 1 0 0 1 0 1.414L10.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronLeftIcon };

package/dist/ChevronRight.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M8.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 0-1.414",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronRightIcon };

package/dist/ChevronUp.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronUpIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronUpIcon };

package/dist/ChevronsLeft.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronsLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M11.749 17.749a.857.857 0 0 1-1.212 0l-5.143-5.143a.857.857 0 0 1 0-1.212l5.143-5.143a.857.857 0 0 1 1.212 1.212L7.212 12l4.537 4.537a.857.857 0 0 1 0 1.212M18.749 17.749a.857.857 0 0 1-1.212 0l-5.143-5.143a.857.857 0 0 1 0-1.212l5.143-5.143a.857.857 0 0 1 1.212 1.212L14.212 12l4.537 4.537a.857.857 0 0 1 0 1.212",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronsLeftIcon };

package/dist/ChevronsRight.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const ChevronsRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M12.251 6.251a.857.857 0 0 1 1.212 0l5.143 5.143a.857.857 0 0 1 0 1.212l-5.143 5.143a.857.857 0 1 1-1.212-1.212L16.788 12 12.25 7.463a.857.857 0 0 1 0-1.212M5.251 6.251a.857.857 0 0 1 1.212 0l5.143 5.143a.857.857 0 0 1 0 1.212L6.463 17.75a.857.857 0 1 1-1.212-1.212L9.788 12 5.25 7.463a.857.857 0 0 1 0-1.212",
+		clipRule: "evenodd"
+	})
+});
+export { ChevronsRightIcon };

package/dist/Clock.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ClockIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m14.75 15.917 1.167-1.167-3.083-3.083V7.834h-1.667v4.5zM12 20.334a8.1 8.1 0 0 1-3.25-.657 8.4 8.4 0 0 1-2.646-1.78 8.4 8.4 0 0 1-1.78-2.647A8.1 8.1 0 0 1 3.666 12q0-1.729.656-3.25a8.4 8.4 0 0 1 1.781-2.646 8.4 8.4 0 0 1 2.646-1.78A8.1 8.1 0 0 1 12 3.666q1.73 0 3.25.656a8.4 8.4 0 0 1 2.646 1.781 8.4 8.4 0 0 1 1.781 2.646 8.1 8.1 0 0 1 .657 3.25 8.1 8.1 0 0 1-.657 3.25 8.4 8.4 0 0 1-1.78 2.646 8.4 8.4 0 0 1-2.647 1.781 8.1 8.1 0 0 1-3.25.657m0-1.667q2.771 0 4.72-1.948 1.947-1.948 1.947-4.719 0-2.77-1.948-4.718T12 5.334 7.282 7.282 5.334 12t1.948 4.72Q9.229 18.666 12 18.666"
+	})
+});
+export { ClockIcon };

package/dist/Close.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const CloseIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M17.749 7.463a.857.857 0 1 0-1.212-1.212L12 10.788 7.463 6.25a.857.857 0 0 0-1.212 1.212L10.788 12 6.25 16.537a.857.857 0 1 0 1.212 1.212L12 13.212l4.537 4.537a.857.857 0 1 0 1.212-1.212L13.212 12z"
+	})
+});
+export { CloseIcon };

package/dist/ColorPicker.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
+const ColorPicker = ({ colors, value, onChange }) => {
+	return /* @__PURE__ */ jsx(ColorSwatchPicker, {
+		value,
+		onChange: (color) => onChange(color.toString("hex")),
+		className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
+		children: colors.map((color) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
+			color,
+			className: "group",
+			children: /* @__PURE__ */ jsx(ColorSwatch, { className: clsx("size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid", "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2", "cursor-pointer") })
+		}, color))
+	});
+};
+export { ColorPicker };

package/dist/ColorPickerDropdown.js

@@ -0,0 +1,51 @@
+import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { Typography } from "./Typography.js";
+import { useInputCva } from "./input.cva.js";
+import { ColorPicker } from "./ColorPicker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
+import { useState } from "react";
+const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
+	const inputCva = useInputCva();
+	const [isOpen, setIsOpen] = useState(false);
+	const handleChange = (color) => {
+		onChange(color);
+		setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsxs(Button, {
+			className: inputCva({
+				as: "inline",
+				className: clsx("flex items-center justify-between gap-2")
+			}),
+			isDisabled,
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-1",
+				className: "truncate",
+				children
+			}), /* @__PURE__ */ jsx(ArrowDropDownIcon, {
+				className: clsx("size-6 shrink-0", isOpen && "rotate-180"),
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx(Popover, {
+			className: "my-4 w-40 outline-none",
+			offset: 0,
+			placement: "bottom start",
+			children: /* @__PURE__ */ jsx(Dialog, {
+				className: "outline-none",
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx("flex justify-center overflow-hidden p-2 shadow-5 outline-none", "rounded-input-rounding-default border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					children: /* @__PURE__ */ jsx(ColorPicker, {
+						colors,
+						value,
+						onChange: handleChange
+					})
+				})
+			})
+		})]
+	});
+};
+export { ColorPickerDropdown };

package/dist/ColumnConfig.js

@@ -0,0 +1,81 @@
+import { Typography } from "./Typography.js";
+import { Checkbox } from "./Checkbox.js";
+import { ns } from "./i18n.js";
+import { Modal } from "./Modal.js";
+import { Table } from "./Table.js";
+import { useTranslationMemo } from "./useTranslationMemo.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+var VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(Checkbox, {
+	isSelected: original.visible,
+	onChange: () => onToggle(original.id),
+	hideLabel: true,
+	children: original.label
+});
+var getColumns = (t, handleToggleVisibility) => [{
+	id: "name",
+	header: t(($) => $.ui.table.column, { ns: "ui" }),
+	meta: { width: "flex-1" },
+	accessorKey: "label"
+}, {
+	id: "visible",
+	header: t(($) => $.ui.table.show, { ns: "ui" }),
+	meta: { width: "w-20" },
+	cell: ({ original }) => /* @__PURE__ */ jsx(VisibilityCell, {
+		original,
+		onToggle: handleToggleVisibility
+	})
+}];
+function ColumnConfigModal({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }) {
+	const { t } = useTranslation("ui");
+	const [data, setData] = useState([]);
+	useEffect(() => {
+		setData(configColumns.map((column) => {
+			const columnId = column.id ?? column.accessorKey;
+			return {
+				id: columnId,
+				label: column.header,
+				visible: visibleColumns?.[columnId] ?? true
+			};
+		}));
+	}, [configColumns, visibleColumns]);
+	const handleToggleVisibility = useCallback((columnId) => {
+		onVisibilityChange({
+			...visibleColumns,
+			[columnId]: !visibleColumns[columnId]
+		});
+	}, [visibleColumns, onVisibilityChange]);
+	const columns = useTranslationMemo(useCallback((translateFn) => getColumns(translateFn, handleToggleVisibility), [handleToggleVisibility]));
+	const handleReorder = useCallback((reorderedItems) => {
+		setData(reorderedItems);
+		onOrderChange(reorderedItems.map((item) => item.id));
+	}, [onOrderChange]);
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx(Modal, {
+		isOpen,
+		onClose,
+		showCloseIcon: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 p-4",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				as: "h2",
+				variant: "prominent-1",
+				size: "title-5",
+				children: t(($) => $.ui.table.configureColumns)
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-96 overflow-y-auto",
+				children: /* @__PURE__ */ jsx(Table, {
+					items: data,
+					columns,
+					showCellBorder: true,
+					className: "w-full",
+					enableDragDrop: true,
+					getRowId: (row) => row.id,
+					onReorder: handleReorder
+				})
+			})]
+		})
+	});
+}
+export { ColumnConfigModal };

package/dist/DateField.js

@@ -0,0 +1,89 @@
+import { DateSegmentItem } from "./DateSegmentItem.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { useDateField, useLocale } from "react-aria";
+import { createCalendar } from "@internationalized/date";
+import { useDateFieldState } from "react-stately";
+const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry,...props }) => {
+	const { locale } = useLocale();
+	const state = useDateFieldState({
+		...props,
+		isDisabled,
+		isReadOnly: disableManualEntry,
+		locale,
+		createCalendar
+	});
+	const dataFieldRef = useRef(null);
+	const { fieldProps } = useDateField({
+		...props,
+		isDisabled,
+		isReadOnly: disableManualEntry
+	}, state, dataFieldRef);
+	const autoFixYear = () => {
+		const monthSegment = state.segments.find((segment) => segment.type === "month");
+		const daySegment = state.segments.find((segment) => segment.type === "day");
+		const yearSegment = state.segments.find((segment) => segment.type === "year");
+		const hourSegment = state.segments.find((segment) => segment.type === "hour");
+		const minuteSegment = state.segments.find((segment) => segment.type === "minute");
+		const isMonthFilled = monthSegment && !monthSegment.isPlaceholder;
+		const isDayFilled = daySegment && !daySegment.isPlaceholder;
+		const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
+		const isHourEmpty = hourSegment && !parseInt(hourSegment.text);
+		if (minuteSegment && !parseInt(minuteSegment.text)) {
+			let minute = minuteSegment?.value || 0;
+			if (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) minute = parseInt(minuteSegment?.text ?? "00");
+			state.setSegment("minute", minute);
+		}
+		if (isHourEmpty) {
+			let hour = hourSegment?.value || 0;
+			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) hour = parseInt(hourSegment?.text ?? "00");
+			state.setSegment("hour", hour);
+		}
+		if (isMonthFilled && isDayFilled && isYearEmpty) {
+			let year = (/* @__PURE__ */ new Date()).getFullYear();
+			if (yearSegment?.text?.length && yearSegment?.text?.length === 2) year = parseInt(`20${yearSegment?.text}`);
+			state.setSegment("year", year);
+		}
+	};
+	const handleBlur = (e) => {
+		fieldProps.onBlur?.(e);
+		if (!state.value) return;
+		const currentValue = state.value;
+		const { year } = currentValue;
+		if (year >= 0 && year <= 99) {
+			const correctedYear = year <= 50 ? 2e3 + year : 1900 + year;
+			const correctedDate = currentValue.set({ year: correctedYear });
+			if (correctedDate) {
+				state.setValue(correctedDate);
+				props.onChange?.(correctedDate);
+			}
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		clearField: () => {
+			state.setValue(null);
+			for (const segment of state.segments) if (segment.type !== "literal") state.clearSegment(segment.type);
+		},
+		autoFixYear
+	}));
+	useEffect(() => {
+		onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
+	}, [state.segments, onClearChange]);
+	return /* @__PURE__ */ jsx("div", {
+		...fieldProps,
+		ref: dataFieldRef,
+		onBlur: handleBlur,
+		className: clsx("relative w-full", disableManualEntry && "pointer-events-none"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex",
+			children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+				segment,
+				state,
+				isDisabled,
+				hidePlaceholder
+			}, i))
+		})
+	});
+};
+export { DateField };

package/dist/DatePicker.js

@@ -0,0 +1,191 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { Calendar } from "./Calendar2.js";
+import { DatePickerInput } from "./DatePickerInput.js";
+import { DateTimeDialog } from "./DateTimeDialog.js";
+import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { DateTimeUtils } from "./date-time.utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useDatePicker, useLocale } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { DateTime } from "luxon";
+import { useCalendarState, useDatePickerState } from "react-stately";
+var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
+var DatePickerBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const dialogState = useDatePickerState({
+		...rest,
+		defaultValue: value || rest.defaultValue,
+		shouldCloseOnSelect: false,
+		shouldForceLeadingZeros
+	});
+	const state = useDatePickerState({
+		...rest,
+		shouldForceLeadingZeros,
+		value,
+		onChange: (val) => {
+			if (val && (rest.minValue && val < rest?.minValue || rest?.maxValue && val > rest?.maxValue)) {
+				state.setValue(state.value);
+				return;
+			}
+			onChange?.(val);
+			dialogState.setValue(val);
+			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+		},
+		shouldCloseOnSelect: false
+	});
+	const datePickerRef = useRef(null);
+	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, state, datePickerRef);
+	const { calendarProps } = useDatePicker({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, dialogState, datePickerRef);
+	const { locale } = useLocale();
+	const calendarState = useCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar
+	});
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const onApply = () => {
+		state.setValue(dialogState.value);
+		state.toggle();
+	};
+	const onTodayPress = () => {
+		dialogState.setValue(today(getLocalTimeZone()));
+		calendarState.setFocusedDate(today(getLocalTimeZone()));
+	};
+	const onOpenChange = (isOpen) => {
+		state.toggle();
+		calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+		if (!isOpen) dialogState.setValue(state.value);
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("relative inline-flex w-full flex-col text-left", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: [/* @__PURE__ */ jsx(DatePickerInput, {
+				ref: mergeRefs(ref, datePickerRef),
+				as,
+				groupProps,
+				fieldProps: {
+					...fieldProps,
+					placeholderValue: PLACEHOLDER_VALUE
+				},
+				buttonProps,
+				isDirty,
+				isDisabled,
+				disableManualEntry,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isClearable,
+				headerProps,
+				todayIcon,
+				onOpenDropdown: () => state.toggle(),
+				placeholder
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					isValid: !dialogState.isInvalid && !!dialogState.value,
+					onTodayPress,
+					onApply
+				}),
+				label,
+				triggerRef: datePickerRef,
+				dialogProps,
+				isOpen: state.isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx(Calendar, {
+					state: calendarState,
+					calendarProps,
+					onApply
+				})
+			})]
+		})
+	});
+};
+const DatePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
+	const formatCalendarDate = (calendarDate) => {
+		if (calendarDate === null) return null;
+		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
+		const date = DateTimeUtils.fromDateValueToLocal(calendarDate);
+		return DateTime.fromJSDate(date).toISODate();
+	};
+	const parseCalendarDate = (formattedDate) => {
+		if (formattedDate == null) return formattedDate;
+		if (fullIso) return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+		const date = DateTime.fromISO(formattedDate).toJSDate();
+		return toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date));
+	};
+	const dateLimits = {
+		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+	};
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
+				...innerProps,
+				...dateLimits,
+				ref: mergeRefs(ref, field.ref),
+				value: parseCalendarDate(field.value),
+				onChange: (value) => field.onChange(formatCalendarDate(value)),
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DatePickerBase, {
+		...props,
+		...dateLimits,
+		value: parseCalendarDate(props.value),
+		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+	});
+};
+export { DatePicker };