@maanlamp/react-web-ui 0.0.0-stage → 0.1.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,35 @@
+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>[];
+//# sourceMappingURL=group-messages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-messages.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/group-messages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACN,KAAK,kBAAkB,EAEvB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI,QAAQ,CAAC;IAC9C,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACvB,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,CAAC,SACpB,SAAS,CAAC,EAAE,WACV,CACR,IAAI,EAAE,CAAC,KACH,kBAAkB,GAAG,IAAI,GAAG,SAAS,YAChC,MAAM,KACd,SAAS,oBAAoB,CAAC,CAAC,CAAC,EA0BlC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,QAAQ,CAAC;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,SACtB,SAAS,CAAC,EAAE,UACX,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,KACzB,SAAS,iBAAiB,CAAC,CAAC,CAAC,EA4B/B,CAAC"}

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,5 @@
+export { type ConversationMessageContextValue, type ConversationMessageSide, type ConversationMessageStatus, useConversationMessageContext, } from "./conversation.context.ts";
+export * from "./conversation.tsx";
+export * from "./group-messages.ts";
+export type { ConversationMoment } from "./moment.ts";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,+BAA+B,EACpC,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,6BAA6B,GAC7B,MAAM,2BAA2B,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/conversation/index.js

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

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

@@ -0,0 +1,12 @@
+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;
+//# sourceMappingURL=moment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moment.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/moment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,6EAA6E;AAC7E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;AAE3D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,UACpB,kBAAkB,GAAG,IAAI,GAAG,SAAS,YAClC,MAAM,KACd,QAAQ,CAAC,aAAa,GAAG,IAQ3B,CAAC"}

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,46 @@
+import { type ReactNode } from "react";
+import type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import 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?: () => void;
+    /** 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;
+//# sourceMappingURL=date-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../../src/components/date-field/date-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAOtE,OAAO,KAAK,EACX,UAAU,EAEV,MAAM,mBAAmB,CAAC;AAK3B,MAAM,MAAM,cAAc,GAAG,UAAU,GACtC,cAAc,GACd,QAAQ,CAAC;IACR,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,kSAyBnB,cAAc,KAAG,SAiFnB,CAAC"}

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

@@ -0,0 +1,183 @@
+import { dayToIso, isoToDay } from "../../lib/calendar/temporal-value.js";
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { useFormDisabled } from "../form/form-context.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(49);
+	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 formDisabled = useFormDisabled();
+	const t2 = pending === true;
+	let t3;
+	if ($[3] !== t2) {
+		t3 = { busy: t2 };
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	const phase = useBusyPhase(t3);
+	let t4;
+	if ($[5] !== errors) {
+		t4 = normalizeFieldErrors(errors);
+		$[5] = errors;
+		$[6] = t4;
+	} else t4 = $[6];
+	const invalid = t4.length > 0;
+	const t5 = disabled === true || formDisabled;
+	const t6 = touched === true && !invalid;
+	const t7 = phase !== "fresh";
+	const t8 = day !== null;
+	let t9;
+	if ($[7] !== dirty || $[8] !== invalid || $[9] !== readOnly || $[10] !== requiredness || $[11] !== t5 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== touched) {
+		t9 = {
+			disabled: t5,
+			readonly: readOnly,
+			requiredness,
+			invalid,
+			valid: t6,
+			dirty,
+			touched,
+			pending: t7,
+			filled: t8
+		};
+		$[7] = dirty;
+		$[8] = invalid;
+		$[9] = readOnly;
+		$[10] = requiredness;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+		$[15] = touched;
+		$[16] = t9;
+	} else t9 = $[16];
+	const fieldState = t9;
+	let t10;
+	if ($[17] !== day || $[18] !== defaultValue || $[19] !== disabled || $[20] !== fieldState || $[21] !== invalid || $[22] !== maxValue || $[23] !== minValue || $[24] !== monthLabel || $[25] !== name || $[26] !== nextMonthLabel || $[27] !== noMatchingYearLabel || $[28] !== onBlur || $[29] !== onValueChange || $[30] !== openCalendarLabel || $[31] !== phase || $[32] !== previousMonthLabel || $[33] !== readOnly || $[34] !== requiredness || $[35] !== timeZone || $[36] !== value || $[37] !== yearLabel) {
+		t10 = (t11) => {
+			const { labelId, describedBy, controlId } = t11;
+			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: disabled,
+				isReadOnly: readOnly,
+				isRequired: requiredness === "required",
+				isInvalid: invalid,
+				children: (t12) => {
+					const { isFocusWithin } = t12;
+					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
+						})
+					})] });
+				}
+			});
+		};
+		$[17] = day;
+		$[18] = defaultValue;
+		$[19] = disabled;
+		$[20] = fieldState;
+		$[21] = invalid;
+		$[22] = maxValue;
+		$[23] = minValue;
+		$[24] = monthLabel;
+		$[25] = name;
+		$[26] = nextMonthLabel;
+		$[27] = noMatchingYearLabel;
+		$[28] = onBlur;
+		$[29] = onValueChange;
+		$[30] = openCalendarLabel;
+		$[31] = phase;
+		$[32] = previousMonthLabel;
+		$[33] = readOnly;
+		$[34] = requiredness;
+		$[35] = timeZone;
+		$[36] = value;
+		$[37] = yearLabel;
+		$[38] = t10;
+	} else t10 = $[38];
+	let t11;
+	if ($[39] !== className || $[40] !== description || $[41] !== dirty || $[42] !== errors || $[43] !== label || $[44] !== optionalLabel || $[45] !== requiredness || $[46] !== t10 || $[47] !== touched) {
+		t11 = /* @__PURE__ */ jsx(DateInput.Frame, {
+			label,
+			description,
+			errors,
+			requiredness,
+			optionalLabel,
+			dirty,
+			touched,
+			className,
+			children: t10
+		});
+		$[39] = className;
+		$[40] = description;
+		$[41] = dirty;
+		$[42] = errors;
+		$[43] = label;
+		$[44] = optionalLabel;
+		$[45] = requiredness;
+		$[46] = t10;
+		$[47] = touched;
+		$[48] = t11;
+	} else t11 = $[48];
+	return t11;
+};
+export { DateField };

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

