@windmorph/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,94 @@
+"use client";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps, useCalendarCell, useCalendarGrid, useDateFormatter, useLocale } from "react-aria";
+import { endOfMonth, getLocalTimeZone, isSameDay, isSameMonth, isToday, startOfWeek } from "@internationalized/date";
+//#region src/components/date-picker/CalendarGrid.tsx
+const isRangeState = (state) => "highlightedRange" in state;
+/**
+* The month grid of a date or date range picker (React Aria `useCalendarGrid`). Weekdays
+* are column headers named by their full name, which a hover shows too (M3: "the tooltip
+* is available on hover"). `month` draws one month of a multi-month list: days of other
+* months are left out, and the weekday row is for assistive technology only.
+*/
+function CalendarGrid({ state, styles, month, classNames }) {
+	const { locale } = useLocale();
+	const start = month ?? state.visibleRange.start;
+	const { gridProps, weekDays } = useCalendarGrid(month ? {
+		startDate: month,
+		endDate: endOfMonth(month),
+		weekdayStyle: "narrow"
+	} : { weekdayStyle: "narrow" }, state);
+	const longWeekday = useDateFormatter({ weekday: "long" });
+	const firstDay = startOfWeek(start, locale);
+	return /* @__PURE__ */ jsxs("table", {
+		...gridProps,
+		className: styles.grid(),
+		children: [/* @__PURE__ */ jsx("thead", {
+			className: month ? "sr-only" : void 0,
+			children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => {
+				const name = longWeekday.format(firstDay.add({ days: index }).toDate(getLocalTimeZone()));
+				return /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					abbr: name,
+					title: name,
+					className: styles.weekday({ class: classNames?.weekday }),
+					children: day
+				}, index);
+			}) })
+		}), /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, start).map((date, index) => date && (!month || isSameMonth(date, month)) ? /* @__PURE__ */ jsx(CalendarCell, {
+			state,
+			date,
+			styles,
+			shownMonth: start,
+			className: classNames?.day,
+			rangeBandClassName: classNames?.rangeBand
+		}, index) : /* @__PURE__ */ jsx("td", {
+			"aria-hidden": "true",
+			className: styles.cell()
+		}, index)) }, weekIndex)) })]
+	});
+}
+function CalendarCell({ state, date, styles, shownMonth, className, rangeBandClassName }) {
+	const ref = useRef(null);
+	const { cellProps, buttonProps, isSelected, isOutsideVisibleRange, isDisabled, isUnavailable, isPressed, formattedDate } = useCalendarCell({ date }, state, ref);
+	const isOutside = isOutsideVisibleRange || !isSameMonth(date, shownMonth);
+	const disabled = isDisabled || isUnavailable;
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: disabled || isOutside,
+		isPressed
+	}, ref);
+	let range;
+	let filled = isSelected;
+	if (isRangeState(state) && state.highlightedRange && isSelected && !isOutside) {
+		const { start, end } = state.highlightedRange;
+		const isStart = isSameDay(date, start);
+		const isEnd = isSameDay(date, end);
+		filled = isStart || isEnd;
+		range = isStart && isEnd ? void 0 : isStart ? "start" : isEnd ? "end" : "middle";
+	}
+	return /* @__PURE__ */ jsx("td", {
+		...cellProps,
+		"data-slot": "cell",
+		"data-range": range,
+		className: styles.cell({ class: range ? rangeBandClassName : void 0 }),
+		children: /* @__PURE__ */ jsx("div", {
+			...mergeProps(buttonProps, interactionProps),
+			...dataAttributes,
+			ref,
+			"data-slot": "day",
+			"data-selected": filled && !isOutside || void 0,
+			"data-in-range": range === "middle" || void 0,
+			"data-today": isToday(date, getLocalTimeZone()) && !isOutside || void 0,
+			"data-disabled": disabled || void 0,
+			"data-outside": isOutside || void 0,
+			className: styles.day({ class: className }),
+			children: formattedDate
+		})
+	});
+}
+//#endregion
+export { CalendarGrid };
+
+//# sourceMappingURL=CalendarGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.js","names":[],"sources":["../../../src/components/date-picker/CalendarGrid.tsx"],"sourcesContent":["'use client';\n\nimport {\n  endOfMonth,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isToday,\n  startOfWeek,\n  type CalendarDate,\n} from '@internationalized/date';\nimport { useRef } from 'react';\nimport {\n  mergeProps,\n  useCalendarCell,\n  useCalendarGrid,\n  useDateFormatter,\n  useLocale,\n} from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport type { datePickerStyles } from './date-picker-styles';\n\ntype AnyCalendarState = CalendarState | RangeCalendarState;\n\nconst isRangeState = (state: AnyCalendarState): state is RangeCalendarState =>\n  'highlightedRange' in state;\n\n/**\n * The month grid of a date or date range picker (React Aria `useCalendarGrid`). Weekdays\n * are column headers named by their full name, which a hover shows too (M3: \"the tooltip\n * is available on hover\"). `month` draws one month of a multi-month list: days of other\n * months are left out, and the weekday row is for assistive technology only.\n */\nexport function CalendarGrid({\n  state,\n  styles,\n  month,\n  classNames,\n}: {\n  state: AnyCalendarState;\n  styles: ReturnType<typeof datePickerStyles>;\n  month?: CalendarDate;\n  /** Consumer classes for the weekday headers and the days. */\n  classNames?:\n    | { weekday?: string | undefined; day?: string | undefined; rangeBand?: string | undefined }\n    | undefined;\n}) {\n  const { locale } = useLocale();\n  const start = month ?? state.visibleRange.start;\n  const { gridProps, weekDays } = useCalendarGrid(\n    month\n      ? { startDate: month, endDate: endOfMonth(month), weekdayStyle: 'narrow' }\n      : { weekdayStyle: 'narrow' },\n    state,\n  );\n  const longWeekday = useDateFormatter({ weekday: 'long' });\n  const firstDay = startOfWeek(start, locale);\n  // Compose always lays out six weeks, so the picker keeps its height between months.\n  return (\n    <table {...gridProps} className={styles.grid()}>\n      <thead className={month ? 'sr-only' : undefined}>\n        <tr>\n          {weekDays.map((day, index) => {\n            const name = longWeekday.format(\n              firstDay.add({ days: index }).toDate(getLocalTimeZone()),\n            );\n            return (\n              <th\n                key={index}\n                scope=\"col\"\n                abbr={name}\n                title={name}\n                className={styles.weekday({ class: classNames?.weekday })}\n              >\n                {day}\n              </th>\n            );\n          })}\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: 6 }, (_, weekIndex) => (\n          <tr key={weekIndex}>\n            {state\n              .getDatesInWeek(weekIndex, start)\n              .map((date, index) =>\n                date && (!month || isSameMonth(date, month)) ? (\n                  <CalendarCell\n                    key={index}\n                    state={state}\n                    date={date}\n                    styles={styles}\n                    shownMonth={start}\n                    className={classNames?.day}\n                    rangeBandClassName={classNames?.rangeBand}\n                  />\n                ) : (\n                  <td key={index} aria-hidden=\"true\" className={styles.cell()} />\n                ),\n              )}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nfunction CalendarCell({\n  state,\n  date,\n  styles,\n  shownMonth,\n  className,\n  rangeBandClassName,\n}: {\n  state: AnyCalendarState;\n  date: CalendarDate;\n  styles: ReturnType<typeof datePickerStyles>;\n  shownMonth: CalendarDate;\n  className: string | undefined;\n  /** Classes for a cell the range band spans. */\n  rangeBandClassName: string | undefined;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    isPressed,\n    formattedDate,\n  } = useCalendarCell({ date }, state, ref);\n  // Days of the months around this one (the docked picker shows them) can't be chosen.\n  const isOutside = isOutsideVisibleRange || !isSameMonth(date, shownMonth);\n  const disabled = isDisabled || isUnavailable;\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled || isOutside, isPressed },\n    ref,\n  );\n\n  // Range: the ends are filled circles; the days between sit on the band.\n  let range: 'start' | 'middle' | 'end' | undefined;\n  let filled = isSelected;\n  if (isRangeState(state) && state.highlightedRange && isSelected && !isOutside) {\n    const { start, end } = state.highlightedRange;\n    const isStart = isSameDay(date, start);\n    const isEnd = isSameDay(date, end);\n    filled = isStart || isEnd;\n    range = isStart && isEnd ? undefined : isStart ? 'start' : isEnd ? 'end' : 'middle';\n  }\n\n  return (\n    <td\n      {...cellProps}\n      data-slot=\"cell\"\n      data-range={range}\n      className={styles.cell({ class: range ? rangeBandClassName : undefined })}\n    >\n      <div\n        {...mergeProps(buttonProps, interactionProps)}\n        {...dataAttributes}\n        ref={ref}\n        data-slot=\"day\"\n        data-selected={(filled && !isOutside) || undefined}\n        data-in-range={range === 'middle' || undefined}\n        data-today={(isToday(date, getLocalTimeZone()) && !isOutside) || undefined}\n        data-disabled={disabled || undefined}\n        data-outside={isOutside || undefined}\n        className={styles.day({ class: className })}\n      >\n        {formattedDate}\n      </div>\n    </td>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+"use client";
+import { Button } from "../button/Button.js";
+import { DatePicker } from "./DatePicker.js";
+import { PickerDialog } from "./PickerDialog.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/date-picker/CompactDateDialog.tsx
+/**
+* A {@link DateField}'s calendar on a compact window: the modal date picker in a
+* full-screen dialog, editing a draft that Save (or Enter on a day) keeps and the close
+* button drops, as the docked calendar's OK and Cancel do. `DateField` loads this module
+* with `import()` only on compact windows, so a field on a wider window doesn't carry the
+* modal picker's code.
+*/
+function CompactDateDialog({ open, onOpenChange, value, onCommit, min, max, isDateUnavailable, yearRange, labels, classNames }) {
+	const [draft, setDraft] = useState(value);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setDraft(value);
+	}
+	const confirm = () => {
+		onCommit(draft);
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsx(PickerDialog, {
+		"aria-label": labels.calendar ?? "Choose a date",
+		open,
+		onOpenChange,
+		onConfirm: confirm,
+		fullScreen: "compact",
+		...classNames.calendar && { classNames: { panel: classNames.calendar } },
+		dismissButton: /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			onPress: () => onOpenChange(false),
+			children: labels.cancel ?? "Cancel"
+		}),
+		confirmButton: /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			onPress: confirm,
+			children: labels.ok ?? "OK"
+		}),
+		children: /* @__PURE__ */ jsx(DatePicker, {
+			value: draft,
+			onChange: setDraft,
+			min,
+			max,
+			isDateUnavailable,
+			yearRange,
+			labels,
+			classNames: {
+				day: classNames.day,
+				weekday: classNames.weekday,
+				year: classNames.item,
+				yearButton: classNames.menuButton
+			}
+		})
+	});
+}
+//#endregion
+export { CompactDateDialog };
+
+//# sourceMappingURL=CompactDateDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompactDateDialog.js","names":[],"sources":["../../../src/components/date-picker/CompactDateDialog.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate, DateValue } from '@internationalized/date';\nimport { useState } from 'react';\nimport { Button } from '../button/Button';\nimport type { DateFieldClassNames, DateFieldLabels } from './DateField';\nimport { DatePicker } from './DatePicker';\nimport { PickerDialog } from './PickerDialog';\n\n/** Props of a {@link CompactDateDialog}. */\nexport interface CompactDateDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  value: CalendarDate | null;\n  onCommit: (date: CalendarDate | null) => void;\n  min: DateValue | undefined;\n  max: DateValue | undefined;\n  isDateUnavailable: ((date: DateValue) => boolean) | undefined;\n  yearRange: [number, number];\n  labels: Partial<DateFieldLabels>;\n  /** The field's calendar parts: `calendar` styles the dialog's surface here. */\n  classNames: Pick<DateFieldClassNames, 'calendar' | 'menuButton' | 'weekday' | 'day' | 'item'>;\n}\n\n/**\n * A {@link DateField}'s calendar on a compact window: the modal date picker in a\n * full-screen dialog, editing a draft that Save (or Enter on a day) keeps and the close\n * button drops, as the docked calendar's OK and Cancel do. `DateField` loads this module\n * with `import()` only on compact windows, so a field on a wider window doesn't carry the\n * modal picker's code.\n */\nexport function CompactDateDialog({\n  open,\n  onOpenChange,\n  value,\n  onCommit,\n  min,\n  max,\n  isDateUnavailable,\n  yearRange,\n  labels,\n  classNames,\n}: CompactDateDialogProps) {\n  const [draft, setDraft] = useState(value);\n  // Each opening starts from the field's date (state adjusted while rendering, no effect).\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) setDraft(value);\n  }\n  const confirm = () => {\n    onCommit(draft);\n    onOpenChange(false);\n  };\n  return (\n    <PickerDialog\n      aria-label={labels.calendar ?? 'Choose a date'}\n      open={open}\n      onOpenChange={onOpenChange}\n      onConfirm={confirm}\n      fullScreen=\"compact\"\n      {...(classNames.calendar && { classNames: { panel: classNames.calendar } })}\n      dismissButton={\n        <Button variant=\"text\" onPress={() => onOpenChange(false)}>\n          {labels.cancel ?? 'Cancel'}\n        </Button>\n      }\n      confirmButton={\n        <Button variant=\"text\" onPress={confirm}>\n          {labels.ok ?? 'OK'}\n        </Button>\n      }\n    >\n      <DatePicker\n        value={draft}\n        onChange={setDraft}\n        min={min}\n        max={max}\n        isDateUnavailable={isDateUnavailable}\n        yearRange={yearRange}\n        labels={labels}\n        classNames={{\n          day: classNames.day,\n          weekday: classNames.weekday,\n          year: classNames.item,\n          yearButton: classNames.menuButton,\n        }}\n      />\n    </PickerDialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BA,SAAgB,kBAAkB,EAChC,MACA,cACA,OACA,UACA,KACA,KACA,mBACA,WACA,QACA,cACyB;CACzB,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,IAAI,SAAS,SAAS;EACpB,WAAW,IAAI;EACf,IAAI,MAAM,SAAS,KAAK;CAC1B;CACA,MAAM,gBAAgB;EACpB,SAAS,KAAK;EACd,aAAa,KAAK;CACpB;CACA,OACE,oBAAC,cAAD;EACE,cAAY,OAAO,YAAY;EACzB;EACQ;EACd,WAAW;EACX,YAAW;EACX,GAAK,WAAW,YAAY,EAAE,YAAY,EAAE,OAAO,WAAW,SAAS,EAAE;EACzE,eACE,oBAAC,QAAD;GAAQ,SAAQ;GAAO,eAAe,aAAa,KAAK;GACrD,UAAA,OAAO,UAAU;EACZ,CAAA;EAEV,eACE,oBAAC,QAAD;GAAQ,SAAQ;GAAO,SAAS;GAC7B,UAAA,OAAO,MAAM;EACR,CAAA;EAGV,UAAA,oBAAC,YAAD;GACE,OAAO;GACP,UAAU;GACL;GACA;GACc;GACR;GACH;GACR,YAAY;IACV,KAAK,WAAW;IAChB,SAAS,WAAW;IACpB,MAAM,WAAW;IACjB,YAAY,WAAW;GACzB;EACD,CAAA;CACW,CAAA;AAElB"}

