@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,310 @@
+import { messagesFor } from "../../i18n/index.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { Calendar } from "../calendar/index.js";
+import { PickerPopup, PickerTrigger } from "../../picker/index.js";
+import { SegmentedField } from "../../segments/field.js";
+import { c } from "react/compiler-runtime";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createCalendar } from "@internationalized/date";
+import { useDateFieldState } from "react-stately/useDateFieldState";
+import { useDatePickerState } from "react-stately/useDatePickerState";
+//#region src/components/date-picker/index.tsx
+/**
+* A date typed into a field, or picked from a calendar behind a button. The
+* value is an `@internationalized/date` value, as on web: pass `value` with
+* `onChange` to control it, or `defaultValue` to let it keep its own.
+*
+* ```tsx
+* import { CalendarDate } from '@internationalized/date'
+*
+* <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+* ```
+*
+* The segments are DateField's and the calendar is Calendar, so
+* `granularity`, `minValue`, `maxValue` and `isDateUnavailable` behave as
+* they do there. From the medium window size up the calendar is docked to
+* the field; below it, it opens centred over a scrim, which is the page's
+* modal picker.
+*
+* `style`, `ref` and `testID` land on the picker as a whole.
+*/
+function DatePicker(t0) {
+	const $ = c(97);
+	let defaultOpen;
+	let defaultValue;
+	let firstDayOfWeek;
+	let isDateUnavailable;
+	let isOpen;
+	let label;
+	let locale;
+	let maxValue;
+	let minValue;
+	let onChange;
+	let onOpenChange;
+	let placeholderValue;
+	let props;
+	let shouldCloseOnSelect;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let triggerLabel;
+	let validate;
+	let value;
+	let visibleDuration;
+	if ($[0] !== t0) {
+		({defaultOpen, defaultValue, firstDayOfWeek, isDateUnavailable, isDisabled: t1, isOpen, isReadOnly: t2, isRequired: t3, label, locale, maxValue, minValue, onChange, onOpenChange, placeholderValue, shouldCloseOnSelect, showMonthYearMenus: t4, triggerLabel, validate, value, visibleDuration, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultOpen;
+		$[2] = defaultValue;
+		$[3] = firstDayOfWeek;
+		$[4] = isDateUnavailable;
+		$[5] = isOpen;
+		$[6] = label;
+		$[7] = locale;
+		$[8] = maxValue;
+		$[9] = minValue;
+		$[10] = onChange;
+		$[11] = onOpenChange;
+		$[12] = placeholderValue;
+		$[13] = props;
+		$[14] = shouldCloseOnSelect;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = triggerLabel;
+		$[20] = validate;
+		$[21] = value;
+		$[22] = visibleDuration;
+	} else {
+		defaultOpen = $[1];
+		defaultValue = $[2];
+		firstDayOfWeek = $[3];
+		isDateUnavailable = $[4];
+		isOpen = $[5];
+		label = $[6];
+		locale = $[7];
+		maxValue = $[8];
+		minValue = $[9];
+		onChange = $[10];
+		onOpenChange = $[11];
+		placeholderValue = $[12];
+		props = $[13];
+		shouldCloseOnSelect = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		t3 = $[17];
+		t4 = $[18];
+		triggerLabel = $[19];
+		validate = $[20];
+		value = $[21];
+		visibleDuration = $[22];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isReadOnly = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const showMonthYearMenus = t4 === void 0 ? false : t4;
+	const writtenIn = useLocaleOf(locale);
+	const box = useRef(null);
+	const [trigger, setTrigger] = useState(null);
+	let t5;
+	if ($[23] !== defaultOpen || $[24] !== defaultValue || $[25] !== isDateUnavailable || $[26] !== isDisabled || $[27] !== isOpen || $[28] !== isReadOnly || $[29] !== isRequired || $[30] !== maxValue || $[31] !== minValue || $[32] !== onChange || $[33] !== onOpenChange || $[34] !== placeholderValue || $[35] !== props.granularity || $[36] !== shouldCloseOnSelect || $[37] !== validate || $[38] !== value) {
+		t5 = {
+			defaultOpen,
+			defaultValue,
+			granularity: props.granularity,
+			isDateUnavailable,
+			isDisabled,
+			isOpen,
+			isReadOnly,
+			isRequired,
+			maxValue,
+			minValue,
+			onChange,
+			onOpenChange,
+			placeholderValue,
+			shouldCloseOnSelect,
+			validate,
+			value
+		};
+		$[23] = defaultOpen;
+		$[24] = defaultValue;
+		$[25] = isDateUnavailable;
+		$[26] = isDisabled;
+		$[27] = isOpen;
+		$[28] = isReadOnly;
+		$[29] = isRequired;
+		$[30] = maxValue;
+		$[31] = minValue;
+		$[32] = onChange;
+		$[33] = onOpenChange;
+		$[34] = placeholderValue;
+		$[35] = props.granularity;
+		$[36] = shouldCloseOnSelect;
+		$[37] = validate;
+		$[38] = value;
+		$[39] = t5;
+	} else t5 = $[39];
+	const state = useDatePickerState(t5);
+	const { close, open, setDateValue, setValue } = state;
+	const t6 = validate;
+	let t7;
+	if ($[40] !== isDateUnavailable || $[41] !== isDisabled || $[42] !== isReadOnly || $[43] !== isRequired || $[44] !== maxValue || $[45] !== minValue || $[46] !== placeholderValue || $[47] !== props || $[48] !== setValue || $[49] !== state.value || $[50] !== t6 || $[51] !== writtenIn) {
+		t7 = {
+			...props,
+			createCalendar,
+			isDateUnavailable,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn,
+			maxValue,
+			minValue,
+			onChange: setValue,
+			placeholderValue,
+			validate: t6,
+			value: state.value
+		};
+		$[40] = isDateUnavailable;
+		$[41] = isDisabled;
+		$[42] = isReadOnly;
+		$[43] = isRequired;
+		$[44] = maxValue;
+		$[45] = minValue;
+		$[46] = placeholderValue;
+		$[47] = props;
+		$[48] = setValue;
+		$[49] = state.value;
+		$[50] = t6;
+		$[51] = writtenIn;
+		$[52] = t7;
+	} else t7 = $[52];
+	const field = useDateFieldState(t7);
+	let t8;
+	if ($[53] !== triggerLabel || $[54] !== writtenIn) {
+		t8 = triggerLabel ?? messagesFor(writtenIn).segments.calendar;
+		$[53] = triggerLabel;
+		$[54] = writtenIn;
+		$[55] = t8;
+	} else t8 = $[55];
+	const name = `${t8} ${label}`;
+	const t9 = field.realtimeValidation.validationErrors;
+	const t10 = field.value === null;
+	let t11;
+	if ($[56] !== state.value) {
+		t11 = state.value?.toString() ?? "";
+		$[56] = state.value;
+		$[57] = t11;
+	} else t11 = $[57];
+	const t12 = isDisabled || isReadOnly;
+	let t13;
+	if ($[58] !== name || $[59] !== open || $[60] !== state.isOpen || $[61] !== t12) {
+		t13 = triggerOf({
+			isDisabled: t12,
+			isOpen: state.isOpen,
+			label: name,
+			onPress: open,
+			ref: setTrigger
+		});
+		$[58] = name;
+		$[59] = open;
+		$[60] = state.isOpen;
+		$[61] = t12;
+		$[62] = t13;
+	} else t13 = $[62];
+	let t14;
+	if ($[63] !== field || $[64] !== isDisabled || $[65] !== isReadOnly || $[66] !== isRequired || $[67] !== label || $[68] !== props || $[69] !== t10 || $[70] !== t11 || $[71] !== t13 || $[72] !== writtenIn) {
+		t14 = /* @__PURE__ */ jsx(SegmentedField, {
+			...props,
+			box,
+			errors: t9,
+			isDisabled,
+			isEmpty: t10,
+			isReadOnly,
+			isRequired,
+			label,
+			locale: writtenIn,
+			state: field,
+			submitted: t11,
+			trailingIcon: t13
+		});
+		$[63] = field;
+		$[64] = isDisabled;
+		$[65] = isReadOnly;
+		$[66] = isRequired;
+		$[67] = label;
+		$[68] = props;
+		$[69] = t10;
+		$[70] = t11;
+		$[71] = t13;
+		$[72] = writtenIn;
+		$[73] = t14;
+	} else t14 = $[73];
+	const t15 = state.dateValue === null ? placeholderValue : void 0;
+	let t16;
+	if ($[74] !== firstDayOfWeek || $[75] !== isDateUnavailable || $[76] !== isDisabled || $[77] !== isReadOnly || $[78] !== label || $[79] !== maxValue || $[80] !== minValue || $[81] !== setDateValue || $[82] !== showMonthYearMenus || $[83] !== state.dateValue || $[84] !== t15 || $[85] !== visibleDuration || $[86] !== writtenIn) {
+		t16 = /* @__PURE__ */ jsx(Calendar, {
+			"aria-label": label,
+			defaultFocusedValue: t15,
+			firstDayOfWeek,
+			isDateUnavailable,
+			isDisabled,
+			isReadOnly,
+			locale: writtenIn,
+			maxValue,
+			minValue,
+			onChange: setDateValue,
+			showMonthYearMenus,
+			value: state.dateValue,
+			visibleDuration
+		});
+		$[74] = firstDayOfWeek;
+		$[75] = isDateUnavailable;
+		$[76] = isDisabled;
+		$[77] = isReadOnly;
+		$[78] = label;
+		$[79] = maxValue;
+		$[80] = minValue;
+		$[81] = setDateValue;
+		$[82] = showMonthYearMenus;
+		$[83] = state.dateValue;
+		$[84] = t15;
+		$[85] = visibleDuration;
+		$[86] = writtenIn;
+		$[87] = t16;
+	} else t16 = $[87];
+	let t17;
+	if ($[88] !== close || $[89] !== name || $[90] !== state.isOpen || $[91] !== t16 || $[92] !== trigger) {
+		t17 = /* @__PURE__ */ jsx(PickerPopup, {
+			anchor: box,
+			close,
+			isOpen: state.isOpen,
+			label: name,
+			trigger,
+			children: t16
+		});
+		$[88] = close;
+		$[89] = name;
+		$[90] = state.isOpen;
+		$[91] = t16;
+		$[92] = trigger;
+		$[93] = t17;
+	} else t17 = $[93];
+	let t18;
+	if ($[94] !== t14 || $[95] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t14, t17] });
+		$[94] = t14;
+		$[95] = t17;
+		$[96] = t18;
+	} else t18 = $[96];
+	return t18;
+}
+function triggerOf(props) {
+	return /* @__PURE__ */ jsx(PickerTrigger, { ...props });
+}
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=index.js.map

