@mitcsutt/kiln-ui 0.5.0 → 0.7.0

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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"}

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

@@ -1,2 +1,4 @@
 export { DateRangeField } from './DateRangeField.js';
 export type { DateRangeFieldProps, DateRangeValue } from './DateRangeField.js';
+export { DateRangePickerField } from './DateRangePickerField.js';
+export type { DateRangePickerFieldProps, DateRangePreset } from './DateRangePickerField.js';

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

@@ -0,0 +1,17 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type DateTimeInputProps } from '../DateTimeInput/index.js';
+export interface DateTimeFieldProps extends FieldLabelProps, Omit<DateTimeInputProps, 'invalid' | keyof FieldLabelProps> {
+}
+/**
+ * A labelled date and time, typed part by part or picked from a calendar.
+ *
+ * @remarks
+ * `DateTimeField` is a {@link Field | Field} around a {@link DateTimeInput | DateTimeInput}.
+ *
+ * @privateRemarks
+ * Label + DateTimeInput + description + error. Input props (`value`, `timeZone`…) and the ref
+ * go to the input's box; `className`/`style` go to the wrapper.
+ *
+ * <DateTimeField label="Publish at" timeZone="UTC" value={at} onValueChange={setAt} />
+ */
+export declare const DateTimeField: import("react").ForwardRefExoticComponent<DateTimeFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/DateTimeField/DateTimeField.js

@@ -0,0 +1,26 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { DateTimeInput as n } from "../DateTimeInput/DateTimeInput.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/inputs/DateTimeField/DateTimeField.tsx
+var a = r(function(r, a) {
+	let [o, s] = t(r), { id: c, disabled: l, className: u, style: d, ...f } = s;
+	return /* @__PURE__ */ i(e, {
+		...o,
+		htmlFor: c,
+		disabled: l,
+		className: u,
+		style: d,
+		children: /* @__PURE__ */ i(n, {
+			ref: a,
+			id: c,
+			disabled: l,
+			...f
+		})
+	});
+});
+//#endregion
+export { a as DateTimeField };
+
+//# sourceMappingURL=DateTimeField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.js","names":["DateTimeField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","Field","id","DateTimeInput"],"sources":["../../../../src/components/inputs/DateTimeField/DateTimeField.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport { DateTimeInput, type DateTimeInputProps } from '#components/inputs/DateTimeInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface DateTimeFieldProps\n  extends FieldLabelProps, Omit<DateTimeInputProps, 'invalid' | keyof FieldLabelProps> {}\n\n/**\n * A labelled date and time, typed part by part or picked from a calendar.\n *\n * @remarks\n * `DateTimeField` is a {@link Field | Field} around a {@link DateTimeInput | DateTimeInput}.\n *\n * @privateRemarks\n * Label + DateTimeInput + description + error. Input props (`value`, `timeZone`…) and the ref\n * go to the input's box; `className`/`style` go to the wrapper.\n *\n * <DateTimeField label=\"Publish at\" timeZone=\"UTC\" value={at} onValueChange={setAt} />\n */\nexport const DateTimeField = forwardRef<HTMLDivElement, DateTimeFieldProps>(\n  function DateTimeField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, ...inputRest } = rest\n    return (\n      <Field {...fieldProps} htmlFor={id} disabled={disabled} className={className} style={style}>\n        <DateTimeInput ref={ref} id={id} disabled={disabled} {...inputRest} />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAoBA,IAAaA,IAAgBC,EAC3B,SAAuB,GAAO,GAAK;CACjC,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,GAAGC,MAAcH;CACzD,OACE,kBAACI,GAAD;EAAO,GAAIL;EAAY,SAASM;EAAc;EAAqB;EAAkB;EACnF,UAAA,kBAACC,GAAD;GAAoB;GAAS;GAAc;GAAU,GAAIH;EAAY,CAAA;CAChE,CAAA;AAEX,CACF"}

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

@@ -0,0 +1,2 @@
+export { DateTimeField } from './DateTimeField.js';
+export type { DateTimeFieldProps } from './DateTimeField.js';

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