package/dist/components/date-picker/DateField.d.ts

@@ -0,0 +1,161 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { TextFieldClassNames } from "../text-field/TextField.js";
+import { DateInputLabels } from "./DateInput.js";
+import { AriaAttributes, CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { CalendarDate, DateValue } from "@internationalized/date";
+//#region src/components/date-picker/DateField.d.ts
+/** Words of a {@link DateField}, for localisation. */
+export interface DateFieldLabels extends DateInputLabels {
+  /** The calendar icon button. @default "Open calendar" */
+  openCalendar: string;
+  /** Name of the dropdown calendar. @default "Choose a date" */
+  calendar: string;
+  /** The previous month button. @default "Previous month" */
+  previousMonth: string;
+  /** The next month button. @default "Next month" */
+  nextMonth: string;
+  /** Tooltip of the previous month button. @default "Previous month (Page Up)" */
+  previousMonthTooltip: string;
+  /** Tooltip of the next month button. @default "Next month (Page Down)" */
+  nextMonthTooltip: string;
+  /** The previous year button. @default "Previous year" */
+  previousYear: string;
+  /** The next year button. @default "Next year" */
+  nextYear: string;
+  /** Tooltip of the previous year button. @default "Previous year (Shift+Page Up)" */
+  previousYearTooltip: string;
+  /** Tooltip of the next year button. @default "Next year (Shift+Page Down)" */
+  nextYearTooltip: string;
+  /** Added to the month menu button's name. @default "Choose a month" */
+  chooseMonth: string;
+  /** Added to the year menu button's name. @default "Choose a year" */
+  chooseYear: string;
+  /** Tooltip of the month menu button. @default "Choose a month (Shift+M)" */
+  monthMenuTooltip: string;
+  /** Tooltip of the year menu button. @default "Choose a year (Shift+Y)" */
+  yearMenuTooltip: string;
+  /** Name of the month list. @default "Month" */
+  monthList: string;
+  /** Name of the year list. @default "Year" */
+  yearList: string;
+  /** The calendar's dismissing action. @default "Cancel" */
+  cancel: string;
+  /** The calendar's confirming action. @default "OK" */
+  ok: string;
+}
+export interface DateFieldClassNames extends Omit<TextFieldClassNames, 'leadingIcon' | 'prefix' | 'suffix' | 'counter'> {
+  /** The text field's root; `className` goes here too. */
+  root?: string;
+  /** The `<input>`. */
+  input?: string;
+  /**
+   * The calendar's panel: the dropdown panel, or on compact windows the full-screen
+   * dialog's surface.
+   */
+  calendar?: string;
+  /**
+   * The calendar's month and year menu buttons (on compact windows, the modal picker's one
+   * month and year button).
+   */
+  menuButton?: string;
+  /** The calendar's weekday names. */
+  weekday?: string;
+  /** Each day of the calendar. */
+  day?: string;
+  /** Each month or year in the calendar's month and year lists. */
+  item?: string;
+}
+export interface DateFieldProps extends WrapperRootDOMProps {
+  /** The field's label, e.g. "Date of birth". */
+  label: ReactNode;
+  /** The date (controlled); `null` for none. */
+  value?: CalendarDate | null;
+  /** Initial date when uncontrolled. @default null */
+  defaultValue?: CalendarDate | null;
+  /** A date was typed and committed, or picked and confirmed; `null` when cleared. */
+  onChange?: (value: CalendarDate | null) => void;
+  /** Earliest date allowed; earlier days are disabled. */
+  min?: DateValue;
+  /** Latest date allowed; later days are disabled. */
+  max?: DateValue;
+  /** Returns `true` for a day that can't be picked (it shows disabled). */
+  isDateUnavailable?: (date: DateValue) => boolean;
+  /** First and last years of the year menu; years outside min / max are disabled. @default [1900, 2100] */
+  yearRange?: [number, number];
+  /** Whether the dropdown calendar is open (controlled). */
+  open?: boolean;
+  /** Whether the dropdown calendar starts open when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the dropdown calendar opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Helper text below the field. @default the locale's format, such as "MM/DD/YYYY" in en-US */
+  supportingText?: ReactNode;
+  /** Marks the field invalid, with `errorMessage` below it. */
+  invalid?: boolean;
+  /** Error text shown below the field while it's invalid, in place of `supportingText`. */
+  errorMessage?: ReactNode;
+  /** The field must have a date. @default false */
+  required?: boolean;
+  /** The field and its calendar button can't be used. @default false */
+  disabled?: boolean;
+  /** The date can be read and focused but not changed. @default false */
+  readOnly?: boolean;
+  /**
+   * More description for the `<input>`, after the supporting or error text: the ids of
+   * elements such as a hint that the date must come after another field's.
+   */
+  'aria-describedby'?: string;
+  /** The id of an element with more details about the `<input>`. */
+  'aria-details'?: string;
+  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */
+  'aria-invalid'?: AriaAttributes['aria-invalid'];
+  /** Read as `required` when that's left out, for a form library that sets the attribute. */
+  'aria-required'?: AriaAttributes['aria-required'];
+  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */
+  'aria-readonly'?: AriaAttributes['aria-readonly'];
+  /** Form field name; the input submits the typed text. */
+  name?: string;
+  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */
+  id?: string;
+  /** Icon of the button that opens the calendar. */
+  calendarIcon?: ReactElement;
+  /**
+   * Web density of the typed field, `0` to `-3`: each step takes 4px off it (56px at 0, 44px
+   * at -3). The calendar keeps its size: M3 doesn't make date pickers denser, since their 48px
+   * day targets are part of their accessibility. Left out, the field takes the density of the
+   * nearest `ThemeProvider` or `ThemeScope`.
+   * @default 0
+   */
+  density?: Density;
+  /** Words the field and its calendar show and announce, with English defaults. */
+  labels?: Partial<DateFieldLabels>;
+  /** The text field's root. */
+  ref?: Ref<HTMLDivElement>;
+  /** The `<input>`. */
+  inputRef?: Ref<HTMLInputElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: DateFieldClassNames;
+  /** `data-*` attributes go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * M3 docked date picker: an outlined date field you can type in (no input mask; the
+ * locale's format as helper text), whose calendar button opens a calendar just below it
+ * with month and year menus, previous / next month and year buttons, the days of the
+ * months around the shown one, and Cancel / OK. On compact windows (below 600px) the
+ * button opens the modal {@link DatePicker} in a full-screen {@link PickerDialog} instead,
+ * as M3 recommends there: the 360px docked calendar doesn't fit a phone. That picker's
+ * code loads on demand, only on a compact window: when the browser is next idle, or as soon
+ * as the pointer or focus reaches the field, so it's in before the first press.
+ *
+ * @example
+ * <DateField label="Date" value={date} onChange={setDate} />
+ */
+export declare function DateField(props: DateFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DateField.d.ts.map