@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/date-range-field/date-range-field.js

@@ -1,4 +1,8 @@
+import { TemporalRangeCalendar } from "../../lib/calendar/calendar-prefab.js";
 import { dayRangeToIso, isoToDay, isoToDayRange } from "../../lib/calendar/temporal-value.js";
+import { Spinner } from "../spinner/spinner.js";
+import { IconButton } from "../button/button.js";
+import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { useTimeZone } from "../time-zone-provider/time-zone-provider.js";
 import { DateRangeInput } from "./date-range-input.js";
@@ -25,7 +29,7 @@ import { useRef } from "react";
 * />
 */
 var DateRangeField = (t0) => {
-	const $ = c(51);
+	const $ = c(82);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, openCalendarIcon, previousIcon, nextIcon, checkIcon, expandIcon, value, defaultValue, onValueChange, onBlur, minValue, maxValue, visibleMonths, startName, endName, disabled, readOnly, className } = t0;
 	const triggerRef = useRef(null);
 	const timeZone = useTimeZone();
@@ -63,117 +67,225 @@ var DateRangeField = (t0) => {
 	const field = useFieldState(t3);
 	const { phase } = field;
 	const fieldState = field.state;
-	let t4;
-	if ($[12] !== checkIcon || $[13] !== defaultValue || $[14] !== endName || $[15] !== expandIcon || $[16] !== field.disabled || $[17] !== field.invalid || $[18] !== fieldState || $[19] !== maxValue || $[20] !== minValue || $[21] !== monthLabel || $[22] !== nextIcon || $[23] !== nextMonthLabel || $[24] !== noMatchingYearLabel || $[25] !== onBlur || $[26] !== onValueChange || $[27] !== openCalendarIcon || $[28] !== openCalendarLabel || $[29] !== phase || $[30] !== previousIcon || $[31] !== previousMonthLabel || $[32] !== range || $[33] !== readOnly || $[34] !== requiredness || $[35] !== startName || $[36] !== timeZone || $[37] !== value || $[38] !== visibleMonths || $[39] !== yearLabel) {
-		t4 = (t5) => {
-			const { labelId, describedBy, controlId } = t5;
-			return /* @__PURE__ */ jsx(DateRangeInput.Root, {
-				state: fieldState,
-				"aria-labelledby": labelId,
-				"aria-describedby": describedBy,
-				value: value === void 0 ? void 0 : range,
-				defaultValue: isoToDayRange(defaultValue, timeZone) ?? void 0,
-				onChange: (next) => onValueChange?.(dayRangeToIso(next)),
-				onBlur,
-				minValue: isoToDay(minValue, timeZone) ?? void 0,
-				maxValue: isoToDay(maxValue, timeZone) ?? void 0,
-				startName: startName ?? `${controlId}-start`,
-				endName: endName ?? `${controlId}-end`,
-				isDisabled: field.disabled,
-				isReadOnly: readOnly,
-				isRequired: requiredness === "required",
-				isInvalid: field.invalid,
-				children: (t6) => {
-					const { isFocusWithin } = t6;
-					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
-						state: {
-							...fieldState,
-							focused: isFocusWithin
-						},
-						children: [
-							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "start" }),
-							/* @__PURE__ */ jsx(DateRangeInput.Separator, {}),
-							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "end" }),
-							/* @__PURE__ */ jsx(DateRangeInput.Spacer, {}),
-							phase !== "fresh" && /* @__PURE__ */ jsx(DateRangeInput.Pending, {}),
-							/* @__PURE__ */ jsx(DateRangeInput.Trigger, {
-								label: openCalendarLabel,
-								ref: triggerRef,
-								children: openCalendarIcon
-							})
-						]
-					}), /* @__PURE__ */ jsx(DateRangeInput.Popup, {
-						triggerRef,
-						children: /* @__PURE__ */ jsx(DateRangeInput.Calendar, {
-							visibleMonths,
-							previousMonthLabel,
-							nextMonthLabel,
-							monthLabel,
-							yearLabel,
-							noMatchingYearLabel,
-							previousIcon,
-							nextIcon,
-							checkIcon,
-							expandIcon
+	const ids = DateRangeInput.useIds();
+	const t4 = field.invalid;
+	const t5 = field.disabled;
+	let t6;
+	if ($[12] !== optionalLabel) {
+		t6 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[12] = optionalLabel;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== ids.labelId || $[15] !== label || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(DateRangeInput.Label, {
+			id: ids.labelId,
+			children: [
+				label,
+				" ",
+				t6
+			]
+		});
+		$[14] = ids.labelId;
+		$[15] = label;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	const t8 = ids.labelId;
+	let t9;
+	if ($[18] !== description || $[19] !== field.invalid || $[20] !== ids) {
+		t9 = ids.describedBy(description !== void 0, field.invalid);
+		$[18] = description;
+		$[19] = field.invalid;
+		$[20] = ids;
+		$[21] = t9;
+	} else t9 = $[21];
+	const t10 = value === void 0 ? void 0 : range;
+	let t11;
+	if ($[22] !== defaultValue || $[23] !== timeZone) {
+		t11 = isoToDayRange(defaultValue, timeZone) ?? void 0;
+		$[22] = defaultValue;
+		$[23] = timeZone;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== onValueChange) {
+		t12 = (next) => onValueChange?.(dayRangeToIso(next));
+		$[25] = onValueChange;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== minValue || $[28] !== timeZone) {
+		t13 = isoToDay(minValue, timeZone) ?? void 0;
+		$[27] = minValue;
+		$[28] = timeZone;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== maxValue || $[31] !== timeZone) {
+		t14 = isoToDay(maxValue, timeZone) ?? void 0;
+		$[30] = maxValue;
+		$[31] = timeZone;
+		$[32] = t14;
+	} else t14 = $[32];
+	const t15 = startName ?? `${ids.controlId}-start`;
+	const t16 = endName ?? `${ids.controlId}-end`;
+	const t17 = requiredness === "required";
+	let t18;
+	if ($[33] !== checkIcon || $[34] !== expandIcon || $[35] !== fieldState || $[36] !== monthLabel || $[37] !== nextIcon || $[38] !== nextMonthLabel || $[39] !== noMatchingYearLabel || $[40] !== openCalendarIcon || $[41] !== openCalendarLabel || $[42] !== phase || $[43] !== previousIcon || $[44] !== previousMonthLabel || $[45] !== visibleMonths || $[46] !== yearLabel) {
+		t18 = (t19) => {
+			const { isFocusWithin } = t19;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
+				state: {
+					...fieldState,
+					focused: isFocusWithin
+				},
+				children: [
+					/* @__PURE__ */ jsx(DateRangeInput.Input, {
+						slot: "start",
+						children: _temp
+					}),
+					/* @__PURE__ */ jsx(DateRangeInput.Separator, { children: "–" }),
+					/* @__PURE__ */ jsx(DateRangeInput.Input, {
+						slot: "end",
+						children: _temp2
+					}),
+					/* @__PURE__ */ jsx(DateRangeInput.Spacer, {}),
+					phase !== "fresh" && /* @__PURE__ */ jsx(DateRangeInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) }),
+					/* @__PURE__ */ jsx(DateRangeInput.Trigger, {
+						ref: triggerRef,
+						render: /* @__PURE__ */ jsx(IconButton, {
+							label: openCalendarLabel,
+							variant: "tertiary",
+							size: "sm",
+							children: openCalendarIcon
 						})
-					})] });
-				}
-			});
+					})
+				]
+			}), /* @__PURE__ */ jsx(DateRangeInput.Popup, {
+				triggerRef,
+				children: /* @__PURE__ */ jsx(TemporalRangeCalendar, {
+					visibleMonths,
+					previousMonthLabel,
+					nextMonthLabel,
+					monthLabel,
+					yearLabel,
+					noMatchingYearLabel,
+					previousIcon,
+					nextIcon,
+					checkIcon,
+					expandIcon
+				})
+			})] });
 		};
