@igne-agency/react-web-ui 0.3.0 → 0.4.0

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

@@ -3,8 +3,8 @@ 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 { Fragment, jsx, jsxs } from "react/jsx-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
@@ -12,7 +12,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 *
 * @example
 * <DateField
-* 	label="Treatment date"
+* 	label="Service date"
 * 	optionalLabel="optional"
 * 	openCalendarLabel="Open calendar"
 * 	previousMonthLabel="Previous month"
@@ -20,13 +20,17 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * 	monthLabel="Month"
 * 	yearLabel="Year"
 * 	noMatchingYearLabel="No matching year."
+* 	openCalendarIcon={<CalendarTodayIcon />}
+* 	previousIcon={<ChevronLeftIcon />}
+* 	nextIcon={<ChevronRightIcon />}
+* 	checkIcon={<CheckIcon />}
 * 	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 $ = c(49);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, openCalendarIcon, previousIcon, nextIcon, checkIcon, expandIcon, value, defaultValue, onValueChange, onBlur, minValue, maxValue, name, disabled, readOnly, className } = t0;
 	const triggerRef = useRef(null);
 	const timeZone = useTimeZone();
 	let t1;
@@ -64,7 +68,7 @@ var DateField = (t0) => {
 	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) {
+	if ($[12] !== checkIcon || $[13] !== day || $[14] !== defaultValue || $[15] !== expandIcon || $[16] !== field.disabled || $[17] !== field.invalid || $[18] !== fieldState || $[19] !== maxValue || $[20] !== minValue || $[21] !== monthLabel || $[22] !== name || $[23] !== nextIcon || $[24] !== nextMonthLabel || $[25] !== noMatchingYearLabel || $[26] !== onBlur || $[27] !== onValueChange || $[28] !== openCalendarIcon || $[29] !== openCalendarLabel || $[30] !== phase || $[31] !== previousIcon || $[32] !== previousMonthLabel || $[33] !== readOnly || $[34] !== requiredness || $[35] !== timeZone || $[36] !== value || $[37] !== yearLabel) {
 		t4 = (t5) => {
 			const { labelId, describedBy, controlId } = t5;
 			return /* @__PURE__ */ jsx(DateInput.Root, {
@@ -84,7 +88,7 @@ var DateField = (t0) => {
 				isInvalid: field.invalid,
 				children: (t6) => {
 					const { isFocusWithin } = t6;
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DateInput.Group, {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DateInput.Group, {
 						state: {
 							...fieldState,
 							focused: isFocusWithin
@@ -94,7 +98,8 @@ var DateField = (t0) => {
 							phase !== "fresh" && /* @__PURE__ */ jsx(DateInput.Pending, {}),
 							/* @__PURE__ */ jsx(DateInput.Trigger, {
 								label: openCalendarLabel,
-								ref: triggerRef
+								ref: triggerRef,
+								children: openCalendarIcon
 							})
 						]
 					}), /* @__PURE__ */ jsx(DateInput.Popup, {
@@ -104,37 +109,46 @@ var DateField = (t0) => {
 							nextMonthLabel,
 							monthLabel,
 							yearLabel,
-							noMatchingYearLabel
+							noMatchingYearLabel,
+							previousIcon,
+							nextIcon,
+							checkIcon,
+							expandIcon
 						})
 					})] });
 				}
 			});
 		};
-		$[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];
+		$[12] = checkIcon;
+		$[13] = day;
+		$[14] = defaultValue;
+		$[15] = expandIcon;
+		$[16] = field.disabled;
+		$[17] = field.invalid;
+		$[18] = fieldState;
+		$[19] = maxValue;
+		$[20] = minValue;
+		$[21] = monthLabel;
+		$[22] = name;
+		$[23] = nextIcon;
+		$[24] = nextMonthLabel;
+		$[25] = noMatchingYearLabel;
+		$[26] = onBlur;
+		$[27] = onValueChange;
+		$[28] = openCalendarIcon;
+		$[29] = openCalendarLabel;
+		$[30] = phase;
+		$[31] = previousIcon;
+		$[32] = previousMonthLabel;
+		$[33] = readOnly;
+		$[34] = requiredness;
+		$[35] = timeZone;
+		$[36] = value;
+		$[37] = yearLabel;
+		$[38] = t4;
+	} else t4 = $[38];
 	let t5;
