@windmorph/react 0.2.3 → 0.2.4

package/dist/components/text-field/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useLayoutEffect,\n  type AriaAttributes,\n  type CSSProperties,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useTextField,\n  type AriaTextFieldOptions,\n  type AriaTextFieldProps,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport {\n  CharacterCounter,\n  ErrorText,\n  FieldErrorIcon,\n  FieldLabel,\n  SupportingText,\n} from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { textFieldStyles, type TextFieldVariant } from './text-field-styles';\n\nexport interface TextFieldClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, input and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The `<input>` or `<textarea>`. */\n  input?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing icon's 48px box. */\n  trailingIcon?: string;\n  /** The prefix text before the input. */\n  prefix?: string;\n  /** The suffix text after the input. */\n  suffix?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The character counter below the field. */\n  counter?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\n/** Words the text field announces; override them for other languages. */\nexport interface TextFieldLabels {\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n  /**\n   * What screen readers hear for the character counter (M3 calls it the \"character count\").\n   * @default (count, max) => `Character count: ${count} of ${max}`\n   */\n  characterCount: (count: number, max: number) => string;\n}\n\nconst DEFAULT_LABELS: TextFieldLabels = {\n  error: 'Error',\n  characterCount: (count, max) => `Character count: ${count} of ${max}`,\n};\n\n/** Input types the browser draws its own format in when empty, which a resting label would cover. */\nconst FORMAT_SHOWING_TYPES = new Set(['date', 'time', 'datetime-local', 'month', 'week']);\n\ntype FieldState = 'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\n/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */\ntype RenamedAriaProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'label'\n  | 'description'\n  | 'inputElementType'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface TextFieldOwnProps\n  extends\n    Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>,\n    // The attributes that describe the input go to it, with React Aria's `aria-controls`,\n    // `aria-haspopup`, `aria-autocomplete` and `aria-activedescendant`: a field that opens its\n    // own suggestions can say so.\n    Pick<\n      AriaAttributes,\n      | 'aria-expanded'\n      | 'aria-required'\n      | 'aria-invalid'\n      | 'aria-readonly'\n      | 'aria-multiline'\n      | 'aria-placeholder'\n    > {\n  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** The container style: a filled surface or an outline. @default \"filled\" */\n  variant?: TextFieldVariant;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).\n   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3\n   * asks for density to be the reader's choice rather than a default, so prefer setting it\n   * there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** The text, when controlled. */\n  value?: string;\n  /** The initial text, when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the new text on every change. */\n  onChange?: (value: string) => void;\n  /**\n   * Helper text below the field. Replaced visually by the error message when invalid, and\n   * shown in the error colour while the field is invalid.\n   */\n  supportingText?: ReactNode;\n  /**\n   * Shows the supporting text only while the field has focus (M3 allows it \"persistently\n   * visible or visible only on focus\"). Its space is kept, and screen readers always get it.\n   * @default false\n   */\n  supportingTextOnFocus?: boolean;\n  /** Marks the field invalid (in addition to `validate` and native constraints). */\n  invalid?: boolean;\n  /** A value is required: adds the `*` to the label and native `required` validation. */\n  required?: boolean;\n  /** Disables the field: it can't be focused or edited. @default false */\n  disabled?: boolean;\n  /**\n   * The value can be read and copied but not changed. M3 styles it as a regular field and\n   * asks for it to be \"clearly labeled as read-only\", e.g. in the supporting text. The root\n   * gets `data-readonly`.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Decorative icon at the start, in a 48px box. */\n  leadingIcon?: ReactNode;\n  /**\n   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes\n   * the place of the error icon.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3\n   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;\n   * `false` turns it off.\n   */\n  errorIcon?: ReactNode | false;\n  /** Text before the input, e.g. \"$\". Shown once the label floats. */\n  prefix?: ReactNode;\n  /**\n   * What screen readers hear for the prefix, e.g. \"US dollars\" for \"$\". The prefix is in the\n   * input's description either way; without this, its visible text is read.\n   */\n  prefixLabel?: string;\n  /** Text after the input, e.g. \"kg\". Shown once the label floats. */\n  suffix?: ReactNode;\n  /** What screen readers hear for the suffix, e.g. \"kilograms\" for \"kg\". */\n  suffixLabel?: string;\n  /**\n   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines\n   * that scrolls vertically, which M3 recommends over growing fields on the web.\n   * @default false\n   */\n  multiline?: boolean;\n  /**\n   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line\n   * field) instead of keeping a fixed height.\n   * @default false\n   */\n  autoGrow?: boolean;\n  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */\n  rows?: number;\n  /** With `autoGrow`: lines after which the field scrolls instead of growing. */\n  maxRows?: number;\n  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /** Words the field announces, for other languages. */\n  labels?: Partial<TextFieldLabels>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. */\n  classNames?: TextFieldClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** The root element. Use `inputRef` for the input itself. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */\n  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n}\n\n/** A visible label, or an accessible name for fields without one. */\ntype TextFieldLabel =\n  | {\n      /** The visible label, which floats above the input once it has focus or a value. */\n      label: ReactNode;\n    }\n  | {\n      label?: undefined;\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      label?: undefined;\n      /** The id of the element that names the field, when there's no visible label. */\n      'aria-labelledby': string;\n    };\n\nexport type TextFieldProps = TextFieldOwnProps & TextFieldLabel;\n\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\n/**\n * M3 text field: filled or outlined, with a floating label, leading / trailing icons,\n * prefix and suffix, supporting text, error message and icon, character counter, and a\n * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,\n * descriptions, `validate` and native constraints work as in React Aria.\n *\n * `className` and `style` go on the root; `inputRef` reaches the input.\n *\n * @example\n * <TextField label=\"Email\" type=\"email\" required supportingText=\"We never share it.\" />\n * <TextField variant=\"outlined\" label=\"Price\" prefix=\"$\" inputMode=\"decimal\" />\n */\nexport function TextField(props: TextFieldProps) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    supportingText,\n    supportingTextOnFocus = false,\n    errorMessage,\n    invalid,\n    required,\n    disabled = false,\n    readOnly,\n    leadingIcon,\n    trailingIcon,\n    errorIcon,\n    prefix,\n    prefixLabel,\n    suffix,\n    suffixLabel,\n    multiline = false,\n    autoGrow = false,\n    rows = autoGrow ? 1 : 4,\n    maxRows,\n    counter,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef,\n    ...otherProps\n  } = props;\n\n  // `data-*` attributes and the root's DOM attributes describe the component, so they go on the\n  // root with `className`; everything else (the input's ARIA, attributes and events) goes to\n  // the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const prefixId = useId();\n  const suffixId = useId();\n  const counterId = useId();\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? '', onChange);\n  const domInputRef = useObjectRef(inputRef as Ref<HTMLInputElement>);\n  const {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useTextField(\n    {\n      ...ariaProps,\n      label,\n      description: supportingText,\n      errorMessage,\n      value,\n      onChange: setValue,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n      inputElementType: multiline ? 'textarea' : 'input',\n    } as AriaTextFieldOptions<'input' | 'textarea'>,\n    domInputRef,\n  );\n  const { focusProps, isFocused } = useFocusRing({ isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const growing = multiline && autoGrow;\n  // Grow a multiline field with its content, up to maxRows.\n  useLayoutEffect(() => {\n    const element = domInputRef.current as HTMLTextAreaElement | null;\n    if (!growing || !element) return;\n    const fit = () => {\n      element.style.height = 'auto';\n      const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;\n      const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;\n      element.style.height = `${Math.min(element.scrollHeight, max)}px`;\n      element.style.overflowY = element.scrollHeight > max ? 'auto' : 'hidden';\n    };\n    if (element.getClientRects().length > 0 || typeof ResizeObserver === 'undefined') {\n      fit();\n      return;\n    }\n    // Out of sight (`display: none` above it: a closed tab or panel), it has no height to read,\n    // and set to its 0px it stayed invisible once shown. It keeps its rows until it shows.\n    element.style.height = '';\n    const observer = new ResizeObserver(() => {\n      if (element.getClientRects().length === 0) return;\n      observer.disconnect();\n      fit();\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [value, growing, maxRows, domInputRef]);\n\n  const hasLabel = label !== undefined && label !== null;\n  const floated =\n    hasLabel && (isFocused || value.length > 0 || FORMAT_SHOWING_TYPES.has(ariaProps.type ?? ''));\n  const state: FieldState = disabled\n    ? 'disabled'\n    : isInvalid\n      ? isFocused\n        ? 'error-focus'\n        : isHovered\n          ? 'error-hover'\n          : 'error'\n      : isFocused\n        ? 'focus'\n        : isHovered\n          ? 'hover'\n          : 'rest';\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const showError = isInvalid && Boolean(resolvedError);\n  const maxLength = ariaProps.maxLength;\n  const showCounter = maxLength !== undefined && counter !== false;\n  const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;\n\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,\n    multiline,\n    fixedHeight: multiline && !autoGrow,\n    supportingTextOnFocus,\n  });\n  // The affixes and the counter join React Aria's description (supporting text, then error).\n  const describedBy =\n    [\n      prefix ? prefixId : null,\n      suffix ? suffixId : null,\n      renderedDescription(inputProps['aria-describedby'], [\n        !supportingText && descriptionProps.id,\n        !showError && errorMessageProps.id,\n      ]),\n      showCounter ? counterId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // Pressing the container (not an icon button) focuses the input, like Compose.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if ((event.target as Element).closest(INTERACTIVE) || disabled) return;\n    event.preventDefault();\n    // The field is where the press landed: the page never scrolls to it (2026-10-15).\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n  // Chrome's touch adjustment can send a tap's pointer events to the input while the mouse\n  // events it emulates, and the click, land on the padding beside it, so the input never\n  // takes focus (2026-10-17). A click on the field that leaves the input unfocused focuses it.\n  // The mouse never needs it: its press on the padding already focused the input.\n  const focusInputOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    if (\n      (event.nativeEvent as globalThis.PointerEvent).pointerType === 'mouse' ||\n      !event.currentTarget.contains(target) ||\n      target.closest(INTERACTIVE) ||\n      disabled ||\n      document.activeElement === domInputRef.current\n    ) {\n      return;\n    }\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // Part of the accessible name, as M3 asks (\"The accessibility label must include the\n  // asterisk\"); the copy in the outline's notch is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const Input = multiline ? 'textarea' : 'input';\n\n  return (\n    <div\n      {...rootData}\n      ref={ref}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootData)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={isFocused || undefined}\n      data-hovered={(isHovered && !disabled) || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n    >\n      <div\n        {...hoverProps}\n        onPointerDown={focusInput}\n        onClick={focusInputOnClick}\n        data-slot=\"container\"\n        className={styles.container({ class: classNames?.container })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field()}>\n          {prefix && (\n            <span\n              id={prefixId}\n              className={styles.affix({ class: cn(styles.prefix(), classNames?.prefix) })}\n            >\n              <Affix text={prefix} label={prefixLabel} />\n            </span>\n          )}\n          <Input\n            {...(mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps) as object)}\n            aria-describedby={describedBy}\n            ref={domInputRef as Ref<never>}\n            data-slot=\"input\"\n            rows={multiline ? rows : undefined}\n            className={styles.input({ class: classNames?.input })}\n          />\n          {suffix && (\n            <span\n              id={suffixId}\n              className={styles.affix({ class: cn(styles.suffix(), classNames?.suffix) })}\n            >\n              <Affix text={suffix} label={suffixLabel} />\n            </span>\n          )}\n        </div>\n        {trailingIcon ? (\n          <span\n            data-slot=\"trailing-icon\"\n            className={styles.icon({\n              class: cn(styles.trailingIcon(), classNames?.trailingIcon),\n            })}\n          >\n            {trailingIcon}\n          </span>\n        ) : showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={labels.error}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError || showCounter) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({\n                supportingTextOnFocus: false,\n                class: classNames?.errorText,\n              })}\n            >\n              {resolvedError}\n            </ErrorText>\n          )}\n          {showCounter && (\n            <CharacterCounter\n              id={counterId}\n              count={value.length}\n              max={maxLength}\n              label={labels.characterCount(value.length, maxLength)}\n              className={styles.counter({ class: classNames?.counter })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** An affix's visible text, read as its `label` when there is one. */\nfunction Affix({ text, label }: { text: ReactNode; label: string | undefined }) {\n  if (label === undefined) return text;\n  return (\n    <>\n      <span aria-hidden=\"true\">{text}</span>\n      <span className=\"sr-only\">{label}</span>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useLayoutEffect,\n  type AriaAttributes,\n  type CSSProperties,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useTextField,\n  type AriaTextFieldOptions,\n  type AriaTextFieldProps,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { useLabels } from '../labels/use-labels';\nimport {\n  CharacterCounter,\n  ErrorText,\n  FieldErrorIcon,\n  FieldLabel,\n  SupportingText,\n} from '../../primitives/Field';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { pickWidgetAria, splitRootProps, type WrapperRootDOMProps } from '../../utils/root-props';\nimport { textFieldStyles, type TextFieldVariant } from './text-field-styles';\n\nexport interface TextFieldClassNames {\n  /** The root element, merged with `className`. */\n  root?: string;\n  /** The filled or outlined container around the label, input and icons. */\n  container?: string;\n  /** The floating label. */\n  label?: string;\n  /** The `<input>` or `<textarea>`. */\n  input?: string;\n  /** The leading icon's 48px box. */\n  leadingIcon?: string;\n  /** The trailing icon's 48px box. */\n  trailingIcon?: string;\n  /** The prefix text before the input. */\n  prefix?: string;\n  /** The suffix text after the input. */\n  suffix?: string;\n  /** The helper text below the field. */\n  supportingText?: string;\n  /** The error message below the field. */\n  errorText?: string;\n  /** The character counter below the field. */\n  counter?: string;\n  /** The built-in error icon. */\n  errorIcon?: string;\n  /** The outlined field's border (a `<fieldset>`, notched for the floated label). */\n  outline?: string;\n  /** The filled field's active indicator, the line along the container's bottom. */\n  activeIndicator?: string;\n}\n\n/** Words the text field announces; override them for other languages. */\nexport interface TextFieldLabels {\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n  /**\n   * What screen readers hear for the character counter (M3 calls it the \"character count\").\n   * @default (count, max) => `Character count: ${count} of ${max}`\n   */\n  characterCount: (count: number, max: number) => string;\n}\n\nconst DEFAULT_LABELS: TextFieldLabels = {\n  error: 'Error',\n  characterCount: (count, max) => `Character count: ${count} of ${max}`,\n};\n\n/** Input types the browser draws its own format in when empty, which a resting label would cover. */\nconst FORMAT_SHOWING_TYPES = new Set(['date', 'time', 'datetime-local', 'month', 'week']);\n\ntype FieldState = 'disabled' | 'error-focus' | 'error-hover' | 'error' | 'focus' | 'hover' | 'rest';\n\n/** Props React Aria names with an `is` prefix; we use the HTML-style names instead. */\ntype RenamedAriaProps =\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'label'\n  | 'description'\n  | 'inputElementType'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  // Left out: the deprecated `validationState` (`invalid` replaces it) and React Aria's\n  // `excludeFromTabOrder` (`tabIndex={-1}` covers the rare case).\n  | 'validationState'\n  | 'excludeFromTabOrder';\n\ninterface TextFieldOwnProps\n  extends\n    Omit<AriaTextFieldProps<HTMLInputElement>, RenamedAriaProps>,\n    Omit<WrapperRootDOMProps, keyof AriaTextFieldProps<HTMLInputElement>>,\n    // The attributes that describe the input go to it, with React Aria's `aria-controls`,\n    // `aria-haspopup`, `aria-autocomplete` and `aria-activedescendant`: a field that opens its\n    // own suggestions can say so.\n    Pick<\n      AriaAttributes,\n      | 'aria-expanded'\n      | 'aria-required'\n      | 'aria-invalid'\n      | 'aria-readonly'\n      | 'aria-multiline'\n      | 'aria-placeholder'\n    > {\n  /** The `<input>`'s (or `<textarea>`'s) id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** The container style: a filled surface or an outline. @default \"filled\" */\n  variant?: TextFieldVariant;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the container (56px at 0, 44px at -3).\n   * Left out, the field takes the density of the nearest `ThemeProvider` or `ThemeScope`. M3\n   * asks for density to be the reader's choice rather than a default, so prefer setting it\n   * there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** The text, when controlled. */\n  value?: string;\n  /** The initial text, when uncontrolled. @default \"\" */\n  defaultValue?: string;\n  /** Called with the new text on every change. */\n  onChange?: (value: string) => void;\n  /**\n   * Helper text below the field. Replaced visually by the error message when invalid, and\n   * shown in the error colour while the field is invalid.\n   */\n  supportingText?: ReactNode;\n  /**\n   * Shows the supporting text only while the field has focus (M3 allows it \"persistently\n   * visible or visible only on focus\"). Its space is kept, and screen readers always get it.\n   * @default false\n   */\n  supportingTextOnFocus?: boolean;\n  /** Marks the field invalid (in addition to `validate` and native constraints). */\n  invalid?: boolean;\n  /** A value is required: adds the `*` to the label and native `required` validation. */\n  required?: boolean;\n  /** Disables the field: it can't be focused or edited. @default false */\n  disabled?: boolean;\n  /**\n   * The value can be read and copied but not changed. M3 styles it as a regular field and\n   * asks for it to be \"clearly labeled as read-only\", e.g. in the supporting text. The root\n   * gets `data-readonly`.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Decorative icon at the start, in a 48px box. */\n  leadingIcon?: ReactNode;\n  /**\n   * Icon or icon button at the end (e.g. clear, visibility toggle), in a 48px box. It takes\n   * the place of the error icon.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The icon shown at the end while the field is invalid and has no `trailingIcon` (M3\n   * strongly recommends one). Defaults to Material Symbols `error`, named by `labels.error`;\n   * `false` turns it off.\n   */\n  errorIcon?: ReactNode | false;\n  /** Text before the input, e.g. \"$\". Shown once the label floats. */\n  prefix?: ReactNode;\n  /**\n   * What screen readers hear for the prefix, e.g. \"US dollars\" for \"$\". The prefix is in the\n   * input's description either way; without this, its visible text is read.\n   */\n  prefixLabel?: string;\n  /** Text after the input, e.g. \"kg\". Shown once the label floats. */\n  suffix?: ReactNode;\n  /** What screen readers hear for the suffix, e.g. \"kilograms\" for \"kg\". */\n  suffixLabel?: string;\n  /**\n   * Renders a `<textarea>`. By default it's an M3 text area: a fixed height of `rows` lines\n   * that scrolls vertically, which M3 recommends over growing fields on the web.\n   * @default false\n   */\n  multiline?: boolean;\n  /**\n   * With `multiline`: grow with the content from `rows` up to `maxRows` (M3's multi-line\n   * field) instead of keeping a fixed height.\n   * @default false\n   */\n  autoGrow?: boolean;\n  /** Visible lines of a multiline field. @default 4, or 1 with autoGrow */\n  rows?: number;\n  /** With `autoGrow`: lines after which the field scrolls instead of growing. */\n  maxRows?: number;\n  /** Shows `count/maxLength` below the field. Defaults to `true` when `maxLength` is set. */\n  counter?: boolean;\n  /**\n   * Words the field announces, for other languages. A {@link LabelsProvider} sets them for the\n   * whole app.\n   */\n  labels?: Partial<TextFieldLabels>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Classes for each part, by slot. */\n  classNames?: TextFieldClassNames;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** The root element. Use `inputRef` for the input itself. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>` (or `<textarea>` when multiline), e.g. for form libraries. */\n  inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n}\n\n/** A visible label, or an accessible name for fields without one. */\ntype TextFieldLabel =\n  | {\n      /** The visible label, which floats above the input once it has focus or a value. */\n      label: ReactNode;\n    }\n  | {\n      label?: undefined;\n      /** Accessible name when there's no visible label. */\n      'aria-label': string;\n    }\n  | {\n      label?: undefined;\n      /** The id of the element that names the field, when there's no visible label. */\n      'aria-labelledby': string;\n    };\n\nexport type TextFieldProps = TextFieldOwnProps & TextFieldLabel;\n\nconst INTERACTIVE = 'input, textarea, button, a, [role=\"button\"]';\n\n/**\n * M3 text field: filled or outlined, with a floating label, leading / trailing icons,\n * prefix and suffix, supporting text, error message and icon, character counter, and a\n * multiline form (a fixed-height text area, or a growing field with `autoGrow`). Built on React Aria `useTextField`, so labelling,\n * descriptions, `validate` and native constraints work as in React Aria.\n *\n * `className` and `style` go on the root; `inputRef` reaches the input.\n *\n * @example\n * <TextField label=\"Email\" type=\"email\" required supportingText=\"We never share it.\" />\n * <TextField variant=\"outlined\" label=\"Price\" prefix=\"$\" inputMode=\"decimal\" />\n */\nexport function TextField(props: TextFieldProps) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    supportingText,\n    supportingTextOnFocus = false,\n    errorMessage,\n    invalid,\n    required,\n    disabled = false,\n    readOnly,\n    leadingIcon,\n    trailingIcon,\n    errorIcon,\n    prefix,\n    prefixLabel,\n    suffix,\n    suffixLabel,\n    multiline = false,\n    autoGrow = false,\n    rows = autoGrow ? 1 : 4,\n    maxRows,\n    counter,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    inputRef,\n    ...otherProps\n  } = props;\n\n  // `data-*` attributes and the root's DOM attributes describe the component, so they go on the\n  // root with `className`; everything else (the input's ARIA, attributes and events) goes to\n  // the input via React Aria.\n  const { root: rootData, rest: ariaProps } = splitRootProps(otherProps, { wrapper: true });\n  const labels = useLabels('TextField', DEFAULT_LABELS, labelsProp);\n  const prefixId = useId();\n  const suffixId = useId();\n  const counterId = useId();\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? '', onChange);\n  const domInputRef = useObjectRef(inputRef as Ref<HTMLInputElement>);\n  const {\n    labelProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useTextField(\n    {\n      ...ariaProps,\n      label,\n      description: supportingText,\n      errorMessage,\n      value,\n      onChange: setValue,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n      inputElementType: multiline ? 'textarea' : 'input',\n    } as AriaTextFieldOptions<'input' | 'textarea'>,\n    domInputRef,\n  );\n  const { focusProps, isFocused } = useFocusRing({ isTextInput: true });\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  const growing = multiline && autoGrow;\n  // Grow a multiline field with its content, up to maxRows.\n  useLayoutEffect(() => {\n    const element = domInputRef.current as HTMLTextAreaElement | null;\n    if (!growing || !element) return;\n    const fit = () => {\n      element.style.height = 'auto';\n      const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight) || 24;\n      const max = maxRows ? lineHeight * maxRows : Number.POSITIVE_INFINITY;\n      element.style.height = `${Math.min(element.scrollHeight, max)}px`;\n      element.style.overflowY = element.scrollHeight > max ? 'auto' : 'hidden';\n    };\n    if (element.getClientRects().length > 0 || typeof ResizeObserver === 'undefined') {\n      fit();\n      return;\n    }\n    // Out of sight (`display: none` above it: a closed tab or panel), it has no height to read,\n    // and set to its 0px it stayed invisible once shown. It keeps its rows until it shows.\n    element.style.height = '';\n    const observer = new ResizeObserver(() => {\n      if (element.getClientRects().length === 0) return;\n      observer.disconnect();\n      fit();\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [value, growing, maxRows, domInputRef]);\n\n  const hasLabel = label !== undefined && label !== null;\n  const floated =\n    hasLabel && (isFocused || value.length > 0 || FORMAT_SHOWING_TYPES.has(ariaProps.type ?? ''));\n  const state: FieldState = disabled\n    ? 'disabled'\n    : isInvalid\n      ? isFocused\n        ? 'error-focus'\n        : isHovered\n          ? 'error-hover'\n          : 'error'\n      : isFocused\n        ? 'focus'\n        : isHovered\n          ? 'hover'\n          : 'rest';\n\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n  const showError = isInvalid && Boolean(resolvedError);\n  const maxLength = ariaProps.maxLength;\n  const showCounter = maxLength !== undefined && counter !== false;\n  const showErrorIcon = isInvalid && !trailingIcon && errorIcon !== false;\n\n  const styles = textFieldStyles({\n    variant,\n    hasLabel,\n    hasLeadingIcon: Boolean(leadingIcon),\n    hasTrailingIcon: Boolean(trailingIcon) || showErrorIcon,\n    multiline,\n    fixedHeight: multiline && !autoGrow,\n    supportingTextOnFocus,\n  });\n  // The affixes and the counter join React Aria's description (supporting text, then error).\n  const describedBy =\n    [\n      prefix ? prefixId : null,\n      suffix ? suffixId : null,\n      renderedDescription(inputProps['aria-describedby'], [\n        !supportingText && descriptionProps.id,\n        !showError && errorMessageProps.id,\n      ]),\n      showCounter ? counterId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // Pressing the container (not an icon button) focuses the input, like Compose.\n  const focusInput = (event: PointerEvent<HTMLDivElement>) => {\n    if ((event.target as Element).closest(INTERACTIVE) || disabled) return;\n    event.preventDefault();\n    // The field is where the press landed: the page never scrolls to it (2026-10-15).\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n  // Chrome's touch adjustment can send a tap's pointer events to the input while the mouse\n  // events it emulates, and the click, land on the padding beside it, so the input never\n  // takes focus (2026-10-17). A click on the field that leaves the input unfocused focuses it.\n  // The mouse never needs it: its press on the padding already focused the input.\n  const focusInputOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    if (\n      (event.nativeEvent as globalThis.PointerEvent).pointerType === 'mouse' ||\n      !event.currentTarget.contains(target) ||\n      target.closest(INTERACTIVE) ||\n      disabled ||\n      document.activeElement === domInputRef.current\n    ) {\n      return;\n    }\n    domInputRef.current?.focus({ preventScroll: true });\n  };\n\n  // Part of the accessible name, as M3 asks (\"The accessibility label must include the\n  // asterisk\"); the copy in the outline's notch is hidden with the fieldset.\n  const requiredMark = required ? ' *' : null;\n  const Input = multiline ? 'textarea' : 'input';\n\n  return (\n    <div\n      {...rootData}\n      ref={ref}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n      data-tokens={mergeDataTokens('md-comp-text-field', rootData)}\n      data-variant={variant}\n      {...densityAttribute(density)}\n      data-field-state={state}\n      data-focused={isFocused || undefined}\n      data-hovered={(isHovered && !disabled) || undefined}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-floated={floated || undefined}\n    >\n      <div\n        {...hoverProps}\n        onPointerDown={focusInput}\n        onClick={focusInputOnClick}\n        data-slot=\"container\"\n        className={styles.container({ class: classNames?.container })}\n      >\n        {variant === 'outlined' && (\n          <fieldset\n            aria-hidden=\"true\"\n            data-slot=\"outline\"\n            className={styles.outline({ class: classNames?.outline })}\n          >\n            {hasLabel && (\n              <legend className={styles.notch()}>\n                <span className={styles.notchClip()}>\n                  <span className={styles.notchText()}>\n                    {label}\n                    {requiredMark}\n                  </span>\n                </span>\n              </legend>\n            )}\n          </fieldset>\n        )}\n        {leadingIcon && (\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"leading-icon\"\n            className={styles.icon({ class: cn(styles.leadingIcon(), classNames?.leadingIcon) })}\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <div className={styles.field()}>\n          {prefix && (\n            <span\n              id={prefixId}\n              className={styles.affix({ class: cn(styles.prefix(), classNames?.prefix) })}\n            >\n              <Affix text={prefix} label={prefixLabel} />\n            </span>\n          )}\n          <Input\n            {...(mergeProps(inputProps, pickWidgetAria(ariaProps), focusProps) as object)}\n            aria-describedby={describedBy}\n            ref={domInputRef as Ref<never>}\n            data-slot=\"input\"\n            rows={multiline ? rows : undefined}\n            className={styles.input({ class: classNames?.input })}\n          />\n          {suffix && (\n            <span\n              id={suffixId}\n              className={styles.affix({ class: cn(styles.suffix(), classNames?.suffix) })}\n            >\n              <Affix text={suffix} label={suffixLabel} />\n            </span>\n          )}\n        </div>\n        {trailingIcon ? (\n          <span\n            data-slot=\"trailing-icon\"\n            className={styles.icon({\n              class: cn(styles.trailingIcon(), classNames?.trailingIcon),\n            })}\n          >\n            {trailingIcon}\n          </span>\n        ) : showErrorIcon ? (\n          <span className={styles.icon({ class: styles.trailingIcon() })}>\n            <FieldErrorIcon\n              label={labels.error}\n              icon={errorIcon}\n              className={styles.errorIcon({ class: classNames?.errorIcon })}\n            />\n          </span>\n        ) : null}\n        {hasLabel && (\n          <FieldLabel\n            {...labelProps}\n            data-slot=\"label\"\n            className={styles.label({ class: classNames?.label })}\n          >\n            {label}\n            {requiredMark}\n          </FieldLabel>\n        )}\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"active-indicator\"\n          className={styles.indicator({ class: classNames?.activeIndicator })}\n        />\n      </div>\n      {(supportingText || showError || showCounter) && (\n        <div className={styles.supporting()}>\n          {supportingText && (\n            <SupportingText\n              {...descriptionProps}\n              data-slot=\"supporting-text\"\n              className={cn(\n                styles.supportingText({\n                  class: cn(styles.supportingTextColor(), classNames?.supportingText),\n                }),\n                showError && 'sr-only',\n              )}\n            >\n              {supportingText}\n            </SupportingText>\n          )}\n          {showError && (\n            <ErrorText\n              {...errorMessageProps}\n              className={styles.supportingText({\n                supportingTextOnFocus: false,\n                class: classNames?.errorText,\n              })}\n            >\n              {resolvedError}\n            </ErrorText>\n          )}\n          {showCounter && (\n            <CharacterCounter\n              id={counterId}\n              count={value.length}\n              max={maxLength}\n              label={labels.characterCount(value.length, maxLength)}\n              className={styles.counter({ class: classNames?.counter })}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** An affix's visible text, read as its `label` when there is one. */\nfunction Affix({ text, label }: { text: ReactNode; label: string | undefined }) {\n  if (label === undefined) return text;\n  return (\n    <>\n      <span aria-hidden=\"true\">{text}</span>\n      <span className=\"sr-only\">{label}</span>\n    </>\n  );\n}\n"],"mappings":"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"}

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,