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

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

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

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

@@ -1,7 +1,10 @@
+import { TemporalCalendar } from "../../lib/calendar/calendar-prefab.tsx";
 import type { CalendarDate } from "@internationalized/date";
-import { type ReactNode, type Ref } from "react";
+import { type ReactNode } from "react";
 import { type DatePickerProps as AriaDatePickerProps } from "react-aria-components";
-import { TemporalCalendar, TemporalFrame, TemporalGroup, TemporalInput, TemporalPopup, 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, CalendarNext, CalendarPrevious, CalendarRoot } from "../../lib/calendar/calendar-parts.tsx";
+import { TemporalDialog, TemporalGroup, TemporalInput, TemporalLabel, TemporalPopover, TemporalPopup, TemporalSegment, type TemporalStateProps, TemporalTrigger } from "../../lib/calendar/temporal.tsx";
 import { Field } from "../field/index.ts";
 export type DateInputRootProps = AriaDatePickerProps<CalendarDate> & TemporalStateProps;
 /**
@@ -12,52 +15,85 @@ export type DateInputRootProps = AriaDatePickerProps<CalendarDate> & TemporalSta
  * <DateInput.Root aria-labelledby={labelId}>…</DateInput.Root>
  */
 declare const DateInputRoot: ({ state, ...props }: DateInputRootProps) => ReactNode;
-export type DateInputTriggerProps = 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 calendar.
- *
- * @example
- * <DateInput.Trigger label="Open calendar"><CalendarTodayIcon /></DateInput.Trigger>
- */
-declare const DateInputTrigger: ({ label, ref, children, }: DateInputTriggerProps) => ReactNode;
 /** The parts of a date input. */
 export type DateInputParts = Readonly<{
-    Frame: typeof TemporalFrame;
     Root: typeof DateInputRoot;
+    Label: typeof TemporalLabel;
     Group: typeof TemporalGroup;
     Input: typeof TemporalInput;
-    Trigger: typeof DateInputTrigger;
-    Popup: typeof TemporalPopup;
-    Calendar: typeof TemporalCalendar;
+    Segment: typeof TemporalSegment;
+    Trigger: typeof TemporalTrigger;
     Pending: typeof Field.Pending;
+    Popup: typeof TemporalPopup;
+    Popover: typeof TemporalPopover;
+    Dialog: typeof TemporalDialog;
+    Calendar: typeof CalendarRoot;
+    StandardCalendar: typeof TemporalCalendar;
+    CalendarHeader: typeof CalendarHeader;
+    Heading: typeof CalendarHeading;
+    Previous: typeof CalendarPrevious;
+    Next: typeof CalendarNext;
+    Pickers: typeof CalendarPickers;
+    MonthPicker: typeof CalendarMonthPicker;
+    YearPicker: typeof CalendarYearPicker;
+    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 `DatePicker`, a date entry plus a calendar
- * popover, carrying the field frame's ids rather than a label of their own.
- * For the ordinary case, use `DateField`.
+ * 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 `DateField`,
+ * which is assembled from exactly these parts. `StandardCalendar` is the whole
+ * calendar, its header, pickers and grid, assembled from them.
  *
  * @example
- * <DateInput.Root aria-labelledby={labelId}>
- * 	{({ isFocusWithin }) => (
- * 		<>
- * 			<DateInput.Group state={{ focused: isFocusWithin }}>
- * 				<DateInput.Input />
- * 				<DateInput.Trigger label="Open calendar">
- * 					<CalendarTodayIcon />
- * 				</DateInput.Trigger>
- * 			</DateInput.Group>
- * 			<DateInput.Popup>
- * 				<DateInput.Calendar {...calendarLabels} {...calendarIcons} />
- * 			</DateInput.Popup>
- * 		</>
- * 	)}
- * </DateInput.Root>
+ * const ids = DateInput.useIds();
+ *
+ * <Field.Root>
+ * 	<DateInput.Label id={ids.labelId}>Service date</DateInput.Label>
+ * 	<DateInput.Root aria-labelledby={ids.labelId}>
+ * 		{({ isFocusWithin }) => (
+ * 			<>
+ * 				<DateInput.Group state={{ focused: isFocusWithin }}>
+ * 					<DateInput.Input>
+ * 						{segment => <DateInput.Segment segment={segment} />}
+ * 					</DateInput.Input>
+ * 					<DateInput.Trigger
+ * 						ref={triggerRef}
+ * 						render={
+ * 							<IconButton label="Open calendar" variant="tertiary" size="sm">
+ * 								<CalendarTodayIcon />
+ * 							</IconButton>
+ * 						}
+ * 					/>
+ * 				</DateInput.Group>
+ * 				<DateInput.Popup triggerRef={triggerRef}>
+ * 					<DateInput.Calendar>
+ * 						<DateInput.CalendarHeader>
+ * 							<DateInput.Previous render={<IconButton label="Previous month"><ChevronLeftIcon /></IconButton>} />
+ * 							<DateInput.Heading />
+ * 							<DateInput.Next render={<IconButton label="Next month"><ChevronRightIcon /></IconButton>} />
+ * 						</DateInput.CalendarHeader>
+ * 						<DateInput.Grid>
+ * 							<DateInput.GridHeader>
+ * 								{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}
+ * 							</DateInput.GridHeader>
+ * 							<DateInput.GridBody>
+ * 								{date => <DateInput.Cell date={date} />}
+ * 							</DateInput.GridBody>
+ * 						</DateInput.Grid>
+ * 					</DateInput.Calendar>
+ * 				</DateInput.Popup>
+ * 			</>
+ * 		)}
+ * 	</DateInput.Root>
+ * </Field.Root>
  */
 export declare const DateInput: DateInputParts;
 export {};

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

@@ -1,5 +1,8 @@
+import { TemporalCalendar } 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, CalendarNext, CalendarPrevious, CalendarRoot } from "../../lib/calendar/calendar-parts.js";
 import { todayIn } from "../../lib/calendar/temporal-value.js";