-		$[12] = checkIcon;
-		$[13] = defaultValue;
-		$[14] = endName;
-		$[15] = expandIcon;
-		$[16] = field.disabled;
-		$[17] = field.invalid;
-		$[18] = fieldState;
-		$[19] = maxValue;
-		$[20] = minValue;
-		$[21] = monthLabel;
-		$[22] = nextIcon;
-		$[23] = nextMonthLabel;
-		$[24] = noMatchingYearLabel;
-		$[25] = onBlur;
-		$[26] = onValueChange;
-		$[27] = openCalendarIcon;
-		$[28] = openCalendarLabel;
-		$[29] = phase;
-		$[30] = previousIcon;
-		$[31] = previousMonthLabel;
-		$[32] = range;
-		$[33] = readOnly;
-		$[34] = requiredness;
-		$[35] = startName;
-		$[36] = timeZone;
-		$[37] = value;
-		$[38] = visibleMonths;
-		$[39] = yearLabel;
-		$[40] = t4;
-	} else t4 = $[40];
-	let t5;
-	if ($[41] !== className || $[42] !== description || $[43] !== dirty || $[44] !== errors || $[45] !== label || $[46] !== optionalLabel || $[47] !== requiredness || $[48] !== t4 || $[49] !== touched) {
-		t5 = /* @__PURE__ */ jsx(DateRangeInput.Frame, {
-			label,
-			description,
-			errors,
+		$[33] = checkIcon;
+		$[34] = expandIcon;
+		$[35] = fieldState;
+		$[36] = monthLabel;
+		$[37] = nextIcon;
+		$[38] = nextMonthLabel;
+		$[39] = noMatchingYearLabel;
+		$[40] = openCalendarIcon;
+		$[41] = openCalendarLabel;
+		$[42] = phase;
+		$[43] = previousIcon;
+		$[44] = previousMonthLabel;
+		$[45] = visibleMonths;
+		$[46] = yearLabel;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] !== field.disabled || $[49] !== field.invalid || $[50] !== fieldState || $[51] !== ids.labelId || $[52] !== onBlur || $[53] !== readOnly || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15 || $[60] !== t16 || $[61] !== t17 || $[62] !== t18 || $[63] !== t9) {
+		t19 = /* @__PURE__ */ jsx(DateRangeInput.Root, {
+			state: fieldState,
+			"aria-labelledby": t8,
+			"aria-describedby": t9,
+			value: t10,
+			defaultValue: t11,
+			onChange: t12,
+			onBlur,
+			minValue: t13,
+			maxValue: t14,
+			startName: t15,
+			endName: t16,
+			isDisabled: field.disabled,
+			isReadOnly: readOnly,
+			isRequired: t17,
+			isInvalid: field.invalid,
+			children: t18
+		});
+		$[48] = field.disabled;
+		$[49] = field.invalid;
+		$[50] = fieldState;
+		$[51] = ids.labelId;
+		$[52] = onBlur;
+		$[53] = readOnly;
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t13;
+		$[58] = t14;
+		$[59] = t15;
+		$[60] = t16;
+		$[61] = t17;
+		$[62] = t18;
+		$[63] = t9;
+		$[64] = t19;
+	} else t19 = $[64];
+	let t20;
+	if ($[65] !== description || $[66] !== ids.descriptionId) {
+		t20 = /* @__PURE__ */ jsx(DateRangeInput.Description, {
+			id: ids.descriptionId,
+			children: description
+		});
+		$[65] = description;
+		$[66] = ids.descriptionId;
+		$[67] = t20;
+	} else t20 = $[67];
+	let t21;
+	if ($[68] !== errors || $[69] !== ids.errorId) {
+		t21 = /* @__PURE__ */ jsx(DateRangeInput.Error, {
+			id: ids.errorId,
+			children: errors
+		});
+		$[68] = errors;
+		$[69] = ids.errorId;
+		$[70] = t21;
+	} else t21 = $[70];
+	let t22;
+	if ($[71] !== className || $[72] !== dirty || $[73] !== field.disabled || $[74] !== field.invalid || $[75] !== requiredness || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t7 || $[80] !== touched) {
+		t22 = /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			invalid: t4,
+			disabled: t5,
 			requiredness,
-			optionalLabel,
 			dirty,
 			touched,
-			className,
-			children: t4
+			children: [
+				t7,
+				t19,
+				t20,
+				t21
+			]
 		});