package/dist/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DateDuration","ComponentRef","ReactNode","Ref","HostInstance","StyleProp","View","ViewStyle","DateValue","DatePickerStateOptions","StatelyDatePickerProps","createCalendar","useRef","useState","useDateFieldState","useDatePickerState","FieldVariant","messagesFor","useLocaleOf","PickerPopup","PickerTrigger","SegmentedField","Calendar","DatePickerProps","Pick","T","description","error","floatingLabel","isDisabled","isReadOnly","isRequired","label","leadingIcon","locale","name","onBlur","onFocus","ref","showMonthYearMenus","style","testID","triggerLabel","variant","visibleDuration","DatePicker","t0","$","_c","defaultOpen","defaultValue","firstDayOfWeek","isDateUnavailable","isOpen","maxValue","minValue","onChange","onOpenChange","placeholderValue","props","shouldCloseOnSelect","t1","t2","t3","t4","validate","value","undefined","writtenIn","box","trigger","setTrigger","t5","granularity","state","close","open","setDateValue","setValue","t6","t7","field","t8","segments","calendar","t9","realtimeValidation","validationErrors","t10","t11","toString","t12","t13","triggerOf","onPress","t14","t15","dateValue","t16","t17","t18","Parameters","_c"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { DateDuration } from '@internationalized/date'\nimport type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { HostInstance, StyleProp, View, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  DatePickerStateOptions as StatelyDatePickerProps,\n} from 'react-stately/useDatePickerState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { useRef, useState } from 'react'\nimport { useDateFieldState } from 'react-stately/useDateFieldState'\nimport { useDatePickerState } from 'react-stately/useDatePickerState'\n\nimport type { FieldVariant } from '../../field'\n\nimport { messagesFor } from '../../i18n'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { PickerPopup, PickerTrigger } from '../../picker'\nimport { SegmentedField } from '../../segments/field'\nimport { Calendar } from '../calendar'\n\n// kanso-ui's DatePicker, the date pickers page's picker: the date field a\n// date is typed into, with a calendar behind a button for picking it\n// instead. Both halves already exist, the segments DateField's, from\n// src/segments, and the calendar Calendar, so what this adds is the button\n// between them and the surface the calendar opens on, both in src/picker,\n// which DateRangePicker draws as well.\n//\n// The state is React Stately's `useDatePickerState`, which web's React Aria\n// picker is built on: the field and the calendar both read and write its\n// value, as React Aria wires them, so a date typed into the segments shows\n// in the calendar and a date picked in the calendar fills the segments.\n//\n// Four things are this component's own, as on web.\n//\n// **The picker is one field, not a field beside a button.** The button sits\n// in the box's trailing slot, so the box draws once around the segments and\n// the button, and a reader moves through the segments and reaches the\n// button at the end of them. It is named for opening the calendar and then\n// by the field's label, \"Calendar Label\" in English, React Aria's words.\n//\n// **It is docked from the medium window size up and modal below it**, the\n// pairing the page draws: in a compact window the calendar opens as a\n// dialog, centred over a scrim, and from 600dp up it hangs under the field.\n// The two are src/picker's, which says why.\n//\n// **Picking a date closes the calendar**, unless `shouldCloseOnSelect` says\n// otherwise. A screen reader goes to the date held as the calendar opens,\n// or to the one it opens on, and back to the button once it has gone, as\n// web's focus does. A `granularity` with a time keeps the time the segments already\n// hold, and fills a time not yet typed from `placeholderValue`.\n//\n// **The locale is the `I18nProvider`'s**, as web reads it from React Aria's,\n// unless the `locale` prop names another, and the device's under neither.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Pick<\n  StatelyDatePickerProps<T>,\n  | 'defaultOpen'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'granularity'\n  | 'hideTimeZone'\n  | 'hourCycle'\n  | 'isDateUnavailable'\n  | 'isOpen'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onOpenChange'\n  | 'placeholderValue'\n  | 'shouldCloseOnSelect'\n  | 'shouldForceLeadingZeros'\n  | 'validate'\n  | 'value'\n> & {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate`, the bounds and the form say.\n   */\n  readonly error?: string\n  /**\n   * Whether the label floats into the box's top, as the text fields page\n   * draws a field holding a value. The segments always show, their\n   * placeholders while empty, so it floats from the start. `false` keeps it\n   * small at the top.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * Draws the picker disabled: the field takes no input and the calendar\n   * does not open.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input, and the calendar\n   * does not open.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it, after\n   * each segment's own. It names the calendar too, and the button opening\n   * it after that button's own name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the segments: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The BCP 47 locale the date is written and typed in, and the calendar\n   * drawn in: the order of the segments, their placeholders, the month and\n   * weekday names, the digits and the calendar system. Defaults to the\n   * `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  /**\n   * The name the value is submitted under by the `Form` around the picker,\n   * and the key its `validationErrors` reach it by. The form submits the\n   * date written out as ISO 8601, such as `2026-09-15`, and `''` for an\n   * empty picker.\n   */\n  readonly name?: string\n  /** Called as focus leaves the field, once it has filled what it can. */\n  readonly onBlur?: () => void\n  /** Called as focus arrives in the field, at whichever segment. */\n  readonly onFocus?: () => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the calendar's header draws the month and the year as menu\n   * buttons, each opening a list of them in the grid's place, as the docked\n   * date picker's header does: see `Calendar`.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  /** Positions and sizes the picker as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * What the button that opens the calendar is called, for a screen reader,\n   * before the field's label. Left out, it is \"Calendar\" in the locale's\n   * words, React Aria's.\n   */\n  readonly triggerLabel?: string\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n  /**\n   * How much of the calendar shows at once: `{ months: 2 }` draws two\n   * months, side by side from the expanded window size up and one under the\n   * other below it: see `Calendar`.\n   * @default { months: 1 }\n   */\n  readonly visibleDuration?: DateDuration\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is an `@internationalized/date` value, as on web: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { CalendarDate } from '@internationalized/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are DateField's and the calendar is Calendar, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` behave as\n * they do there. From the medium window size up the calendar is docked to\n * the field; below it, it opens centred over a scrim, which is the page's\n * modal picker.\n *\n * `style`, `ref` and `testID` land on the picker as a whole.\n */\nfunction DatePicker<T extends DateValue = DateValue>({\n  defaultOpen,\n  defaultValue,\n  firstDayOfWeek,\n  isDateUnavailable,\n  isDisabled = false,\n  isOpen,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  locale,\n  maxValue,\n  minValue,\n  onChange,\n  onOpenChange,\n  placeholderValue,\n  shouldCloseOnSelect,\n  showMonthYearMenus = false,\n  triggerLabel,\n  validate,\n  value,\n  visibleDuration,\n  ...props\n}: DatePickerProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const box = useRef<HostInstance>(null)\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const state = useDatePickerState<T>({\n    defaultOpen,\n    defaultValue,\n    granularity: props.granularity,\n    isDateUnavailable,\n    isDisabled,\n    isOpen,\n    isReadOnly,\n    isRequired,\n    maxValue,\n    minValue,\n    onChange,\n    onOpenChange,\n    placeholderValue,\n    shouldCloseOnSelect,\n    validate,\n    value,\n  })\n  // oxlint-disable-next-line typescript/unbound-method -- React Stately's setters are callbacks, and read no `this`\n  const { close, open, setDateValue, setValue } = state\n  const field = useDateFieldState({\n    ...props,\n    createCalendar,\n    isDateUnavailable,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    locale: writtenIn,\n    maxValue,\n    minValue,\n    onChange: setValue,\n    placeholderValue,\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the picker's `validate` takes the value its own type maps to, which is the field's too\n    validate: validate as StatelyDatePickerProps<DateValue>['validate'],\n    value: state.value,\n  })\n  const name = `${triggerLabel ?? messagesFor(writtenIn).segments.calendar} ${label}`\n\n  return (\n    <>\n      <SegmentedField\n        {...props}\n        box={box}\n        errors={field.realtimeValidation.validationErrors}\n        isDisabled={isDisabled}\n        isEmpty={field.value === null}\n        isReadOnly={isReadOnly}\n        isRequired={isRequired}\n        label={label}\n        locale={writtenIn}\n        state={field}\n        submitted={state.value?.toString() ?? ''}\n        trailingIcon={triggerOf({\n          isDisabled: isDisabled || isReadOnly,\n          isOpen: state.isOpen,\n          label: name,\n          onPress: open,\n          ref: setTrigger,\n        })}\n      />\n      <PickerPopup\n        anchor={box}\n        close={close}\n        isOpen={state.isOpen}\n        label={name}\n        trigger={trigger}\n      >\n        <Calendar\n          aria-label={label}\n          defaultFocusedValue={\n            state.dateValue === null ? placeholderValue : undefined\n          }\n          firstDayOfWeek={firstDayOfWeek}\n          isDateUnavailable={isDateUnavailable}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          locale={writtenIn}\n          maxValue={maxValue}\n          minValue={minValue}\n          onChange={setDateValue}\n          showMonthYearMenus={showMonthYearMenus}\n          value={state.dateValue}\n          visibleDuration={visibleDuration}\n        />\n      </PickerPopup>\n    </>\n  )\n}\n\n// The button for the box's trailing slot. A call rather than JSX written at\n// the prop, which is what react-perf's jsx-no-jsx-as-prop is after.\nfunction triggerOf(props: Parameters<typeof PickerTrigger>[0]) {\n  return <PickerTrigger {...props} />\n}\n\nexport type { DatePickerProps }\n\nexport { DatePicker }\n"],"mappings":"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"}

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

