@sesamehr/react-design-system 3.4.0 → 3.5.0

package/dist/Forms/Inputs/AiSearch/AiSearch.d.ts

@@ -0,0 +1,67 @@
+export interface AiSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'onSelect' | 'className' | 'children'> {
+    /**
+     * The answer is being waited for: the field shows the thinking row and
+     * `OxAiSearchSend` turns into a stop button.
+     */
+    thinking?: boolean;
+    /** What is in the field. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** A row was chosen — by click or by Enter. Carries that row's `value`. */
+    onSelect?: (value: string) => void;
+    /** Escape was pressed. What closing means is the caller's to decide. */
+    onClose?: () => void;
+    /**
+     * Inside the pill, after the field: `OxAiSearchShortcut` and
+     * `OxAiSearchSend`. The Vue original's `trailing` slot.
+     */
+    trailing?: React.ReactNode;
+    /** Lands on the root, which is the card the field sits inside. */
+    className?: string;
+    children?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * The metasearch pill: search the application and ask Sesame AI from one field.
+ * Mirrors `@sesame/orxata-core` AiSearch.
+ *
+ * Built on cmdk, the way `OxSearchPanel` is, and for the reason the Vue port is
+ * built on reka's `Listbox` rather than a combobox primitive. The board asks for
+ * `role="combobox"`, and that is an ARIA pattern rather than a primitive: a
+ * combobox's *model* is "pick a value, the field then shows it", which is wrong
+ * here twice over — the typed words have to survive a highlight moving over the
+ * rows, and a row that navigated somewhere is not a value this field holds
+ * afterwards. What is wanted is the half cmdk brings: the roving highlight with
+ * focus left in the field.
+ *
+ * `role="listbox"` and the row collection land on `OxAiSearchPanel`'s row
+ * container, which is cmdk's `CommandList` — not on this root. cmdk also owns
+ * `aria-controls`, pointing the input at that list; with nothing typed there is
+ * no panel and no list, which is why `aria-expanded` has to be `open` and not
+ * cmdk's hard-coded `true`. The input below is handed to `CommandInput` through
+ * `asChild` precisely so that one attribute can be corrected: Radix's `Slot`
+ * lets the child's props win over the primitive's, and cmdk writes its own
+ * *after* the spread.
+ *
+ * **The card is this element, not the panel's.** The board draws the field
+ * *inside* the open panel, so opening is this root growing a surface around
+ * itself rather than a second box appearing below. `OxAiSearchPanel` is
+ * everything under the field.
+ *
+ * **It does not make itself a modal.** The board's behaviour notes say the pill
+ * opens centred over an overlay with the page scroll locked, and that is a
+ * composition the application makes — `OxDialog` already owns the overlay, the
+ * focus trap and the scroll lock, and a search field that decided it was modal
+ * could not be put in a header. The MDX shows the composition.
+ *
+ * **Controlled when the caller listens, not when it passes a value.** The Vue
+ * original is a `defineModel` with a `''` default, so `<OxAiSearch value="x" />`
+ * with no listener is an ordinary field that still types. The gate is the
+ * handler, and a new `value` still wins while uncontrolled so a story's args
+ * panel steers it.
+ *
+ * Everything the caller writes that is not named above lands on the input, not
+ * on the root: a `placeholder`, a `name` or an `aria-label` belongs on the
+ * control, and `className` is declared separately so it reaches the card.
+ */
+export declare const AiSearch: import('react').ForwardRefExoticComponent<AiSearchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/Forms/Inputs/AiSearch/AiSearchAsk.d.ts

@@ -0,0 +1,34 @@
+import { CommandItem } from 'cmdk';
+export interface AiSearchAskProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandItem>, 'onSelect' | 'children'> {
+    /**
+     * Handed back through the root's `onSelect`. Defaults to `ask`, which is the
+     * value a caller switches on to open the answer.
+     */
+    value?: string;
+    dataTestid: string;
+}
+/**
+ * «Ask Sesame AI» — the first row of the panel, and the one Enter runs. Mirrors
+ * `@sesame/orxata-core` AiSearchAsk.
+ *
+ * Always first, which the board says twice: the behaviour notes ("la fila
+ * «Preguntar a Sesame IA» siempre es la primera") and the footer hint that
+ * promises Enter asks the AI. cmdk highlights the first row whenever the
+ * collection changes, exactly as reka does, so putting this row first is what
+ * makes that promise true — there is no code here enforcing the order, only a
+ * caller writing it before the groups.
+ *
+ * It quotes the query back off the context rather than taking it as a prop. The
+ * root already holds it, and a copy passed in could show yesterday's words while
+ * the field shows today's.
+ *
+ * The `↵` chip is `aria-hidden`: it is a picture of the key that already runs
+ * the row, and a screen reader reading "corner down left" after the row's name
+ * is noise. The row's own name is its text.
+ *
+ * One child inside `CommandItem asChild` and one only. Radix's `Slot`, which
+ * cmdk uses, throws on a second child rather than merging onto the first the way
+ * reka does — so the Vue original's warning about a silently role-less sibling
+ * is a hard error here instead.
+ */
+export declare const AiSearchAsk: import('react').ForwardRefExoticComponent<AiSearchAskProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/AiSearch/AiSearchPanel.d.ts

@@ -0,0 +1,50 @@
+export interface AiSearchPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    dataTestid: string;
+}
+/**
+ * Everything under the field: the ask row, the suggestions, the results and the
+ * keyboard hints. Mirrors `@sesame/orxata-core` AiSearchPanel.
+ *
+ * Not the card. The board draws the field *inside* the open panel, so the
+ * surface belongs to `OxAiSearch` — this is the part of it below the row, and it
+ * is named `Panel` because that is what the board calls the open state.
+ *
+ * It shows itself on the first keystroke and hides when the field empties,
+ * reading that off the root's context. The caller does not write the condition:
+ * it is the root's to know, and a caller's copy of it would be a second one to
+ * keep in step.
+ *
+ * **`CommandList` is in here and not in the root, because that is where the role
+ * goes.** It carries `role="listbox"` *and* gathers the rows into the collection
+ * the arrows walk, exactly as reka's `ListboxContent` does on the Vue side. Put
+ * it in the root and nothing registers: no `aria-activedescendant`, no
+ * highlight, and Enter selects nothing — all of which look exactly like a
+ * component that simply has no keyboard.
+ *
+ * The hints sit **outside** that element. A `listbox` holds options, and three
+ * lines of keyboard legend are not options; inside, a screen reader would walk
+ * them as rows that cannot be chosen.
+ *
+ * **Two things cmdk decides that this component cannot.** `CommandList` is not
+ * handed an element through `asChild`: cmdk's own slot helper reads `.render`
+ * off the child's type, so a plain `<div>` there is a crash rather than a merge,
+ * and the class and the `data-slot` go straight onto cmdk's element instead.
+ * And it writes its attributes *after* the spread, so its `aria-label` — a
+ * hard-coded English "Suggestions" — stands where reka names the Vue list
+ * nothing. `OxSearchPanelList` carries exactly the same name for the same
+ * reason; it is a real difference between the two ports rather than a choice
+ * made here.
+ *
+ * cmdk also wraps the rows in a sizer element of its own, which reka has no
+ * equivalent of. It is given `display: contents` below so that the rows stay
+ * direct flex children of this list instead of collapsing into one — the single
+ * declaration in this component that the Vue original does not have, which is
+ * why `AiSearchPanel.vue` is named in `parity-component`'s `allowCss`.
+ *
+ * It declares none of the row styling itself: the sections inside are
+ * `OxSearchPanelGroup` and `OxSearchPanelItem`, which read their padding, corner
+ * and type size off `--ox-listbox-item-*`. Those are declared on this element,
+ * which is the only place that can — a rule in this file aimed at the shared row
+ * would weigh exactly what the shared row's own rule weighs.
+ */
+export declare const AiSearchPanel: import('react').ForwardRefExoticComponent<AiSearchPanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/AiSearch/AiSearchSend.d.ts

@@ -0,0 +1,30 @@
+export interface AiSearchSendProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The query should be asked. Carries what is in the field. */
+    onSend?: (query: string) => void;
+    /** The answer in flight should be cancelled. */
+    onStop?: () => void;
+    dataTestid: string;
+}
+/**
+ * The round button at the right of the field: ask, or stop. Mirrors
+ * `@sesame/orxata-core` AiSearchSend.
+ *
+ * Three looks and one element, because the board draws one element: grey and
+ * inert with an empty field, brand once there is a query, and the foreground
+ * colour with a stop glyph while the answer is coming. It reads all three off
+ * the root's context rather than taking props, so the caller writes
+ * `<OxAiSearchSend>` once and never has to keep a `thinking` flag in step in two
+ * places.
+ *
+ * It owns its own `onSend` and `onStop` rather than routing them through the
+ * root. The caller writes this element, so it can listen on it directly — and
+ * the alternative, a handler passed down through the context, is the prop
+ * drilling the context exists to avoid.
+ *
+ * Its `data-slot` is `send` and not the controller role the other buttons inside
+ * a field wear. That role means "I am the thing the label names", and the thing a
+ * label names here is the input: this button sits inside the field rather than
+ * beside it, so an `OxFieldGroup` never has to order it and nothing is gained by
+ * claiming the role. Its own `aria-label` is what names it.
+ */
+export declare const AiSearchSend: import('react').ForwardRefExoticComponent<AiSearchSendProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Forms/Inputs/AiSearch/AiSearchShortcut.d.ts

@@ -0,0 +1,23 @@
+export interface AiSearchShortcutProps extends React.ComponentPropsWithoutRef<'kbd'> {
+    dataTestid: string;
+}
+/**
+ * The global shortcut, shown in the field until there is something in it.
+ * Mirrors `@sesame/orxata-core` AiSearchShortcut.
+ *
+ * It hides itself rather than being hidden, which is the house pattern for a
+ * part whose visibility follows the root's state: the root never sees this
+ * element — the caller writes it into `trailing` — so a condition up there is
+ * not available, and a `show` prop would be the same condition written twice.
+ *
+ * Figma spells it as a `Show shortcut` boolean, and here it is whether the part
+ * is written at all. The board's own geometry draws the chip in all four states;
+ * its properties table says "solo Default y Focus" and its behaviour notes say
+ * "el atajo se oculta al escribir". Two prose sources against the geometry, and
+ * the geometry is only showing the boolean's default — so the prose wins and the
+ * chip goes on the query.
+ *
+ * The content is `children` because `⌘K` is a Mac keyboard: an application on
+ * Windows writes `Ctrl K` and nothing here should pretend to know which.
+ */
+export declare const AiSearchShortcut: import('react').ForwardRefExoticComponent<AiSearchShortcutProps & import('react').RefAttributes<HTMLElement>>;

package/dist/Forms/Inputs/AiSearch/AiSearchSuggestion.d.ts

@@ -0,0 +1,27 @@
+import { CommandItem } from 'cmdk';
+export interface AiSearchSuggestionProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandItem>, 'onSelect'> {
+    /** Handed back through the root's `onSelect`. Unique within the panel. */
+    value: string;
+    dataTestid: string;
+}
+/**
+ * One suggested question, as a chip. Mirrors `@sesame/orxata-core`
+ * AiSearchSuggestion.
+ *
+ * A row of the same listbox as the results, not a decoration beside it: the
+ * arrows have to reach it, which is what the footer's "↑↓ navigate" promises,
+ * and it is picked the same way — the root calls `onSelect` with this `value`.
+ * cmdk walks the rows in document order, so a row of chips is arrowed through
+ * left to right.
+ *
+ * A `<button>` rather than cmdk's default `div`, so it is a control in its own
+ * right for anything that does not go through the listbox's roving focus.
+ * `CommandItem` adds `role="option"`, which replaces the button role — the
+ * element stays a real button for the pointer and reads as an option to a screen
+ * reader, which is both halves right.
+ *
+ * The label is `children`: a suggestion is whatever the application's model
+ * suggested, and a design system that shipped a list of them would be wrong by
+ * the following release.
+ */
+export declare const AiSearchSuggestion: import('react').ForwardRefExoticComponent<AiSearchSuggestionProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Forms/Inputs/AiSearch/index.d.ts

