@pglejzer/datepicker-ui 0.0.1 → 1.1.0

package/dist/esm/shared.d.ts

@@ -0,0 +1,853 @@
+interface PlainDate {
+  readonly year: number;
+  readonly month: number;
+  readonly day: number;
+}
+interface YearMonth {
+  readonly year: number;
+  readonly month: number;
+}
+type DateInput = Date | string;
+type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+type CalendarMode = "single" | "range" | "multiple";
+type Precision = "day" | "month" | "year";
+type PageBy = "month" | "view";
+type RangeEnd = "start" | "end";
+type WeekStartOption = "auto" | "sunday" | "monday" | "saturday";
+type DatePart = "day" | "month" | "year";
+declare function weekdayNames(locale: string, width: "long" | "short" | "narrow"): readonly string[];
+interface FullDateOptions {
+  /**
+   * `false` leaves the year out, e.g. "Wednesday, October 21".
+   * @default true
+   */
+  readonly year?: boolean;
+}
+declare function formatFullDate(date: PlainDate, locale: string, options?: FullDateOptions): string;
+declare function formatMonthYear(view: YearMonth, locale: string): string;
+declare function resolveWeekStart(locale: string, option: WeekStartOption): Weekday;
+type FormatOption = "auto" | (string & Record<never, never>);
+interface FormatPattern {
+  readonly order: readonly DatePart[];
+  readonly separator: string;
+  readonly padDay: boolean;
+  readonly padMonth: boolean;
+  readonly yearDigits: 2 | 4;
+}
+declare function resolvePattern(format: FormatOption, locale: string, precision?: Precision): FormatPattern;
+interface HintLetters {
+  readonly day: string;
+  readonly month: string;
+  readonly year: string;
+}
+declare function formatHint(pattern: FormatPattern, letters?: HintLetters): string;
+declare function formatDate(date: PlainDate, pattern: FormatPattern): string;
+/** A committed date in every representation the consumer may need. */
+interface DateValue {
+  /**
+   * ISO 8601 calendar date, `YYYY-MM-DD`, whatever the display format is.
+   * With `calendar.precision` `"month"` it is `YYYY-MM` and with `"year"` it
+   * is `YYYY`.
+   */
+  readonly value: string;
+  /** The same day as a `Date` at local midnight. */
+  readonly date: Date;
+  /** The date written the way the input shows it (`ui.format`). */
+  readonly formatted: string;
+}
+/** A committed complete range. */
+interface RangeValue {
+  /** First day of the range. */
+  readonly start: DateValue;
+  /** Last day of the range, on or after `start`. */
+  readonly end: DateValue;
+}
+/** The committed value: a day (`single`), a range (`range`) or the sorted days (`multiple`). */
+type PickerValue = DateValue | RangeValue | readonly DateValue[];
+/** Accepted by `setValue()`; the shape has to match `calendar.mode`. Any date can be `"today"`. */
+type PickerValueInput = DateInput | {
+  readonly start: DateInput;
+  readonly end: DateInput;
+} | readonly DateInput[];
+/** Which view a picker shows: the calendar or the text fields. */
+type PickerView = "calendar" | "input";
+/** Payload of the `open` event. */
+interface OpenEventData {
+  /** The surface that was opened. */
+  mode: "docked" | "modal" | "inline";
+}
+/** Payload of the `close` event. */
+type CloseEventData = Record<string, never>;
+type CancelReason = "button" | "escape" | "outside" | "toggle";
+/** Payload of the `cancel` event. */
+interface CancelEventData {
+  /**
+   * What dismissed the picker without committing: `"button"` (the Cancel or
+   * close button), `"escape"`, `"outside"` (a click outside a docked picker or
+   * on the modal backdrop) or `"toggle"` (`ui.toggleButton` on an open picker).
+   */
+  reason: CancelReason;
+}
+/** Payload of the `confirm` event. */
+interface ConfirmEventData {
+  /** The committed value, or `null` when the value was cleared. */
+  value: PickerValue | null;
+  /** `true` when the commit came from `behavior.closeOnSelect` or `behavior.commitOnChange` instead of the confirm button. */
+  autoCommit: boolean;
+}
+/** Payload of the `update` event, fired by `setOptions()`. */
+interface UpdateEventData {
+  /** The options patch that was applied. */
+  options: DatepickerOptions;
+}
+/** Payload of the `select:day` event. */
+interface SelectDayEventData {
+  /**
+   * The day the user picked or typed (not yet committed in modal flow). With
+   * `calendar.precision` `"month"` or `"year"` it is the picked month or year,
+   * as its first day (`value.value` is `YYYY-MM` or `YYYY`).
+   */
+  value: DateValue;
+  /** `false` when a click in `multiple` mode removed the date from the selection. */
+  selected: boolean;
+}
+/** Payload of the `range:start` event. */
+interface RangeStartEventData {
+  /** The first day of the range that was just picked or typed. */
+  value: DateValue;
+}
+/** Payload of the `range:end` event. */
+interface RangeEndEventData {
+  /** First day of the completed range. */
+  start: DateValue;
+  /** Last day of the completed range. */
+  end: DateValue;
+}
+/** Payload of the `select:month` event. */
+interface SelectMonthEventData {
+  /** Year of the displayed month. */
+  year: number;
+  /** Chosen month, 1-12. */
+  month: number;
+}
+/** Payload of the `select:year` event. */
+interface SelectYearEventData {
+  /** Chosen year. */
+  year: number;
+}
+/** The first and last day a picker shows. */
+interface VisibleRange {
+  /** First day shown, at day precision (`value` is `YYYY-MM-DD`). */
+  readonly from: DateValue;
+  /** Last day shown, at day precision. */
+  readonly to: DateValue;
+}
+/** What moved the shown days. */
+type NavigateSource = "drag" | "wheel" | "button" | "keyboard" | "menu" | "open" | "api" | "resize" | "scroll";
+/** Payload of the `navigate` event. */
+interface NavigateEventData {
+  /** Year of the first month shown. */
+  year: number;
+  /** First month shown, 1-12. */
+  month: number;
+  /** `-1` backwards, `1` forwards, `0` when the first month shown stays. */
+  direction: -1 | 0 | 1;
+  /**
+   * What changed the shown days: a user action (`drag`, `wheel`, `button`,
+   * `keyboard`, `menu`), opening or mounting the picker (`open`), `setValue()`,
+   * `setOptions()`, `goTo()` or a value the picker sets itself, such as a
+   * range preset or a typed date (`api`), a window resize that changes the
+   * months shown (`resize`), or the range month list rendering more months
+   * (`scroll`).
+   */
+  source: NavigateSource;
+  /** First day shown. */
+  from: DateValue;
+  /** Last day shown. */
+  to: DateValue;
+}
+/**
+ * Payload of the `clear` event, fired by `clear()` and the Clear button.
+ * `clear()` also fires `input` and `change` on the input. `setValue(null)`
+ * empties the value quietly, without either.
+ */
+interface ClearEventData {
+  /** The value before clearing, or the draft when only the draft was cleared. */
+  previousValue: PickerValue | null;
+}
+/** Payload of the `switch:view` event. */
+interface SwitchViewEventData {
+  /** The view now shown. */
+  view: PickerView;
+}
+/** Why a date cannot be selected, in the order the rules are checked. */
+type UnavailableReason = "min" | "max" | "disabled" | "weekday" | "range-length" | "multiple-max";
+/** Payload of the `error` event. */
+interface ErrorEventData {
+  /** Machine readable reason. `invalid-value` is a message returned by `calendar.validate`. */
+  code: "invalid-date" | "unavailable-date" | "invalid-option" | "invalid-value";
+  /** Human readable description. */
+  message: string;
+  /** The text the user typed, for `invalid-date` and `unavailable-date`. */
+  input?: string;
+  /** Dotted path of the rejected option, for `invalid-option`. */
+  option?: string;
+  /** Why the typed date is unavailable, for `unavailable-date`. */
+  reason?: UnavailableReason;
+}
+/** Public events of a picker instance, keyed by event name. */
+interface DatepickerEventMap {
+  open: OpenEventData;
+  close: CloseEventData;
+  cancel: CancelEventData;
+  confirm: ConfirmEventData;
+  update: UpdateEventData;
+  error: ErrorEventData;
+  "select:day": SelectDayEventData;
+  "select:month": SelectMonthEventData;
+  "select:year": SelectYearEventData;
+  "range:start": RangeStartEventData;
+  "range:end": RangeEndEventData;
+  navigate: NavigateEventData;
+  "switch:view": SwitchViewEventData;
+  clear: ClearEventData;
+}
+/** Built-in theme names. */
+type ThemeName = "basic" | "m3-green" | "crane" | "crane-straight" | "m2" | "glassmorphic" | "pastel" | "ai" | "cyberpunk" | "blueprint";
+/** A label that is a plain string or a map from `Intl.PluralRules` categories to strings. `{count}` is replaced by the number. */
+type PluralLabel = string | Readonly<Partial<Record<Intl.LDMLPluralRule, string>>>;
+/** Extra presentation of a single day returned by `calendar.decorateDate`. */
+interface DateDecoration {
+  /** Class name added to the day cell. */
+  className?: string;
+  /** Show a small badge dot on the day. */
+  badge?: boolean;
+  /** Text appended to the accessible name of the day. */
+  label?: string;
+}
+/** The two ends of a range preset. */
+interface RangePresetValue {
+  /** First day of the range. */
+  start: DateInput;
+  /** Last day of the range, on or after `start`. */
+  end: DateInput;
+}
+/** A ready-made range offered next to the calendar, for example "Last 7 days". */
+interface RangePreset {
+  /** Text of the preset button. */
+  label: string;
+  /** The range, or a function that returns it (called each time the picker refreshes, so "today" stays current). */
+  value: RangePresetValue | (() => RangePresetValue);
+}
+/** Which days exist and how the weeks are laid out. */
+interface CalendarOptions {
+  /**
+   * What the user selects: one day, a range of days or any number of days.
+   * @default "single"
+   */
+  mode?: CalendarMode;
+  /**
+   * Starting value for an empty input, in the shape of `setValue()`: a date,
+   * `{ start, end }` or an array of dates, matching `calendar.mode`. Any date
+   * can be `"today"`. Text already in the input wins when it is a date (with
+   * `ui.endInput`, the two fields). The value is written to the input and the
+   * form field, and a form reset restores it. Read when `create()` runs.
+   * @default undefined
+   */
+  defaultValue?: PickerValueInput;
+  /**
+   * What one selection is: a day, a month or a year. With `"month"` the value
+   * is `YYYY-MM` and with `"year"` it is `YYYY`, both standing for the first
+   * day of the period. Only used in `single` mode (other modes report an
+   * `invalid-option` error and use `"day"`). Typed text is masked only at
+   * day precision.
+   * @default "day"
+   */
+  precision?: Precision;
+  /**
+   * How many months are shown side by side, a positive integer. Applies to
+   * the docked look (`ui.layout`) at day precision, as many as fit the width
+   * at open (up to this number). The modal and full-screen looks show one
+   * month.
+   * @default 1
+   */
+  months?: number;
+  /**
+   * How far the previous / next arrows, the swipe and the keyboard page move:
+   * `"month"` one month, `"view"` as many months as are shown.
+   * @default "view"
+   */
+  pageBy?: PageBy;
+  /**
+   * Length limits of a range in days, both ends included, and ready-made
+   * ranges (`presets`). Only used in `range` mode. Presets show as a column
+   * beside the picker when it fits, otherwise as a chip row; clicking one
+   * picks the range and follows `behavior.closeOnSelect` and
+   * `behavior.commitOnChange`.
+   * @default undefined
+   */
+  range?: {
+    minLength?: number;
+    maxLength?: number;
+    presets?: readonly RangePreset[];
+  };
+  /**
+   * Limits of a multiple selection. Only used in `multiple` mode.
+   * @default undefined
+   */
+  multiple?: {
+    max?: number;
+  };
+  /**
+   * Return `true` for a day that cannot be selected, on top of `minDate`,
+   * `maxDate`, `disabledDates` and `enabledDates`.
+   * @default undefined
+   */
+  isDateDisabled?: (date: Date) => boolean;
+  /**
+   * Weekdays that cannot be selected, `0` is Sunday and `6` is Saturday.
+   * @default []
+   */
+  disabledWeekdays?: readonly number[];
+  /**
+   * Return extra presentation for a day, or `undefined` for none.
+   * @default undefined
+   */
+  decorateDate?: (date: Date) => DateDecoration | undefined;
+  /**
+   * Content shown inside each day cell, for example a price: a string (text,
+   * never HTML), a DOM node, or `null` / `undefined` for none. The text is
+   * added to the accessible name of the day.
+   * @default undefined
+   */
+  renderDate?: (date: Date) => string | Node | null | undefined;
+  /**
+   * Field validity rule run on the presented value (`null` when empty) after
+   * `setValue()`, typed input and every commit. Return a message to mark the
+   * input invalid (`aria-invalid`, `setCustomValidity`, an `error` event with
+   * code `invalid-value`); return `null`, `undefined` or an empty string when
+   * the value is fine. It never blocks a pick or a commit.
+   * @default undefined
+   */
+  validate?: (value: PickerValue | null) => string | null | undefined;
+  /**
+   * BCP 47 locale for month and weekday names, the headline, the input format
+   * and the first day of the week. Falls back to `<html lang>`, then
+   * `navigator.language`, then `en-US`.
+   * @default the page locale
+   */
+  locale?: string;
+  /**
+   * First day of the week. `auto` follows the locale.
+   * @default "auto"
+   */
+  weekStart?: WeekStartOption;
+  /**
+   * Earliest selectable day: a `Date`, an ISO `YYYY-MM-DD` string or `"today"`.
+   * @default undefined
+   */
+  minDate?: DateInput;
+  /**
+   * Latest selectable day: a `Date`, an ISO `YYYY-MM-DD` string or `"today"`.
+   * @default undefined
+   */
+  maxDate?: DateInput;
+  /**
+   * Days that cannot be selected.
+   * @default []
+   */
+  disabledDates?: readonly DateInput[];
+  /**
+   * When set, only these days can be selected.
+   * @default undefined
+   */
+  enabledDates?: readonly DateInput[];
+}
+/** Presentation and display behaviour. */
+interface UIOptions {
+  /**
+   * `auto` opens the docked popover on wide viewports and the modal dialog on
+   * compact ones; `docked` and `modal` force one of them.
+   * @default "auto"
+   */
+  displayMode?: "auto" | "docked" | "modal";
+  /**
+   * The look of the calendar on any surface. `"auto"` gives each surface its
+   * own look: docked for the popover and inline, modal for the dialog (full
+   * screen for a range below `ui.fullscreen`). `"docked"` uses the docked
+   * header with month and year menus everywhere. `"modal"` uses the headline,
+   * a month row with arrows on every page, and month and year grids
+   * everywhere. `"fullscreen"` gives a range picker the full-screen layout: in
+   * a dialog at every window width, inline sized to the container. Other
+   * modes, and the popover, treat it as `"modal"`. An inline calendar with the
+   * modal look fits its rows to the month unless `ui.fixedWeeks` is set.
+   * @default "auto"
+   */
+  layout?: "auto" | "docked" | "modal" | "fullscreen";
+  /**
+   * Render the calendar permanently into a container instead of opening it.
+   * `container` is a selector or an element.
+   * @default { enabled: false }
+   */
+  inline?: {
+    enabled?: boolean;
+    container?: string | HTMLElement;
+    /**
+     * `false` leaves out the headline (the modal title, selected value and
+     * view switch, or the range header), for a host that shows its own. The
+     * full-screen top bar keeps its close and save buttons.
+     * @default true
+     */
+    headline?: boolean;
+    /**
+     * `"caption"` shows the month and year as plain text next to the arrows,
+     * with no month or year menus. Day precision only.
+     * @default "menus"
+     */
+    navigation?: "menus" | "caption";
+    /**
+     * `false` stops the inline calendar from announcing selection changes, for
+     * a host that announces them itself. Month changes and errors are still
+     * announced.
+     * @default true
+     */
+    announceSelection?: boolean;
+  };
+  /**
+   * `auto` follows the locale's numeric order and separators; otherwise a
+   * pattern built from `d dd M MM yy yyyy` and one separator of `/ . - space`.
+   * With `calendar.precision` `"month"` or `"year"` the pattern may leave out
+   * the finer parts (`"MM/yyyy"`, `"yyyy-MM"`, and for `"year"` also `"yyyy"`).
+   * @default "auto"
+   */
+  format?: FormatOption;
+  /**
+   * Theme applied to the picker surface: `basic`, `m3-green`, `crane`,
+   * `crane-straight`, `m2`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`,
+   * `blueprint`. `basic` and `blueprint` follow `colorScheme`, the others have
+   * one fixed scheme.
+   * @default "basic"
+   */
+  theme?: ThemeName;
+  /**
+   * `auto` detects the scheme when the picker opens: the first opaque
+   * `background-color` from the input up to `<html>` decides (dark when its
+   * luminance is low); without one, the page `color-scheme` decides (`dark`
+   * is dark, `light dark` follows the OS, anything else is light). An inline
+   * picker follows later page changes. `light` and `dark` force one. Themes
+   * with a single version ignore this option.
+   * @default "auto"
+   */
+  colorScheme?: "auto" | "light" | "dark";
+  /**
+   * Range pickers in a dialog open full screen below this window width:
+   * `true` below 600 px, a number below that many px (for example 840), `false`
+   * never. With `displayMode: "auto"` the surface is docked from 600 px, so a
+   * value above 600 only matters with `displayMode: "modal"`. Used with
+   * `ui.layout` `"auto"` and `"modal"`. `"fullscreen"` opens full screen at
+   * every width and `"docked"` never does. Decided when the picker opens.
+   * @default true
+   */
+  fullscreen?: boolean | number;
+  /**
+   * Selector or element that opens the picker besides the input, for example
+   * a calendar icon button.
+   * @default undefined
+   */
+  toggleButton?: string | HTMLElement;
+  /**
+   * Show ISO week numbers before each row.
+   * @default false
+   */
+  weekNumbers?: boolean;
+  /**
+   * Show the days of neighbouring months in the first and last rows. `true`
+   * and `{}` show them selectable; `{ selectable: false }` shows them dimmed
+   * and inert.
+   * @default false
+   */
+  outsideDays?: boolean | {
+    selectable?: boolean;
+  };
+  /**
+   * Always render six week rows, so the calendar keeps its height from month
+   * to month.
+   * @default false
+   */
+  fixedWeeks?: boolean;
+  /**
+   * Years offered in the year selection, counted from the current year.
+   * @default { before: 100, after: 20 }
+   */
+  yearRange?: {
+    before?: number;
+    after?: number;
+  };
+  /**
+   * Show the Today button in the footer.
+   * @default false
+   */
+  todayButton?: boolean;
+  /**
+   * Show the Clear button in the footer. `true` also clears the input; pass
+   * `{ clearInput: false }` to keep the typed text.
+   * @default false
+   */
+  clearButton?: boolean | {
+    clearInput?: boolean;
+  };
+  /**
+   * Show the footer with the action buttons. Unset means shown, except in
+   * inline mode.
+   * @default undefined
+   */
+  footer?: boolean;
+  /**
+   * Play motion. Always off with `prefers-reduced-motion: reduce`.
+   * @default true
+   */
+  animation?: boolean;
+  /**
+   * Keep the page scrollable while the modal is open.
+   * @default false
+   */
+  allowPageScroll?: boolean;
+  /**
+   * Extra class names added to the picker surface.
+   * @default ""
+   */
+  cssClass?: string;
+  /**
+   * Selector or element the modal dialog is appended to. Defaults to the
+   * picker host.
+   * @default undefined
+   */
+  appendTo?: string | HTMLElement;
+  /**
+   * Drag, wheel and swipe between months.
+   * @default true
+   */
+  swipe?: boolean;
+  /**
+   * Show the button that switches between the calendar and the text input
+   * view, where the mode and look support it.
+   * @default true
+   */
+  viewSwitch?: boolean;
+  /**
+   * View shown when the picker opens, where the input view exists: every
+   * range picker, and a single picker with the modal or full-screen look
+   * (`ui.layout`), at day precision.
+   * @default "calendar"
+   */
+  initialView?: PickerView;
+  /**
+   * Mask the text typed into the input to `ui.format` (digits only, separators added).
+   * Single mode and the split range fields (`ui.endInput`), day precision only.
+   * The fields of the picker's input view are always masked.
+   * @default false
+   */
+  mask?: boolean;
+  /**
+   * Selector or element of the page's second `<input>`, which turns a range
+   * picker into a Start / End pair: the main input holds the start, this one
+   * the end. Read when `create()` runs; only used in `range` mode. Typing
+   * commits only a full pair (or two empty fields). Clicking a field opens
+   * the picker on that end, and the field being picked gets the class
+   * `dp-ui__input--active`.
+   * @default undefined
+   */
+  endInput?: string | HTMLElement;
+  /**
+   * First calendar panel when the picker opens: the day grid, the month list
+   * (docked look) or grid (modal look), or the year list or grid.
+   * `initialView: "input"` wins. Ignored in `range` mode, with
+   * `ui.inline.navigation: "caption"` and when `calendar.precision` is not
+   * `"day"`.
+   * @default "day"
+   */
+  startView?: "day" | "month" | "year";
+}
+/** Texts used by buttons and assistive technology. Month and weekday names come from `Intl`. */
+interface LabelsOptions {
+  /**
+   * Modal header supporting text.
+   * @default "Select date"
+   */
+  title?: string;
+  /**
+   * Header supporting text with `calendar.precision: "month"`.
+   * @default "Select month"
+   */
+  monthTitle?: string;
+  /**
+   * Header supporting text with `calendar.precision: "year"`.
+   * @default "Select year"
+   */
+  yearTitle?: string;
+  /**
+   * Modal headline while no date is selected.
+   * @default "No date selected"
+   */
+  noDate?: string;
+  /**
+   * Confirm button.
+   * @default "OK"
+   */
+  confirm?: string;
+  /**
+   * Cancel button.
+   * @default "Cancel"
+   */
+  cancel?: string;
+  /**
+   * Today button.
+   * @default "Today"
+   */
+  today?: string;
+  /**
+   * Clear button.
+   * @default "Clear"
+   */
+  clear?: string;
+  /**
+   * Accessible name of the toggle button.
+   * @default "Choose date"
+   */
+  openCalendar?: string;
+  /**
+   * Previous month button.
+   * @default "Previous month"
+   */
+  previousMonth?: string;
+  /**
+   * Next month button.
+   * @default "Next month"
+   */
+  nextMonth?: string;
+  /**
+   * Previous year button.
+   * @default "Previous year"
+   */
+  previousYear?: string;
+  /**
+   * Next year button.
+   * @default "Next year"
+   */
+  nextYear?: string;
+  /**
+   * Month menu button and list.
+   * @default "Choose month"
+   */
+  chooseMonth?: string;
+  /**
+   * Year menu button and list.
+   * @default "Choose year"
+   */
+  chooseYear?: string;
+  /**
+   * Week number column header.
+   * @default "Week"
+   */
+  weekNumber?: string;
+  /**
+   * Message for a typed text that is not a date.
+   * @default "Enter a valid date"
+   */
+  invalidDate?: string;
+  /**
+   * Message for a typed date that is disabled or out of range.
+   * @default "This date is not available"
+   */
+  unavailableDate?: string;
+  /**
+   * Header supporting text in `range` mode.
+   * @default "Select dates"
+   */
+  rangeTitle?: string;
+  /**
+   * Headline placeholder for the missing start of a range.
+   * @default "Start"
+   */
+  rangeStart?: string;
+  /**
+   * Headline placeholder for the missing end of a range.
+   * @default "End"
+   */
+  rangeEnd?: string;
+  /**
+   * Added to the accessible name of the days between the start and the end of
+   * a range.
+   * @default "In range"
+   */
+  inRange?: string;
+  /**
+   * Headline in `multiple` mode; `{count}` is the number of selected days.
+   * @default "{count} selected"
+   */
+  multipleSelected?: PluralLabel;
+  /**
+   * Save button of the fullscreen range picker.
+   * @default "Save"
+   */
+  save?: string;
+  /**
+   * Close button of the fullscreen range picker.
+   * @default "Close"
+   */
+  close?: string;
+  /**
+   * Accessible name of the button that shows the text input view.
+   * @default "Switch to text input"
+   */
+  switchToInput?: string;
+  /**
+   * Accessible name of the button that shows the calendar view.
+   * @default "Switch to calendar"
+   */
+  switchToCalendar?: string;
+  /**
+   * Label of the date text field in `single` mode.
+   * @default "Date"
+   */
+  dateField?: string;
+  /**
+   * Label of the start date text field in `range` mode.
+   * @default "Start date"
+   */
+  startDateField?: string;
+  /**
+   * Label of the end date text field in `range` mode.
+   * @default "End date"
+   */
+  endDateField?: string;
+  /**
+   * Message for a range whose end is before its start or breaks the length limits.
+   * @default "End date must be on or after the start date"
+   */
+  invalidRange?: string;
+  /**
+   * Message for a typed date before `minDate`; `{date}` is the minimum date.
+   * @default "Enter a date on or after {date}"
+   */
+  beforeMinDate?: string;
+  /**
+   * Message for a typed date after `maxDate`; `{date}` is the maximum date.
+   * @default "Enter a date on or before {date}"
+   */
+  afterMaxDate?: string;
+  /**
+   * Accessible name of the range presets group.
+   * @default "Presets"
+   */
+  presets?: string;
+  /**
+   * Name of the Page Up key in the keyboard shortcut tooltips of the navigation buttons.
+   * @default "Page Up"
+   */
+  pageUpKey?: string;
+  /**
+   * Name of the Page Down key in the keyboard shortcut tooltips of the navigation buttons.
+   * @default "Page Down"
+   */
+  pageDownKey?: string;
+  /**
+   * Name of the Shift key in the keyboard shortcut tooltips (`Shift+Page Up`, `Shift+M`).
+   * @default "Shift"
+   */
+  shiftKey?: string;
+  /**
+   * Placeholder letters for the day in the format hint shown under the field (Polish: "dd").
+   * @default "dd"
+   */
+  hintDay?: string;
+  /**
+   * Placeholder letters for the month in the format hint shown under the field (Polish: "mm").
+   * @default "mm"
+   */
+  hintMonth?: string;
+  /**
+   * Placeholder letters for the year in the format hint shown under the field (Polish: "rrrr").
+   * A two-digit year format uses the first two characters.
+   * @default "yyyy"
+   */
+  hintYear?: string;
+}
+/** Interaction rules. */
+interface BehaviorOptions {
+  /**
+   * Commit and close as soon as a day is picked.
+   * @default false
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Close the picker when it is cancelled.
+   * @default true
+   */
+  closeOnCancel?: boolean;
+  /**
+   * Commit every change to the input immediately, without the confirm button.
+   * @default false
+   */
+  commitOnChange?: boolean;
+  /**
+   * Keep the picker open when the user clicks outside of it.
+   * @default false
+   */
+  ignoreOutsideClick?: boolean;
+  /**
+   * Move focus back to the input when the picker closes.
+   * @default true
+   */
+  returnFocus?: boolean;
+  /**
+   * Custom instance id for `DatepickerUI.getById()`.
+   * @default undefined
+   */
+  id?: string;
+}
+/** User callbacks, called through the event bridge. */
+interface CallbacksOptions {
+  /** Called when the picker opens. */
+  onOpen?: (data: OpenEventData) => void;
+  /** Called when the picker closes. */
+  onClose?: (data: CloseEventData) => void;
+  /** Called when the picker is dismissed without committing. */
+  onCancel?: (data: CancelEventData) => void;
+  /** Called when a value is committed or cleared. */
+  onConfirm?: (data: ConfirmEventData) => void;
+  /** Called after `setOptions()` applied a patch. */
+  onUpdate?: (data: UpdateEventData) => void;
+  /** Called for invalid typed dates and rejected options. */
+  onError?: (data: ErrorEventData) => void;
+  /** Called when a day is picked, or typed in the text fields. */
+  onSelectDay?: (data: SelectDayEventData) => void;
+  /** Called when a month is chosen in the month menu. */
+  onSelectMonth?: (data: SelectMonthEventData) => void;
+  /** Called when a year is chosen. */
+  onSelectYear?: (data: SelectYearEventData) => void;
+  /** Called when the first day of a range is picked or typed. */
+  onRangeStart?: (data: RangeStartEventData) => void;
+  /** Called when the range is completed. */
+  onRangeEnd?: (data: RangeEndEventData) => void;
+  /** Called when the days shown change, and once when the picker is opened or mounted. */
+  onNavigate?: (data: NavigateEventData) => void;
+  /** Called when the picker switches between the calendar and the text fields. */
+  onSwitchView?: (data: SwitchViewEventData) => void;
+  /** Called when `clear()` or the Clear button clears the value or the draft. */
+  onClear?: (data: ClearEventData) => void;
+}
+/** Options accepted by the `DatepickerUI` constructor and `setOptions()`. */
+interface DatepickerOptions {
+  /** Days, locale and week layout. */
+  calendar?: CalendarOptions;
+  /** Presentation and display behaviour. */
+  ui?: UIOptions;
+  /** Button texts and accessible names. */
+  labels?: LabelsOptions;
+  /** Interaction rules. */
+  behavior?: BehaviorOptions;
+  /** Event callbacks. */
+  callbacks?: CallbacksOptions;
+}
+export { PlainDate as $, SelectMonthEventData as A, formatHint as B, PickerValue as C, RangeStartEventData as D, RangeEndEventData as E, VisibleRange as F, formatFullDate as G, DatePart as H, FormatOption as I, weekdayNames as J, formatMonthYear as K, FormatPattern as L, SwitchViewEventData as M, UnavailableReason as N, RangeValue as O, UpdateEventData as P, RangeEnd as Q, HintLetters as R, OpenEventData as S, PickerView as T, FullDateOptions as U, resolvePattern as V, WeekStartOption as W, PageBy as X, CalendarMode as Y, Precision as Z, DateValue as _, DatepickerOptions as a, NavigateEventData as b, RangePreset as c, UIOptions as d, Weekday as et, CancelEventData as f, ConfirmEventData as g, CloseEventData as h, DateDecoration as i, SelectYearEventData as j, SelectDayEventData as k, RangePresetValue as l, ClearEventData as m, CalendarOptions as n, LabelsOptions as o, CancelReason as p, resolveWeekStart as q, CallbacksOptions as r, PluralLabel as s, BehaviorOptions as t, YearMonth as tt, ThemeName as u, DatepickerEventMap as v, PickerValueInput as w, NavigateSource as x, ErrorEventData as y, formatDate as z };