@mitcsutt/kiln-ui 0.6.0 → 0.8.0

package/dist/components/inputs/DateInput/DateInput.js

@@ -0,0 +1,139 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CalendarIcon as t, CloseIcon as n } from "../../../icons/icons.js";
+import { useMergedRefs as r } from "../internal/refs.js";
+import { markFieldAware as i, useResolvedField as a } from "../internal/FieldContext.js";
+import o from "../internal/control.module.js";
+import { Popover as s } from "../../overlays/Popover/Popover.js";
+import { DEFAULT_LOCALE as ee, compareDates as c, formatDate as l, parseDate as u, todayIn as te } from "../internal/dates.js";
+import { Calendar as ne } from "../Calendar/Calendar.js";
+import { useControllableState as d } from "../Combobox/useControllableState.js";
+import { DateSegments as re, draftDate as f, draftFromParts as p, segmentPattern as ie, useSegmentDraft as ae } from "../internal/DateSegments.js";
+import { DEFAULT_DATE_TIME_LABELS as oe, focusSegment as se, handleBoxPointerDown as ce, isLeaving as m } from "../internal/picker.js";
+import h from "../internal/picker.module.js";
+import { forwardRef as g, useMemo as le, useRef as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/inputs/DateInput/DateInput.tsx
+var ue = (e) => p(u(e)), de = (e) => {
+	let t = f(e);
+	return t ? l(t) : "";
+};
+function b(e, t, n, r) {
+	let i = u(e);
+	if (!i) return !1;
+	let a = u(t ?? ""), o = u(n ?? "");
+	return a !== null && c(i, a) < 0 || o !== null && c(i, o) > 0 || (r?.(e) ?? !1);
+}
+var x = i(g(function({ value: i, defaultValue: c, onValueChange: l, min: f, max: g, isDateDisabled: x, firstDayOfWeek: fe, locale: S = ee, timeZone: C, calendar: w = !0, clearable: T = !1, name: E, form: pe, size: me = "md", id: D, disabled: O, readOnly: k, required: A, invalid: j, open: M, defaultOpen: N, onOpenChange: P, onBlur: F, onFocus: I, onKeyDown: L, labels: R, className: z, "aria-describedby": he, "aria-invalid": B, "aria-labelledby": ge, ..._e }, ve) {
+	let V = {
+		...oe,
+		...R
+	}, H = a({
+		id: D,
+		describedBy: he,
+		invalid: j,
+		ariaInvalid: B,
+		disabled: O,
+		readOnly: k,
+		required: A
+	}), U = _(null), W = _(null), ye = r(ve, U), [G, K] = d(i, c ?? "", l), [be, q] = d(M, N ?? !1, P), xe = le(() => ie("date", S, "minute", 24), [S]), [J, Y] = ae(G, ue, de, K), X = !H.disabled && !H.readOnly, Z = H.invalid || b(G, f, g, x), Q = Object.keys(J).length > 0, Se = p(te(C)), Ce = (e) => {
+		L?.(e), !e.defaultPrevented && w && X && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), q(!0));
+	}, $ = /* @__PURE__ */ y("div", {
+		ref: ye,
+		role: "group",
+		className: e(o.box, h.root, z),
+		"data-size": me,
+		"data-invalid": Z || void 0,
+		"data-disabled": H.disabled || void 0,
+		"data-readonly": H.readOnly || void 0,
+		"aria-labelledby": ge ?? H.labelId,
+		"aria-describedby": H.describedBy,
+		"aria-busy": H.busy || void 0,
+		..._e,
+		onPointerDown: ce,
+		onKeyDown: Ce,
+		onFocus: (e) => {
+			m(e, U, W) && I?.(e);
+		},
+		onBlur: (e) => {
+			m(e, U, W) && F?.(e);
+		},
+		children: [
+			/* @__PURE__ */ v(re, {
+				pattern: xe,
+				draft: J,
+				onDraftChange: Y,
+				hourCycle: 24,
+				periodNames: ["", ""],
+				labels: V,
+				reference: Se,
+				firstId: H.id,
+				disabled: H.disabled,
+				readOnly: H.readOnly,
+				invalid: Z,
+				required: H.required
+			}),
+			T && X && Q || w ? /* @__PURE__ */ y("span", {
+				className: h.trailing,
+				children: [T && X && Q ? /* @__PURE__ */ v("button", {
+					type: "button",
+					className: h.button,
+					"aria-label": V.clear,
+					onClick: () => {
+						Y({}), se(U.current, "first");
+					},
+					children: /* @__PURE__ */ v(n, {})
+				}) : null, w ? /* @__PURE__ */ v(s.Trigger, {
+					asChild: !0,
+					children: /* @__PURE__ */ v("button", {
+						type: "button",
+						className: h.button,
+						"aria-label": V.openCalendar,
+						disabled: !X,
+						children: /* @__PURE__ */ v(t, {})
+					})
+				}) : null]
+			}) : null,
+			E === void 0 ? null : /* @__PURE__ */ v("input", {
+				type: "hidden",
+				name: E,
+				form: pe,
+				value: G,
+				disabled: H.disabled || void 0
+			})
+		]
+	});
+	return w ? /* @__PURE__ */ y(s, {
+		open: be && X,
+		onOpenChange: q,
+		children: [/* @__PURE__ */ v(s.Anchor, {
+			asChild: !0,
+			children: $
+		}), /* @__PURE__ */ v(s.Content, {
+			ref: W,
+			className: h.popover,
+			align: "start",
+			"aria-label": V.openCalendar,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+			},
+			children: /* @__PURE__ */ v(ne, {
+				autoFocus: !0,
+				value: u(G) ? G : "",
+				min: f,
+				max: g,
+				isDateDisabled: x,
+				firstDayOfWeek: fe,
+				locale: S,
+				timeZone: C,
+				labels: V,
+				onValueChange: (e) => {
+					K(e), q(!1);
+				}
+			})
+		})]
+	}) : $;
+}));
+//#endregion
+export { x as DateInput, b as isDateOutOfRange };
+
+//# sourceMappingURL=DateInput.js.map

