@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/conversation/conversation.module.js

@@ -0,0 +1,34 @@
+import './conversation.css';// src/components/conversation/conversation.module.scss
+var root = "_root_1jpsu_3";
+var group = "_group_1jpsu_9";
+var groupSeparator = "_groupSeparator_1jpsu_14";
+var message = "_message_1jpsu_24";
+var messageAuthor = "_messageAuthor_1jpsu_34";
+var messageBubble = "_messageBubble_1jpsu_44";
+var messageAvatar = "_messageAvatar_1jpsu_75";
+var messageTimestamp = "_messageTimestamp_1jpsu_78";
+var messageReadIndicator = "_messageReadIndicator_1jpsu_83";
+var statusDot = "_statusDot_1jpsu_91";
+var messageContent = "_messageContent_1jpsu_100";
+var messageFiles = "_messageFiles_1jpsu_111";
+var scrollToBottom = "_scrollToBottom_1jpsu_121";
+var emptyState = "_emptyState_1jpsu_126";
+var visuallyHidden = "_visuallyHidden_1jpsu_135";
+var conversation_module_default = {
+	root,
+	group,
+	groupSeparator,
+	message,
+	messageAuthor,
+	messageBubble,
+	messageAvatar,
+	messageTimestamp,
+	messageReadIndicator,
+	statusDot,
+	messageContent,
+	messageFiles,
+	scrollToBottom,
+	emptyState,
+	visuallyHidden
+};
+export { conversation_module_default as default, emptyState, group, groupSeparator, message, messageAuthor, messageAvatar, messageBubble, messageContent, messageFiles, messageReadIndicator, messageTimestamp, root, scrollToBottom, statusDot, visuallyHidden };

package/dist/components/conversation/group-messages.d.ts

@@ -0,0 +1,34 @@
+import type { Temporal } from "temporal-polyfill";
+import { type ConversationMoment } from "./moment.ts";
+export type ConversationDayGroup<T> = Readonly<{
+    /** The calendar day, as `YYYY-MM-DD` in the time zone grouped by. */
+    key: string;
+    /** The first item's moment. */
+    date: Temporal.Instant;
+    items: readonly [T, ...T[]];
+}>;
+/**
+ * Buckets chronologically ordered items into calendar days in `timeZone`,
+ * keeping their order within and across days. Items whose date can't be parsed
+ * are skipped. Pass the zone from `useTimeZone()`.
+ *
+ * @example
+ * groupByDay(messages, message => message.sentAt, useTimeZone());
+ * // [{ key: "2026-05-27", date: Temporal.Instant, items: [message, …] }, …]
+ */
+export declare const groupByDay: <T>(items: readonly T[], getDate: (item: T) => ConversationMoment | null | undefined, timeZone: string) => readonly ConversationDayGroup<T>[];
+export type ConversationBurst<T> = Readonly<{
+    key: string;
+    items: readonly [T, ...T[]];
+}>;
+/**
+ * Buckets chronologically ordered items into consecutive runs ("bursts") that
+ * share a key, such as messages one author sent one after another. A burst is
+ * keyed by how many earlier runs shared its key, not by its position, so a new
+ * message at the top does not remount every burst below it.
+ *
+ * @example
+ * groupByBurst(messages, message => message.authorId);
+ * // [{ key: "u1-0", items: [message, message] }, { key: "u2-0", items: [message] }]
+ */
+export declare const groupByBurst: <T>(items: readonly T[], getKey: (item: T) => string) => readonly ConversationBurst<T>[];

package/dist/components/conversation/group-messages.js

