@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-field.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-field/date-range-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAEN,KAAK,YAAY,EAGjB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,KAAK,EACX,UAAU,EAEV,MAAM,mBAAmB,CAAC;AAK3B,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAC3C,cAAc,GACd,QAAQ,CAAC;IACR,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAE5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAEnC,yFAAyF;IACzF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAErD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,+TA2BxB,mBAAmB,KAAG,SA2FxB,CAAC"}

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

@@ -0,0 +1,188 @@
+import { dayRangeToIso, isoToDay, isoToDayRange } 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 { DateRangeInput } from "./date-range-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-range-field/date-range-field.tsx
+/**
+* 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}
+* />
+*/
+var DateRangeField = (t0) => {
+	const $ = c(51);
+	const { 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 } = t0;
+	const triggerRef = useRef(null);
+	const timeZone = useTimeZone();
+	let t1;
+	if ($[0] !== timeZone || $[1] !== value) {
+		t1 = isoToDayRange(value, timeZone);
+		$[0] = timeZone;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const range = 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 = range !== 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] !== defaultValue || $[18] !== disabled || $[19] !== endName || $[20] !== fieldState || $[21] !== invalid || $[22] !== maxValue || $[23] !== minValue || $[24] !== monthLabel || $[25] !== nextMonthLabel || $[26] !== noMatchingYearLabel || $[27] !== onBlur || $[28] !== onValueChange || $[29] !== openCalendarLabel || $[30] !== phase || $[31] !== previousMonthLabel || $[32] !== range || $[33] !== readOnly || $[34] !== requiredness || $[35] !== startName || $[36] !== timeZone || $[37] !== value || $[38] !== visibleMonths || $[39] !== yearLabel) {
+		t10 = (t11) => {
+			const { labelId, describedBy, controlId } = t11;
+			return /* @__PURE__ */ jsx(DateRangeInput.Root, {
+				state: fieldState,
+				"aria-labelledby": labelId,
+				"aria-describedby": describedBy,
+				value: value === void 0 ? void 0 : range,
+				defaultValue: isoToDayRange(defaultValue, timeZone) ?? void 0,
+				onChange: (next) => onValueChange?.(dayRangeToIso(next)),
+				onBlur,
+				minValue: isoToDay(minValue, timeZone) ?? void 0,
+				maxValue: isoToDay(maxValue, timeZone) ?? void 0,
+				startName: startName ?? `${controlId}-start`,
+				endName: endName ?? `${controlId}-end`,
+				isDisabled: disabled,
+				isReadOnly: readOnly,
+				isRequired: requiredness === "required",
+				isInvalid: invalid,
+				children: (t12) => {
+					const { isFocusWithin } = t12;
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
+						state: {
+							...fieldState,
+							focused: isFocusWithin
+						},
+						children: [
+							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "start" }),
+							/* @__PURE__ */ jsx(DateRangeInput.Separator, {}),
+							/* @__PURE__ */ jsx(DateRangeInput.Input, { slot: "end" }),
+							/* @__PURE__ */ jsx(DateRangeInput.Spacer, {}),
+							phase !== "fresh" && /* @__PURE__ */ jsx(DateRangeInput.Pending, {}),
+							/* @__PURE__ */ jsx(DateRangeInput.Trigger, {
+								label: openCalendarLabel,
+								ref: triggerRef
+							})
+						]
+					}), /* @__PURE__ */ jsx(DateRangeInput.Popup, {
+						triggerRef,
+						children: /* @__PURE__ */ jsx(DateRangeInput.Calendar, {
+							visibleMonths,
+							previousMonthLabel,
+							nextMonthLabel,
+							monthLabel,
+							yearLabel,
+							noMatchingYearLabel
+						})
+					})] });
+				}
+			});
+		};
+		$[17] = defaultValue;
+		$[18] = disabled;
+		$[19] = endName;
+		$[20] = fieldState;
+		$[21] = invalid;
+		$[22] = maxValue;
+		$[23] = minValue;
+		$[24] = monthLabel;
+		$[25] = nextMonthLabel;
+		$[26] = noMatchingYearLabel;
+		$[27] = onBlur;
+		$[28] = onValueChange;
+		$[29] = openCalendarLabel;
+		$[30] = phase;
+		$[31] = previousMonthLabel;
+		$[32] = range;
+		$[33] = readOnly;
+		$[34] = requiredness;
+		$[35] = startName;
+		$[36] = timeZone;
+		$[37] = value;
+		$[38] = visibleMonths;
+		$[39] = yearLabel;
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== className || $[42] !== description || $[43] !== dirty || $[44] !== errors || $[45] !== label || $[46] !== optionalLabel || $[47] !== requiredness || $[48] !== t10 || $[49] !== touched) {
+		t11 = /* @__PURE__ */ jsx(DateRangeInput.Frame, {
+			label,
+			description,
+			errors,
+			requiredness,
+			optionalLabel,
+			dirty,
+			touched,
+			className,
+			children: t10
+		});
+		$[41] = className;
+		$[42] = description;
+		$[43] = dirty;
+		$[44] = errors;
+		$[45] = label;
+		$[46] = optionalLabel;
+		$[47] = requiredness;
+		$[48] = t10;
+		$[49] = touched;
+		$[50] = t11;
+	} else t11 = $[50];
+	return t11;
+};
+export { DateRangeField };

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