package/dist/components/inputs/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":["control","picker","control_module_default","picker_module_default","toDraft","draftFromParts","parseDate","value","fromDraft","date","draftDate","draft","formatDate","isDateOutOfRange","minDate","min","maxDate","max","compareDates","isDateDisabled","DateInput","markFieldAware","forwardRef","valueProp","DEFAULT_LOCALE","idProp","disabledProp","readOnlyProp","requiredProp","invalidProp","openProp","labelsProp","describedByProp","ariaInvalid","ariaLabelledBy","rest","labels","DEFAULT_DATE_TIME_LABELS","field","useResolvedField","rootRef","useRef","panelRef","composedRef","useMergedRefs","ref","setValue","useControllableState","defaultValue","onValueChange","open","setOpen","defaultOpen","onOpenChange","pattern","useMemo","segmentPattern","locale","setDraft","useSegmentDraft","interactive","invalid","hasEntry","reference","todayIn","timeZone","handleKeyDown","onKeyDown","event","calendar","box","cx","className","size","handleBoxPointerDown","isLeaving","onFocus","onBlur","DateSegments","clearable","focusSegment","CloseIcon","Popover","CalendarIcon","name","Calendar","next"],"sources":["../../../../src/components/inputs/DateInput/DateInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  type FocusEventHandler,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { CalendarIcon, CloseIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { Popover } from '#components/overlays/Popover'\nimport { Calendar } from '#components/inputs/Calendar'\nimport { useControllableState } from '#components/inputs/Combobox/useControllableState'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport {\n  DateSegments,\n  draftDate,\n  draftFromParts,\n  segmentPattern,\n  useSegmentDraft,\n  type Draft,\n} from '#components/inputs/internal/DateSegments'\nimport {\n  DEFAULT_LOCALE,\n  compareDates,\n  formatDate,\n  parseDate,\n  todayIn,\n} from '#components/inputs/internal/dates'\nimport {\n  DEFAULT_DATE_TIME_LABELS,\n  focusSegment,\n  handleBoxPointerDown,\n  isLeaving,\n  type DateTimeLabels,\n} from '#components/inputs/internal/picker'\nimport control from '#components/inputs/internal/control.module.css'\nimport picker from '#components/inputs/internal/picker.module.css'\n\nexport interface DateInputProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'onBlur' | 'onFocus'\n> {\n  /** `YYYY-MM-DD`, or `''` until every part is filled in. */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Earliest date (`YYYY-MM-DD`). Earlier dates can't be picked and mark a typed one invalid. */\n  min?: string\n  /** Latest date (`YYYY-MM-DD`). */\n  max?: string\n  /** Marks other dates unavailable, in the calendar and when typed. */\n  isDateDisabled?: (date: string) => boolean\n  /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's own week. */\n  firstDayOfWeek?: number\n  /** BCP 47 locale for the order of the parts and the calendar's names. Default `en-AU`. */\n  locale?: string\n  /** The zone \"today\" is read in: the calendar's marker and where arrow keys start. */\n  timeZone?: string\n  /** Show the calendar button. Default `true`. Typing always works. */\n  calendar?: boolean\n  /** Show a clear button while there's a value. */\n  clearable?: boolean\n  /** Submits the ISO date (`''` when incomplete). */\n  name?: string\n  form?: string\n  size?: Size\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  /** Whether the calendar is open. Controlled. */\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Fires once focus leaves the whole control, calendar included. */\n  onBlur?: FocusEventHandler<HTMLElement>\n  onFocus?: FocusEventHandler<HTMLElement>\n  labels?: Partial<DateTimeLabels>\n}\n\nconst toDraft = (value: string): Draft => draftFromParts(parseDate(value))\nconst fromDraft = (draft: Draft): string => {\n  const date = draftDate(draft)\n  return date ? formatDate(date) : ''\n}\n\n/** Whether `value` is a date outside `min`/`max` or one `isDateDisabled` rules out. */\nexport function isDateOutOfRange(\n  value: string,\n  min: string | undefined,\n  max: string | undefined,\n  isDateDisabled?: (date: string) => boolean,\n): boolean {\n  const date = parseDate(value)\n  if (!date) return false\n  const minDate = parseDate(min ?? '')\n  const maxDate = parseDate(max ?? '')\n  return (\n    (minDate !== null && compareDates(date, minDate) < 0) ||\n    (maxDate !== null && compareDates(date, maxDate) > 0) ||\n    (isDateDisabled?.(value) ?? false)\n  )\n}\n\n/**\n * A date typed part by part in the locale's order, with a calendar to pick from.\n *\n * @remarks\n * `DateInput` holds a date as an ISO string (`2026-10-15`). The day, month and year are separate\n * parts in the locale's order: type the digits and it moves to the next part on its own, or use\n * the arrow keys to step a part up and down. The calendar button opens a {@link Calendar | Calendar}\n * for anyone who'd rather pick, and Alt + Down Arrow opens it from the keyboard. Until every part\n * is filled in the value stays `''`.\n *\n * A date outside `min`/`max`, or one `isDateDisabled` rules out, can't be picked in the calendar\n * and marks a typed one invalid. For the usual labelled field, use {@link DateField | DateField}.\n *\n * ## Keyboard\n *\n * | Key | Does |\n * | --- | --- |\n * | Digits | Fill the focused part, moving on when it's full |\n * | Up / Down Arrow | Step the focused part (an empty part starts from today) |\n * | Left / Right Arrow | Move between parts |\n * | Backspace | Clear the focused part |\n * | Alt + Down Arrow | Open the calendar |\n *\n * @privateRemarks\n * Each part is a `role=\"spinbutton\"` inside a `role=\"group\"` box named by the Field label; the\n * first part takes the Field's `id`. The ref goes to the box. Value ↔ draft lives in\n * `useSegmentDraft`: a new value from outside (controlled, or a calendar pick) resets the parts.\n *\n * <DateInput value={due} onValueChange={setDue} min=\"2026-10-01\" clearable />\n */\nexport const DateInput = markFieldAware(\n  forwardRef<HTMLDivElement, DateInputProps>(function DateInput(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      isDateDisabled,\n      firstDayOfWeek,\n      locale = DEFAULT_LOCALE,\n      timeZone,\n      calendar = true,\n      clearable = false,\n      name,\n      form,\n      size = 'md',\n      id: idProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n      invalid: invalidProp,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      labels: labelsProp,\n      className,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const labels = { ...DEFAULT_DATE_TIME_LABELS, ...labelsProp }\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n    })\n    const rootRef = useRef<HTMLDivElement>(null)\n    const panelRef = useRef<HTMLDivElement>(null)\n    const composedRef = useMergedRefs(ref, rootRef)\n    const [value, setValue] = useControllableState(valueProp, defaultValue ?? '', onValueChange)\n    const [open, setOpen] = useControllableState(openProp, defaultOpen ?? false, onOpenChange)\n    const pattern = useMemo(() => segmentPattern('date', locale, 'minute', 24), [locale])\n    const [draft, setDraft] = useSegmentDraft(value, toDraft, fromDraft, setValue)\n    const interactive = !field.disabled && !field.readOnly\n    const invalid = field.invalid || isDateOutOfRange(value, min, max, isDateDisabled)\n    const hasEntry = Object.keys(draft).length > 0\n    const reference = draftFromParts(todayIn(timeZone))\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented) return\n      if (calendar && interactive && event.altKey && event.key === 'ArrowDown') {\n        event.preventDefault()\n        setOpen(true)\n      }\n    }\n\n    const box = (\n      // The group only routes what its parts don't handle: a click on its padding, and\n      // Alt + Down Arrow from any part to open the calendar.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <div\n        ref={composedRef}\n        role=\"group\"\n        className={cx(control.box, picker.root, className)}\n        data-size={size}\n        data-invalid={invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        aria-labelledby={ariaLabelledBy ?? field.labelId}\n        aria-describedby={field.describedBy}\n        aria-busy={field.busy || undefined}\n        {...rest}\n        onPointerDown={handleBoxPointerDown}\n        onKeyDown={handleKeyDown}\n        onFocus={(event) => {\n          if (isLeaving(event, rootRef, panelRef)) onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          if (isLeaving(event, rootRef, panelRef)) onBlur?.(event)\n        }}\n      >\n        <DateSegments\n          pattern={pattern}\n          draft={draft}\n          onDraftChange={setDraft}\n          hourCycle={24}\n          periodNames={['', '']}\n          labels={labels}\n          reference={reference}\n          firstId={field.id}\n          disabled={field.disabled}\n          readOnly={field.readOnly}\n          invalid={invalid}\n          required={field.required}\n        />\n        {(clearable && interactive && hasEntry) || calendar ? (\n          <span className={picker.trailing}>\n            {clearable && interactive && hasEntry ? (\n              <button\n                type=\"button\"\n                className={picker.button}\n                aria-label={labels.clear}\n                onClick={() => {\n                  setDraft({})\n                  focusSegment(rootRef.current, 'first')\n                }}\n              >\n                <CloseIcon />\n              </button>\n            ) : null}\n            {calendar ? (\n              <Popover.Trigger asChild>\n                <button\n                  type=\"button\"\n                  className={picker.button}\n                  aria-label={labels.openCalendar}\n                  disabled={!interactive}\n                >\n                  <CalendarIcon />\n                </button>\n              </Popover.Trigger>\n            ) : null}\n          </span>\n        ) : null}\n        {name !== undefined ? (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            value={value}\n            disabled={field.disabled || undefined}\n          />\n        ) : null}\n      </div>\n    )\n\n    if (!calendar) return box\n\n    return (\n      <Popover open={open && interactive} onOpenChange={setOpen}>\n        <Popover.Anchor asChild>{box}</Popover.Anchor>\n        <Popover.Content\n          ref={panelRef}\n          className={picker.popover}\n          align=\"start\"\n          aria-label={labels.openCalendar}\n          onOpenAutoFocus={(event) => {\n            // The calendar focuses its own day instead of the first button.\n            event.preventDefault()\n          }}\n        >\n          <Calendar\n            // The panel is a dialog: opening it moves focus to its current day.\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus\n            value={parseDate(value) ? value : ''}\n            min={min}\n            max={max}\n            isDateDisabled={isDateDisabled}\n            firstDayOfWeek={firstDayOfWeek}\n            locale={locale}\n            timeZone={timeZone}\n            labels={labels}\n            onValueChange={(next) => {\n              setValue(next)\n              setOpen(false)\n            }}\n          />\n        </Popover.Content>\n      </Popover>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/DateInput/index.d.ts

@@ -0,0 +1,3 @@
+export { DateInput } from './DateInput.js';
+export type { DateInputProps } from './DateInput.js';
+export type { DateTimeLabels } from '../internal/picker.js';

package/dist/components/inputs/DateRangeField/DateRangeField.d.ts

@@ -1,7 +1,11 @@
 import { type FocusEventHandler, type HTMLAttributes } from 'react';
 import type { Size } from '../../../utils/tokens.js';
 import { type FieldLabelProps } from '../Field/index.js';
-/** Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. */
+/**
+ * Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. With a time `granularity` on
+ * `DateRangePickerField`, each end is a date-time in the same form as
+ * {@link DateTimeInput | DateTimeInput}'s value.
+ */
 export interface DateRangeValue {
     start: string;
     end: string;
@@ -27,17 +31,28 @@ export interface DateRangeFieldProps extends FieldLabelProps, Omit<HTMLAttribute
     size?: Size;
 }
 /**
- * A start and end date as two native date inputs under one legend.
+ * A start and end date under one legend: two native date inputs, or with `DateRangePickerField`
+ * typed dates with one calendar for the range, optional times and preset ranges.
  *
  * @remarks
  * `DateRangeField` is two native date inputs, side by side and wrapping on a phone, under one
  * legend. Native inputs mean the platform's own date picker and its accessibility.
  *
+ * `DateRangePickerField` takes the same props and types the two ends like
+ * {@link DateInput | DateInput}, and one button opens a two-month {@link Calendar | Calendar}: the
+ * first pick sets the start, the second the end. `granularity="minute"` adds a time to each end (a
+ * new range runs from the start of its first day to the end of its last), and `presets` lists
+ * ranges such as "Last 7 days" beside the calendar. It's a separate import, so a native
+ * `DateRangeField` doesn't carry the calendar.
+ *
+ * Whichever you use, the start can't pass the end and the end can't come before the start.
+ *
  * @privateRemarks
  * A date range as two native date inputs under one legend, side by side and wrapping
  * when narrow. The start can't pass the end and the end can't come before the start
  * (each input's `min`/`max` follows the other). `id` goes to the start input; the ref to
- * the fieldset.
+ * the fieldset. The calendar picker is its own component, DateRangePickerField, so the native
+ * markup, behaviour and import size stay exactly as they were for existing callers (ADR 0044).
  *
  * <DateRangeField label="Trip dates" value={dates} onValueChange={setDates} />
  */

package/dist/components/inputs/DateRangeField/DateRangeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.js","names":["styles","DateRangeField_module_default","EMPTY","DateRangeField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","fieldsetProps","valueProp","restProps","internal","setInternal","useState","defaultValue","value","update","readOnly","nextValue","part","next","onValueChange","handleBlur","event","onBlur","invalid","hasError","required","busy","Fieldset","label","labelHidden","description","hint","cx","className","Field","startLabel","id","Input","name","max","endLabel","min"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { Input } from '#components/inputs/Input'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { hasError } from '#components/inputs/internal/errors'\nimport styles from './DateRangeField.module.css'\n\n/** Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. */\nexport interface DateRangeValue {\n  start: string\n  end: string\n}\n\nexport interface DateRangeFieldProps\n  extends\n    FieldLabelProps,\n    Omit<\n      HTMLAttributes<HTMLFieldSetElement>,\n      'onChange' | 'defaultValue' | 'onBlur' | keyof FieldLabelProps\n    > {\n  value?: DateRangeValue\n  defaultValue?: DateRangeValue\n  onValueChange?: (value: DateRangeValue) => void\n  /** Earliest date either end may take (`YYYY-MM-DD`). */\n  min?: string\n  /** Latest date either end may take (`YYYY-MM-DD`). */\n  max?: string\n  /** Label of the first input. Default `'Start date'`. */\n  startLabel?: string\n  /** Label of the second input. Default `'End date'`. */\n  endLabel?: string\n  /** Submits `${name}.start` and `${name}.end`. */\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  /** Fires when focus leaves both inputs (not when it moves from start to end). */\n  onBlur?: FocusEventHandler\n  size?: Size\n}\n\nconst EMPTY: DateRangeValue = { start: '', end: '' }\n\n/**\n * A start and end date as two native date inputs under one legend.\n *\n * @remarks\n * `DateRangeField` is two native date inputs, side by side and wrapping on a phone, under one\n * legend. Native inputs mean the platform's own date picker and its accessibility.\n *\n * @privateRemarks\n * A date range as two native date inputs under one legend, side by side and wrapping\n * when narrow. The start can't pass the end and the end can't come before the start\n * (each input's `min`/`max` follows the other). `id` goes to the start input; the ref to\n * the fieldset.\n *\n * <DateRangeField label=\"Trip dates\" value={dates} onValueChange={setDates} />\n */\nexport const DateRangeField = forwardRef<HTMLFieldSetElement, DateRangeFieldProps>(\n  function DateRangeField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    // `layout` goes to the Fieldset (legend column for `horizontal`); the two inputs always\n    // sit side by side.\n    const { label, labelHidden, hint, description, readOnly = false, ...fieldsetProps } = fieldProps\n    const {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      startLabel = 'Start date',\n      endLabel = 'End date',\n      name,\n      disabled = false,\n      onBlur,\n      size,\n      id,\n      className,\n      ...restProps\n    } = rest\n\n    const [internal, setInternal] = useState<DateRangeValue>(defaultValue ?? EMPTY)\n    const value = valueProp ?? internal\n\n    const update = (part: keyof DateRangeValue, next: string) => {\n      if (readOnly) return\n      const nextValue = { ...value, [part]: next }\n      if (valueProp === undefined) setInternal(nextValue)\n      onValueChange?.(nextValue)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLFieldSetElement>) => {\n      if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))\n        return\n      onBlur?.(event)\n    }\n\n    const invalid = hasError(fieldsetProps.error) || undefined\n    const required = fieldsetProps.required\n    const busy = fieldsetProps.validating ? true : undefined\n\n    return (\n      <Fieldset\n        ref={ref}\n        {...restProps}\n        {...fieldsetProps}\n        legend={label}\n        legendHidden={labelHidden}\n        description={description ?? hint}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(styles.root, className)}\n        onBlur={handleBlur}\n      >\n        <div className={styles.parts}>\n          <Field\n            label={startLabel}\n            htmlFor={id}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              id={id}\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.start` : undefined}\n              value={value.start}\n              min={min}\n              max={value.end || max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('start', event.target.value)\n              }}\n            />\n          </Field>\n          <Field\n            label={endLabel}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.end` : undefined}\n              value={value.end}\n              min={value.start || min}\n              max={max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('end', event.target.value)\n              }}\n            />\n          </Field>\n        </div>\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AAiDA,IAAME,IAAwB;CAAE,OAAO;CAAI,KAAK;AAAG,GAiBtCC,IAAiBC,EAC5B,SAAwB,GAAO,GAAK;CAClC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAG/C,EAAE,UAAO,gBAAa,SAAM,gBAAa,cAAW,IAAO,GAAGC,MAAkBJ,GAChF,EACJ,OAAOK,GACP,iBACA,kBACA,QACA,QACA,gBAAa,cACb,cAAW,YACX,SACA,cAAW,IACX,WACA,SACA,OACA,cACA,GAAGC,MACDL,GAEE,CAACM,GAAUC,KAAeC,EAAyBC,KAAgBb,CAAK,GACxEc,IAAQN,KAAaE,GAErBK,KAAU,GAA4B,MAAiB;EAC3D,IAAIC,GAAU;EACd,IAAMC,IAAY;GAAE,GAAGH;IAAQI,IAAOC;EAAK;EAE3C,AADIX,MAAc,KAAA,KAAWG,EAAYM,CAAS,GAClDG,IAAgBH,CAAS;CAC3B,GAEMI,KAAc,MAA2C;EAC7D,AAAIC,EAAM,yBAAyB,QAAQA,EAAM,cAAc,SAASA,EAAM,aAAa,KAE3FC,IAASD,CAAK;CAChB,GAEME,IAAUC,EAASlB,EAAc,KAAK,KAAK,KAAA,GAC3CmB,IAAWnB,EAAc,UACzBoB,IAAOpB,EAAc,aAAa,KAAO,KAAA;CAE/C,OACE,kBAACqB,GAAD;EACO;EACL,GAAInB;EACJ,GAAIF;EACJ,QAAQsB;EACR,cAAcC;EACd,aAAaC,KAAeC;EAClB;EACA;EACV,WAAWC,EAAGnC,EAAO,MAAMoC,CAAS;EACpC,QAAQb;EAER,UAAA,kBAAC,OAAD;GAAK,WAAWvB,EAAO;GAAvB,UAAA,CACE,kBAACqC,GAAD;IACE,OAAOC;IACP,SAASC;IACT,WAAWvC,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACM;KACJ,MAAK;KACC;KACN,MAAMC,KAAQ,OAAyB,KAAA,IAAlB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACR;KACL,KAAKA,EAAM,OAAO0B;KACR;KACV,aAAWb;KACX,WAAW,MAAU;MACnB,EAAO,SAASL,EAAM,OAAO,KAAK;KACpC;IACD,CAAA;GACI,CAAA,GACP,kBAACa,GAAD;IACE,OAAOM;IACP,WAAW3C,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACE,MAAK;KACC;KACN,MAAMC,KAAQ,OAAuB,KAAA,IAAhB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACb,KAAKA,EAAM,SAAS4B;KACf;KACK;KACV,aAAWf;KACX,WAAW,MAAU;MACnB,EAAO,OAAOL,EAAM,OAAO,KAAK;KAClC;IACD,CAAA;GACI,CAAA,CACJ;;CACG,CAAA;AAEd,CACF"}
+{"version":3,"file":"DateRangeField.js","names":["styles","DateRangeField_module_default","EMPTY","DateRangeField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","fieldsetProps","valueProp","restProps","internal","setInternal","useState","defaultValue","value","update","readOnly","nextValue","part","next","onValueChange","handleBlur","event","onBlur","invalid","hasError","required","busy","Fieldset","label","labelHidden","description","hint","cx","className","Field","startLabel","id","Input","name","max","endLabel","min"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type FocusEvent,\n  type FocusEventHandler,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { Input } from '#components/inputs/Input'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { hasError } from '#components/inputs/internal/errors'\nimport styles from './DateRangeField.module.css'\n\n/**\n * Two ISO dates (`YYYY-MM-DD`); `''` for an unset end. With a time `granularity` on\n * `DateRangePickerField`, each end is a date-time in the same form as\n * {@link DateTimeInput | DateTimeInput}'s value.\n */\nexport interface DateRangeValue {\n  start: string\n  end: string\n}\n\nexport interface DateRangeFieldProps\n  extends\n    FieldLabelProps,\n    Omit<\n      HTMLAttributes<HTMLFieldSetElement>,\n      'onChange' | 'defaultValue' | 'onBlur' | keyof FieldLabelProps\n    > {\n  value?: DateRangeValue\n  defaultValue?: DateRangeValue\n  onValueChange?: (value: DateRangeValue) => void\n  /** Earliest date either end may take (`YYYY-MM-DD`). */\n  min?: string\n  /** Latest date either end may take (`YYYY-MM-DD`). */\n  max?: string\n  /** Label of the first input. Default `'Start date'`. */\n  startLabel?: string\n  /** Label of the second input. Default `'End date'`. */\n  endLabel?: string\n  /** Submits `${name}.start` and `${name}.end`. */\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  /** Fires when focus leaves both inputs (not when it moves from start to end). */\n  onBlur?: FocusEventHandler\n  size?: Size\n}\n\nconst EMPTY: DateRangeValue = { start: '', end: '' }\n\n/**\n * A start and end date under one legend: two native date inputs, or with `DateRangePickerField`\n * typed dates with one calendar for the range, optional times and preset ranges.\n *\n * @remarks\n * `DateRangeField` is two native date inputs, side by side and wrapping on a phone, under one\n * legend. Native inputs mean the platform's own date picker and its accessibility.\n *\n * `DateRangePickerField` takes the same props and types the two ends like\n * {@link DateInput | DateInput}, and one button opens a two-month {@link Calendar | Calendar}: the\n * first pick sets the start, the second the end. `granularity=\"minute\"` adds a time to each end (a\n * new range runs from the start of its first day to the end of its last), and `presets` lists\n * ranges such as \"Last 7 days\" beside the calendar. It's a separate import, so a native\n * `DateRangeField` doesn't carry the calendar.\n *\n * Whichever you use, the start can't pass the end and the end can't come before the start.\n *\n * @privateRemarks\n * A date range as two native date inputs under one legend, side by side and wrapping\n * when narrow. The start can't pass the end and the end can't come before the start\n * (each input's `min`/`max` follows the other). `id` goes to the start input; the ref to\n * the fieldset. The calendar picker is its own component, DateRangePickerField, so the native\n * markup, behaviour and import size stay exactly as they were for existing callers (ADR 0044).\n *\n * <DateRangeField label=\"Trip dates\" value={dates} onValueChange={setDates} />\n */\nexport const DateRangeField = forwardRef<HTMLFieldSetElement, DateRangeFieldProps>(\n  function DateRangeField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    // `layout` goes to the Fieldset (legend column for `horizontal`); the two inputs always\n    // sit side by side.\n    const { label, labelHidden, hint, description, readOnly = false, ...fieldsetProps } = fieldProps\n    const {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      startLabel = 'Start date',\n      endLabel = 'End date',\n      name,\n      disabled = false,\n      onBlur,\n      size,\n      id,\n      className,\n      ...restProps\n    } = rest\n\n    const [internal, setInternal] = useState<DateRangeValue>(defaultValue ?? EMPTY)\n    const value = valueProp ?? internal\n\n    const update = (part: keyof DateRangeValue, next: string) => {\n      if (readOnly) return\n      const nextValue = { ...value, [part]: next }\n      if (valueProp === undefined) setInternal(nextValue)\n      onValueChange?.(nextValue)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLFieldSetElement>) => {\n      if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))\n        return\n      onBlur?.(event)\n    }\n\n    const invalid = hasError(fieldsetProps.error) || undefined\n    const required = fieldsetProps.required\n    const busy = fieldsetProps.validating ? true : undefined\n\n    return (\n      <Fieldset\n        ref={ref}\n        {...restProps}\n        {...fieldsetProps}\n        legend={label}\n        legendHidden={labelHidden}\n        description={description ?? hint}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(styles.root, className)}\n        onBlur={handleBlur}\n      >\n        <div className={styles.parts}>\n          <Field\n            label={startLabel}\n            htmlFor={id}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              id={id}\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.start` : undefined}\n              value={value.start}\n              min={min}\n              max={value.end || max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('start', event.target.value)\n              }}\n            />\n          </Field>\n          <Field\n            label={endLabel}\n            className={styles.part}\n            error={invalid}\n            errorHidden\n            disabled={disabled}\n            readOnly={readOnly}\n          >\n            <Input\n              type=\"date\"\n              size={size}\n              name={name != null ? `${name}.end` : undefined}\n              value={value.end}\n              min={value.start || min}\n              max={max}\n              required={required}\n              aria-busy={busy}\n              onChange={(event) => {\n                update('end', event.target.value)\n              }}\n            />\n          </Field>\n        </div>\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AAqDA,IAAME,IAAwB;CAAE,OAAO;CAAI,KAAK;AAAG,GA4BtCC,IAAiBC,EAC5B,SAAwB,GAAO,GAAK;CAClC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAG/C,EAAE,UAAO,gBAAa,SAAM,gBAAa,cAAW,IAAO,GAAGC,MAAkBJ,GAChF,EACJ,OAAOK,GACP,iBACA,kBACA,QACA,QACA,gBAAa,cACb,cAAW,YACX,SACA,cAAW,IACX,WACA,SACA,OACA,cACA,GAAGC,MACDL,GAEE,CAACM,GAAUC,KAAeC,EAAyBC,KAAgBb,CAAK,GACxEc,IAAQN,KAAaE,GAErBK,KAAU,GAA4B,MAAiB;EAC3D,IAAIC,GAAU;EACd,IAAMC,IAAY;GAAE,GAAGH;IAAQI,IAAOC;EAAK;EAE3C,AADIX,MAAc,KAAA,KAAWG,EAAYM,CAAS,GAClDG,IAAgBH,CAAS;CAC3B,GAEMI,KAAc,MAA2C;EAC7D,AAAIC,EAAM,yBAAyB,QAAQA,EAAM,cAAc,SAASA,EAAM,aAAa,KAE3FC,IAASD,CAAK;CAChB,GAEME,IAAUC,EAASlB,EAAc,KAAK,KAAK,KAAA,GAC3CmB,IAAWnB,EAAc,UACzBoB,IAAOpB,EAAc,aAAa,KAAO,KAAA;CAE/C,OACE,kBAACqB,GAAD;EACO;EACL,GAAInB;EACJ,GAAIF;EACJ,QAAQsB;EACR,cAAcC;EACd,aAAaC,KAAeC;EAClB;EACA;EACV,WAAWC,EAAGnC,EAAO,MAAMoC,CAAS;EACpC,QAAQb;EAER,UAAA,kBAAC,OAAD;GAAK,WAAWvB,EAAO;GAAvB,UAAA,CACE,kBAACqC,GAAD;IACE,OAAOC;IACP,SAASC;IACT,WAAWvC,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACM;KACJ,MAAK;KACC;KACN,MAAMC,KAAQ,OAAyB,KAAA,IAAlB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACR;KACL,KAAKA,EAAM,OAAO0B;KACR;KACV,aAAWb;KACX,WAAW,MAAU;MACnB,EAAO,SAASL,EAAM,OAAO,KAAK;KACpC;IACD,CAAA;GACI,CAAA,GACP,kBAACa,GAAD;IACE,OAAOM;IACP,WAAW3C,EAAO;IAClB,OAAO0B;IACP,aAAA;IACU;IACA;IAEV,UAAA,kBAACc,GAAD;KACE,MAAK;KACC;KACN,MAAMC,KAAQ,OAAuB,KAAA,IAAhB,GAAGA,EAAK;KAC7B,OAAOzB,EAAM;KACb,KAAKA,EAAM,SAAS4B;KACf;KACK;KACV,aAAWf;KACX,WAAW,MAAU;MACnB,EAAO,OAAOL,EAAM,OAAO,KAAK;KAClC;IACD,CAAA;GACI,CAAA,CACJ;;CACG,CAAA;AAEd,CACF"}

package/dist/components/inputs/DateRangeField/DateRangeField.module.js

@@ -1,10 +1,15 @@
 //#region src/components/inputs/DateRangeField/DateRangeField.module.css
-var e = "kiln-DateRangeField__root", t = "kiln-DateRangeField__parts", n = "kiln-DateRangeField__part", r = {
+var e = "kiln-DateRangeField__root", t = "kiln-DateRangeField__parts", n = "kiln-DateRangeField__part", r = "kiln-DateRangeField__trigger", i = "kiln-DateRangeField__panel", a = "kiln-DateRangeField__presets", o = "kiln-DateRangeField__preset", s = "kiln-DateRangeField__times", c = {
 	root: e,
 	parts: t,
-	part: n
+	part: n,
+	trigger: r,
+	panel: i,
+	presets: a,
+	preset: o,
+	times: s
 };
 //#endregion
-export { r as default, n as part, t as parts, e as root };
+export { c as default, i as panel, n as part, t as parts, o as preset, a as presets, e as root, s as times, r as trigger };
 
 //# sourceMappingURL=DateRangeField.module.js.map

package/dist/components/inputs/DateRangeField/DateRangeField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.module.js","names":["root","parts","part","DateRangeField_module_default"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.module.css"],"sourcesContent":["/*\n * Start and end side by side, each at least --space-11 wide, wrapping to a stack when the\n * column is narrower than both.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.parts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n.part {\n  flex: 1 1 var(--space-11);\n  min-inline-size: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"DateRangeField.module.js","names":["root","parts","part","trigger","panel","presets","preset","times","DateRangeField_module_default"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.module.css"],"sourcesContent":["/*\n * Start and end side by side, each at least --space-11 wide, wrapping to a stack when the\n * column is narrower than both.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.parts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n.part {\n  flex: 1 1 var(--space-11);\n  min-inline-size: 0;\n}\n\n/* Calendar picker: one calendar button after the two ends, level with their boxes. */\n.trigger {\n  flex: none;\n  align-self: flex-end;\n}\n\n.panel {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n.presets {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 9rem;\n  padding-inline-end: var(--space-4);\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n\n.preset {\n  justify-content: flex-start;\n}\n.preset[aria-pressed='true'] {\n  background-color: var(--color-accent-soft);\n}\n\n.times {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n"],"mappings":""}

package/dist/components/inputs/DateRangeField/DateRangePickerField.d.ts

@@ -0,0 +1,48 @@
+import { type TimeGranularity } from '../internal/dates.js';
+import { type DateTimeLabels } from '../internal/picker.js';
+import type { DateRangeFieldProps, DateRangeValue } from './DateRangeField.js';
+/** A range offered beside the calendar: "Last 7 days", "This month". */
+export interface DateRangePreset {
+    label: string;
+    /**
+     * The range, or a function that works it out when picked (so "today" is always today). With a
+     * time `granularity`, a date-only end runs from the start of its first day to the end of its last.
+     */
+    value: DateRangeValue | (() => DateRangeValue);
+}
+export interface DateRangePickerFieldProps extends DateRangeFieldProps {
+    /** `day` (default), or `minute`/`second` to give each end a time. */
+    granularity?: 'day' | TimeGranularity;
+    /** Ranges to offer beside the calendar. */
+    presets?: readonly DateRangePreset[];
+    /** Show a clear button in each input. */
+    clearable?: boolean;
+    /** Marks dates unavailable. */
+    isDateDisabled?: (date: string) => boolean;
+    /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's week. */
+    firstDayOfWeek?: number;
+    /** BCP 47 locale for the parts and names. Default `en-AU`. */
+    locale?: string;
+    /**
+     * The zone "today" is read in. With a time `granularity`, each end becomes a UTC instant typed as
+     * this zone's clock, as in {@link DateTimeInput | DateTimeInput}.
+     */
+    timeZone?: string;
+    /** With a time `granularity`: 12 or 24. Defaults to the locale's clock. */
+    hourCycle?: 12 | 24;
+    /** Words for another language or wording. */
+    labels?: Partial<DateTimeLabels>;
+}
+/**
+ * A start and end date typed part by part under one legend, with one two-month calendar for the
+ * range, optional times and preset ranges.
+ *
+ * @privateRemarks
+ * The calendar picker for a range, documented on {@link DateRangeField | DateRangeField}'s page. It
+ * is a separate export rather than a `picker` prop on DateRangeField, so importing DateRangeField
+ * alone doesn't bring Popover, Calendar and the typed inputs (ADR 0044). The ref goes to the
+ * fieldset and `id` to the start input, as in DateRangeField.
+ *
+ * <DateRangePickerField label="Stay" presets={presets} value={dates} onValueChange={setDates} />
+ */
+export declare const DateRangePickerField: import("react").ForwardRefExoticComponent<DateRangePickerFieldProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/components/inputs/DateRangeField/DateRangePickerField.js

@@ -0,0 +1,246 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CalendarIcon as t } from "../../../icons/icons.js";
+import { Button as n } from "../../actions/Button/Button.js";
+import { IconButton as r } from "../../actions/IconButton/IconButton.js";
+import { FieldContext as ee } from "../internal/FieldContext.js";
+import { hasError as te } from "../internal/errors.js";
+import { Field as i } from "../Field/Field.js";
+import { Fieldset as ne } from "../Fieldset/Fieldset.js";
+import { splitFieldLabelProps as re } from "../internal/fieldProps.js";
+import a from "./DateRangeField.module.js";
+import { Popover as o } from "../../overlays/Popover/Popover.js";
+import { DEFAULT_LOCALE as ie, dateOf as s, defaultHourCycle as ae, formatDate as c, formatDateTime as oe, formatTime as se, parseDate as l, parseDateTime as ce, parseTime as le } from "../internal/dates.js";
+import { Calendar as ue } from "../Calendar/Calendar.js";
+import { DEFAULT_DATE_TIME_LABELS as de } from "../internal/picker.js";
+import u from "../internal/picker.module.js";
+import { DateInput as d } from "../DateInput/DateInput.js";
+import { TimeInput as fe } from "../TimeInput/TimeInput.js";
+import { DateTimeInput as f } from "../DateTimeInput/DateTimeInput.js";
+import { forwardRef as p, useRef as pe, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/inputs/DateRangeField/DateRangePickerField.tsx
+var me = {
+	start: "",
+	end: ""
+}, _ = {
+	hour: 0,
+	minute: 0,
+	second: 0
+}, v = {
+	hour: 23,
+	minute: 59,
+	second: 59
+}, he = (e) => typeof e.value == "function" ? e.value() : e.value, y = p(function(p, y) {
+	let [ge, _e] = re(p), { label: ve, labelHidden: ye, hint: be, description: xe, readOnly: b = !1, ...x } = ge, { value: S, defaultValue: Se, onValueChange: Ce, min: C, max: w, startLabel: we = "Start date", endLabel: Te = "End date", name: T, disabled: E = !1, onBlur: Ee, size: D, id: O, className: De, granularity: k = "day", presets: A, clearable: Oe = !1, isDateDisabled: j, firstDayOfWeek: M, locale: N = ie, timeZone: P, hourCycle: F, labels: ke, ...Ae } = _e, [je, Me] = m(Se ?? me), [Ne, I] = m(!1), L = pe(null), R = S ?? je, z = (e) => {
+		b || (S === void 0 && Me(e), Ce?.(e));
+	}, B = (e, t) => {
+		z({
+			...R,
+			[e]: t
+		});
+	}, Pe = (e) => {
+		let t = e.relatedTarget;
+		t instanceof Node && (e.currentTarget.contains(t) || L.current?.contains(t)) || Ee?.(e);
+	}, V = te(x.error) || void 0, Fe = x.required, Ie = x.validating ? !0 : void 0, H = {
+		...de,
+		...ke
+	}, U = k !== "day", W = k === "second" ? "second" : "minute", G = F ?? ae(N), K = !E && !b, q = s(R.start, P), J = s(R.end, P), Y = (e) => ce(e, P)?.time ?? null, X = (e, t) => {
+		let n = l(e);
+		return n ? oe({
+			date: n,
+			time: t
+		}, W, P) : "";
+	}, Le = J ? c(J) : w, Re = q ? c(q) : C, Z = (e, t) => U && e ? X(e, t) : e, ze = (e) => {
+		if (!U) {
+			z(e), e.start && e.end && I(!1);
+			return;
+		}
+		z({
+			start: e.start ? X(e.start, Y(R.start) ?? _) : "",
+			end: e.end ? X(e.end, Y(R.end) ?? v) : ""
+		});
+	}, Q = (e) => {
+		let t = he(e);
+		return U ? {
+			start: l(t.start) ? X(t.start, _) : t.start,
+			end: l(t.end) ? X(t.end, v) : t.end
+		} : t;
+	}, Be = (e, t) => {
+		let n = le(t), r = e === "start" ? q : J;
+		n && r && B(e, X(c(r), n));
+	}, $ = (e) => ({
+		size: D,
+		name: T == null ? void 0 : `${T}.${e}`,
+		value: R[e],
+		required: Fe,
+		clearable: Oe,
+		isDateDisabled: j,
+		firstDayOfWeek: M,
+		locale: N,
+		timeZone: P,
+		labels: H,
+		calendar: !1,
+		"aria-busy": Ie,
+		onValueChange: (t) => {
+			B(e, t);
+		}
+	});
+	return /* @__PURE__ */ h(ne, {
+		ref: y,
+		...Ae,
+		...x,
+		legend: ve,
+		legendHidden: ye,
+		description: xe ?? be,
+		disabled: E,
+		readOnly: b,
+		className: e(a.root, De),
+		onBlur: Pe,
+		"data-picker": "calendar",
+		children: /* @__PURE__ */ g(o, {
+			open: Ne && K,
+			onOpenChange: I,
+			children: [/* @__PURE__ */ h(o.Anchor, {
+				asChild: !0,
+				children: /* @__PURE__ */ g("div", {
+					className: a.parts,
+					children: [
+						/* @__PURE__ */ h(i, {
+							label: we,
+							htmlFor: O,
+							className: a.part,
+							error: V,
+							errorHidden: !0,
+							disabled: E,
+							readOnly: b,
+							children: U ? /* @__PURE__ */ h(f, {
+								id: O,
+								...$("start"),
+								granularity: W,
+								hourCycle: G,
+								min: Z(C, _),
+								max: R.end || Z(w, v)
+							}) : /* @__PURE__ */ h(d, {
+								id: O,
+								...$("start"),
+								min: C,
+								max: Le
+							})
+						}),
+						/* @__PURE__ */ h(i, {
+							label: Te,
+							className: a.part,
+							error: V,
+							errorHidden: !0,
+							disabled: E,
+							readOnly: b,
+							children: U ? /* @__PURE__ */ h(f, {
+								...$("end"),
+								granularity: W,
+								hourCycle: G,
+								min: R.start || Z(C, _),
+								max: Z(w, v)
+							}) : /* @__PURE__ */ h(d, {
+								...$("end"),
+								min: Re,
+								max: w
+							})
+						}),
+						/* @__PURE__ */ h(o.Trigger, {
+							asChild: !0,
+							children: /* @__PURE__ */ h(r, {
+								className: a.trigger,
+								variant: "outline",
+								size: D,
+								shape: "square",
+								label: H.openCalendar,
+								icon: /* @__PURE__ */ h(t, {}),
+								disabled: !K
+							})
+						})
+					]
+				})
+			}), /* @__PURE__ */ h(o.Content, {
+				ref: L,
+				className: u.popover,
+				align: "end",
+				"aria-label": H.openCalendar,
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+				},
+				children: /* @__PURE__ */ h(ee.Provider, {
+					value: null,
+					children: /* @__PURE__ */ g("div", {
+						className: a.panel,
+						children: [A && A.length > 0 ? /* @__PURE__ */ h("div", {
+							role: "group",
+							"aria-label": H.presets,
+							className: a.presets,
+							children: A.map((e) => {
+								let t = Q(e), r = t.start === R.start && t.end === R.end;
+								return /* @__PURE__ */ h(n, {
+									variant: "ghost",
+									size: "sm",
+									className: a.preset,
+									"aria-pressed": r,
+									onClick: () => {
+										z(Q(e)), I(!1);
+									},
+									children: e.label
+								}, e.label);
+							})
+						}) : null, /* @__PURE__ */ g("div", {
+							className: u.panel,
+							children: [/* @__PURE__ */ h(ue, {
+								mode: "range",
+								months: 2,
+								autoFocus: !0,
+								value: {
+									start: q ? c(q) : "",
+									end: J ? c(J) : ""
+								},
+								min: C,
+								max: w,
+								isDateDisabled: j,
+								firstDayOfWeek: M,
+								locale: N,
+								timeZone: P,
+								labels: H,
+								onValueChange: ze
+							}), U ? /* @__PURE__ */ h("div", {
+								className: a.times,
+								children: ["start", "end"].map((e) => {
+									let t = Y(R[e]);
+									return /* @__PURE__ */ g("div", {
+										className: u.timeRow,
+										children: [/* @__PURE__ */ h("span", {
+											className: u.timeLabel,
+											"aria-hidden": "true",
+											children: e === "start" ? H.startTime : H.endTime
+										}), /* @__PURE__ */ h(fe, {
+											"aria-label": e === "start" ? H.startTime : H.endTime,
+											value: t ? se(t, W) : "",
+											granularity: W,
+											hourCycle: G,
+											locale: N,
+											size: "sm",
+											labels: H,
+											disabled: (e === "start" ? q : J) === null,
+											onValueChange: (t) => {
+												Be(e, t);
+											}
+										})]
+									}, e);
+								})
+							}) : null]
+						})]
+					})
+				})
+			})]
+		})
+	});
+});
+//#endregion
+export { y as DateRangePickerField };
+
+//# sourceMappingURL=DateRangePickerField.js.map

package/dist/components/inputs/DateRangeField/DateRangePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePickerField.js","names":["styles","picker","DateRangeField_module_default","picker_module_default","EMPTY","MIDNIGHT","LAST_SECOND","resolvePreset","preset","DateRangePickerField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","fieldsetProps","valueProp","DEFAULT_LOCALE","labelsProp","restProps","internal","setInternal","useState","defaultValue","open","setOpen","panelRef","useRef","value","setRange","readOnly","nextValue","onValueChange","update","part","next","handleBlur","event","onBlur","invalid","hasError","required","busy","labels","DEFAULT_DATE_TIME_LABELS","withTime","granularity","timeGranularity","clock","hourCycle","defaultHourCycle","locale","interactive","disabled","startDate","dateOf","timeZone","endDate","timeOf","parseDateTime","text","join","day","parseDate","date","formatDateTime","startMax","formatDate","max","endMin","min","boundOf","time","pickRange","presetRange","range","setTime","parseTime","partProps","name","Fieldset","label","labelHidden","description","hint","cx","className","Popover","Field","startLabel","id","DateTimeInput","DateInput","endLabel","IconButton","CalendarIcon","FieldContext","presets","current","Button","Calendar","TimeInput","formatTime"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangePickerField.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type FocusEvent } from 'react'\nimport { CalendarIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport { Button } from '#components/actions/Button'\nimport { IconButton } from '#components/actions/IconButton'\nimport { Popover } from '#components/overlays/Popover'\nimport { Calendar } from '#components/inputs/Calendar'\nimport { DateInput } from '#components/inputs/DateInput'\nimport { DateTimeInput } from '#components/inputs/DateTimeInput'\nimport { Field } from '#components/inputs/Field'\nimport { Fieldset } from '#components/inputs/Fieldset'\nimport { TimeInput } from '#components/inputs/TimeInput'\nimport { FieldContext } from '#components/inputs/internal/FieldContext'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\nimport { hasError } from '#components/inputs/internal/errors'\nimport {\n  DEFAULT_LOCALE,\n  dateOf,\n  defaultHourCycle,\n  formatDate,\n  formatDateTime,\n  formatTime,\n  parseDate,\n  parseDateTime,\n  parseTime,\n  type TimeGranularity,\n  type TimeOfDay,\n} from '#components/inputs/internal/dates'\nimport { DEFAULT_DATE_TIME_LABELS, type DateTimeLabels } from '#components/inputs/internal/picker'\nimport picker from '#components/inputs/internal/picker.module.css'\nimport type { DateRangeFieldProps, DateRangeValue } from './DateRangeField'\nimport styles from './DateRangeField.module.css'\n\n/** A range offered beside the calendar: \"Last 7 days\", \"This month\". */\nexport interface DateRangePreset {\n  label: string\n  /**\n   * The range, or a function that works it out when picked (so \"today\" is always today). With a\n   * time `granularity`, a date-only end runs from the start of its first day to the end of its last.\n   */\n  value: DateRangeValue | (() => DateRangeValue)\n}\n\nexport interface DateRangePickerFieldProps extends DateRangeFieldProps {\n  /** `day` (default), or `minute`/`second` to give each end a time. */\n  granularity?: 'day' | TimeGranularity\n  /** Ranges to offer beside the calendar. */\n  presets?: readonly DateRangePreset[]\n  /** Show a clear button in each input. */\n  clearable?: boolean\n  /** Marks dates unavailable. */\n  isDateDisabled?: (date: string) => boolean\n  /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's week. */\n  firstDayOfWeek?: number\n  /** BCP 47 locale for the parts and names. Default `en-AU`. */\n  locale?: string\n  /**\n   * The zone \"today\" is read in. With a time `granularity`, each end becomes a UTC instant typed as\n   * this zone's clock, as in {@link DateTimeInput | DateTimeInput}.\n   */\n  timeZone?: string\n  /** With a time `granularity`: 12 or 24. Defaults to the locale's clock. */\n  hourCycle?: 12 | 24\n  /** Words for another language or wording. */\n  labels?: Partial<DateTimeLabels>\n}\n\nconst EMPTY: DateRangeValue = { start: '', end: '' }\nconst MIDNIGHT: TimeOfDay = { hour: 0, minute: 0, second: 0 }\nconst LAST_SECOND: TimeOfDay = { hour: 23, minute: 59, second: 59 }\n\nconst resolvePreset = (preset: DateRangePreset): DateRangeValue =>\n  typeof preset.value === 'function' ? preset.value() : preset.value\n\n/**\n * A start and end date typed part by part under one legend, with one two-month calendar for the\n * range, optional times and preset ranges.\n *\n * @privateRemarks\n * The calendar picker for a range, documented on {@link DateRangeField | DateRangeField}'s page. It\n * is a separate export rather than a `picker` prop on DateRangeField, so importing DateRangeField\n * alone doesn't bring Popover, Calendar and the typed inputs (ADR 0044). The ref goes to the\n * fieldset and `id` to the start input, as in DateRangeField.\n *\n * <DateRangePickerField label=\"Stay\" presets={presets} value={dates} onValueChange={setDates} />\n */\nexport const DateRangePickerField = forwardRef<HTMLFieldSetElement, DateRangePickerFieldProps>(\n  function DateRangePickerField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    // `layout` goes to the Fieldset (legend column for `horizontal`); the two inputs always\n    // sit side by side.\n    const { label, labelHidden, hint, description, readOnly = false, ...fieldsetProps } = fieldProps\n    const {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      startLabel = 'Start date',\n      endLabel = 'End date',\n      name,\n      disabled = false,\n      onBlur,\n      size,\n      id,\n      className,\n      granularity = 'day',\n      presets,\n      clearable = false,\n      isDateDisabled,\n      firstDayOfWeek,\n      locale = DEFAULT_LOCALE,\n      timeZone,\n      hourCycle,\n      labels: labelsProp,\n      ...restProps\n    } = rest\n\n    const [internal, setInternal] = useState<DateRangeValue>(defaultValue ?? EMPTY)\n    const [open, setOpen] = useState(false)\n    const panelRef = useRef<HTMLDivElement>(null)\n    const value = valueProp ?? internal\n\n    const setRange = (nextValue: DateRangeValue) => {\n      if (readOnly) return\n      if (valueProp === undefined) setInternal(nextValue)\n      onValueChange?.(nextValue)\n    }\n    const update = (part: keyof DateRangeValue, next: string) => {\n      setRange({ ...value, [part]: next })\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLFieldSetElement>) => {\n      const next = event.relatedTarget\n      if (\n        next instanceof Node &&\n        (event.currentTarget.contains(next) || panelRef.current?.contains(next))\n      )\n        return\n      onBlur?.(event)\n    }\n\n    const invalid = hasError(fieldsetProps.error) || undefined\n    const required = fieldsetProps.required\n    const busy = fieldsetProps.validating ? true : undefined\n\n    const labels = { ...DEFAULT_DATE_TIME_LABELS, ...labelsProp }\n    const withTime = granularity !== 'day'\n    const timeGranularity: TimeGranularity = granularity === 'second' ? 'second' : 'minute'\n    const clock = hourCycle ?? defaultHourCycle(locale)\n    const interactive = !disabled && !readOnly\n    const startDate = dateOf(value.start, timeZone)\n    const endDate = dateOf(value.end, timeZone)\n    const timeOf = (text: string) => parseDateTime(text, timeZone)?.time ?? null\n    const join = (date: string, time: TimeOfDay) => {\n      const day = parseDate(date)\n      return day ? formatDateTime({ date: day, time }, timeGranularity, timeZone) : ''\n    }\n    // An end's date bounds the other end's calendar and typing; its time doesn't.\n    const startMax = endDate ? formatDate(endDate) : max\n    const endMin = startDate ? formatDate(startDate) : min\n    const boundOf = (date: string | undefined, time: TimeOfDay) =>\n      withTime && date ? join(date, time) : date\n\n    const pickRange = (next: DateRangeValue) => {\n      if (!withTime) {\n        setRange(next)\n        if (next.start && next.end) setOpen(false)\n        return\n      }\n      setRange({\n        start: next.start ? join(next.start, timeOf(value.start) ?? MIDNIGHT) : '',\n        end: next.end ? join(next.end, timeOf(value.end) ?? LAST_SECOND) : '',\n      })\n    }\n    const presetRange = (preset: DateRangePreset): DateRangeValue => {\n      const range = resolvePreset(preset)\n      if (!withTime) return range\n      return {\n        start: parseDate(range.start) ? join(range.start, MIDNIGHT) : range.start,\n        end: parseDate(range.end) ? join(range.end, LAST_SECOND) : range.end,\n      }\n    }\n    const setTime = (part: keyof DateRangeValue, text: string) => {\n      const time = parseTime(text)\n      const date = part === 'start' ? startDate : endDate\n      if (time && date) update(part, join(formatDate(date), time))\n    }\n\n    const partProps = (part: keyof DateRangeValue) => ({\n      size,\n      name: name != null ? `${name}.${part}` : undefined,\n      value: value[part],\n      required,\n      clearable,\n      isDateDisabled,\n      firstDayOfWeek,\n      locale,\n      timeZone,\n      labels,\n      calendar: false,\n      'aria-busy': busy,\n      onValueChange: (next: string) => {\n        update(part, next)\n      },\n    })\n\n    return (\n      <Fieldset\n        ref={ref}\n        {...restProps}\n        {...fieldsetProps}\n        legend={label}\n        legendHidden={labelHidden}\n        description={description ?? hint}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(styles.root, className)}\n        onBlur={handleBlur}\n        data-picker=\"calendar\"\n      >\n        <Popover open={open && interactive} onOpenChange={setOpen}>\n          <Popover.Anchor asChild>\n            <div className={styles.parts}>\n              <Field\n                label={startLabel}\n                htmlFor={id}\n                className={styles.part}\n                error={invalid}\n                errorHidden\n                disabled={disabled}\n                readOnly={readOnly}\n              >\n                {withTime ? (\n                  <DateTimeInput\n                    id={id}\n                    {...partProps('start')}\n                    granularity={timeGranularity}\n                    hourCycle={clock}\n                    min={boundOf(min, MIDNIGHT)}\n                    max={value.end || boundOf(max, LAST_SECOND)}\n                  />\n                ) : (\n                  <DateInput id={id} {...partProps('start')} min={min} max={startMax} />\n                )}\n              </Field>\n              <Field\n                label={endLabel}\n                className={styles.part}\n                error={invalid}\n                errorHidden\n                disabled={disabled}\n                readOnly={readOnly}\n              >\n                {withTime ? (\n                  <DateTimeInput\n                    {...partProps('end')}\n                    granularity={timeGranularity}\n                    hourCycle={clock}\n                    min={value.start || boundOf(min, MIDNIGHT)}\n                    max={boundOf(max, LAST_SECOND)}\n                  />\n                ) : (\n                  <DateInput {...partProps('end')} min={endMin} max={max} />\n                )}\n              </Field>\n              <Popover.Trigger asChild>\n                <IconButton\n                  className={styles.trigger}\n                  variant=\"outline\"\n                  size={size}\n                  shape=\"square\"\n                  label={labels.openCalendar}\n                  icon={<CalendarIcon />}\n                  disabled={!interactive}\n                />\n              </Popover.Trigger>\n            </div>\n          </Popover.Anchor>\n          <Popover.Content\n            ref={panelRef}\n            className={picker.popover}\n            align=\"end\"\n            aria-label={labels.openCalendar}\n            onOpenAutoFocus={(event) => {\n              event.preventDefault()\n            }}\n          >\n            {/* The panel's own controls aren't the fieldset's: no label, error or id from it. */}\n            <FieldContext.Provider value={null}>\n              <div className={styles.panel}>\n                {presets && presets.length > 0 ? (\n                  <div role=\"group\" aria-label={labels.presets} className={styles.presets}>\n                    {presets.map((preset) => {\n                      const range = presetRange(preset)\n                      const current = range.start === value.start && range.end === value.end\n                      return (\n                        <Button\n                          key={preset.label}\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          className={styles.preset}\n                          aria-pressed={current}\n                          onClick={() => {\n                            setRange(presetRange(preset))\n                            setOpen(false)\n                          }}\n                        >\n                          {preset.label}\n                        </Button>\n                      )\n                    })}\n                  </div>\n                ) : null}\n                <div className={picker.panel}>\n                  <Calendar\n                    mode=\"range\"\n                    months={2}\n                    // The panel is a dialog: opening it moves focus to its current day.\n                    // eslint-disable-next-line jsx-a11y/no-autofocus\n                    autoFocus\n                    value={{\n                      start: startDate ? formatDate(startDate) : '',\n                      end: endDate ? formatDate(endDate) : '',\n                    }}\n                    min={min}\n                    max={max}\n                    isDateDisabled={isDateDisabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    locale={locale}\n                    timeZone={timeZone}\n                    labels={labels}\n                    onValueChange={pickRange}\n                  />\n                  {withTime ? (\n                    <div className={styles.times}>\n                      {(['start', 'end'] as const).map((part) => {\n                        const time = timeOf(value[part])\n                        return (\n                          <div key={part} className={picker.timeRow}>\n                            <span className={picker.timeLabel} aria-hidden=\"true\">\n                              {part === 'start' ? labels.startTime : labels.endTime}\n                            </span>\n                            <TimeInput\n                              aria-label={part === 'start' ? labels.startTime : labels.endTime}\n                              value={time ? formatTime(time, timeGranularity) : ''}\n                              granularity={timeGranularity}\n                              hourCycle={clock}\n                              locale={locale}\n                              size=\"sm\"\n                              labels={labels}\n                              disabled={(part === 'start' ? startDate : endDate) === null}\n                              onValueChange={(next) => {\n                                setTime(part, next)\n                              }}\n                            />\n                          </div>\n                        )\n                      })}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            </FieldContext.Provider>\n          </Popover.Content>\n        </Popover>\n      </Fieldset>\n    )\n  },\n)\n"],"mappings":"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"}