-		$[41] = className;
-		$[42] = description;
-		$[43] = dirty;
-		$[44] = errors;
-		$[45] = label;
-		$[46] = optionalLabel;
-		$[47] = requiredness;
-		$[48] = t4;
-		$[49] = touched;
-		$[50] = t5;
-	} else t5 = $[50];
-	return t5;
+		$[71] = className;
+		$[72] = dirty;
+		$[73] = field.disabled;
+		$[74] = field.invalid;
+		$[75] = requiredness;
+		$[76] = t19;
+		$[77] = t20;
+		$[78] = t21;
+		$[79] = t7;
+		$[80] = touched;
+		$[81] = t22;
+	} else t22 = $[81];
+	return t22;
 };
+function _temp(segment) {
+	return /* @__PURE__ */ jsx(DateRangeInput.Segment, { segment });
+}
+function _temp2(segment_0) {
+	return /* @__PURE__ */ jsx(DateRangeInput.Segment, { segment: segment_0 });
+}
 export { DateRangeField };

package/dist/components/date-range-field/date-range-input.d.ts

@@ -1,7 +1,10 @@
+import { TemporalRangeCalendar } from "../../lib/calendar/calendar-prefab.tsx";
 import type { CalendarDate } from "@internationalized/date";
-import type { ReactNode, Ref } from "react";
+import type { ReactNode } from "react";
 import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components";