@@ -0,0 +1,47 @@
+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 {};
+//# sourceMappingURL=date-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/components/date-field/date-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAC;AACxD,OAAO,EAEN,KAAK,eAAe,IAAI,mBAAmB,EAC3C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACN,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,KAAK,kBAAkB,EAEvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,KAAK,EAEL,MAAM,mBAAmB,CAAC;AAG3B,MAAM,MAAM,kBAAkB,GAC7B,mBAAmB,CAAC,YAAY,CAAC,GAAG,kBAAkB,CAAC;AAExD,QAAA,MAAM,aAAa,wBAGhB,kBAAkB,KAAG,SAWvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC7B,CAAC,CAAC;AAEH,QAAA,MAAM,gBAAgB,oBAGnB,qBAAqB,KAAG,SAM1B,CAAC;AAEF,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,IAAI,EAAE,OAAO,aAAa,CAAC;IAC3B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,QAAQ,EAAE,OAAO,gBAAgB,CAAC;IAClC,OAAO,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC;CAC9B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,SAAS,EAAE,cASvB,CAAC"}

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,5 @@
+export type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+export * from "./date-field.tsx";
+export * from "./date-input.tsx";
+export * from "./tsf-date-field.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-field/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

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,15 @@
+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;
+//# sourceMappingURL=tsf-date-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-date-field.d.ts","sourceRoot":"","sources":["../../../src/components/date-field/tsf-date-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,cAAc,EACnB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,cAAc,EACZ,MAAM,mBAAmB,GACzB,OAAO,GACP,cAAc,GACd,eAAe,CACjB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,UACjB,iBAAiB,KACtB,SAaF,CAAC"}

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();
+	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 };