-import { TemporalCalendar, TemporalFrame, TemporalGroup, TemporalInput, TemporalPopup, TemporalTrigger } from "../../lib/calendar/temporal.js";
+import { TemporalDialog, TemporalGroup, TemporalInput, TemporalLabel, TemporalPopover, TemporalPopup, 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";
@@ -67,58 +70,82 @@ var DateInputRoot = (t0) => {
 	return t6;
 };
 /**
-* The icon-only button that opens the calendar.
-*
-* @example
-* <DateInput.Trigger label="Open calendar"><CalendarTodayIcon /></DateInput.Trigger>
-*/
-var DateInputTrigger = (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 `DatePicker`, a date entry plus a calendar
-* popover, carrying the field frame's ids rather than a label of their own.
-* For the ordinary case, use `DateField`.
+* 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 `DateField`,
+* which is assembled from exactly these parts. `StandardCalendar` is the whole
+* calendar, its header, pickers and grid, assembled from them.
 *
 * @example
-* <DateInput.Root aria-labelledby={labelId}>
-* 	{({ isFocusWithin }) => (
-* 		<>
-* 			<DateInput.Group state={{ focused: isFocusWithin }}>
-* 				<DateInput.Input />
-* 				<DateInput.Trigger label="Open calendar">
-* 					<CalendarTodayIcon />
-* 				</DateInput.Trigger>
-* 			</DateInput.Group>
-* 			<DateInput.Popup>
-* 				<DateInput.Calendar {...calendarLabels} {...calendarIcons} />
-* 			</DateInput.Popup>
-* 		</>
-* 	)}
-* </DateInput.Root>
+* const ids = DateInput.useIds();
+*
+* <Field.Root>
+* 	<DateInput.Label id={ids.labelId}>Service date</DateInput.Label>
+* 	<DateInput.Root aria-labelledby={ids.labelId}>
+* 		{({ isFocusWithin }) => (
+* 			<>
+* 				<DateInput.Group state={{ focused: isFocusWithin }}>
+* 					<DateInput.Input>
+* 						{segment => <DateInput.Segment segment={segment} />}
+* 					</DateInput.Input>
+* 					<DateInput.Trigger
+* 						ref={triggerRef}
+* 						render={
+* 							<IconButton label="Open calendar" variant="tertiary" size="sm">
+* 								<CalendarTodayIcon />
+* 							</IconButton>
+* 						}
+* 					/>
+* 				</DateInput.Group>
+* 				<DateInput.Popup triggerRef={triggerRef}>
+* 					<DateInput.Calendar>
+* 						<DateInput.CalendarHeader>
+* 							<DateInput.Previous render={<IconButton label="Previous month"><ChevronLeftIcon /></IconButton>} />
+* 							<DateInput.Heading />
+* 							<DateInput.Next render={<IconButton label="Next month"><ChevronRightIcon /></IconButton>} />
+* 						</DateInput.CalendarHeader>
+* 						<DateInput.Grid>
+* 							<DateInput.GridHeader>
+* 								{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}
+* 							</DateInput.GridHeader>
+* 							<DateInput.GridBody>
+* 								{date => <DateInput.Cell date={date} />}
+* 							</DateInput.GridBody>
+* 						</DateInput.Grid>
+* 					</DateInput.Calendar>
+* 				</DateInput.Popup>
+* 			</>
+* 		)}
+* 	</DateInput.Root>
+* </Field.Root>
 */
 var DateInput$1 = {
-	Frame: TemporalFrame,
 	Root: DateInputRoot,
+	Label: TemporalLabel,
 	Group: TemporalGroup,
 	Input: TemporalInput,
-	Trigger: DateInputTrigger,
+	Segment: TemporalSegment,
+	Trigger: TemporalTrigger,
+	Pending: Field.Pending,
 	Popup: TemporalPopup,
-	Calendar: TemporalCalendar,
-	Pending: Field.Pending
+	Popover: TemporalPopover,
+	Dialog: TemporalDialog,
+	Calendar: CalendarRoot,
+	StandardCalendar: TemporalCalendar,
+	CalendarHeader,
+	Heading: CalendarHeading,
+	Previous: CalendarPrevious,
+	Next: CalendarNext,
+	Pickers: CalendarPickers,
+	MonthPicker: CalendarMonthPicker,
+	YearPicker: CalendarYearPicker,
+	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 { DateInput$1 as DateInput };

package/dist/components/date-field/index.d.ts

@@ -1,4 +1,4 @@
-export type { CalendarIcons, CalendarLabels, } from "../../lib/calendar/temporal.tsx";
+export type { CalendarIcons, CalendarLabels, } from "../../lib/calendar/calendar-prefab.tsx";
 export * from "./date-field.tsx";
 export * from "./date-input.tsx";
 export * from "./tsf-date-field.tsx";

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { CalendarIcons, CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import { type CalendarIcons, type CalendarLabels } from "../../lib/calendar/calendar-prefab.tsx";
 import { type IsoDateRange } from "../../lib/calendar/temporal-value.ts";
 import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
 export type DateRangeFieldProps = FieldProps & CalendarLabels & CalendarIcons & Readonly<{