-import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
+import { CalendarMonthPicker, CalendarPickers, CalendarYearPicker } from "../../lib/calendar/calendar-navigation.tsx";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeader, CalendarHeaderCell, CalendarHeading, CalendarMonths, CalendarNext, CalendarPrevious, RangeCalendarRoot } from "../../lib/calendar/calendar-parts.tsx";
+import { TemporalDialog, TemporalGroup, TemporalLabel, TemporalPopover, TemporalPopup, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalSegment, type TemporalStateProps, TemporalTrigger } from "../../lib/calendar/temporal.tsx";
 import { Field } from "../field/index.ts";
 export type DateRangeInputRootProps = AriaDateRangePickerProps<CalendarDate> & TemporalStateProps;
 /**
@@ -12,57 +15,98 @@ export type DateRangeInputRootProps = AriaDateRangePickerProps<CalendarDate> & T
  * <DateRangeInput.Root aria-labelledby={labelId}>…</DateRangeInput.Root>
  */
 declare const DateRangeInputRoot: ({ state, ...props }: DateRangeInputRootProps) => ReactNode;
-export type DateRangeInputTriggerProps = Readonly<{
-    /** Accessible name, such as "Open calendar". */
-    label: string;
-    ref?: Ref<HTMLButtonElement>;
-    /** The icon the button shows. */
-    children: ReactNode;
-}>;
-/**
- * The icon-only button that opens the range calendar.
- *
- * @example
- * <DateRangeInput.Trigger label="Open calendar"><DateRangeIcon /></DateRangeInput.Trigger>
- */
-declare const DateRangeInputTrigger: ({ label, ref, children, }: DateRangeInputTriggerProps) => ReactNode;
 /** The parts of a date range input. */
 export type DateRangeInputParts = Readonly<{
-    Frame: typeof TemporalFrame;
     Root: typeof DateRangeInputRoot;
+    Label: typeof TemporalLabel;
     Group: typeof TemporalGroup;
     Input: typeof TemporalRangeInput;
+    Segment: typeof TemporalSegment;
     Separator: typeof TemporalRangeSeparator;
     Spacer: typeof TemporalRangeSpacer;
-    Trigger: typeof DateRangeInputTrigger;
-    Popup: typeof TemporalPopup;
-    Calendar: typeof TemporalRangeCalendar;
+    Trigger: typeof TemporalTrigger;
     Pending: typeof Field.Pending;
+    Popup: typeof TemporalPopup;
+    Popover: typeof TemporalPopover;
+    Dialog: typeof TemporalDialog;
+    Calendar: typeof RangeCalendarRoot;
+    StandardCalendar: typeof TemporalRangeCalendar;
+    CalendarHeader: typeof CalendarHeader;
+    Heading: typeof CalendarHeading;
+    Previous: typeof CalendarPrevious;
+    Next: typeof CalendarNext;
+    Pickers: typeof CalendarPickers;
+    MonthPicker: typeof CalendarMonthPicker;
+    YearPicker: typeof CalendarYearPicker;
+    Months: typeof CalendarMonths;
+    Grid: typeof CalendarGrid;
+    GridHeader: typeof CalendarGridHeader;
+    HeaderCell: typeof CalendarHeaderCell;
+    GridBody: typeof CalendarGridBody;
+    Cell: typeof CalendarCell;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
 }>;
 /**
  * The styled parts of a react-aria `DateRangePicker`, a start and an end date
- * entry plus a range calendar popover, carrying the field frame's ids rather
- * than a label of their own. For the ordinary case, use `DateRangeField`.
+ * entry plus a range calendar popover, following react-aria's own anatomy. It
+ * sits in a `Field.Root` and names itself through `Label`'s id. For the
+ * ordinary case, use `DateRangeField`, which is assembled from exactly these
+ * parts. `StandardCalendar` is the whole range calendar, its header, pickers
+ * and grids, assembled from them.
  *
  * @example
- * <DateRangeInput.Root aria-labelledby={labelId}>
- * 	{({ isFocusWithin }) => (
- * 		<>
- * 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
- * 				<DateRangeInput.Input slot="start" />
- * 				<DateRangeInput.Separator />
- * 				<DateRangeInput.Input slot="end" />
- * 				<DateRangeInput.Spacer />
- * 				<DateRangeInput.Trigger label="Open calendar">
- * 					<DateRangeIcon />
- * 				</DateRangeInput.Trigger>
- * 			</DateRangeInput.Group>
- * 			<DateRangeInput.Popup>
- * 				<DateRangeInput.Calendar {...calendarLabels} {...calendarIcons} />
- * 			</DateRangeInput.Popup>
- * 		</>
- * 	)}
- * </DateRangeInput.Root>
+ * const ids = DateRangeInput.useIds();
+ *
+ * <Field.Root>
+ * 	<DateRangeInput.Label id={ids.labelId}>Invoice period</DateRangeInput.Label>
+ * 	<DateRangeInput.Root aria-labelledby={ids.labelId}>
+ * 		{({ isFocusWithin }) => (
+ * 			<>
+ * 				<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+ * 					<DateRangeInput.Input slot="start">
+ * 						{segment => <DateRangeInput.Segment segment={segment} />}
+ * 					</DateRangeInput.Input>
+ * 					<DateRangeInput.Separator>to</DateRangeInput.Separator>
+ * 					<DateRangeInput.Input slot="end">
+ * 						{segment => <DateRangeInput.Segment segment={segment} />}
+ * 					</DateRangeInput.Input>
+ * 					<DateRangeInput.Spacer />
+ * 					<DateRangeInput.Trigger
+ * 						ref={triggerRef}
+ * 						render={
+ * 							<IconButton label="Open calendar" variant="tertiary" size="sm">
+ * 								<DateRangeIcon />
+ * 							</IconButton>
+ * 						}
+ * 					/>
+ * 				</DateRangeInput.Group>
+ * 				<DateRangeInput.Popup triggerRef={triggerRef}>
+ * 					<DateRangeInput.Calendar visibleMonths={2}>
+ * 						<DateRangeInput.CalendarHeader>
+ * 							<DateRangeInput.Previous render={<IconButton label="Previous month"><ChevronLeftIcon /></IconButton>} />
+ * 							<DateRangeInput.Heading />
+ * 							<DateRangeInput.Next render={<IconButton label="Next month"><ChevronRightIcon /></IconButton>} />
+ * 						</DateRangeInput.CalendarHeader>
+ * 						<DateRangeInput.Months>
+ * 							{[0, 1].map(month => (
+ * 								<DateRangeInput.Grid key={month} offset={{ months: month }}>
+ * 									<DateRangeInput.GridHeader>
+ * 										{day => <DateRangeInput.HeaderCell>{day}</DateRangeInput.HeaderCell>}
+ * 									</DateRangeInput.GridHeader>
+ * 									<DateRangeInput.GridBody>
+ * 										{date => <DateRangeInput.Cell date={date} />}
+ * 									</DateRangeInput.GridBody>
+ * 								</DateRangeInput.Grid>
+ * 							))}
+ * 						</DateRangeInput.Months>
+ * 					</DateRangeInput.Calendar>
+ * 				</DateRangeInput.Popup>
+ * 			</>
+ * 		)}
+ * 	</DateRangeInput.Root>
+ * </Field.Root>
  */
 export declare const DateRangeInput: DateRangeInputParts;
 export {};

