@windmorph/react 0.2.2 → 0.2.4

package/dist/components/time-picker/TimeField.d.ts

@@ -29,6 +29,10 @@ export interface TimeFieldClassNames extends Omit<TextFieldClassNames, 'leadingI
   root?: string;
   /** The clock icon button. */
   button?: string;
+  /** The docked list of times: its surface. */
+  list?: string;
+  /** Each time of the docked list. */
+  option?: string;
   /** The picker dialog's surface. */
   picker?: string;
 }
@@ -49,6 +53,20 @@ export interface TimeFieldProps extends WrapperRootDOMProps {
   hourCycle?: 12 | 24;
   /** The field's style. @default "outlined" */
   variant?: 'outlined' | 'filled';
+  /**
+   * Where the picker opens. `dialog` is the M3 time picker in a dialog. `docked` is a list of
+   * times under the field (every `step` minutes, within `min` and `max`) on windows 600px wide
+   * or more, for forms with many times; narrower windows still get the dialog. Not in the M3
+   * spec, which has no docked time picker.
+   * @default "dialog"
+   */
+  presentation?: 'dialog' | 'docked';
+  /**
+   * Minutes between the times a docked list offers, counted from midnight; 5 at least. It
+   * only shapes the list: any time can still be typed.
+   * @default 30
+   */
+  step?: number;
   /** Whether the picker is open (controlled). */
   open?: boolean;
   /** Whether the picker starts open when uncontrolled. @default false */
@@ -89,7 +107,10 @@ export interface TimeFieldProps extends WrapperRootDOMProps {
    * @default 0
    */
   density?: Density;
-  /** Words the field and its picker show and announce, with English defaults. */
+  /**
+   * Words the field and its picker show and announce, with English defaults.
+   * A {@link LabelsProvider} sets them for the whole app.
+   */
   labels?: Partial<TimeFieldLabels>;
   /** The text field's root. */
   ref?: Ref<HTMLDivElement>;
@@ -108,7 +129,8 @@ export interface TimeFieldProps extends WrapperRootDOMProps {
  * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact
  * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,
  * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens
- * the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.
+ * the {@link TimePicker} in a dialog, typed first, or with `presentation="docked"` a list of
+ * times under the field. The time sibling of `DateField`.
  *
  * @example
  * <TimeField label="Opens at" value={time} onChange={setTime} />

package/dist/components/time-picker/TimeField.js

@@ -1,20 +1,23 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useLabels } from "../labels/use-labels.js";
 import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.js";
 import { IconButton } from "../icon-button/IconButton.js";
 import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
 import { ariaFlag, pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { COMPACT_WINDOW, useMediaQuery } from "../date-picker/use-media-query.js";
 import { TextField } from "../text-field/TextField.js";
 import { ScheduleIcon } from "../date-picker/picker-icons.js";
 import { localeHourCycle } from "./hour-cycle.js";
 import { formatTime, parseTimeText } from "./time-format.js";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useLocale, useObjectRef } from "react-aria";
 import { useOverlayTriggerState } from "react-stately";
 import { useControlledState } from "react-stately/useControlledState";
 //#region src/components/time-picker/TimeField.tsx
 const pickerDialog = onDemand(() => import("./TimeFieldDialog.js").then((module) => module.TimeFieldDialog));
+const dockedList = onDemand(() => import("./TimeFieldList.js").then((module) => module.TimeFieldList));
 const DEFAULT_LABELS = {
 	timeOutOfRange: "Time out of range",
 	openPicker: "Open time picker",
@@ -37,7 +40,8 @@ const DEFAULT_LABELS = {
 * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact
 * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,
 * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens
-* the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.
+* the {@link TimePicker} in a dialog, typed first, or with `presentation="docked"` a list of
+* times under the field. The time sibling of `DateField`.
 *
 * @example
 * <TimeField label="Opens at" value={time} onChange={setTime} />
@@ -48,19 +52,23 @@ function TimeField(props) {
 		directionRef
 	}) });
 }
-function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min, max, hourCycle: hourCycleProp, variant = "outlined", open, defaultOpen, onOpenChange, supportingText, invalid: invalidProp, errorMessage, required: requiredProp, disabled, readOnly: readOnlyProp, "aria-describedby": describedBy, "aria-details": details, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-readonly": ariaReadonly, name, id, clockIcon, density, labels: labelsProp, ref, inputRef, className, style, classNames, directionRef, ...rest }) {
+function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min, max, hourCycle: hourCycleProp, variant = "outlined", presentation = "dialog", step = 30, open, defaultOpen, onOpenChange, supportingText, invalid: invalidProp, errorMessage, required: requiredProp, disabled, readOnly: readOnlyProp, "aria-describedby": describedBy, "aria-details": details, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-readonly": ariaReadonly, name, id, clockIcon, density, labels: labelsProp, ref, inputRef, className, style, classNames, directionRef, ...rest }) {
 	const { root, rest: aria } = splitRootProps(rest, { wrapper: true });
 	const invalid = invalidProp ?? ariaFlag(ariaInvalid);
 	const required = requiredProp ?? ariaFlag(ariaRequired);
 	const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);
 	const { locale } = useLocale();
 	const hourCycle = hourCycleProp ?? localeHourCycle(locale);
-	const hint = labelsProp?.timeFormatHint ?? (hourCycle === 24 ? "HH:MM" : "H:MM AM");
+	const words = useLabels([
+		"TimePicker",
+		"PickerDialog",
+		"TimeField"
+	], DEFAULT_LABELS, labelsProp);
+	const hint = words.timeFormatHint ?? (hourCycle === 24 ? "HH:MM" : "H:MM AM");
 	const labels = {
-		...DEFAULT_LABELS,
+		...words,
 		timeFormatHint: hint,
-		invalidTime: `Enter a time such as ${hint}`,
-		...labelsProp
+		invalidTime: words.invalidTime ?? `Enter a time such as ${hint}`
 	};
 	const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);
 	const show = (time) => time ? formatTime(time, locale, hourCycle) : "";
@@ -80,7 +88,10 @@ function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min,
 	});
 	const fieldRef = useRef(null);
 	const domInputRef = useObjectRef(inputRef);