@@ -0,0 +1,64 @@
+import { toZonedDateTime } from "./moment.js";
+// src/components/conversation/group-messages.ts
+/**
+* Buckets chronologically ordered items into calendar days in `timeZone`,
+* keeping their order within and across days. Items whose date can't be parsed
+* are skipped. Pass the zone from `useTimeZone()`.
+*
+* @example
+* groupByDay(messages, message => message.sentAt, useTimeZone());
+* // [{ key: "2026-05-27", date: Temporal.Instant, items: [message, …] }, …]
+*/
+var groupByDay = (items, getDate, timeZone) => {
+	const groups = [];
+	for (const item of items) {
+		const zoned = toZonedDateTime(getDate(item), timeZone);
+		if (zoned === null) continue;
+		const key = zoned.toPlainDate().toString();
+		const lastGroup = groups.at(-1);
+		if (lastGroup?.key === key) {
+			lastGroup.items.push(item);
+			continue;
+		}
+		groups.push({
+			key,
+			date: zoned.toInstant(),
+			items: [item]
+		});
+	}
+	return groups;
+};
+/**
+* Buckets chronologically ordered items into consecutive runs ("bursts") that
+* share a key, such as messages one author sent one after another. A burst is
+* keyed by how many earlier runs shared its key, not by its position, so a new
+* message at the top does not remount every burst below it.
+*
+* @example
+* groupByBurst(messages, message => message.authorId);
+* // [{ key: "u1-0", items: [message, message] }, { key: "u2-0", items: [message] }]
+*/
+var groupByBurst = (items, getKey) => {
+	const bursts = [];
+	const runs = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const groupKey = getKey(item);
+		const lastBurst = bursts.at(-1);
+		if (lastBurst?.groupKey === groupKey) {
+			lastBurst.items.push(item);
+			continue;
+		}
+		const run = runs.get(groupKey) ?? 0;
+		runs.set(groupKey, run + 1);
+		bursts.push({
+			key: `${groupKey}-${run}`,
+			groupKey,
+			items: [item]
+		});
+	}
+	return bursts.map(({ key, items: burst }) => ({
+		key,
+		items: burst
+	}));
+};
+export { groupByBurst, groupByDay };

package/dist/components/conversation/index.d.ts

@@ -0,0 +1,4 @@
+export type { ConversationMessageContextValue, ConversationMessageSide, ConversationMessageStatus, } from "./conversation.context.ts";
+export * from "./conversation.tsx";
+export * from "./group-messages.ts";
+export type { ConversationMoment } from "./moment.ts";

package/dist/components/conversation/index.js

@@ -0,0 +1,3 @@
+import { Conversation } from "./conversation.js";
+import { groupByBurst, groupByDay } from "./group-messages.js";
+export { Conversation, groupByBurst, groupByDay };

package/dist/components/conversation/moment.d.ts

@@ -0,0 +1,11 @@
+import type { Temporal } from "temporal-polyfill";
+/** A moment in a conversation: an instant, or an ISO-8601 string for one. */
+export type ConversationMoment = string | Temporal.Instant;
+/**
+ * The moment an instant or ISO-8601 string denotes in `timeZone`, or `null` for
+ * missing or unparseable input.
+ *
+ * @example
+ * toZonedDateTime("2026-05-26T22:30:00Z", "Europe/Amsterdam"); // 2026-05-27T00:30+02:00
+ */
+export declare const toZonedDateTime: (value: ConversationMoment | null | undefined, timeZone: string) => Temporal.ZonedDateTime | null;

package/dist/components/conversation/moment.js

@@ -0,0 +1,15 @@
+import { isoToZonedDateTime } from "../../lib/iso-zoned.js";
+// src/components/conversation/moment.ts
+/**
+* The moment an instant or ISO-8601 string denotes in `timeZone`, or `null` for
+* missing or unparseable input.
+*
+* @example
+* toZonedDateTime("2026-05-26T22:30:00Z", "Europe/Amsterdam"); // 2026-05-27T00:30+02:00
+*/
+var toZonedDateTime = (value, timeZone) => {
+	if (value === null || value === void 0) return null;
+	if (typeof value === "string") return isoToZonedDateTime(value, timeZone);
+	return value.toZonedDateTimeISO(timeZone);
+};
+export { toZonedDateTime };

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

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
+export type DateFieldProps = FieldProps & CalendarLabels & Readonly<{
+    /** Accessible name of the button that opens the calendar, such as "Open calendar". */
+    openCalendarLabel: string;
+    /**
+     * An ISO plain date, such as `"2026-07-24"`. A date-time or an instant is
+     * read as the day it falls on in the `TimeZoneProvider`'s zone.
+     */
+    value?: string | null;
+    /** The same, for an uncontrolled control. */
+    defaultValue?: string | null;
+    /** Called with the ISO plain date picked or typed, or `null` once cleared. */
+    onValueChange?: (value: string | null) => void;
+    onBlur?: FieldBlurHandler;
+    /** Earliest selectable ISO plain date. */
+    minValue?: string;
+    /** Latest selectable ISO plain date. */
+    maxValue?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Applied to the field wrapper, so callers can size the control. */
+    className?: string;
+}>;
+/**
+ * A labelled date entry whose segments are typed or picked from a calendar
+ * popover. Its value is an ISO plain-date string.
+ *
+ * @example
+ * <DateField
+ * 	label="Treatment date"
+ * 	optionalLabel="optional"
+ * 	openCalendarLabel="Open calendar"
+ * 	previousMonthLabel="Previous month"
+ * 	nextMonthLabel="Next month"
+ * 	monthLabel="Month"
+ * 	yearLabel="Year"
+ * 	noMatchingYearLabel="No matching year."
+ * 	value={date}
+ * 	onValueChange={setDate}
+ * />
+ */
+export declare const DateField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, value, defaultValue, onValueChange, onBlur, minValue, maxValue, name, disabled, readOnly, className, }: DateFieldProps) => ReactNode;

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