@@ -0,0 +1,139 @@
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { DateDuration } from "@internationalized/date";
+import { DateRangePickerStateOptions, DateValue } from "react-stately/useDateRangePickerState";
+//#region src/components/date-range-picker/index.d.ts
+type DateRangePickerProps<T extends DateValue = DateValue> = Pick<DateRangePickerStateOptions<T>, 'allowsNonContiguousRanges' | 'defaultOpen' | 'defaultValue' | 'endName' | 'firstDayOfWeek' | 'granularity' | 'hideTimeZone' | 'hourCycle' | 'isDateUnavailable' | 'isOpen' | 'maxValue' | 'minValue' | 'onChange' | 'onOpenChange' | 'placeholderValue' | 'shouldCloseOnSelect' | 'shouldForceLeadingZeros' | 'startName' | 'validate' | 'value'> & {
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current range, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * invalid state a screen reader reads all follow from it. The line under
+   * the field arrives with the message, so the field grows when this does,
+   * unless it is inside a `Form`, which keeps the line drawn. It wins over
+   * what `validate`, the bounds and the form say.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label floats into the box's top, as the text fields page
+   * draws a field holding a value. The segments always show, their
+   * placeholders while empty, so it floats from the start. `false` keeps it
+   * small at the top.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * Draws the picker disabled: neither date takes input and the calendar
+   * does not open.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the range and takes focus, but takes no input, and the calendar
+   * does not open.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled. Inside a `Form` that validates natively, both dates
+   * must be.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it, after
+   * each segment's own and its date's. It names the calendar too, and the
+   * button opening it after that button's own name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the segments: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The BCP 47 locale the dates are written and typed in, and the calendar
+   * drawn in: the order of the segments, their placeholders, the month and
+   * weekday names, the digits and the calendar system. Defaults to the
+   * `I18nProvider`'s, or the device's outside one.
+   */
+  readonly locale?: string;
+  /** Called as focus leaves the field, once it has filled what it can. */
+  readonly onBlur?: () => void;
+  /** Called as focus arrives in the field, at whichever segment. */
+  readonly onFocus?: () => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * What is drawn between the two dates. Decoration: a screen reader hears
+   * which date each segment is part of instead.
+   * @default '–'
+   */
+  readonly separator?: string;
+  /**
+   * Whether the calendar's header draws the month and the year as menu
+   * buttons, each opening a list of them in the grid's place, as the docked
+   * date picker's header does: see `RangeCalendar`.
+   * @default false
+   */
+  readonly showMonthYearMenus?: boolean;
+  /** Positions and sizes the picker as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * What the button that opens the calendar is called, for a screen reader,
+   * before the field's label. Left out, it is "Calendar" in the locale's
+   * words, React Aria's.
+   */
+  readonly triggerLabel?: string;
+  /**
+   * The filled box, or the outlined one, as the text fields page draws them.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+  /**
+   * How much of the calendar shows at once: `{ months: 2 }` draws two
+   * months, side by side from the expanded window size up and one under the
+   * other below it, which is what a range is usually picked from: see
+   * `RangeCalendar`.
+   * @default { months: 1 }
+   */
+  readonly visibleDuration?: DateDuration;
+};
+/**
+ * A date range typed into a field, or picked from a calendar behind a
+ * button. The value is a `{ start, end }` pair of `@internationalized/date`
+ * values, as on web: pass `value` with `onChange` to control it, or
+ * `defaultValue` to let it keep its own. `onChange` is called once both
+ * dates are filled.
+ *
+ * ```tsx
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * <DateRangePicker
+ *   defaultValue={{
+ *     end: new CalendarDate(2026, 9, 20),
+ *     start: new CalendarDate(2026, 9, 15),
+ *   }}
+ *   label="Label"
+ * />
+ * ```
+ *
+ * The segments are DateField's and the calendar is RangeCalendar, so
+ * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` behave as
+ * they do there. From the medium window size up the calendar is docked to
+ * the field; below it, it opens centred over a scrim, the same swap
+ * DatePicker makes.
+ *
+ * `style`, `ref` and `testID` land on the picker as a whole.
+ */
+declare function DateRangePicker<T extends DateValue = DateValue>({ allowsNonContiguousRanges, defaultOpen, defaultValue, endName, firstDayOfWeek, granularity, hideTimeZone, hourCycle, isDateUnavailable, isDisabled, isOpen, isReadOnly, isRequired, label, locale, maxValue, minValue, onChange, onOpenChange, placeholderValue, separator, shouldCloseOnSelect, shouldForceLeadingZeros, showMonthYearMenus, startName, triggerLabel, validate, value, visibleDuration, ...props }: DateRangePickerProps<T>): import("react").JSX.Element;
+//#endregion
+export { DateRangePicker, type DateRangePickerProps };
+//# sourceMappingURL=index.d.ts.map