package/dist/components/date-range-field/date-range-input.js

@@ -1,5 +1,8 @@
+import { TemporalRangeCalendar } from "../../lib/calendar/calendar-prefab.js";
+import { CalendarMonthPicker, CalendarPickers, CalendarYearPicker } from "../../lib/calendar/calendar-navigation.js";
+import { CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeader, CalendarHeaderCell as CalendarHeaderCell$1, CalendarHeading, CalendarMonths, CalendarNext, CalendarPrevious, RangeCalendarRoot } from "../../lib/calendar/calendar-parts.js";
 import { todayIn } from "../../lib/calendar/temporal-value.js";
-import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalTrigger } from "../../lib/calendar/temporal.js";
+import { TemporalDialog, TemporalGroup, TemporalLabel, TemporalPopover, TemporalPopup, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalSegment, TemporalTrigger } from "../../lib/calendar/temporal.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useTimeZone } from "../time-zone-provider/time-zone-provider.js";
@@ -62,63 +65,95 @@ var DateRangeInputRoot = (t0) => {
 	return t5;
 };
 /**
-* The icon-only button that opens the range calendar.
-*
-* @example
-* <DateRangeInput.Trigger label="Open calendar"><DateRangeIcon /></DateRangeInput.Trigger>
-*/
-var DateRangeInputTrigger = (t0) => {
-	const $ = c(4);
-	const { label, ref, children } = t0;
-	let t1;
-	if ($[0] !== children || $[1] !== label || $[2] !== ref) {
-		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
-			label,
-			ref,
-			children
-		});
-		$[0] = children;
-		$[1] = label;
-		$[2] = ref;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-};
-/**
 * The styled parts of a react-aria `DateRangePicker`, a start and an end date
-* entry plus a range calendar popover, carrying the field frame's ids rather
-* than a label of their own. For the ordinary case, use `DateRangeField`.
+* entry plus a range calendar popover, following react-aria's own anatomy. It
+* sits in a `Field.Root` and names itself through `Label`'s id. For the
+* ordinary case, use `DateRangeField`, which is assembled from exactly these
+* parts. `StandardCalendar` is the whole range calendar, its header, pickers
+* and grids, assembled from them.
 *
 * @example
-* <DateRangeInput.Root aria-labelledby={labelId}>
-* 	{({ isFocusWithin }) => (
-* 		<>
-* 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
-* 				<DateRangeInput.Input slot="start" />
-* 				<DateRangeInput.Separator />
-* 				<DateRangeInput.Input slot="end" />
-* 				<DateRangeInput.Spacer />
-* 				<DateRangeInput.Trigger label="Open calendar">
-* 					<DateRangeIcon />
-* 				</DateRangeInput.Trigger>
-* 			</DateRangeInput.Group>
-* 			<DateRangeInput.Popup>
-* 				<DateRangeInput.Calendar {...calendarLabels} {...calendarIcons} />
-* 			</DateRangeInput.Popup>
-* 		</>
-* 	)}
-* </DateRangeInput.Root>
+* const ids = DateRangeInput.useIds();
+*
+* <Field.Root>
+* 	<DateRangeInput.Label id={ids.labelId}>Invoice period</DateRangeInput.Label>
+* 	<DateRangeInput.Root aria-labelledby={ids.labelId}>
+* 		{({ isFocusWithin }) => (
+* 			<>
+* 				<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+* 					<DateRangeInput.Input slot="start">
+* 						{segment => <DateRangeInput.Segment segment={segment} />}
+* 					</DateRangeInput.Input>
+* 					<DateRangeInput.Separator>to</DateRangeInput.Separator>
+* 					<DateRangeInput.Input slot="end">
+* 						{segment => <DateRangeInput.Segment segment={segment} />}
+* 					</DateRangeInput.Input>
+* 					<DateRangeInput.Spacer />
+* 					<DateRangeInput.Trigger
+* 						ref={triggerRef}
+* 						render={
+* 							<IconButton label="Open calendar" variant="tertiary" size="sm">
+* 								<DateRangeIcon />
+* 							</IconButton>
+* 						}
+* 					/>
+* 				</DateRangeInput.Group>
+* 				<DateRangeInput.Popup triggerRef={triggerRef}>
+* 					<DateRangeInput.Calendar visibleMonths={2}>
+* 						<DateRangeInput.CalendarHeader>
+* 							<DateRangeInput.Previous render={<IconButton label="Previous month"><ChevronLeftIcon /></IconButton>} />
+* 							<DateRangeInput.Heading />
+* 							<DateRangeInput.Next render={<IconButton label="Next month"><ChevronRightIcon /></IconButton>} />
+* 						</DateRangeInput.CalendarHeader>
+* 						<DateRangeInput.Months>
+* 							{[0, 1].map(month => (
+* 								<DateRangeInput.Grid key={month} offset={{ months: month }}>
+* 									<DateRangeInput.GridHeader>
+* 										{day => <DateRangeInput.HeaderCell>{day}</DateRangeInput.HeaderCell>}
+* 									</DateRangeInput.GridHeader>
+* 									<DateRangeInput.GridBody>
+* 										{date => <DateRangeInput.Cell date={date} />}
+* 									</DateRangeInput.GridBody>
+* 								</DateRangeInput.Grid>
+* 							))}
+* 						</DateRangeInput.Months>
+* 					</DateRangeInput.Calendar>
+* 				</DateRangeInput.Popup>
+* 			</>
+* 		)}
+* 	</DateRangeInput.Root>
+* </Field.Root>
 */
 var DateRangeInput = {
-	Frame: TemporalFrame,
 	Root: DateRangeInputRoot,
+	Label: TemporalLabel,
 	Group: TemporalGroup,
 	Input: TemporalRangeInput,
+	Segment: TemporalSegment,
 	Separator: TemporalRangeSeparator,
 	Spacer: TemporalRangeSpacer,
-	Trigger: DateRangeInputTrigger,
+	Trigger: TemporalTrigger,
+	Pending: Field.Pending,
 	Popup: TemporalPopup,
-	Calendar: TemporalRangeCalendar,
-	Pending: Field.Pending
+	Popover: TemporalPopover,
+	Dialog: TemporalDialog,
+	Calendar: RangeCalendarRoot,
+	StandardCalendar: TemporalRangeCalendar,
+	CalendarHeader,
+	Heading: CalendarHeading,
+	Previous: CalendarPrevious,
+	Next: CalendarNext,
+	Pickers: CalendarPickers,
+	MonthPicker: CalendarMonthPicker,
+	YearPicker: CalendarYearPicker,
+	Months: CalendarMonths,
+	Grid: CalendarGrid$1,
+	GridHeader: CalendarGridHeader$1,
+	HeaderCell: CalendarHeaderCell$1,
+	GridBody: CalendarGridBody$1,
+	Cell: CalendarCell$1,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
 };
 export { DateRangeInput };