@@ -0,0 +1,52 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { ReactNode, Ref } from "react";
+import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components";
+import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
+import { Field } from "../field/index.ts";
+export type DateRangeInputRootProps = AriaDateRangePickerProps<CalendarDate> & TemporalStateProps;
+declare const DateRangeInputRoot: ({ state, ...props }: DateRangeInputRootProps) => ReactNode;
+export type DateRangeInputTriggerProps = Readonly<{
+    /** Accessible name, such as "Open calendar". */
+    label: string;
+    ref?: Ref<HTMLButtonElement>;
+}>;
+declare const DateRangeInputTrigger: ({ label, ref, }: DateRangeInputTriggerProps) => ReactNode;
+/** The parts of a date range input. */
+export type DateRangeInputParts = Readonly<{
+    Frame: typeof TemporalFrame;
+    Root: typeof DateRangeInputRoot;
+    Group: typeof TemporalGroup;
+    Input: typeof TemporalRangeInput;
+    Separator: typeof TemporalRangeSeparator;
+    Spacer: typeof TemporalRangeSpacer;
+    Trigger: typeof DateRangeInputTrigger;
+    Popup: typeof TemporalPopup;
+    Calendar: typeof TemporalRangeCalendar;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * The styled parts of a react-aria `DateRangePicker`, a start and an end date
+ * entry plus a range calendar popover, carrying the field frame's ids rather
+ * than a label of their own. For the ordinary case, use `DateRangeField`.
+ *
+ * @example
+ * <DateRangeInput.Root aria-labelledby={labelId}>
+ * 	{({ isFocusWithin }) => (
+ * 		<>
+ * 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+ * 				<DateRangeInput.Input slot="start" />
+ * 				<DateRangeInput.Separator />
+ * 				<DateRangeInput.Input slot="end" />
+ * 				<DateRangeInput.Spacer />
+ * 				<DateRangeInput.Trigger label="Open calendar" />
+ * 			</DateRangeInput.Group>
+ * 			<DateRangeInput.Popup>
+ * 				<DateRangeInput.Calendar {...calendarLabels} />
+ * 			</DateRangeInput.Popup>
+ * 		</>
+ * 	)}
+ * </DateRangeInput.Root>
+ */
+export declare const DateRangeInput: DateRangeInputParts;
+export {};
+//# sourceMappingURL=date-range-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-input.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-field/date-range-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEN,KAAK,oBAAoB,IAAI,wBAAwB,EACrD,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACN,aAAa,EACb,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,KAAK,kBAAkB,EAEvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,KAAK,EAEL,MAAM,mBAAmB,CAAC;AAG3B,MAAM,MAAM,uBAAuB,GAClC,wBAAwB,CAAC,YAAY,CAAC,GACrC,kBAAkB,CAAC;AAErB,QAAA,MAAM,kBAAkB,wBAGrB,uBAAuB,KAAG,SAO5B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC;IACjD,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC7B,CAAC,CAAC;AAEH,QAAA,MAAM,qBAAqB,oBAGxB,0BAA0B,KAAG,SAM/B,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAC1C,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,IAAI,EAAE,OAAO,kBAAkB,CAAC;IAChC,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,kBAAkB,CAAC;IACjC,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,OAAO,EAAE,OAAO,qBAAqB,CAAC;IACtC,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,QAAQ,EAAE,OAAO,qBAAqB,CAAC;IACvC,OAAO,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC;CAC9B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,cAAc,EAAE,mBAW5B,CAAC"}

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

@@ -0,0 +1,109 @@
+import SvgDateRange from "../../vendor/@material-design-icons/svg/outlined/date_range.js";
+import { todayIn } from "../../lib/calendar/temporal-value.js";
+import { TemporalFrame, TemporalGroup, TemporalPopup, TemporalRangeCalendar, TemporalRangeInput, TemporalRangeSeparator, TemporalRangeSpacer, 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 { jsx } from "react/jsx-runtime";
+import { DateRangePicker } from "react-aria-components";
+// src/components/date-range-field/date-range-input.tsx
+var DateRangeInputRoot = (t0) => {
+	const $ = c(13);
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		({state, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = state;
+	} else {
+		props = $[1];
+		state = $[2];
+	}
+	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];
+	let t5;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DateRangePicker, {
+			validationBehavior: "aria",
+			placeholderValue: t2,
+			...t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+var DateRangeInputTrigger = (t0) => {
+	const $ = c(3);
+	const { label, ref } = t0;
+	let t1;
+	if ($[0] !== label || $[1] !== ref) {
+		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
+			icon: SvgDateRange,
+			label,
+			ref
+		});
+		$[0] = label;
+		$[1] = ref;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+/**
+* The styled parts of a react-aria `DateRangePicker`, a start and an end date
+* entry plus a range calendar popover, carrying the field frame's ids rather
+* than a label of their own. For the ordinary case, use `DateRangeField`.
+*
+* @example
+* <DateRangeInput.Root aria-labelledby={labelId}>
+* 	{({ isFocusWithin }) => (
+* 		<>
+* 			<DateRangeInput.Group state={{ focused: isFocusWithin }}>
+* 				<DateRangeInput.Input slot="start" />
+* 				<DateRangeInput.Separator />
+* 				<DateRangeInput.Input slot="end" />
+* 				<DateRangeInput.Spacer />
+* 				<DateRangeInput.Trigger label="Open calendar" />
+* 			</DateRangeInput.Group>
+* 			<DateRangeInput.Popup>
+* 				<DateRangeInput.Calendar {...calendarLabels} />
+* 			</DateRangeInput.Popup>
+* 		</>
+* 	)}
+* </DateRangeInput.Root>
+*/
+var DateRangeInput = {
+	Frame: TemporalFrame,
+	Root: DateRangeInputRoot,
+	Group: TemporalGroup,
+	Input: TemporalRangeInput,
+	Separator: TemporalRangeSeparator,
+	Spacer: TemporalRangeSpacer,
+	Trigger: DateRangeInputTrigger,
+	Popup: TemporalPopup,
+	Calendar: TemporalRangeCalendar,
+	Pending: Field.Pending
+};
+export { DateRangeInput };

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

@@ -0,0 +1,5 @@
+export { type IsoDateRange, isoDateRangeToInstants, } from "../../lib/calendar/temporal-value.ts";
+export * from "./date-range-field.tsx";
+export * from "./date-range-input.tsx";
+export * from "./tsf-date-range-field.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,YAAY,EACjB,sBAAsB,GACtB,MAAM,sCAAsC,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}

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

@@ -0,0 +1,5 @@
+import { isoDateRangeToInstants } from "../../lib/calendar/temporal-value.js";
+import { DateRangeField } from "./date-range-field.js";
+import { DateRangeInput } from "./date-range-input.js";
+import { TSFDateRangeField } from "./tsf-date-range-field.js";
+export { DateRangeField, DateRangeInput, TSFDateRangeField, isoDateRangeToInstants };

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type DateRangeFieldProps } from "./date-range-field.tsx";
+export type TSFDateRangeFieldProps = Omit<DateRangeFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange" | "startName" | "endName">;
+/**
+ * `DateRangeField` bound to the TanStack Form field it renders in, reached as
+ * `field.DateRangeField`. The field's value is a pair of inclusive ISO plain
+ * dates, or `null`.
+ *
+ * @example
+ * <form.AppField name="period">
+ * 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+ * </form.AppField>
+ */
+export declare const TSFDateRangeField: (props: TSFDateRangeFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-date-range-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-date-range-field.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-field/tsf-date-range-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,mBAAmB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,mBAAmB,EACjB,MAAM,mBAAmB,GACzB,OAAO,GACP,cAAc,GACd,eAAe,GACf,WAAW,GACX,SAAS,CACX,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,UACtB,sBAAsB,KAC3B,SAgBF,CAAC"}

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

@@ -0,0 +1,58 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { DateRangeField } from "./date-range-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/date-range-field/tsf-date-range-field.tsx
+/**
+* `DateRangeField` bound to the TanStack Form field it renders in, reached as
+* `field.DateRangeField`. The field's value is a pair of inclusive ISO plain
+* dates, or `null`.
+*
+* @example
+* <form.AppField name="period">
+* 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+* </form.AppField>
+*/
+var TSFDateRangeField = (props) => {
+	const $ = c(12);
+	const { field, props: t0 } = useConnectedField();
+	let connected;
+	let name;
+	if ($[0] !== t0) {
+		({name, ...connected} = t0);
+		$[0] = t0;
+		$[1] = connected;
+		$[2] = name;
+	} else {
+		connected = $[1];
+		name = $[2];
+	}
+	const t1 = `${name}.start`;
+	const t2 = `${name}.end`;
+	let t3;
+	if ($[3] !== field) {
+		t3 = (next) => field.handleChange(next);
+		$[3] = field;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== connected || $[6] !== field.state.value || $[7] !== props || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(DateRangeField, {
+			...props,
+			...connected,
+			startName: t1,
+			endName: t2,
+			value: field.state.value,
+			onValueChange: t3
+		});
+		$[5] = connected;
+		$[6] = field.state.value;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+export { TSFDateRangeField };

package/dist/components/detail-list/detail-list.css

@@ -0,0 +1,32 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._list_16bh4_3 {
+    display: grid;
+    gap: var(--detail-list-gap, var(--sys-unit-4));
+  }
+  ._iconRow_16bh4_7, ._row_16bh4_7 {
+    display: grid;
+    align-items: center;
+    gap: var(--detail-list-column-gap, var(--sys-unit-4));
+    overflow-wrap: anywhere;
+  }
+  ._row_16bh4_7 {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+  ._row_16bh4_7:has(> ._action_16bh4_16) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+  }
+  ._iconRow_16bh4_7 {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+  }
+  ._iconRow_16bh4_7:has(> ._action_16bh4_16) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  ._term_16bh4_26 {
+    color: var(--detail-list-term-fg, var(--sys-color-text-muted));
+  }
+  ._action_16bh4_16 {
+    justify-self: end;
+  }
+}

package/dist/components/detail-list/detail-list.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { type SvgComponent } from "../icon/icon.tsx";
+type PartProps = Readonly<{
+    className?: string;
+    children?: ReactNode;
+}>;
+type RowAction = Readonly<{
+    /** A control at the row's end, whose label names the term it acts on. */
+    action?: ReactNode;
+}>;
+export type DetailListRootProps = PartProps;
+export type DetailListRowProps = PartProps & RowAction & Readonly<{
+    /** What the detail is, such as "Phone number". */
+    term: ReactNode;
+}>;
+export type DetailListIconRowProps = PartProps & RowAction & Readonly<{
+    /** The pictogram that stands for the term. */
+    svg: SvgComponent;
+    /** The term the pictogram stands for, as its accessible name. */
+    label: string;
+}>;
+declare const Root: ({ className, children, }: DetailListRootProps) => ReactNode;
+declare const Row: ({ term, action, className, children, }: DetailListRowProps) => ReactNode;
+declare const IconRow: ({ svg, label, action, className, children, }: DetailListIconRowProps) => ReactNode;
+type DetailListNamespace = Readonly<{
+    Root: typeof Root;
+    Row: typeof Row;
+    IconRow: typeof IconRow;
+}>;
+/**
+ * Stored information, as the terms that name it and the details that answer
+ * them, in a description list. `IconRow` is a row whose term is a pictogram.
+ * A row's `action` sits at its end, and its control names the term it acts on.
+ *
+ * @example
+ * <DetailList.Root>
+ * 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+ * </DetailList.Root>
+ */
+export declare const DetailList: DetailListNamespace;
+export {};
+//# sourceMappingURL=detail-list.d.ts.map

package/dist/components/detail-list/detail-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-list.d.ts","sourceRoot":"","sources":["../../../src/components/detail-list/detail-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG3D,KAAK,SAAS,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAEH,KAAK,SAAS,GAAG,QAAQ,CAAC;IACzB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GACzC,SAAS,GACT,QAAQ,CAAC;IACR,kDAAkD;IAClD,IAAI,EAAE,SAAS,CAAC;CAChB,CAAC,CAAC;AAEJ,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAC7C,SAAS,GACT,QAAQ,CAAC;IACR,8CAA8C;IAC9C,GAAG,EAAE,YAAY,CAAC;IAClB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEJ,QAAA,MAAM,IAAI,6BAGP,mBAAmB,KAAG,SAIxB,CAAC;AAOF,QAAA,MAAM,GAAG,2CAKN,kBAAkB,KAAG,SAMvB,CAAC;AAEF,QAAA,MAAM,OAAO,iDAMV,sBAAsB,KAAG,SAQ3B,CAAC;AAEF,KAAK,mBAAmB,GAAG,QAAQ,CAAC;IACnC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,OAAO,EAAE,OAAO,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,EAAE,mBAIxB,CAAC"}