@windmorph/react 0.2.3 → 0.2.4

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","names":[],"sources":["../../../src/components/time-picker/TimePicker.tsx"],"sourcesContent":["'use client';\n\nimport { Time } from '@internationalized/date';\nimport { animate, useReducedMotion, type AnimationPlaybackControls } from 'motion/react';\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useFocusRing,\n  useFocusVisible,\n  useHover,\n  useLocale,\n  useNumberFormatter,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport {\n  splitRootProps,\n  type DescriptionAria,\n  type RootDOMProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { KeyboardIcon, ScheduleIcon } from '../date-picker/picker-icons';\nimport { useMediaQuery } from '../date-picker/use-media-query';\nimport { IconButton } from '../icon-button/IconButton';\nimport { localeHourCycle } from './hour-cycle';\nimport { timePickerStyles } from './time-picker-styles';\n\n/** Compose's clock geometry (TimePicker.kt), in px on the 256px dial. */\nconst DIAL = 256;\nconst CENTER = DIAL / 2;\nconst OUTER_RADIUS = 101;\nconst INNER_RADIUS = 69;\nconst HANDLE = 48;\n/** A press nearer the centre than this picks the inner 24-hour ring (Compose's `MaxDistance`). */\nconst INNER_RING_MAX_DISTANCE = 74;\n/** Each number on the dial is a 48px target (M3: \"Targets for dial selectors should be 48x48dp\"). */\nconst TARGET = 48;\n\nexport interface TimePickerLabels {\n  /** Name of the hour selector and field. @default \"Hour\" */\n  hour: string;\n  /** Name of the minute selector and field. @default \"Minute\" */\n  minute: string;\n  /** The AM option. @default \"AM\" */\n  am: string;\n  /** The PM option. @default \"PM\" */\n  pm: string;\n  /** Name of the AM / PM selector. @default \"AM or PM\" */\n  period: string;\n  /** Name of the dial. @default \"Clock\" */\n  dial: string;\n  /** {@link TimePickerModeToggle}'s name in dial mode. @default \"Toggle input picker\" */\n  inputMode: string;\n  /** {@link TimePickerModeToggle}'s name in input mode. @default \"Toggle dial picker\" */\n  dialMode: string;\n  /**\n   * Name of a number on the dial (M3: \"{Value} Hours or minutes of {Total}\"), e.g.\n   * \"7 hours of 12\" or \"35 minutes of 60\".\n   * @default `${value} ${unit} of ${total}`\n   */\n  dialValue: (value: string, total: number, unit: 'hours' | 'minutes') => string;\n}\n\nexport interface TimePickerClassNames {\n  /** The picker's root; `className` is merged here too. */\n  root?: string;\n  /** The hour and minute: selectors in dial mode, text fields in input mode. */\n  field?: string;\n  /** The labels under the input mode's fields (\"Hour\", \"Minute\"). */\n  fieldLabel?: string;\n  /** The colon between the hour and the minute. */\n  separator?: string;\n  /** The AM / PM selector. */\n  period?: string;\n  /** Each of the AM / PM selector's options. */\n  periodOption?: string;\n  /** The clock dial (dial mode): its face, numbers and hand are drawn inside it. */\n  dial?: string;\n}\n\nexport type TimePickerMode = 'dial' | 'input';\n\n// No `aria-description` and the like: the picker's root is a plain container, and no single\n// element in it stands for the whole picker.\nexport interface TimePickerProps extends Omit<WrapperRootDOMProps, DescriptionAria> {\n  /** Controlled time (`@internationalized/date` `Time`). */\n  value?: Time;\n  /** Initial time when uncontrolled. @default 12:00 */\n  defaultValue?: Time;\n  /** Called with the new time when the user changes it. */\n  onChange?: (value: Time) => void;\n  /** 12- or 24-hour clock. Left out, the locale's hour cycle (12 in en-US, 24 in en-GB). */\n  hourCycle?: 12 | 24;\n  /** The clock dial, or typed hour and minute fields (controlled). */\n  mode?: TimePickerMode;\n  /** Initial mode when uncontrolled. @default \"dial\" */\n  defaultMode?: TimePickerMode;\n  /** Called when the user switches between the dial and the typed input. */\n  onModeChange?: (mode: TimePickerMode) => void;\n  /**\n   * `vertical` stacks the time over the dial; `horizontal` (landscape) puts them side by\n   * side. `auto` picks vertical when the window is tall enough, horizontal when it is only\n   * wide enough, and the typed input when neither fits, so the picker never scrolls (M3\n   * time picker placement and adaptive design). @default \"auto\"\n   */\n  layout?: 'vertical' | 'horizontal' | 'auto';\n  /** Words the picker shows and announces, with English defaults. */\n  labels?: Partial<TimePickerLabels>;\n  /**\n   * Web density of the input mode, `0` to `-3`: each step takes 4px off the typed hour and\n   * minute fields (72px at 0, 60px at -3). The dial keeps its size: M3 doesn't make time\n   * pickers denser, since its 48px number targets are part of their accessibility. Left out,\n   * the picker takes the density of the nearest `ThemeProvider` or `ThemeScope`.\n   * @default 0\n   */\n  density?: Density;\n  /** The root `<div>`'s id. */\n  id?: string;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\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?: TimePickerClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/*\n * Window sizes for `layout=\"auto\"`, from the picker in a `PickerDialog` (24px around the\n * panel, 24px padding, the title and the actions): the vertical dial needs 568px of\n * height; the horizontal one 452px of height and 640px of width.\n */\nconst SHORT_WINDOW = '(max-height: 567.98px)';\nconst NO_ROOM_FOR_DIAL = '(max-height: 451.98px), (max-height: 567.98px) and (max-width: 639.98px)';\n\n/** Where an `auto` time picker's dial fits: `vertical`, `horizontal` or `none`. */\nexport function useTimePickerRoom(): 'vertical' | 'horizontal' | 'none' {\n  const short = useMediaQuery(SHORT_WINDOW);\n  const noRoom = useMediaQuery(NO_ROOM_FOR_DIAL);\n  return noRoom ? 'none' : short ? 'horizontal' : 'vertical';\n}\n\nconst defaultDialValue = (value: string, total: number, unit: 'hours' | 'minutes') =>\n  `${value} ${unit} of ${total}`;\n\n/**\n * M3 time picker (Compose's `TimePicker` and `TimeInput`): hour and minute selectors you\n * can type in, with an AM / PM selector, and a clock dial whose numbers are buttons (press,\n * drag, or Tab to one and press Enter; the hour moves on to the minutes); or typed fields\n * in input mode. It turns to a horizontal layout, or the input mode, when the window has\n * no room for the dial. Put it in a {@link PickerDialog} for the modal form, with a\n * {@link TimePickerModeToggle}.\n *\n * @example\n * <TimePicker value={time} onChange={setTime} />\n */\nexport function TimePicker({\n  value,\n  defaultValue,\n  onChange,\n  hourCycle: hourCycleProp,\n  mode: modeProp,\n  defaultMode = 'dial',\n  onModeChange,\n  layout = 'auto',\n  labels = {},\n  density,\n  id,\n  ref,\n  className,\n  style,\n  classNames,\n  ...rest\n}: TimePickerProps) {\n  const { root: data } = splitRootProps(rest, { wrapper: true });\n  const { locale } = useLocale();\n  const hourCycle = hourCycleProp ?? localeHourCycle(locale);\n  const [time, setTime] = useControlledState(value, defaultValue ?? new Time(12, 0), onChange);\n  const [chosenMode] = useControlledState(modeProp, defaultMode, onModeChange);\n  const room = useTimePickerRoom();\n  const fits = layout === 'auto' ? room : layout;\n  const mode = fits === 'none' ? 'input' : chosenMode;\n  const resolvedLayout = mode === 'input' || fits === 'none' ? 'vertical' : fits;\n  const [selection, setSelection] = useState<'hour' | 'minute'>('hour');\n  const styles = timePickerStyles({ hourCycle, mode, layout: resolvedLayout });\n  const pad = useNumberFormatter({ minimumIntegerDigits: 2, useGrouping: false });\n  const plain = useNumberFormatter({ useGrouping: false });\n  const isPm = time.hour >= 12;\n  const displayHour = hourCycle === 24 ? time.hour : time.hour % 12 || 12;\n  // Two digits on both clocks, as Compose's selector and input show a 12-hour \"02\"\n  // (`hourForDisplay.toLocalString(minDigits = 2)`); the dial's numbers stay unpadded.\n  const formatHour = (n: number) => pad.format(n);\n  const setPeriod = (pm: boolean) => {\n    if (pm !== isPm) setTime(time.set({ hour: (time.hour + 12) % 24 }));\n  };\n  const commitHour = (hour: number) =>\n    setTime(time.set({ hour: hourCycle === 24 ? hour : (hour % 12) + (isPm ? 12 : 0) }));\n  const hourLabel = labels.hour ?? 'Hour';\n  const minuteLabel = labels.minute ?? 'Minute';\n  const minuteRef = useRef<HTMLInputElement>(null);\n  // The page's direction where the picker sits (its `dir`, not only the locale's), which the\n  // AM / PM options follow inside the time's left-to-right row (2026-10-17).\n  const [domDirection, setDomDirection] = useState<'ltr' | 'rtl' | undefined>(undefined);\n  const directionRef = useCallback<RefCallback<HTMLDivElement>>((element) => {\n    if (element) setDomDirection(getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr');\n  }, []);\n  const rootRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, directionRef), [ref, directionRef]);\n\n  return (\n    <div\n      {...data}\n      id={id}\n      ref={rootRef}\n      style={style}\n      // The time picker's component tokens (time-picker-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-time-picker', data)}\n      data-mode={mode}\n      data-layout={resolvedLayout}\n      {...densityAttribute(density)}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {/* Time reads hour : minute, then AM / PM, in every direction (Compose forces LTR). */}\n      <div dir=\"ltr\" className={styles.display()}>\n        <div className={styles.time()}>\n          <NumberField\n            label={hourLabel}\n            value={displayHour}\n            min={hourCycle === 24 ? 0 : 1}\n            max={hourCycle === 24 ? 23 : 12}\n            format={formatHour}\n            onCommit={commitHour}\n            // Input mode moves on to the minute once the hour is complete (Compose's TimeInput).\n            onComplete={mode === 'input' ? () => minuteRef.current?.focus() : undefined}\n            selector={mode === 'dial'}\n            selected={selection === 'hour'}\n            onFocus={() => setSelection('hour')}\n            styles={styles}\n            classNames={classNames}\n          />\n          <span aria-hidden=\"true\" className={styles.separator({ class: classNames?.separator })}>\n            :\n          </span>\n          <NumberField\n            label={minuteLabel}\n            value={time.minute}\n            min={0}\n            max={59}\n            format={(n) => pad.format(n)}\n            onCommit={(minute) => setTime(time.set({ minute }))}\n            inputRef={minuteRef}\n            selector={mode === 'dial'}\n            selected={selection === 'minute'}\n            onFocus={() => setSelection('minute')}\n            styles={styles}\n            classNames={classNames}\n          />\n        </div>\n        {hourCycle === 12 && (\n          <PeriodGroup\n            label={labels.period ?? 'AM or PM'}\n            am={labels.am ?? 'AM'}\n            pm={labels.pm ?? 'PM'}\n            isPm={isPm}\n            onChange={setPeriod}\n            direction={domDirection}\n            styles={styles}\n            classNames={classNames}\n          />\n        )}\n      </div>\n      {mode === 'dial' && (\n        <Dial\n          time={time}\n          setTime={setTime}\n          selection={selection}\n          onHourPicked={() => setSelection('minute')}\n          hourCycle={hourCycle}\n          label={labels.dial ?? 'Clock'}\n          valueLabel={labels.dialValue ?? defaultDialValue}\n          format={(n, minutes) => (minutes || hourCycle === 24 ? pad.format(n) : plain.format(n))}\n          plain={(n) => plain.format(n)}\n          styles={styles}\n          className={classNames?.dial}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface TimePickerModeToggleProps extends RootDOMProps<HTMLButtonElement> {\n  /** The time picker's mode; the toggle switches to the other one. */\n  mode: TimePickerMode;\n  /** Called with the other mode when the toggle is pressed. */\n  onModeChange: (mode: TimePickerMode) => void;\n  /**\n   * Words the toggle announces (`inputMode`, `dialMode`), with English defaults. Takes the\n   * same object as the time picker's `labels`, so one set of words covers both.\n   */\n  labels?: Partial<TimePickerLabels>;\n  /** Shown in dial mode. Defaults to Material Symbols' keyboard. */\n  keyboardIcon?: ReactElement;\n  /** Shown in input mode. Defaults to Material Symbols' schedule (a clock). */\n  clockIcon?: ReactElement;\n  /** Classes for the icon button; consumer classes win. */\n  className?: string;\n  /** Inline styles for the icon button. */\n  style?: CSSProperties;\n  /** The icon button's id. */\n  id?: string;\n  /** Ref to the icon button. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The time picker's keyboard / clock icon button (M3: \"The input selector should be\n * accessible from the dial selector via the keyboard icon\"), for `PickerDialog`'s\n * `modeToggleButton`. Hidden when the window has no room for the dial, where an `auto`\n * time picker shows only the input.\n *\n * @example\n * <PickerDialog variant=\"time\" modeToggleButton={<TimePickerModeToggle mode={mode} onModeChange={setMode} />} …>\n *   <TimePicker mode={mode} onModeChange={setMode} />\n * </PickerDialog>\n */\nexport function TimePickerModeToggle({\n  mode,\n  onModeChange,\n  labels = {},\n  keyboardIcon,\n  clockIcon,\n  className,\n  style,\n  id,\n  ref,\n  ...dom\n}: TimePickerModeToggleProps) {\n  const room = useTimePickerRoom();\n  if (room === 'none') return null;\n  // The icon button is the toggle's root: it takes the DOM attributes too.\n  const own = { ...dom, className, style, id, ref };\n  return mode === 'dial' ? (\n    <IconButton\n      variant=\"standard\"\n      // The dialog isn't dense, only the input mode's fields.\n      density={0}\n      icon={keyboardIcon ?? <KeyboardIcon />}\n      aria-label={labels.inputMode ?? 'Toggle input picker'}\n      onPress={() => onModeChange('input')}\n      {...own}\n    />\n  ) : (\n    <IconButton\n      variant=\"standard\"\n      density={0}\n      icon={clockIcon ?? <ScheduleIcon />}\n      aria-label={labels.dialMode ?? 'Toggle dial picker'}\n      onPress={() => onModeChange('dial')}\n      {...own}\n    />\n  );\n}\n\n/**\n * The AM / PM selector: a radio group (M3: \"Radio button (in list)\"), so it is one Tab stop\n * on the checked option and the arrow keys move the choice, as WAI-ARIA's radio group.\n */\nfunction PeriodGroup({\n  label,\n  am,\n  pm,\n  isPm,\n  onChange,\n  direction: domDirection,\n  styles,\n  classNames,\n}: {\n  label: string;\n  am: string;\n  pm: string;\n  isPm: boolean;\n  onChange: (pm: boolean) => void;\n  /** The picker's laid-out direction, once known; the locale's until then (server render). */\n  direction: 'ltr' | 'rtl' | undefined;\n  styles: ReturnType<typeof timePickerStyles>;\n  classNames: TimePickerClassNames | undefined;\n}) {\n  const { direction: localeDirection } = useLocale();\n  const direction = domDirection ?? localeDirection;\n  const refs = useRef<(HTMLButtonElement | null)[]>([]);\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const forward = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n    const backward = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n    const step =\n      event.key === 'ArrowDown' || event.key === forward\n        ? 1\n        : event.key === 'ArrowUp' || event.key === backward\n          ? -1\n          : 0;\n    if (step === 0) return;\n    event.preventDefault();\n    // Two options: either step moves to the other one, wrapping.\n    const next = !isPm;\n    onChange(next);\n    refs.current[next ? 1 : 0]?.focus();\n  };\n  return (\n    // The options keep the page's direction for their order in the horizontal layout.\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      dir={direction}\n      onKeyDown={onKeyDown}\n      data-slot=\"period-selector\"\n      className={styles.period({ class: classNames?.period })}\n    >\n      {[false, true].map((option) => (\n        <PeriodOption\n          key={String(option)}\n          ref={(element) => {\n            refs.current[option ? 1 : 0] = element;\n          }}\n          label={option ? pm : am}\n          selected={isPm === option}\n          onSelect={() => onChange(option)}\n          className={styles.periodOption({ class: classNames?.periodOption })}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction PeriodOption({\n  label,\n  selected,\n  onSelect,\n  className,\n  ref: refProp,\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n  className: string;\n  ref: (element: HTMLButtonElement | null) => void;\n}) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { interactionProps, dataAttributes } = useM3Interaction({}, ref);\n  return (\n    <button\n      {...mergeProps(interactionProps, { onClick: onSelect })}\n      {...dataAttributes}\n      ref={(element) => {\n        ref.current = element;\n        refProp(element);\n      }}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      tabIndex={selected ? 0 : -1}\n      data-slot=\"period-selector-option\"\n      data-selected={selected || undefined}\n      className={className}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * A typed hour or minute: the input mode's 96 × 72px field with its label below, or in\n * dial mode the 96 × 80px selector, which picks the dial's face when focused and takes\n * digits too (M3: \"The dial time picker supports both manual and dial input\").\n */\nfunction NumberField({\n  label,\n  value,\n  min,\n  max,\n  format,\n  onCommit,\n  onComplete,\n  inputRef,\n  selector,\n  selected,\n  onFocus,\n  styles,\n  classNames,\n}: {\n  label: string;\n  value: number;\n  min: number;\n  max: number;\n  format: (n: number) => string;\n  onCommit: (value: number) => void;\n  /** Called once a typed value can't take another digit (two digits, or \"3\" for an hour). */\n  onComplete?: (() => void) | undefined;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  selector: boolean;\n  selected: boolean;\n  onFocus: () => void;\n  styles: ReturnType<typeof timePickerStyles>;\n  classNames: TimePickerClassNames | undefined;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const { focusProps, isFocusVisible } = useFocusRing();\n  // A selector shows hover and pressed state layers (M3 states: Enabled, Hover, Focus, Pressed).\n  const { hoverProps, isHovered } = useHover({ isDisabled: !selector });\n  const [pressed, setPressed] = useState(false);\n  const release = () => setPressed(false);\n  const parsed = draft === null ? value : Number(draft);\n  const invalid =\n    draft !== null && (draft === '' || Number.isNaN(parsed) || parsed < min || parsed > max);\n  const input = (\n    <input\n      {...mergeProps(focusProps, hoverProps, {\n        onFocus: (event: { currentTarget: HTMLInputElement }) => {\n          event.currentTarget.select();\n          onFocus();\n        },\n      })}\n      ref={inputRef}\n      onPointerDown={() => selector && setPressed(true)}\n      onPointerUp={release}\n      onPointerLeave={release}\n      onPointerCancel={release}\n      inputMode=\"numeric\"\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      maxLength={2}\n      value={draft ?? format(value)}\n      data-slot={selector ? 'time-selector' : undefined}\n      data-selected={(selector && selected) || undefined}\n      data-focus-visible={(selector && isFocusVisible) || undefined}\n      data-hovered={(selector && isHovered) || undefined}\n      data-pressed={(selector && pressed) || undefined}\n      onChange={(event) => {\n        const text = event.target.value.replace(/\\D/g, '');\n        setDraft(text);\n        const next = Number(text);\n        if (text === '' || next < min || next > max) return;\n        onCommit(next);\n        if (text.length === 2 || next * 10 > max) onComplete?.();\n      }}\n      onBlur={() => setDraft(null)}\n      onKeyDown={(event) => {\n        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;\n        event.preventDefault();\n        const step = event.key === 'ArrowUp' ? 1 : -1;\n        const next = value + step > max ? min : value + step < min ? max : value + step;\n        setDraft(null);\n        onCommit(next);\n      }}\n      className={\n        selector\n          ? styles.selector({ class: classNames?.field })\n          : styles.field({ class: classNames?.field })\n      }\n    />\n  );\n  if (selector) return input;\n  return (\n    <label className={styles.fieldColumn()}>\n      {input}\n      <span aria-hidden=\"true\" className={styles.fieldLabel({ class: classNames?.fieldLabel })}>\n        {label}\n      </span>\n    </label>\n  );\n}\n\n/** Angle of a dial position (0 at 12 o'clock, clockwise), in turns. */\nconst turnOf = (x: number, y: number) =>\n  (Math.atan2(x - CENTER, CENTER - y) / (2 * Math.PI) + 1) % 1;\nconst pointOf = (turn: number, radius: number) => ({\n  x: CENTER + radius * Math.sin(turn * 2 * Math.PI),\n  y: CENTER - radius * Math.cos(turn * 2 * Math.PI),\n});\n\ninterface DialNumber {\n  value: number;\n  turn: number;\n  radius: number;\n}\n\n/** The numbers on the face: minutes in fives, hours 12 / 1–11, plus 12–23 inside for 24 hours. */\nfunction dialNumbers(minutes: boolean, hourCycle: 12 | 24): DialNumber[] {\n  const ring = (radius: number, valueAt: (i: number) => number) =>\n    Array.from({ length: 12 }, (_, i) => ({ value: valueAt(i), turn: i / 12, radius }));\n  if (minutes) return ring(OUTER_RADIUS, (i) => i * 5);\n  if (hourCycle === 12) return ring(OUTER_RADIUS, (i) => i || 12);\n  // 24 hours: 00–11 on the outer ring, 12–23 on the inner one (as Compose and Android).\n  return [...ring(OUTER_RADIUS, (i) => i), ...ring(INNER_RADIUS, (i) => i + 12)];\n}\n\n/** The shortest signed way round the dial from one turn to another, in turns (−½ to ½). */\nconst shortestTurn = (from: number, to: number) => ((((to - from) % 1) + 1.5) % 1) - 0.5;\n\n/**\n * How close the hand is to its value when it counts as there: Compose's turn ends at the\n * spring's visibility threshold of 0.01 rad (about 0.6°), and here within 1px of the radius\n * too, while the last fraction of the spring still plays out.\n */\nconst ARRIVED_TURN = 0.01 / (2 * Math.PI);\nconst ARRIVED_RADIUS = 1;\n\n/** Runs and clears the callbacks waiting in `queue`. */\nconst flush = (queue: RefObject<(() => void)[]>) => {\n  const callbacks = queue.current;\n  queue.current = [];\n  for (const callback of callbacks) callback();\n};\n\n/**\n * The hand's track, handle and the clip of the `on-primary` numbers follow the drawn angle,\n * set as attributes from an animation (no React render per frame). It turns to a new value\n * on the default spatial spring along the shortest arc (M3: \"Spatial springs apply to …\n * rotation\"; Compose animates the selector on hour ↔ minute and taps), follows a drag\n * directly, and jumps under reduced motion. Returns `whenSettled`, which runs a callback\n * once the hand rests on its value.\n */\nfunction useDialHand(\n  turn: number,\n  radius: number,\n  follow: RefObject<boolean>,\n  parts: RefObject<{\n    track: SVGLineElement | null;\n    handle: SVGCircleElement | null;\n    clip: SVGCircleElement | null;\n  }>,\n) {\n  const spring = useM3Spring('spatial', 'default');\n  const reducedMotion = useReducedMotion() ?? false;\n  const drawn = useRef({ turn, radius });\n  const animation = useRef<AnimationPlaybackControls | null>(null);\n  // Callbacks waiting for the hand to arrive (`whenSettled`), and whether it has.\n  const settled = useRef<(() => void)[]>([]);\n  const arrived = useRef(true);\n\n  // Before paint, so the hand never flashes at its new value before turning there.\n  useLayoutEffect(() => {\n    const draw = (nextTurn: number, nextRadius: number) => {\n      drawn.current = { turn: nextTurn, radius: nextRadius };\n      const point = pointOf(nextTurn, nextRadius);\n      const { track, handle, clip } = parts.current;\n      track?.setAttribute('x2', String(point.x));\n      track?.setAttribute('y2', String(point.y));\n      for (const circle of [handle, clip]) {\n        circle?.setAttribute('cx', String(point.x));\n        circle?.setAttribute('cy', String(point.y));\n      }\n    };\n    const from = drawn.current;\n    const delta = shortestTurn(from.turn, turn);\n    animation.current?.stop();\n    animation.current = null;\n    if (follow.current || reducedMotion || (delta === 0 && from.radius === radius)) {\n      draw(turn, radius);\n      arrived.current = true;\n      flush(settled);\n      return;\n    }\n    // React has written the new value's attributes; start from where the hand was.\n    draw(from.turn, from.radius);\n    arrived.current = false;\n    // Two frames in a row within the threshold: the hand swinging past its value at speed\n    // (the expressive spring overshoots by about 1.5%) doesn't count as there.\n    let near = false;\n    animation.current = animate(0, 1, {\n      ...spring,\n      onUpdate: (progress) => {\n        draw(from.turn + delta * progress, from.radius + (radius - from.radius) * progress);\n        const close =\n          Math.abs(delta * (1 - progress)) <= ARRIVED_TURN &&\n          Math.abs((radius - from.radius) * (1 - progress)) <= ARRIVED_RADIUS;\n        if (close && near && !arrived.current) {\n          arrived.current = true;\n          flush(settled);\n        }\n        near = close;\n      },\n      // A spring rests within a small distance of its target; end exactly on the value.\n      onComplete: () => {\n        draw(turn, radius);\n        animation.current = null;\n        arrived.current = true;\n        flush(settled);\n      },\n    });\n  }, [turn, radius, follow, parts, reducedMotion, spring]);\n\n  useEffect(\n    () => () => {\n      animation.current?.stop();\n      settled.current = [];\n    },\n    [],\n  );\n\n  /** Runs `callback` once the hand has arrived at its value (at once if it already has). */\n  return (callback: () => void) => {\n    if (animation.current && !arrived.current) settled.current.push(callback);\n    else callback();\n  };\n}\n\n/**\n * Which faces to draw: the current one, and the one it replaced while that fades out\n * (Compose crossfades the hour and minute faces).\n */\nfunction useFaces(minutes: boolean) {\n  const [faces, setFaces] = useState<{ current: boolean; leaving: boolean | null }>({\n    current: minutes,\n    leaving: null,\n  });\n  if (faces.current !== minutes) setFaces({ current: minutes, leaving: faces.current });\n  const clearLeaving = () => setFaces((previous) => ({ ...previous, leaving: null }));\n  return { leaving: faces.leaving, clearLeaving };\n}\n\nfunction Dial({\n  time,\n  setTime,\n  selection,\n  onHourPicked,\n  hourCycle,\n  label,\n  valueLabel,\n  format,\n  plain,\n  styles,\n  className,\n}: {\n  time: Time;\n  setTime: (time: Time) => void;\n  selection: 'hour' | 'minute';\n  onHourPicked: () => void;\n  hourCycle: 12 | 24;\n  label: string;\n  valueLabel: (value: string, total: number, unit: 'hours' | 'minutes') => string;\n  /** A number as shown on the hour face (`minutes` false) or the minute face. */\n  format: (n: number, minutes: boolean) => string;\n  plain: (n: number) => string;\n  styles: ReturnType<typeof timePickerStyles>;\n  className?: string | undefined;\n}) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const numberRefs = useRef<(SVGGElement | null)[]>([]);\n  const hand = useRef<{\n    track: SVGLineElement | null;\n    handle: SVGCircleElement | null;\n    clip: SVGCircleElement | null;\n  }>({ track: null, handle: null, clip: null });\n  const pressing = useRef(false);\n  // True while a press moves across the dial: the hand follows it without a spring.\n  const dragging = useRef(false);\n  const pendingFocus = useRef<number | null>(null);\n  const [focused, setFocused] = useState<number | null>(null);\n  const { isFocusVisible } = useFocusVisible();\n  const clipId = useId();\n  const minutes = selection === 'minute';\n  const { leaving, clearLeaving } = useFaces(minutes);\n  const isPm = time.hour >= 12;\n  const numbers = dialNumbers(minutes, hourCycle);\n\n  const selectedTurn = minutes ? time.minute / 60 : (time.hour % 12) / 12;\n  const selectedRadius =\n    !minutes && hourCycle === 24 && time.hour >= 12 ? INNER_RADIUS : OUTER_RADIUS;\n  const handle = pointOf(selectedTurn, selectedRadius);\n  const whenSettled = useDialHand(selectedTurn, selectedRadius, dragging, hand);\n  // A tapped hour's switch to the minutes, waiting for the hand (cancelled by a new press,\n  // a face change or unmounting).\n  const switchTimer = useRef<number | undefined>(undefined);\n  const cancelSwitch = () => {\n    window.clearTimeout(switchTimer.current);\n    switchTimer.current = undefined;\n  };\n  useEffect(() => cancelSwitch, [minutes]);\n  const selectedValue = minutes ? time.minute : hourCycle === 24 ? time.hour : time.hour % 12 || 12;\n  // The number Tab lands on: the chosen one, or the nearest five for other minutes.\n  const tabStop = numbers.findIndex(({ value }) =>\n    minutes ? value === (Math.round(time.minute / 5) * 5) % 60 : value === selectedValue,\n  );\n\n  // After an hour is chosen with the keyboard, focus follows to the chosen minute.\n  useEffect(() => {\n    if (pendingFocus.current === null) return;\n    numberRefs.current[pendingFocus.current]?.focus();\n    pendingFocus.current = null;\n  });\n\n  // The replaced face is gone once it has faded out (or at once without transitions).\n  useEffect(() => {\n    if (leaving === null) return;\n    const timeout = window.setTimeout(clearLeaving, 1000);\n    return () => window.clearTimeout(timeout);\n  }, [leaving, clearLeaving]);\n\n  const toTime = (value: number) =>\n    minutes\n      ? time.set({ minute: value })\n      : time.set({ hour: hourCycle === 24 ? value : (value % 12) + (isPm ? 12 : 0) });\n\n  // The minute face replaces the hour face's numbers, so focus on one of them would drop to\n  // the page: it moves on to the chosen minute's number, as for the keyboard.\n  const switchToMinutes = () => {\n    if (svgRef.current?.contains(document.activeElement)) {\n      pendingFocus.current = Math.round(time.minute / 5) % 12;\n    }\n    onHourPicked();\n  };\n\n  const activate = (value: number) => {\n    setTime(toTime(value));\n    if (!minutes) {\n      pendingFocus.current = Math.round(time.minute / 5) % 12;\n      onHourPicked();\n    }\n  };\n\n  const pick = (event: PointerEvent<SVGSVGElement>) => {\n    const box = svgRef.current!.getBoundingClientRect();\n    const x = ((event.clientX - box.left) / box.width) * DIAL;\n    const y = ((event.clientY - box.top) / box.height) * DIAL;\n    const step = Math.round(turnOf(x, y) * 12) % 12;\n    // Taps and drags pick minutes in fives (Compose); the keyboard and typing reach any minute.\n    if (minutes) {\n      setTime(time.set({ minute: step * 5 }));\n      return;\n    }\n    const innerRing =\n      hourCycle === 24 && Math.hypot(x - CENTER, y - CENTER) < INNER_RING_MAX_DISTANCE;\n    const hour = hourCycle === 24 ? step + (innerRing ? 12 : 0) : step + (isPm ? 12 : 0);\n    setTime(time.set({ hour }));\n  };\n\n  const onNumberKeyDown = (event: KeyboardEvent<SVGGElement>, index: number) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      activate(numbers[index]!.value);\n      return;\n    }\n    const step = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1 }[event.key];\n    if (step === undefined) return;\n    event.preventDefault();\n    // Clockwise through the values; a 24-hour face runs on from 11 to 12 on the inner ring.\n    const next = (index + step + numbers.length) % numbers.length;\n    setFocused(next);\n    numberRefs.current[next]?.focus();\n  };\n\n  const total = minutes ? 60 : hourCycle;\n  const unit = minutes ? 'minutes' : 'hours';\n  const endPress = () => {\n    pressing.current = false;\n    dragging.current = false;\n  };\n  return (\n    <svg\n      ref={svgRef}\n      viewBox={`0 0 ${DIAL} ${DIAL}`}\n      role=\"group\"\n      aria-label={label}\n      onPointerDown={(event) => {\n        cancelSwitch();\n        pressing.current = true;\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n        pick(event);\n      }}\n      onPointerMove={(event) => {\n        if (!pressing.current) return;\n        dragging.current = true;\n        pick(event);\n      }}\n      onPointerUp={() => {\n        if (pressing.current && !minutes) {\n          if (dragging.current) {\n            // A drag already shows the hour under the finger: switch on release.\n            switchToMinutes();\n          } else {\n            // A tap turns the hand to the hour, shows it for 100ms, then switches\n            // (Compose's `onTap`: `rotateTo(animate = true)`, `delay(100)`).\n            whenSettled(() => {\n              switchTimer.current = window.setTimeout(switchToMinutes, 100);\n            });\n          }\n        }\n        endPress();\n      }}\n      onPointerCancel={endPress}\n      className={cn(styles.dial(), className)}\n    >\n      <defs>\n        <clipPath id={clipId}>\n          <circle\n            ref={(element) => {\n              hand.current.clip = element;\n            }}\n            cx={handle.x}\n            cy={handle.y}\n            r={HANDLE / 2}\n          />\n        </clipPath>\n      </defs>\n      <circle\n        cx={CENTER}\n        cy={CENTER}\n        r={CENTER}\n        data-slot=\"clock-dial\"\n        className={styles.dialFace()}\n      />\n      <line\n        ref={(element) => {\n          hand.current.track = element;\n        }}\n        x1={CENTER}\n        y1={CENTER}\n        x2={handle.x}\n        y2={handle.y}\n        strokeWidth={2}\n        className={styles.dialTrack()}\n      />\n      <circle cx={CENTER} cy={CENTER} r={4} className={styles.dialHandle()} />\n      <circle\n        ref={(element) => {\n          hand.current.handle = element;\n        }}\n        cx={handle.x}\n        cy={handle.y}\n        r={HANDLE / 2}\n        data-slot=\"clock-dial-selector-handle\"\n        className={styles.dialHandle()}\n      />\n      {leaving !== null && (\n        <g\n          key={`leaving-${String(leaving)}`}\n          aria-hidden=\"true\"\n          onTransitionEnd={clearLeaving}\n          className={styles.dialFaceLeaving()}\n        >\n          {dialNumbers(leaving, hourCycle).map(({ value, turn, radius }, index) => {\n            const point = pointOf(turn, radius);\n            return (\n              <text\n                key={index}\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className={styles.dialNumberText()}\n              >\n                {format(value, leaving)}\n              </text>\n            );\n          })}\n        </g>\n      )}\n      <g\n        key={`face-${String(minutes)}`}\n        className={leaving === null ? undefined : styles.dialFaceEntering()}\n      >\n        {numbers.map(({ value, turn, radius }, index) => {\n          const point = pointOf(turn, radius);\n          const selected = value === selectedValue && (minutes ? time.minute % 5 === 0 : true);\n          return (\n            <g\n              key={index}\n              ref={(element) => {\n                numberRefs.current[index] = element;\n              }}\n              role=\"button\"\n              tabIndex={index === (focused ?? tabStop) ? 0 : -1}\n              aria-label={valueLabel(plain(value), total, unit)}\n              aria-pressed={selected}\n              data-selected={selected || undefined}\n              onFocus={() => setFocused(index)}\n              onBlur={() => setFocused(null)}\n              onKeyDown={(event) => onNumberKeyDown(event, index)}\n              onClick={(event) => {\n                // Assistive technology activates with a click that has no pointer behind it.\n                if (event.detail === 0) activate(value);\n              }}\n              className={styles.dialNumber()}\n            >\n              <circle cx={point.x} cy={point.y} r={TARGET / 2} className={styles.dialNumberHit()} />\n              {focused === index && isFocusVisible && (\n                <circle\n                  cx={point.x}\n                  cy={point.y}\n                  r={TARGET / 2 - 1}\n                  strokeWidth={3}\n                  className={styles.dialFocus()}\n                />\n              )}\n              <text\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                aria-hidden=\"true\"\n                data-selected={selected || undefined}\n                className={styles.dialNumberText()}\n              >\n                {format(value, minutes)}\n              </text>\n            </g>\n          );\n        })}\n        {/*\n         * The numbers again in `on-primary`, clipped to the handle, so whatever part of a\n         * number the handle covers reads on it (M3: the selected label is `on-primary`;\n         * Compose blends the two layers the same way).\n         */}\n        <g aria-hidden=\"true\" clipPath={`url(#${clipId})`} className=\"pointer-events-none\">\n          {numbers.map(({ value, turn, radius }, index) => {\n            const point = pointOf(turn, radius);\n            return (\n              <text\n                key={index}\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className={styles.dialNumberOnHandle()}\n              >\n                {format(value, minutes)}\n              </text>\n            );\n          })}\n        </g>\n      </g>\n    </svg>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../../src/components/time-picker/TimePicker.tsx"],"sourcesContent":["'use client';\n\nimport { Time } from '@internationalized/date';\nimport { animate, useReducedMotion, type AnimationPlaybackControls } from 'motion/react';\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useFocusRing,\n  useFocusVisible,\n  useHover,\n  useLocale,\n  useNumberFormatter,\n} from 'react-aria';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { NO_DEFAULT_LABELS, useLabels } from '../labels/use-labels';\nimport { useM3Spring } from '../../motion/use-m3-spring';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport {\n  splitRootProps,\n  type DescriptionAria,\n  type RootDOMProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { KeyboardIcon, ScheduleIcon } from '../date-picker/picker-icons';\nimport { useMediaQuery } from '../date-picker/use-media-query';\nimport { IconButton } from '../icon-button/IconButton';\nimport { localeHourCycle } from './hour-cycle';\nimport { timePickerStyles } from './time-picker-styles';\n\n/** Compose's clock geometry (TimePicker.kt), in px on the 256px dial. */\nconst DIAL = 256;\nconst CENTER = DIAL / 2;\nconst OUTER_RADIUS = 101;\nconst INNER_RADIUS = 69;\nconst HANDLE = 48;\n/** A press nearer the centre than this picks the inner 24-hour ring (Compose's `MaxDistance`). */\nconst INNER_RING_MAX_DISTANCE = 74;\n/** Each number on the dial is a 48px target (M3: \"Targets for dial selectors should be 48x48dp\"). */\nconst TARGET = 48;\n\nexport interface TimePickerLabels {\n  /** Name of the hour selector and field. @default \"Hour\" */\n  hour: string;\n  /** Name of the minute selector and field. @default \"Minute\" */\n  minute: string;\n  /** The AM option. @default \"AM\" */\n  am: string;\n  /** The PM option. @default \"PM\" */\n  pm: string;\n  /** Name of the AM / PM selector. @default \"AM or PM\" */\n  period: string;\n  /** Name of the dial. @default \"Clock\" */\n  dial: string;\n  /** {@link TimePickerModeToggle}'s name in dial mode. @default \"Toggle input picker\" */\n  inputMode: string;\n  /** {@link TimePickerModeToggle}'s name in input mode. @default \"Toggle dial picker\" */\n  dialMode: string;\n  /**\n   * Name of a number on the dial (M3: \"{Value} Hours or minutes of {Total}\"), e.g.\n   * \"7 hours of 12\" or \"35 minutes of 60\".\n   * @default `${value} ${unit} of ${total}`\n   */\n  dialValue: (value: string, total: number, unit: 'hours' | 'minutes') => string;\n}\n\nexport interface TimePickerClassNames {\n  /** The picker's root; `className` is merged here too. */\n  root?: string;\n  /** The hour and minute: selectors in dial mode, text fields in input mode. */\n  field?: string;\n  /** The labels under the input mode's fields (\"Hour\", \"Minute\"). */\n  fieldLabel?: string;\n  /** The colon between the hour and the minute. */\n  separator?: string;\n  /** The AM / PM selector. */\n  period?: string;\n  /** Each of the AM / PM selector's options. */\n  periodOption?: string;\n  /** The clock dial (dial mode): its face, numbers and hand are drawn inside it. */\n  dial?: string;\n}\n\nexport type TimePickerMode = 'dial' | 'input';\n\n// No `aria-description` and the like: the picker's root is a plain container, and no single\n// element in it stands for the whole picker.\nexport interface TimePickerProps extends Omit<WrapperRootDOMProps, DescriptionAria> {\n  /** Controlled time (`@internationalized/date` `Time`). */\n  value?: Time;\n  /** Initial time when uncontrolled. @default 12:00 */\n  defaultValue?: Time;\n  /** Called with the new time when the user changes it. */\n  onChange?: (value: Time) => void;\n  /** 12- or 24-hour clock. Left out, the locale's hour cycle (12 in en-US, 24 in en-GB). */\n  hourCycle?: 12 | 24;\n  /** The clock dial, or typed hour and minute fields (controlled). */\n  mode?: TimePickerMode;\n  /** Initial mode when uncontrolled. @default \"dial\" */\n  defaultMode?: TimePickerMode;\n  /** Called when the user switches between the dial and the typed input. */\n  onModeChange?: (mode: TimePickerMode) => void;\n  /**\n   * `vertical` stacks the time over the dial; `horizontal` (landscape) puts them side by\n   * side. `auto` picks vertical when the window is tall enough, horizontal when it is only\n   * wide enough, and the typed input when neither fits, so the picker never scrolls (M3\n   * time picker placement and adaptive design). @default \"auto\"\n   */\n  layout?: 'vertical' | 'horizontal' | 'auto';\n  /**\n   * Words the picker shows and announces, with English defaults. A {@link LabelsProvider} sets them\n   * for the whole app.\n   */\n  labels?: Partial<TimePickerLabels>;\n  /**\n   * Web density of the input mode, `0` to `-3`: each step takes 4px off the typed hour and\n   * minute fields (72px at 0, 60px at -3). The dial keeps its size: M3 doesn't make time\n   * pickers denser, since its 48px number targets are part of their accessibility. Left out,\n   * the picker takes the density of the nearest `ThemeProvider` or `ThemeScope`.\n   * @default 0\n   */\n  density?: Density;\n  /** The root `<div>`'s id. */\n  id?: string;\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\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?: TimePickerClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/*\n * Window sizes for `layout=\"auto\"`, from the picker in a `PickerDialog` (24px around the\n * panel, 24px padding, the title and the actions): the vertical dial needs 568px of\n * height; the horizontal one 452px of height and 640px of width.\n */\nconst SHORT_WINDOW = '(max-height: 567.98px)';\nconst NO_ROOM_FOR_DIAL = '(max-height: 451.98px), (max-height: 567.98px) and (max-width: 639.98px)';\n\n/** Where an `auto` time picker's dial fits: `vertical`, `horizontal` or `none`. */\nexport function useTimePickerRoom(): 'vertical' | 'horizontal' | 'none' {\n  const short = useMediaQuery(SHORT_WINDOW);\n  const noRoom = useMediaQuery(NO_ROOM_FOR_DIAL);\n  return noRoom ? 'none' : short ? 'horizontal' : 'vertical';\n}\n\nconst defaultDialValue = (value: string, total: number, unit: 'hours' | 'minutes') =>\n  `${value} ${unit} of ${total}`;\n\n/**\n * M3 time picker (Compose's `TimePicker` and `TimeInput`): hour and minute selectors you\n * can type in, with an AM / PM selector, and a clock dial whose numbers are buttons (press,\n * drag, or Tab to one and press Enter; the hour moves on to the minutes); or typed fields\n * in input mode. It turns to a horizontal layout, or the input mode, when the window has\n * no room for the dial. Put it in a {@link PickerDialog} for the modal form, with a\n * {@link TimePickerModeToggle}.\n *\n * @example\n * <TimePicker value={time} onChange={setTime} />\n */\nexport function TimePicker({\n  value,\n  defaultValue,\n  onChange,\n  hourCycle: hourCycleProp,\n  mode: modeProp,\n  defaultMode = 'dial',\n  onModeChange,\n  layout = 'auto',\n  labels: labelsProp,\n  density,\n  id,\n  ref,\n  className,\n  style,\n  classNames,\n  ...rest\n}: TimePickerProps) {\n  const labels = useLabels('TimePicker', NO_DEFAULT_LABELS, labelsProp);\n  const { root: data } = splitRootProps(rest, { wrapper: true });\n  const { locale } = useLocale();\n  const hourCycle = hourCycleProp ?? localeHourCycle(locale);\n  const [time, setTime] = useControlledState(value, defaultValue ?? new Time(12, 0), onChange);\n  const [chosenMode] = useControlledState(modeProp, defaultMode, onModeChange);\n  const room = useTimePickerRoom();\n  const fits = layout === 'auto' ? room : layout;\n  const mode = fits === 'none' ? 'input' : chosenMode;\n  const resolvedLayout = mode === 'input' || fits === 'none' ? 'vertical' : fits;\n  const [selection, setSelection] = useState<'hour' | 'minute'>('hour');\n  const styles = timePickerStyles({ hourCycle, mode, layout: resolvedLayout });\n  const pad = useNumberFormatter({ minimumIntegerDigits: 2, useGrouping: false });\n  const plain = useNumberFormatter({ useGrouping: false });\n  const isPm = time.hour >= 12;\n  const displayHour = hourCycle === 24 ? time.hour : time.hour % 12 || 12;\n  // Two digits on both clocks, as Compose's selector and input show a 12-hour \"02\"\n  // (`hourForDisplay.toLocalString(minDigits = 2)`); the dial's numbers stay unpadded.\n  const formatHour = (n: number) => pad.format(n);\n  const setPeriod = (pm: boolean) => {\n    if (pm !== isPm) setTime(time.set({ hour: (time.hour + 12) % 24 }));\n  };\n  const commitHour = (hour: number) =>\n    setTime(time.set({ hour: hourCycle === 24 ? hour : (hour % 12) + (isPm ? 12 : 0) }));\n  const hourLabel = labels.hour ?? 'Hour';\n  const minuteLabel = labels.minute ?? 'Minute';\n  const minuteRef = useRef<HTMLInputElement>(null);\n  // The page's direction where the picker sits (its `dir`, not only the locale's), which the\n  // AM / PM options follow inside the time's left-to-right row (2026-10-17).\n  const [domDirection, setDomDirection] = useState<'ltr' | 'rtl' | undefined>(undefined);\n  const directionRef = useCallback<RefCallback<HTMLDivElement>>((element) => {\n    if (element) setDomDirection(getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr');\n  }, []);\n  const rootRef = useMemo(() => mergeRefs<HTMLDivElement>(ref, directionRef), [ref, directionRef]);\n\n  return (\n    <div\n      {...data}\n      id={id}\n      ref={rootRef}\n      style={style}\n      // The time picker's component tokens (time-picker-tokens.ts).\n      data-tokens={mergeDataTokens('md-comp-time-picker', data)}\n      data-mode={mode}\n      data-layout={resolvedLayout}\n      {...densityAttribute(density)}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {/* Time reads hour : minute, then AM / PM, in every direction (Compose forces LTR). */}\n      <div dir=\"ltr\" className={styles.display()}>\n        <div className={styles.time()}>\n          <NumberField\n            label={hourLabel}\n            value={displayHour}\n            min={hourCycle === 24 ? 0 : 1}\n            max={hourCycle === 24 ? 23 : 12}\n            format={formatHour}\n            onCommit={commitHour}\n            // Input mode moves on to the minute once the hour is complete (Compose's TimeInput).\n            onComplete={mode === 'input' ? () => minuteRef.current?.focus() : undefined}\n            selector={mode === 'dial'}\n            selected={selection === 'hour'}\n            onFocus={() => setSelection('hour')}\n            styles={styles}\n            classNames={classNames}\n          />\n          <span aria-hidden=\"true\" className={styles.separator({ class: classNames?.separator })}>\n            :\n          </span>\n          <NumberField\n            label={minuteLabel}\n            value={time.minute}\n            min={0}\n            max={59}\n            format={(n) => pad.format(n)}\n            onCommit={(minute) => setTime(time.set({ minute }))}\n            inputRef={minuteRef}\n            selector={mode === 'dial'}\n            selected={selection === 'minute'}\n            onFocus={() => setSelection('minute')}\n            styles={styles}\n            classNames={classNames}\n          />\n        </div>\n        {hourCycle === 12 && (\n          <PeriodGroup\n            label={labels.period ?? 'AM or PM'}\n            am={labels.am ?? 'AM'}\n            pm={labels.pm ?? 'PM'}\n            isPm={isPm}\n            onChange={setPeriod}\n            direction={domDirection}\n            styles={styles}\n            classNames={classNames}\n          />\n        )}\n      </div>\n      {mode === 'dial' && (\n        <Dial\n          time={time}\n          setTime={setTime}\n          selection={selection}\n          onHourPicked={() => setSelection('minute')}\n          hourCycle={hourCycle}\n          label={labels.dial ?? 'Clock'}\n          valueLabel={labels.dialValue ?? defaultDialValue}\n          format={(n, minutes) => (minutes || hourCycle === 24 ? pad.format(n) : plain.format(n))}\n          plain={(n) => plain.format(n)}\n          styles={styles}\n          className={classNames?.dial}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface TimePickerModeToggleProps extends RootDOMProps<HTMLButtonElement> {\n  /** The time picker's mode; the toggle switches to the other one. */\n  mode: TimePickerMode;\n  /** Called with the other mode when the toggle is pressed. */\n  onModeChange: (mode: TimePickerMode) => void;\n  /**\n   * Words the toggle announces (`inputMode`, `dialMode`), with English defaults. Takes the same\n   * object as the time picker's `labels`, so one set of words covers both. A {@link LabelsProvider}\n   * sets them for the whole app.\n   */\n  labels?: Partial<TimePickerLabels>;\n  /** Shown in dial mode. Defaults to Material Symbols' keyboard. */\n  keyboardIcon?: ReactElement;\n  /** Shown in input mode. Defaults to Material Symbols' schedule (a clock). */\n  clockIcon?: ReactElement;\n  /** Classes for the icon button; consumer classes win. */\n  className?: string;\n  /** Inline styles for the icon button. */\n  style?: CSSProperties;\n  /** The icon button's id. */\n  id?: string;\n  /** Ref to the icon button. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The time picker's keyboard / clock icon button (M3: \"The input selector should be\n * accessible from the dial selector via the keyboard icon\"), for `PickerDialog`'s\n * `modeToggleButton`. Hidden when the window has no room for the dial, where an `auto`\n * time picker shows only the input.\n *\n * @example\n * <PickerDialog variant=\"time\" modeToggleButton={<TimePickerModeToggle mode={mode} onModeChange={setMode} />} …>\n *   <TimePicker mode={mode} onModeChange={setMode} />\n * </PickerDialog>\n */\nexport function TimePickerModeToggle({\n  mode,\n  onModeChange,\n  labels: labelsProp,\n  keyboardIcon,\n  clockIcon,\n  className,\n  style,\n  id,\n  ref,\n  ...dom\n}: TimePickerModeToggleProps) {\n  const labels = useLabels('TimePicker', NO_DEFAULT_LABELS, labelsProp);\n  const room = useTimePickerRoom();\n  if (room === 'none') return null;\n  // The icon button is the toggle's root: it takes the DOM attributes too.\n  const own = { ...dom, className, style, id, ref };\n  return mode === 'dial' ? (\n    <IconButton\n      variant=\"standard\"\n      // The dialog isn't dense, only the input mode's fields.\n      density={0}\n      icon={keyboardIcon ?? <KeyboardIcon />}\n      aria-label={labels.inputMode ?? 'Toggle input picker'}\n      onPress={() => onModeChange('input')}\n      {...own}\n    />\n  ) : (\n    <IconButton\n      variant=\"standard\"\n      density={0}\n      icon={clockIcon ?? <ScheduleIcon />}\n      aria-label={labels.dialMode ?? 'Toggle dial picker'}\n      onPress={() => onModeChange('dial')}\n      {...own}\n    />\n  );\n}\n\n/**\n * The AM / PM selector: a radio group (M3: \"Radio button (in list)\"), so it is one Tab stop\n * on the checked option and the arrow keys move the choice, as WAI-ARIA's radio group.\n */\nfunction PeriodGroup({\n  label,\n  am,\n  pm,\n  isPm,\n  onChange,\n  direction: domDirection,\n  styles,\n  classNames,\n}: {\n  label: string;\n  am: string;\n  pm: string;\n  isPm: boolean;\n  onChange: (pm: boolean) => void;\n  /** The picker's laid-out direction, once known; the locale's until then (server render). */\n  direction: 'ltr' | 'rtl' | undefined;\n  styles: ReturnType<typeof timePickerStyles>;\n  classNames: TimePickerClassNames | undefined;\n}) {\n  const { direction: localeDirection } = useLocale();\n  const direction = domDirection ?? localeDirection;\n  const refs = useRef<(HTMLButtonElement | null)[]>([]);\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const forward = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n    const backward = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n    const step =\n      event.key === 'ArrowDown' || event.key === forward\n        ? 1\n        : event.key === 'ArrowUp' || event.key === backward\n          ? -1\n          : 0;\n    if (step === 0) return;\n    event.preventDefault();\n    // Two options: either step moves to the other one, wrapping.\n    const next = !isPm;\n    onChange(next);\n    refs.current[next ? 1 : 0]?.focus();\n  };\n  return (\n    // The options keep the page's direction for their order in the horizontal layout.\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      dir={direction}\n      onKeyDown={onKeyDown}\n      data-slot=\"period-selector\"\n      className={styles.period({ class: classNames?.period })}\n    >\n      {[false, true].map((option) => (\n        <PeriodOption\n          key={String(option)}\n          ref={(element) => {\n            refs.current[option ? 1 : 0] = element;\n          }}\n          label={option ? pm : am}\n          selected={isPm === option}\n          onSelect={() => onChange(option)}\n          className={styles.periodOption({ class: classNames?.periodOption })}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction PeriodOption({\n  label,\n  selected,\n  onSelect,\n  className,\n  ref: refProp,\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n  className: string;\n  ref: (element: HTMLButtonElement | null) => void;\n}) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { interactionProps, dataAttributes } = useM3Interaction({}, ref);\n  return (\n    <button\n      {...mergeProps(interactionProps, { onClick: onSelect })}\n      {...dataAttributes}\n      ref={(element) => {\n        ref.current = element;\n        refProp(element);\n      }}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      tabIndex={selected ? 0 : -1}\n      data-slot=\"period-selector-option\"\n      data-selected={selected || undefined}\n      className={className}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * A typed hour or minute: the input mode's 96 × 72px field with its label below, or in\n * dial mode the 96 × 80px selector, which picks the dial's face when focused and takes\n * digits too (M3: \"The dial time picker supports both manual and dial input\").\n */\nfunction NumberField({\n  label,\n  value,\n  min,\n  max,\n  format,\n  onCommit,\n  onComplete,\n  inputRef,\n  selector,\n  selected,\n  onFocus,\n  styles,\n  classNames,\n}: {\n  label: string;\n  value: number;\n  min: number;\n  max: number;\n  format: (n: number) => string;\n  onCommit: (value: number) => void;\n  /** Called once a typed value can't take another digit (two digits, or \"3\" for an hour). */\n  onComplete?: (() => void) | undefined;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  selector: boolean;\n  selected: boolean;\n  onFocus: () => void;\n  styles: ReturnType<typeof timePickerStyles>;\n  classNames: TimePickerClassNames | undefined;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const { focusProps, isFocusVisible } = useFocusRing();\n  // A selector shows hover and pressed state layers (M3 states: Enabled, Hover, Focus, Pressed).\n  const { hoverProps, isHovered } = useHover({ isDisabled: !selector });\n  const [pressed, setPressed] = useState(false);\n  const release = () => setPressed(false);\n  const parsed = draft === null ? value : Number(draft);\n  const invalid =\n    draft !== null && (draft === '' || Number.isNaN(parsed) || parsed < min || parsed > max);\n  const input = (\n    <input\n      {...mergeProps(focusProps, hoverProps, {\n        onFocus: (event: { currentTarget: HTMLInputElement }) => {\n          event.currentTarget.select();\n          onFocus();\n        },\n      })}\n      ref={inputRef}\n      onPointerDown={() => selector && setPressed(true)}\n      onPointerUp={release}\n      onPointerLeave={release}\n      onPointerCancel={release}\n      inputMode=\"numeric\"\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      maxLength={2}\n      value={draft ?? format(value)}\n      data-slot={selector ? 'time-selector' : undefined}\n      data-selected={(selector && selected) || undefined}\n      data-focus-visible={(selector && isFocusVisible) || undefined}\n      data-hovered={(selector && isHovered) || undefined}\n      data-pressed={(selector && pressed) || undefined}\n      onChange={(event) => {\n        const text = event.target.value.replace(/\\D/g, '');\n        setDraft(text);\n        const next = Number(text);\n        if (text === '' || next < min || next > max) return;\n        onCommit(next);\n        if (text.length === 2 || next * 10 > max) onComplete?.();\n      }}\n      onBlur={() => setDraft(null)}\n      onKeyDown={(event) => {\n        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;\n        event.preventDefault();\n        const step = event.key === 'ArrowUp' ? 1 : -1;\n        const next = value + step > max ? min : value + step < min ? max : value + step;\n        setDraft(null);\n        onCommit(next);\n      }}\n      className={\n        selector\n          ? styles.selector({ class: classNames?.field })\n          : styles.field({ class: classNames?.field })\n      }\n    />\n  );\n  if (selector) return input;\n  return (\n    <label className={styles.fieldColumn()}>\n      {input}\n      <span aria-hidden=\"true\" className={styles.fieldLabel({ class: classNames?.fieldLabel })}>\n        {label}\n      </span>\n    </label>\n  );\n}\n\n/** Angle of a dial position (0 at 12 o'clock, clockwise), in turns. */\nconst turnOf = (x: number, y: number) =>\n  (Math.atan2(x - CENTER, CENTER - y) / (2 * Math.PI) + 1) % 1;\nconst pointOf = (turn: number, radius: number) => ({\n  x: CENTER + radius * Math.sin(turn * 2 * Math.PI),\n  y: CENTER - radius * Math.cos(turn * 2 * Math.PI),\n});\n\ninterface DialNumber {\n  value: number;\n  turn: number;\n  radius: number;\n}\n\n/** The numbers on the face: minutes in fives, hours 12 / 1–11, plus 12–23 inside for 24 hours. */\nfunction dialNumbers(minutes: boolean, hourCycle: 12 | 24): DialNumber[] {\n  const ring = (radius: number, valueAt: (i: number) => number) =>\n    Array.from({ length: 12 }, (_, i) => ({ value: valueAt(i), turn: i / 12, radius }));\n  if (minutes) return ring(OUTER_RADIUS, (i) => i * 5);\n  if (hourCycle === 12) return ring(OUTER_RADIUS, (i) => i || 12);\n  // 24 hours: 00–11 on the outer ring, 12–23 on the inner one (as Compose and Android).\n  return [...ring(OUTER_RADIUS, (i) => i), ...ring(INNER_RADIUS, (i) => i + 12)];\n}\n\n/** The shortest signed way round the dial from one turn to another, in turns (−½ to ½). */\nconst shortestTurn = (from: number, to: number) => ((((to - from) % 1) + 1.5) % 1) - 0.5;\n\n/**\n * How close the hand is to its value when it counts as there: Compose's turn ends at the\n * spring's visibility threshold of 0.01 rad (about 0.6°), and here within 1px of the radius\n * too, while the last fraction of the spring still plays out.\n */\nconst ARRIVED_TURN = 0.01 / (2 * Math.PI);\nconst ARRIVED_RADIUS = 1;\n\n/** Runs and clears the callbacks waiting in `queue`. */\nconst flush = (queue: RefObject<(() => void)[]>) => {\n  const callbacks = queue.current;\n  queue.current = [];\n  for (const callback of callbacks) callback();\n};\n\n/**\n * The hand's track, handle and the clip of the `on-primary` numbers follow the drawn angle,\n * set as attributes from an animation (no React render per frame). It turns to a new value\n * on the default spatial spring along the shortest arc (M3: \"Spatial springs apply to …\n * rotation\"; Compose animates the selector on hour ↔ minute and taps), follows a drag\n * directly, and jumps under reduced motion. Returns `whenSettled`, which runs a callback\n * once the hand rests on its value.\n */\nfunction useDialHand(\n  turn: number,\n  radius: number,\n  follow: RefObject<boolean>,\n  parts: RefObject<{\n    track: SVGLineElement | null;\n    handle: SVGCircleElement | null;\n    clip: SVGCircleElement | null;\n  }>,\n) {\n  const spring = useM3Spring('spatial', 'default');\n  const reducedMotion = useReducedMotion() ?? false;\n  const drawn = useRef({ turn, radius });\n  const animation = useRef<AnimationPlaybackControls | null>(null);\n  // Callbacks waiting for the hand to arrive (`whenSettled`), and whether it has.\n  const settled = useRef<(() => void)[]>([]);\n  const arrived = useRef(true);\n\n  // Before paint, so the hand never flashes at its new value before turning there.\n  useLayoutEffect(() => {\n    const draw = (nextTurn: number, nextRadius: number) => {\n      drawn.current = { turn: nextTurn, radius: nextRadius };\n      const point = pointOf(nextTurn, nextRadius);\n      const { track, handle, clip } = parts.current;\n      track?.setAttribute('x2', String(point.x));\n      track?.setAttribute('y2', String(point.y));\n      for (const circle of [handle, clip]) {\n        circle?.setAttribute('cx', String(point.x));\n        circle?.setAttribute('cy', String(point.y));\n      }\n    };\n    const from = drawn.current;\n    const delta = shortestTurn(from.turn, turn);\n    animation.current?.stop();\n    animation.current = null;\n    if (follow.current || reducedMotion || (delta === 0 && from.radius === radius)) {\n      draw(turn, radius);\n      arrived.current = true;\n      flush(settled);\n      return;\n    }\n    // React has written the new value's attributes; start from where the hand was.\n    draw(from.turn, from.radius);\n    arrived.current = false;\n    // Two frames in a row within the threshold: the hand swinging past its value at speed\n    // (the expressive spring overshoots by about 1.5%) doesn't count as there.\n    let near = false;\n    animation.current = animate(0, 1, {\n      ...spring,\n      onUpdate: (progress) => {\n        draw(from.turn + delta * progress, from.radius + (radius - from.radius) * progress);\n        const close =\n          Math.abs(delta * (1 - progress)) <= ARRIVED_TURN &&\n          Math.abs((radius - from.radius) * (1 - progress)) <= ARRIVED_RADIUS;\n        if (close && near && !arrived.current) {\n          arrived.current = true;\n          flush(settled);\n        }\n        near = close;\n      },\n      // A spring rests within a small distance of its target; end exactly on the value.\n      onComplete: () => {\n        draw(turn, radius);\n        animation.current = null;\n        arrived.current = true;\n        flush(settled);\n      },\n    });\n  }, [turn, radius, follow, parts, reducedMotion, spring]);\n\n  useEffect(\n    () => () => {\n      animation.current?.stop();\n      settled.current = [];\n    },\n    [],\n  );\n\n  /** Runs `callback` once the hand has arrived at its value (at once if it already has). */\n  return (callback: () => void) => {\n    if (animation.current && !arrived.current) settled.current.push(callback);\n    else callback();\n  };\n}\n\n/**\n * Which faces to draw: the current one, and the one it replaced while that fades out\n * (Compose crossfades the hour and minute faces).\n */\nfunction useFaces(minutes: boolean) {\n  const [faces, setFaces] = useState<{ current: boolean; leaving: boolean | null }>({\n    current: minutes,\n    leaving: null,\n  });\n  if (faces.current !== minutes) setFaces({ current: minutes, leaving: faces.current });\n  const clearLeaving = () => setFaces((previous) => ({ ...previous, leaving: null }));\n  return { leaving: faces.leaving, clearLeaving };\n}\n\nfunction Dial({\n  time,\n  setTime,\n  selection,\n  onHourPicked,\n  hourCycle,\n  label,\n  valueLabel,\n  format,\n  plain,\n  styles,\n  className,\n}: {\n  time: Time;\n  setTime: (time: Time) => void;\n  selection: 'hour' | 'minute';\n  onHourPicked: () => void;\n  hourCycle: 12 | 24;\n  label: string;\n  valueLabel: (value: string, total: number, unit: 'hours' | 'minutes') => string;\n  /** A number as shown on the hour face (`minutes` false) or the minute face. */\n  format: (n: number, minutes: boolean) => string;\n  plain: (n: number) => string;\n  styles: ReturnType<typeof timePickerStyles>;\n  className?: string | undefined;\n}) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const numberRefs = useRef<(SVGGElement | null)[]>([]);\n  const hand = useRef<{\n    track: SVGLineElement | null;\n    handle: SVGCircleElement | null;\n    clip: SVGCircleElement | null;\n  }>({ track: null, handle: null, clip: null });\n  const pressing = useRef(false);\n  // True while a press moves across the dial: the hand follows it without a spring.\n  const dragging = useRef(false);\n  const pendingFocus = useRef<number | null>(null);\n  const [focused, setFocused] = useState<number | null>(null);\n  const { isFocusVisible } = useFocusVisible();\n  const clipId = useId();\n  const minutes = selection === 'minute';\n  const { leaving, clearLeaving } = useFaces(minutes);\n  const isPm = time.hour >= 12;\n  const numbers = dialNumbers(minutes, hourCycle);\n\n  const selectedTurn = minutes ? time.minute / 60 : (time.hour % 12) / 12;\n  const selectedRadius =\n    !minutes && hourCycle === 24 && time.hour >= 12 ? INNER_RADIUS : OUTER_RADIUS;\n  const handle = pointOf(selectedTurn, selectedRadius);\n  const whenSettled = useDialHand(selectedTurn, selectedRadius, dragging, hand);\n  // A tapped hour's switch to the minutes, waiting for the hand (cancelled by a new press,\n  // a face change or unmounting).\n  const switchTimer = useRef<number | undefined>(undefined);\n  const cancelSwitch = () => {\n    window.clearTimeout(switchTimer.current);\n    switchTimer.current = undefined;\n  };\n  useEffect(() => cancelSwitch, [minutes]);\n  const selectedValue = minutes ? time.minute : hourCycle === 24 ? time.hour : time.hour % 12 || 12;\n  // The number Tab lands on: the chosen one, or the nearest five for other minutes.\n  const tabStop = numbers.findIndex(({ value }) =>\n    minutes ? value === (Math.round(time.minute / 5) * 5) % 60 : value === selectedValue,\n  );\n\n  // After an hour is chosen with the keyboard, focus follows to the chosen minute.\n  useEffect(() => {\n    if (pendingFocus.current === null) return;\n    numberRefs.current[pendingFocus.current]?.focus();\n    pendingFocus.current = null;\n  });\n\n  // The replaced face is gone once it has faded out (or at once without transitions).\n  useEffect(() => {\n    if (leaving === null) return;\n    const timeout = window.setTimeout(clearLeaving, 1000);\n    return () => window.clearTimeout(timeout);\n  }, [leaving, clearLeaving]);\n\n  const toTime = (value: number) =>\n    minutes\n      ? time.set({ minute: value })\n      : time.set({ hour: hourCycle === 24 ? value : (value % 12) + (isPm ? 12 : 0) });\n\n  // The minute face replaces the hour face's numbers, so focus on one of them would drop to\n  // the page: it moves on to the chosen minute's number, as for the keyboard.\n  const switchToMinutes = () => {\n    if (svgRef.current?.contains(document.activeElement)) {\n      pendingFocus.current = Math.round(time.minute / 5) % 12;\n    }\n    onHourPicked();\n  };\n\n  const activate = (value: number) => {\n    setTime(toTime(value));\n    if (!minutes) {\n      pendingFocus.current = Math.round(time.minute / 5) % 12;\n      onHourPicked();\n    }\n  };\n\n  const pick = (event: PointerEvent<SVGSVGElement>) => {\n    const box = svgRef.current!.getBoundingClientRect();\n    const x = ((event.clientX - box.left) / box.width) * DIAL;\n    const y = ((event.clientY - box.top) / box.height) * DIAL;\n    const step = Math.round(turnOf(x, y) * 12) % 12;\n    // Taps and drags pick minutes in fives (Compose); the keyboard and typing reach any minute.\n    if (minutes) {\n      setTime(time.set({ minute: step * 5 }));\n      return;\n    }\n    const innerRing =\n      hourCycle === 24 && Math.hypot(x - CENTER, y - CENTER) < INNER_RING_MAX_DISTANCE;\n    const hour = hourCycle === 24 ? step + (innerRing ? 12 : 0) : step + (isPm ? 12 : 0);\n    setTime(time.set({ hour }));\n  };\n\n  const onNumberKeyDown = (event: KeyboardEvent<SVGGElement>, index: number) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      activate(numbers[index]!.value);\n      return;\n    }\n    const step = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1 }[event.key];\n    if (step === undefined) return;\n    event.preventDefault();\n    // Clockwise through the values; a 24-hour face runs on from 11 to 12 on the inner ring.\n    const next = (index + step + numbers.length) % numbers.length;\n    setFocused(next);\n    numberRefs.current[next]?.focus();\n  };\n\n  const total = minutes ? 60 : hourCycle;\n  const unit = minutes ? 'minutes' : 'hours';\n  const endPress = () => {\n    pressing.current = false;\n    dragging.current = false;\n  };\n  return (\n    <svg\n      ref={svgRef}\n      viewBox={`0 0 ${DIAL} ${DIAL}`}\n      role=\"group\"\n      aria-label={label}\n      onPointerDown={(event) => {\n        cancelSwitch();\n        pressing.current = true;\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n        pick(event);\n      }}\n      onPointerMove={(event) => {\n        if (!pressing.current) return;\n        dragging.current = true;\n        pick(event);\n      }}\n      onPointerUp={() => {\n        if (pressing.current && !minutes) {\n          if (dragging.current) {\n            // A drag already shows the hour under the finger: switch on release.\n            switchToMinutes();\n          } else {\n            // A tap turns the hand to the hour, shows it for 100ms, then switches\n            // (Compose's `onTap`: `rotateTo(animate = true)`, `delay(100)`).\n            whenSettled(() => {\n              switchTimer.current = window.setTimeout(switchToMinutes, 100);\n            });\n          }\n        }\n        endPress();\n      }}\n      onPointerCancel={endPress}\n      className={cn(styles.dial(), className)}\n    >\n      <defs>\n        <clipPath id={clipId}>\n          <circle\n            ref={(element) => {\n              hand.current.clip = element;\n            }}\n            cx={handle.x}\n            cy={handle.y}\n            r={HANDLE / 2}\n          />\n        </clipPath>\n      </defs>\n      <circle\n        cx={CENTER}\n        cy={CENTER}\n        r={CENTER}\n        data-slot=\"clock-dial\"\n        className={styles.dialFace()}\n      />\n      <line\n        ref={(element) => {\n          hand.current.track = element;\n        }}\n        x1={CENTER}\n        y1={CENTER}\n        x2={handle.x}\n        y2={handle.y}\n        strokeWidth={2}\n        className={styles.dialTrack()}\n      />\n      <circle cx={CENTER} cy={CENTER} r={4} className={styles.dialHandle()} />\n      <circle\n        ref={(element) => {\n          hand.current.handle = element;\n        }}\n        cx={handle.x}\n        cy={handle.y}\n        r={HANDLE / 2}\n        data-slot=\"clock-dial-selector-handle\"\n        className={styles.dialHandle()}\n      />\n      {leaving !== null && (\n        <g\n          key={`leaving-${String(leaving)}`}\n          aria-hidden=\"true\"\n          onTransitionEnd={clearLeaving}\n          className={styles.dialFaceLeaving()}\n        >\n          {dialNumbers(leaving, hourCycle).map(({ value, turn, radius }, index) => {\n            const point = pointOf(turn, radius);\n            return (\n              <text\n                key={index}\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className={styles.dialNumberText()}\n              >\n                {format(value, leaving)}\n              </text>\n            );\n          })}\n        </g>\n      )}\n      <g\n        key={`face-${String(minutes)}`}\n        className={leaving === null ? undefined : styles.dialFaceEntering()}\n      >\n        {numbers.map(({ value, turn, radius }, index) => {\n          const point = pointOf(turn, radius);\n          const selected = value === selectedValue && (minutes ? time.minute % 5 === 0 : true);\n          return (\n            <g\n              key={index}\n              ref={(element) => {\n                numberRefs.current[index] = element;\n              }}\n              role=\"button\"\n              tabIndex={index === (focused ?? tabStop) ? 0 : -1}\n              aria-label={valueLabel(plain(value), total, unit)}\n              aria-pressed={selected}\n              data-selected={selected || undefined}\n              onFocus={() => setFocused(index)}\n              onBlur={() => setFocused(null)}\n              onKeyDown={(event) => onNumberKeyDown(event, index)}\n              onClick={(event) => {\n                // Assistive technology activates with a click that has no pointer behind it.\n                if (event.detail === 0) activate(value);\n              }}\n              className={styles.dialNumber()}\n            >\n              <circle cx={point.x} cy={point.y} r={TARGET / 2} className={styles.dialNumberHit()} />\n              {focused === index && isFocusVisible && (\n                <circle\n                  cx={point.x}\n                  cy={point.y}\n                  r={TARGET / 2 - 1}\n                  strokeWidth={3}\n                  className={styles.dialFocus()}\n                />\n              )}\n              <text\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                aria-hidden=\"true\"\n                data-selected={selected || undefined}\n                className={styles.dialNumberText()}\n              >\n                {format(value, minutes)}\n              </text>\n            </g>\n          );\n        })}\n        {/*\n         * The numbers again in `on-primary`, clipped to the handle, so whatever part of a\n         * number the handle covers reads on it (M3: the selected label is `on-primary`;\n         * Compose blends the two layers the same way).\n         */}\n        <g aria-hidden=\"true\" clipPath={`url(#${clipId})`} className=\"pointer-events-none\">\n          {numbers.map(({ value, turn, radius }, index) => {\n            const point = pointOf(turn, radius);\n            return (\n              <text\n                key={index}\n                x={point.x}\n                y={point.y}\n                textAnchor=\"middle\"\n                dominantBaseline=\"central\"\n                className={styles.dialNumberOnHandle()}\n              >\n                {format(value, minutes)}\n              </text>\n            );\n          })}\n        </g>\n      </g>\n    </svg>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import { Time } from "@internationalized/date";
+//#region src/components/time-picker/time-list.ts
+/** The shortest step a list of times takes, in minutes: a shorter one would list hundreds. */
+const MIN_TIME_STEP = 5;
+const DAY = 1440;
+/** A time's minutes past midnight, which also keys it in a list. */
+const minutesOf = (time) => time.hour * 60 + time.minute;
+/**
+* The times a docked list offers: every `step` minutes of the day, counted from midnight,
+* within `min` and `max`. A `value` between two steps is listed too, in its place, and a
+* range that holds no step lists its earliest time, so the list is never empty.
+*/
+function listTimes(step, min, max, value) {
+	const every = Math.max(MIN_TIME_STEP, Math.round(step) || MIN_TIME_STEP);
+	const allowed = (time) => (min === void 0 || time.compare(min) >= 0) && (max === void 0 || time.compare(max) <= 0);
+	const marks = /* @__PURE__ */ new Set();
+	for (let at = 0; at < DAY; at += every) marks.add(at);
+	if (value) marks.add(minutesOf(value));
+	const times = [...marks].sort((a, b) => a - b).map((at) => new Time(Math.floor(at / 60), at % 60)).filter(allowed);
+	if (times.length > 0) return times;
+	const first = min ? new Time(min.hour, min.minute) : new Time(0, 0);
+	return [min && first.compare(min) < 0 ? first.add({ minutes: 1 }) : first];
+}
+/** The listed time nearest `minutes` past midnight; the earlier one on a tie. */
+function nearestTime(times, minutes) {
+	let nearest;
+	for (const time of times) if (nearest === void 0 || Math.abs(minutesOf(time) - minutes) < Math.abs(minutesOf(nearest) - minutes)) nearest = time;
+	return nearest;
+}
+//#endregion
+export { listTimes, minutesOf, nearestTime };
+
+//# sourceMappingURL=time-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-list.js","names":[],"sources":["../../../src/components/time-picker/time-list.ts"],"sourcesContent":["import { Time } from '@internationalized/date';\n\n/** The shortest step a list of times takes, in minutes: a shorter one would list hundreds. */\nconst MIN_TIME_STEP = 5;\n\nconst DAY = 24 * 60;\n\n/** A time's minutes past midnight, which also keys it in a list. */\nexport const minutesOf = (time: Time) => time.hour * 60 + time.minute;\n\n/**\n * The times a docked list offers: every `step` minutes of the day, counted from midnight,\n * within `min` and `max`. A `value` between two steps is listed too, in its place, and a\n * range that holds no step lists its earliest time, so the list is never empty.\n */\nexport function listTimes(\n  step: number,\n  min: Time | undefined,\n  max: Time | undefined,\n  value: Time | null,\n): Time[] {\n  const every = Math.max(MIN_TIME_STEP, Math.round(step) || MIN_TIME_STEP);\n  const allowed = (time: Time) =>\n    (min === undefined || time.compare(min) >= 0) && (max === undefined || time.compare(max) <= 0);\n  const marks = new Set<number>();\n  for (let at = 0; at < DAY; at += every) marks.add(at);\n  if (value) marks.add(minutesOf(value));\n  const times = [...marks]\n    .sort((a, b) => a - b)\n    .map((at) => new Time(Math.floor(at / 60), at % 60))\n    .filter(allowed);\n  if (times.length > 0) return times;\n  // The earliest whole minute the range allows.\n  const first = min ? new Time(min.hour, min.minute) : new Time(0, 0);\n  return [min && first.compare(min) < 0 ? first.add({ minutes: 1 }) : first];\n}\n\n/** The listed time nearest `minutes` past midnight; the earlier one on a tie. */\nexport function nearestTime(times: readonly Time[], minutes: number): Time | undefined {\n  let nearest: Time | undefined;\n  for (const time of times) {\n    if (\n      nearest === undefined ||\n      Math.abs(minutesOf(time) - minutes) < Math.abs(minutesOf(nearest) - minutes)\n    ) {\n      nearest = time;\n    }\n  }\n  return nearest;\n}\n"],"mappings":";;;AAGA,MAAM,gBAAgB;AAEtB,MAAM,MAAM;;AAGZ,MAAa,aAAa,SAAe,KAAK,OAAO,KAAK,KAAK;;;;;;AAO/D,SAAgB,UACd,MACA,KACA,KACA,OACQ;CACR,MAAM,QAAQ,KAAK,IAAI,eAAe,KAAK,MAAM,IAAI,KAAK,aAAa;CACvE,MAAM,WAAW,UACd,QAAQ,KAAA,KAAa,KAAK,QAAQ,GAAG,KAAK,OAAO,QAAQ,KAAA,KAAa,KAAK,QAAQ,GAAG,KAAK;CAC9F,MAAM,wBAAQ,IAAI,IAAY;CAC9B,KAAK,IAAI,KAAK,GAAG,KAAK,KAAK,MAAM,OAAO,MAAM,IAAI,EAAE;CACpD,IAAI,OAAO,MAAM,IAAI,UAAU,KAAK,CAAC;CACrC,MAAM,QAAQ,CAAC,GAAG,KAAK,CAAC,CACrB,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC,CACrB,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CACnD,OAAO,OAAO;CACjB,IAAI,MAAM,SAAS,GAAG,OAAO;CAE7B,MAAM,QAAQ,MAAM,IAAI,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI,IAAI,KAAK,GAAG,CAAC;CAClE,OAAO,CAAC,OAAO,MAAM,QAAQ,GAAG,IAAI,IAAI,MAAM,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,KAAK;AAC3E;;AAGA,SAAgB,YAAY,OAAwB,SAAmC;CACrF,IAAI;CACJ,KAAK,MAAM,QAAQ,OACjB,IACE,YAAY,KAAA,KACZ,KAAK,IAAI,UAAU,IAAI,IAAI,OAAO,IAAI,KAAK,IAAI,UAAU,OAAO,IAAI,OAAO,GAE3E,UAAU;CAGd,OAAO;AACT"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
+import { RootDOMProps } from "../../utils/root-props.js";
 import { TooltipPlacement, TooltipPlacementContext } from "./tooltip-placement.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
-import { RootDOMProps } from "../../utils/root-props.js";
 import { CSSProperties, ReactNode, Ref } from "react";
 //#region src/components/tooltip/Tooltip.d.ts
 export interface TooltipClassNames {

package/dist/index.d.ts

@@ -7,10 +7,48 @@ import { ThemeProvider, ThemeProviderProps } from "./theme/ThemeProvider.js";
 import { ThemeScope, ThemeScopeProps } from "./theme/ThemeScope.js";
 import { ThemeScript, ThemeScriptProps, getThemeScriptSource } from "./theme/ThemeScript.js";
 import { ThemeContextValue, useTheme, useThemeScope } from "./theme/context.js";
+import { VariantProps, tv } from "./utils/tv.js";
+import { TextFieldStyleProps, TextFieldVariant, textFieldStyles } from "./components/text-field/text-field-styles.js";
+import { AutocompleteItem, AutocompleteSection, OptionItemProps, OptionPopover, OptionSectionProps, SelectItem, SelectSection } from "./components/select/option-list.js";
+import { Autocomplete, AutocompleteClassNames, AutocompleteKey, AutocompleteLabels, AutocompleteProps } from "./components/autocomplete/Autocomplete.js";
+import { Badge, BadgeClassNames, BadgeLabels, BadgeProps, BadgedBox, BadgedBoxClassNames, BadgedBoxProps } from "./components/badge/Badge.js";
+import { ButtonShape, ButtonSize, ButtonStyleProps, ButtonVariant, buttonStyles, buttonVariantClasses } from "./components/button/button-styles.js";
+import { ButtonLabels } from "./components/button/button-pending.js";
+import { Carousel, CarouselClassNames, CarouselLabels, CarouselProps } from "./components/carousel/Carousel.js";
+import { ToggleGroupStateContext } from "./primitives/ButtonBase.js";
+import { ChipOutline, ChipSetLayout, ChipStyleProps, chipSetStyles, chipStyles } from "./components/chip/chip-styles.js";
+import { AssistChip, AssistChipProps, ChipClassNames, ChipLabels, FilterChip, FilterChipClassNames, FilterChipProps, InputChip, InputChipClassNames, InputChipProps, SuggestionChip, SuggestionChipProps } from "./components/chip/Chip.js";
+import { TextField, TextFieldClassNames, TextFieldLabels, TextFieldProps } from "./components/text-field/TextField.js";
+import { DateInputLabels } from "./components/date-picker/DateInput.js";
+import { DateField, DateFieldClassNames, DateFieldLabels, DateFieldProps } from "./components/date-picker/DateField.js";
+import { DatePicker, DatePickerClassNames, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerClassNames, DateRangePickerProps } from "./components/date-picker/DatePicker.js";
+import { ClosedBy } from "./utils/closed-by.js";
+import { Dialog, DialogActions, DialogActionsProps, DialogClassNames, DialogContent, DialogContentProps, DialogFullScreen, DialogHeader, DialogHeaderClassNames, DialogHeaderLabels, DialogHeaderProps, DialogOrigin, DialogPlacement, DialogProps, DialogRenderProps, DialogTitle, DialogTitleProps, DialogTransition, DialogTrigger, DialogTriggerProps } from "./components/dialog/Dialog.js";
+import { PickerDialog, PickerDialogClassNames, PickerDialogLabels, PickerDialogProps } from "./components/date-picker/PickerDialog.js";
+import { MenuLayout, MenuStyleProps, MenuVariant, menuStyles } from "./components/menu/menu-styles.js";
+import { ContextMenuTrigger, ContextMenuTriggerProps, MenuTrigger, MenuTriggerProps } from "./components/menu/menu-trigger.js";
+import { Menu, MenuClassNames, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuKey as Key, MenuLabels, MenuPlacement, MenuPresentation, MenuProps, SubmenuTrigger, SubmenuTriggerProps } from "./components/menu/Menu.js";
+import { PullToRefresh, PullToRefreshClassNames, PullToRefreshLabels, PullToRefreshProps } from "./components/pull-to-refresh/PullToRefresh.js";
+import { SearchBar, SearchBarClassNames, SearchBarIconState, SearchBarInputProps, SearchBarProps, SearchBarView } from "./components/search/SearchBar.js";
+import { SearchField, SearchFieldClassNames, SearchFieldInputProps, SearchFieldLabels, SearchFieldProps } from "./components/search/SearchField.js";
+import { Select, SelectClassNames, SelectKey, SelectLabels, SelectPresentation, SelectProps, SelectedOption } from "./components/select/Select.js";
+import { BottomSheet, BottomSheetClassNames, BottomSheetDetent, BottomSheetLabels, BottomSheetProps } from "./components/sheet/BottomSheet.js";
+import { SideSheet, SideSheetClassNames, SideSheetLabels, SideSheetProps } from "./components/sheet/SideSheet.js";
+import { SliderOrientation, SliderSize, SliderStyleProps, sliderStyles } from "./components/slider/slider-styles.js";
+import { RangeSlider, RangeSliderLabels, RangeSliderProps, Slider, SliderClassNames, SliderProps } from "./components/slider/Slider.js";
+import { ShowSnackbarOptions, SnackbarData, SnackbarDuration, SnackbarHostState, SnackbarResult, SnackbarVisuals } from "./components/snackbar/snackbar-state.js";
+import { Snackbar, SnackbarClassNames, SnackbarHost, SnackbarHostProps, SnackbarLabels, SnackbarProps, useSnackbarHostState } from "./components/snackbar/Snackbar.js";
+import { SplitButtonSize, SplitButtonStyleProps, SplitButtonVariant, splitButtonStyles } from "./components/split-button/split-button-styles.js";
+import { SplitButton, SplitButtonClassNames, SplitButtonLabels, SplitButtonProps } from "./components/split-button/SplitButton.js";
+import { TimePicker, TimePickerClassNames, TimePickerLabels, TimePickerMode, TimePickerModeToggle, TimePickerModeToggleProps, TimePickerProps, useTimePickerRoom } from "./components/time-picker/TimePicker.js";
+import { TimeField, TimeFieldClassNames, TimeFieldLabels, TimeFieldProps } from "./components/time-picker/TimeField.js";
+import { buttonGroupStyles } from "./components/button-group/button-group-styles.js";
+import { ButtonGroup, ButtonGroupClassNames, ButtonGroupLabels, ButtonGroupProps, ButtonGroupSelectionMode, ButtonGroupVariant } from "./components/button-group/ButtonGroup.js";
+import { WindmorphLabels } from "./windmorph-labels.js";
+import { LabelsProvider, LabelsProviderProps } from "./components/labels/LabelsProvider.js";
 import { getM3Spring } from "./motion/get-m3-spring.js";
 import { useM3Spring } from "./motion/use-m3-spring.js";
 import { cn, twMergeConfig } from "./utils/cn.js";
-import { VariantProps, tv } from "./utils/tv.js";
 import { BREAKPOINTS, BREAKPOINT_NAMES, BreakpointName } from "./tokens/breakpoints.js";
 import { ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ElevationLevel, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY } from "./tokens/elevation.js";
 import { CORNERS, CORNER_NAMES, CornerName } from "./tokens/shape.js";
@@ -18,9 +56,6 @@ import { FOCUS_INDICATOR, STATE_OPACITIES, StateName } from "./tokens/state.js";
 import { TYPEFACES, TYPE_ROLES, TYPE_SCALE, TypeRole, TypeStyle, Typeface } from "./tokens/typography.js";
 import { ZIndexName, Z_INDEX } from "./tokens/z-index.js";
 import { ComponentToken, ComponentTokenScope, ComponentTokenSet, PublicComponentToken, TokenPaints, TokenValue, color, colorAt, componentTokenList, componentTokensCss, corner, defineComponentTokens, elevation, isComponentTokenSet, px, spring, typeTokens, typescale } from "./tokens/component.js";
-import { ToggleGroupStateContext } from "./primitives/ButtonBase.js";
-import { ButtonShape, ButtonSize, ButtonStyleProps, ButtonVariant, buttonStyles, buttonVariantClasses } from "./components/button/button-styles.js";
-import { ButtonLabels } from "./components/button/button-pending.js";
 import { Button, ButtonActionProps, ButtonClassNames, ButtonLinkProps, ButtonProps, ButtonToggleProps } from "./components/button/Button.js";
 import { IconButtonStyleProps, IconButtonVariant, IconButtonWidth, iconButtonStyles } from "./components/icon-button/icon-button-styles.js";
 import { ButtonContext, ButtonContextValue } from "./components/button/ButtonContext.js";
@@ -28,8 +63,6 @@ import { buttonTokenSet } from "./components/button/button-tokens.js";
 import { IconTransition } from "./primitives/icon-faces-styles.js";
 import { IconButton, IconButtonActionProps, IconButtonClassNames, IconButtonLinkProps, IconButtonProps, IconButtonToggleProps } from "./components/icon-button/IconButton.js";
 import { iconButtonTokenSet } from "./components/icon-button/icon-button-tokens.js";
-import { buttonGroupStyles } from "./composites/button-group/button-group-styles.js";
-import { ButtonGroup, ButtonGroupClassNames, ButtonGroupLabels, ButtonGroupProps, ButtonGroupSelectionMode, ButtonGroupVariant } from "./composites/button-group/ButtonGroup.js";
 import { ExtendedFabSize, ExtendedFabStyleProps, FabColor, FabElevation, FabSize, FabStyleProps, extendedFabStyles, fabStyles } from "./components/fab/fab-styles.js";
 import { ExtendedFab, ExtendedFabClassNames, ExtendedFabProps, Fab, FabClassNames, FabProps } from "./components/fab/Fab.js";
 import { extendedFabTokenSet, fabTokenSet } from "./components/fab/fab-tokens.js";
@@ -41,11 +74,8 @@ import { TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/toolti
 import { RichTooltip, RichTooltipClassNames, RichTooltipProps, RichTooltipTrigger, RichTooltipTriggerProps, Tooltip, TooltipClassNames, TooltipProps } from "./components/tooltip/Tooltip.js";
 import { RichTooltipStyleProps, richTooltipStyles, tooltipStyles } from "./components/tooltip/tooltip-styles.js";
 import { plainTooltipTokenSet, richTooltipTokenSet } from "./components/tooltip/tooltip-tokens.js";
-import { ShowSnackbarOptions, SnackbarData, SnackbarDuration, SnackbarHostState, SnackbarResult, SnackbarVisuals } from "./components/snackbar/snackbar-state.js";
-import { Snackbar, SnackbarClassNames, SnackbarHost, SnackbarHostProps, SnackbarLabels, SnackbarProps, useSnackbarHostState } from "./components/snackbar/Snackbar.js";
 import { SnackbarStyleProps, snackbarHostStyles, snackbarStyles } from "./components/snackbar/snackbar-styles.js";
 import { snackbarTokenSet } from "./components/snackbar/snackbar-tokens.js";
-import { Badge, BadgeClassNames, BadgeLabels, BadgeProps, BadgedBox, BadgedBoxClassNames, BadgedBoxProps } from "./components/badge/Badge.js";
 import { NavItemLayout, navItemStyles } from "./components/navigation/nav-item-styles.js";
 import { NavItemClassNames } from "./components/navigation/NavItem.js";
 import { NavigationRail, NavigationRailClassNames, NavigationRailItem, NavigationRailItemProps, NavigationRailProps, NavigationRailState, useNavigationRail } from "./components/navigation/NavigationRail.js";
@@ -55,15 +85,8 @@ import { navBarTokenSet, navRailTokenSet } from "./components/navigation/navigat
 import { TabsStyleProps, TabsVariant, tabsStyles } from "./components/tabs/tabs-styles.js";
 import { Tab, TabProps, Tabs, TabsClassNames, TabsProps } from "./components/tabs/Tabs.js";
 import { tabsTokenSet } from "./components/tabs/tabs-tokens.js";
-import { ChipOutline, ChipSetLayout, ChipStyleProps, chipSetStyles, chipStyles } from "./components/chip/chip-styles.js";
-import { AssistChip, AssistChipProps, ChipClassNames, ChipLabels, FilterChip, FilterChipClassNames, FilterChipProps, InputChip, InputChipClassNames, InputChipProps, SuggestionChip, SuggestionChipProps } from "./components/chip/Chip.js";
 import { ChipSet, ChipSetClassNames, ChipSetProps } from "./components/chip/ChipSet.js";
 import { assistChipTokenSet, filterChipTokenSet, inputChipTokenSet, suggestionChipTokenSet } from "./components/chip/chip-tokens.js";
-import { MenuLayout, MenuStyleProps, MenuVariant, menuStyles } from "./components/menu/menu-styles.js";
-import { ContextMenuTrigger, ContextMenuTriggerProps, MenuTrigger, MenuTriggerProps } from "./components/menu/menu-trigger.js";
-import { Menu, MenuClassNames, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuKey as Key, MenuLabels, MenuPlacement, MenuPresentation, MenuProps, SubmenuTrigger, SubmenuTriggerProps } from "./components/menu/Menu.js";
-import { SplitButtonSize, SplitButtonStyleProps, SplitButtonVariant, splitButtonStyles } from "./components/split-button/split-button-styles.js";
-import { SplitButton, SplitButtonClassNames, SplitButtonLabels, SplitButtonProps } from "./components/split-button/SplitButton.js";
 import { splitButtonTokenSet } from "./components/split-button/split-button-tokens.js";
 import { FabMenuColor, FabMenuSize, FabMenuStyleProps, fabMenuStyles } from "./components/fab-menu/fab-menu-styles.js";
 import { FabMenu, FabMenuClassNames, FabMenuItem, FabMenuItemClassNames, FabMenuItemProps, FabMenuPresentation, FabMenuProps } from "./components/fab-menu/FabMenu.js";
@@ -71,16 +94,10 @@ import { fabMenuTokenSet } from "./components/fab-menu/fab-menu-tokens.js";
 import { LoadingIndicatorStyleProps, LoadingIndicatorVariant, loadingIndicatorStyles } from "./components/loading-indicator/loading-indicator-styles.js";
 import { LoadingIndicator, LoadingIndicatorClassNames, LoadingIndicatorProps } from "./components/loading-indicator/LoadingIndicator.js";
 import { loadingIndicatorTokenSet } from "./components/loading-indicator/loading-indicator-tokens.js";
-import { PullToRefresh, PullToRefreshClassNames, PullToRefreshLabels, PullToRefreshProps } from "./components/pull-to-refresh/PullToRefresh.js";
 import { pullToRefreshStyles } from "./components/pull-to-refresh/pull-to-refresh-styles.js";
 import { CardStyleProps, CardVariant, cardStyles } from "./components/card/card-styles.js";
 import { Card, CardActionProps, CardLinkProps, CardProps, CardStaticProps } from "./components/card/Card.js";
 import { cardTokenSet } from "./components/card/card-tokens.js";
-import { TextFieldStyleProps, TextFieldVariant, textFieldStyles } from "./components/text-field/text-field-styles.js";
-import { TextField, TextFieldClassNames, TextFieldLabels, TextFieldProps } from "./components/text-field/TextField.js";
-import { AutocompleteItem, AutocompleteSection, OptionItemProps, OptionPopover, OptionSectionProps, SelectItem, SelectSection } from "./components/select/option-list.js";
-import { Select, SelectClassNames, SelectKey, SelectLabels, SelectPresentation, SelectProps, SelectedOption } from "./components/select/Select.js";
-import { Autocomplete, AutocompleteClassNames, AutocompleteKey, AutocompleteLabels, AutocompleteProps } from "./components/autocomplete/Autocomplete.js";
 import { matchesSearch, normalizeSearch } from "./utils/search.js";
 import { textFieldTokenSet } from "./components/text-field/text-field-tokens.js";
 import { Checkbox, CheckboxClassNames, CheckboxProps } from "./components/checkbox/Checkbox.js";
@@ -92,8 +109,6 @@ import { radioTokenSet } from "./components/radio/radio-tokens.js";
 import { Switch, SwitchClassNames, SwitchProps } from "./components/switch/Switch.js";
 import { SwitchStyleProps, switchStyles } from "./components/switch/switch-styles.js";
 import { switchTokenSet } from "./components/switch/switch-tokens.js";
-import { ClosedBy } from "./utils/closed-by.js";
-import { Dialog, DialogActions, DialogActionsProps, DialogClassNames, DialogContent, DialogContentProps, DialogFullScreen, DialogHeader, DialogHeaderClassNames, DialogHeaderLabels, DialogHeaderProps, DialogOrigin, DialogPlacement, DialogProps, DialogRenderProps, DialogTitle, DialogTitleProps, DialogTransition, DialogTrigger, DialogTriggerProps } from "./components/dialog/Dialog.js";
 import { DialogStyleProps, dialogStyles } from "./components/dialog/dialog-styles.js";
 import { dialogTokenSet } from "./components/dialog/dialog-tokens.js";
 import { menuTokenSet } from "./components/menu/menu-tokens.js";
@@ -105,9 +120,7 @@ import { TopAppBarStyleProps, TopAppBarTitleAlign, TopAppBarVariant, topAppBarSt
 import { TopAppBarScrollBehavior } from "./components/app-bar/use-app-bar-scroll.js";
 import { TopAppBar, TopAppBarClassNames, TopAppBarProps, TopAppBarScrolledColor } from "./components/app-bar/TopAppBar.js";
 import { appBarTokenSet } from "./components/app-bar/app-bar-tokens.js";
-import { SearchBar, SearchBarClassNames, SearchBarIconState, SearchBarInputProps, SearchBarProps, SearchBarView } from "./components/search/SearchBar.js";
 import { SearchAppBar, SearchAppBarClassNames, SearchAppBarProps } from "./components/search/SearchAppBar.js";
-import { SearchField, SearchFieldClassNames, SearchFieldInputProps, SearchFieldLabels, SearchFieldProps } from "./components/search/SearchField.js";
 import { SearchAppBarStyleProps, SearchBarStyleProps, SearchFieldStyleProps, searchAppBarStyles, searchBarStyles, searchFieldStyles } from "./components/search/search-styles.js";
 import { searchBarTokenSet, searchViewTokenSet } from "./components/search/search-tokens.js";
 import { DividerInset, DividerOrientation, DividerStyleProps, dividerStyles, labeledDividerStyles } from "./components/divider/divider-styles.js";
@@ -119,27 +132,16 @@ import { ListDividers, ListStyleProps, ListVariant, listMediaStyles, listStyles
 import { LineLimit, List, ListClassNames, ListItem, ListItemProps, ListProps, ListSection, ListSectionProps } from "./components/list/List.js";
 import { ListItemAvatar, ListItemAvatarProps, ListItemImage, ListItemImageProps, ListItemVideo, ListItemVideoProps } from "./components/list/ListMedia.js";
 import { listTokenSet } from "./components/list/list-tokens.js";
-import { SliderOrientation, SliderSize, SliderStyleProps, sliderStyles } from "./components/slider/slider-styles.js";
-import { RangeSlider, RangeSliderLabels, RangeSliderProps, Slider, SliderClassNames, SliderProps } from "./components/slider/Slider.js";
 import { sliderTokenSet } from "./components/slider/slider-tokens.js";
 import { SheetTrigger, SheetTriggerProps } from "./components/sheet/SheetTrigger.js";
-import { BottomSheet, BottomSheetClassNames, BottomSheetDetent, BottomSheetLabels, BottomSheetProps } from "./components/sheet/BottomSheet.js";
-import { SideSheet, SideSheetClassNames, SideSheetLabels, SideSheetProps } from "./components/sheet/SideSheet.js";
 import { BottomSheetStyleProps, SideSheetStyleProps, bottomSheetStyles, sideSheetStyles } from "./components/sheet/sheet-styles.js";
 import { bottomSheetTokenSet, sideSheetTokenSet } from "./components/sheet/sheet-tokens.js";
-import { Carousel, CarouselClassNames, CarouselProps } from "./components/carousel/Carousel.js";
 import { CarouselStyleProps, carouselStyles } from "./components/carousel/carousel-styles.js";
 import { carouselTokenSet } from "./components/carousel/carousel-tokens.js";
-import { DateInputLabels } from "./components/date-picker/DateInput.js";
-import { DatePicker, DatePickerClassNames, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerClassNames, DateRangePickerProps } from "./components/date-picker/DatePicker.js";
 import { DatePickerStyleProps, datePickerStyles, dockedDatePickerStyles } from "./components/date-picker/date-picker-styles.js";
 import { datePickerTokenSet } from "./components/date-picker/date-picker-tokens.js";
-import { DateField, DateFieldClassNames, DateFieldLabels, DateFieldProps } from "./components/date-picker/DateField.js";
-import { PickerDialog, PickerDialogClassNames, PickerDialogLabels, PickerDialogProps } from "./components/date-picker/PickerDialog.js";
 import { pickerDialogStyles } from "./components/date-picker/picker-dialog-styles.js";
-import { TimePicker, TimePickerClassNames, TimePickerLabels, TimePickerMode, TimePickerModeToggle, TimePickerModeToggleProps, TimePickerProps, useTimePickerRoom } from "./components/time-picker/TimePicker.js";
-import { TimeField, TimeFieldClassNames, TimeFieldLabels, TimeFieldProps } from "./components/time-picker/TimeField.js";
 import { TimePickerStyleProps, timePickerStyles } from "./components/time-picker/time-picker-styles.js";
 import { timePickerTokenSet } from "./components/time-picker/time-picker-tokens.js";
 import { Time, parseTime } from "@internationalized/date";
-export { AssistChip, type AssistChipProps, Autocomplete, type AutocompleteClassNames, AutocompleteItem, type AutocompleteKey, type AutocompleteLabels, type AutocompleteProps, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, type BadgeClassNames, type BadgeLabels, type BadgeProps, type BadgeStyleProps, BadgedBox, type BadgedBoxClassNames, type BadgedBoxProps, BottomSheet, type BottomSheetClassNames, type BottomSheetDetent, type BottomSheetLabels, type BottomSheetProps, type BottomSheetStyleProps, BreakpointName, BuiltInThemeName, Button, type ButtonActionProps, type ButtonClassNames, ButtonContext, type ButtonContextValue, ButtonGroup, type ButtonGroupClassNames, type ButtonGroupLabels, type ButtonGroupProps, type ButtonGroupSelectionMode, type ButtonGroupVariant, type ButtonLabels, type ButtonLinkProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonStyleProps, type ButtonToggleProps, type ButtonVariant, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, type CardActionProps, type CardLinkProps, type CardProps, type CardStaticProps, type CardStyleProps, type CardVariant, Carousel, type CarouselClassNames, type CarouselProps, type CarouselStyleProps, Checkbox, type CheckboxClassNames, type CheckboxProps, type CheckboxStyleProps, type ChipClassNames, type ChipLabels, type ChipOutline, ChipSet, type ChipSetClassNames, type ChipSetLayout, type ChipSetProps, type ChipStyleProps, CircularProgressIndicator, type CircularProgressIndicatorClassNames, type CircularProgressIndicatorProps, type CircularProgressStyleProps, type ClosedBy, ColorMode, ColorRole, type ComponentToken, type ComponentTokenScope, type ComponentTokenSet, ContextMenuTrigger, type ContextMenuTriggerProps, ContrastLevel, CornerName, type CreateThemeOptions, CustomColorName, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, type DateFieldClassNames, type DateFieldLabels, type DateFieldProps, type DateInputLabels, DatePicker, type DatePickerClassNames, type DatePickerLabels, type DatePickerProps, type DatePickerStyleProps, type DateRange, DateRangePicker, type DateRangePickerClassNames, type DateRangePickerProps, Density, Dialog, DialogActions, type DialogActionsProps, type DialogClassNames, DialogContent, type DialogContentProps, type DialogFullScreen, DialogHeader, type DialogHeaderClassNames, type DialogHeaderLabels, type DialogHeaderProps, type DialogOrigin, type DialogPlacement, type DialogProps, type DialogRenderProps, type DialogStyleProps, DialogTitle, type DialogTitleProps, type DialogTransition, DialogTrigger, type DialogTriggerProps, Divider, type DividerInset, type DividerOrientation, type DividerProps, type DividerStyleProps, DockedToolbar, type DockedToolbarArrangement, type DockedToolbarClassNames, type DockedToolbarColor, type DockedToolbarProps, type DockedToolbarStyleProps, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ElevationLevel, ExtendedFab, type ExtendedFabClassNames, type ExtendedFabProps, type ExtendedFabSize, type ExtendedFabStyleProps, FOCUS_INDICATOR, Fab, type FabClassNames, type FabColor, type FabElevation, FabMenu, type FabMenuClassNames, type FabMenuColor, FabMenuItem, type FabMenuItemClassNames, type FabMenuItemProps, type FabMenuPresentation, type FabMenuProps, type FabMenuSize, type FabMenuStyleProps, type FabProps, type FabSize, type FabStyleProps, FilterChip, type FilterChipClassNames, type FilterChipProps, FloatingToolbar, type FloatingToolbarClassNames, type FloatingToolbarColor, type FloatingToolbarProps, type FloatingToolbarStyleProps, IconButton, type IconButtonActionProps, type IconButtonClassNames, type IconButtonLinkProps, type IconButtonProps, type IconButtonStyleProps, type IconButtonToggleProps, type IconButtonVariant, type IconButtonWidth, type IconTransition, InputChip, type InputChipClassNames, type InputChipProps, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, type LabeledDividerClassNames, type LabeledDividerProps, type LineLimit, LinearProgressIndicator, type LinearProgressIndicatorClassNames, type LinearProgressIndicatorProps, type LinearProgressStyleProps, List, type ListClassNames, type ListDividers, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemImage, type ListItemImageProps, type ListItemProps, ListItemVideo, type ListItemVideoProps, type ListProps, ListSection, type ListSectionProps, type ListStyleProps, type ListVariant, LoadingIndicator, type LoadingIndicatorClassNames, type LoadingIndicatorProps, type LoadingIndicatorStyleProps, type LoadingIndicatorVariant, MOTION_SCHEMES, Menu, type MenuClassNames, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type Key as MenuKey, type MenuLabels, type MenuLayout, type MenuPlacement, type MenuPresentation, type MenuProps, type MenuStyleProps, MenuTrigger, type MenuTriggerProps, type MenuVariant, MotionScheme, MotionSpring, type NavItemClassNames, type NavItemLayout, NavigationBar, type NavigationBarArrangement, type NavigationBarClassNames, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarStyleProps, NavigationRail, type NavigationRailClassNames, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps, type NavigationRailState, type OptionItemProps, OptionPopover, type OptionSectionProps, PALETTE_NAMES, PaletteName, PaletteSource, PickerDialog, type PickerDialogClassNames, type PickerDialogLabels, type PickerDialogProps, type PublicComponentToken, PullToRefresh, type PullToRefreshClassNames, type PullToRefreshLabels, type PullToRefreshProps, Radio, type RadioClassNames, RadioGroup, type RadioGroupClassNames, type RadioGroupProps, type RadioGroupStyleProps, type RadioProps, type RadioStyleProps, RangeSlider, type RangeSliderLabels, type RangeSliderProps, ResolvedColorMode, RichTooltip, type RichTooltipClassNames, type RichTooltipProps, type RichTooltipStyleProps, RichTooltipTrigger, type RichTooltipTriggerProps, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SchemeVariant, SearchAppBar, type SearchAppBarClassNames, type SearchAppBarProps, type SearchAppBarStyleProps, SearchBar, type SearchBarClassNames, type SearchBarIconState, type SearchBarInputProps, type SearchBarProps, type SearchBarStyleProps, type SearchBarView, SearchField, type SearchFieldClassNames, type SearchFieldInputProps, type SearchFieldLabels, type SearchFieldProps, type SearchFieldStyleProps, Select, type SelectClassNames, SelectItem, type SelectKey, type SelectLabels, type SelectPresentation, type SelectProps, SelectSection, type SelectedOption, SheetTrigger, type SheetTriggerProps, type ShowSnackbarOptions, SideSheet, type SideSheetClassNames, type SideSheetLabels, type SideSheetProps, type SideSheetStyleProps, Slider, type SliderClassNames, type SliderOrientation, type SliderProps, type SliderSize, type SliderStyleProps, Snackbar, type SnackbarClassNames, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, SnackbarHostState, type SnackbarLabels, type SnackbarProps, type SnackbarResult, type SnackbarStyleProps, type SnackbarVisuals, SplitButton, type SplitButtonClassNames, type SplitButtonLabels, type SplitButtonProps, type SplitButtonSize, type SplitButtonStyleProps, type SplitButtonVariant, SpringFamily, SpringSpeed, SpringToken, StateName, SubmenuTrigger, type SubmenuTriggerProps, SuggestionChip, type SuggestionChipProps, Switch, type SwitchClassNames, type SwitchProps, type SwitchStyleProps, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, type TabProps, Tabs, type TabsClassNames, type TabsProps, type TabsStyleProps, type TabsVariant, TextField, type TextFieldClassNames, type TextFieldLabels, type TextFieldProps, type TextFieldStyleProps, type TextFieldVariant, type ThemeContextValue, type ThemeDefinition, ThemePalettes, ThemeProvider, type ThemeProviderProps, ThemeScope, type ThemeScopeProps, ThemeScript, type ThemeScriptProps, ThemeSeed, type ThemeState, type ThemeStorage, Time, TimeField, type TimeFieldClassNames, type TimeFieldLabels, type TimeFieldProps, TimePicker, type TimePickerClassNames, type TimePickerLabels, type TimePickerMode, TimePickerModeToggle, type TimePickerModeToggleProps, type TimePickerProps, type TimePickerStyleProps, ToggleGroupStateContext, type TokenPaints, type TokenValue, type ToolbarExitEdge, ToolbarFab, type ToolbarFabClassNames, type ToolbarFabProps, type ToolbarOrientation, type ToolbarScrollExitOptions, type ToolbarScrollExpansionOptions, Tooltip, type TooltipClassNames, type TooltipPlacement, TooltipPlacementContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, TopAppBar, type TopAppBarClassNames, type TopAppBarProps, type TopAppBarScrollBehavior, type TopAppBarScrolledColor, type TopAppBarStyleProps, type TopAppBarTitleAlign, type TopAppBarVariant, TypeRole, TypeStyle, Typeface, type VariantProps, ZIndexName, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };
+export { AssistChip, type AssistChipProps, Autocomplete, type AutocompleteClassNames, AutocompleteItem, type AutocompleteKey, type AutocompleteLabels, type AutocompleteProps, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, type BadgeClassNames, type BadgeLabels, type BadgeProps, type BadgeStyleProps, BadgedBox, type BadgedBoxClassNames, type BadgedBoxProps, BottomSheet, type BottomSheetClassNames, type BottomSheetDetent, type BottomSheetLabels, type BottomSheetProps, type BottomSheetStyleProps, BreakpointName, BuiltInThemeName, Button, type ButtonActionProps, type ButtonClassNames, ButtonContext, type ButtonContextValue, ButtonGroup, type ButtonGroupClassNames, type ButtonGroupLabels, type ButtonGroupProps, type ButtonGroupSelectionMode, type ButtonGroupVariant, type ButtonLabels, type ButtonLinkProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonStyleProps, type ButtonToggleProps, type ButtonVariant, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, type CardActionProps, type CardLinkProps, type CardProps, type CardStaticProps, type CardStyleProps, type CardVariant, Carousel, type CarouselClassNames, type CarouselLabels, type CarouselProps, type CarouselStyleProps, Checkbox, type CheckboxClassNames, type CheckboxProps, type CheckboxStyleProps, type ChipClassNames, type ChipLabels, type ChipOutline, ChipSet, type ChipSetClassNames, type ChipSetLayout, type ChipSetProps, type ChipStyleProps, CircularProgressIndicator, type CircularProgressIndicatorClassNames, type CircularProgressIndicatorProps, type CircularProgressStyleProps, type ClosedBy, ColorMode, ColorRole, type ComponentToken, type ComponentTokenScope, type ComponentTokenSet, ContextMenuTrigger, type ContextMenuTriggerProps, ContrastLevel, CornerName, type CreateThemeOptions, CustomColorName, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, type DateFieldClassNames, type DateFieldLabels, type DateFieldProps, type DateInputLabels, DatePicker, type DatePickerClassNames, type DatePickerLabels, type DatePickerProps, type DatePickerStyleProps, type DateRange, DateRangePicker, type DateRangePickerClassNames, type DateRangePickerProps, Density, Dialog, DialogActions, type DialogActionsProps, type DialogClassNames, DialogContent, type DialogContentProps, type DialogFullScreen, DialogHeader, type DialogHeaderClassNames, type DialogHeaderLabels, type DialogHeaderProps, type DialogOrigin, type DialogPlacement, type DialogProps, type DialogRenderProps, type DialogStyleProps, DialogTitle, type DialogTitleProps, type DialogTransition, DialogTrigger, type DialogTriggerProps, Divider, type DividerInset, type DividerOrientation, type DividerProps, type DividerStyleProps, DockedToolbar, type DockedToolbarArrangement, type DockedToolbarClassNames, type DockedToolbarColor, type DockedToolbarProps, type DockedToolbarStyleProps, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ElevationLevel, ExtendedFab, type ExtendedFabClassNames, type ExtendedFabProps, type ExtendedFabSize, type ExtendedFabStyleProps, FOCUS_INDICATOR, Fab, type FabClassNames, type FabColor, type FabElevation, FabMenu, type FabMenuClassNames, type FabMenuColor, FabMenuItem, type FabMenuItemClassNames, type FabMenuItemProps, type FabMenuPresentation, type FabMenuProps, type FabMenuSize, type FabMenuStyleProps, type FabProps, type FabSize, type FabStyleProps, FilterChip, type FilterChipClassNames, type FilterChipProps, FloatingToolbar, type FloatingToolbarClassNames, type FloatingToolbarColor, type FloatingToolbarProps, type FloatingToolbarStyleProps, IconButton, type IconButtonActionProps, type IconButtonClassNames, type IconButtonLinkProps, type IconButtonProps, type IconButtonStyleProps, type IconButtonToggleProps, type IconButtonVariant, type IconButtonWidth, type IconTransition, InputChip, type InputChipClassNames, type InputChipProps, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, type LabeledDividerClassNames, type LabeledDividerProps, LabelsProvider, type LabelsProviderProps, type LineLimit, LinearProgressIndicator, type LinearProgressIndicatorClassNames, type LinearProgressIndicatorProps, type LinearProgressStyleProps, List, type ListClassNames, type ListDividers, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemImage, type ListItemImageProps, type ListItemProps, ListItemVideo, type ListItemVideoProps, type ListProps, ListSection, type ListSectionProps, type ListStyleProps, type ListVariant, LoadingIndicator, type LoadingIndicatorClassNames, type LoadingIndicatorProps, type LoadingIndicatorStyleProps, type LoadingIndicatorVariant, MOTION_SCHEMES, Menu, type MenuClassNames, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type Key as MenuKey, type MenuLabels, type MenuLayout, type MenuPlacement, type MenuPresentation, type MenuProps, type MenuStyleProps, MenuTrigger, type MenuTriggerProps, type MenuVariant, MotionScheme, MotionSpring, type NavItemClassNames, type NavItemLayout, NavigationBar, type NavigationBarArrangement, type NavigationBarClassNames, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, type NavigationBarStyleProps, NavigationRail, type NavigationRailClassNames, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps, type NavigationRailState, type OptionItemProps, OptionPopover, type OptionSectionProps, PALETTE_NAMES, PaletteName, PaletteSource, PickerDialog, type PickerDialogClassNames, type PickerDialogLabels, type PickerDialogProps, type PublicComponentToken, PullToRefresh, type PullToRefreshClassNames, type PullToRefreshLabels, type PullToRefreshProps, Radio, type RadioClassNames, RadioGroup, type RadioGroupClassNames, type RadioGroupProps, type RadioGroupStyleProps, type RadioProps, type RadioStyleProps, RangeSlider, type RangeSliderLabels, type RangeSliderProps, ResolvedColorMode, RichTooltip, type RichTooltipClassNames, type RichTooltipProps, type RichTooltipStyleProps, RichTooltipTrigger, type RichTooltipTriggerProps, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SchemeVariant, SearchAppBar, type SearchAppBarClassNames, type SearchAppBarProps, type SearchAppBarStyleProps, SearchBar, type SearchBarClassNames, type SearchBarIconState, type SearchBarInputProps, type SearchBarProps, type SearchBarStyleProps, type SearchBarView, SearchField, type SearchFieldClassNames, type SearchFieldInputProps, type SearchFieldLabels, type SearchFieldProps, type SearchFieldStyleProps, Select, type SelectClassNames, SelectItem, type SelectKey, type SelectLabels, type SelectPresentation, type SelectProps, SelectSection, type SelectedOption, SheetTrigger, type SheetTriggerProps, type ShowSnackbarOptions, SideSheet, type SideSheetClassNames, type SideSheetLabels, type SideSheetProps, type SideSheetStyleProps, Slider, type SliderClassNames, type SliderOrientation, type SliderProps, type SliderSize, type SliderStyleProps, Snackbar, type SnackbarClassNames, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, SnackbarHostState, type SnackbarLabels, type SnackbarProps, type SnackbarResult, type SnackbarStyleProps, type SnackbarVisuals, SplitButton, type SplitButtonClassNames, type SplitButtonLabels, type SplitButtonProps, type SplitButtonSize, type SplitButtonStyleProps, type SplitButtonVariant, SpringFamily, SpringSpeed, SpringToken, StateName, SubmenuTrigger, type SubmenuTriggerProps, SuggestionChip, type SuggestionChipProps, Switch, type SwitchClassNames, type SwitchProps, type SwitchStyleProps, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, type TabProps, Tabs, type TabsClassNames, type TabsProps, type TabsStyleProps, type TabsVariant, TextField, type TextFieldClassNames, type TextFieldLabels, type TextFieldProps, type TextFieldStyleProps, type TextFieldVariant, type ThemeContextValue, type ThemeDefinition, ThemePalettes, ThemeProvider, type ThemeProviderProps, ThemeScope, type ThemeScopeProps, ThemeScript, type ThemeScriptProps, ThemeSeed, type ThemeState, type ThemeStorage, Time, TimeField, type TimeFieldClassNames, type TimeFieldLabels, type TimeFieldProps, TimePicker, type TimePickerClassNames, type TimePickerLabels, type TimePickerMode, TimePickerModeToggle, type TimePickerModeToggleProps, type TimePickerProps, type TimePickerStyleProps, ToggleGroupStateContext, type TokenPaints, type TokenValue, type ToolbarExitEdge, ToolbarFab, type ToolbarFabClassNames, type ToolbarFabProps, type ToolbarOrientation, type ToolbarScrollExitOptions, type ToolbarScrollExpansionOptions, Tooltip, type TooltipClassNames, type TooltipPlacement, TooltipPlacementContext, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, TopAppBar, type TopAppBarClassNames, type TopAppBarProps, type TopAppBarScrollBehavior, type TopAppBarScrolledColor, type TopAppBarStyleProps, type TopAppBarTitleAlign, type TopAppBarVariant, TypeRole, TypeStyle, Typeface, type VariantProps, type WindmorphLabels, ZIndexName, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };

package/dist/index.js

@@ -14,6 +14,7 @@ import { cn, twMergeConfig } from "./utils/cn.js";
 import { ThemeScope } from "./theme/ThemeScope.js";
 import { ThemeScript, getThemeScriptSource } from "./theme/ThemeScript.js";
 import { createTheme } from "./theme/create-theme.js";
+import { LabelsProvider } from "./components/labels/LabelsProvider.js";
 import { getM3Spring } from "./motion/get-m3-spring.js";
 import { useM3Spring } from "./motion/use-m3-spring.js";
 import { tv } from "./utils/tv.js";
@@ -28,9 +29,9 @@ import { TooltipTrigger } from "./components/tooltip/tooltip-trigger.js";
 import { iconButtonStyles } from "./components/icon-button/icon-button-styles.js";
 import { IconButton } from "./components/icon-button/IconButton.js";
 import { iconButtonTokenSet } from "./components/icon-button/icon-button-tokens.js";
-import { buttonGroupStyles } from "./composites/button-group/button-group-styles.js";
+import { buttonGroupStyles } from "./components/button-group/button-group-styles.js";
 import { ContextMenuTrigger, MenuTrigger } from "./components/menu/menu-trigger.js";
-import { ButtonGroup } from "./composites/button-group/ButtonGroup.js";
+import { ButtonGroup } from "./components/button-group/ButtonGroup.js";
 import { extendedFabStyles, fabStyles } from "./components/fab/fab-styles.js";
 import { ExtendedFab, Fab } from "./components/fab/Fab.js";
 import { extendedFabTokenSet, fabTokenSet } from "./components/fab/fab-tokens.js";
@@ -136,4 +137,4 @@ import { TimePicker, TimePickerModeToggle, useTimePickerRoom } from "./component
 import { TimeField } from "./components/time-picker/TimeField.js";
 import { timePickerTokenSet } from "./components/time-picker/time-picker-tokens.js";
 import { Time, parseTime } from "@internationalized/date";
-export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, SearchField, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };
+export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LabelsProvider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, SearchField, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };