@mortenbrudvik/waveui 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/README.md +231 -85
  2. package/dist/components/data-display/InfoButton.cjs +2 -0
  3. package/dist/components/data-display/InfoButton.cjs.map +1 -0
  4. package/dist/components/data-display/InfoButton.mjs +173 -0
  5. package/dist/components/data-display/InfoButton.mjs.map +1 -0
  6. package/dist/components/data-display/InfoLabel.cjs +1 -1
  7. package/dist/components/data-display/InfoLabel.cjs.map +1 -1
  8. package/dist/components/data-display/InfoLabel.mjs +39 -96
  9. package/dist/components/data-display/InfoLabel.mjs.map +1 -1
  10. package/dist/components/input/Checkbox.cjs +1 -1
  11. package/dist/components/input/Checkbox.cjs.map +1 -1
  12. package/dist/components/input/Checkbox.mjs +91 -75
  13. package/dist/components/input/Checkbox.mjs.map +1 -1
  14. package/dist/components/input/ColorPicker.parts.cjs +1 -1
  15. package/dist/components/input/ColorPicker.parts.cjs.map +1 -1
  16. package/dist/components/input/ColorPicker.parts.mjs +1 -1
  17. package/dist/components/input/ColorPicker.parts.mjs.map +1 -1
  18. package/dist/components/input/Combobox.cjs +1 -1
  19. package/dist/components/input/Combobox.cjs.map +1 -1
  20. package/dist/components/input/Combobox.expand.cjs +1 -1
  21. package/dist/components/input/Combobox.expand.cjs.map +1 -1
  22. package/dist/components/input/Combobox.expand.mjs +20 -20
  23. package/dist/components/input/Combobox.expand.mjs.map +1 -1
  24. package/dist/components/input/Combobox.mjs +143 -138
  25. package/dist/components/input/Combobox.mjs.map +1 -1
  26. package/dist/components/input/DatePicker.cjs +1 -1
  27. package/dist/components/input/DatePicker.cjs.map +1 -1
  28. package/dist/components/input/DatePicker.mjs +213 -209
  29. package/dist/components/input/DatePicker.mjs.map +1 -1
  30. package/dist/components/input/Dropdown.cjs +1 -1
  31. package/dist/components/input/Dropdown.cjs.map +1 -1
  32. package/dist/components/input/Dropdown.mjs +80 -74
  33. package/dist/components/input/Dropdown.mjs.map +1 -1
  34. package/dist/components/input/Field.cjs +1 -1
  35. package/dist/components/input/Field.cjs.map +1 -1
  36. package/dist/components/input/Field.mjs +99 -66
  37. package/dist/components/input/Field.mjs.map +1 -1
  38. package/dist/components/input/Input.cjs +1 -1
  39. package/dist/components/input/Input.cjs.map +1 -1
  40. package/dist/components/input/Input.mjs +79 -55
  41. package/dist/components/input/Input.mjs.map +1 -1
  42. package/dist/components/input/Label.cjs +1 -1
  43. package/dist/components/input/Label.cjs.map +1 -1
  44. package/dist/components/input/Label.mjs +19 -13
  45. package/dist/components/input/Label.mjs.map +1 -1
  46. package/dist/components/input/Rating.cjs +1 -1
  47. package/dist/components/input/Rating.cjs.map +1 -1
  48. package/dist/components/input/Rating.item.cjs +2 -0
  49. package/dist/components/input/Rating.item.cjs.map +1 -0
  50. package/dist/components/input/Rating.item.mjs +255 -0
  51. package/dist/components/input/Rating.item.mjs.map +1 -0
  52. package/dist/components/input/Rating.mjs +150 -151
  53. package/dist/components/input/Rating.mjs.map +1 -1
  54. package/dist/components/input/SearchBox.cjs +1 -1
  55. package/dist/components/input/SearchBox.cjs.map +1 -1
  56. package/dist/components/input/SearchBox.mjs +146 -115
  57. package/dist/components/input/SearchBox.mjs.map +1 -1
  58. package/dist/components/input/Select.cjs +1 -1
  59. package/dist/components/input/Select.cjs.map +1 -1
  60. package/dist/components/input/Select.mjs +34 -25
  61. package/dist/components/input/Select.mjs.map +1 -1
  62. package/dist/components/input/Slider.cjs +1 -1
  63. package/dist/components/input/Slider.cjs.map +1 -1
  64. package/dist/components/input/Slider.mjs +77 -54
  65. package/dist/components/input/Slider.mjs.map +1 -1
  66. package/dist/components/input/SpinButton.cjs +1 -1
  67. package/dist/components/input/SpinButton.cjs.map +1 -1
  68. package/dist/components/input/SpinButton.mjs +198 -96
  69. package/dist/components/input/SpinButton.mjs.map +1 -1
  70. package/dist/components/input/Switch.cjs +1 -1
  71. package/dist/components/input/Switch.cjs.map +1 -1
  72. package/dist/components/input/Switch.mjs +71 -55
  73. package/dist/components/input/Switch.mjs.map +1 -1
  74. package/dist/components/input/TagPicker.cjs +1 -1
  75. package/dist/components/input/TagPicker.cjs.map +1 -1
  76. package/dist/components/input/TagPicker.mjs +142 -116
  77. package/dist/components/input/TagPicker.mjs.map +1 -1
  78. package/dist/components/input/Textarea.cjs +1 -1
  79. package/dist/components/input/Textarea.cjs.map +1 -1
  80. package/dist/components/input/Textarea.mjs +28 -21
  81. package/dist/components/input/Textarea.mjs.map +1 -1
  82. package/dist/components/input/TimePicker.cjs +1 -1
  83. package/dist/components/input/TimePicker.cjs.map +1 -1
  84. package/dist/components/input/TimePicker.mjs +189 -184
  85. package/dist/components/input/TimePicker.mjs.map +1 -1
  86. package/dist/components/input/fieldLabel.cjs +2 -0
  87. package/dist/components/input/fieldLabel.cjs.map +1 -0
  88. package/dist/components/input/fieldLabel.mjs +17 -0
  89. package/dist/components/input/fieldLabel.mjs.map +1 -0
  90. package/dist/components/input/inputLook.cjs +2 -0
  91. package/dist/components/input/inputLook.cjs.map +1 -0
  92. package/dist/components/input/inputLook.mjs +28 -0
  93. package/dist/components/input/inputLook.mjs.map +1 -0
  94. package/dist/components/input/pickerStyles.cjs +1 -1
  95. package/dist/components/input/pickerStyles.cjs.map +1 -1
  96. package/dist/components/input/pickerStyles.mjs +42 -4
  97. package/dist/components/input/pickerStyles.mjs.map +1 -1
  98. package/dist/components/navigation/Menu.popover.cjs +1 -1
  99. package/dist/components/navigation/Menu.popover.cjs.map +1 -1
  100. package/dist/components/navigation/Menu.popover.mjs +10 -10
  101. package/dist/components/navigation/Menu.root.cjs +1 -1
  102. package/dist/components/navigation/Menu.root.cjs.map +1 -1
  103. package/dist/components/navigation/Menu.root.mjs +10 -10
  104. package/dist/components/overlays/Popover.cjs +1 -1
  105. package/dist/components/overlays/Popover.cjs.map +1 -1
  106. package/dist/components/overlays/Popover.mjs +203 -208
  107. package/dist/components/overlays/Popover.mjs.map +1 -1
  108. package/dist/components/overlays/Popover.shared.cjs +1 -1
  109. package/dist/components/overlays/Popover.shared.cjs.map +1 -1
  110. package/dist/components/overlays/Popover.shared.mjs +82 -77
  111. package/dist/components/overlays/Popover.shared.mjs.map +1 -1
  112. package/dist/components/provider/WaveProvider.cjs +1 -1
  113. package/dist/components/provider/WaveProvider.cjs.map +1 -1
  114. package/dist/components/provider/WaveProvider.mjs +25 -19
  115. package/dist/components/provider/WaveProvider.mjs.map +1 -1
  116. package/dist/hooks/useFieldControl.cjs.map +1 -1
  117. package/dist/hooks/useFieldControl.mjs.map +1 -1
  118. package/dist/index.cjs +1 -1
  119. package/dist/index.d.cts +805 -99
  120. package/dist/index.d.ts +805 -99
  121. package/dist/index.mjs +101 -99
  122. package/dist/lib/classNames.cjs +1 -1
  123. package/dist/lib/classNames.cjs.map +1 -1
  124. package/dist/lib/classNames.mjs +74 -66
  125. package/dist/lib/classNames.mjs.map +1 -1
  126. package/dist/lib/styles.cjs +1 -1
  127. package/dist/lib/styles.cjs.map +1 -1
  128. package/dist/lib/styles.mjs +21 -4
  129. package/dist/lib/styles.mjs.map +1 -1
  130. package/dist/styles.css +1 -1
  131. package/package.json +1 -1
  132. package/src/styles/tokens.css +13 -0