@@ -0,0 +1,162 @@
+import { dayToIso, isoToDay } from "../../lib/calendar/temporal-value.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";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/date-field/date-field.tsx
+/**
+* A labelled date entry whose segments are typed or picked from a calendar
+* popover. Its value is an ISO plain-date string.
+*
+* @example
+* <DateField
+* 	label="Treatment date"
+* 	optionalLabel="optional"
+* 	openCalendarLabel="Open calendar"
+* 	previousMonthLabel="Previous month"
+* 	nextMonthLabel="Next month"
+* 	monthLabel="Month"
+* 	yearLabel="Year"
+* 	noMatchingYearLabel="No matching year."
+* 	value={date}
+* 	onValueChange={setDate}
+* />
+*/
+var DateField = (t0) => {
+	const $ = c(44);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, value, defaultValue, onValueChange, onBlur, minValue, maxValue, name, disabled, readOnly, className } = t0;
+	const triggerRef = useRef(null);
+	const timeZone = useTimeZone();
+	let t1;
+	if ($[0] !== timeZone || $[1] !== value) {
+		t1 = isoToDay(value, timeZone);
+		$[0] = timeZone;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const day = t1;
+	const t2 = day !== null;
+	let t3;
+	if ($[3] !== dirty || $[4] !== disabled || $[5] !== errors || $[6] !== pending || $[7] !== readOnly || $[8] !== requiredness || $[9] !== t2 || $[10] !== touched) {
+		t3 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled: t2
+		};
+		$[3] = dirty;
+		$[4] = disabled;
+		$[5] = errors;
+		$[6] = pending;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = t2;
+		$[10] = touched;
+		$[11] = t3;
+	} else t3 = $[11];
+	const field = useFieldState(t3);
+	const { phase } = field;
+	const fieldState = field.state;
+	let t4;
+	if ($[12] !== day || $[13] !== defaultValue || $[14] !== field.disabled || $[15] !== field.invalid || $[16] !== fieldState || $[17] !== maxValue || $[18] !== minValue || $[19] !== monthLabel || $[20] !== name || $[21] !== nextMonthLabel || $[22] !== noMatchingYearLabel || $[23] !== onBlur || $[24] !== onValueChange || $[25] !== openCalendarLabel || $[26] !== phase || $[27] !== previousMonthLabel || $[28] !== readOnly || $[29] !== requiredness || $[30] !== timeZone || $[31] !== value || $[32] !== 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$1, { 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
+							})
+						]
+					}), /* @__PURE__ */ jsx(DateInput.Popup, {
+						triggerRef,
+						children: /* @__PURE__ */ jsx(DateInput.Calendar, {
+							previousMonthLabel,
+							nextMonthLabel,
+							monthLabel,
+							yearLabel,
+							noMatchingYearLabel
+						})
+					})] });
+				}
+			});
+		};
+		$[12] = day;
+		$[13] = defaultValue;
+		$[14] = field.disabled;
+		$[15] = field.invalid;
+		$[16] = fieldState;
+		$[17] = maxValue;
+		$[18] = minValue;
+		$[19] = monthLabel;
+		$[20] = name;
+		$[21] = nextMonthLabel;
+		$[22] = noMatchingYearLabel;
+		$[23] = onBlur;
+		$[24] = onValueChange;
+		$[25] = openCalendarLabel;
+		$[26] = phase;
+		$[27] = previousMonthLabel;
+		$[28] = readOnly;
+		$[29] = requiredness;
+		$[30] = timeZone;
+		$[31] = value;
+		$[32] = yearLabel;
+		$[33] = t4;
+	} else t4 = $[33];
+	let t5;
+	if ($[34] !== className || $[35] !== description || $[36] !== dirty || $[37] !== errors || $[38] !== label || $[39] !== optionalLabel || $[40] !== requiredness || $[41] !== t4 || $[42] !== touched) {
+		t5 = /* @__PURE__ */ jsx(DateInput.Frame, {
+			label,
+			description,
+			errors,
+			requiredness,
+			optionalLabel,
+			dirty,
+			touched,
+			className,
+			children: t4
+		});
+		$[34] = className;
+		$[35] = description;
+		$[36] = dirty;
+		$[37] = errors;
+		$[38] = label;
+		$[39] = optionalLabel;
+		$[40] = requiredness;
+		$[41] = t4;
+		$[42] = touched;
+		$[43] = t5;
+	} else t5 = $[43];
+	return t5;
+};
+export { DateField };

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