@@ -0,0 +1,6 @@
+export { AiSearch, type AiSearchProps } from './AiSearch.tsx';
+export { AiSearchAsk, type AiSearchAskProps } from './AiSearchAsk.tsx';
+export { AiSearchPanel, type AiSearchPanelProps } from './AiSearchPanel.tsx';
+export { AiSearchSend, type AiSearchSendProps } from './AiSearchSend.tsx';
+export { AiSearchShortcut, type AiSearchShortcutProps, } from './AiSearchShortcut.tsx';
+export { AiSearchSuggestion, type AiSearchSuggestionProps, } from './AiSearchSuggestion.tsx';

package/dist/Forms/Inputs/AiSearch/useAiSearch.d.ts

@@ -0,0 +1,37 @@
+export interface AiSearchContextValue {
+    /** What is in the field right now. */
+    query: string;
+    /** Whether the answer is being waited for. */
+    thinking: boolean;
+    /**
+     * Whether the panel is showing. Derived from the query rather than held: the
+     * board opens the panel on the first keystroke and closes it when the field
+     * empties, so a second source of truth could only disagree with the first.
+     */
+    open: boolean;
+    /** Called with a row's `value` when that row is chosen. */
+    select: (value: string) => void;
+}
+export declare const AiSearchContext: import('react').Context<AiSearchContextValue | null>;
+/**
+ * The state every part reads to decide what it looks like and whether it is
+ * there at all.
+ *
+ * Four parts need it and none of them need the same thing: the shortcut hides
+ * once there is a query, the send button changes colour on the query and its
+ * icon on `thinking`, the ask row quotes the query back, and the panel shows
+ * itself when the field is not empty. Passing those down as props would be prop
+ * drilling through `children` — the caller writes the parts, so the root never
+ * sees them.
+ *
+ * Throws rather than returning `undefined`: a part outside the root would
+ * otherwise render looking fine and never update, which is the failure that
+ * takes longest to notice. The message is the Vue original's, word for word.
+ *
+ * **No `listboxId` here, unlike the Vue context.** reka leaves `aria-controls`
+ * to the author, so the Vue root generates an id and passes it down to the
+ * element `ListboxContent` lands on. cmdk generates that id itself and wires
+ * both ends — `aria-controls` on the input, `id` on the list — so carrying a
+ * second one would be an id nothing points at.
+ */
+export declare const useAiSearch: () => AiSearchContextValue;

package/dist/Forms/Inputs/TimePicker/TimePicker.d.ts

@@ -0,0 +1,64 @@
+import { TimeFormat } from './time.ts';
+export interface TimePickerProps {
+    /** Two segments or three. `OxTimePickerList` only supports `HH:MM`. */
+    format?: TimeFormat;
+    disabled?: boolean;
+    /**
+     * The chosen time — `"15:17"`, or `"15:17:30"` under `HH:MM:SS`. `undefined`
+     * for as long as any segment is still empty.
+     */
+    value?: string;
+    onValueChange?: (value: string | undefined) => void;
+    /** Whether the dropdown is showing. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Lands on the field, which is the only part of this in the page's layout —
+     * the panel is portalled.
+     */
+    className?: string;
+    /** The dropdown's body. Falls back to `<OxTimePickerWheel>`. */
+    children?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * A field showing a time segment by segment, and a dropdown to pick one without
+ * typing. Mirrors `@sesame/orxata-core` TimePicker.
+ *
+ * The root owns the value and nothing else is allowed to. The field, the
+ * 15-minute list and the wheel are three ways of reading and writing the same
+ * three numbers, so the format handling, the empty-segment state and the
+ * conversion to and from the value all live here — see `useTimePicker.ts`.
+ *
+ * **The body is composed, not configured.** The board models the choice as a
+ * `Type = List | Wheel` property; this ships it as `<OxTimePickerList>` and
+ * `<OxTimePickerWheel>` in `children` instead, for three reasons. A snapping,
+ * looping, momentum-carrying wheel and a 96-row listbox are two unrelated
+ * behaviours, and one component holding both is what the single responsibility
+ * rule exists to prevent. The board's own constraint — *List is always `HH:MM`*
+ * — becomes a property of the list component rather than a runtime check on a
+ * prop combination the variant axis lets you select and no design exists for.
+ * And a `type` prop would be the fifth on a component that already has to carry
+ * the format, the disabled state and the class.
+ *
+ * The wheel is the fallback, because it is the one that supports both formats.
+ *
+ * `value` is a string, and it is `undefined` for as long as any segment is still
+ * empty — which the field draws as `--`: a half-typed time is not a time, and
+ * there is no shape of `string` that honestly says "17 past some hour".
+ *
+ * **Controlled when the caller listens, not when it passes a value.** The Vue
+ * original is a `defineModel`, which given a value and no `update:` listener
+ * seeds itself from it and goes on working, so `<OxTimePicker value="15:17" />`
+ * has to keep typing. Gating on `value !== undefined` alone would turn that into
+ * a field pinned to its initial value with nothing able to move it; gating on
+ * the handler keeps both paths, and a new `value` still wins while uncontrolled
+ * so the Storybook args panel steers it. Same for `open`.
+ *
+ * No `defaultValue` / `defaultOpen`: the Vue original publishes neither, and a
+ * prop with no twin on the other side is drift rather than convenience.
+ */
+export declare const TimePicker: {
+    ({ format, disabled, value, onValueChange, open, onOpenChange, className, children, dataTestid, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Forms/Inputs/TimePicker/TimePickerField.d.ts

@@ -0,0 +1,35 @@
+export type TimePickerFieldProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * The closed control: the segments on the left, a clock on the right. Mirrors
+ * `@sesame/orxata-core` TimePickerField.
+ *
+ * **Radix has no `TimeField`.** The Vue original is reka's `TimeFieldRoot` /
+ * `TimeFieldInput`, and everything about editing a segment comes out of that
+ * primitive — the per-segment `role="spinbutton"` with its `aria-value*`, the
+ * arrow keys, typing two digits and rolling on to the next segment, Backspace
+ * emptying one, and holding a half-entered time that is not yet a value. None
+ * of it has a Radix counterpart, so it is written out in `useTimeField.ts`,
+ * which reproduces reka's rendered DOM, its ARIA and its keyboard. Read that
+ * file's docblock before changing anything here.
+ *
+ * `role="group"` is what makes `useFieldControlGroup` work: a bare `<div>`
+ * cannot take a name from the author, so without the role the `aria-labelledby`
+ * below would be dropped on the floor and the segments would announce as two
+ * anonymous spin buttons. Same reasoning as `OxInputOtp`, and the same hook —
+ * one `id` cannot be on two focusable segments.
+ *
+ * **The clock is a button, where the board draws a bare glyph.** It is the only
+ * deviation in this file and it is deliberate: the segments own clicks and the
+ * keyboard inside the field, so a field that was itself the trigger would mean
+ * clicking a segment opened the panel, and a glyph that was not a button would
+ * leave the dropdown unreachable without a mouse. The button has no fill, no
+ * padding and no border, so it is the 16px glyph the board draws and nothing
+ * more.
+ *
+ * It takes no size prop: the height, radius, type and gap come from the
+ * `--ox-controller-*` variables every input in the package reads, so
+ * `inputSizeClass[size]` on any ancestor sizes it. Its declarations are
+ * `OxSelectTrigger`'s and `OxDatePickerTrigger`'s, so the three sit level in one
+ * form.
+ */
+export declare const TimePickerField: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/TimePicker/TimePickerList.d.ts

@@ -0,0 +1,23 @@
+export type TimePickerListProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+/**
+ * The list dropdown: every quarter hour of the day, as rows. Mirrors
+ * `@sesame/orxata-core` TimePickerList.
+ *
+ * **`HH:MM` only**, and that is the board's rule rather than a shortcut here —
+ * a list stepping in quarter hours with the seconds pinned to `00` adds a
+ * column of zeroes and no choice. The Figma variant axis lets `List` be paired
+ * with `HH:MM:SS` because the property is not scoped to `Type`, but no such
+ * component is drawn. Pairing them is a modelling slip, so this warns in
+ * development and goes on showing `HH:MM` rows; the seconds of whatever is
+ * picked are set to zero.
+ *
+ * The Vue original gets the roles, the roving cursor, the arrows, Home/End and
+ * the typeahead from reka's standalone `Listbox`, which has no counterpart in
+ * the React stack — see `useTimeList.ts` for why cmdk is the wrong model here
+ * rather than a missing one, and for what had to be written out instead. What
+ * *is* shared is the row: the internal `ListboxItem` gives the 44px frame, the
+ * 6px corner and the highlight that `OxSelect` and `OxCombobox` already use, so
+ * the board's one row is drawn once, down to the 32px of right padding the
+ * check mark sits in.
+ */
+export declare const TimePickerList: import('react').ForwardRefExoticComponent<TimePickerListProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/TimePicker/TimePickerWheel.d.ts

@@ -0,0 +1,26 @@
+export type TimePickerWheelProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * The wheel dropdown: a column per segment, scrolling under one band. Mirrors
+ * `@sesame/orxata-core` TimePickerWheel.
+ *
+ * Supports both formats — it is the only body that does, which is why it is
+ * what `<OxTimePicker>` falls back to.
+ *
+ * The band is drawn once, here, rather than as a selected state on each
+ * column's middle row, and that is the structural difference between this and
+ * `OxTimePickerList`. In the list, "selected" is a property of a row; in the
+ * wheel it is a property of a *position* — one rectangle behind all three
+ * columns and the colons between them, so the highlight reads as a single
+ * horizontal band and not as three stacked pills. The board draws it exactly
+ * that way: one absolutely positioned rectangle, first child, full inner width,
+ * with every row frame transparent.
+ *
+ * The board puts the band 1px above the row it marks. Centred here instead —
+ * that is a slip in the file, not a 1px design intention.
+ *
+ * The colon is a plain glyph, not a column of its own. On the board it is a
+ * full five-row column with text in the middle cell only, which renders to the
+ * same pixels as one centred character in a 12px box and costs four empty
+ * frames less.
+ */
+export declare const TimePickerWheel: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/TimePicker/TimePickerWheelColumn.d.ts

@@ -0,0 +1,23 @@
+import { TimePart } from './time.ts';
+export interface TimePickerWheelColumnProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Which of the three this column edits. */
+    part: TimePart;
+}
+/**
+ * One scrolling column of a wheel, and the board's `role="spinbutton"`. Mirrors
+ * `@sesame/orxata-core` TimePickerWheelColumn.
+ *
+ * Neither reka nor Radix has a wheel primitive, so the behaviour is written
+ * here — see `useWheelColumn.ts`, which is where the scrolling, the snapping
+ * and the endless loop live — and keep the ARIA contract in mind when changing
+ * it: a spin button owes `aria-valuemin`, `aria-valuemax`, `aria-valuenow`,
+ * `aria-valuetext` and arrow keys, all of which are below.
+ *
+ * It takes a `part` and derives the rest from the picker above it, rather than
+ * being handed its values, its current number and its label. A column of
+ * minutes is not a configuration of a generic column — it is the minutes.
+ */
+export declare const TimePickerWheelColumn: {
+    ({ className, part, onScroll: onCallerScroll, onPointerDown: onCallerPointerDown, onKeyDown: onCallerKeyDown, ...props }: TimePickerWheelColumnProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Forms/Inputs/TimePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { TimePicker, type TimePickerProps } from './TimePicker.tsx';
+export { TimePickerField, type TimePickerFieldProps, } from './TimePickerField.tsx';
+export { TimePickerList, type TimePickerListProps } from './TimePickerList.tsx';
+export { TimePickerWheel, type TimePickerWheelProps, } from './TimePickerWheel.tsx';
+export { TimePickerWheelColumn, type TimePickerWheelColumnProps, } from './TimePickerWheelColumn.tsx';
+export type { TimeFormat, TimePart } from './time.ts';

package/dist/Forms/Inputs/TimePicker/time.d.ts

@@ -0,0 +1,41 @@
+import { Time } from '@internationalized/date';
+/** `HH:MM` draws two segments, `HH:MM:SS` three. */
+export type TimeFormat = 'HH:MM' | 'HH:MM:SS';
+export declare const TIME_PARTS: readonly ["hour", "minute", "second"];
+export type TimePart = (typeof TIME_PARTS)[number];
+/** Inclusive upper bound of each part, in a 24-hour day. */
+export declare const PART_MAX: Record<TimePart, number>;
+/** The parts a format draws, in reading order. */
+export declare function partsOf(format: TimeFormat): TimePart[];
+/**
+ * The same thing as `partsOf`, said the way a date library says it.
+ *
+ * Kept because the Vue original hands it to reka's `TimeFieldRoot`, which calls
+ * the depth of a time field its `granularity`. React has no `TimeField` to hand
+ * it to — `useTimeField.ts` draws `partsOf(format)` directly — so here it is a
+ * published helper and the name of the concept, not plumbing.
+ */
+export declare function granularityOf(format: TimeFormat): 'minute' | 'second';
+export declare function pad(value: number): string;
+/**
+ * `"15:17"` or `"15:17:30"` to a `Time`, anything else to `undefined`.
+ *
+ * Strict about shape and about range both: `"24:00"` is not a time of day, so
+ * it is refused rather than quietly wrapped into the next morning.
+ */
+export declare function parseTime(value: string | undefined | null): Time | undefined;
+/**
+ * A `Time` back to the string the model carries. The format decides the
+ * length, not the value — a whole minute still writes `:00` under `HH:MM:SS`.
+ */
+export declare function formatTime(time: Time | undefined, format: TimeFormat): string | undefined;
+/**
+ * One part replaced, the rest kept.
+ *
+ * With nothing chosen yet it starts from midnight, which is the only answer a
+ * wheel can give: every column shows a number whether the user has touched it
+ * or not, so moving one of them necessarily commits the other two.
+ */
+export declare function withPart(time: Time | undefined, part: TimePart, value: number): Time;
+/** `0 … max` inclusive, stepping by `step`: the values one wheel column holds. */
+export declare function range(max: number, step?: number): number[];

package/dist/Forms/Inputs/TimePicker/useTimeField.d.ts

@@ -0,0 +1,62 @@
+import { Time } from '@internationalized/date';
+import { TimeFormat, TimePart } from './time.ts';
+export interface TimeSegment {
+    /** `'literal'` is the separator: not focusable, not a value. */
+    part: TimePart | 'literal';
+    key: string;
+    value: string;
+}
+export interface TimeFieldOptions {
+    format: TimeFormat;
+    /** The chosen time, or `undefined` while any segment is still empty. */
+    time: Time | undefined;
+    setTime: (next: Time | undefined) => void;
+    disabled: boolean;
+}
+export interface TimeField {
+    /** Every segment in reading order, separators included. */
+    segments: TimeSegment[];
+    /** Everything one editable segment needs: ARIA, flags, handlers and its ref. */
+    segmentProps: (part: TimePart) => Record<string, unknown>;
+    /** Left and right between segments. Belongs on the element with `role="group"`. */
+    onKeyDown: (event: React.KeyboardEvent) => void;
+}
+/**
+ * The segmented time field: reka's `TimeFieldRoot` / `TimeFieldInput`, written
+ * out, because **Radix has no `TimeField`**.
+ *
+ * This is the one piece of the port with no primitive underneath it, so it is
+ * an implementation and not a translation. It reproduces reka's rendered DOM
+ * and ARIA — a `role="spinbutton"` per segment carrying all four `aria-value*`,
+ * `contenteditable` with the caret suppressed, `inputmode="numeric"` and
+ * `data-placeholder` on an unfilled one — and reproduces its behaviour:
+ *
+ * - **`↑` / `↓` step the segment**, wrapping through `Time.cycle`, so `23` goes
+ *   to `00` and `00` back to `23`. On an empty segment the first press takes the
+ *   placeholder's value for the hour and `0` / `59` for the others, which is
+ *   reka's rule rather than one invented here.
+ * - **Digits type into the segment and roll on.** Two digits move to the next
+ *   segment; so does a first digit that cannot start a valid two-digit number
+ *   (`3` in an hour, `6` in a minute); and a `0` is remembered, so `0` then `9`
+ *   reads `09` and moves on.
+ * - **Backspace removes one digit**, and clears the value when it removes the
+ *   last one.
+ * - **`←` / `→` move between segments**, handled on the group rather than on the
+ *   segment so that one listener serves all three.
+ * - **A half-entered time is not a value.** The model is written only once every
+ *   segment holds a number; until then it stays `undefined` and the partial
+ *   state lives here. Deleting a digit from a filled field therefore clears the
+ *   model and leaves `15:--` on screen, which is the state the whole component
+ *   is built around.
+ *
+ * Every key but Tab has its default prevented, which is what stops a
+ * `contenteditable` segment from ever actually receiving typed text: the value
+ * on screen is rendered from state and never read back off the DOM.
+ *
+ * Deliberately **not** reproduced: the visually hidden `<input>` reka renders
+ * for form submission. `OxTimePickerField` passes it no `name`, no `id` and no
+ * `required`, so on the Vue side it submits nothing and validates nothing — it
+ * is a `tabindex="-1"` node forwarding focus to the first segment, and carrying
+ * it over would add DOM this port's public API cannot reach.
+ */
+export declare function useTimeField({ format, time, setTime, disabled, }: TimeFieldOptions): TimeField;

package/dist/Forms/Inputs/TimePicker/useTimeList.d.ts

@@ -0,0 +1,53 @@
+export interface TimeListOptions {
+    /** Every row's value, in order. Also what typeahead matches against. */
+    options: string[];
+    /** The selected row, or `undefined` when the value is between two rows. */
+    selected: string | undefined;
+    onSelect: (value: string) => void;
+    disabled: boolean;
+}
+export interface TimeList {
+    /** Goes on the scrolling element, together with `role="listbox"`. */
+    listProps: {
+        tabIndex: number;
+        'aria-activedescendant': string | undefined;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+    };
+    /** Everything one row needs but its content. */
+    optionProps: (option: string) => {
+        id: string;
+        role: 'option';
+        'aria-selected': boolean;
+        'aria-disabled': true | undefined;
+        'data-highlighted': '' | undefined;
+        ref: (element: HTMLElement | null) => void;
+        onClick: () => void;
+        onMouseMove: () => void;
+    };
+}
+/**
+ * The roving focus, the arrows, Home/End and the typeahead of a single-select
+ * listbox, because **nothing in the React stack supplies them for a list that
+ * is not welded to a trigger.**
+ *
+ * The Vue original is reka's standalone `Listbox`. Radix has no counterpart —
+ * its option lists (`Select`, `DropdownMenu`) all come with a trigger and a
+ * popover of their own, and this list already has both. cmdk, the package's
+ * stand-in for reka's `Combobox` in `OxSearchPanel` and `OxCombobox`, is the
+ * wrong model rather than a missing one: it puts `aria-selected` on the
+ * *highlighted* row, which is right for a command palette where nothing stays
+ * chosen and wrong here, where a row carries a check mark and `aria-selected`
+ * has to mean the time the field is showing. Overloading it would leave the
+ * selection and the cursor claiming the same attribute.
+ *
+ * So this is reka's behaviour written out, matching what it renders:
+ * `role="listbox"` and `aria-activedescendant` on the scrolling element,
+ * `role="option"` with `aria-selected` on the rows, `data-highlighted` for the
+ * cursor, arrows and Home/End moving it without wrapping, Enter and Space
+ * choosing, and the cursor following the pointer — reka's `highlight-on-hover`.
+ *
+ * The cursor starts on the selected row and is scrolled into view, which is
+ * what opens a 96-row list on the time it is already showing rather than at
+ * midnight.
+ */
+export declare function useTimeList({ options, selected, onSelect, disabled, }: TimeListOptions): TimeList;