-	usePreloadOnIntent(fieldRef, pickerDialog.preload, true);
+	const compact = useMediaQuery(COMPACT_WINDOW);
+	const docked = presentation === "docked" && !compact;
+	const listId = useId();
+	usePreloadOnIntent(fieldRef, docked ? dockedList.preload : pickerDialog.preload, true);
 	const [opened, setOpened] = useState(overlay.isOpen);
 	if (overlay.isOpen && !opened) setOpened(true);
 	const outOfRange = (time) => min !== void 0 && time.compare(min) < 0 || max !== void 0 && time.compare(max) > 0;
@@ -111,7 +122,7 @@ function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min,
 		}
 		accept(time);
 	};
-	const { root: rootClassName, button, picker, ...fieldClassNames } = classNames ?? {};
+	const { root: rootClassName, button, picker, list, option, ...fieldClassNames } = classNames ?? {};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TextField, {
 		...root,
 		...pickDescriptionAria(aria),
@@ -158,8 +169,9 @@ function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min,
 			variant: "standard",
 			icon: clockIcon ?? /* @__PURE__ */ jsx(ScheduleIcon, {}),
 			"aria-label": labels.openPicker,
-			"aria-haspopup": "dialog",
+			"aria-haspopup": docked ? "listbox" : "dialog",
 			"aria-expanded": overlay.isOpen,
+			...docked && overlay.isOpen && { "aria-controls": listId },
 			disabled: disabled || readOnly,
 			className: button,
 			onPress: (event) => {
@@ -167,7 +179,23 @@ function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min,
 				overlay.open();
 			}
 		})
-	}), opened ? /* @__PURE__ */ jsx(pickerDialog.Component, {
+	}), !opened ? null : docked ? /* @__PURE__ */ jsx(dockedList.Component, {
+		state: overlay,
+		triggerRef: fieldRef,
+		id: listId,
+		value,
+		onCommit: accept,
+		min,
+		max,
+		step,
+		hourCycle,
+		label: labels.title,
+		density,
+		classNames: {
+			list,
+			option
+		}
+	}) : /* @__PURE__ */ jsx(pickerDialog.Component, {
 		open: overlay.isOpen,
 		onOpenChange: overlay.setOpen,
 		value,
@@ -175,7 +203,7 @@ function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min,
 		hourCycle,
 		labels,
 		className: picker
-	}) : null] });
+	})] });
 }
 //#endregion
 export { TimeField };

package/dist/components/time-picker/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-picker/TimeField.tsx"],"sourcesContent":["'use client';\n\nimport type { Time } from '@internationalized/date';\nimport {\n  useRef,\n  useState,\n  type AriaAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useLocale, useObjectRef } from 'react-aria';\nimport { useOverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport type { Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { ScheduleIcon } from '../date-picker/picker-icons';\nimport type { PickerDialogLabels } from '../date-picker/PickerDialog';\nimport { IconButton } from '../icon-button/IconButton';\nimport { TextField, type TextFieldClassNames } from '../text-field/TextField';\nimport { localeHourCycle } from './hour-cycle';\nimport { formatTime, parseTimeText } from './time-format';\nimport type { TimeFieldDialogProps } from './TimeFieldDialog';\nimport type { TimePickerLabels } from './TimePicker';\n\n/** Words of a {@link TimeField} and its picker, for localisation. */\nexport interface TimeFieldLabels extends TimePickerLabels, PickerDialogLabels {\n  /** The field's placeholder. @default the clock's format, \"HH:MM\" or \"H:MM AM\" */\n  timeFormatHint: string;\n  /** Error when the text isn't a time. @default \"Enter a time such as {hint}\" */\n  invalidTime: string;\n  /** Error for a time before `min` or after `max`. @default \"Time out of range\" */\n  timeOutOfRange: string;\n  /** The clock icon button. @default \"Open time picker\" */\n  openPicker: string;\n  /** The picker's title and name. @default \"Select time\" */\n  title: string;\n  /** The picker's dismissing action. @default \"Cancel\" */\n  cancel: string;\n  /** The picker's confirming action. @default \"OK\" */\n  ok: string;\n}\n\n/** Classes for each part of a {@link TimeField}. */\nexport interface TimeFieldClassNames extends Omit<\n  TextFieldClassNames,\n  'leadingIcon' | 'prefix' | 'suffix' | 'counter'\n> {\n  /** The text field's root; `className` goes here too. */\n  root?: string;\n  /** The clock icon button. */\n  button?: string;\n  /** The picker dialog's surface. */\n  picker?: string;\n}\n\nexport interface TimeFieldProps extends WrapperRootDOMProps {\n  /** The field's label, e.g. \"Opens at\". */\n  label: ReactNode;\n  /** The time (controlled); `null` for none. */\n  value?: Time | null;\n  /** Initial time when uncontrolled. @default null */\n  defaultValue?: Time | null;\n  /** A time was typed and committed, or picked and confirmed; `null` when cleared. */\n  onChange?: (value: Time | null) => void;\n  /** Earliest time allowed. */\n  min?: Time;\n  /** Latest time allowed. */\n  max?: Time;\n  /** 12- or 24-hour clock, for the field and the picker. Left out, the locale's. @default the locale's */\n  hourCycle?: 12 | 24;\n  /** The field's style. @default \"outlined\" */\n  variant?: 'outlined' | 'filled';\n  /** Whether the picker is open (controlled). */\n  open?: boolean;\n  /** Whether the picker starts open when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the picker opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Helper text below the field. */\n  supportingText?: ReactNode;\n  /** Marks the field invalid, with `errorMessage` below it. */\n  invalid?: boolean;\n  /** Error text shown below the field while it's invalid, in place of `supportingText`. */\n  errorMessage?: ReactNode;\n  /** The field must have a time. @default false */\n  required?: boolean;\n  /** The field and its clock button can't be used. @default false */\n  disabled?: boolean;\n  /** The time can be read and focused but not changed. @default false */\n  readOnly?: boolean;\n  /** More description for the `<input>`, after the supporting or error text. */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the `<input>`. */\n  'aria-details'?: string;\n  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */\n  'aria-invalid'?: AriaAttributes['aria-invalid'];\n  /** Read as `required` when that's left out, for a form library that sets the attribute. */\n  'aria-required'?: AriaAttributes['aria-required'];\n  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */\n  'aria-readonly'?: AriaAttributes['aria-readonly'];\n  /** Form field name; the input submits the time as shown. */\n  name?: string;\n  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** Icon of the button that opens the picker. */\n  clockIcon?: ReactElement;\n  /**\n   * Web density of the field, `0` to `-3`: each step takes 4px off it (56px at 0, 48px at -2).\n   * The picker keeps its size. Left out, the field takes the nearest theme's.\n   * @default 0\n   */\n  density?: Density;\n  /** Words the field and its picker show and announce, with English defaults. */\n  labels?: Partial<TimeFieldLabels>;\n  /** The text field's root. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: TimeFieldClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nconst pickerDialog = onDemand<TimeFieldDialogProps>(() =>\n  import('./TimeFieldDialog').then((module) => module.TimeFieldDialog),\n);\n\nconst DEFAULT_LABELS: Omit<TimeFieldLabels, 'timeFormatHint' | 'invalidTime'> = {\n  timeOutOfRange: 'Time out of range',\n  openPicker: 'Open time picker',\n  title: 'Select time',\n  cancel: 'Cancel',\n  ok: 'OK',\n  close: 'Close',\n  save: 'Save',\n  hour: 'Hour',\n  minute: 'Minute',\n  am: 'AM',\n  pm: 'PM',\n  period: 'AM or PM',\n  dial: 'Clock',\n  inputMode: 'Toggle input picker',\n  dialMode: 'Toggle dial picker',\n  dialValue: (value, total, unit) => `${value} ${unit} of ${total}`,\n};\n\n/**\n * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact\n * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,\n * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens\n * the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.\n *\n * @example\n * <TimeField label=\"Opens at\" value={time} onChange={setTime} />\n */\nexport function TimeField(props: TimeFieldProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <TimeFieldInner {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction TimeFieldInner({\n  label,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  hourCycle: hourCycleProp,\n  variant = 'outlined',\n  open,\n  defaultOpen,\n  onOpenChange,\n  supportingText,\n  invalid: invalidProp,\n  errorMessage,\n  required: requiredProp,\n  disabled,\n  readOnly: readOnlyProp,\n  'aria-describedby': describedBy,\n  'aria-details': details,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-readonly': ariaReadonly,\n  name,\n  id,\n  clockIcon,\n  density,\n  labels: labelsProp,\n  ref,\n  inputRef,\n  className,\n  style,\n  classNames,\n  directionRef,\n  ...rest\n}: TimeFieldProps & { directionRef: (element: HTMLElement | null) => void }) {\n  const { root, rest: aria } = splitRootProps(rest, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);\n  const { locale } = useLocale();\n  const hourCycle = hourCycleProp ?? localeHourCycle(locale);\n  const hint = labelsProp?.timeFormatHint ?? (hourCycle === 24 ? 'HH:MM' : 'H:MM AM');\n  const labels: TimeFieldLabels = {\n    ...DEFAULT_LABELS,\n    timeFormatHint: hint,\n    invalidTime: `Enter a time such as ${hint}`,\n    ...labelsProp,\n  };\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);\n  const show = (time: Time | null) => (time ? formatTime(time, locale, hourCycle) : '');\n  const [text, setText] = useState(() => show(value));\n  const [error, setError] = useState<string | null>(null);\n  // A new value or clock from outside replaces what is typed.\n  const key = `${value?.toString() ?? ''}|${hourCycle}|${locale}`;\n  const [shown, setShown] = useState(key);\n  if (key !== shown) {\n    setShown(key);\n    setText(show(value));\n    setError(null);\n  }\n\n  const overlay = useOverlayTriggerState({\n    ...(open !== undefined && { isOpen: open }),\n    ...(defaultOpen !== undefined && { defaultOpen }),\n    ...(onOpenChange && { onOpenChange }),\n  });\n  const fieldRef = useRef<HTMLDivElement | null>(null);\n  const domInputRef = useObjectRef(inputRef);\n  usePreloadOnIntent(fieldRef, pickerDialog.preload, true);\n  const [opened, setOpened] = useState(overlay.isOpen);\n  if (overlay.isOpen && !opened) setOpened(true);\n\n  const outOfRange = (time: Time) =>\n    (min !== undefined && time.compare(min) < 0) || (max !== undefined && time.compare(max) > 0);\n\n  const accept = (time: Time) => {\n    if (outOfRange(time)) {\n      setText(show(time));\n      setError(labels.timeOutOfRange);\n      return;\n    }\n    setError(null);\n    setText(show(time));\n    if (time.toString() !== value?.toString()) setValue(time);\n  };\n\n  const commit = () => {\n    if (text.trim() === '') {\n      setError(null);\n      if (value) setValue(null);\n      return;\n    }\n    // Unchanged text needs no reading: it is already this value's format.\n    if (value && text === show(value)) {\n      setError(null);\n      return;\n    }\n    const time = parseTimeText(text, locale);\n    if (!time) {\n      setError(labels.invalidTime);\n      return;\n    }\n    accept(time);\n  };\n\n  const { root: rootClassName, button, picker, ...fieldClassNames } = classNames ?? {};\n  return (\n    <>\n      <TextField\n        {...root}\n        {...pickDescriptionAria(aria)}\n        {...(describedBy !== undefined && { 'aria-describedby': describedBy })}\n        {...(details !== undefined && { 'aria-details': details })}\n        {...(id !== undefined && { id })}\n        ref={(element: HTMLDivElement | null) => {\n          fieldRef.current = element;\n          directionRef(element);\n          if (typeof ref === 'function') ref(element);\n          else if (ref) ref.current = element;\n        }}\n        style={style}\n        inputRef={domInputRef}\n        variant={variant}\n        {...(density !== undefined && { density })}\n        label={label}\n        value={text}\n        onChange={(next: string) => {\n          setText(next);\n          if (error) setError(null);\n        }}\n        onBlur={commit}\n        onKeyDown={(event) => {\n          if (event.key !== 'Enter') {\n            event.continuePropagation();\n            return;\n          }\n          commit();\n        }}\n        placeholder={hint}\n        supportingText={supportingText}\n        invalid={invalid || error !== null}\n        errorMessage={error ?? errorMessage}\n        // A 24-hour time needs only digits and a separator; \"pm\" needs letters.\n        inputMode={hourCycle === 24 ? 'decimal' : 'text'}\n        autoComplete=\"off\"\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        className={cn('w-[9.25rem] max-w-full', rootClassName, className)}\n        classNames={fieldClassNames}\n        trailingIcon={\n          <IconButton\n            variant=\"standard\"\n            icon={clockIcon ?? <ScheduleIcon />}\n            aria-label={labels.openPicker}\n            aria-haspopup=\"dialog\"\n            aria-expanded={overlay.isOpen}\n            disabled={disabled || readOnly}\n            className={button}\n            onPress={(event) => {\n              // Focus returns to where it was when the dialog opened: the text box, except\n              // after a touch, where focusing it would raise the on-screen keyboard.\n              if (event.pointerType !== 'touch') {\n                domInputRef.current?.focus({ preventScroll: true });\n              }\n              overlay.open();\n            }}\n          />\n        }\n      />\n      {opened ? (\n        <pickerDialog.Component\n          open={overlay.isOpen}\n          onOpenChange={overlay.setOpen}\n          value={value}\n          onCommit={accept}\n          hourCycle={hourCycle}\n          labels={labels}\n          className={picker}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-picker/TimeField.tsx"],"sourcesContent":["'use client';\n\nimport type { Time } from '@internationalized/date';\nimport {\n  useId,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useLocale, useObjectRef } from 'react-aria';\nimport { useOverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { useLabels } from '../labels/use-labels';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport type { Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { ScheduleIcon } from '../date-picker/picker-icons';\nimport { COMPACT_WINDOW, useMediaQuery } from '../date-picker/use-media-query';\nimport type { PickerDialogLabels } from '../date-picker/PickerDialog';\nimport { IconButton } from '../icon-button/IconButton';\nimport { TextField, type TextFieldClassNames } from '../text-field/TextField';\nimport { localeHourCycle } from './hour-cycle';\nimport { formatTime, parseTimeText } from './time-format';\nimport type { TimeFieldDialogProps } from './TimeFieldDialog';\nimport type { TimeFieldListProps } from './TimeFieldList';\nimport type { TimePickerLabels } from './TimePicker';\n\n/** Words of a {@link TimeField} and its picker, for localisation. */\nexport interface TimeFieldLabels extends TimePickerLabels, PickerDialogLabels {\n  /** The field's placeholder. @default the clock's format, \"HH:MM\" or \"H:MM AM\" */\n  timeFormatHint: string;\n  /** Error when the text isn't a time. @default \"Enter a time such as {hint}\" */\n  invalidTime: string;\n  /** Error for a time before `min` or after `max`. @default \"Time out of range\" */\n  timeOutOfRange: string;\n  /** The clock icon button. @default \"Open time picker\" */\n  openPicker: string;\n  /** The picker's title and name. @default \"Select time\" */\n  title: string;\n  /** The picker's dismissing action. @default \"Cancel\" */\n  cancel: string;\n  /** The picker's confirming action. @default \"OK\" */\n  ok: string;\n}\n\n/** Classes for each part of a {@link TimeField}. */\nexport interface TimeFieldClassNames extends Omit<\n  TextFieldClassNames,\n  'leadingIcon' | 'prefix' | 'suffix' | 'counter'\n> {\n  /** The text field's root; `className` goes here too. */\n  root?: string;\n  /** The clock icon button. */\n  button?: string;\n  /** The docked list of times: its surface. */\n  list?: string;\n  /** Each time of the docked list. */\n  option?: string;\n  /** The picker dialog's surface. */\n  picker?: string;\n}\n\nexport interface TimeFieldProps extends WrapperRootDOMProps {\n  /** The field's label, e.g. \"Opens at\". */\n  label: ReactNode;\n  /** The time (controlled); `null` for none. */\n  value?: Time | null;\n  /** Initial time when uncontrolled. @default null */\n  defaultValue?: Time | null;\n  /** A time was typed and committed, or picked and confirmed; `null` when cleared. */\n  onChange?: (value: Time | null) => void;\n  /** Earliest time allowed. */\n  min?: Time;\n  /** Latest time allowed. */\n  max?: Time;\n  /** 12- or 24-hour clock, for the field and the picker. Left out, the locale's. @default the locale's */\n  hourCycle?: 12 | 24;\n  /** The field's style. @default \"outlined\" */\n  variant?: 'outlined' | 'filled';\n  /**\n   * Where the picker opens. `dialog` is the M3 time picker in a dialog. `docked` is a list of\n   * times under the field (every `step` minutes, within `min` and `max`) on windows 600px wide\n   * or more, for forms with many times; narrower windows still get the dialog. Not in the M3\n   * spec, which has no docked time picker.\n   * @default \"dialog\"\n   */\n  presentation?: 'dialog' | 'docked';\n  /**\n   * Minutes between the times a docked list offers, counted from midnight; 5 at least. It\n   * only shapes the list: any time can still be typed.\n   * @default 30\n   */\n  step?: number;\n  /** Whether the picker is open (controlled). */\n  open?: boolean;\n  /** Whether the picker starts open when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the picker opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Helper text below the field. */\n  supportingText?: ReactNode;\n  /** Marks the field invalid, with `errorMessage` below it. */\n  invalid?: boolean;\n  /** Error text shown below the field while it's invalid, in place of `supportingText`. */\n  errorMessage?: ReactNode;\n  /** The field must have a time. @default false */\n  required?: boolean;\n  /** The field and its clock button can't be used. @default false */\n  disabled?: boolean;\n  /** The time can be read and focused but not changed. @default false */\n  readOnly?: boolean;\n  /** More description for the `<input>`, after the supporting or error text. */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the `<input>`. */\n  'aria-details'?: string;\n  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */\n  'aria-invalid'?: AriaAttributes['aria-invalid'];\n  /** Read as `required` when that's left out, for a form library that sets the attribute. */\n  'aria-required'?: AriaAttributes['aria-required'];\n  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */\n  'aria-readonly'?: AriaAttributes['aria-readonly'];\n  /** Form field name; the input submits the time as shown. */\n  name?: string;\n  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** Icon of the button that opens the picker. */\n  clockIcon?: ReactElement;\n  /**\n   * Web density of the field, `0` to `-3`: each step takes 4px off it (56px at 0, 48px at -2).\n   * The picker keeps its size. Left out, the field takes the nearest theme's.\n   * @default 0\n   */\n  density?: Density;\n  /**\n   * Words the field and its picker show and announce, with English defaults.\n   * A {@link LabelsProvider} sets them for the whole app.\n   */\n  labels?: Partial<TimeFieldLabels>;\n  /** The text field's root. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: TimeFieldClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nconst pickerDialog = onDemand<TimeFieldDialogProps>(() =>\n  import('./TimeFieldDialog').then((module) => module.TimeFieldDialog),\n);\n\nconst dockedList = onDemand<TimeFieldListProps>(() =>\n  import('./TimeFieldList').then((module) => module.TimeFieldList),\n);\n\nconst DEFAULT_LABELS: Omit<TimeFieldLabels, 'timeFormatHint' | 'invalidTime'> = {\n  timeOutOfRange: 'Time out of range',\n  openPicker: 'Open time picker',\n  title: 'Select time',\n  cancel: 'Cancel',\n  ok: 'OK',\n  close: 'Close',\n  save: 'Save',\n  hour: 'Hour',\n  minute: 'Minute',\n  am: 'AM',\n  pm: 'PM',\n  period: 'AM or PM',\n  dial: 'Clock',\n  inputMode: 'Toggle input picker',\n  dialMode: 'Toggle dial picker',\n  dialValue: (value, total, unit) => `${value} ${unit} of ${total}`,\n};\n\n/**\n * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact\n * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,\n * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens\n * the {@link TimePicker} in a dialog, typed first, or with `presentation=\"docked\"` a list of\n * times under the field. The time sibling of `DateField`.\n *\n * @example\n * <TimeField label=\"Opens at\" value={time} onChange={setTime} />\n */\nexport function TimeField(props: TimeFieldProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <TimeFieldInner {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction TimeFieldInner({\n  label,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  hourCycle: hourCycleProp,\n  variant = 'outlined',\n  presentation = 'dialog',\n  step = 30,\n  open,\n  defaultOpen,\n  onOpenChange,\n  supportingText,\n  invalid: invalidProp,\n  errorMessage,\n  required: requiredProp,\n  disabled,\n  readOnly: readOnlyProp,\n  'aria-describedby': describedBy,\n  'aria-details': details,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-readonly': ariaReadonly,\n  name,\n  id,\n  clockIcon,\n  density,\n  labels: labelsProp,\n  ref,\n  inputRef,\n  className,\n  style,\n  classNames,\n  directionRef,\n  ...rest\n}: TimeFieldProps & { directionRef: (element: HTMLElement | null) => void }) {\n  const { root, rest: aria } = splitRootProps(rest, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);\n  const { locale } = useLocale();\n  const hourCycle = hourCycleProp ?? localeHourCycle(locale);\n  const words = useLabels(['TimePicker', 'PickerDialog', 'TimeField'], DEFAULT_LABELS, labelsProp);\n  const hint = words.timeFormatHint ?? (hourCycle === 24 ? 'HH:MM' : 'H:MM AM');\n  const labels: TimeFieldLabels = {\n    ...words,\n    timeFormatHint: hint,\n    invalidTime: words.invalidTime ?? `Enter a time such as ${hint}`,\n  };\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);\n  const show = (time: Time | null) => (time ? formatTime(time, locale, hourCycle) : '');\n  const [text, setText] = useState(() => show(value));\n  const [error, setError] = useState<string | null>(null);\n  // A new value or clock from outside replaces what is typed.\n  const key = `${value?.toString() ?? ''}|${hourCycle}|${locale}`;\n  const [shown, setShown] = useState(key);\n  if (key !== shown) {\n    setShown(key);\n    setText(show(value));\n    setError(null);\n  }\n\n  const overlay = useOverlayTriggerState({\n    ...(open !== undefined && { isOpen: open }),\n    ...(defaultOpen !== undefined && { defaultOpen }),\n    ...(onOpenChange && { onOpenChange }),\n  });\n  const fieldRef = useRef<HTMLDivElement | null>(null);\n  const domInputRef = useObjectRef(inputRef);\n  // A docked list needs room under the field; a compact window gets the dialog, full screen.\n  const compact = useMediaQuery(COMPACT_WINDOW);\n  const docked = presentation === 'docked' && !compact;\n  const listId = useId();\n  usePreloadOnIntent(fieldRef, docked ? dockedList.preload : pickerDialog.preload, true);\n  const [opened, setOpened] = useState(overlay.isOpen);\n  if (overlay.isOpen && !opened) setOpened(true);\n\n  const outOfRange = (time: Time) =>\n    (min !== undefined && time.compare(min) < 0) || (max !== undefined && time.compare(max) > 0);\n\n  const accept = (time: Time) => {\n    if (outOfRange(time)) {\n      setText(show(time));\n      setError(labels.timeOutOfRange);\n      return;\n    }\n    setError(null);\n    setText(show(time));\n    if (time.toString() !== value?.toString()) setValue(time);\n  };\n\n  const commit = () => {\n    if (text.trim() === '') {\n      setError(null);\n      if (value) setValue(null);\n      return;\n    }\n    // Unchanged text needs no reading: it is already this value's format.\n    if (value && text === show(value)) {\n      setError(null);\n      return;\n    }\n    const time = parseTimeText(text, locale);\n    if (!time) {\n      setError(labels.invalidTime);\n      return;\n    }\n    accept(time);\n  };\n\n  const {\n    root: rootClassName,\n    button,\n    picker,\n    list,\n    option,\n    ...fieldClassNames\n  } = classNames ?? {};\n  return (\n    <>\n      <TextField\n        {...root}\n        {...pickDescriptionAria(aria)}\n        {...(describedBy !== undefined && { 'aria-describedby': describedBy })}\n        {...(details !== undefined && { 'aria-details': details })}\n        {...(id !== undefined && { id })}\n        ref={(element: HTMLDivElement | null) => {\n          fieldRef.current = element;\n          directionRef(element);\n          if (typeof ref === 'function') ref(element);\n          else if (ref) ref.current = element;\n        }}\n        style={style}\n        inputRef={domInputRef}\n        variant={variant}\n        {...(density !== undefined && { density })}\n        label={label}\n        value={text}\n        onChange={(next: string) => {\n          setText(next);\n          if (error) setError(null);\n        }}\n        onBlur={commit}\n        onKeyDown={(event) => {\n          if (event.key !== 'Enter') {\n            event.continuePropagation();\n            return;\n          }\n          commit();\n        }}\n        placeholder={hint}\n        supportingText={supportingText}\n        invalid={invalid || error !== null}\n        errorMessage={error ?? errorMessage}\n        // A 24-hour time needs only digits and a separator; \"pm\" needs letters.\n        inputMode={hourCycle === 24 ? 'decimal' : 'text'}\n        autoComplete=\"off\"\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        className={cn('w-[9.25rem] max-w-full', rootClassName, className)}\n        classNames={fieldClassNames}\n        trailingIcon={\n          <IconButton\n            variant=\"standard\"\n            icon={clockIcon ?? <ScheduleIcon />}\n            aria-label={labels.openPicker}\n            aria-haspopup={docked ? 'listbox' : 'dialog'}\n            aria-expanded={overlay.isOpen}\n            {...(docked && overlay.isOpen && { 'aria-controls': listId })}\n            disabled={disabled || readOnly}\n            className={button}\n            onPress={(event) => {\n              // Focus returns to where it was when the picker opened: the text box, except\n              // after a touch, where focusing it would raise the on-screen keyboard.\n              if (event.pointerType !== 'touch') {\n                domInputRef.current?.focus({ preventScroll: true });\n              }\n              overlay.open();\n            }}\n          />\n        }\n      />\n      {!opened ? null : docked ? (\n        <dockedList.Component\n          state={overlay}\n          triggerRef={fieldRef}\n          id={listId}\n          value={value}\n          onCommit={accept}\n          min={min}\n          max={max}\n          step={step}\n          hourCycle={hourCycle}\n          label={labels.title}\n          density={density}\n          classNames={{ list, option }}\n        />\n      ) : (\n        <pickerDialog.Component\n          open={overlay.isOpen}\n          onOpenChange={overlay.setOpen}\n          value={value}\n          onCommit={accept}\n          hourCycle={hourCycle}\n          labels={labels}\n          className={picker}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/time-picker/TimeFieldList.js

@@ -0,0 +1,95 @@
+"use client";
+import { OptionList, OptionPopover } from "../select/option-list.js";
+import { formatTime } from "./time-format.js";
+import { listTimes, minutesOf, nearestTime } from "./time-list.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useLocale } from "react-aria";
+import { Item, useListState } from "react-stately";
+//#region src/components/time-picker/TimeFieldList.tsx
+/**
+* The docked picker of a {@link TimeField}: a list of times under the field, drawn as the
+* library's menu (the popover and options of `Select`). It opens at the field's time, or with
+* none at the time nearest now; a press or Enter picks a time and closes it. Loaded on
+* demand, so a form of many fields carries none of it.
+*/
+function TimeFieldList({ state, triggerRef, id, value, onCommit, min, max, step, hourCycle, label, density, classNames }) {
+	const { locale } = useLocale();
+	const popoverRef = useRef(null);
+	const listRef = useRef(null);
+	const options = useMemo(() => listTimes(step, min, max, value).map((time) => ({
+		key: String(minutesOf(time)),
+		time,
+		text: formatTime(time, locale, hourCycle)
+	})), [
+		step,
+		min,
+		max,
+		value,
+		locale,
+		hourCycle
+	]);
+	const chosen = value ? String(minutesOf(value)) : null;
+	const selected = chosen !== null && options.some((option) => option.key === chosen);
+	const list = useListState({
+		items: options,
+		children: (option) => /* @__PURE__ */ jsx(Item, {
+			textValue: option.text,
+			children: option.text
+		}, option.key),
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		allowDuplicateSelectionEvents: true,
+		selectedKeys: selected ? [chosen] : [],
+		onSelectionChange: (keys) => {
+			const [key] = keys === "all" ? [] : [...keys];
+			const picked = options.find((option) => option.key === key);
+			if (picked) onCommit(picked.time);
+			state.close();
+		}
+	});
+	const { isOpen } = state;
+	const { selectionManager } = list;
+	useEffect(() => {
+		if (!isOpen) return;
+		let start = chosen;
+		if (!selected) {
+			const now = /* @__PURE__ */ new Date();
+			const nearest = nearestTime(options.map((option) => option.time), now.getHours() * 60 + now.getMinutes());
+			start = String(minutesOf(nearest ?? options[0].time));
+			selectionManager.setFocused(true);
+			selectionManager.setFocusedKey(start);
+		}
+		const scroller = listRef.current;
+		const option = scroller?.querySelector(`[data-key="${start}"]`);
+		if (!scroller || !option) return;
+		const offset = option.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+		scroller.scrollTop += offset - (scroller.clientHeight - option.offsetHeight) / 2;
+	}, [isOpen]);
+	return /* @__PURE__ */ jsx(OptionPopover, {
+		state,
+		triggerRef,
+		popoverRef,
+		onPressOutside: state.close,
+		density,
+		children: /* @__PURE__ */ jsx(OptionList, {
+			listBoxProps: {
+				id,
+				"aria-label": label,
+				autoFocus: true,
+				disallowEmptySelection: true
+			},
+			state: list,
+			listBoxRef: listRef,
+			emptyLabel: null,
+			classNames: {
+				list: classNames?.list,
+				item: classNames?.option
+			}
+		})
+	});
+}
+//#endregion
+export { TimeFieldList };
+
+//# sourceMappingURL=TimeFieldList.js.map

package/dist/components/time-picker/TimeFieldList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldList.js","names":[],"sources":["../../../src/components/time-picker/TimeFieldList.tsx"],"sourcesContent":["'use client';\n\nimport type { Time } from '@internationalized/date';\nimport { useEffect, useMemo, useRef, type RefObject } from 'react';\nimport { useLocale } from 'react-aria';\nimport { Item, useListState, type OverlayTriggerState } from 'react-stately';\nimport type { Density } from '../../tokens/density';\nimport { OptionList, OptionPopover } from '../select/option-list';\nimport { formatTime } from './time-format';\nimport { listTimes, minutesOf, nearestTime } from './time-list';\n\nexport interface TimeFieldListProps {\n  /** The field's open state, which the list follows. */\n  state: OverlayTriggerState;\n  /** The field: the list opens under it, at least as wide. */\n  triggerRef: RefObject<HTMLElement | null>;\n  /** The list's id, which the clock button controls. */\n  id: string;\n  value: Time | null;\n  /** A time was picked. */\n  onCommit: (time: Time) => void;\n  min?: Time | undefined;\n  max?: Time | undefined;\n  /** Minutes between the listed times. */\n  step: number;\n  hourCycle: 12 | 24;\n  /** The list's name. */\n  label: string;\n  density?: Density | undefined;\n  classNames?: { list?: string | undefined; option?: string | undefined } | undefined;\n}\n\ninterface TimeOption {\n  key: string;\n  time: Time;\n  text: string;\n}\n\n/**\n * The docked picker of a {@link TimeField}: a list of times under the field, drawn as the\n * library's menu (the popover and options of `Select`). It opens at the field's time, or with\n * none at the time nearest now; a press or Enter picks a time and closes it. Loaded on\n * demand, so a form of many fields carries none of it.\n */\nexport function TimeFieldList({\n  state,\n  triggerRef,\n  id,\n  value,\n  onCommit,\n  min,\n  max,\n  step,\n  hourCycle,\n  label,\n  density,\n  classNames,\n}: TimeFieldListProps) {\n  const { locale } = useLocale();\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const options = useMemo<TimeOption[]>(\n    () =>\n      listTimes(step, min, max, value).map((time) => ({\n        key: String(minutesOf(time)),\n        time,\n        text: formatTime(time, locale, hourCycle),\n      })),\n    [step, min, max, value, locale, hourCycle],\n  );\n  const chosen = value ? String(minutesOf(value)) : null;\n  const selected = chosen !== null && options.some((option) => option.key === chosen);\n  const list = useListState<TimeOption>({\n    items: options,\n    children: (option) => (\n      <Item key={option.key} textValue={option.text}>\n        {option.text}\n      </Item>\n    ),\n    selectionMode: 'single',\n    disallowEmptySelection: true,\n    // Picking the field's own time again still closes the list.\n    allowDuplicateSelectionEvents: true,\n    selectedKeys: selected ? [chosen] : [],\n    onSelectionChange: (keys) => {\n      const [key] = keys === 'all' ? [] : [...keys];\n      const picked = options.find((option) => option.key === key);\n      if (picked) onCommit(picked.time);\n      state.close();\n    },\n  });\n\n  // As it opens, the list shows where the field is: its time in the middle, or with none the\n  // time nearest now, which takes focus. Only the list scrolls, never the page.\n  const { isOpen } = state;\n  const { selectionManager } = list;\n  useEffect(() => {\n    if (!isOpen) return;\n    let start = chosen;\n    if (!selected) {\n      const now = new Date();\n      const nearest = nearestTime(\n        options.map((option) => option.time),\n        now.getHours() * 60 + now.getMinutes(),\n      );\n      start = String(minutesOf(nearest ?? options[0]!.time));\n      selectionManager.setFocused(true);\n      selectionManager.setFocusedKey(start);\n    }\n    const scroller = listRef.current;\n    const option = scroller?.querySelector<HTMLElement>(`[data-key=\"${start}\"]`);\n    if (!scroller || !option) return;\n    const offset = option.getBoundingClientRect().top - scroller.getBoundingClientRect().top;\n    scroller.scrollTop += offset - (scroller.clientHeight - option.offsetHeight) / 2;\n    // Once per opening: the person scrolls from there.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  return (\n    <OptionPopover\n      state={state}\n      triggerRef={triggerRef}\n      popoverRef={popoverRef}\n      onPressOutside={state.close}\n      density={density}\n    >\n      <OptionList\n        // A time is always chosen once one is, so Escape closes the list instead of clearing it.\n        listBoxProps={{\n          id,\n          'aria-label': label,\n          autoFocus: true,\n          disallowEmptySelection: true,\n        }}\n        state={list}\n        listBoxRef={listRef}\n        emptyLabel={null}\n        classNames={{ list: classNames?.list, item: classNames?.option }}\n      />\n    </OptionPopover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,SAAgB,cAAc,EAC5B,OACA,YACA,IACA,OACA,UACA,KACA,KACA,MACA,WACA,OACA,SACA,cACqB;CACrB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,OAAyB,IAAI;CAC7C,MAAM,UAAU,cAEZ,UAAU,MAAM,KAAK,KAAK,KAAK,CAAC,CAAC,KAAK,UAAU;EAC9C,KAAK,OAAO,UAAU,IAAI,CAAC;EAC3B;EACA,MAAM,WAAW,MAAM,QAAQ,SAAS;CAC1C,EAAE,GACJ;EAAC;EAAM;EAAK;EAAK;EAAO;EAAQ;CAAS,CAC3C;CACA,MAAM,SAAS,QAAQ,OAAO,UAAU,KAAK,CAAC,IAAI;CAClD,MAAM,WAAW,WAAW,QAAQ,QAAQ,MAAM,WAAW,OAAO,QAAQ,MAAM;CAClF,MAAM,OAAO,aAAyB;EACpC,OAAO;EACP,WAAW,WACT,oBAAC,MAAD;GAAuB,WAAW,OAAO;GACtC,UAAA,OAAO;EACJ,GAFK,OAAO,GAEZ;EAER,eAAe;EACf,wBAAwB;EAExB,+BAA+B;EAC/B,cAAc,WAAW,CAAC,MAAM,IAAI,CAAC;EACrC,oBAAoB,SAAS;GAC3B,MAAM,CAAC,OAAO,SAAS,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI;GAC5C,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,QAAQ,GAAG;GAC1D,IAAI,QAAQ,SAAS,OAAO,IAAI;GAChC,MAAM,MAAM;EACd;CACF,CAAC;CAID,MAAM,EAAE,WAAW;CACnB,MAAM,EAAE,qBAAqB;CAC7B,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,IAAI,QAAQ;EACZ,IAAI,CAAC,UAAU;GACb,MAAM,sBAAM,IAAI,KAAK;GACrB,MAAM,UAAU,YACd,QAAQ,KAAK,WAAW,OAAO,IAAI,GACnC,IAAI,SAAS,IAAI,KAAK,IAAI,WAAW,CACvC;GACA,QAAQ,OAAO,UAAU,WAAW,QAAQ,EAAE,CAAE,IAAI,CAAC;GACrD,iBAAiB,WAAW,IAAI;GAChC,iBAAiB,cAAc,KAAK;EACtC;EACA,MAAM,WAAW,QAAQ;EACzB,MAAM,SAAS,UAAU,cAA2B,cAAc,MAAM,GAAG;EAC3E,IAAI,CAAC,YAAY,CAAC,QAAQ;EAC1B,MAAM,SAAS,OAAO,sBAAsB,CAAC,CAAC,MAAM,SAAS,sBAAsB,CAAC,CAAC;EACrF,SAAS,aAAa,UAAU,SAAS,eAAe,OAAO,gBAAgB;CAGjF,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,eAAD;EACS;EACK;EACA;EACZ,gBAAgB,MAAM;EACb;EAET,UAAA,oBAAC,YAAD;GAEE,cAAc;IACZ;IACA,cAAc;IACd,WAAW;IACX,wBAAwB;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,YAAY;IAAE,MAAM,YAAY;IAAM,MAAM,YAAY;GAAO;EAChE,CAAA;CACY,CAAA;AAEnB"}

package/dist/components/time-picker/TimePicker.d.ts

@@ -66,7 +66,10 @@ export interface TimePickerProps extends Omit<WrapperRootDOMProps, DescriptionAr
    * time picker placement and adaptive design). @default "auto"
    */
   layout?: 'vertical' | 'horizontal' | 'auto';
-  /** Words the picker shows and announces, with English defaults. */
+  /**
+   * Words the picker shows and announces, with English defaults. A {@link LabelsProvider} sets them
+   * for the whole app.
+   */
   labels?: Partial<TimePickerLabels>;
   /**
    * Web density of the input mode, `0` to `-3`: each step takes 4px off the typed hour and
@@ -102,15 +105,16 @@ export declare function useTimePickerRoom(): 'vertical' | 'horizontal' | 'none';
  * @example
  * <TimePicker value={time} onChange={setTime} />
  */
-export declare function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode, onModeChange, layout, labels, density, id, ref, className, style, classNames, ...rest }: TimePickerProps): import("react").JSX.Element;
+export declare function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode, onModeChange, layout, labels: labelsProp, density, id, ref, className, style, classNames, ...rest }: TimePickerProps): import("react").JSX.Element;
 export interface TimePickerModeToggleProps extends RootDOMProps<HTMLButtonElement> {
   /** The time picker's mode; the toggle switches to the other one. */
   mode: TimePickerMode;
   /** Called with the other mode when the toggle is pressed. */
   onModeChange: (mode: TimePickerMode) => void;
   /**
-   * Words the toggle announces (`inputMode`, `dialMode`), with English defaults. Takes the
-   * same object as the time picker's `labels`, so one set of words covers both.
+   * Words the toggle announces (`inputMode`, `dialMode`), with English defaults. Takes the same
+   * object as the time picker's `labels`, so one set of words covers both. A {@link LabelsProvider}
+   * sets them for the whole app.
    */
   labels?: Partial<TimePickerLabels>;
   /** Shown in dial mode. Defaults to Material Symbols' keyboard. */
@@ -137,6 +141,6 @@ export interface TimePickerModeToggleProps extends RootDOMProps<HTMLButtonElemen
  *   <TimePicker mode={mode} onModeChange={setMode} />
  * </PickerDialog>
  */
-export declare function TimePickerModeToggle({ mode, onModeChange, labels, keyboardIcon, clockIcon, className, style, id, ref, ...dom }: TimePickerModeToggleProps): import("react").JSX.Element | null;
+export declare function TimePickerModeToggle({ mode, onModeChange, labels: labelsProp, keyboardIcon, clockIcon, className, style, id, ref, ...dom }: TimePickerModeToggleProps): import("react").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=TimePicker.d.ts.map

package/dist/components/time-picker/TimePicker.js

@@ -1,6 +1,7 @@
 "use client";
 import { densityAttribute } from "../../tokens/density.js";
 import { cn } from "../../utils/cn.js";
+import { NO_DEFAULT_LABELS, useLabels } from "../labels/use-labels.js";
 import { useM3Spring } from "../../motion/use-m3-spring.js";
 import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
 import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
@@ -46,7 +47,8 @@ const defaultDialValue = (value, total, unit) => `${value} ${unit} of ${total}`;
 * @example
 * <TimePicker value={time} onChange={setTime} />
 */
-function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode = "dial", onModeChange, layout = "auto", labels = {}, density, id, ref, className, style, classNames, ...rest }) {
+function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode = "dial", onModeChange, layout = "auto", labels: labelsProp, density, id, ref, className, style, classNames, ...rest }) {
+	const labels = useLabels("TimePicker", NO_DEFAULT_LABELS, labelsProp);
 	const { root: data } = splitRootProps(rest, { wrapper: true });
 	const { locale } = useLocale();
 	const hourCycle = hourCycleProp ?? localeHourCycle(locale);
@@ -168,7 +170,8 @@ function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, m
 *   <TimePicker mode={mode} onModeChange={setMode} />
 * </PickerDialog>
 */
-function TimePickerModeToggle({ mode, onModeChange, labels = {}, keyboardIcon, clockIcon, className, style, id, ref, ...dom }) {
+function TimePickerModeToggle({ mode, onModeChange, labels: labelsProp, keyboardIcon, clockIcon, className, style, id, ref, ...dom }) {
+	const labels = useLabels("TimePicker", NO_DEFAULT_LABELS, labelsProp);
 	if (useTimePickerRoom() === "none") return null;
 	const own = {
 		...dom,