@@ -1 +1 @@
1
- {"version":3,"file":"TimePicker.mjs","names":["useId","useId$1","React","OPTION_CLASSES","TimePickerOption","useListboxOption","optionProps","cn","timePickerClassNames","selected","forcedColors","CheckIcon","label","defaultInvalidTimeLabel","format","defaultOutOfRangeLabel","min","max","displayTime","minutes","timeToMinutes","value","minutesToTime","matchesQuery","item","text","startsWithQuery","TimePicker","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","selectedValue","setSelectedValue","useControllable","defaultValue","onValueChange","next","stepValid","normalizeTimeStep","step","minMinutes","minTime","maxMinutes","maxTime","boundsValid","allOptions","generateTimeOptions","warnOnce","interactive","disabled","readOnly","openState","setOpen","openControlled","defaultOpen","onOpenChange","isClient","useIsClient","open","draft","setDraft","invalid","setInvalid","wasInteractive","setWasInteractive","seenValue","setSeenValue","query","openList","closeList","filter","exact","minutesToValue","getTypedActiveValue","needle","selectedInList","selectedValues","commitValue","commitDraft","rejectDraft","reason","onInvalidInput","clearDraft","hasMatches","expanded","lb","useListbox","displayLabel","showClear","clearable","statusMessage","labels","rootRef","inputRef","surfaceRef","rootRefs","useMergedRefs","ref","inputRefs","controlRef","useDismiss","usePopupPosition","surfaceRefs","setFloating","field","useFieldContext","validates","required","errorId","showOwnError","fieldProps","useFieldControl","joinIds","invalidLook","isInvalidLook","form","handleInputChange","event","handleKeyDown","composeEventHandlers","onKeyDown","flushSync","handleKeyUp","onKeyUp","handleInputClick","handleBlur","onBlur","handleExpandClick","handleClear","listboxLabelledBy","renderListbox","hidden","showExpand","showsExpandButton","expandIcon","errorMessage","listboxMounted","ListboxContext","className","setReference","inputBase","inputFocus","disabledStyles","pickerEndPadding","DismissIcon","PickerExpandButton","HiddenInput","Portal","floatingProps"],"sources":["../../../src/components/input/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { timePickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n disabledStyles,\n focusRing,\n forcedColors,\n inputBase,\n inputFocus,\n inputInvalid,\n} from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { ListboxContext, useListbox, useListboxOption } from '../../hooks/useListbox';\nimport type { ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { Portal } from '../portal/Portal';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport {\n DEFAULT_TIME_STEP,\n generateTimeOptions,\n minutesToTime,\n minutesToValue,\n normalizeTimeStep,\n timeToMinutes,\n} from './dateUtils';\nimport { isInvalidLook } from './Input';\nimport { PICKER_ICON_BUTTON_CLASSES, pickerEndPadding } from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/* Option */\n/* ------------------------------------------------------------------ */\n\nconst OPTION_CLASSES =\n 'flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold';\n\ninterface TimePickerOptionProps {\n value: string;\n label: string;\n}\n\n/**\n * One time option. Memoized: it re-renders only when its own active/selected state changes (read\n * from the listbox store), so moving the highlight renders two options, not the whole list.\n */\nconst TimePickerOption = React.memo(function TimePickerOption({\n value,\n label,\n}: TimePickerOptionProps) {\n const { selected, optionProps } = useListboxOption<HTMLLIElement>({ value, label });\n return (\n <li\n {...optionProps}\n className={cn(\n timePickerClassNames.option,\n OPTION_CLASSES,\n selected && forcedColors.selectedContainer,\n )}\n >\n <span\n className={cn(\n timePickerClassNames.checkIcon,\n 'flex h-4 w-4 shrink-0 items-center justify-center',\n )}\n >\n {selected ? <CheckIcon size={12} /> : null}\n </span>\n {label}\n </li>\n );\n});\nTimePickerOption.displayName = 'TimePickerOption';\n\n/* ------------------------------------------------------------------ */\n/* TimePicker */\n/* ------------------------------------------------------------------ */\n\n/** Why typed text was not accepted (see {@link TimePickerProps.onInvalidInput}). */\nexport type TimePickerInvalidReason = 'unparseable' | 'out-of-range';\n\n/**\n * The TimePicker's built-in texts, for localization. Each member is optional and falls back to its\n * English default. The times themselves follow `format`.\n */\nexport interface TimePickerLabels {\n /** Name of the clear button.\n * @default 'Clear time'\n */\n clear?: string;\n /** Name of the expand button at the end of the input.\n * @default 'Show times'\n */\n expand?: string;\n /** Name of the list of times when the picker has no `aria-label`, `aria-labelledby` or Field\n * label to lend it.\n * @default 'Times'\n */\n list?: string;\n /** Status text (announced and shown in the open list) when `minTime`/`maxTime` leave no times.\n * @default 'No times available'\n */\n noTimes?: string;\n /** Status text (announced and shown in the open list) when the typed text matches no time.\n * @default 'No matching times'\n */\n noMatches?: string;\n /**\n * Message for text that is not a time. `format` is the display pattern (`'HH:mm'` or\n * `'h:mm AM'`).\n * @default (format) => `Enter a time in the format ${format}.`\n */\n invalidTime?: (format: string) => string;\n /**\n * Message for a time outside `minTime`/`maxTime`. The bounds are passed as the input shows times\n * (`format`); a bound that is not set is `undefined`.\n * @default (min, max) => `Enter a time between ${min} and ${max}.` (only `min`: `Enter a time on\n * or after ${min}.`; only `max`: `Enter a time on or before ${max}.`)\n */\n outOfRange?: (min: string | undefined, max: string | undefined) => string;\n}\n\nconst defaultInvalidTimeLabel = (format: string) => `Enter a time in the format ${format}.`;\n\nconst defaultOutOfRangeLabel = (min: string | undefined, max: string | undefined) => {\n if (min !== undefined && max !== undefined) return `Enter a time between ${min} and ${max}.`;\n if (min !== undefined) return `Enter a time on or after ${min}.`;\n return `Enter a time on or before ${max}.`;\n};\n\n/** Properties for the TimePicker component. */\nexport interface TimePickerProps extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue' | 'placeholder' | RoutedHandlers\n> {\n /** Controlled selected time in `HH:mm` (24-hour) format; `''` for no time. */\n value?: string;\n /**\n * Initial time for uncontrolled usage (`HH:mm`).\n * @default ''\n */\n defaultValue?: string;\n /** Called with the new `HH:mm` value (`''` when cleared) whenever the selected time changes. */\n onValueChange?: (value: string) => void;\n /**\n * @deprecated Use `onValueChange`. Still called with the new value (warns once in development).\n */\n onChange?: (value: string) => void;\n /**\n * Time display format of the input and the options.\n * @default '12h'\n */\n format?: '12h' | '24h';\n /**\n * Minutes between options. A non-finite or non-positive value falls back to 30 (development\n * warning); fractions are floored.\n * @default 30\n */\n step?: number;\n /**\n * Earliest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`.\n * @default '00:00'\n */\n minTime?: string;\n /**\n * Latest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`. Invalid or reversed bounds give no\n * options (development warning, \"No times available\", see `labels`).\n * @default '23:59'\n */\n maxTime?: string;\n /**\n * Placeholder text shown when no time is selected.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Whether the time picker is disabled and non-interactive.\n * @default false\n */\n disabled?: boolean;\n /**\n * Makes the input read-only: the list does not open and the value cannot change. Turning it (or\n * `disabled`) on while the user is typing drops the typed text.\n */\n readOnly?: boolean;\n /**\n * Whether to show a clear button when a time is selected (not shown while `readOnly`; shown\n * disabled while `disabled`). It is a tab stop after the input. Tab from erased text clears the\n * value before focus moves, so focus goes on past the clear button that disappears with it.\n * @default false\n */\n clearable?: boolean;\n /**\n * The glyph of the expand button at the end of the input (default: a chevron). The button\n * opens and closes the list without moving focus out of the input and is not a tab stop\n * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n * become the glyph, with a development warning).\n */\n expandIcon?: Slot<'span'>;\n /**\n * Controlled open state of the list (never shown while `disabled` or `readOnly`). The list\n * renders only in the browser: an open picker is closed in the server HTML and opens once it has\n * hydrated.\n */\n open?: boolean;\n /**\n * Initial open state of the list for uncontrolled usage. A picker that starts disabled or\n * read-only starts closed. The list renders only in the browser: it is closed in the server HTML\n * and opens once the picker has hydrated.\n * @default false\n */\n defaultOpen?: boolean;\n /** Called when the list opens or closes (only when the state changes). */\n onOpenChange?: (open: boolean) => void;\n /**\n * Called when edited text is not accepted on Enter or blur (once per edit): it is not a time\n * (`'unparseable'`) or lies outside `minTime`/`maxTime` (`'out-of-range'`). The text stays in the\n * input, which is marked `aria-invalid` and described by an error message (left to the\n * surrounding `Field` when it shows an error); Enter and leaving the input also close the list,\n * so it does not cover the message. Enter reports it again when pressed again.\n */\n onInvalidInput?: (text: string, reason: TimePickerInvalidReason) => void;\n /**\n * Names of the clear and expand buttons and of the list, the status texts of an empty list and\n * the error messages of rejected text, for localization. Unset members keep their English\n * defaults.\n */\n labels?: TimePickerLabels;\n /** Form field name: the `HH:mm` value is submitted under it (hidden input). */\n name?: string;\n /** Id of the `<form>` the value belongs to, when the picker is outside it. */\n form?: string;\n /**\n * Blocks form submission while no time is selected; sets `aria-required` on the input. Like a\n * native readonly input, a `readOnly` TimePicker does not block submission.\n */\n required?: boolean;\n /** Native `autocomplete` of the input. @default 'off' */\n autoComplete?: string;\n /** Native `maxlength` of the input. */\n maxLength?: number;\n /** Focus handler of the text input (the root keeps the other handlers). */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /** Blur handler of the text input. */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /** Key handler of the text input; `preventDefault()` skips the picker's own keys. */\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Key handler of the text input. */\n onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Ref to the text input (the `role=\"combobox\"` element); `ref` stays on the root. */\n controlRef?: React.Ref<HTMLInputElement>;\n /** Ref to the root element. */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction displayTime(value: string, format: '12h' | '24h'): string {\n const minutes = timeToMinutes(value);\n return Number.isNaN(minutes) ? value : minutesToTime(minutes, format);\n}\n\n/** Whether an option matches the (trimmed, lower-case) typed text: by label or `HH:mm` value. */\nfunction matchesQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().includes(text) || item.value.includes(text);\n}\n\n/** Whether an option's label or `HH:mm` value starts with the (trimmed, lower-case) typed text. */\nfunction startsWithQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().startsWith(text) || item.value.startsWith(text);\n}\n\n/**\n * A time input with a filterable list of times (APG editable combobox with list autocomplete).\n *\n * - Type to filter (by label or `HH:mm` value). A complete typed time (`2:00 PM`, `14:00`) makes\n * its own option active — not an earlier one that merely contains the text, such as `12:00 PM`\n * — and partial text makes the first option that starts with it active (`2:00 p` -> `2:00 PM`),\n * else the first one that contains it; Enter commits the active option. Enter or leaving the\n * field also commits a complete typed time that is not in the list (`9:15 AM`, `14:45`) when it\n * lies within `minTime`/`maxTime`, and erased text clears the value (as the clear button does);\n * Enter never submits the form with edited text, and both close the list. Other typed text is\n * kept: the input is marked invalid and an error message describes it (`onInvalidInput`,\n * reported once per edit) until the text is edited or replaced (an option, the clear button,\n * Escape, a form reset, a new value from the parent). Escape on a closed list reverts any edit,\n * erased text included, to the selected time.\n * - Click the input or the expand button at its end (a chevron, see `expandIcon`; not a tab stop,\n * and it leaves focus in the input), press ArrowDown/ArrowUp or type to open; the list opens\n * with every option and the selected one (when it is in the list) active and scrolled into\n * view. Without one, no option is active until ArrowDown/ArrowUp or typing, so Enter lets the\n * surrounding form submit. Escape, Tab, an outside press or focus leaving closes it. Typed text\n * kept after Escape closed the list still filters it when it reopens: a click resumes the option\n * typing made active, ArrowDown/ArrowUp start at the first/last match.\n * - `open`/`defaultOpen`/`onOpenChange` control the list. It closes when the picker becomes\n * disabled or read-only (uncontrolled `open`: it stays closed when the picker is enabled again),\n * and the text typed until then is dropped.\n * - Keys of an IME composition (its confirming Enter included) are left to the IME.\n * - `clearable` shows a clear button while a time is selected (not while read-only), a tab stop\n * after the input. Tab from erased text clears the value first, so focus moves on past the\n * picker instead of to the clear button that disappears.\n * - The value is `HH:mm` (24-hour) whatever the display `format`; values off the `step` grid or\n * outside the bounds are still displayed in `format`.\n * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,\n * `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes\n * `autoComplete`, `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and\n * `enterKeyHint`. `ref`, `className`, `style`, other `aria-*` attributes and the remaining props\n * stay on the root `<div>`. Inside a `Field`, the input is labelled and described by it.\n * - `name`/`required` add a hidden input for native forms (`HH:mm`); the value resets with its form.\n * - The built-in names, status texts and error messages are English; `labels` localizes them.\n * - The open list renders only in the browser: an open list (`defaultOpen`, `open`) is closed in\n * the server HTML and opens once the picker has hydrated.\n */\nexport const TimePicker = (props: TimePickerProps) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange,\n onChange,\n format = '12h',\n step = DEFAULT_TIME_STEP,\n minTime = '00:00',\n maxTime = '23:59',\n placeholder = 'Select a time',\n disabled = false,\n readOnly,\n clearable = false,\n expandIcon,\n open: openProp,\n defaultOpen,\n onOpenChange,\n onInvalidInput,\n labels,\n name,\n form,\n required,\n autoComplete = 'off',\n autoCapitalize,\n autoCorrect,\n maxLength,\n enterKeyHint,\n inputMode,\n spellCheck,\n autoFocus,\n tabIndex,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-errormessage': ariaErrorMessage,\n 'aria-details': ariaDetails,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n controlRef,\n className,\n ref,\n ...rest\n } = props;\n\n if (onChange !== undefined) warnDeprecated('TimePicker', 'onChange', 'onValueChange');\n\n const [selectedValue, setSelectedValue] = useControllable<string>(\n valueProp,\n defaultValue ?? '',\n (next) => {\n onValueChange?.(next);\n onChange?.(next);\n },\n );\n\n /* ---- options, step and bounds ---------------------------------- */\n\n const stepValid = normalizeTimeStep(step).valid;\n const minMinutes = timeToMinutes(minTime);\n const maxMinutes = timeToMinutes(maxTime);\n const boundsValid =\n !Number.isNaN(minMinutes) && !Number.isNaN(maxMinutes) && minMinutes <= maxMinutes;\n const allOptions = React.useMemo(\n () => generateTimeOptions(step, minTime, maxTime, format),\n [step, minTime, maxTime, format],\n );\n\n // Once per invalid value and page (C-DEV), not once per instance and effect run.\n React.useEffect(() => {\n if (!stepValid) {\n warnOnce(\n `TimePicker:step:${String(step)}`,\n `TimePicker: \\`step\\` must be a positive number of minutes (received ${String(step)}); ` +\n `using ${DEFAULT_TIME_STEP}.`,\n );\n }\n }, [step, stepValid]);\n\n React.useEffect(() => {\n if (!boundsValid) {\n warnOnce(\n `TimePicker:bounds:${minTime}|${maxTime}`,\n `TimePicker: \\`minTime\\`/\\`maxTime\\` must be times such as \"09:00\", \"09:00:00\" or ` +\n `\"9:00 AM\" with minTime <= maxTime (received \"${minTime}\" / \"${maxTime}\"); no times are available.`,\n );\n }\n }, [minTime, maxTime, boundsValid]);\n\n /* ---- open state, draft text and query -------------------------- */\n\n const interactive = !disabled && !readOnly;\n const [openState, setOpen, openControlled] = useControllable<boolean>(\n openProp,\n // A picker that starts disabled or read-only never shows its list, so it starts closed (no\n // close to report later).\n (defaultOpen ?? false) && interactive,\n onOpenChange,\n );\n // The open list lives in a portal, which renders only in the browser: until then (the server\n // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n // aria-controls and aria-activedescendant never name a missing element.\n const isClient = useIsClient();\n const open = openState && interactive && isClient;\n // A list hidden because the picker became disabled or read-only is closed for good\n // (uncontrolled), so enabling the picker again does not bring it back; onOpenChange(false)\n // reports it (a consumer callback, so from an effect). A controlled `open` stays the parent's.\n React.useEffect(() => {\n if (!interactive && openState && !openControlled) setOpen(false);\n }, [interactive, openState, openControlled, setOpen]);\n /** Typed text; `null` shows the selected time's label (draft model). */\n const [draft, setDraft] = React.useState<string | null>(null);\n /** Why the typed text was rejected (it is kept and flagged); `null` while it is not. */\n const [invalid, setInvalid] = React.useState<TimePickerInvalidReason | null>(null);\n // Locking the picker while the user types drops the typed text and its error, so no later blur\n // commits it (adjusted during render, C-HOOKS).\n const [wasInteractive, setWasInteractive] = React.useState(interactive);\n if (wasInteractive !== interactive) {\n setWasInteractive(interactive);\n if (!interactive) {\n setDraft(null);\n setInvalid(null);\n }\n }\n // A new value from the parent replaces rejected text (the picker's own commits clear it\n // themselves), so the input never shows an error next to a valid value. Text the user is still\n // typing stays.\n const [seenValue, setSeenValue] = React.useState(selectedValue);\n if (seenValue !== selectedValue) {\n setSeenValue(selectedValue);\n if (invalid !== null) {\n setDraft(null);\n setInvalid(null);\n }\n }\n /**\n * Filter text: the typed text only, never the selected time's label, so opening without an edit\n * shows every option. Typed text kept while the list is closed (Escape) keeps filtering it, so\n * a reopened list shows what the input says.\n */\n const query = draft ?? '';\n\n const openList = () => {\n if (!interactive || open) return;\n setOpen(true);\n };\n const closeList = () => setOpen(false);\n\n // A complete time in any spelling the commit accepts (`2:00pm`, `09:00 AM`, `14:00:00`) keeps its\n // own option, so it stays listed and active, as Enter and blur commit it.\n const filter = React.useMemo(() => {\n const text = query.trim().toLowerCase();\n if (!text) return undefined;\n const minutes = timeToMinutes(text);\n const exact = Number.isNaN(minutes) ? null : minutesToValue(minutes);\n return (item: ListboxItem) => item.value === exact || matchesQuery(item, text);\n }, [query]);\n\n /**\n * The option that typing `text` makes active. A complete time (`2:00 PM`, `14:00`) activates its\n * own option, never another one that merely contains the text (`12:00 PM`); when it is not in\n * the list (off-grid or out of bounds) nothing is active, so Enter commits the typed time or\n * nothing. Partial text activates the first option whose label or value starts with it (`2:00 p`\n * -> `2:00 PM`, `2` -> `2:00 AM`, not `12:00 AM`), else the first option that contains it.\n */\n const getTypedActiveValue = (text: string): string | null => {\n const needle = text.trim().toLowerCase();\n if (!needle) return null;\n const minutes = timeToMinutes(text);\n if (!Number.isNaN(minutes)) {\n const exact = minutesToValue(minutes);\n return allOptions.some((item) => item.value === exact) ? exact : null;\n }\n const match =\n allOptions.find((item) => startsWithQuery(item, needle)) ??\n allOptions.find((item) => matchesQuery(item, needle));\n return match?.value ?? null;\n };\n\n // Opening without typing activates the selected option only when it is in the list. An empty,\n // off-grid or out-of-range value activates nothing (ArrowDown/ArrowUp start at the first/last\n // option), so Enter on a freshly opened list commits nothing and the surrounding form submits.\n const selectedInList =\n selectedValue !== '' && allOptions.some((item) => item.value === selectedValue);\n\n const selectedValues = React.useMemo(\n () => (selectedValue ? [selectedValue] : []),\n [selectedValue],\n );\n\n const commitValue = (next: string) => {\n setSelectedValue(next);\n setDraft(null);\n setInvalid(null);\n };\n\n /**\n * Commits the typed text: erased text clears the value, a complete time within the bounds selects\n * it. Returns why any other text is not accepted (it is kept), else `null`.\n */\n const commitDraft = (text: string): TimePickerInvalidReason | null => {\n if (!text.trim()) {\n commitValue('');\n return null;\n }\n const minutes = timeToMinutes(text);\n if (Number.isNaN(minutes)) return 'unparseable';\n if (!boundsValid || minutes < minMinutes || minutes > maxMinutes) return 'out-of-range';\n commitValue(minutesToValue(minutes));\n return null;\n };\n\n /** Keeps rejected text, flags it and reports it. */\n const rejectDraft = (text: string, reason: TimePickerInvalidReason) => {\n setInvalid(reason);\n onInvalidInput?.(text, reason);\n };\n\n const clearDraft = () => {\n setDraft(null);\n setInvalid(null);\n };\n\n // The listbox counts as open only while it shows options: with no match nothing is displayed,\n // so `aria-expanded` is false and Escape reverts the typed text instead of closing an empty list.\n const hasMatches = React.useMemo(\n () => (filter ? allOptions.some(filter) : allOptions.length > 0),\n [allOptions, filter],\n );\n const expanded = open && hasMatches;\n\n const lb = useListbox({\n open: expanded,\n onOpenChange: (next) => (next ? openList() : closeList()),\n mode: 'editable',\n selectedValues,\n onSelect: (next) => commitValue(next),\n items: allOptions,\n filter,\n // Typing sets the active option itself (getTypedActiveValue in handleInputChange), so an exact\n // typed time wins over an earlier substring match; highlightOnFilter would force the first one.\n autoHighlight: draft === null && selectedInList ? 'selected' : false,\n idPrefix: 'timepicker-listbox',\n // Escape on a closed list reverts typed text (erased text: handleKeyDown); without a draft it is\n // left to enclosing layers.\n onClearDraft:\n draft !== null\n ? () => {\n clearDraft();\n closeList();\n }\n : undefined,\n });\n\n const displayLabel = selectedValue\n ? (lb.getItem(selectedValue)?.label ?? displayTime(selectedValue, format))\n : '';\n // Read-only pickers offer no clear action (the value cannot change).\n const showClear = clearable && !readOnly && selectedValue !== '';\n const statusMessage =\n open && !hasMatches\n ? allOptions.length === 0\n ? (labels?.noTimes ?? 'No times available')\n : (labels?.noMatches ?? 'No matching times')\n : '';\n\n /* ---- elements, dismissal, positioning --------------------------- */\n\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n const rootRefs = useMergedRefs<HTMLDivElement>(ref, rootRef);\n const inputRefs = useMergedRefs<HTMLInputElement>(controlRef, inputRef);\n\n const { layerId } = useDismiss({\n open,\n onDismiss: closeList,\n refs: [surfaceRef, rootRef],\n anchorRef: inputRef,\n kind: 'listbox',\n focusOutside: true,\n });\n\n const { setReference, setFloating, floatingProps } = usePopupPosition({\n open,\n side: 'bottom',\n align: 'start',\n matchReferenceWidth: true,\n fitViewport: true,\n });\n const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n /* ---- forms and Field ------------------------------------------- */\n\n const field = useFieldContext();\n const isRequired = required ?? field?.required ?? false;\n // Like a native readonly input, a read-only picker is barred from constraint validation (the\n // user could not fix it); its value is still submitted.\n const validates = isRequired && !readOnly;\n const errorId = useId('timepicker-error');\n // A Field that shows an error describes the input itself (its message is not repeated).\n const showOwnError = invalid !== null && !field?.hasErrorMessage;\n const fieldProps = useFieldControl({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': joinIds(ariaDescribedBy, showOwnError ? errorId : undefined),\n 'aria-invalid': invalid !== null ? true : ariaInvalid,\n // An explicit `required={false}` wins over a required Field, so aria-required matches\n // `isRequired`.\n 'aria-required': ariaRequired ?? required,\n });\n const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n useFormReset(\n inputRef,\n () => {\n setSelectedValue(defaultValue ?? '');\n clearDraft();\n closeList();\n },\n form,\n );\n\n /* ---- handlers --------------------------------------------------- */\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return;\n const text = event.target.value;\n setDraft(text);\n setInvalid(null);\n if (!open) setOpen(true);\n // Every edit re-ranks the highlight (it opens the list in the same update when closed).\n lb.setActiveValue(getTypedActiveValue(text));\n };\n\n const handleKeyDown = composeEventHandlers(\n onKeyDown,\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!interactive) return;\n // Enter commits the active option: the exact typed time, the first match of partial text,\n // or the option moved to with the arrow keys.\n lb.onKeyDown(event);\n // Keys that belong to an IME composition (its confirming Enter) are left to the IME, as\n // useListbox leaves them.\n if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n if (event.key === 'Escape' && draft === '' && displayLabel !== '') {\n // Erased text: useListbox calls onClearDraft only while the input has text, so Escape on a\n // closed list restores the selected time here (an open list was closed above). With nothing\n // to restore, Escape is left to enclosing layers.\n event.preventDefault();\n clearDraft();\n closeList();\n return;\n }\n if (event.key === 'Enter' && draft !== null) {\n // Edited text is committed (a complete time within the bounds; erased text clears) or kept\n // and flagged (reported on every Enter), never submitted with the form; untouched text\n // lets Enter submit. The list closes either way, so it does not cover the error message.\n event.preventDefault();\n const reason = commitDraft(draft);\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n }\n if (event.key === 'Tab' && !event.shiftKey && showClear && draft !== null && !draft.trim()) {\n // Erased text clears the value, and with it the clear button, the next tab stop. It is\n // settled before Tab moves focus (the blur would settle it while focus moves to that\n // button), so focus moves on to the tab stop after the picker instead of dropping to\n // <body> with the button (C-DISABLED).\n flushSync(() => commitDraft(draft));\n }\n if (event.key === 'Tab' && open && !expanded) {\n // useListbox closes the list on Tab only while it shows options. The status text shown\n // instead ('No matching times', 'No times available') closes too: the clear button, the\n // next tab stop, is inside the picker, so focus moving there does not dismiss it.\n closeList();\n }\n },\n );\n const handleKeyUp = composeEventHandlers(onKeyUp, lb.onKeyUp);\n\n const handleInputClick = () => {\n if (!interactive || open) return;\n openList();\n // Typed text kept after Escape resumes where typing left it: its matches (the filter) and the\n // option typing made active, so Enter commits the same time as before the list closed.\n if (draft !== null) lb.setActiveValue(getTypedActiveValue(draft));\n };\n\n const handleBlur = composeEventHandlers(onBlur, () => {\n if (!interactive || draft === null) return;\n // Leaving the input settles the edit as Enter does: rejected text is kept (text that was\n // already rejected is not reported again) and the list closes either way, so it does not cover\n // the error message.\n const reason = invalid === null ? commitDraft(draft) : null;\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n });\n\n // The expand button opens the list as a click in the input does (typed text kept after Escape\n // resumes its matches) and closes it; focus stays in (or returns to) the input.\n const handleExpandClick = () => {\n if (!interactive) return;\n if (open) closeList();\n else handleInputClick();\n inputRef.current?.focus();\n };\n\n const handleClear = () => {\n if (!interactive) return;\n commitValue('');\n inputRef.current?.focus();\n };\n\n /* ---- render ---------------------------------------------------- */\n\n const listboxLabelledBy = joinIds(ariaLabelledBy, field?.labelId);\n const renderListbox = (hidden: boolean) => (\n <ul\n {...lb.getListboxProps()}\n aria-labelledby={listboxLabelledBy}\n aria-label={listboxLabelledBy ? undefined : (ariaLabel ?? labels?.list ?? 'Times')}\n hidden={hidden || undefined}\n className={cn(\n timePickerClassNames.listbox,\n 'max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden',\n )}\n >\n {lb.items.map((item) => (\n <TimePickerOption key={item.value} value={item.value} label={item.label} />\n ))}\n </ul>\n );\n\n const showExpand = showsExpandButton(expandIcon);\n\n let errorMessage = '';\n if (showOwnError && invalid === 'unparseable') {\n errorMessage = (labels?.invalidTime ?? defaultInvalidTimeLabel)(\n format === '24h' ? 'HH:mm' : 'h:mm AM',\n );\n } else if (showOwnError) {\n // Bounds the consumer did not set are `undefined`, not the defaults.\n errorMessage = (labels?.outOfRange ?? defaultOutOfRangeLabel)(\n props.minTime === undefined ? undefined : displayTime(minTime, format),\n props.maxTime === undefined ? undefined : displayTime(maxTime, format),\n );\n }\n // aria-controls must name a listbox that is actually mounted. The closed list is inline only\n // while options exist; the open list is mounted only while something matches.\n const listboxMounted = open ? hasMatches : allOptions.length > 0;\n\n return (\n <ListboxContext.Provider value={lb.context}>\n <div\n {...rest}\n ref={rootRefs}\n className={cn(timePickerClassNames.root, 'relative inline-flex flex-col', className)}\n >\n <div ref={setReference} className=\"relative flex items-center\">\n <input\n ref={inputRefs}\n type=\"text\"\n {...lb.getComboboxProps()}\n aria-controls={listboxMounted ? lb.listboxId : undefined}\n {...fieldProps}\n aria-errormessage={ariaErrorMessage}\n aria-details={ariaDetails}\n value={draft ?? displayLabel}\n onChange={handleInputChange}\n onClick={handleInputClick}\n onFocus={onFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n maxLength={maxLength}\n enterKeyHint={enterKeyHint}\n inputMode={inputMode}\n spellCheck={spellCheck}\n autoFocus={autoFocus}\n tabIndex={tabIndex}\n className={cn(\n timePickerClassNames.input,\n inputBase,\n 'border-b-stroke-accessible',\n inputFocus,\n disabledStyles,\n invalidLook && inputInvalid,\n pickerEndPadding(Number(showClear) + Number(showExpand)),\n )}\n />\n {showClear && (\n <button\n type=\"button\"\n aria-label={labels?.clear ?? 'Clear time'}\n disabled={disabled}\n // Keeps focus (and an open list) on the input while the pointer clears it.\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n className={cn(\n timePickerClassNames.clearButton,\n PICKER_ICON_BUTTON_CLASSES,\n showExpand ? 'end-7' : 'end-1',\n focusRing,\n disabledStyles,\n )}\n >\n <DismissIcon />\n </button>\n )}\n {showExpand && (\n <PickerExpandButton\n component=\"TimePicker\"\n expandIcon={expandIcon}\n label={labels?.expand ?? 'Show times'}\n expanded={expanded}\n listboxId={lb.listboxId}\n disabled={disabled || !!readOnly}\n onToggle={handleExpandClick}\n className={timePickerClassNames.expandButton}\n iconClassName={timePickerClassNames.expandIcon}\n />\n )}\n </div>\n {showOwnError && (\n <p\n id={errorId}\n role=\"alert\"\n className={cn(timePickerClassNames.errorMessage, 'mt-1 text-caption-1 text-error')}\n >\n {errorMessage}\n </p>\n )}\n {!open && allOptions.length > 0 && renderListbox(true)}\n <span role=\"status\" className=\"sr-only\">\n {statusMessage}\n </span>\n <HiddenInput\n name={name}\n form={form}\n disabled={disabled}\n value={selectedValue}\n type=\"text\"\n required={validates}\n onInvalid={() => inputRef.current?.focus()}\n />\n {open && (\n <Portal layerId={layerId}>\n <div\n ref={surfaceRefs}\n {...floatingProps}\n data-state=\"open\"\n className={cn(\n timePickerClassNames.surface,\n 'flex flex-col overflow-hidden rounded border border-border bg-background shadow-8',\n )}\n >\n {hasMatches ? (\n renderListbox(false)\n ) : (\n <div\n aria-hidden=\"true\"\n className={cn(\n timePickerClassNames.emptyMessage,\n 'px-3 py-1.5 text-body-1 text-muted-foreground',\n )}\n >\n {statusMessage}\n </div>\n )}\n </div>\n </Portal>\n )}\n </div>\n </ListboxContext.Provider>\n );\n};\n\nTimePicker.displayName = 'TimePicker';\n"],"mappings":"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"}
1
+ {"version":3,"file":"TimePicker.mjs","names":["useId","useId$1","React","OPTION_CLASSES","TimePickerOption","useListboxOption","optionProps","cn","timePickerClassNames","selected","forcedColors","CheckIcon","label","defaultInvalidTimeLabel","format","defaultOutOfRangeLabel","min","max","displayTime","minutes","timeToMinutes","value","minutesToTime","matchesQuery","item","text","startsWithQuery","TimePicker","valueProp","sizeProp","appearanceProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","useInputLook","selectedValue","setSelectedValue","useControllable","defaultValue","onValueChange","next","stepValid","normalizeTimeStep","step","minMinutes","minTime","maxMinutes","maxTime","boundsValid","allOptions","generateTimeOptions","warnOnce","interactive","disabled","readOnly","openState","setOpen","openControlled","defaultOpen","onOpenChange","isClient","useIsClient","open","draft","setDraft","invalid","setInvalid","wasInteractive","setWasInteractive","seenValue","setSeenValue","query","openList","closeList","filter","exact","minutesToValue","getTypedActiveValue","needle","selectedInList","selectedValues","commitValue","commitDraft","rejectDraft","reason","onInvalidInput","clearDraft","hasMatches","expanded","lb","useListbox","displayLabel","showClear","clearable","statusMessage","labels","rootRef","inputRef","surfaceRef","rootRefs","useMergedRefs","ref","inputRefs","controlRef","useDismiss","usePopupPosition","surfaceRefs","setFloating","field","useFieldContext","validates","required","errorId","showOwnError","fieldProps","useFieldControl","joinIds","invalidLook","isInvalidLook","form","handleInputChange","event","handleKeyDown","composeEventHandlers","onKeyDown","flushSync","handleKeyUp","onKeyUp","handleInputClick","handleBlur","onBlur","handleExpandClick","handleClear","listboxLabelledBy","renderListbox","hidden","showExpand","showsExpandButton","expandIcon","errorMessage","listboxMounted","ListboxContext","size","appearance","className","setReference","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","PickerExpandButton","HiddenInput","Portal","floatingProps"],"sources":["../../../src/components/input/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { timePickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n disabledStyles,\n focusRing,\n forcedColors,\n inputAppearanceClasses,\n inputFocus,\n inputHeightClasses,\n inputInvalid,\n inputPaddingClasses,\n inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { ListboxContext, useListbox, useListboxOption } from '../../hooks/useListbox';\nimport type { ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { Portal } from '../portal/Portal';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport {\n DEFAULT_TIME_STEP,\n generateTimeOptions,\n minutesToTime,\n minutesToValue,\n normalizeTimeStep,\n timeToMinutes,\n} from './dateUtils';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n pickerButtonOffset,\n pickerEndPadding,\n pickerGlyphSize,\n pickerIconButtonClasses,\n} from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/* Option */\n/* ------------------------------------------------------------------ */\n\nconst OPTION_CLASSES =\n 'flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold';\n\ninterface TimePickerOptionProps {\n value: string;\n label: string;\n}\n\n/**\n * One time option. Memoized: it re-renders only when its own active/selected state changes (read\n * from the listbox store), so moving the highlight renders two options, not the whole list.\n */\nconst TimePickerOption = React.memo(function TimePickerOption({\n value,\n label,\n}: TimePickerOptionProps) {\n const { selected, optionProps } = useListboxOption<HTMLLIElement>({ value, label });\n return (\n <li\n {...optionProps}\n className={cn(\n timePickerClassNames.option,\n OPTION_CLASSES,\n selected && forcedColors.selectedContainer,\n )}\n >\n <span\n className={cn(\n timePickerClassNames.checkIcon,\n 'flex h-4 w-4 shrink-0 items-center justify-center',\n )}\n >\n {selected ? <CheckIcon size={12} /> : null}\n </span>\n {label}\n </li>\n );\n});\nTimePickerOption.displayName = 'TimePickerOption';\n\n/* ------------------------------------------------------------------ */\n/* TimePicker */\n/* ------------------------------------------------------------------ */\n\n/** Why typed text was not accepted (see {@link TimePickerProps.onInvalidInput}). */\nexport type TimePickerInvalidReason = 'unparseable' | 'out-of-range';\n\n/**\n * The TimePicker's built-in texts, for localization. Each member is optional and falls back to its\n * English default. The times themselves follow `format`.\n */\nexport interface TimePickerLabels {\n /** Name of the clear button.\n * @default 'Clear time'\n */\n clear?: string;\n /** Name of the expand button at the end of the input.\n * @default 'Show times'\n */\n expand?: string;\n /** Name of the list of times when the picker has no `aria-label`, `aria-labelledby` or Field\n * label to lend it.\n * @default 'Times'\n */\n list?: string;\n /** Status text (announced and shown in the open list) when `minTime`/`maxTime` leave no times.\n * @default 'No times available'\n */\n noTimes?: string;\n /** Status text (announced and shown in the open list) when the typed text matches no time.\n * @default 'No matching times'\n */\n noMatches?: string;\n /**\n * Message for text that is not a time. `format` is the display pattern (`'HH:mm'` or\n * `'h:mm AM'`).\n * @default (format) => `Enter a time in the format ${format}.`\n */\n invalidTime?: (format: string) => string;\n /**\n * Message for a time outside `minTime`/`maxTime`. The bounds are passed as the input shows times\n * (`format`); a bound that is not set is `undefined`.\n * @default (min, max) => `Enter a time between ${min} and ${max}.` (only `min`: `Enter a time on\n * or after ${min}.`; only `max`: `Enter a time on or before ${max}.`)\n */\n outOfRange?: (min: string | undefined, max: string | undefined) => string;\n}\n\nconst defaultInvalidTimeLabel = (format: string) => `Enter a time in the format ${format}.`;\n\nconst defaultOutOfRangeLabel = (min: string | undefined, max: string | undefined) => {\n if (min !== undefined && max !== undefined) return `Enter a time between ${min} and ${max}.`;\n if (min !== undefined) return `Enter a time on or after ${min}.`;\n return `Enter a time on or before ${max}.`;\n};\n\n/** Properties for the TimePicker component. */\nexport interface TimePickerProps extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue' | 'placeholder' | RoutedHandlers\n> {\n /** Controlled selected time in `HH:mm` (24-hour) format; `''` for no time. */\n value?: string;\n /**\n * Initial time for uncontrolled usage (`HH:mm`).\n * @default ''\n */\n defaultValue?: string;\n /** Called with the new `HH:mm` value (`''` when cleared) whenever the selected time changes. */\n onValueChange?: (value: string) => void;\n /**\n * @deprecated Use `onValueChange`. Still called with the new value (warns once in development).\n */\n onChange?: (value: string) => void;\n /**\n * Time display format of the input and the options.\n * @default '12h'\n */\n format?: '12h' | '24h';\n /**\n * Minutes between options. A non-finite or non-positive value falls back to 30 (development\n * warning); fractions are floored.\n * @default 30\n */\n step?: number;\n /**\n * Earliest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`.\n * @default '00:00'\n */\n minTime?: string;\n /**\n * Latest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`. Invalid or reversed bounds give no\n * options (development warning, \"No times available\", see `labels`).\n * @default '23:59'\n */\n maxTime?: string;\n /**\n * Placeholder text shown when no time is selected.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Whether the time picker is disabled and non-interactive.\n * @default false\n */\n disabled?: boolean;\n /**\n * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The time\n * list keeps its size.\n */\n size?: CoreSize;\n /**\n * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n */\n appearance?: InputAppearance;\n /**\n * Makes the input read-only: the list does not open and the value cannot change. Turning it (or\n * `disabled`) on while the user is typing drops the typed text.\n */\n readOnly?: boolean;\n /**\n * Whether to show a clear button when a time is selected (not shown while `readOnly`; shown\n * disabled while `disabled`). It is a tab stop after the input. Tab from erased text clears the\n * value before focus moves, so focus goes on past the clear button that disappears with it.\n * @default false\n */\n clearable?: boolean;\n /**\n * The glyph of the expand button at the end of the input (default: a chevron). The button\n * opens and closes the list without moving focus out of the input and is not a tab stop\n * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n * become the glyph, with a development warning).\n */\n expandIcon?: Slot<'span'>;\n /**\n * Controlled open state of the list (never shown while `disabled` or `readOnly`). The list\n * renders only in the browser: an open picker is closed in the server HTML and opens once it has\n * hydrated.\n */\n open?: boolean;\n /**\n * Initial open state of the list for uncontrolled usage. A picker that starts disabled or\n * read-only starts closed. The list renders only in the browser: it is closed in the server HTML\n * and opens once the picker has hydrated.\n * @default false\n */\n defaultOpen?: boolean;\n /** Called when the list opens or closes (only when the state changes). */\n onOpenChange?: (open: boolean) => void;\n /**\n * Called when edited text is not accepted on Enter or blur (once per edit): it is not a time\n * (`'unparseable'`) or lies outside `minTime`/`maxTime` (`'out-of-range'`). The text stays in the\n * input, which is marked `aria-invalid` and described by an error message (left to the\n * surrounding `Field` when it shows an error); Enter and leaving the input also close the list,\n * so it does not cover the message. Enter reports it again when pressed again.\n */\n onInvalidInput?: (text: string, reason: TimePickerInvalidReason) => void;\n /**\n * Names of the clear and expand buttons and of the list, the status texts of an empty list and\n * the error messages of rejected text, for localization. Unset members keep their English\n * defaults.\n */\n labels?: TimePickerLabels;\n /** Form field name: the `HH:mm` value is submitted under it (hidden input). */\n name?: string;\n /** Id of the `<form>` the value belongs to, when the picker is outside it. */\n form?: string;\n /**\n * Blocks form submission while no time is selected; sets `aria-required` on the input. Like a\n * native readonly input, a `readOnly` TimePicker does not block submission.\n */\n required?: boolean;\n /** Native `autocomplete` of the input. @default 'off' */\n autoComplete?: string;\n /** Native `maxlength` of the input. */\n maxLength?: number;\n /** Focus handler of the text input (the root keeps the other handlers). */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /** Blur handler of the text input. */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /** Key handler of the text input; `preventDefault()` skips the picker's own keys. */\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Key handler of the text input. */\n onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Ref to the text input (the `role=\"combobox\"` element); `ref` stays on the root. */\n controlRef?: React.Ref<HTMLInputElement>;\n /** Ref to the root element. */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction displayTime(value: string, format: '12h' | '24h'): string {\n const minutes = timeToMinutes(value);\n return Number.isNaN(minutes) ? value : minutesToTime(minutes, format);\n}\n\n/** Whether an option matches the (trimmed, lower-case) typed text: by label or `HH:mm` value. */\nfunction matchesQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().includes(text) || item.value.includes(text);\n}\n\n/** Whether an option's label or `HH:mm` value starts with the (trimmed, lower-case) typed text. */\nfunction startsWithQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().startsWith(text) || item.value.startsWith(text);\n}\n\n/**\n * A time input with a filterable list of times (APG editable combobox with list autocomplete).\n *\n * - Type to filter (by label or `HH:mm` value). A complete typed time (`2:00 PM`, `14:00`) makes\n * its own option active — not an earlier one that merely contains the text, such as `12:00 PM`\n * — and partial text makes the first option that starts with it active (`2:00 p` -> `2:00 PM`),\n * else the first one that contains it; Enter commits the active option. Enter or leaving the\n * field also commits a complete typed time that is not in the list (`9:15 AM`, `14:45`) when it\n * lies within `minTime`/`maxTime`, and erased text clears the value (as the clear button does);\n * Enter never submits the form with edited text, and both close the list. Other typed text is\n * kept: the input is marked invalid and an error message describes it (`onInvalidInput`,\n * reported once per edit) until the text is edited or replaced (an option, the clear button,\n * Escape, a form reset, a new value from the parent). Escape on a closed list reverts any edit,\n * erased text included, to the selected time.\n * - Click the input or the expand button at its end (a chevron, see `expandIcon`; not a tab stop,\n * and it leaves focus in the input), press ArrowDown/ArrowUp or type to open; the list opens\n * with every option and the selected one (when it is in the list) active and scrolled into\n * view. Without one, no option is active until ArrowDown/ArrowUp or typing, so Enter lets the\n * surrounding form submit. Escape, Tab, an outside press or focus leaving closes it. Typed text\n * kept after Escape closed the list still filters it when it reopens: a click resumes the option\n * typing made active, ArrowDown/ArrowUp start at the first/last match.\n * - `open`/`defaultOpen`/`onOpenChange` control the list. It closes when the picker becomes\n * disabled or read-only (uncontrolled `open`: it stays closed when the picker is enabled again),\n * and the text typed until then is dropped.\n * - Keys of an IME composition (its confirming Enter included) are left to the IME.\n * - `clearable` shows a clear button while a time is selected (not while read-only), a tab stop\n * after the input. Tab from erased text clears the value first, so focus moves on past the\n * picker instead of to the clear button that disappears.\n * - The value is `HH:mm` (24-hour) whatever the display `format`; values off the `step` grid or\n * outside the bounds are still displayed in `format`.\n * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own\n * prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as\n * `data-size` and `data-appearance` on the root `<div>`. The time list keeps its size.\n * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,\n * `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes\n * `autoComplete`, `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and\n * `enterKeyHint`. `ref`, `className`, `style`, other `aria-*` attributes and the remaining props\n * stay on the root `<div>`. Inside a `Field`, the input is labelled and described by it.\n * - `name`/`required` add a hidden input for native forms (`HH:mm`); the value resets with its form.\n * - The built-in names, status texts and error messages are English; `labels` localizes them.\n * - The open list renders only in the browser: an open list (`defaultOpen`, `open`) is closed in\n * the server HTML and opens once the picker has hydrated.\n */\nexport const TimePicker = (props: TimePickerProps) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange,\n onChange,\n format = '12h',\n step = DEFAULT_TIME_STEP,\n minTime = '00:00',\n maxTime = '23:59',\n placeholder = 'Select a time',\n disabled = false,\n size: sizeProp,\n appearance: appearanceProp,\n readOnly,\n clearable = false,\n expandIcon,\n open: openProp,\n defaultOpen,\n onOpenChange,\n onInvalidInput,\n labels,\n name,\n form,\n required,\n autoComplete = 'off',\n autoCapitalize,\n autoCorrect,\n maxLength,\n enterKeyHint,\n inputMode,\n spellCheck,\n autoFocus,\n tabIndex,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-errormessage': ariaErrorMessage,\n 'aria-details': ariaDetails,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n controlRef,\n className,\n ref,\n ...rest\n } = props;\n\n if (onChange !== undefined) warnDeprecated('TimePicker', 'onChange', 'onValueChange');\n\n const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n const [selectedValue, setSelectedValue] = useControllable<string>(\n valueProp,\n defaultValue ?? '',\n (next) => {\n onValueChange?.(next);\n onChange?.(next);\n },\n );\n\n /* ---- options, step and bounds ---------------------------------- */\n\n const stepValid = normalizeTimeStep(step).valid;\n const minMinutes = timeToMinutes(minTime);\n const maxMinutes = timeToMinutes(maxTime);\n const boundsValid =\n !Number.isNaN(minMinutes) && !Number.isNaN(maxMinutes) && minMinutes <= maxMinutes;\n const allOptions = React.useMemo(\n () => generateTimeOptions(step, minTime, maxTime, format),\n [step, minTime, maxTime, format],\n );\n\n // Once per invalid value and page (C-DEV), not once per instance and effect run.\n React.useEffect(() => {\n if (!stepValid) {\n warnOnce(\n `TimePicker:step:${String(step)}`,\n `TimePicker: \\`step\\` must be a positive number of minutes (received ${String(step)}); ` +\n `using ${DEFAULT_TIME_STEP}.`,\n );\n }\n }, [step, stepValid]);\n\n React.useEffect(() => {\n if (!boundsValid) {\n warnOnce(\n `TimePicker:bounds:${minTime}|${maxTime}`,\n `TimePicker: \\`minTime\\`/\\`maxTime\\` must be times such as \"09:00\", \"09:00:00\" or ` +\n `\"9:00 AM\" with minTime <= maxTime (received \"${minTime}\" / \"${maxTime}\"); no times are available.`,\n );\n }\n }, [minTime, maxTime, boundsValid]);\n\n /* ---- open state, draft text and query -------------------------- */\n\n const interactive = !disabled && !readOnly;\n const [openState, setOpen, openControlled] = useControllable<boolean>(\n openProp,\n // A picker that starts disabled or read-only never shows its list, so it starts closed (no\n // close to report later).\n (defaultOpen ?? false) && interactive,\n onOpenChange,\n );\n // The open list lives in a portal, which renders only in the browser: until then (the server\n // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n // aria-controls and aria-activedescendant never name a missing element.\n const isClient = useIsClient();\n const open = openState && interactive && isClient;\n // A list hidden because the picker became disabled or read-only is closed for good\n // (uncontrolled), so enabling the picker again does not bring it back; onOpenChange(false)\n // reports it (a consumer callback, so from an effect). A controlled `open` stays the parent's.\n React.useEffect(() => {\n if (!interactive && openState && !openControlled) setOpen(false);\n }, [interactive, openState, openControlled, setOpen]);\n /** Typed text; `null` shows the selected time's label (draft model). */\n const [draft, setDraft] = React.useState<string | null>(null);\n /** Why the typed text was rejected (it is kept and flagged); `null` while it is not. */\n const [invalid, setInvalid] = React.useState<TimePickerInvalidReason | null>(null);\n // Locking the picker while the user types drops the typed text and its error, so no later blur\n // commits it (adjusted during render, C-HOOKS).\n const [wasInteractive, setWasInteractive] = React.useState(interactive);\n if (wasInteractive !== interactive) {\n setWasInteractive(interactive);\n if (!interactive) {\n setDraft(null);\n setInvalid(null);\n }\n }\n // A new value from the parent replaces rejected text (the picker's own commits clear it\n // themselves), so the input never shows an error next to a valid value. Text the user is still\n // typing stays.\n const [seenValue, setSeenValue] = React.useState(selectedValue);\n if (seenValue !== selectedValue) {\n setSeenValue(selectedValue);\n if (invalid !== null) {\n setDraft(null);\n setInvalid(null);\n }\n }\n /**\n * Filter text: the typed text only, never the selected time's label, so opening without an edit\n * shows every option. Typed text kept while the list is closed (Escape) keeps filtering it, so\n * a reopened list shows what the input says.\n */\n const query = draft ?? '';\n\n const openList = () => {\n if (!interactive || open) return;\n setOpen(true);\n };\n const closeList = () => setOpen(false);\n\n // A complete time in any spelling the commit accepts (`2:00pm`, `09:00 AM`, `14:00:00`) keeps its\n // own option, so it stays listed and active, as Enter and blur commit it.\n const filter = React.useMemo(() => {\n const text = query.trim().toLowerCase();\n if (!text) return undefined;\n const minutes = timeToMinutes(text);\n const exact = Number.isNaN(minutes) ? null : minutesToValue(minutes);\n return (item: ListboxItem) => item.value === exact || matchesQuery(item, text);\n }, [query]);\n\n /**\n * The option that typing `text` makes active. A complete time (`2:00 PM`, `14:00`) activates its\n * own option, never another one that merely contains the text (`12:00 PM`); when it is not in\n * the list (off-grid or out of bounds) nothing is active, so Enter commits the typed time or\n * nothing. Partial text activates the first option whose label or value starts with it (`2:00 p`\n * -> `2:00 PM`, `2` -> `2:00 AM`, not `12:00 AM`), else the first option that contains it.\n */\n const getTypedActiveValue = (text: string): string | null => {\n const needle = text.trim().toLowerCase();\n if (!needle) return null;\n const minutes = timeToMinutes(text);\n if (!Number.isNaN(minutes)) {\n const exact = minutesToValue(minutes);\n return allOptions.some((item) => item.value === exact) ? exact : null;\n }\n const match =\n allOptions.find((item) => startsWithQuery(item, needle)) ??\n allOptions.find((item) => matchesQuery(item, needle));\n return match?.value ?? null;\n };\n\n // Opening without typing activates the selected option only when it is in the list. An empty,\n // off-grid or out-of-range value activates nothing (ArrowDown/ArrowUp start at the first/last\n // option), so Enter on a freshly opened list commits nothing and the surrounding form submits.\n const selectedInList =\n selectedValue !== '' && allOptions.some((item) => item.value === selectedValue);\n\n const selectedValues = React.useMemo(\n () => (selectedValue ? [selectedValue] : []),\n [selectedValue],\n );\n\n const commitValue = (next: string) => {\n setSelectedValue(next);\n setDraft(null);\n setInvalid(null);\n };\n\n /**\n * Commits the typed text: erased text clears the value, a complete time within the bounds selects\n * it. Returns why any other text is not accepted (it is kept), else `null`.\n */\n const commitDraft = (text: string): TimePickerInvalidReason | null => {\n if (!text.trim()) {\n commitValue('');\n return null;\n }\n const minutes = timeToMinutes(text);\n if (Number.isNaN(minutes)) return 'unparseable';\n if (!boundsValid || minutes < minMinutes || minutes > maxMinutes) return 'out-of-range';\n commitValue(minutesToValue(minutes));\n return null;\n };\n\n /** Keeps rejected text, flags it and reports it. */\n const rejectDraft = (text: string, reason: TimePickerInvalidReason) => {\n setInvalid(reason);\n onInvalidInput?.(text, reason);\n };\n\n const clearDraft = () => {\n setDraft(null);\n setInvalid(null);\n };\n\n // The listbox counts as open only while it shows options: with no match nothing is displayed,\n // so `aria-expanded` is false and Escape reverts the typed text instead of closing an empty list.\n const hasMatches = React.useMemo(\n () => (filter ? allOptions.some(filter) : allOptions.length > 0),\n [allOptions, filter],\n );\n const expanded = open && hasMatches;\n\n const lb = useListbox({\n open: expanded,\n onOpenChange: (next) => (next ? openList() : closeList()),\n mode: 'editable',\n selectedValues,\n onSelect: (next) => commitValue(next),\n items: allOptions,\n filter,\n // Typing sets the active option itself (getTypedActiveValue in handleInputChange), so an exact\n // typed time wins over an earlier substring match; highlightOnFilter would force the first one.\n autoHighlight: draft === null && selectedInList ? 'selected' : false,\n idPrefix: 'timepicker-listbox',\n // Escape on a closed list reverts typed text (erased text: handleKeyDown); without a draft it is\n // left to enclosing layers.\n onClearDraft:\n draft !== null\n ? () => {\n clearDraft();\n closeList();\n }\n : undefined,\n });\n\n const displayLabel = selectedValue\n ? (lb.getItem(selectedValue)?.label ?? displayTime(selectedValue, format))\n : '';\n // Read-only pickers offer no clear action (the value cannot change).\n const showClear = clearable && !readOnly && selectedValue !== '';\n const statusMessage =\n open && !hasMatches\n ? allOptions.length === 0\n ? (labels?.noTimes ?? 'No times available')\n : (labels?.noMatches ?? 'No matching times')\n : '';\n\n /* ---- elements, dismissal, positioning --------------------------- */\n\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n const rootRefs = useMergedRefs<HTMLDivElement>(ref, rootRef);\n const inputRefs = useMergedRefs<HTMLInputElement>(controlRef, inputRef);\n\n const { layerId } = useDismiss({\n open,\n onDismiss: closeList,\n refs: [surfaceRef, rootRef],\n anchorRef: inputRef,\n kind: 'listbox',\n focusOutside: true,\n });\n\n const { setReference, setFloating, floatingProps } = usePopupPosition({\n open,\n side: 'bottom',\n align: 'start',\n matchReferenceWidth: true,\n fitViewport: true,\n });\n const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n /* ---- forms and Field ------------------------------------------- */\n\n const field = useFieldContext();\n const isRequired = required ?? field?.required ?? false;\n // Like a native readonly input, a read-only picker is barred from constraint validation (the\n // user could not fix it); its value is still submitted.\n const validates = isRequired && !readOnly;\n const errorId = useId('timepicker-error');\n // A Field that shows an error describes the input itself (its message is not repeated).\n const showOwnError = invalid !== null && !field?.hasErrorMessage;\n const fieldProps = useFieldControl({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': joinIds(ariaDescribedBy, showOwnError ? errorId : undefined),\n 'aria-invalid': invalid !== null ? true : ariaInvalid,\n // An explicit `required={false}` wins over a required Field, so aria-required matches\n // `isRequired`.\n 'aria-required': ariaRequired ?? required,\n });\n const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n useFormReset(\n inputRef,\n () => {\n setSelectedValue(defaultValue ?? '');\n clearDraft();\n closeList();\n },\n form,\n );\n\n /* ---- handlers --------------------------------------------------- */\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return;\n const text = event.target.value;\n setDraft(text);\n setInvalid(null);\n if (!open) setOpen(true);\n // Every edit re-ranks the highlight (it opens the list in the same update when closed).\n lb.setActiveValue(getTypedActiveValue(text));\n };\n\n const handleKeyDown = composeEventHandlers(\n onKeyDown,\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!interactive) return;\n // Enter commits the active option: the exact typed time, the first match of partial text,\n // or the option moved to with the arrow keys.\n lb.onKeyDown(event);\n // Keys that belong to an IME composition (its confirming Enter) are left to the IME, as\n // useListbox leaves them.\n if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n if (event.key === 'Escape' && draft === '' && displayLabel !== '') {\n // Erased text: useListbox calls onClearDraft only while the input has text, so Escape on a\n // closed list restores the selected time here (an open list was closed above). With nothing\n // to restore, Escape is left to enclosing layers.\n event.preventDefault();\n clearDraft();\n closeList();\n return;\n }\n if (event.key === 'Enter' && draft !== null) {\n // Edited text is committed (a complete time within the bounds; erased text clears) or kept\n // and flagged (reported on every Enter), never submitted with the form; untouched text\n // lets Enter submit. The list closes either way, so it does not cover the error message.\n event.preventDefault();\n const reason = commitDraft(draft);\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n }\n if (event.key === 'Tab' && !event.shiftKey && showClear && draft !== null && !draft.trim()) {\n // Erased text clears the value, and with it the clear button, the next tab stop. It is\n // settled before Tab moves focus (the blur would settle it while focus moves to that\n // button), so focus moves on to the tab stop after the picker instead of dropping to\n // <body> with the button (C-DISABLED).\n flushSync(() => commitDraft(draft));\n }\n if (event.key === 'Tab' && open && !expanded) {\n // useListbox closes the list on Tab only while it shows options. The status text shown\n // instead ('No matching times', 'No times available') closes too: the clear button, the\n // next tab stop, is inside the picker, so focus moving there does not dismiss it.\n closeList();\n }\n },\n );\n const handleKeyUp = composeEventHandlers(onKeyUp, lb.onKeyUp);\n\n const handleInputClick = () => {\n if (!interactive || open) return;\n openList();\n // Typed text kept after Escape resumes where typing left it: its matches (the filter) and the\n // option typing made active, so Enter commits the same time as before the list closed.\n if (draft !== null) lb.setActiveValue(getTypedActiveValue(draft));\n };\n\n const handleBlur = composeEventHandlers(onBlur, () => {\n if (!interactive || draft === null) return;\n // Leaving the input settles the edit as Enter does: rejected text is kept (text that was\n // already rejected is not reported again) and the list closes either way, so it does not cover\n // the error message.\n const reason = invalid === null ? commitDraft(draft) : null;\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n });\n\n // The expand button opens the list as a click in the input does (typed text kept after Escape\n // resumes its matches) and closes it; focus stays in (or returns to) the input.\n const handleExpandClick = () => {\n if (!interactive) return;\n if (open) closeList();\n else handleInputClick();\n inputRef.current?.focus();\n };\n\n const handleClear = () => {\n if (!interactive) return;\n commitValue('');\n inputRef.current?.focus();\n };\n\n /* ---- render ---------------------------------------------------- */\n\n const listboxLabelledBy = joinIds(ariaLabelledBy, field?.labelId);\n const renderListbox = (hidden: boolean) => (\n <ul\n {...lb.getListboxProps()}\n aria-labelledby={listboxLabelledBy}\n aria-label={listboxLabelledBy ? undefined : (ariaLabel ?? labels?.list ?? 'Times')}\n hidden={hidden || undefined}\n className={cn(\n timePickerClassNames.listbox,\n 'max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden',\n )}\n >\n {lb.items.map((item) => (\n <TimePickerOption key={item.value} value={item.value} label={item.label} />\n ))}\n </ul>\n );\n\n const showExpand = showsExpandButton(expandIcon);\n\n let errorMessage = '';\n if (showOwnError && invalid === 'unparseable') {\n errorMessage = (labels?.invalidTime ?? defaultInvalidTimeLabel)(\n format === '24h' ? 'HH:mm' : 'h:mm AM',\n );\n } else if (showOwnError) {\n // Bounds the consumer did not set are `undefined`, not the defaults.\n errorMessage = (labels?.outOfRange ?? defaultOutOfRangeLabel)(\n props.minTime === undefined ? undefined : displayTime(minTime, format),\n props.maxTime === undefined ? undefined : displayTime(maxTime, format),\n );\n }\n // aria-controls must name a listbox that is actually mounted. The closed list is inline only\n // while options exist; the open list is mounted only while something matches.\n const listboxMounted = open ? hasMatches : allOptions.length > 0;\n\n return (\n <ListboxContext.Provider value={lb.context}>\n <div\n data-size={size}\n data-appearance={appearance}\n {...rest}\n ref={rootRefs}\n className={cn(timePickerClassNames.root, 'relative inline-flex flex-col', className)}\n >\n <div ref={setReference} className=\"relative flex items-center\">\n <input\n ref={inputRefs}\n type=\"text\"\n {...lb.getComboboxProps()}\n aria-controls={listboxMounted ? lb.listboxId : undefined}\n {...fieldProps}\n aria-errormessage={ariaErrorMessage}\n aria-details={ariaDetails}\n value={draft ?? displayLabel}\n onChange={handleInputChange}\n onClick={handleInputClick}\n onFocus={onFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n maxLength={maxLength}\n enterKeyHint={enterKeyHint}\n inputMode={inputMode}\n spellCheck={spellCheck}\n autoFocus={autoFocus}\n tabIndex={tabIndex}\n className={cn(\n timePickerClassNames.input,\n inputHeightClasses[size],\n 'w-full',\n inputPaddingClasses[size],\n inputTextClasses[size],\n inputAppearanceClasses[appearance],\n 'text-foreground placeholder:text-muted-foreground',\n inputFocus,\n disabledStyles,\n invalidLook && inputInvalid,\n pickerEndPadding(Number(showClear) + Number(showExpand), size),\n )}\n />\n {showClear && (\n <button\n type=\"button\"\n aria-label={labels?.clear ?? 'Clear time'}\n disabled={disabled}\n // Keeps focus (and an open list) on the input while the pointer clears it.\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n className={cn(\n timePickerClassNames.clearButton,\n pickerIconButtonClasses(size, appearance),\n pickerButtonOffset(size, showExpand ? 2 : 1),\n focusRing,\n disabledStyles,\n )}\n >\n <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n </button>\n )}\n {showExpand && (\n <PickerExpandButton\n component=\"TimePicker\"\n expandIcon={expandIcon}\n label={labels?.expand ?? 'Show times'}\n expanded={expanded}\n listboxId={lb.listboxId}\n disabled={disabled || !!readOnly}\n onToggle={handleExpandClick}\n size={size}\n appearance={appearance}\n className={timePickerClassNames.expandButton}\n iconClassName={timePickerClassNames.expandIcon}\n />\n )}\n </div>\n {showOwnError && (\n <p\n id={errorId}\n role=\"alert\"\n className={cn(timePickerClassNames.errorMessage, 'mt-1 text-caption-1 text-error')}\n >\n {errorMessage}\n </p>\n )}\n {!open && allOptions.length > 0 && renderListbox(true)}\n <span role=\"status\" className=\"sr-only\">\n {statusMessage}\n </span>\n <HiddenInput\n name={name}\n form={form}\n disabled={disabled}\n value={selectedValue}\n type=\"text\"\n required={validates}\n onInvalid={() => inputRef.current?.focus()}\n />\n {open && (\n <Portal layerId={layerId}>\n <div\n ref={surfaceRefs}\n {...floatingProps}\n data-state=\"open\"\n className={cn(\n timePickerClassNames.surface,\n 'flex flex-col overflow-hidden rounded border border-border bg-background shadow-8',\n )}\n >\n {hasMatches ? (\n renderListbox(false)\n ) : (\n <div\n aria-hidden=\"true\"\n className={cn(\n timePickerClassNames.emptyMessage,\n 'px-3 py-1.5 text-body-1 text-muted-foreground',\n )}\n >\n {statusMessage}\n </div>\n )}\n </div>\n </Portal>\n )}\n </div>\n </ListboxContext.Provider>\n );\n};\n\nTimePicker.displayName = 'TimePicker';\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/children.cjs");let n=require("react");n=e.__toESM(n,1);var r=Symbol.for(`wave.fieldLabel`);function i(e){return e[r]=!0,e}function a(e){if(!n.isValidElement(e))return!1;let i=t.getElementType(e);return(typeof i==`function`||typeof i==`object`&&!!i)&&i[r]===!0}exports.FIELD_LABEL=r,exports.isFieldLabelElement=a,exports.markFieldLabel=i;
2
+ //# sourceMappingURL=fieldLabel.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fieldLabel.cjs","names":["React","getElementType","require_runtime","require_children","react","FIELD_LABEL","markFieldLabel","component","isFieldLabelElement","node","type"],"sources":["../../../src/components/input/fieldLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getElementType } from '../../lib/children';\nimport type { CoreSize, TextWeight } from '../../lib/types';\n\n/**\n * Marks the components whose element Field renders as its label instead of wrapping it in its own\n * `<label>` (Label, InfoLabel). A marker, not an import, so that Field never pulls InfoLabel's\n * overlay code into a bundle. Internal.\n */\nexport const FIELD_LABEL: symbol = Symbol.for('wave.fieldLabel');\n\n/** The props Field gives a label element (each only when the element does not set it). */\nexport interface FieldLabelElementProps {\n id?: string;\n htmlFor?: string;\n required?: boolean | React.ReactNode;\n size?: CoreSize;\n weight?: TextWeight;\n className?: string;\n}\n\n/** Marks `component` as a Field label element; call it next to `displayName`. */\nexport function markFieldLabel<T extends object>(component: T): T {\n (component as Record<symbol, unknown>)[FIELD_LABEL] = true;\n return component;\n}\n\n/** Whether `node` is an element of a marked component (lazy client references resolved). */\nexport function isFieldLabelElement(\n node: React.ReactNode,\n): node is React.ReactElement<FieldLabelElementProps> {\n if (!React.isValidElement(node)) return false;\n const type = getElementType(node);\n return (\n (typeof type === 'function' || (typeof type === 'object' && type !== null)) &&\n (type as Record<symbol, unknown>)[FIELD_LABEL] === true\n );\n}\n"],"mappings":"iJASA,IAAaK,EAAsB,OAAO,IAAI,iBAAiB,EAa/D,SAAgBC,EAAiC,EAAiB,CAEhE,MADA,GAAuCD,GAAe,GAC/CE,CACT,CAGA,SAAgBC,EACd,EACoD,CACpD,GAAI,CAACR,EAAM,eAAeS,CAAI,EAAG,MAAO,GACxC,IAAMC,EAAOT,EAAAA,eAAeQ,CAAI,EAChC,OACG,OAAOC,GAAS,YAAe,OAAOA,GAAS,YAAYA,IAC3DA,EAAiCL,KAAiB,EAEvD"}
@@ -0,0 +1,17 @@
1
+ "use client";
2
+ import { getElementType as e } from "../../lib/children.mjs";
3
+ import * as t from "react";
4
+ //#region src/components/input/fieldLabel.ts
5
+ var n = Symbol.for("wave.fieldLabel");
6
+ function r(e) {
7
+ return e[n] = !0, e;
8
+ }
9
+ function i(r) {
10
+ if (!t.isValidElement(r)) return !1;
11
+ let i = e(r);
12
+ return (typeof i == "function" || typeof i == "object" && !!i) && i[n] === !0;
13
+ }
14
+ //#endregion
15
+ export { n as FIELD_LABEL, i as isFieldLabelElement, r as markFieldLabel };
16
+
17
+ //# sourceMappingURL=fieldLabel.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fieldLabel.mjs","names":["React","FIELD_LABEL","markFieldLabel","component","isFieldLabelElement","node","type","getElementType"],"sources":["../../../src/components/input/fieldLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getElementType } from '../../lib/children';\nimport type { CoreSize, TextWeight } from '../../lib/types';\n\n/**\n * Marks the components whose element Field renders as its label instead of wrapping it in its own\n * `<label>` (Label, InfoLabel). A marker, not an import, so that Field never pulls InfoLabel's\n * overlay code into a bundle. Internal.\n */\nexport const FIELD_LABEL: symbol = Symbol.for('wave.fieldLabel');\n\n/** The props Field gives a label element (each only when the element does not set it). */\nexport interface FieldLabelElementProps {\n id?: string;\n htmlFor?: string;\n required?: boolean | React.ReactNode;\n size?: CoreSize;\n weight?: TextWeight;\n className?: string;\n}\n\n/** Marks `component` as a Field label element; call it next to `displayName`. */\nexport function markFieldLabel<T extends object>(component: T): T {\n (component as Record<symbol, unknown>)[FIELD_LABEL] = true;\n return component;\n}\n\n/** Whether `node` is an element of a marked component (lazy client references resolved). */\nexport function isFieldLabelElement(\n node: React.ReactNode,\n): node is React.ReactElement<FieldLabelElementProps> {\n if (!React.isValidElement(node)) return false;\n const type = getElementType(node);\n return (\n (typeof type === 'function' || (typeof type === 'object' && type !== null)) &&\n (type as Record<symbol, unknown>)[FIELD_LABEL] === true\n );\n}\n"],"mappings":";;;;AASA,IAAaC,IAAsB,OAAO,IAAI,iBAAiB;AAa/D,SAAgBC,EAAiC,GAAiB;CAEhE,OADA,EAAuCD,KAAe,IAC/CE;AACT;AAGA,SAAgBC,EACd,GACoD;CACpD,IAAI,CAACJ,EAAM,eAAeK,CAAI,GAAG,OAAO;CACxC,IAAMC,IAAOC,EAAeF,CAAI;CAChC,QACG,OAAOC,KAAS,cAAe,OAAOA,KAAS,cAAYA,MAC3DA,EAAiCL,OAAiB;AAEvD"}
@@ -0,0 +1,2 @@
1
+ "use client";const e=require("../../hooks/useFieldControl.cjs"),t=require("../provider/WaveProvider.cjs");var n=[`small`,`medium`,`large`],r=[`outline`,`underline`,`filled-darker`,`filled-lighter`];function i(i,a,o={}){let s=e.useFieldContext(),{inputDefaults:c}=t.useWaveTheme(),l=o.sizes??n,u=e=>e!==void 0&&l.includes(e),d=e=>typeof e==`string`&&r.includes(e);return{size:(u(i)?i:void 0)??(u(s?.size)?s.size:void 0)??(u(c.size)?c.size:void 0)??o.defaultSize??`medium`,appearance:(d(a)?a:void 0)??(d(c.appearance)?c.appearance:void 0)??`outline`}}function a(e){return typeof e==`number`?e:typeof e==`string`&&/^\d+$/.test(e)?Number(e):void 0}exports.legacyNativeSize=a,exports.useInputLook=i;
2
+ //# sourceMappingURL=inputLook.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inputLook.cjs","names":["useFieldContext","useWaveTheme","require_useFieldControl","require_WaveProvider","CORE_SIZES","APPEARANCES","useInputLook","field","sizes","options","fits","candidate","isAppearance","size","inputDefaults","appearance","legacyNativeSize"],"sources":["../../../src/components/input/inputLook.ts"],"sourcesContent":["import type { CoreSize, InputAppearance, Size } from '../../lib/types';\nimport { useFieldContext } from '../../hooks/useFieldControl';\nimport { useWaveTheme } from '../provider/WaveProvider';\n\nconst CORE_SIZES: readonly CoreSize[] = ['small', 'medium', 'large'];\nconst APPEARANCES: readonly string[] = [\n 'outline',\n 'underline',\n 'filled-darker',\n 'filled-lighter',\n] satisfies readonly InputAppearance[];\n\n/** Options of {@link useInputLook}. */\nexport interface InputLookOptions<S extends Size> {\n /**\n * The sizes the control supports; an own, Field or provider size outside them is skipped.\n * @default the three core sizes (`small`, `medium`, `large`)\n */\n sizes?: readonly S[];\n /**\n * The size when nothing else applies. Pass it when `sizes` leaves out `medium`: the fallback is\n * not checked against `sizes`.\n * @default 'medium'\n */\n defaultSize?: S;\n}\n\n/**\n * The size and appearance a text control or picker renders (Phase 4 D6): its own props, then the\n * surrounding Field's `size`, then `WaveProvider inputDefaults`, then the defaults (`medium`,\n * `outline`). `undefined` props fall through like absent ones, and so do values outside the\n * unions (from untyped code: plain JS, CMS config, an untyped `inputDefaults`): an own or provider\n * size outside `sizes`, or an appearance other than the four, is skipped, so the returned values\n * (and the `data-size`/`data-appearance` attributes built from them) are always supported ones.\n *\n * @internal Not exported from the package.\n */\nexport function useInputLook<S extends Size = CoreSize>(\n size: S | undefined,\n appearance: InputAppearance | undefined,\n options: InputLookOptions<S> = {},\n): { size: S; appearance: InputAppearance } {\n const field = useFieldContext();\n const { inputDefaults } = useWaveTheme();\n const sizes = (options.sizes ?? CORE_SIZES) as readonly Size[];\n const fits = (candidate: Size | undefined): candidate is S =>\n candidate !== undefined && sizes.includes(candidate);\n const isAppearance = (candidate: unknown): candidate is InputAppearance =>\n typeof candidate === 'string' && APPEARANCES.includes(candidate);\n const resolvedSize =\n (fits(size) ? size : undefined) ??\n (fits(field?.size) ? field.size : undefined) ??\n (fits(inputDefaults.size) ? inputDefaults.size : undefined) ??\n options.defaultSize ??\n ('medium' as S);\n const resolvedAppearance =\n (isAppearance(appearance) ? appearance : undefined) ??\n (isAppearance(inputDefaults.appearance) ? inputDefaults.appearance : undefined) ??\n 'outline';\n return { size: resolvedSize, appearance: resolvedAppearance };\n}\n\n/**\n * The numeric legacy form of `size` on Input and Select (the native attribute, deprecated in\n * favour of `htmlSize`): a number, or a string of digits only, which untyped code wrote HTML style\n * before 0.9 (`size=\"20\"`). `undefined` for anything else, which `useInputLook` then resolves as a\n * design size.\n *\n * @internal Not exported from the package.\n */\nexport function legacyNativeSize(size: unknown): number | undefined {\n if (typeof size === 'number') return size;\n return typeof size === 'string' && /^\\d+$/.test(size) ? Number(size) : undefined;\n}\n"],"mappings":"0GAIA,IAAMI,EAAkC,CAAC,QAAS,SAAU,OAAO,EAC7DC,EAAiC,CACrC,UACA,YACA,gBACA,gBACF,EA2BA,SAAgBC,EACd,EACA,EACA,EAA+B,CAAC,EACU,CAC1C,IAAMC,EAAQP,EAAAA,gBAAgB,EACxB,CAAE,iBAAkBC,EAAAA,aAAa,EACjCO,EAASC,EAAQ,OAASL,EAC1BM,EAAQ,GACZC,IAAc,IAAA,IAAaH,EAAM,SAASG,CAAS,EAC/CC,EAAgB,GACpB,OAAOD,GAAc,UAAYN,EAAY,SAASM,CAAS,EAWjE,MAAO,CAAE,MATND,EAAKG,CAAI,EAAIA,EAAO,IAAA,MACpBH,EAAKH,GAAO,IAAI,EAAIA,EAAM,KAAO,IAAA,MACjCG,EAAKI,EAAc,IAAI,EAAIA,EAAc,KAAO,IAAA,KACjDL,EAAQ,aACP,SAK0B,YAH1BG,EAAaG,CAAU,EAAIA,EAAa,IAAA,MACxCH,EAAaE,EAAc,UAAU,EAAIA,EAAc,WAAa,IAAA,KACrE,SAC0D,CAC9D,CAUA,SAAgBE,EAAiB,EAAmC,CAElE,OADI,OAAOH,GAAS,SAAiBA,EAC9B,OAAOA,GAAS,UAAY,QAAQ,KAAKA,CAAI,EAAI,OAAOA,CAAI,EAAI,IAAA,EACzE"}
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { useFieldContext as e } from "../../hooks/useFieldControl.mjs";
3
+ import { useWaveTheme as t } from "../provider/WaveProvider.mjs";
4
+ //#region src/components/input/inputLook.ts
5
+ var n = [
6
+ "small",
7
+ "medium",
8
+ "large"
9
+ ], r = [
10
+ "outline",
11
+ "underline",
12
+ "filled-darker",
13
+ "filled-lighter"
14
+ ];
15
+ function i(i, a, o = {}) {
16
+ let s = e(), { inputDefaults: c } = t(), l = o.sizes ?? n, u = (e) => e !== void 0 && l.includes(e), d = (e) => typeof e == "string" && r.includes(e);
17
+ return {
18
+ size: (u(i) ? i : void 0) ?? (u(s?.size) ? s.size : void 0) ?? (u(c.size) ? c.size : void 0) ?? o.defaultSize ?? "medium",
19
+ appearance: (d(a) ? a : void 0) ?? (d(c.appearance) ? c.appearance : void 0) ?? "outline"
20
+ };
21
+ }
22
+ function a(e) {
23
+ return typeof e == "number" ? e : typeof e == "string" && /^\d+$/.test(e) ? Number(e) : void 0;
24
+ }
25
+ //#endregion
26
+ export { a as legacyNativeSize, i as useInputLook };
27
+
28
+ //# sourceMappingURL=inputLook.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inputLook.mjs","names":["CORE_SIZES","APPEARANCES","useInputLook","field","useFieldContext","useWaveTheme","sizes","options","fits","candidate","isAppearance","size","inputDefaults","appearance","legacyNativeSize"],"sources":["../../../src/components/input/inputLook.ts"],"sourcesContent":["import type { CoreSize, InputAppearance, Size } from '../../lib/types';\nimport { useFieldContext } from '../../hooks/useFieldControl';\nimport { useWaveTheme } from '../provider/WaveProvider';\n\nconst CORE_SIZES: readonly CoreSize[] = ['small', 'medium', 'large'];\nconst APPEARANCES: readonly string[] = [\n 'outline',\n 'underline',\n 'filled-darker',\n 'filled-lighter',\n] satisfies readonly InputAppearance[];\n\n/** Options of {@link useInputLook}. */\nexport interface InputLookOptions<S extends Size> {\n /**\n * The sizes the control supports; an own, Field or provider size outside them is skipped.\n * @default the three core sizes (`small`, `medium`, `large`)\n */\n sizes?: readonly S[];\n /**\n * The size when nothing else applies. Pass it when `sizes` leaves out `medium`: the fallback is\n * not checked against `sizes`.\n * @default 'medium'\n */\n defaultSize?: S;\n}\n\n/**\n * The size and appearance a text control or picker renders (Phase 4 D6): its own props, then the\n * surrounding Field's `size`, then `WaveProvider inputDefaults`, then the defaults (`medium`,\n * `outline`). `undefined` props fall through like absent ones, and so do values outside the\n * unions (from untyped code: plain JS, CMS config, an untyped `inputDefaults`): an own or provider\n * size outside `sizes`, or an appearance other than the four, is skipped, so the returned values\n * (and the `data-size`/`data-appearance` attributes built from them) are always supported ones.\n *\n * @internal Not exported from the package.\n */\nexport function useInputLook<S extends Size = CoreSize>(\n size: S | undefined,\n appearance: InputAppearance | undefined,\n options: InputLookOptions<S> = {},\n): { size: S; appearance: InputAppearance } {\n const field = useFieldContext();\n const { inputDefaults } = useWaveTheme();\n const sizes = (options.sizes ?? CORE_SIZES) as readonly Size[];\n const fits = (candidate: Size | undefined): candidate is S =>\n candidate !== undefined && sizes.includes(candidate);\n const isAppearance = (candidate: unknown): candidate is InputAppearance =>\n typeof candidate === 'string' && APPEARANCES.includes(candidate);\n const resolvedSize =\n (fits(size) ? size : undefined) ??\n (fits(field?.size) ? field.size : undefined) ??\n (fits(inputDefaults.size) ? inputDefaults.size : undefined) ??\n options.defaultSize ??\n ('medium' as S);\n const resolvedAppearance =\n (isAppearance(appearance) ? appearance : undefined) ??\n (isAppearance(inputDefaults.appearance) ? inputDefaults.appearance : undefined) ??\n 'outline';\n return { size: resolvedSize, appearance: resolvedAppearance };\n}\n\n/**\n * The numeric legacy form of `size` on Input and Select (the native attribute, deprecated in\n * favour of `htmlSize`): a number, or a string of digits only, which untyped code wrote HTML style\n * before 0.9 (`size=\"20\"`). `undefined` for anything else, which `useInputLook` then resolves as a\n * design size.\n *\n * @internal Not exported from the package.\n */\nexport function legacyNativeSize(size: unknown): number | undefined {\n if (typeof size === 'number') return size;\n return typeof size === 'string' && /^\\d+$/.test(size) ? Number(size) : undefined;\n}\n"],"mappings":";;;;AAIA,IAAMA,IAAkC;CAAC;CAAS;CAAU;AAAO,GAC7DC,IAAiC;CACrC;CACA;CACA;CACA;AACF;AA2BA,SAAgBC,EACd,GACA,GACA,IAA+B,CAAC,GACU;CAC1C,IAAMC,IAAQC,EAAgB,GACxB,EAAE,qBAAkBC,EAAa,GACjCC,IAASC,EAAQ,SAASP,GAC1BQ,KAAQ,MACZC,MAAc,KAAA,KAAaH,EAAM,SAASG,CAAS,GAC/CC,KAAgB,MACpB,OAAOD,KAAc,YAAYR,EAAY,SAASQ,CAAS;CAWjE,OAAO;EAAE,OATND,EAAKG,CAAI,IAAIA,IAAO,KAAA,OACpBH,EAAKL,GAAO,IAAI,IAAIA,EAAM,OAAO,KAAA,OACjCK,EAAKI,EAAc,IAAI,IAAIA,EAAc,OAAO,KAAA,MACjDL,EAAQ,eACP;EAK0B,aAH1BG,EAAaG,CAAU,IAAIA,IAAa,KAAA,OACxCH,EAAaE,EAAc,UAAU,IAAIA,EAAc,aAAa,KAAA,MACrE;CAC0D;AAC9D;AAUA,SAAgBE,EAAiB,GAAmC;CAElE,OADI,OAAOH,KAAS,WAAiBA,IAC9B,OAAOA,KAAS,YAAY,QAAQ,KAAKA,CAAI,IAAI,OAAOA,CAAI,IAAI,KAAA;AACzE"}
@@ -1,2 +1,2 @@
1
- "use client";var e=`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`;function t(e){return e>=2?`pe-14`:e===1?`pe-8`:void 0}exports.PICKER_ICON_BUTTON_CLASSES=e,exports.pickerEndPadding=t;
1
+ "use client";const e=require("../../lib/cn.cjs"),t=require("../../lib/styles.cjs");var n=`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`,r={small:e.cn(`size-5`,t.hitAreaLayer),medium:``,large:`size-8`};function i(t=`medium`,i=`outline`){return e.cn(n,r[t],i===`filled-darker`&&`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`)}var a={small:[`end-1`,`end-7`],medium:[`end-1`,`end-7`],large:[`end-1`,`end-9`]};function o(e,t){return a[e][t-1]}var s={small:[`pe-7`,`pe-13`],medium:[`pe-8`,`pe-14`],large:[`pe-10`,`pe-18`]},c={small:{chevron:12,icon:12},medium:{chevron:12,icon:16},large:{chevron:16,icon:20}};function l(e,t){return c[e][t]}function u(e,t=`medium`){if(!(e<=0))return s[t][+(e>=2)]}exports.PICKER_ICON_BUTTON_CLASSES=n,exports.pickerButtonOffset=o,exports.pickerEndPadding=u,exports.pickerGlyphSize=l,exports.pickerIconButtonClasses=i;
2
2
  //# sourceMappingURL=pickerStyles.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"pickerStyles.cjs","names":["PICKER_ICON_BUTTON_CLASSES","pickerEndPadding","buttons"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n 'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: `pe-8` for one\n * button, `pe-14` for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number): string | undefined {\n if (buttons >= 2) return 'pe-14';\n return buttons === 1 ? 'pe-8' : undefined;\n}\n"],"mappings":"aAWA,IAAaA,EACX,+MAMF,SAAgBC,EAAiB,EAAqC,CAEpE,OADIC,GAAW,EAAU,QAClBA,IAAY,EAAI,OAAS,IAAA,EAClC"}
1
+ {"version":3,"file":"pickerStyles.cjs","names":["cn","hitAreaLayer","require_cn","require_styles","PICKER_ICON_BUTTON_CLASSES","BUTTON_BOX","pickerIconButtonClasses","size","appearance","BUTTON_OFFSETS","pickerButtonOffset","position","END_PADDINGS","GLYPHS","pickerGlyphSize","kind","pickerEndPadding"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\nimport { cn } from '../../lib/cn';\nimport { hitAreaLayer } from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n 'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/** The button box of each size: 20px with a 24px hit layer, 24px (the 0.7 box) or 32px. */\nconst BUTTON_BOX: Readonly<Record<CoreSize, string>> = {\n small: cn('size-5', hitAreaLayer),\n medium: '',\n large: 'size-8',\n};\n\n/**\n * The classes of a picker's icon button at a size and appearance (Phase 4 D11): the 0.7 classes,\n * the size's box and, on `filled-darker`, a hover fill one step darker than the field.\n */\nexport function pickerIconButtonClasses(\n size: CoreSize = 'medium',\n appearance: InputAppearance = 'outline',\n): string {\n return cn(\n PICKER_ICON_BUTTON_CLASSES,\n BUTTON_BOX[size],\n appearance === 'filled-darker' && 'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n );\n}\n\nconst BUTTON_OFFSETS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n small: ['end-1', 'end-7'],\n medium: ['end-1', 'end-7'],\n large: ['end-1', 'end-9'],\n};\n\n/** The inline-end offset of a picker's first or second icon button (the second sits before it). */\nexport function pickerButtonOffset(size: CoreSize, position: 1 | 2): string {\n return BUTTON_OFFSETS[size][position - 1];\n}\n\nconst END_PADDINGS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n small: ['pe-7', 'pe-13'],\n medium: ['pe-8', 'pe-14'],\n large: ['pe-10', 'pe-18'],\n};\n\n/** The glyph sizes of each size: the chevron, and the other icons (clear, calendar). */\nconst GLYPHS: Readonly<Record<CoreSize, { chevron: number; icon: number }>> = {\n small: { chevron: 12, icon: 12 },\n medium: { chevron: 12, icon: 16 },\n large: { chevron: 16, icon: 20 },\n};\n\n/** The pixel size of a picker glyph at a size. */\nexport function pickerGlyphSize(size: CoreSize, kind: 'chevron' | 'icon'): number {\n return GLYPHS[size][kind];\n}\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: per size and button\n * count (one or two buttons at the end). At medium (the default), `pe-8` for one button, `pe-14`\n * for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number, size: CoreSize = 'medium'): string | undefined {\n if (buttons <= 0) return undefined;\n return END_PADDINGS[size][buttons >= 2 ? 1 : 0];\n}\n"],"mappings":"mFAeA,IAAaI,EACX,+MAGIC,EAAiD,CACrD,MAAOL,EAAAA,GAAG,SAAUC,EAAAA,YAAY,EAChC,OAAQ,GACR,MAAO,QACT,EAMA,SAAgBK,EACd,EAAiB,SACjB,EAA8B,UACtB,CACR,OAAON,EAAAA,GACLI,EACAC,EAAWE,GACXC,IAAe,iBAAmB,wDACpC,CACF,CAEA,IAAMC,EAAwE,CAC5E,MAAO,CAAC,QAAS,OAAO,EACxB,OAAQ,CAAC,QAAS,OAAO,EACzB,MAAO,CAAC,QAAS,OAAO,CAC1B,EAGA,SAAgBC,EAAmB,EAAgB,EAAyB,CAC1E,OAAOD,EAAeF,EAAK,CAACI,EAAW,EACzC,CAEA,IAAMC,EAAsE,CAC1E,MAAO,CAAC,OAAQ,OAAO,EACvB,OAAQ,CAAC,OAAQ,OAAO,EACxB,MAAO,CAAC,QAAS,OAAO,CAC1B,EAGMC,EAAwE,CAC5E,MAAO,CAAE,QAAS,GAAI,KAAM,EAAG,EAC/B,OAAQ,CAAE,QAAS,GAAI,KAAM,EAAG,EAChC,MAAO,CAAE,QAAS,GAAI,KAAM,EAAG,CACjC,EAGA,SAAgBC,EAAgB,EAAgB,EAAkC,CAChF,OAAOD,EAAON,EAAK,CAACQ,EACtB,CAOA,SAAgBC,EAAiB,EAAiB,EAAiB,SAA8B,CAC/F,GAAI,KAAW,GACf,OAAOJ,EAAaL,EAAK,CAAC,KAAW,GACvC"}
@@ -1,10 +1,48 @@
1
1
  "use client";