@@ -0,0 +1,83 @@
+import { type FocusEventHandler, type HTMLAttributes } from 'react';
+import type { Size } from '../../../utils/tokens.js';
+import { type TimeGranularity } from '../internal/dates.js';
+import { type DateTimeLabels } from '../internal/picker.js';
+export interface DateTimeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onBlur' | 'onFocus'> {
+    /**
+     * `YYYY-MM-DDTHH:mm` (a wall-clock time, like `datetime-local`), or with `timeZone` the UTC
+     * instant `YYYY-MM-DDTHH:mm:ssZ`. `''` until every part is filled in.
+     */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Makes the value an instant: it's shown and typed as the wall clock in this zone (an IANA
+     * name such as `Australia/Perth`, or `UTC`) and reported in UTC. The zone's short name shows
+     * in the box.
+     */
+    timeZone?: string;
+    /** `minute` (default) or `second`: the smallest part shown and kept. */
+    granularity?: TimeGranularity;
+    /** 12 (with am/pm) or 24. Defaults to the locale's own clock. */
+    hourCycle?: 12 | 24;
+    /** Earliest date-time, in the same form as `value`. Earlier days can't be picked. */
+    min?: string;
+    /** Latest date-time, in the same form as `value`. */
+    max?: string;
+    /** Marks dates unavailable, in the calendar and when typed. */
+    isDateDisabled?: (date: string) => boolean;
+    /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's own week. */
+    firstDayOfWeek?: number;
+    /** BCP 47 locale for the order of the parts, the clock and the calendar. Default `en-AU`. */
+    locale?: string;
+    /** Show the calendar button. Default `true`. */
+    calendar?: boolean;
+    /** Show a clear button while there's a value. */
+    clearable?: boolean;
+    /** Submits the value (`''` when incomplete). */
+    name?: string;
+    form?: string;
+    size?: Size;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */
+    invalid?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fires once focus leaves the whole control, calendar included. */
+    onBlur?: FocusEventHandler<HTMLElement>;
+    onFocus?: FocusEventHandler<HTMLElement>;
+    labels?: Partial<DateTimeLabels>;
+}
+/** Whether a date-time `value` falls outside `min`/`max` or on a disabled date. */
+export declare function isDateTimeOutOfRange(value: string, { min, max, isDateDisabled, timeZone, }: {
+    min?: string;
+    max?: string;
+    isDateDisabled?: (date: string) => boolean;
+    timeZone?: string;
+}): boolean;
+/**
+ * A date and a time typed part by part, with a calendar and the time together in one panel.
+ *
+ * @remarks
+ * `DateTimeInput` holds a moment as an ISO string. Without `timeZone` it's a wall-clock time
+ * (`2026-10-15T14:30`), the same as a native `datetime-local`: right for "the meeting is at 2:30"
+ * wherever the reader is. With `timeZone` it's an instant (`2026-10-15T03:30:00Z`), shown and typed
+ * as the clock in that zone, with the zone's name in the box: right for logs, deadlines and
+ * anything stored as a timestamp.
+ *
+ * The parts type like {@link DateInput | DateInput} and {@link TimeInput | TimeInput}. The
+ * calendar button opens a {@link Calendar | Calendar} with the time beneath it; picking a day keeps
+ * the time (or starts at midnight), and the panel stays open to set the time. For the usual
+ * labelled field, use {@link DateTimeField | DateTimeField}.
+ *
+ * @privateRemarks
+ * One draft holds the date and time; the panel's Calendar and TimeInput are views of it. A
+ * zoned value is converted to wall time on the way in (`parseDateTime`) and back to UTC on the
+ * way out (`formatDateTime`), so the parts always show the zone's clock. The ref goes to the box.
+ *
+ * <DateTimeInput timeZone="UTC" value={publishAt} onValueChange={setPublishAt} />
+ */
+export declare const DateTimeInput: import("react").ForwardRefExoticComponent<DateTimeInputProps & import("react").RefAttributes<HTMLDivElement>>;