-	if ($[34] !== className || $[35] !== description || $[36] !== dirty || $[37] !== errors || $[38] !== label || $[39] !== optionalLabel || $[40] !== requiredness || $[41] !== t4 || $[42] !== touched) {
+	if ($[39] !== className || $[40] !== description || $[41] !== dirty || $[42] !== errors || $[43] !== label || $[44] !== optionalLabel || $[45] !== requiredness || $[46] !== t4 || $[47] !== touched) {
 		t5 = /* @__PURE__ */ jsx(DateInput.Frame, {
 			label,
 			description,
@@ -146,17 +160,17 @@ var DateField = (t0) => {
 			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];
+		$[39] = className;
+		$[40] = description;
+		$[41] = dirty;
+		$[42] = errors;
+		$[43] = label;
+		$[44] = optionalLabel;
+		$[45] = requiredness;
+		$[46] = t4;
+		$[47] = touched;
+		$[48] = t5;
+	} else t5 = $[48];
 	return t5;
 };
 export { DateField };

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

@@ -4,13 +4,28 @@ import { type DatePickerProps as AriaDatePickerProps } from "react-aria-componen
 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;
+/**
+ * A react-aria `DatePicker` holding the value, with today as the placeholder
+ * in the `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <DateInput.Root aria-labelledby={labelId}>…</DateInput.Root>
+ */
 declare const DateInputRoot: ({ state, ...props }: DateInputRootProps) => ReactNode;
 export type DateInputTriggerProps = Readonly<{
     /** Accessible name, such as "Open calendar". */
     label: string;
     ref?: Ref<HTMLButtonElement>;
+    /** The icon the button shows. */
+    children: ReactNode;
 }>;
-declare const DateInputTrigger: ({ label, ref, }: DateInputTriggerProps) => ReactNode;
+/**
+ * The icon-only button that opens the calendar.
+ *
+ * @example
+ * <DateInput.Trigger label="Open calendar"><CalendarTodayIcon /></DateInput.Trigger>
+ */
+declare const DateInputTrigger: ({ label, ref, children, }: DateInputTriggerProps) => ReactNode;
 /** The parts of a date input. */
 export type DateInputParts = Readonly<{
     Frame: typeof TemporalFrame;
@@ -33,10 +48,12 @@ export type DateInputParts = Readonly<{
  * 		<>
  * 			<DateInput.Group state={{ focused: isFocusWithin }}>
  * 				<DateInput.Input />
- * 				<DateInput.Trigger label="Open calendar" />
+ * 				<DateInput.Trigger label="Open calendar">
+ * 					<CalendarTodayIcon />
+ * 				</DateInput.Trigger>
  * 			</DateInput.Group>
  * 			<DateInput.Popup>
- * 				<DateInput.Calendar {...calendarLabels} />
+ * 				<DateInput.Calendar {...calendarLabels} {...calendarIcons} />
  * 			</DateInput.Popup>
  * 		</>
  * 	)}

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

@@ -1,14 +1,20 @@
-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 { useId } from "react";
 import { DatePicker } from "react-aria-components";
 // src/components/date-field/date-input.tsx
+/**
+* A react-aria `DatePicker` holding the value, with today as the placeholder
+* in the `TimeZoneProvider`'s zone.
+*
+* @example
+* <DateInput.Root aria-labelledby={labelId}>…</DateInput.Root>
+*/
 var DateInputRoot = (t0) => {
 	const $ = c(14);
 	let props;
@@ -60,20 +66,27 @@ var DateInputRoot = (t0) => {
 	} else t6 = $[13];
 	return t6;
 };
+/**
+* The icon-only button that opens the calendar.
+*
+* @example
+* <DateInput.Trigger label="Open calendar"><CalendarTodayIcon /></DateInput.Trigger>
+*/
 var DateInputTrigger = (t0) => {
-	const $ = c(3);
-	const { label, ref } = t0;
+	const $ = c(4);
+	const { label, ref, children } = t0;
 	let t1;
-	if ($[0] !== label || $[1] !== ref) {
+	if ($[0] !== children || $[1] !== label || $[2] !== ref) {
 		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
-			icon: SvgCalendarToday,
 			label,
-			ref
+			ref,
+			children
 		});
-		$[0] = label;
-		$[1] = ref;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[0] = children;
+		$[1] = label;
+		$[2] = ref;
+		$[3] = t1;
+	} else t1 = $[3];
 	return t1;
 };
 /**
@@ -87,10 +100,12 @@ var DateInputTrigger = (t0) => {
 * 		<>
 * 			<DateInput.Group state={{ focused: isFocusWithin }}>
 * 				<DateInput.Input />
-* 				<DateInput.Trigger label="Open calendar" />
+* 				<DateInput.Trigger label="Open calendar">
+* 					<CalendarTodayIcon />
+* 				</DateInput.Trigger>
 * 			</DateInput.Group>
 * 			<DateInput.Popup>
-* 				<DateInput.Calendar {...calendarLabels} />
+* 				<DateInput.Calendar {...calendarLabels} {...calendarIcons} />
 * 			</DateInput.Popup>
 * 		</>
 * 	)}

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

@@ -1,4 +1,4 @@
-export type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+export type { CalendarIcons, 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/tsf-date-field.d.ts

@@ -8,7 +8,7 @@ export type TSFDateFieldProps = Omit<DateFieldProps, keyof ConnectedFieldProps |
  *
  * @example
  * <form.AppField name="treatedOn">
- * 	{field => <field.DateField label="Treatment date" optionalLabel="optional" {...calendarLabels} />}
+ * 	{field => <field.DateField label="Service date" optionalLabel="optional" openCalendarIcon={<CalendarTodayIcon />} {...calendarLabels} {...calendarIcons} />}
  * </form.AppField>
  */
 export declare const TSFDateField: (props: TSFDateFieldProps) => ReactNode;

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

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <form.AppField name="treatedOn">
-* 	{field => <field.DateField label="Treatment date" optionalLabel="optional" {...calendarLabels} />}
+* 	{field => <field.DateField label="Service date" optionalLabel="optional" openCalendarIcon={<CalendarTodayIcon />} {...calendarLabels} {...calendarIcons} />}
 * </form.AppField>
 */
 var TSFDateField = (props) => {

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

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
-import type { CalendarLabels } from "../../lib/calendar/temporal.tsx";
+import type { CalendarIcons, 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<{
+export type DateRangeFieldProps = FieldProps & CalendarLabels & CalendarIcons & Readonly<{
     /** Accessible name of the button that opens the calendar, such as "Open calendar". */
     openCalendarLabel: string;
+    /** The icon of the button that opens the calendar. */
+    openCalendarIcon: ReactNode;
     /**
      * 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
@@ -41,13 +43,15 @@ export type DateRangeFieldProps = FieldProps & CalendarLabels & Readonly<{
  *
  * @example
  * <DateRangeField
- * 	label="Declaration period"
+ * 	label="Invoice period"
  * 	optionalLabel="optional"
  * 	openCalendarLabel="Open calendar"
+ * 	openCalendarIcon={<DateRangeIcon />}
  * 	{...calendarLabels}
+ * 	{...calendarIcons}
  * 	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;
+export declare const DateRangeField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, openCalendarIcon, previousIcon, nextIcon, checkIcon, expandIcon, value, defaultValue, onValueChange, onBlur, minValue, maxValue, visibleMonths, startName, endName, disabled, readOnly, className, }: DateRangeFieldProps) => ReactNode;

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

@@ -3,8 +3,8 @@ import { useFieldState } from "../field/use-field-state.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 { Fragment, jsx, jsxs } from "react/jsx-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
@@ -13,18 +13,20 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 *
 * @example
 * <DateRangeField
-* 	label="Declaration period"
+* 	label="Invoice period"
 * 	optionalLabel="optional"
 * 	openCalendarLabel="Open calendar"
+* 	openCalendarIcon={<DateRangeIcon />}
 * 	{...calendarLabels}
+* 	{...calendarIcons}
 * 	visibleMonths={narrow ? 1 : 2}
 * 	value={period}
 * 	onValueChange={setPeriod}
 * />
 */
 var DateRangeField = (t0) => {
-	const $ = c(46);
-	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 $ = c(51);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, openCalendarLabel, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, openCalendarIcon, previousIcon, nextIcon, checkIcon, expandIcon, value, defaultValue, onValueChange, onBlur, minValue, maxValue, visibleMonths, startName, endName, disabled, readOnly, className } = t0;
 	const triggerRef = useRef(null);
 	const timeZone = useTimeZone();
 	let t1;
@@ -62,7 +64,7 @@ var DateRangeField = (t0) => {
 	const { phase } = field;
 	const fieldState = field.state;
 	let t4;
-	if ($[12] !== defaultValue || $[13] !== endName || $[14] !== field.disabled || $[15] !== field.invalid || $[16] !== fieldState || $[17] !== maxValue || $[18] !== minValue || $[19] !== monthLabel || $[20] !== nextMonthLabel || $[21] !== noMatchingYearLabel || $[22] !== onBlur || $[23] !== onValueChange || $[24] !== openCalendarLabel || $[25] !== phase || $[26] !== previousMonthLabel || $[27] !== range || $[28] !== readOnly || $[29] !== requiredness || $[30] !== startName || $[31] !== timeZone || $[32] !== value || $[33] !== visibleMonths || $[34] !== yearLabel) {
+	if ($[12] !== checkIcon || $[13] !== defaultValue || $[14] !== endName || $[15] !== expandIcon || $[16] !== field.disabled || $[17] !== field.invalid || $[18] !== fieldState || $[19] !== maxValue || $[20] !== minValue || $[21] !== monthLabel || $[22] !== nextIcon || $[23] !== nextMonthLabel || $[24] !== noMatchingYearLabel || $[25] !== onBlur || $[26] !== onValueChange || $[27] !== openCalendarIcon || $[28] !== openCalendarLabel || $[29] !== phase || $[30] !== previousIcon || $[31] !== previousMonthLabel || $[32] !== range || $[33] !== readOnly || $[34] !== requiredness || $[35] !== startName || $[36] !== timeZone || $[37] !== value || $[38] !== visibleMonths || $[39] !== yearLabel) {
 		t4 = (t5) => {
 			const { labelId, describedBy, controlId } = t5;
 			return /* @__PURE__ */ jsx(DateRangeInput.Root, {
@@ -83,7 +85,7 @@ var DateRangeField = (t0) => {
 				isInvalid: field.invalid,
 				children: (t6) => {
 					const { isFocusWithin } = t6;
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DateRangeInput.Group, {
 						state: {
 							...fieldState,
 							focused: isFocusWithin
@@ -96,7 +98,8 @@ var DateRangeField = (t0) => {
 							phase !== "fresh" && /* @__PURE__ */ jsx(DateRangeInput.Pending, {}),
 							/* @__PURE__ */ jsx(DateRangeInput.Trigger, {
 								label: openCalendarLabel,
-								ref: triggerRef
+								ref: triggerRef,
+								children: openCalendarIcon
 							})
 						]
 					}), /* @__PURE__ */ jsx(DateRangeInput.Popup, {
@@ -107,39 +110,48 @@ var DateRangeField = (t0) => {
 							nextMonthLabel,
 							monthLabel,
 							yearLabel,
-							noMatchingYearLabel
+							noMatchingYearLabel,
+							previousIcon,
+							nextIcon,
+							checkIcon,
+							expandIcon
 						})
 					})] });
 				}
 			});
 		};
-		$[12] = defaultValue;
-		$[13] = endName;
-		$[14] = field.disabled;
-		$[15] = field.invalid;
-		$[16] = fieldState;
-		$[17] = maxValue;
-		$[18] = minValue;
-		$[19] = monthLabel;
-		$[20] = nextMonthLabel;
-		$[21] = noMatchingYearLabel;
-		$[22] = onBlur;
-		$[23] = onValueChange;
-		$[24] = openCalendarLabel;
-		$[25] = phase;
-		$[26] = previousMonthLabel;
-		$[27] = range;
-		$[28] = readOnly;
-		$[29] = requiredness;
-		$[30] = startName;
-		$[31] = timeZone;
-		$[32] = value;
-		$[33] = visibleMonths;
-		$[34] = yearLabel;
-		$[35] = t4;
-	} else t4 = $[35];
+		$[12] = checkIcon;
+		$[13] = defaultValue;
+		$[14] = endName;
+		$[15] = expandIcon;
+		$[16] = field.disabled;
+		$[17] = field.invalid;
+		$[18] = fieldState;
+		$[19] = maxValue;
+		$[20] = minValue;
+		$[21] = monthLabel;
+		$[22] = nextIcon;
+		$[23] = nextMonthLabel;
+		$[24] = noMatchingYearLabel;
+		$[25] = onBlur;
+		$[26] = onValueChange;
+		$[27] = openCalendarIcon;
+		$[28] = openCalendarLabel;
+		$[29] = phase;
+		$[30] = previousIcon;
+		$[31] = previousMonthLabel;
+		$[32] = range;
+		$[33] = readOnly;
+		$[34] = requiredness;
+		$[35] = startName;
+		$[36] = timeZone;
+		$[37] = value;
+		$[38] = visibleMonths;
+		$[39] = yearLabel;
+		$[40] = t4;
+	} else t4 = $[40];
 	let t5;
-	if ($[36] !== className || $[37] !== description || $[38] !== dirty || $[39] !== errors || $[40] !== label || $[41] !== optionalLabel || $[42] !== requiredness || $[43] !== t4 || $[44] !== touched) {
+	if ($[41] !== className || $[42] !== description || $[43] !== dirty || $[44] !== errors || $[45] !== label || $[46] !== optionalLabel || $[47] !== requiredness || $[48] !== t4 || $[49] !== touched) {
 		t5 = /* @__PURE__ */ jsx(DateRangeInput.Frame, {
 			label,
 			description,
@@ -151,17 +163,17 @@ var DateRangeField = (t0) => {
 			className,
 			children: t4
 		});
-		$[36] = className;
-		$[37] = description;
-		$[38] = dirty;
-		$[39] = errors;
-		$[40] = label;
-		$[41] = optionalLabel;
-		$[42] = requiredness;
-		$[43] = t4;
-		$[44] = touched;
-		$[45] = t5;
-	} else t5 = $[45];
+		$[41] = className;
+		$[42] = description;
+		$[43] = dirty;
+		$[44] = errors;
+		$[45] = label;
+		$[46] = optionalLabel;
+		$[47] = requiredness;
+		$[48] = t4;
+		$[49] = touched;
+		$[50] = t5;
+	} else t5 = $[50];
 	return t5;
 };
 export { DateRangeField };

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

@@ -4,13 +4,28 @@ import { type DateRangePickerProps as AriaDateRangePickerProps } from "react-ari
 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;
+/**
+ * A react-aria `DateRangePicker` holding the value, with today as the
+ * placeholder in the `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <DateRangeInput.Root aria-labelledby={labelId}>…</DateRangeInput.Root>
+ */
 declare const DateRangeInputRoot: ({ state, ...props }: DateRangeInputRootProps) => ReactNode;
 export type DateRangeInputTriggerProps = Readonly<{
     /** Accessible name, such as "Open calendar". */
     label: string;
     ref?: Ref<HTMLButtonElement>;
+    /** The icon the button shows. */
+    children: ReactNode;
 }>;
-declare const DateRangeInputTrigger: ({ label, ref, }: DateRangeInputTriggerProps) => ReactNode;
+/**
+ * The icon-only button that opens the range calendar.
+ *
+ * @example
+ * <DateRangeInput.Trigger label="Open calendar"><DateRangeIcon /></DateRangeInput.Trigger>
+ */
+declare const DateRangeInputTrigger: ({ label, ref, children, }: DateRangeInputTriggerProps) => ReactNode;
 /** The parts of a date range input. */
 export type DateRangeInputParts = Readonly<{
     Frame: typeof TemporalFrame;
@@ -38,10 +53,12 @@ export type DateRangeInputParts = Readonly<{
  * 				<DateRangeInput.Separator />
  * 				<DateRangeInput.Input slot="end" />
  * 				<DateRangeInput.Spacer />
- * 				<DateRangeInput.Trigger label="Open calendar" />
+ * 				<DateRangeInput.Trigger label="Open calendar">
+ * 					<DateRangeIcon />
+ * 				</DateRangeInput.Trigger>
  * 			</DateRangeInput.Group>
  * 			<DateRangeInput.Popup>
- * 				<DateRangeInput.Calendar {...calendarLabels} />
+ * 				<DateRangeInput.Calendar {...calendarLabels} {...calendarIcons} />
  * 			</DateRangeInput.Popup>
  * 		</>
  * 	)}

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

@@ -1,4 +1,3 @@
-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";
@@ -8,6 +7,13 @@ 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
+/**
+* A react-aria `DateRangePicker` holding the value, with today as the
+* placeholder in the `TimeZoneProvider`'s zone.
+*
+* @example
+* <DateRangeInput.Root aria-labelledby={labelId}>…</DateRangeInput.Root>
+*/
 var DateRangeInputRoot = (t0) => {
 	const $ = c(13);
 	let props;
@@ -55,20 +61,27 @@ var DateRangeInputRoot = (t0) => {
 	} else t5 = $[12];
 	return t5;
 };
+/**
+* The icon-only button that opens the range calendar.
+*
+* @example
+* <DateRangeInput.Trigger label="Open calendar"><DateRangeIcon /></DateRangeInput.Trigger>
+*/
 var DateRangeInputTrigger = (t0) => {
-	const $ = c(3);
-	const { label, ref } = t0;
+	const $ = c(4);
+	const { label, ref, children } = t0;
 	let t1;
-	if ($[0] !== label || $[1] !== ref) {
+	if ($[0] !== children || $[1] !== label || $[2] !== ref) {
 		t1 = /* @__PURE__ */ jsx(TemporalTrigger, {
-			icon: SvgDateRange,
 			label,
-			ref
+			ref,
+			children
 		});
-		$[0] = label;
-		$[1] = ref;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[0] = children;
+		$[1] = label;
+		$[2] = ref;
+		$[3] = t1;
+	} else t1 = $[3];
 	return t1;
 };
 /**
@@ -85,10 +98,12 @@ var DateRangeInputTrigger = (t0) => {
 * 				<DateRangeInput.Separator />
 * 				<DateRangeInput.Input slot="end" />
 * 				<DateRangeInput.Spacer />
-* 				<DateRangeInput.Trigger label="Open calendar" />
+* 				<DateRangeInput.Trigger label="Open calendar">
+* 					<DateRangeIcon />
+* 				</DateRangeInput.Trigger>
 * 			</DateRangeInput.Group>
 * 			<DateRangeInput.Popup>
-* 				<DateRangeInput.Calendar {...calendarLabels} />
+* 				<DateRangeInput.Calendar {...calendarLabels} {...calendarIcons} />
 * 			</DateRangeInput.Popup>
 * 		</>
 * 	)}

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

@@ -9,7 +9,7 @@ export type TSFDateRangeFieldProps = Omit<DateRangeFieldProps, keyof ConnectedFi
  *
  * @example
  * <form.AppField name="period">
- * 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+ * 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" openCalendarIcon={<DateRangeIcon />} {...calendarLabels} {...calendarIcons} />}
  * </form.AppField>
  */
 export declare const TSFDateRangeField: (props: TSFDateRangeFieldProps) => ReactNode;

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

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <form.AppField name="period">
-* 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" {...calendarLabels} />}
+* 	{field => <field.DateRangeField label="Period" optionalLabel="optional" openCalendarLabel="Open calendar" openCalendarIcon={<DateRangeIcon />} {...calendarLabels} {...calendarIcons} />}
 * </form.AppField>
 */
 var TSFDateRangeField = (props) => {