@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +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 { 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\nfunction localeHourCycle(locale: string): 12 | 24 {\n  const cycle = new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hourCycle;\n  return cycle === 'h11' || cycle === 'h12' ? 12 : 24;\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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"}

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

@@ -0,0 +1,175 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/time-picker/time-picker-styles.d.ts
+export declare const timePickerStyles: import("tailwind-variants").TVReturnType<{
+  hourCycle: {
+    12: {
+      selector: string;
+    };
+    24: {
+      selector: string;
+    };
+  };
+  mode: {
+    dial: {
+      separator: string;
+    };
+    input: {
+      separator: string;
+    };
+  };
+  layout: {
+    vertical: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+    horizontal: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+  };
+}, {
+  root: string;
+  display: string;
+  time: string;
+  selector: string[];
+  separator: string;
+  period: string[];
+  periodOption: string[];
+  dial: string[];
+  dialFace: string[];
+  dialNumber: string;
+  dialNumberHit: string;
+  dialNumberText: string[];
+  dialNumberOnHandle: string;
+  dialFaceEntering: string[];
+  dialFaceLeaving: string[];
+  dialFocus: string;
+  dialHandle: string[];
+  dialTrack: string[];
+  field: string[];
+  fieldLabel: string;
+  fieldColumn: string;
+}, undefined, {
+  hourCycle: {
+    12: {
+      selector: string;
+    };
+    24: {
+      selector: string;
+    };
+  };
+  mode: {
+    dial: {
+      separator: string;
+    };
+    input: {
+      separator: string;
+    };
+  };
+  layout: {
+    vertical: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+    horizontal: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+  };
+}, {
+  root: string;
+  display: string;
+  time: string;
+  selector: string[];
+  separator: string;
+  period: string[];
+  periodOption: string[];
+  dial: string[];
+  dialFace: string[];
+  dialNumber: string;
+  dialNumberHit: string;
+  dialNumberText: string[];
+  dialNumberOnHandle: string;
+  dialFaceEntering: string[];
+  dialFaceLeaving: string[];
+  dialFocus: string;
+  dialHandle: string[];
+  dialTrack: string[];
+  field: string[];
+  fieldLabel: string;
+  fieldColumn: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  hourCycle: {
+    12: {
+      selector: string;
+    };
+    24: {
+      selector: string;
+    };
+  };
+  mode: {
+    dial: {
+      separator: string;
+    };
+    input: {
+      separator: string;
+    };
+  };
+  layout: {
+    vertical: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+    horizontal: {
+      root: string;
+      display: string;
+      period: string;
+      periodOption: string[];
+      dial: string;
+    };
+  };
+}, {
+  root: string;
+  display: string;
+  time: string;
+  selector: string[];
+  separator: string;
+  period: string[];
+  periodOption: string[];
+  dial: string[];
+  dialFace: string[];
+  dialNumber: string;
+  dialNumberHit: string;
+  dialNumberText: string[];
+  dialNumberOnHandle: string;
+  dialFaceEntering: string[];
+  dialFaceLeaving: string[];
+  dialFocus: string;
+  dialHandle: string[];
+  dialTrack: string[];
+  field: string[];
+  fieldLabel: string;
+  fieldColumn: string;
+}>>;
+/**
+ * The variants of {@link timePickerStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type TimePickerStyleProps = VariantProps<typeof timePickerStyles>;
+//#endregion
+//# sourceMappingURL=time-picker-styles.d.ts.map

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

@@ -0,0 +1,112 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/time-picker/time-picker-styles.ts
+/** Variant definitions for {@link TimePicker}. */
+/**
+* Forced colours paint containers as Canvas, so the time fields lost their boxes and the
+* picked hour, minute or period looked like the others: the fields draw a CanvasText
+* boundary, and the picked one keeps a Highlight fill with HighlightText, opting out of the
+* forced palette (2026-10-15). `!important` beats the token colours, as specific.
+*/
+const forcedSelection = ["forced-colors:data-selected:bg-[Highlight]! forced-colors:data-selected:text-[HighlightText]!", "forced-colors:data-selected:forced-color-adjust-none"];
+const timePickerStyles = tv({
+	slots: {
+		root: "inline-flex shrink-0 items-center text-on-surface",
+		display: "flex",
+		time: "flex items-start",
+		selector: [
+			"h-[80px] rounded-corner-small text-center text-display-large outline-none focus-ring",
+			"cursor-pointer caret-transparent tabular-nums",
+			"bg-[var(--_md-comp-time-picker-time-selector-unselected-container-color)] text-on-surface",
+			"data-selected:bg-[var(--_md-comp-time-picker-time-selector-selected-container-color)]",
+			"data-selected:text-on-primary-container",
+			"state-layer data-pressed:[--m3-state-opacity:var(--md-sys-state-pressed-state-layer-opacity)]!",
+			"aria-invalid:outline-2 aria-invalid:outline-error",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]",
+			...forcedSelection
+		],
+		separator: "flex w-[24px] items-center justify-center text-display-large text-on-surface",
+		period: ["flex rounded-corner-small border", "border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]"],
+		periodOption: [
+			"relative flex flex-1 cursor-pointer items-center justify-center text-title-medium text-on-surface-variant outline-none",
+			"before:absolute before:inset-x-0 before:content-['']",
+			"state-layer focus-ring-inset",
+			"data-selected:bg-[var(--_md-comp-time-picker-period-selector-selected-container-color)]",
+			"data-selected:text-on-tertiary-container",
+			...forcedSelection
+		],
+		dial: ["size-[256px] shrink-0 touch-none rounded-full outline-none select-none", "forced-colors:forced-color-adjust-none"],
+		dialFace: ["fill-[var(--_md-comp-time-picker-clock-dial-color)]", "forced-colors:fill-[Canvas] forced-colors:stroke-[CanvasText] forced-colors:[stroke-width:1px]"],
+		dialNumber: "cursor-pointer outline-none",
+		dialNumberHit: "fill-transparent",
+		dialNumberText: ["fill-on-surface text-body-large data-selected:fill-on-primary", "forced-colors:fill-[CanvasText] forced-colors:data-selected:fill-[HighlightText]"],
+		dialNumberOnHandle: "fill-on-primary text-body-large forced-colors:fill-[HighlightText]",
+		dialFaceEntering: ["transition-opacity starting:opacity-0", "[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"],
+		dialFaceLeaving: ["pointer-events-none opacity-0 transition-opacity starting:opacity-100", "[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]"],
+		dialFocus: "fill-none stroke-secondary forced-colors:stroke-[CanvasText]",
+		dialHandle: ["fill-[var(--_md-comp-time-picker-clock-dial-selector-handle-container-color)]", "forced-colors:fill-[Highlight]"],
+		dialTrack: ["stroke-[color:var(--_md-comp-time-picker-clock-dial-selector-handle-container-color)]", "forced-colors:stroke-[Highlight]"],
+		field: [
+			"h-[calc(72px+var(--md-sys-density,0)*4px)] w-[96px] rounded-corner-small border-2 border-transparent bg-surface-container-highest",
+			"text-center text-display-medium text-on-surface caret-primary outline-none tabular-nums",
+			"focus:border-primary focus:bg-primary-container focus:text-on-primary-container",
+			"aria-invalid:border-error",
+			"forced-colors:border-[CanvasText] forced-colors:focus:border-[Highlight]"
+		],
+		fieldLabel: "pt-[7px] text-body-small text-on-surface-variant",
+		fieldColumn: "flex flex-col"
+	},
+	variants: {
+		hourCycle: {
+			12: { selector: "w-[96px]" },
+			24: { selector: "w-[114px]" }
+		},
+		mode: {
+			dial: { separator: "h-[80px]" },
+			input: { separator: "h-[calc(72px+var(--md-sys-density,0)*4px)]" }
+		},
+		layout: {
+			vertical: {
+				root: "flex-col",
+				display: "flex-row items-start",
+				period: "ms-[12px] w-[52px] flex-col",
+				periodOption: [
+					"not-last:border-b",
+					"not-last:border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]",
+					"first:rounded-t-[calc(var(--md-sys-shape-corner-small)-1px)] last:rounded-b-[calc(var(--md-sys-shape-corner-small)-1px)]",
+					"first:before:bottom-0 first:before:top-[min(0px,calc(100%_-_48px))]",
+					"last:before:top-0 last:before:bottom-[min(0px,calc(100%_-_48px))]"
+				],
+				dial: "mt-[36px]"
+			},
+			horizontal: {
+				root: "flex-row",
+				display: "flex-col items-center",
+				period: "mt-[16px] min-h-[38px] w-[216px] flex-row",
+				periodOption: [
+					"not-last:border-e",
+					"not-last:border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]",
+					"first:rounded-s-[calc(var(--md-sys-shape-corner-small)-1px)] last:rounded-e-[calc(var(--md-sys-shape-corner-small)-1px)]",
+					"before:inset-y-[min(0px,calc((100%_-_48px)/2))]"
+				],
+				dial: "ms-[36px]"
+			}
+		}
+	},
+	compoundVariants: [{
+		mode: "dial",
+		layout: "vertical",
+		class: { period: "min-h-[80px]" }
+	}, {
+		mode: "input",
+		class: { period: "min-h-[calc(72px+var(--md-sys-density,0)*4px)]" }
+	}],
+	defaultVariants: {
+		hourCycle: 12,
+		mode: "dial",
+		layout: "vertical"
+	}
+});
+//#endregion
+export { timePickerStyles };
+
+//# sourceMappingURL=time-picker-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 time picker spec, with sizes from Compose Material 3 (TimePicker.kt,\n * TimePickerTokens, TimeInputTokens).\n *\n * Time selectors: 96 × 80px (114px wide for a 24-hour dial), 8px corners, `display-large`;\n * selected `primary-container` / `on-primary-container`, unselected\n * `surface-container-highest` / `on-surface`, a 24px `display-large` \":\" between them.\n * They take typed digits too. Period selector (12-hour): 52 × 80px beside the minutes\n * (12px away) in the vertical layout, 216 × 38px below the time (16px away) in the\n * horizontal one; a 1px `outline` border with 8px corners, `title-medium`; selected\n * `tertiary-container` / `on-tertiary-container` (the token colours; Compose's\n * `isUpdatedTimepickerToggleEnabled` flag switches to `primary-container`), unselected\n * `on-surface-variant`. The 256px `surface-container-highest` dial sits 36px below the time\n * (vertical) or 36px beside it (horizontal), with `body-large` `on-surface` numbers on a\n * 101px ring (69px for the inner 24-hour ring), each a 48px target; a 48px `primary`\n * handle with `on-primary` text, a 2px track and an 8px centre. The numbers are drawn again\n * in `on-primary`, clipped to the handle, so any part of a number under it stays legible.\n *\n * Input mode: 96 × 72px fields (24 hours too, `TimeInputTokens.TimeFieldContainerWidth`)\n * in `display-medium` with `body-small` labels 7px below; focused fields are\n * `primary-container` with a 2px `primary` border. Web density (`--md-sys-density`) takes 4px\n * per step off the input mode's fields, \":\" and period selector (72 → 68 → 64 → 60px); the\n * dial mode keeps its size, since M3 doesn't make time pickers denser.\n *\n * The dial, the selector handle, the time and period selectors' containers and the period\n * selector's outline come from the time picker's component tokens (`time-picker-tokens.ts`,\n * `--md-comp-time-picker-*`): the root carries `data-tokens=\"md-comp-time-picker\"`, and the\n * classes read one private variable per part. A consumer class still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link TimePicker}. */\n/**\n * Forced colours paint containers as Canvas, so the time fields lost their boxes and the\n * picked hour, minute or period looked like the others: the fields draw a CanvasText\n * boundary, and the picked one keeps a Highlight fill with HighlightText, opting out of the\n * forced palette (2026-10-15). `!important` beats the token colours, as specific.\n */\nconst forcedSelection = [\n  'forced-colors:data-selected:bg-[Highlight]! forced-colors:data-selected:text-[HighlightText]!',\n  'forced-colors:data-selected:forced-color-adjust-none',\n];\n\nexport const timePickerStyles = tv({\n  slots: {\n    root: 'inline-flex shrink-0 items-center text-on-surface',\n    display: 'flex',\n    time: 'flex items-start',\n    selector: [\n      'h-[80px] rounded-corner-small text-center text-display-large outline-none focus-ring',\n      'cursor-pointer caret-transparent tabular-nums',\n      'bg-[var(--_md-comp-time-picker-time-selector-unselected-container-color)] text-on-surface',\n      'data-selected:bg-[var(--_md-comp-time-picker-time-selector-selected-container-color)]',\n      'data-selected:text-on-primary-container',\n      // Hover, focus and pressed layers in the text colour (M3 states; Compose's clickable\n      // Surface). An input has no ripple, so pressing shows the pressed layer instead.\n      'state-layer data-pressed:[--m3-state-opacity:var(--md-sys-state-pressed-state-layer-opacity)]!',\n      'aria-invalid:outline-2 aria-invalid:outline-error',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n      ...forcedSelection,\n    ],\n    separator: 'flex w-[24px] items-center justify-center text-display-large text-on-surface',\n    // The options round their own outer corners to the outline's inner edge (rather than the\n    // container clipping them), so their hit areas can reach past it: each option's is at\n    // least 48px tall (M3's touch target), extended outward, away from the other option.\n    period: [\n      'flex rounded-corner-small border',\n      'border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]',\n    ],\n    periodOption: [\n      'relative flex flex-1 cursor-pointer items-center justify-center text-title-medium text-on-surface-variant outline-none',\n      \"before:absolute before:inset-x-0 before:content-['']\",\n      'state-layer focus-ring-inset',\n      'data-selected:bg-[var(--_md-comp-time-picker-period-selector-selected-container-color)]',\n      'data-selected:text-on-tertiary-container',\n      ...forcedSelection,\n    ],\n    // Forced colours don't reach an SVG's fills, so the dial kept the theme's light disc and\n    // purple handle on the forced canvas: it paints itself in system colours there, a Canvas\n    // disc with a CanvasText edge and numbers, and a Highlight handle and track with\n    // HighlightText numbers (2026-10-17).\n    dial: [\n      'size-[256px] shrink-0 touch-none rounded-full outline-none select-none',\n      'forced-colors:forced-color-adjust-none',\n    ],\n    dialFace: [\n      'fill-[var(--_md-comp-time-picker-clock-dial-color)]',\n      'forced-colors:fill-[Canvas] forced-colors:stroke-[CanvasText] forced-colors:[stroke-width:1px]',\n    ],\n    dialNumber: 'cursor-pointer outline-none',\n    dialNumberHit: 'fill-transparent',\n    dialNumberText: [\n      'fill-on-surface text-body-large data-selected:fill-on-primary',\n      'forced-colors:fill-[CanvasText] forced-colors:data-selected:fill-[HighlightText]',\n    ],\n    // The copy of the numbers clipped to the handle.\n    dialNumberOnHandle: 'fill-on-primary text-body-large forced-colors:fill-[HighlightText]',\n    // The hour and minute faces crossfade on the default effects spring (Compose).\n    dialFaceEntering: [\n      'transition-opacity starting:opacity-0',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n    ],\n    dialFaceLeaving: [\n      'pointer-events-none opacity-0 transition-opacity starting:opacity-100',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n    ],\n    dialFocus: 'fill-none stroke-secondary forced-colors:stroke-[CanvasText]',\n    dialHandle: [\n      'fill-[var(--_md-comp-time-picker-clock-dial-selector-handle-container-color)]',\n      'forced-colors:fill-[Highlight]',\n    ],\n    dialTrack: [\n      'stroke-[color:var(--_md-comp-time-picker-clock-dial-selector-handle-container-color)]',\n      'forced-colors:stroke-[Highlight]',\n    ],\n    field: [\n      'h-[calc(72px+var(--md-sys-density,0)*4px)] w-[96px] rounded-corner-small border-2 border-transparent bg-surface-container-highest',\n      'text-center text-display-medium text-on-surface caret-primary outline-none tabular-nums',\n      'focus:border-primary focus:bg-primary-container focus:text-on-primary-container',\n      'aria-invalid:border-error',\n      'forced-colors:border-[CanvasText] forced-colors:focus:border-[Highlight]',\n    ],\n    fieldLabel: 'pt-[7px] text-body-small text-on-surface-variant',\n    fieldColumn: 'flex flex-col',\n  },\n  variants: {\n    hourCycle: {\n      12: { selector: 'w-[96px]' },\n      24: { selector: 'w-[114px]' },\n    },\n    mode: {\n      dial: { separator: 'h-[80px]' },\n      input: { separator: 'h-[calc(72px+var(--md-sys-density,0)*4px)]' },\n    },\n    layout: {\n      vertical: {\n        root: 'flex-col',\n        display: 'flex-row items-start',\n        period: 'ms-[12px] w-[52px] flex-col',\n        periodOption: [\n          'not-last:border-b',\n          'not-last:border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]',\n          'first:rounded-t-[calc(var(--md-sys-shape-corner-small)-1px)] last:rounded-b-[calc(var(--md-sys-shape-corner-small)-1px)]',\n          'first:before:bottom-0 first:before:top-[min(0px,calc(100%_-_48px))]',\n          'last:before:top-0 last:before:bottom-[min(0px,calc(100%_-_48px))]',\n        ],\n        dial: 'mt-[36px]',\n      },\n      horizontal: {\n        root: 'flex-row',\n        display: 'flex-col items-center',\n        period: 'mt-[16px] min-h-[38px] w-[216px] flex-row',\n        periodOption: [\n          'not-last:border-e',\n          'not-last:border-[color:var(--_md-comp-time-picker-period-selector-outline-color)]',\n          'first:rounded-s-[calc(var(--md-sys-shape-corner-small)-1px)] last:rounded-e-[calc(var(--md-sys-shape-corner-small)-1px)]',\n          'before:inset-y-[min(0px,calc((100%_-_48px)/2))]',\n        ],\n        dial: 'ms-[36px]',\n      },\n    },\n  },\n  compoundVariants: [\n    { mode: 'dial', layout: 'vertical', class: { period: 'min-h-[80px]' } },\n    { mode: 'input', class: { period: 'min-h-[calc(72px+var(--md-sys-density,0)*4px)]' } },\n  ],\n  defaultVariants: { hourCycle: 12, mode: 'dial', layout: 'vertical' },\n});\n\n/**\n * The variants of {@link timePickerStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type TimePickerStyleProps = VariantProps<typeof timePickerStyles>;\n"],"mappings":";;;;;;;;;AAyCA,MAAM,kBAAkB,CACtB,iGACA,sDACF;AAEA,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EACT,MAAM;EACN,UAAU;GACR;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA,GAAG;EACL;EACA,WAAW;EAIX,QAAQ,CACN,oCACA,0EACF;EACA,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA,GAAG;EACL;EAKA,MAAM,CACJ,0EACA,wCACF;EACA,UAAU,CACR,uDACA,gGACF;EACA,YAAY;EACZ,eAAe;EACf,gBAAgB,CACd,iEACA,kFACF;EAEA,oBAAoB;EAEpB,kBAAkB,CAChB,yCACA,4JACF;EACA,iBAAiB,CACf,yEACA,4JACF;EACA,WAAW;EACX,YAAY,CACV,iFACA,gCACF;EACA,WAAW,CACT,yFACA,kCACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,YAAY;EACZ,aAAa;CACf;CACA,UAAU;EACR,WAAW;GACT,IAAI,EAAE,UAAU,WAAW;GAC3B,IAAI,EAAE,UAAU,YAAY;EAC9B;EACA,MAAM;GACJ,MAAM,EAAE,WAAW,WAAW;GAC9B,OAAO,EAAE,WAAW,6CAA6C;EACnE;EACA,QAAQ;GACN,UAAU;IACR,MAAM;IACN,SAAS;IACT,QAAQ;IACR,cAAc;KACZ;KACA;KACA;KACA;KACA;IACF;IACA,MAAM;GACR;GACA,YAAY;IACV,MAAM;IACN,SAAS;IACT,QAAQ;IACR,cAAc;KACZ;KACA;KACA;KACA;IACF;IACA,MAAM;GACR;EACF;CACF;CACA,kBAAkB,CAChB;EAAE,MAAM;EAAQ,QAAQ;EAAY,OAAO,EAAE,QAAQ,eAAe;CAAE,GACtE;EAAE,MAAM;EAAS,OAAO,EAAE,QAAQ,iDAAiD;CAAE,CACvF;CACA,iBAAiB;EAAE,WAAW;EAAI,MAAM;EAAQ,QAAQ;CAAW;AACrE,CAAC"}

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

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/time-picker/time-picker-tokens.d.ts
+/** The tokens of {@link TimePicker} and the time {@link PickerDialog}. */
+export declare const timePickerTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "clock-dial-color" | "clock-dial-selector-handle-container-color" | "time-selector-selected-container-color" | "time-selector-unselected-container-color" | "period-selector-selected-container-color" | "period-selector-outline-color">;
+//#endregion
+//# sourceMappingURL=time-picker-tokens.d.ts.map

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

@@ -0,0 +1,86 @@
+import { color, corner, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/time-picker/time-picker-tokens.ts
+/** The tokens of {@link TimePicker} and the time {@link PickerDialog}. */
+const timePickerTokenSet = defineComponentTokens({
+	name: "md-comp-time-picker",
+	tokens: {
+		"clock-dial-color": {
+			value: color("surface-container-highest"),
+			description: "The clock dial.",
+			compose: "TimePickerTokens.ClockDialColor",
+			paints: {
+				property: "fill",
+				slot: "clock-dial"
+			}
+		},
+		"clock-dial-selector-handle-container-color": {
+			value: color("primary"),
+			description: "The dial's selector: its handle, track and centre dot.",
+			compose: "TimePickerTokens.ClockDialSelectorHandleContainerColor",
+			paints: {
+				property: "fill",
+				slot: "clock-dial-selector-handle"
+			}
+		},
+		"time-selector-selected-container-color": {
+			value: color("primary-container"),
+			description: "The hour or minute selector being set.",
+			compose: "TimePickerTokens.TimeSelectorSelectedContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "time-selector",
+				state: "selected"
+			}
+		},
+		"time-selector-unselected-container-color": {
+			value: color("surface-container-highest"),
+			description: "The other time selector.",
+			compose: "TimePickerTokens.TimeSelectorUnselectedContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "time-selector"
+			}
+		},
+		"period-selector-selected-container-color": {
+			value: color("tertiary-container"),
+			description: "The chosen AM or PM option.",
+			compose: "TimePickerTokens.PeriodSelectorSelectedContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "period-selector-option",
+				state: "selected"
+			}
+		},
+		"period-selector-outline-color": {
+			value: color("outline"),
+			description: "The AM / PM selector's 1px border and the line between its options.",
+			compose: "TimePickerTokens.PeriodSelectorOutlineColor",
+			paints: {
+				property: "border-top-color",
+				slot: "period-selector"
+			}
+		},
+		"container-color": {
+			value: color("surface-container-high"),
+			description: "The dialog panel.",
+			compose: "TimePickerTokens.ContainerColor",
+			paints: {
+				property: "background-color",
+				state: "variant"
+			}
+		},
+		"container-shape": {
+			value: corner("extra-large"),
+			description: "The dialog panel's corners.",
+			compose: "TimePickerTokens.ContainerShape",
+			paints: {
+				property: "border-top-left-radius",
+				state: "variant"
+			}
+		}
+	}
+});
+//#endregion
+export { timePickerTokenSet };
+
+//# sourceMappingURL=time-picker-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-tokens.js","names":[],"sources":["../../../src/components/time-picker/time-picker-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens } from '../../tokens/component';\n\n/*\n * The time picker's component tokens, M3's `md.comp.time-picker.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's TimePickerTokens defaults. They\n * apply to `TimePicker` (its root carries `data-tokens=\"md-comp-time-picker\"`) and to a\n * `PickerDialog` of the `time` variant, whose panel paints the container.\n *\n * The selector handle's colour also paints its track and centre dot, as Compose's\n * `TimePickerColors.selectorColor` does. Input mode's fields (M3's time input set), the\n * numbers, hover, focus and pressed values stay classes.\n */\n\n/** The tokens of {@link TimePicker} and the time {@link PickerDialog}. */\nexport const timePickerTokenSet = defineComponentTokens({\n  name: 'md-comp-time-picker',\n  tokens: {\n    'clock-dial-color': {\n      value: color('surface-container-highest'),\n      description: 'The clock dial.',\n      compose: 'TimePickerTokens.ClockDialColor',\n      paints: { property: 'fill', slot: 'clock-dial' },\n    },\n    'clock-dial-selector-handle-container-color': {\n      value: color('primary'),\n      description: \"The dial's selector: its handle, track and centre dot.\",\n      compose: 'TimePickerTokens.ClockDialSelectorHandleContainerColor',\n      paints: { property: 'fill', slot: 'clock-dial-selector-handle' },\n    },\n    'time-selector-selected-container-color': {\n      value: color('primary-container'),\n      description: 'The hour or minute selector being set.',\n      compose: 'TimePickerTokens.TimeSelectorSelectedContainerColor',\n      paints: { property: 'background-color', slot: 'time-selector', state: 'selected' },\n    },\n    'time-selector-unselected-container-color': {\n      value: color('surface-container-highest'),\n      description: 'The other time selector.',\n      compose: 'TimePickerTokens.TimeSelectorUnselectedContainerColor',\n      paints: { property: 'background-color', slot: 'time-selector' },\n    },\n    'period-selector-selected-container-color': {\n      value: color('tertiary-container'),\n      description: 'The chosen AM or PM option.',\n      compose: 'TimePickerTokens.PeriodSelectorSelectedContainerColor',\n      paints: { property: 'background-color', slot: 'period-selector-option', state: 'selected' },\n    },\n    'period-selector-outline-color': {\n      value: color('outline'),\n      description: \"The AM / PM selector's 1px border and the line between its options.\",\n      compose: 'TimePickerTokens.PeriodSelectorOutlineColor',\n      paints: { property: 'border-top-color', slot: 'period-selector' },\n    },\n    'container-color': {\n      value: color('surface-container-high'),\n      description: 'The dialog panel.',\n      compose: 'TimePickerTokens.ContainerColor',\n      paints: { property: 'background-color', state: 'variant' },\n    },\n    'container-shape': {\n      value: corner('extra-large'),\n      description: \"The dialog panel's corners.\",\n      compose: 'TimePickerTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius', state: 'variant' },\n    },\n  },\n});\n"],"mappings":";;;AAcA,MAAa,qBAAqB,sBAAsB;CACtD,MAAM;CACN,QAAQ;EACN,oBAAoB;GAClB,OAAO,MAAM,2BAA2B;GACxC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAQ,MAAM;GAAa;EACjD;EACA,8CAA8C;GAC5C,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAQ,MAAM;GAA6B;EACjE;EACA,0CAA0C;GACxC,OAAO,MAAM,mBAAmB;GAChC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAiB,OAAO;GAAW;EACnF;EACA,4CAA4C;GAC1C,OAAO,MAAM,2BAA2B;GACxC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAgB;EAChE;EACA,4CAA4C;GAC1C,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAA0B,OAAO;GAAW;EAC5F;EACA,iCAAiC;GAC/B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAkB;EAClE;EACA,mBAAmB;GACjB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAU;EAC3D;EACA,mBAAmB;GACjB,OAAO,OAAO,aAAa;GAC3B,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAA0B,OAAO;GAAU;EACjE;CACF;AACF,CAAC"}