@@ -0,0 +1,46 @@
+import type { CalendarDate } from "@internationalized/date";
+import { type ReactNode, type Ref } 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 { Field } from "../field/index.ts";
+export type DateInputRootProps = AriaDatePickerProps<CalendarDate> & TemporalStateProps;
+declare const DateInputRoot: ({ state, ...props }: DateInputRootProps) => ReactNode;
+export type DateInputTriggerProps = Readonly<{
+    /** Accessible name, such as "Open calendar". */
+    label: string;
+    ref?: Ref<HTMLButtonElement>;
+}>;
+declare const DateInputTrigger: ({ label, ref, }: DateInputTriggerProps) => ReactNode;
+/** The parts of a date input. */
+export type DateInputParts = Readonly<{
+    Frame: typeof TemporalFrame;
+    Root: typeof DateInputRoot;
+    Group: typeof TemporalGroup;
+    Input: typeof TemporalInput;
+    Trigger: typeof DateInputTrigger;
+    Popup: typeof TemporalPopup;
+    Calendar: typeof TemporalCalendar;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * 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`.
+ *
+ * @example
+ * <DateInput.Root aria-labelledby={labelId}>
+ * 	{({ isFocusWithin }) => (
+ * 		<>
+ * 			<DateInput.Group state={{ focused: isFocusWithin }}>
+ * 				<DateInput.Input />
+ * 				<DateInput.Trigger label="Open calendar" />
+ * 			</DateInput.Group>
+ * 			<DateInput.Popup>
+ * 				<DateInput.Calendar {...calendarLabels} />
+ * 			</DateInput.Popup>
+ * 		</>
+ * 	)}
+ * </DateInput.Root>
+ */
+export declare const DateInput: DateInputParts;
+export {};

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

@@ -0,0 +1,109 @@
+import SvgCalendarToday from "../../vendor/@material-design-icons/svg/outlined/calendar_today.js";
+import { todayIn } from "../../lib/calendar/temporal-value.js";
+import { TemporalCalendar, TemporalFrame, TemporalGroup, TemporalInput, TemporalPopup, 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";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DatePicker } from "react-aria-components";
+// src/components/date-field/date-input.tsx
+var DateInputRoot = (t0) => {
+	const $ = c(14);
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		({state, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = state;
+	} else {
+		props = $[1];
+		state = $[2];
+	}
+	const id = useId();
+	const t1 = useTimeZone();
+	let t2;
+	if ($[3] !== t1) {
+		t2 = todayIn(t1);
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== state) {
+		t3 = state ?? {};
+		$[5] = state;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = fieldStateAttributes(t3);
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	const t5 = props.name ?? id;
+	let t6;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(DatePicker, {
+			validationBehavior: "aria",
+			placeholderValue: t2,
+			...t4,
+			...props,
+			name: t5
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+};
+var DateInputTrigger = (t0) => {
+	const $ = c(3);
+	const { label, ref } = t0;
+	let t1;
+	if ($[0] !== label || $[1] !== ref) {
+		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
+			icon: SvgCalendarToday,
+			label,
+			ref
+		});
+		$[0] = label;
+		$[1] = ref;
+		$[2] = t1;
+	} else t1 = $[2];
+	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`.
+*
+* @example
+* <DateInput.Root aria-labelledby={labelId}>
+* 	{({ isFocusWithin }) => (
+* 		<>
+* 			<DateInput.Group state={{ focused: isFocusWithin }}>
+* 				<DateInput.Input />
+* 				<DateInput.Trigger label="Open calendar" />
+* 			</DateInput.Group>
+* 			<DateInput.Popup>
+* 				<DateInput.Calendar {...calendarLabels} />
+* 			</DateInput.Popup>
+* 		</>
+* 	)}
+* </DateInput.Root>
+*/
+var DateInput$1 = {
+	Frame: TemporalFrame,
+	Root: DateInputRoot,
+	Group: TemporalGroup,
+	Input: TemporalInput,
+	Trigger: DateInputTrigger,
+	Popup: TemporalPopup,
+	Calendar: TemporalCalendar,
+	Pending: Field.Pending
+};
+export { DateInput$1 as DateInput };

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

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

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

@@ -0,0 +1,4 @@
+import { DateField } from "./date-field.js";
+import { DateInput } from "./date-input.js";
+import { TSFDateField } from "./tsf-date-field.js";
+export { DateField, DateInput, TSFDateField };

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type DateFieldProps } from "./date-field.tsx";
+export type TSFDateFieldProps = Omit<DateFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `DateField` bound to the TanStack Form field it renders in, reached as
+ * `field.DateField`. The field's value is an ISO plain date, or `null`.
+ *
+ * @example
+ * <form.AppField name="treatedOn">
+ * 	{field => <field.DateField label="Treatment date" optionalLabel="optional" {...calendarLabels} />}
+ * </form.AppField>
+ */
+export declare const TSFDateField: (props: TSFDateFieldProps) => ReactNode;

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

@@ -0,0 +1,40 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { DateField } from "./date-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/date-field/tsf-date-field.tsx
+/**
+* `DateField` bound to the TanStack Form field it renders in, reached as
+* `field.DateField`. The field's value is an ISO plain date, or `null`.
+*
+* @example
+* <form.AppField name="treatedOn">
+* 	{field => <field.DateField label="Treatment date" optionalLabel="optional" {...calendarLabels} />}
+* </form.AppField>
+*/
+var TSFDateField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField(props.label);
+	let t0;
+	if ($[0] !== field) {
+		t0 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(DateField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFDateField };

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

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import { type IsoDateRange } from "../../lib/calendar/temporal-value.ts";
+import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
+export type DateRangeFieldProps = FieldProps & CalendarLabels & Readonly<{
+    /** Accessible name of the button that opens the calendar, such as "Open calendar". */
+    openCalendarLabel: string;
+    /**
+     * Inclusive ISO plain dates, such as `{ start: "2026-07-01", end: "2026-07-31" }`.
+     * A date-time or an instant is read as the day it falls on in the
+     * `TimeZoneProvider`'s zone.
+     */
+    value?: IsoDateRange | null;
+    /** The same, for an uncontrolled control. */
+    defaultValue?: IsoDateRange | null;
+    /** Called with the inclusive ISO plain dates picked or typed, or `null` once cleared. */
+    onValueChange?: (value: IsoDateRange | null) => void;
+    onBlur?: FieldBlurHandler;
+    /** Earliest selectable ISO plain date. */
+    minValue?: string;
+    /** Latest selectable ISO plain date. */
+    maxValue?: string;
+    /**
+     * Months the calendar shows side by side. The caller decides, for
+     * instance one on a narrow viewport. @default 1
+     */
+    visibleMonths?: number;
+    /** Form field name for the start date. */
+    startName?: string;
+    /** Form field name for the end date. */
+    endName?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Applied to the field wrapper, so callers can size the control. */
+    className?: string;
+}>;
+/**
+ * A labelled start and end date, typed or picked from one range calendar. Its
+ * value is a pair of inclusive ISO plain-date strings;
+ * `isoDateRangeToInstants` turns it into query bounds.
+ *
+ * @example
+ * <DateRangeField
+ * 	label="Declaration period"
+ * 	optionalLabel="optional"
+ * 	openCalendarLabel="Open calendar"
+ * 	{...calendarLabels}
+ * 	visibleMonths={narrow ? 1 : 2}
+ * 	value={period}
+ * 	onValueChange={setPeriod}
+ * />
+ */
+export declare const DateRangeField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, value, defaultValue, onValueChange, onBlur, minValue, maxValue, visibleMonths, startName, endName, disabled, readOnly, className, }: DateRangeFieldProps) => ReactNode;