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

package/dist/lib/calendar/temporal.js

@@ -1,24 +1,45 @@
-import { Button as Button$1 } from "../../components/button/button.js";
 import { Field } from "../../components/field/field.js";
 import { fieldStateAttributes } from "../../components/field/field-state.js";
 import { useFieldFocus, withFieldFocus } from "../../components/field/use-field-focus.js";
 import { focusControlOnRim } from "../../components/field/rim-focus.js";
-import { useTimeZone } from "../../components/time-zone-provider/time-zone-provider.js";
-import { normalizeFieldErrors } from "../forms/errors.js";
-import { CalendarNavigation } from "./calendar-navigation.js";
-import { todayIn } from "./temporal-value.js";
 import temporal_module_default from "./temporal.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePickerStateContext, DateRangePickerStateContext, DateSegment, Dialog, Group, Popover, RangeCalendar } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+import { Button, DateInput, DateSegment, Dialog, Group, Popover } from "react-aria-components";
 // src/lib/calendar/temporal.tsx
 /**
+* The visible label of a date or time control: a `span` its `Root` names
+* itself by through `aria-labelledby`. Renders nothing without children.
+*
+* @example
+* <DateInput.Label id={labelId}>Service date <Field.Requiredness optionalLabel="optional" /></DateInput.Label>
+*/
+var TemporalLabel = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("span", {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			nativeLabel: false,
+			render: t0,
+			...props
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+/**
 * The shell carrying the border, the ring and the inlay row.
 *
 * @example
-* <TemporalGroup state={state}><TemporalInput /></TemporalGroup>
+* <DateInput.Group state={state}><DateInput.Input>…</DateInput.Input></DateInput.Group>
 */
 var TemporalGroup = (t0) => {
 	const $ = c(19);
@@ -82,10 +103,10 @@ var TemporalGroup = (t0) => {
 	return t4;
 };
 /**
-* One editable unit of a date or time.
+* One editable unit of a date or time, which an `Input` renders per segment.
 *
 * @example
-* {segment => <TemporalSegment segment={segment} />}
+* <DateInput.Input>{segment => <DateInput.Segment segment={segment} />}</DateInput.Input>
 */
 var TemporalSegment = (t0) => {
 	const $ = c(8);
@@ -119,10 +140,11 @@ var TemporalSegment = (t0) => {
 	return t2;
 };
 /**
-* The segments of one date or time, bare inside a `TemporalGroup`.
+* The segments of one date or time, bare inside a `Group`. Its children render
+* each segment.
 *
 * @example
-* <TemporalInput />
+* <DateInput.Input>{segment => <DateInput.Segment segment={segment} />}</DateInput.Input>
 */
 var TemporalInput = (t0) => {
 	const $ = c(8);
@@ -147,8 +169,7 @@ var TemporalInput = (t0) => {
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx(DateInput, {
 			className: t1,
-			...props,
-			children: _temp
+			...props
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -160,7 +181,7 @@ var TemporalInput = (t0) => {
 * The segments of one end of a date range, sized to its content.
 *
 * @example
-* <TemporalRangeInput slot="start" />
+* <DateRangeInput.Input slot="start">{segment => <DateRangeInput.Segment segment={segment} />}</DateRangeInput.Input>
 */
 var TemporalRangeInput = (t0) => {
 	const $ = c(8);
@@ -185,8 +206,7 @@ var TemporalRangeInput = (t0) => {
 	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx(DateInput, {
 			className: t1,
-			...props,
-			children: _temp2
+			...props
 		});
 		$[5] = props;
 		$[6] = t1;
@@ -195,112 +215,222 @@ var TemporalRangeInput = (t0) => {
 	return t2;
 };
 /**
-* The dash between a range's start and end.
+* The mark between a range's start and end, such as a dash. Decoration only.
 *
 * @example
-* <TemporalRangeSeparator />
+* <DateRangeInput.Separator>–</DateRangeInput.Separator>
 */
-var TemporalRangeSeparator = () => {
-	const $ = c(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("span", {
-			className: temporal_module_default.rangeSeparator,
-			"aria-hidden": "true",
-			children: "–"
-		});
+var TemporalRangeSeparator = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.rangeSeparator, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			"aria-hidden": true,
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
 * The space that pushes a range's inlays to the end of its group.
 *
 * @example
-* <TemporalRangeSpacer />
+* <DateRangeInput.Spacer />
 */
-var TemporalRangeSpacer = () => {
-	const $ = c(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("span", { className: temporal_module_default.rangeSpacer });
+var TemporalRangeSpacer = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.rangeSpacer, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
-* The icon-only button that opens the calendar.
+* The button that opens the calendar. It renders whichever button it is given.
 *
 * @example
-* <TemporalTrigger label="Open calendar" ref={triggerRef}><CalendarIcon /></TemporalTrigger>
+* <DateInput.Trigger
+* 	ref={triggerRef}
+* 	render={
+* 		<IconButton label="Open calendar" variant="tertiary" size="sm">
+* 			<CalendarTodayIcon />
+* 		</IconButton>
+* 	}
+* />
 */
 var TemporalTrigger = (t0) => {
-	const $ = c(6);
-	const { label, ref, children } = t0;
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	let t1;
-	if ($[0] !== ref) {
-		t1 = /* @__PURE__ */ jsx(Button, { ref });
-		$[0] = ref;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.trigger, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[2] !== children || $[3] !== label || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Button$1, {
-			iconOnly: true,
-			icon: children,
-			label,
-			variant: "tertiary",
-			size: "sm",
-			className: temporal_module_default.trigger,
-			render: t1
-		});
-		$[2] = children;
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Button, {});
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== props || $[9] !== t1) {
+		t3 = {
+			...props,
+			className: t1,
+			render: t2
+		};
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== ref || $[12] !== render || $[13] !== t3) {
+		t4 = {
+			render,
+			ref,
+			props: t3
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return useRender(t4);
 };
 /**
 * The floating surface the calendar lands on, aligned to whatever `triggerRef`
 * names: the calendar button, rather than the whole field.
 *
 * @example
-* <TemporalPopup triggerRef={triggerRef}><TemporalCalendar {...labels} /></TemporalPopup>
+* <DateInput.Popover triggerRef={triggerRef}><DateInput.Dialog>…</DateInput.Dialog></DateInput.Popover>
 */
-var TemporalPopup = (t0) => {
+var TemporalPopover = (t0) => {
 	const $ = c(10);
-	let children;
+	let className;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({children, placement: t1, ...props} = t0);
+		({className, placement: t1, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
+		$[1] = className;
 		$[2] = props;
 		$[3] = t1;
 	} else {
-		children = $[1];
+		className = $[1];
 		props = $[2];
 		t1 = $[3];
 	}
 	const placement = t1 === void 0 ? "bottom end" : t1;
 	let t2;
-	if ($[4] !== children) {
-		t2 = /* @__PURE__ */ jsx(Dialog, {
-			className: temporal_module_default.dialog,
-			children
-		});
-		$[4] = children;
+	if ($[4] !== className) {
+		t2 = clsx(temporal_module_default.popover, className);
+		$[4] = className;
 		$[5] = t2;
 	} else t2 = $[5];
 	let t3;
 	if ($[6] !== placement || $[7] !== props || $[8] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Popover, {
-			className: temporal_module_default.popover,
+			className: t2,
 			placement,
-			...props,
-			children: t2
+			...props
 		});
 		$[6] = placement;
 		$[7] = props;
@@ -309,519 +439,78 @@ var TemporalPopup = (t0) => {
 	} else t3 = $[9];
 	return t3;
 };
-var CalendarChrome = (t0) => {
-	const $ = c(21);
-	const { previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, children } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Button, { slot: "previous" });
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== previousIcon || $[2] !== previousMonthLabel) {
-		t2 = /* @__PURE__ */ jsx(Button$1, {
-			iconOnly: true,
-			icon: previousIcon,
-			label: previousMonthLabel,
-			variant: "tertiary",
-			size: "md",
-			render: t1
-		});
-		$[1] = previousIcon;
-		$[2] = previousMonthLabel;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== checkIcon || $[5] !== expandIcon || $[6] !== monthLabel || $[7] !== noMatchingYearLabel || $[8] !== yearLabel) {
-		t3 = /* @__PURE__ */ jsx(CalendarNavigation, {
-			monthLabel,
-			yearLabel,
-			noMatchingYearLabel,
-			checkIcon,
-			expandIcon
-		});
-		$[4] = checkIcon;
-		$[5] = expandIcon;
-		$[6] = monthLabel;
-		$[7] = noMatchingYearLabel;
-		$[8] = yearLabel;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(Button, { slot: "next" });
-		$[10] = t4;
-	} else t4 = $[10];
-	let t5;
-	if ($[11] !== nextIcon || $[12] !== nextMonthLabel) {
-		t5 = /* @__PURE__ */ jsx(Button$1, {
-			iconOnly: true,
-			icon: nextIcon,
-			label: nextMonthLabel,
-			variant: "tertiary",
-			size: "md",
-			render: t4
-		});
-		$[11] = nextIcon;
-		$[12] = nextMonthLabel;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== t2 || $[15] !== t3 || $[16] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("header", {
-			className: temporal_module_default.header,
-			children: [
-				t2,
-				t3,
-				t5
-			]
-		});
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] !== children || $[19] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, children] });
-		$[18] = children;
-		$[19] = t6;
-		$[20] = t7;
-	} else t7 = $[20];
-	return t7;
-};
-var MonthGrid = (t0) => {
-	const $ = c(8);
-	const { today, monthOffset: t1 } = t0;
-	const monthOffset = t1 === void 0 ? 0 : t1;
-	let t2;
-	if ($[0] !== monthOffset) {
-		t2 = { months: monthOffset };
-		$[0] = monthOffset;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(CalendarGridHeader, { children: _temp3 });
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[3] !== today) {
-		t4 = /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
-			date,
-			className: () => clsx(temporal_module_default.day, date.compare(today) === 0 && temporal_module_default.today)
-		}) });
-		$[3] = today;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== t2 || $[6] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(CalendarGrid, {
-			offset: t2,
-			className: temporal_module_default.grid,
-			children: [t3, t4]
-		});
-		$[5] = t2;
-		$[6] = t4;
-		$[7] = t5;
-	} else t5 = $[7];
-	return t5;
-};
 /**
-* A month of days, selecting one. Today, and the month it opens on without a
-* value, are read in the `TimeZoneProvider`'s zone.
+* The dialog inside the popover, which holds the calendar and its focus.
 *
 * @example
-* <TemporalCalendar {...calendarLabels} {...calendarIcons} />
+* <DateInput.Dialog><DateInput.Calendar>…</DateInput.Calendar></DateInput.Dialog>
 */
-var TemporalCalendar = (t0) => {
-	const $ = c(34);
-	let checkIcon;
+var TemporalDialog = (t0) => {
+	const $ = c(8);
 	let className;
-	let expandIcon;
-	let monthLabel;
-	let nextIcon;
-	let nextMonthLabel;
-	let noMatchingYearLabel;
-	let previousIcon;
-	let previousMonthLabel;
 	let props;
-	let yearLabel;
 	if ($[0] !== t0) {
-		({className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = checkIcon;
-		$[2] = className;
-		$[3] = expandIcon;
-		$[4] = monthLabel;
-		$[5] = nextIcon;
-		$[6] = nextMonthLabel;
-		$[7] = noMatchingYearLabel;
-		$[8] = previousIcon;
-		$[9] = previousMonthLabel;
-		$[10] = props;
-		$[11] = yearLabel;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		checkIcon = $[1];
-		className = $[2];
-		expandIcon = $[3];
-		monthLabel = $[4];
-		nextIcon = $[5];
-		nextMonthLabel = $[6];
-		noMatchingYearLabel = $[7];
-		previousIcon = $[8];
-		previousMonthLabel = $[9];
-		props = $[10];
-		yearLabel = $[11];
+		className = $[1];
+		props = $[2];
 	}
-	const t1 = useTimeZone();
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(temporal_module_default.dialog, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[12] !== t1) {
-		t2 = todayIn(t1);
-		$[12] = t1;
-		$[13] = t2;
-	} else t2 = $[13];
-	const today = t2;
-	const picked = useContext(DatePickerStateContext)?.value ?? null;
-	let t3;
-	if ($[14] !== className) {
-		t3 = clsx(temporal_module_default.calendar, className);
-		$[14] = className;
-		$[15] = t3;
-	} else t3 = $[15];
-	const t4 = picked === null ? today : void 0;
-	let t5;
-	if ($[16] !== today) {
-		t5 = /* @__PURE__ */ jsx(MonthGrid, { today });
-		$[16] = today;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== checkIcon || $[19] !== expandIcon || $[20] !== monthLabel || $[21] !== nextIcon || $[22] !== nextMonthLabel || $[23] !== noMatchingYearLabel || $[24] !== previousIcon || $[25] !== previousMonthLabel || $[26] !== t5 || $[27] !== yearLabel) {
-		t6 = /* @__PURE__ */ jsx(CalendarChrome, {
-			previousMonthLabel,
-			nextMonthLabel,
-			monthLabel,
-			yearLabel,
-			noMatchingYearLabel,
-			previousIcon,
-			nextIcon,
-			checkIcon,
-			expandIcon,
-			children: t5
-		});
-		$[18] = checkIcon;
-		$[19] = expandIcon;
-		$[20] = monthLabel;
-		$[21] = nextIcon;
-		$[22] = nextMonthLabel;
-		$[23] = noMatchingYearLabel;
-		$[24] = previousIcon;
-		$[25] = previousMonthLabel;
-		$[26] = t5;
-		$[27] = yearLabel;
-		$[28] = t6;
-	} else t6 = $[28];
-	let t7;
-	if ($[29] !== props || $[30] !== t3 || $[31] !== t4 || $[32] !== t6) {
-		t7 = /* @__PURE__ */ jsx(Calendar, {
-			className: t3,
-			defaultFocusedValue: t4,
-			...props,
-			children: t6
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog, {
+			className: t1,
+			...props
 		});
-		$[29] = props;
-		$[30] = t3;
-		$[31] = t4;
-		$[32] = t6;
-		$[33] = t7;
-	} else t7 = $[33];
-	return t7;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
-* Days of one or more adjacent months, selecting a continuous range. Today,
-* and the month it opens on without a value, are read in the
-* `TimeZoneProvider`'s zone.
+* The `Popover` with its `Dialog`, in one part.
 *
 * @example
-* <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
+* <DateInput.Popup triggerRef={triggerRef}><DateInput.Calendar>…</DateInput.Calendar></DateInput.Popup>
 */
-var TemporalRangeCalendar = (t0) => {
-	const $ = c(41);
-	let checkIcon;
-	let className;
-	let expandIcon;
-	let monthLabel;
-	let nextIcon;
-	let nextMonthLabel;
-	let noMatchingYearLabel;
-	let previousIcon;
-	let previousMonthLabel;
+var TemporalPopup = (t0) => {
+	const $ = c(8);
+	let children;
 	let props;
-	let t1;
-	let yearLabel;
 	if ($[0] !== t0) {
-		({visibleMonths: t1, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
+		({children, ...props} = t0);
 		$[0] = t0;
-		$[1] = checkIcon;
-		$[2] = className;
-		$[3] = expandIcon;
-		$[4] = monthLabel;
-		$[5] = nextIcon;
-		$[6] = nextMonthLabel;
-		$[7] = noMatchingYearLabel;
-		$[8] = previousIcon;
-		$[9] = previousMonthLabel;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = yearLabel;
+		$[1] = children;
+		$[2] = props;
 	} else {
-		checkIcon = $[1];
-		className = $[2];
-		expandIcon = $[3];
-		monthLabel = $[4];
-		nextIcon = $[5];
-		nextMonthLabel = $[6];
-		noMatchingYearLabel = $[7];
-		previousIcon = $[8];
-		previousMonthLabel = $[9];
-		props = $[10];
-		t1 = $[11];
-		yearLabel = $[12];
+		children = $[1];
+		props = $[2];
 	}
-	const visibleMonths = t1 === void 0 ? 1 : t1;
-	const t2 = useTimeZone();
-	let t3;
-	if ($[13] !== t2) {
-		t3 = todayIn(t2);
-		$[13] = t2;
-		$[14] = t3;
-	} else t3 = $[14];
-	const today = t3;
-	const picked = useContext(DateRangePickerStateContext)?.value.start ?? null;
-	const months = Math.max(1, visibleMonths);
-	let t4;
-	if ($[15] !== className) {
-		t4 = clsx(temporal_module_default.calendar, temporal_module_default.rangeCalendar, className);
-		$[15] = className;
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== months) {
-		t5 = { months };
-		$[17] = months;
-		$[18] = t5;
-	} else t5 = $[18];
-	const t6 = picked === null ? today : void 0;
-	let t7;
-	if ($[19] !== months || $[20] !== today) {
-		let t8;
-		if ($[22] !== today) {
-			t8 = (_, month) => /* @__PURE__ */ jsx(MonthGrid, {
-				today,
-				monthOffset: month
-			}, month);
-			$[22] = today;
-			$[23] = t8;
-		} else t8 = $[23];
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: temporal_module_default.months,
-			children: Array.from({ length: months }, t8)
-		});
-		$[19] = months;
-		$[20] = today;
-		$[21] = t7;
-	} else t7 = $[21];
-	let t8;
-	if ($[24] !== checkIcon || $[25] !== expandIcon || $[26] !== monthLabel || $[27] !== nextIcon || $[28] !== nextMonthLabel || $[29] !== noMatchingYearLabel || $[30] !== previousIcon || $[31] !== previousMonthLabel || $[32] !== t7 || $[33] !== yearLabel) {
-		t8 = /* @__PURE__ */ jsx(CalendarChrome, {
-			previousMonthLabel,
-			nextMonthLabel,
-			monthLabel,
-			yearLabel,
-			noMatchingYearLabel,
-			previousIcon,
-			nextIcon,
-			checkIcon,
-			expandIcon,
-			children: t7
-		});
-		$[24] = checkIcon;
-		$[25] = expandIcon;
-		$[26] = monthLabel;
-		$[27] = nextIcon;
-		$[28] = nextMonthLabel;
-		$[29] = noMatchingYearLabel;
-		$[30] = previousIcon;
-		$[31] = previousMonthLabel;
-		$[32] = t7;
-		$[33] = yearLabel;
-		$[34] = t8;
-	} else t8 = $[34];
-	let t9;
-	if ($[35] !== props || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t8) {
-		t9 = /* @__PURE__ */ jsx(RangeCalendar, {
-			className: t4,
-			visibleDuration: t5,
-			defaultFocusedValue: t6,
-			...props,
-			children: t8
-		});
-		$[35] = props;
-		$[36] = t4;
-		$[37] = t5;
-		$[38] = t6;
-		$[39] = t8;
-		$[40] = t9;
-	} else t9 = $[40];
-	return t9;
-};
-/**
-* The label, description and error frame every temporal control shares,
-* handing the control the ids it wires `aria-labelledby` and
-* `aria-describedby` to.
-*
-* @example
-* <TemporalFrame label="Period" optionalLabel="optional">
-* 	{({ labelId }) => <DateInput.Root aria-labelledby={labelId} />}
-* </TemporalFrame>
-*/
-var TemporalFrame = (t0) => {
-	const $ = c(43);
-	const { label, description, errors, requiredness, optionalLabel, dirty, touched, className, children } = t0;
-	const ids = Field.useIds();
-	const { labelId, descriptionId, errorId, controlId } = ids;
 	let t1;
-	if ($[0] !== errors) {
-		t1 = normalizeFieldErrors(errors);
-		$[0] = errors;
-		$[1] = t1;
-	} else t1 = $[1];
-	const messages = t1;
-	let T0;
+	if ($[3] !== children) {
+		t1 = /* @__PURE__ */ jsx(TemporalDialog, { children });
+		$[3] = children;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
-	if ($[2] !== children || $[3] !== className || $[4] !== controlId || $[5] !== description || $[6] !== dirty || $[7] !== ids || $[8] !== label || $[9] !== labelId || $[10] !== messages.length || $[11] !== optionalLabel || $[12] !== requiredness || $[13] !== touched) {
-		const describedBy = ids.describedBy(description !== void 0, messages.length > 0);
-		T0 = Field.Root;
-		t2 = className;
-		t3 = messages.length > 0;
-		t4 = dirty;
-		t5 = touched;
-		let t8;
-		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-			t8 = /* @__PURE__ */ jsx("span", {});
-			$[21] = t8;
-		} else t8 = $[21];
-		if ($[22] !== label || $[23] !== labelId || $[24] !== optionalLabel || $[25] !== requiredness) {
-			t6 = /* @__PURE__ */ jsx(Field.Label, {
-				id: labelId,
-				nativeLabel: false,
-				requiredness,
-				optionalLabel,
-				render: t8,
-				children: label
-			});
-			$[22] = label;
-			$[23] = labelId;
-			$[24] = optionalLabel;
-			$[25] = requiredness;
-			$[26] = t6;
-		} else t6 = $[26];
-		t7 = children({
-			labelId,
-			describedBy,
-			controlId
-		});
-		$[2] = children;
-		$[3] = className;
-		$[4] = controlId;
-		$[5] = description;
-		$[6] = dirty;
-		$[7] = ids;
-		$[8] = label;
-		$[9] = labelId;
-		$[10] = messages.length;
-		$[11] = optionalLabel;
-		$[12] = requiredness;
-		$[13] = touched;
-		$[14] = T0;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t6;
-		$[20] = t7;
-	} else {
-		T0 = $[14];
-		t2 = $[15];
-		t3 = $[16];
-		t4 = $[17];
-		t5 = $[18];
-		t6 = $[19];
-		t7 = $[20];
-	}
-	let t8;
-	if ($[27] !== description || $[28] !== descriptionId) {
-		t8 = /* @__PURE__ */ jsx(Field.Description, {
-			id: descriptionId,
-			children: description
-		});
-		$[27] = description;
-		$[28] = descriptionId;
-		$[29] = t8;
-	} else t8 = $[29];
-	let t9;
-	if ($[30] !== errorId || $[31] !== messages) {
-		t9 = /* @__PURE__ */ jsx(Field.Error, {
-			id: errorId,
-			children: messages
-		});
-		$[30] = errorId;
-		$[31] = messages;
-		$[32] = t9;
-	} else t9 = $[32];
-	let t10;
-	if ($[33] !== T0 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(T0, {
-			className: t2,
-			invalid: t3,
-			dirty: t4,
-			touched: t5,
-			children: [
-				t6,
-				t7,
-				t8,
-				t9
-			]
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TemporalPopover, {
+			...props,
+			children: t1
 		});
-		$[33] = T0;
-		$[34] = t2;
-		$[35] = t3;
-		$[36] = t4;
-		$[37] = t5;
-		$[38] = t6;
-		$[39] = t7;
-		$[40] = t8;
-		$[41] = t9;
-		$[42] = t10;
-	} else t10 = $[42];
-	return t10;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
-function _temp(segment) {
-	return /* @__PURE__ */ jsx(TemporalSegment, { segment });
-}
-function _temp2(segment) {
-	return /* @__PURE__ */ jsx(TemporalSegment, { segment });
-}
-function _temp3(day) {
-	return /* @__PURE__ */ jsx(CalendarHeaderCell, {
-		className: temporal_module_default.weekday,
-		children: day
-	});
-}
-export { TemporalCalendar, TemporalFrame, TemporalGroup, TemporalInput, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalSegment, TemporalTrigger };
+export { TemporalDialog, TemporalGroup, TemporalInput, TemporalLabel, TemporalPopover, TemporalPopup, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, TemporalSegment, TemporalTrigger };