2
+ import { cn as e } from "../../lib/cn.mjs";
3
+ import { hitAreaLayer as t } from "../../lib/styles.mjs";
2
4
  //#region src/components/input/pickerStyles.ts
3
- var e = "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground";
4
- function t(e) {
5
- return e >= 2 ? "pe-14" : e === 1 ? "pe-8" : void 0;
5
+ var n = "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", r = {
6
+ small: e("size-5", t),
7
+ medium: "",
8
+ large: "size-8"
9
+ };
10
+ function i(t = "medium", i = "outline") {
11
+ return e(n, r[t], i === "filled-darker" && "not-disabled:not-aria-disabled:hover:bg-subtle-pressed");
12
+ }
13
+ var a = {
14
+ small: ["end-1", "end-7"],
15
+ medium: ["end-1", "end-7"],
16
+ large: ["end-1", "end-9"]
17
+ };
18
+ function o(e, t) {
19
+ return a[e][t - 1];
20
+ }
21
+ var s = {
22
+ small: ["pe-7", "pe-13"],
23
+ medium: ["pe-8", "pe-14"],
24
+ large: ["pe-10", "pe-18"]
25
+ }, c = {
26
+ small: {
27
+ chevron: 12,
28
+ icon: 12
29
+ },
30
+ medium: {
31
+ chevron: 12,
32
+ icon: 16
33
+ },
34
+ large: {
35
+ chevron: 16,
36
+ icon: 20
37
+ }
38
+ };
39
+ function l(e, t) {
40
+ return c[e][t];
41
+ }
42
+ function u(e, t = "medium") {
43
+ if (!(e <= 0)) return s[t][+(e >= 2)];
6
44
  }
7
45
  //#endregion
8
- export { e as PICKER_ICON_BUTTON_CLASSES, t as pickerEndPadding };
46
+ export { n as PICKER_ICON_BUTTON_CLASSES, o as pickerButtonOffset, u as pickerEndPadding, l as pickerGlyphSize, i as pickerIconButtonClasses };
9
47
 
10
48
  //# sourceMappingURL=pickerStyles.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"pickerStyles.mjs","names":["PICKER_ICON_BUTTON_CLASSES","pickerEndPadding","buttons"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n 'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: `pe-8` for one\n * button, `pe-14` for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number): string | undefined {\n if (buttons >= 2) return 'pe-14';\n return buttons === 1 ? 'pe-8' : undefined;\n}\n"],"mappings":";;AAWA,IAAaA,IACX;AAMF,SAAgBC,EAAiB,GAAqC;CAEpE,OADIC,KAAW,IAAU,UAClBA,MAAY,IAAI,SAAS,KAAA;AAClC"}
1
+ {"version":3,"file":"pickerStyles.mjs","names":["PICKER_ICON_BUTTON_CLASSES","BUTTON_BOX","cn","hitAreaLayer","pickerIconButtonClasses","size","appearance","BUTTON_OFFSETS","pickerButtonOffset","position","END_PADDINGS","GLYPHS","pickerGlyphSize","kind","pickerEndPadding"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\nimport { cn } from '../../lib/cn';\nimport { hitAreaLayer } from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n 'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/** The button box of each size: 20px with a 24px hit layer, 24px (the 0.7 box) or 32px. */\nconst BUTTON_BOX: Readonly<Record<CoreSize, string>> = {\n small: cn('size-5', hitAreaLayer),\n medium: '',\n large: 'size-8',\n};\n\n/**\n * The classes of a picker's icon button at a size and appearance (Phase 4 D11): the 0.7 classes,\n * the size's box and, on `filled-darker`, a hover fill one step darker than the field.\n */\nexport function pickerIconButtonClasses(\n size: CoreSize = 'medium',\n appearance: InputAppearance = 'outline',\n): string {\n return cn(\n PICKER_ICON_BUTTON_CLASSES,\n BUTTON_BOX[size],\n appearance === 'filled-darker' && 'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n );\n}\n\nconst BUTTON_OFFSETS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n small: ['end-1', 'end-7'],\n medium: ['end-1', 'end-7'],\n large: ['end-1', 'end-9'],\n};\n\n/** The inline-end offset of a picker's first or second icon button (the second sits before it). */\nexport function pickerButtonOffset(size: CoreSize, position: 1 | 2): string {\n return BUTTON_OFFSETS[size][position - 1];\n}\n\nconst END_PADDINGS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n small: ['pe-7', 'pe-13'],\n medium: ['pe-8', 'pe-14'],\n large: ['pe-10', 'pe-18'],\n};\n\n/** The glyph sizes of each size: the chevron, and the other icons (clear, calendar). */\nconst GLYPHS: Readonly<Record<CoreSize, { chevron: number; icon: number }>> = {\n small: { chevron: 12, icon: 12 },\n medium: { chevron: 12, icon: 16 },\n large: { chevron: 16, icon: 20 },\n};\n\n/** The pixel size of a picker glyph at a size. */\nexport function pickerGlyphSize(size: CoreSize, kind: 'chevron' | 'icon'): number {\n return GLYPHS[size][kind];\n}\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: per size and button\n * count (one or two buttons at the end). At medium (the default), `pe-8` for one button, `pe-14`\n * for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number, size: CoreSize = 'medium'): string | undefined {\n if (buttons <= 0) return undefined;\n return END_PADDINGS[size][buttons >= 2 ? 1 : 0];\n}\n"],"mappings":";;;;AAeA,IAAaA,IACX,gNAGIC,IAAiD;CACrD,OAAOC,EAAG,UAAUC,CAAY;CAChC,QAAQ;CACR,OAAO;AACT;AAMA,SAAgBC,EACd,IAAiB,UACjB,IAA8B,WACtB;CACR,OAAOF,EACLF,GACAC,EAAWI,IACXC,MAAe,mBAAmB,wDACpC;AACF;AAEA,IAAMC,IAAwE;CAC5E,OAAO,CAAC,SAAS,OAAO;CACxB,QAAQ,CAAC,SAAS,OAAO;CACzB,OAAO,CAAC,SAAS,OAAO;AAC1B;AAGA,SAAgBC,EAAmB,GAAgB,GAAyB;CAC1E,OAAOD,EAAeF,EAAK,CAACI,IAAW;AACzC;AAEA,IAAMC,IAAsE;CAC1E,OAAO,CAAC,QAAQ,OAAO;CACvB,QAAQ,CAAC,QAAQ,OAAO;CACxB,OAAO,CAAC,SAAS,OAAO;AAC1B,GAGMC,IAAwE;CAC5E,OAAO;EAAE,SAAS;EAAI,MAAM;CAAG;CAC/B,QAAQ;EAAE,SAAS;EAAI,MAAM;CAAG;CAChC,OAAO;EAAE,SAAS;EAAI,MAAM;CAAG;AACjC;AAGA,SAAgBC,EAAgB,GAAgB,GAAkC;CAChF,OAAOD,EAAON,EAAK,CAACQ;AACtB;AAOA,SAAgBC,EAAiB,GAAiB,IAAiB,UAA8B;CAC/F,IAAI,OAAW,IACf,OAAOJ,EAAaL,EAAK,CAAC,OAAW;AACvC"}
@@ -1,2 +1,2 @@
1
- "use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../lib/direction.cjs"),s=require("../../lib/focus.cjs"),ee=require("../../hooks/useRovingTabIndex.cjs"),te=require("../../hooks/useMergedRefs.cjs"),ne=require("../../hooks/usePresence.cjs"),re=require("../../hooks/useDismiss.cjs"),c=require("../portal/Portal.cjs"),ie=require("../../hooks/usePopupPosition.cjs"),l=require("../../lib/events.cjs"),ae=require("../../hooks/useRestoreFocus.cjs"),u=require("../../hooks/useTriggerElement.cjs"),d=require("./Menu.context.cjs"),f=require("./Menu.shared.cjs"),p=require("../../hooks/useHoverIntent.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var oe={padding:8,crossAxis:!0};function se(e){return!!e&&e.nodeType===1}function g(e){let[t]=m.useState(p.createHoverIntentGroup),n=m.useRef(!1);return{hoverGroup:t,isHoverFocusing:m.useCallback(()=>n.current,[]),onPointerMove:a.useEventCallback(r=>{if(r.pointerType===`touch`||r.pointerType===`pen`||!l.isOwnEvent(r))return;let i=r.target.closest(f.MENU_ITEM_SELECTOR);if(!i||!r.currentTarget.contains(i)||i.getAttribute(`aria-disabled`)===`true`||i.ownerDocument.activeElement===i)return;let a=e;for(;a.parent;)a=a.parent;a.listContainsFocus()&&!t.isHeld(r.clientX,r.clientY)&&(n.current=!0,i.focus({preventScroll:!0}),queueMicrotask(()=>{n.current=!1}))})}}var _=({side:e,align:p=`start`,offset:_,target:v,children:ce,className:le,style:ue,onKeyDown:de,onKeyDownCapture:fe,onFocus:pe,onPointerEnter:me,onPointerLeave:he,onPointerMove:ge,onContextMenu:_e,ref:ve,...y})=>{let b=d.useMenuContext(`Menu.Popover`),{popup:ye,open:x,takeInitialFocus:S,registerSurface:C,menuId:be,labelledBy:xe,triggerRef:w,triggerElement:T,isSubmenu:E,requestClose:Se,closeChain:D,dismiss:Ce,hoverSurfaceHandlers:O,isHoverClose:we,openOnContext:k,contextSurfaceHandlers:Te,contextAnchor:A,fromContext:j,contextOpener:M}=b;f.useStaticMenuPartWarning(`Menu.Popover`,ye);let N=se(v)?v:null,[P,Ee]=m.useState(null),F=m.useRef(null),De=m.useCallback(e=>{F.current=e,Ee(e)},[]),{isMounted:I,ref:Oe,presenceProps:ke}=ne.usePresence(x),{setReference:L,setFloating:Ae,floatingProps:R,isPositioned:z}=ie.usePopupPosition({open:x,side:e??(E?`end`:`bottom`),align:p,offset:_??(E?0:4),fitViewport:!0,shift:E?oe:void 0}),{maxHeight:je,maxWidth:Me,...Ne}=R.style;m.useLayoutEffect(()=>{L(j?A??u.getTriggerFocusTarget(T)??T:v??T)},[L,A,j,v,T]);let B=a.useEventCallback(()=>{let e=k?M.current:null;return e&&s.isConnectedAndFocusable(e)?e:u.getTriggerFocusTarget(w.current)||(N&&s.isConnectedAndFocusable(N)?N:null)}),Pe=m.useMemo(()=>({get current(){return B()??w.current}}),[B,w]),V={current:N},{layerId:H}=re.useDismiss({open:x,onDismiss:Ce,refs:k?[F,V]:[F,w,V],anchorRef:Pe,kind:`menu`,focusOutside:!0,outsidePress:k?e=>!(e.ctrlKey&&e.target instanceof Node&&w.current?.contains(e.target)):!0}),U=u.useTriggerFocusRef(w),W=m.useRef(null),G=m.useRef(!1),Fe=a.useEventCallback(()=>{let e=F.current,t=(w.current??e)?.ownerDocument??document,n=n=>!!n&&n!==t.body&&n!==t.documentElement&&!e?.contains(n),r=k?null:U.current,i=t.activeElement;W.current=n(r)?r:n(i)?i:null});m.useInsertionEffect(()=>{let e=G.current;G.current=x,x&&!e&&Fe()});let Ie=a.useEventCallback(()=>{let e=F.current;return[k?M.current:null,W.current,B()].find(t=>!!t&&s.isConnectedAndFocusable(t)&&!e?.contains(t))??null});ae.useRestoreFocus({enabled:x,container:P,triggerRef:k?void 0:U,finalFocusRef:k?M:void 0,fallback:B,onlyIfFocusInside:!0,isHoverClose:we});let K=I&&(k||v!=null&&!T)&&y[`aria-label`]===void 0&&y[`aria-labelledby`]===void 0;m.useEffect(()=>{K&&n.warnOnce(`Menu.Popover:name`,"Menu.Popover: this menu has no trigger to name it (a context menu, or a menu placed at a `target` without Menu.Trigger): give Menu.Popover an aria-label or aria-labelledby.")},[K]);let{containerProps:{ref:Le},handleKeyDown:Re,handleKeyDownCapture:ze,handleFocus:Be,focusFirst:q,focusLast:J}=ee.useRovingTabIndex({orientation:`vertical`,loop:!0,typeahead:!0,manageTabIndex:!0,itemSelector:f.MENU_ITEM_SELECTOR}),Ve=te.useMergedRefs(ve,De,Le,Ae,Oe);m.useLayoutEffect(()=>{if(P&&x)return C({focusFirst:q,focusLast:J,surface:P,layerId:H,getReturnFocus:B}),()=>C(null)},[P,x,C,q,J,H,B]);let Y=m.useRef(!1);m.useLayoutEffect(()=>(Y.current=!1,()=>{Y.current=!0}),[]);let X=a.useEventCallback(()=>{let e=F.current,t=e?.ownerDocument.activeElement;!Y.current&&e&&t&&e.contains(t)&&Ie()?.focus({preventScroll:!0})});m.useLayoutEffect(()=>{if(x)return X},[x,X]),m.useLayoutEffect(()=>{if(!x||!P||P.contains(P.ownerDocument.activeElement))return;let e=S();e===`last`?J():e===`first`&&q()},[x,P,S,q,J]),m.useLayoutEffect(()=>{if(!z||!P)return;let e=P.ownerDocument.activeElement;e&&e!==P&&P.contains(e)&&e.scrollIntoView?.({block:`nearest`})},[z,P]);let Z=m.useContext(c.PortalDepthContext)+1,Q=d.useCheckableRegistry(),{hoverGroup:$,isHoverFocusing:He,onPointerMove:Ue}=g(b),We=m.useMemo(()=>({menu:b,isStatic:!1,portalDepth:Z,closeFromItem:D,registerCheckable:Q,hoverGroup:$,isHoverFocusing:He}),[b,Z,D,Q,$,He]),Ge=e=>{if(de?.(e),!e.defaultPrevented&&l.isOwnEvent(e)){if(e.key===`Tab`){D();return}if(E&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!l.isEditableTarget(e.target)&&o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)})===`prev`){e.preventDefault(),B()?.focus({preventScroll:!0}),Se();return}Re(e)}};return I?(0,h.jsx)(c.Portal,{layerId:H,children:(0,h.jsx)(d.MenuListContext.Provider,{value:We,children:(0,h.jsx)(`div`,{role:`menu`,...y,"aria-labelledby":y[`aria-labelledby`]===void 0?T&&!k&&y[`aria-label`]===void 0?xe:void 0:y[`aria-labelledby`],...ke,ref:Ve,id:be,"data-state":x?`open`:`closed`,"data-side":R[`data-side`],"data-align":R[`data-align`],"data-roving-container":``,style:{...Ne,...ue},onKeyDown:Ge,onKeyDownCapture:f.withTypeaheadText(r.composeEventHandlers(fe,ze)),onFocus:r.composeEventHandlers(pe,Be,{checkDefaultPrevented:!1}),onPointerEnter:r.composeEventHandlers(me,O.onPointerEnter),onPointerLeave:r.composeEventHandlers(he,O.onPointerLeave),onPointerMove:r.composeEventHandlers(ge,Ue),onContextMenu:r.composeEventHandlers(_e,Te.onContextMenu),className:t.cn(i.menuPopoverClassNames.root,f.menuPopoverClasses,le),children:ce})})}):null};_.displayName=`MenuPopover`,exports.MenuPopover=_,exports.useMenuListPointer=g;
1
+ "use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../lib/direction.cjs"),s=require("../../lib/focus.cjs"),ee=require("../../hooks/useRovingTabIndex.cjs"),te=require("../../hooks/useMergedRefs.cjs"),ne=require("../../hooks/usePresence.cjs"),re=require("../../hooks/useDismiss.cjs"),c=require("../portal/Portal.cjs"),ie=require("../../hooks/usePopupPosition.cjs"),l=require("../../lib/events.cjs"),ae=require("../../hooks/useRestoreFocus.cjs"),u=require("../../hooks/useHoverIntent.cjs"),d=require("../../hooks/useTriggerElement.cjs"),f=require("./Menu.context.cjs"),p=require("./Menu.shared.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var oe={padding:8,crossAxis:!0};function se(e){return!!e&&e.nodeType===1}function g(e){let[t]=m.useState(u.createHoverIntentGroup),n=m.useRef(!1);return{hoverGroup:t,isHoverFocusing:m.useCallback(()=>n.current,[]),onPointerMove:a.useEventCallback(r=>{if(r.pointerType===`touch`||r.pointerType===`pen`||!l.isOwnEvent(r))return;let i=r.target.closest(p.MENU_ITEM_SELECTOR);if(!i||!r.currentTarget.contains(i)||i.getAttribute(`aria-disabled`)===`true`||i.ownerDocument.activeElement===i)return;let a=e;for(;a.parent;)a=a.parent;a.listContainsFocus()&&!t.isHeld(r.clientX,r.clientY)&&(n.current=!0,i.focus({preventScroll:!0}),queueMicrotask(()=>{n.current=!1}))})}}var _=({side:e,align:u=`start`,offset:_,target:v,children:ce,className:le,style:ue,onKeyDown:de,onKeyDownCapture:fe,onFocus:pe,onPointerEnter:me,onPointerLeave:he,onPointerMove:ge,onContextMenu:_e,ref:ve,...y})=>{let b=f.useMenuContext(`Menu.Popover`),{popup:ye,open:x,takeInitialFocus:S,registerSurface:C,menuId:be,labelledBy:xe,triggerRef:w,triggerElement:T,isSubmenu:E,requestClose:Se,closeChain:D,dismiss:Ce,hoverSurfaceHandlers:O,isHoverClose:we,openOnContext:k,contextSurfaceHandlers:Te,contextAnchor:A,fromContext:j,contextOpener:M}=b;p.useStaticMenuPartWarning(`Menu.Popover`,ye);let N=se(v)?v:null,[P,Ee]=m.useState(null),F=m.useRef(null),De=m.useCallback(e=>{F.current=e,Ee(e)},[]),{isMounted:I,ref:Oe,presenceProps:ke}=ne.usePresence(x),{setReference:L,setFloating:Ae,floatingProps:R,isPositioned:z}=ie.usePopupPosition({open:x,side:e??(E?`end`:`bottom`),align:u,offset:_??(E?0:4),fitViewport:!0,shift:E?oe:void 0}),{maxHeight:je,maxWidth:Me,...Ne}=R.style;m.useLayoutEffect(()=>{L(j?A??d.getTriggerFocusTarget(T)??T:v??T)},[L,A,j,v,T]);let B=a.useEventCallback(()=>{let e=k?M.current:null;return e&&s.isConnectedAndFocusable(e)?e:d.getTriggerFocusTarget(w.current)||(N&&s.isConnectedAndFocusable(N)?N:null)}),Pe=m.useMemo(()=>({get current(){return B()??w.current}}),[B,w]),V={current:N},{layerId:H}=re.useDismiss({open:x,onDismiss:Ce,refs:k?[F,V]:[F,w,V],anchorRef:Pe,kind:`menu`,focusOutside:!0,outsidePress:k?e=>!(e.ctrlKey&&e.target instanceof Node&&w.current?.contains(e.target)):!0}),U=d.useTriggerFocusRef(w),W=m.useRef(null),G=m.useRef(!1),Fe=a.useEventCallback(()=>{let e=F.current,t=(w.current??e)?.ownerDocument??document,n=n=>!!n&&n!==t.body&&n!==t.documentElement&&!e?.contains(n),r=k?null:U.current,i=t.activeElement;W.current=n(r)?r:n(i)?i:null});m.useInsertionEffect(()=>{let e=G.current;G.current=x,x&&!e&&Fe()});let Ie=a.useEventCallback(()=>{let e=F.current;return[k?M.current:null,W.current,B()].find(t=>!!t&&s.isConnectedAndFocusable(t)&&!e?.contains(t))??null});ae.useRestoreFocus({enabled:x,container:P,triggerRef:k?void 0:U,finalFocusRef:k?M:void 0,fallback:B,onlyIfFocusInside:!0,isHoverClose:we});let K=I&&(k||v!=null&&!T)&&y[`aria-label`]===void 0&&y[`aria-labelledby`]===void 0;m.useEffect(()=>{K&&n.warnOnce(`Menu.Popover:name`,"Menu.Popover: this menu has no trigger to name it (a context menu, or a menu placed at a `target` without Menu.Trigger): give Menu.Popover an aria-label or aria-labelledby.")},[K]);let{containerProps:{ref:Le},handleKeyDown:Re,handleKeyDownCapture:ze,handleFocus:Be,focusFirst:q,focusLast:J}=ee.useRovingTabIndex({orientation:`vertical`,loop:!0,typeahead:!0,manageTabIndex:!0,itemSelector:p.MENU_ITEM_SELECTOR}),Ve=te.useMergedRefs(ve,De,Le,Ae,Oe);m.useLayoutEffect(()=>{if(P&&x)return C({focusFirst:q,focusLast:J,surface:P,layerId:H,getReturnFocus:B}),()=>C(null)},[P,x,C,q,J,H,B]);let Y=m.useRef(!1);m.useLayoutEffect(()=>(Y.current=!1,()=>{Y.current=!0}),[]);let X=a.useEventCallback(()=>{let e=F.current,t=e?.ownerDocument.activeElement;!Y.current&&e&&t&&e.contains(t)&&Ie()?.focus({preventScroll:!0})});m.useLayoutEffect(()=>{if(x)return X},[x,X]),m.useLayoutEffect(()=>{if(!x||!P||P.contains(P.ownerDocument.activeElement))return;let e=S();e===`last`?J():e===`first`&&q()},[x,P,S,q,J]),m.useLayoutEffect(()=>{if(!z||!P)return;let e=P.ownerDocument.activeElement;e&&e!==P&&P.contains(e)&&e.scrollIntoView?.({block:`nearest`})},[z,P]);let Z=m.useContext(c.PortalDepthContext)+1,Q=f.useCheckableRegistry(),{hoverGroup:$,isHoverFocusing:He,onPointerMove:Ue}=g(b),We=m.useMemo(()=>({menu:b,isStatic:!1,portalDepth:Z,closeFromItem:D,registerCheckable:Q,hoverGroup:$,isHoverFocusing:He}),[b,Z,D,Q,$,He]),Ge=e=>{if(de?.(e),!e.defaultPrevented&&l.isOwnEvent(e)){if(e.key===`Tab`){D();return}if(E&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!l.isEditableTarget(e.target)&&o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)})===`prev`){e.preventDefault(),B()?.focus({preventScroll:!0}),Se();return}Re(e)}};return I?(0,h.jsx)(c.Portal,{layerId:H,children:(0,h.jsx)(f.MenuListContext.Provider,{value:We,children:(0,h.jsx)(`div`,{role:`menu`,...y,"aria-labelledby":y[`aria-labelledby`]===void 0?T&&!k&&y[`aria-label`]===void 0?xe:void 0:y[`aria-labelledby`],...ke,ref:Ve,id:be,"data-state":x?`open`:`closed`,"data-side":R[`data-side`],"data-align":R[`data-align`],"data-roving-container":``,style:{...Ne,...ue},onKeyDown:Ge,onKeyDownCapture:p.withTypeaheadText(r.composeEventHandlers(fe,ze)),onFocus:r.composeEventHandlers(pe,Be,{checkDefaultPrevented:!1}),onPointerEnter:r.composeEventHandlers(me,O.onPointerEnter),onPointerLeave:r.composeEventHandlers(he,O.onPointerLeave),onPointerMove:r.composeEventHandlers(ge,Ue),onContextMenu:r.composeEventHandlers(_e,Te.onContextMenu),className:t.cn(i.menuPopoverClassNames.root,p.menuPopoverClasses,le),children:ce})})}):null};_.displayName=`MenuPopover`,exports.MenuPopover=_,exports.useMenuListPointer=g;
2
2
  //# sourceMappingURL=Menu.popover.cjs.map