@povio/ui 2.1.14 → 2.1.16

package/dist/DateRangePicker.js

@@ -0,0 +1,601 @@
+import { Typography } from "./Typography.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { ns } from "./i18n.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 { RangeCalendar } from "./RangeCalendar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { CalendarDate, createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
+import { DateTime } from "luxon";
+import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
+import { useTranslation } from "react-i18next";
+var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
+var DateRangePickerBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { t } = useTranslation();
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const [validationRangeError, setValidationRangeError] = useState();
+	const datePickerInputRef = useRef(null);
+	const dateRangePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	const dialogState = useDateRangePickerState({
+		...rest,
+		value,
+		shouldCloseOnSelect: false,
+		shouldForceLeadingZeros
+	});
+	const state = useDateRangePickerState({
+		...rest,
+		shouldForceLeadingZeros,
+		value,
+		onChange: (newValue) => {
+			if (isValidRange(newValue)) return;
+			onChange?.(newValue);
+			handleCalendarStatesChange(newValue);
+		},
+		shouldCloseOnSelect: false
+	});
+	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, state, dateRangePickerRef);
+	const { calendarProps } = useDateRangePicker({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, dialogState, dateRangePickerRef);
+	const { locale } = useLocale$1();
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
+	const formFieldProps = {
+		error: error || validationRangeError,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const leftCalendarState = useRangeCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar,
+		pageBehavior: "single",
+		visibleDuration: { months: 1 },
+		minValue: void 0,
+		maxValue: void 0
+	});
+	const rightCalendarState = useRangeCalendarState({
+		...calendarProps,
+		locale,
+		createCalendar,
+		pageBehavior: "single",
+		visibleDuration: { months: 1 },
+		defaultFocusedValue: today(getLocalTimeZone()).add({ months: 1 }),
+		minValue: void 0,
+		maxValue: void 0
+	});
+	const [activePreset, setActivePreset] = useState(null);
+	const [rangeSelection, setRangeSelection] = useState({
+		start: value?.start || null,
+		end: value?.end || null,
+		isSelecting: false
+	});
+	const [hoverDate, setHoverDate] = useState(null);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const isValidRange = useCallback((newValue) => {
+		if (newValue?.start && newValue?.end) {
+			const startDate = newValue.start;
+			if (newValue.end.compare(startDate) < 0) {
+				setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
+				return true;
+			}
+			setValidationRangeError(void 0);
+		} else setValidationRangeError(void 0);
+		return false;
+	}, [t]);
+	const handleCalendarStatesChange = (newValue) => {
+		if (newValue) {
+			if (isValidRange(newValue)) return;
+			dialogState.setValue(newValue);
+			const startDate = newValue.start;
+			const endDate = newValue.end;
+			leftCalendarState.setFocusedDate(startDate);
+			if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+			else rightCalendarState.setFocusedDate(endDate);
+			leftCalendarState.setValue(newValue);
+			rightCalendarState.setValue(newValue);
+			setRangeSelection({
+				start: newValue.start,
+				end: newValue.end,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		} else {
+			setValidationRangeError(void 0);
+			dialogState.setValue(null);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+			setRangeSelection({
+				start: null,
+				end: null,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		}
+	};
+	const throttledSetHoverDate = useCallback((date) => {
+		requestAnimationFrame(() => {
+			setHoverDate(date);
+		});
+	}, []);
+	const handleDateHover = useCallback((date) => {
+		if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date);
+	}, [
+		rangeSelection.isSelecting,
+		rangeSelection.start,
+		throttledSetHoverDate
+	]);
+	const handleDateSelection = useCallback((date, calendarSide) => {
+		if (calendarSide) {
+			const currentVisibleMonth = (calendarSide === "left" ? leftCalendarState : rightCalendarState).visibleRange.start;
+			if (date.month !== currentVisibleMonth.month || date.year !== currentVisibleMonth.year) if (calendarSide === "left") {
+				leftCalendarState.setFocusedDate(date);
+				rightCalendarState.setFocusedDate(date.add({ months: 1 }));
+			} else {
+				rightCalendarState.setFocusedDate(date);
+				leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
+			}
+		}
+		if (!rangeSelection.isSelecting || !rangeSelection.start) {
+			setRangeSelection({
+				start: date,
+				end: null,
+				isSelecting: true
+			});
+			setHoverDate(null);
+			leftCalendarState.setValue(null);
+			rightCalendarState.setValue(null);
+		} else {
+			const { start } = rangeSelection;
+			const end = date;
+			const finalStart = start.compare(end) <= 0 ? start : end;
+			const finalEnd = start.compare(end) <= 0 ? end : start;
+			const newRange = {
+				start: finalStart,
+				end: finalEnd
+			};
+			leftCalendarState.setValue(newRange);
+			rightCalendarState.setValue(newRange);
+			dialogState.setValue(newRange);
+			setRangeSelection({
+				start: finalStart,
+				end: finalEnd,
+				isSelecting: false
+			});
+			setHoverDate(null);
+			setActivePreset(null);
+		}
+	}, [
+		rangeSelection,
+		leftCalendarState,
+		rightCalendarState,
+		dialogState
+	]);
+	const handleKeyboardNavigation = useCallback((event, date, calendarSide) => {
+		const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
+		const otherState = calendarSide === "left" ? rightCalendarState : leftCalendarState;
+		let shouldPreventDefault = false;
+		switch (event.key) {
+			case "ArrowRight": {
+				const nextDate = date.add({ days: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "left" && nextDate.month !== currentMonth.month) if (nextDate.year === otherMonth.year && nextDate.month === otherMonth.month) {
+					otherState.setFocusedDate(nextDate);
+					shouldPreventDefault = true;
+				} else {
+					rightCalendarState.setFocusedDate(nextDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowLeft": {
+				const prevDate = date.subtract({ days: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "right" && prevDate.month !== currentMonth.month) if (prevDate.year === otherMonth.year && prevDate.month === otherMonth.month) {
+					otherState.setFocusedDate(prevDate);
+					shouldPreventDefault = true;
+				} else {
+					leftCalendarState.setFocusedDate(prevDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowDown": {
+				const nextWeekDate = date.add({ weeks: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "left" && nextWeekDate.month !== currentMonth.month) if (nextWeekDate.year === otherMonth.year && nextWeekDate.month === otherMonth.month) {
+					otherState.setFocusedDate(nextWeekDate);
+					shouldPreventDefault = true;
+				} else {
+					rightCalendarState.setFocusedDate(nextWeekDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "ArrowUp": {
+				const prevWeekDate = date.subtract({ weeks: 1 });
+				const currentMonth = currentState.visibleRange.start;
+				const otherMonth = otherState.visibleRange.start;
+				if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
+					otherState.setFocusedDate(prevWeekDate);
+					shouldPreventDefault = true;
+				} else {
+					leftCalendarState.setFocusedDate(prevWeekDate);
+					shouldPreventDefault = true;
+				}
+				break;
+			}
+			case "Enter":
+			case " ":
+				handleDateSelection(date);
+				shouldPreventDefault = true;
+				break;
+			case "Escape":
+				setRangeSelection({
+					start: null,
+					end: null,
+					isSelecting: false
+				});
+				setHoverDate(null);
+				shouldPreventDefault = true;
+				break;
+			default: break;
+		}
+		if (shouldPreventDefault) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		return shouldPreventDefault;
+	}, [
+		leftCalendarState,
+		rightCalendarState,
+		handleDateSelection
+	]);
+	const syncCalendarStates = useCallback((newValue) => {
+		if (isValidRange(newValue)) return;
+		leftCalendarState.setValue(newValue);
+		rightCalendarState.setValue(newValue);
+		dialogState.setValue(newValue);
+		if (newValue) setRangeSelection({
+			start: newValue.start,
+			end: newValue.end,
+			isSelecting: false
+		});
+		else setRangeSelection({
+			start: null,
+			end: null,
+			isSelecting: false
+		});
+		setHoverDate(null);
+	}, [
+		isValidRange,
+		leftCalendarState,
+		rightCalendarState,
+		dialogState
+	]);
+	const onApply = () => {
+		const valueToApply = rangeSelection.start && rangeSelection.end ? {
+			start: rangeSelection.start,
+			end: rangeSelection.end
+		} : dialogState.value;
+		if (valueToApply) state.setValue(valueToApply);
+		state.toggle();
+	};
+	const onTodayPress = () => {
+		const todayDate$1 = today(getLocalTimeZone());
+		leftCalendarState.setFocusedDate(todayDate$1);
+		rightCalendarState.setFocusedDate(todayDate$1.add({ months: 1 }));
+		syncCalendarStates({
+			start: todayDate$1,
+			end: todayDate$1
+		});
+	};
+	const onOpenChange = (isOpen) => {
+		state.toggle();
+		if (!isOpen) {
+			if (state.value) {
+				dialogState.setValue(state.value);
+				leftCalendarState.setValue(state.value);
+				rightCalendarState.setValue(state.value);
+				const startDate = state.value.start || today(getLocalTimeZone());
+				const endDate = state.value.end || today(getLocalTimeZone()).add({ months: 1 });
+				leftCalendarState.setFocusedDate(startDate);
+				if (startDate.year === endDate.year && startDate.month === endDate.month) rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
+				else rightCalendarState.setFocusedDate(endDate);
+				setRangeSelection({
+					start: state.value.start,
+					end: state.value.end,
+					isSelecting: false
+				});
+			}
+		}
+	};
+	const todayDate = today(getLocalTimeZone());
+	const getThisWeekRange = () => {
+		return {
+			start: startOfWeek(todayDate, locale),
+			end: endOfWeek(todayDate, locale)
+		};
+	};
+	const getLastWeekRange = () => {
+		const thisWeekStart = startOfWeek(todayDate, locale);
+		return {
+			start: thisWeekStart.subtract({ weeks: 1 }),
+			end: thisWeekStart.subtract({ days: 1 })
+		};
+	};
+	const getThisAndLastWeekRange = () => {
+		const thisWeekEnd = endOfWeek(todayDate, locale);
+		return {
+			start: startOfWeek(todayDate, locale).subtract({ weeks: 1 }),
+			end: thisWeekEnd
+		};
+	};
+	const getThisMonthRange = () => {
+		return {
+			start: startOfMonth(todayDate),
+			end: endOfMonth(todayDate)
+		};
+	};
+	const getThisAndLastMonthRange = () => {
+		const thisMonthEnd = endOfMonth(todayDate);
+		return {
+			start: startOfMonth(todayDate).subtract({ months: 1 }),
+			end: thisMonthEnd
+		};
+	};
+	const presets = [
+		{
+			label: t(($) => $.ui.datePicker.presets.thisWeek, { ns: "ui" }),
+			getValue: getThisWeekRange
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.lastWeek, { ns: "ui" }),
+			getValue: getLastWeekRange
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
+			getValue: getThisAndLastWeekRange
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.thisMonth, { ns: "ui" }),
+			getValue: getThisMonthRange
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
+			getValue: getThisAndLastMonthRange
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.thisYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate),
+				end: todayDate
+			})
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.lastYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: endOfYear(todayDate.subtract({ years: 1 }))
+			})
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate.subtract({ years: 1 })),
+				end: todayDate
+			})
+		},
+		{
+			label: t(($) => $.ui.datePicker.presets.soFar, { ns: "ui" }),
+			getValue: () => ({
+				start: startOfYear(todayDate),
+				end: todayDate
+			})
+		}
+	];
+	const selectPreset = (preset) => {
+		setActivePreset(preset.label);
+		const presetValue = preset.getValue();
+		syncCalendarStates(presetValue);
+		const startDate = presetValue.start;
+		leftCalendarState.setFocusedDate(startDate);
+		const endDate = presetValue.end;
+		if ((endDate.year - startDate.year) * 12 + (endDate.month - startDate.month) > 2) rightCalendarState.setFocusedDate(endDate);
+		else {
+			const rightCalendarMonth = startDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(rightCalendarMonth);
+		}
+	};
+	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, datePickerInputRef),
+				as,
+				groupProps,
+				fieldProps: {
+					...startFieldProps,
+					placeholderValue: PLACEHOLDER_VALUE
+				},
+				endFieldProps: {
+					...endFieldProps,
+					placeholderValue: PLACEHOLDER_VALUE
+				},
+				buttonProps,
+				isDisabled,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isClearable,
+				headerProps,
+				todayIcon,
+				isDirty,
+				disableManualEntry,
+				placeholder,
+				onOpenDropdown: () => state.toggle()
+			}), /* @__PURE__ */ jsx(DateTimeDialog, {
+				hideSidebar,
+				sidebar: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
+					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+						onClick: () => selectPreset(preset),
+						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
+						children: /* @__PURE__ */ jsx(Typography, {
+							size: "label-2",
+							sizeMobile: "label-3",
+							as: "span",
+							className: "whitespace-nowrap",
+							children: preset.label
+						})
+					}, preset.label))
+				}),
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					isValid: !dialogState.isInvalid && !!dialogState.value,
+					onTodayPress,
+					onApply
+				}),
+				label,
+				triggerRef: dateRangePickerRef,
+				dialogProps,
+				isOpen: state.isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "mb-4 flex max-w-[804px] md:mb-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-1 justify-center",
+						children: /* @__PURE__ */ jsx(RangeCalendar, {
+							leftCalendarState,
+							rightCalendarState,
+							calendarProps,
+							onApply,
+							onRangeChange: syncCalendarStates,
+							onDateSelection: handleDateSelection,
+							onDateHover: handleDateHover,
+							rangeSelection,
+							hoverDate,
+							onKeyboardNavigation: handleKeyboardNavigation
+						})
+					})
+				})
+			})]
+		})
+	});
+};
+const DateRangePicker = ({ fullIso = true, minValue, maxValue,...props }) => {
+	const formatDateRange = (range) => {
+		if (!range?.start || !range?.end) return null;
+		if (fullIso) return {
+			start: DateTimeUtils.fromCalendarDateToUTCISO(range.start),
+			end: DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true })
+		};
+		const startDate = DateTimeUtils.fromDateValueToLocal(range.start);
+		const endDate = DateTimeUtils.fromDateValueToLocal(range.end);
+		return {
+			start: DateTime.fromJSDate(startDate).toISODate(),
+			end: DateTime.fromJSDate(endDate).toISODate()
+		};
+	};
+	const parseDateRange = (formattedRange) => {
+		if (!formattedRange?.start || !formattedRange?.end) return formattedRange;
+		if (fullIso) return {
+			start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
+			end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end)
+		};
+		const startDate = DateTime.fromISO(formattedRange.start).toJSDate();
+		const endDate = DateTime.fromISO(formattedRange.end).toJSDate();
+		const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate);
+		const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate);
+		return {
+			start: toCalendarDate(startZonedDateTime),
+			end: toCalendarDate(endZonedDateTime)
+		};
+	};
+	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(DateRangePickerBase, {
+				...innerProps,
+				...dateLimits,
+				ref: mergeRefs(ref, field.ref),
+				value: parseDateRange(field.value),
+				onChange: (value) => field.onChange(formatDateRange(value)),
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DateRangePickerBase, {
+		...props,
+		...dateLimits,
+		value: parseDateRange(props.value),
+		onChange: (value) => props.onChange?.(formatDateRange(value))
+	});
+};
+export { DateRangePicker };

package/dist/DateSegmentItem.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { useDateSegment } from "react-aria";
+const getPlaceholder = (segment) => {
+	if (!segment.isPlaceholder) return null;
+	switch (segment.type) {
+		case "hour": return "hh";
+		case "minute": return "mm";
+		case "second": return "ss";
+		default: return segment.placeholder;
+	}
+};
+const DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
+	const ref = useRef(null);
+	const { segmentProps } = useDateSegment(segment, state, ref);
+	const isInputEmpty = !state.value;
+	return /* @__PURE__ */ jsx("div", {
+		...segmentProps,
+		ref,
+		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none",
+			children: getPlaceholder(segment)
+		}), segment.isPlaceholder ? "" : segment.text] })
+	});
+};
+export { DateSegmentItem, getPlaceholder };

package/dist/DateTime.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const DateTimeIcon = (props) => /* @__PURE__ */ jsxs("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: "m18.37 18.852.573-.573-1.534-1.533v-2.291h-.818v2.618zM17.02 21q-1.718 0-2.914-1.186-1.197-1.187-1.197-2.905t1.197-2.904 2.914-1.187q1.699 0 2.884 1.197 1.187 1.196 1.187 2.894t-1.187 2.894T17.02 21"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M14.218 3a.74.74 0 0 1 .736.744v.744h1.473c1.22 0 2.21.999 2.21 2.231v4.7a5.7 5.7 0 0 0-1.473-.235v-.746H5.382v6.694c0 .411.33.744.736.744h5.236c.089.523.25 1.023.47 1.488H6.118a2.22 2.22 0 0 1-2.209-2.232V6.72a2.22 2.22 0 0 1 2.21-2.231H7.59v-.744c0-.411.33-.744.736-.744a.74.74 0 0 1 .737.744v.744h4.418v-.744c0-.411.33-.744.736-.744m2.946 3.719V8.95H5.382V6.72c0-.41.33-.744.736-.744h1.473v.744c0 .41.33.744.736.744a.74.74 0 0 0 .737-.744v-.744h4.418v.744c0 .41.33.744.736.744a.74.74 0 0 0 .736-.744v-.744h1.473a.74.74 0 0 1 .737.744",
+		clipRule: "evenodd"
+	})]
+});
+export { DateTimeIcon };

package/dist/DateTimeDialog.js

@@ -0,0 +1,49 @@
+import { BottomSheet } from "./BottomSheet.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, Popover } from "react-aria-components";
+const DateTimeDialog = ({ hideSidebar, children, footer, sidebar, label, isOpen, triggerRef, dialogProps, onOpenChange }) => {
+	if (useBreakpoint("md")) {
+		if (!isOpen) return null;
+		return /* @__PURE__ */ jsx(Popover, {
+			triggerRef,
+			isOpen,
+			placement: "bottom start",
+			onOpenChange,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...dialogProps,
+				className: "outline-none!",
+				"aria-label": label,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5",
+					children: [!hideSidebar && sidebar, /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 flex-col justify-between",
+						children: [children, footer]
+					})]
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		label,
+		footer,
+		isOpen,
+		onOpenChange,
+		sheetMarginBottom: 0,
+		isScrollable: false,
+		height: "auto",
+		isDismissable: true,
+		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(FormFieldHeader, {
+				label,
+				className: "mb-8! shrink-0 px-4 pt-3",
+				rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
+			}),
+			children,
+			!hideSidebar && sidebar
+		] })
+	});
+};
+export { DateTimeDialog };