@openwarelabs/ui 0.3.1 → 0.5.0

package/dist/components/ColorPicker/ColorSlider.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** A channel a ColorSlider changes: HSL's hue, saturation or lightness, the alpha, or red, green or blue. */
+export type ColorChannel = "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue";
+export interface ColorSliderProps {
+    /** The channel it changes. Saturation and lightness are HSL's; the track shows the channel's range for the current colour. */
+    channel: ColorChannel;
+    /** The colour as hex. The alpha channel takes and returns "#rrggbbaa"; the others keep any alpha they're given. */
+    value?: string;
+    /** The starting colour when uncontrolled.
+     * @default "#312c7e" */
+    defaultValue?: string;
+    /** Called with a lowercase hex as the person drags or presses the arrow keys. */
+    onChange?(color: string): void;
+    /** Called when the person lets go or releases the key, for work too slow to do on every move. */
+    onChangeEnd?(color: string): void;
+    /** The hue to show while the colour is a grey, which has none of its own. Without it, the slider keeps the last hue it had. */
+    hue?: number;
+    /** Called with the hue as a hue slider moves, including over a grey, whose hex doesn't change. Pass it on to a
+     * ColorArea's `hue` to keep the two in step. */
+    onHueChange?(hue: number): void;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the channel's value (174°, 72%, or 0 to 255 for red, green and blue) at the right of the label.
+     * Defaults to true when there's a label. */
+    showValue?: boolean;
+    /** A vertical slider is 152px tall, a ColorArea's height; set another with CSS.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Fades it; the pointer and the keys do nothing.
+     * @default false */
+    disabled?: boolean;
+    /** The locale for the value shown and read out. Defaults to the browser's. */
+    locale?: string;
+    /** The form field name; the hex is submitted under it. */
+    name?: string;
+    /** Names the slider when there's no label. Defaults to the channel's name ("Hue", "Opacity"), unless aria-labelledby
+     * or a Field names it. */
+    "aria-label"?: string;
+    /** Names the slider by a visible label's id. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out after the value; a Field sets it. */
+    "aria-describedby"?: string;
+    /** The input's id; a Field sets it so its label names the slider. */
+    id?: string;
+    /** Classes for the slider's outer element, e.g. a height for a vertical one. */
+    className?: string;
+}
+/**
+ * Changes one channel of a colour by dragging, over a track that shows that channel's range: a hue slider, an
+ * opacity slider over a checkerboard, or red, green and blue. It works with the keyboard like Slider.
+ * The ref is its input, for focusing it.
+ */
+export declare const ColorSlider: import("react").ForwardRefExoticComponent<ColorSliderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/ColorPicker/ColorSwatchPicker.d.cts

@@ -0,0 +1,43 @@
+export interface ColorSwatchPickerOption {
+    /** A hex colour: "#312c7e". */
+    value: string;
+    /** The colour's name, read out and shown on hover: "Midnight". Defaults to a description, like "dark indigo". */
+    label?: string;
+    /** Shown faded and skipped by the arrow keys, e.g. a colour another label has taken. */
+    disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+    /** The colours to choose from: hex strings, or { value, label } to give them names. */
+    options: Array<string | ColorSwatchPickerOption>;
+    /** The chosen colour. It matches an option whatever its case or length (#abc, #aabbcc). */
+    value?: string;
+    /** The starting colour when uncontrolled. Defaults to none. */
+    defaultValue?: string;
+    /** Called with the chosen option's value, as written in `options`. */
+    onChange?(color: string): void;
+    /** sm 24px, md 32px swatches.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    /** Fades every swatch and takes the picker out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    /** The form field name; the chosen colour is submitted under it. */
+    name?: string;
+    /** Names the group for screen readers, e.g. "Label colour". */
+    "aria-label"?: string;
+    /** Names the group by a visible heading's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out with the group. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the group, e.g. a width that sets where the rows wrap. */
+    className?: string;
+}
+/**
+ * Picks one colour from a set of swatches, in rows that wrap. It's a radio group: Tab moves into it, onto the chosen
+ * swatch, and the arrow keys move and choose. The chosen swatch has a ring and a check mark.
+ */
+export declare const ColorSwatchPicker: import("react").ForwardRefExoticComponent<ColorSwatchPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker/ColorSwatchPicker.d.ts

@@ -0,0 +1,43 @@
+export interface ColorSwatchPickerOption {
+    /** A hex colour: "#312c7e". */
+    value: string;
+    /** The colour's name, read out and shown on hover: "Midnight". Defaults to a description, like "dark indigo". */
+    label?: string;
+    /** Shown faded and skipped by the arrow keys, e.g. a colour another label has taken. */
+    disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+    /** The colours to choose from: hex strings, or { value, label } to give them names. */
+    options: Array<string | ColorSwatchPickerOption>;
+    /** The chosen colour. It matches an option whatever its case or length (#abc, #aabbcc). */
+    value?: string;
+    /** The starting colour when uncontrolled. Defaults to none. */
+    defaultValue?: string;
+    /** Called with the chosen option's value, as written in `options`. */
+    onChange?(color: string): void;
+    /** sm 24px, md 32px swatches.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    /** Fades every swatch and takes the picker out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    /** The form field name; the chosen colour is submitted under it. */
+    name?: string;
+    /** Names the group for screen readers, e.g. "Label colour". */
+    "aria-label"?: string;
+    /** Names the group by a visible heading's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of a hint or an error, read out with the group. */
+    "aria-describedby"?: string;
+    /** The group's id. */
+    id?: string;
+    /** Classes for the group, e.g. a width that sets where the rows wrap. */
+    className?: string;
+}
+/**
+ * Picks one colour from a set of swatches, in rows that wrap. It's a radio group: Tab moves into it, onto the chosen
+ * swatch, and the arrow keys move and choose. The chosen swatch has a ring and a check mark.
+ */
+export declare const ColorSwatchPicker: import("react").ForwardRefExoticComponent<ColorSwatchPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker/color.d.cts

@@ -0,0 +1,91 @@
+import { type PointerEvent as ReactPointerEvent } from "react";
+/** Red, green and blue from 0 to 255, alpha from 0 to 1. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Hue in degrees, saturation and brightness (value) from 0 to 100, alpha from 0 to 1. */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Hue in degrees, saturation and lightness from 0 to 100, alpha from 0 to 1. */
+export interface Hsla {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export declare const clamp: (n: number, min: number, max: number) => number;
+/** "#0d9488", "#0d9488cc", "#0d9" or "0d9488" → its channels; anything else → null. */
+export declare function parseHex(color: string): Rgba | null;
+/** Whether a hex colour spells out its alpha (#rgba or #rrggbbaa). */
+export declare const hasAlpha: (color: string) => boolean;
+/** Lowercase "#rrggbb", or "#rrggbbaa" with `alpha`. */
+export declare function toHex({ r, g, b, a }: Rgba, alpha?: boolean): string;
+/** The same colour written one way, so "#0D9488" and "#0d9488" compare equal. Invalid colours come back as given. */
+export declare function normalizeHex(color: string): string;
+export declare function rgbToHsv({ r, g, b, a }: Rgba): Hsva;
+export declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
+export declare function hsvToHsl({ h, s, v, a }: Hsva): Hsla;
+export declare function hslToHsv({ h, s, l, a }: Hsla): Hsva;
+/** A way of seeing a colour that a control edits, and how to read a hex into it without losing what a grey can't hold. */
+export interface ColorModel<M extends {
+    h: number;
+}> {
+    read(rgba: Rgba, previous: M | undefined): M;
+    write(model: M): Rgba;
+}
+export declare const hsvModel: ColorModel<Hsva>;
+export declare const hslModel: ColorModel<Hsla>;
+/**
+ * A hex colour that a parent may control, seen through a model (HSV or HSL). The model is kept between renders
+ * and only read again from the hex when the hex changes from outside, so greys and black keep their hue.
+ * `hue`, when given, is the hue to show while the colour is a grey.
+ */
+export declare function useColorModel<M extends {
+    h: number;
+}>(value: string | undefined, defaultValue: string, onChange: ((color: string) => void) | undefined, model: ColorModel<M>, { hue, alpha }?: {
+    hue?: number;
+    alpha?: boolean;
+}): {
+    value: M;
+    rgba: Rgba;
+    hex: string;
+    set: (next: M) => string;
+    latest: () => string;
+};
+/**
+ * Pointer dragging over an element: reports where the pointer is as fractions of its box (0 to 1, from the top
+ * left), keeps reporting outside it through pointer capture, and calls onEnd when the pointer lets go. onStart runs
+ * on press, to focus the control. `pointerFocus` is true from a press until a key or a blur: the control was focused
+ * by the pointer and shows no focus ring, the way :focus-visible would if it were a native control.
+ */
+export declare function useDrag({ onMove, onEnd, onStart, disabled, }: {
+    onMove(x: number, y: number): void;
+    onEnd(): void;
+    onStart?(): void;
+    disabled?: boolean;
+}): {
+    dragging: boolean;
+    pointerFocus: boolean;
+    /** For the input's onKeyDown and onBlur: the focus ring shows again. */
+    keyboard: () => void;
+    handlers: {
+        onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
+        onPointerMove(event: ReactPointerEvent<HTMLElement>): void;
+        onLostPointerCapture(): void;
+    };
+};
+/** Whether light (white) or dark (slate 900) ink reads better on a colour; a translucent colour is seen over white. */
+export declare function inkFor({ r, g, b, a }: Rgba): "light" | "dark";
+/** A short description of a colour for screen readers: "dark teal", "light grey", "greyish blue". */
+export declare function describeColor(rgba: Rgba): string;
+/** The pure hue, as a hex: what a hue slider's thumb shows. */
+export declare const hueHex: (h: number) => string;
+/** The six stops of the hue wheel, red to red. */
+export declare const hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";

package/dist/components/ColorPicker/color.d.ts

@@ -0,0 +1,91 @@
+import { type PointerEvent as ReactPointerEvent } from "react";
+/** Red, green and blue from 0 to 255, alpha from 0 to 1. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Hue in degrees, saturation and brightness (value) from 0 to 100, alpha from 0 to 1. */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Hue in degrees, saturation and lightness from 0 to 100, alpha from 0 to 1. */
+export interface Hsla {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export declare const clamp: (n: number, min: number, max: number) => number;
+/** "#0d9488", "#0d9488cc", "#0d9" or "0d9488" → its channels; anything else → null. */
+export declare function parseHex(color: string): Rgba | null;
+/** Whether a hex colour spells out its alpha (#rgba or #rrggbbaa). */
+export declare const hasAlpha: (color: string) => boolean;
+/** Lowercase "#rrggbb", or "#rrggbbaa" with `alpha`. */
+export declare function toHex({ r, g, b, a }: Rgba, alpha?: boolean): string;
+/** The same colour written one way, so "#0D9488" and "#0d9488" compare equal. Invalid colours come back as given. */
+export declare function normalizeHex(color: string): string;
+export declare function rgbToHsv({ r, g, b, a }: Rgba): Hsva;
+export declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
+export declare function hsvToHsl({ h, s, v, a }: Hsva): Hsla;
+export declare function hslToHsv({ h, s, l, a }: Hsla): Hsva;
+/** A way of seeing a colour that a control edits, and how to read a hex into it without losing what a grey can't hold. */
+export interface ColorModel<M extends {
+    h: number;
+}> {
+    read(rgba: Rgba, previous: M | undefined): M;
+    write(model: M): Rgba;
+}
+export declare const hsvModel: ColorModel<Hsva>;
+export declare const hslModel: ColorModel<Hsla>;
+/**
+ * A hex colour that a parent may control, seen through a model (HSV or HSL). The model is kept between renders
+ * and only read again from the hex when the hex changes from outside, so greys and black keep their hue.
+ * `hue`, when given, is the hue to show while the colour is a grey.
+ */
+export declare function useColorModel<M extends {
+    h: number;
+}>(value: string | undefined, defaultValue: string, onChange: ((color: string) => void) | undefined, model: ColorModel<M>, { hue, alpha }?: {
+    hue?: number;
+    alpha?: boolean;
+}): {
+    value: M;
+    rgba: Rgba;
+    hex: string;
+    set: (next: M) => string;
+    latest: () => string;
+};
+/**
+ * Pointer dragging over an element: reports where the pointer is as fractions of its box (0 to 1, from the top
+ * left), keeps reporting outside it through pointer capture, and calls onEnd when the pointer lets go. onStart runs
+ * on press, to focus the control. `pointerFocus` is true from a press until a key or a blur: the control was focused
+ * by the pointer and shows no focus ring, the way :focus-visible would if it were a native control.
+ */
+export declare function useDrag({ onMove, onEnd, onStart, disabled, }: {
+    onMove(x: number, y: number): void;
+    onEnd(): void;
+    onStart?(): void;
+    disabled?: boolean;
+}): {
+    dragging: boolean;
+    pointerFocus: boolean;
+    /** For the input's onKeyDown and onBlur: the focus ring shows again. */
+    keyboard: () => void;
+    handlers: {
+        onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
+        onPointerMove(event: ReactPointerEvent<HTMLElement>): void;
+        onLostPointerCapture(): void;
+    };
+};
+/** Whether light (white) or dark (slate 900) ink reads better on a colour; a translucent colour is seen over white. */
+export declare function inkFor({ r, g, b, a }: Rgba): "light" | "dark";
+/** A short description of a colour for screen readers: "dark teal", "light grey", "greyish blue". */
+export declare function describeColor(rgba: Rgba): string;
+/** The pure hue, as a hex: what a hue slider's thumb shows. */
+export declare const hueHex: (h: number) => string;
+/** The six stops of the hue wheel, red to red. */
+export declare const hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";

package/dist/components/DateField/DateField.d.cts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import { type ISODate } from "../Calendar/dates.cjs";
+export interface DateFieldProps {
+    /** The date as "YYYY-MM-DD", or "" while any part is empty. */
+    value?: ISODate;
+    /** @default "" */
+    defaultValue?: ISODate;
+    /** Called with "YYYY-MM-DD" when the date is complete and whenever it changes after that, and with "" when a part is cleared. */
+    onChange?(value: ISODate): void;
+    /** The earliest valid date, "YYYY-MM-DD". An earlier one shows the field as invalid. */
+    min?: ISODate;
+    /** The latest valid date, "YYYY-MM-DD". A later one shows the field as invalid. */
+    max?: ISODate;
+    /** The order of day, month and year and the separators between them follow this locale: dd/mm/yyyy in "en-IE",
+     * mm/dd/yyyy in "en-US", dd.mm.yyyy in "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid. A date outside
+     * min and max does this by itself.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** The date can be focused and read but not changed.
+     * @default false */
+    readOnly?: boolean;
+    /** The form field name: a hidden input carries the "YYYY-MM-DD" value. */
+    name?: string;
+    /** Inside the field, before the date: a 16px calendar icon. */
+    startContent?: ReactNode;
+    /** Goes on the group. Field sets it, and its label then names the group and focuses the first segment when clicked. */
+    id?: string;
+    /** Names the date for screen readers when there's no visible label. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Field points it at its hint and error; each segment is described by them. */
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A date typed into day, month and year segments in the locale's order, like macOS's date fields. Each segment
+ * takes digits and moves on when it's full; the arrow keys step it. Pair it with a Calendar in a Popover, or use
+ * DatePicker, when people would rather pick from a month.
+ */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DateField/DateField.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import { type ISODate } from "../Calendar/dates.js";
+export interface DateFieldProps {
+    /** The date as "YYYY-MM-DD", or "" while any part is empty. */
+    value?: ISODate;
+    /** @default "" */
+    defaultValue?: ISODate;
+    /** Called with "YYYY-MM-DD" when the date is complete and whenever it changes after that, and with "" when a part is cleared. */
+    onChange?(value: ISODate): void;
+    /** The earliest valid date, "YYYY-MM-DD". An earlier one shows the field as invalid. */
+    min?: ISODate;
+    /** The latest valid date, "YYYY-MM-DD". A later one shows the field as invalid. */
+    max?: ISODate;
+    /** The order of day, month and year and the separators between them follow this locale: dd/mm/yyyy in "en-IE",
+     * mm/dd/yyyy in "en-US", dd.mm.yyyy in "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid. A date outside
+     * min and max does this by itself.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** The date can be focused and read but not changed.
+     * @default false */
+    readOnly?: boolean;
+    /** The form field name: a hidden input carries the "YYYY-MM-DD" value. */
+    name?: string;
+    /** Inside the field, before the date: a 16px calendar icon. */
+    startContent?: ReactNode;
+    /** Goes on the group. Field sets it, and its label then names the group and focuses the first segment when clicked. */
+    id?: string;
+    /** Names the date for screen readers when there's no visible label. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Field points it at its hint and error; each segment is described by them. */
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A date typed into day, month and year segments in the locale's order, like macOS's date fields. Each segment
+ * takes digits and moves on when it's full; the arrow keys step it. Pair it with a Calendar in a Popover, or use
+ * DatePicker, when people would rather pick from a month.
+ */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DateField/SegmentedField.d.cts

@@ -0,0 +1,63 @@
+import { type ForwardedRef, type ReactNode } from "react";
+export type SegmentType = "day" | "month" | "year" | "hour" | "minute" | "second" | "dayPeriod";
+/** Values by segment; a key set to undefined clears that segment. */
+export type SegmentValues = {
+    [Type in SegmentType]?: number | undefined;
+};
+export interface Segment {
+    type: SegmentType;
+    /** Read out as the segment's name: "Day", "Hour". */
+    label: string;
+    value: number | undefined;
+    min: number;
+    max: number;
+    /** Shown while it's empty: "dd", "––". */
+    placeholder: string;
+    /** The value as shown: "07", "PM". */
+    format(value: number): string;
+    /** The value as read out (aria-valuetext): "10 – October". */
+    describe(value: number): string;
+    /** Up or Down on an empty segment starts here, without stepping. */
+    start: number;
+    /** Up and Down move by this, landing on its multiples. */
+    step?: number;
+    /** PageUp and PageDown move by this. */
+    page: number;
+    /** Past the max goes round to the min. The year stops instead. */
+    wrap: boolean;
+    /** Typing only sets the value once it's whole or the segment loses focus, so a year of 2026 doesn't pass through 0002. */
+    deferTyping?: boolean;
+    /** Letters that set a value: a and p for AM and PM. */
+    letters?: Record<string, number>;
+    /** Kept this many digits wide, so the field doesn't change width as it fills. */
+    width?: 2 | 4;
+}
+export type Part = Segment | {
+    type: "literal";
+    text: string;
+};
+export interface SegmentedFieldProps {
+    parts: Part[];
+    /** The field's whole value, for the hidden input. */
+    value: string;
+    onSegmentsChange(changes: SegmentValues): void;
+    /** Reads pasted text in the field's own format, such as "2026-10-13"; null when it can't. */
+    parsePaste?(text: string): SegmentValues | null;
+    /** The locale's digits, 0 to 9. */
+    digits: string[];
+    forwardedRef: ForwardedRef<HTMLDivElement>;
+    id?: string;
+    name?: string;
+    size: "sm" | "md";
+    isInvalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    startContent?: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export declare function SegmentedField({ parts, value, onSegmentsChange, parsePaste, digits, forwardedRef, id, name, size, isInvalid, disabled, readOnly, startContent, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: SegmentedFieldProps): import("react").JSX.Element;
+/** The locale's digits, 0 to 9, so typed and shown numbers follow its numbering system. */
+export declare function localeDigits(locale: string | undefined): string[];

package/dist/components/DateField/SegmentedField.d.ts

@@ -0,0 +1,63 @@
+import { type ForwardedRef, type ReactNode } from "react";
+export type SegmentType = "day" | "month" | "year" | "hour" | "minute" | "second" | "dayPeriod";
+/** Values by segment; a key set to undefined clears that segment. */
+export type SegmentValues = {
+    [Type in SegmentType]?: number | undefined;
+};
+export interface Segment {
+    type: SegmentType;
+    /** Read out as the segment's name: "Day", "Hour". */
+    label: string;
+    value: number | undefined;
+    min: number;
+    max: number;
+    /** Shown while it's empty: "dd", "––". */
+    placeholder: string;
+    /** The value as shown: "07", "PM". */
+    format(value: number): string;
+    /** The value as read out (aria-valuetext): "10 – October". */
+    describe(value: number): string;
+    /** Up or Down on an empty segment starts here, without stepping. */
+    start: number;
+    /** Up and Down move by this, landing on its multiples. */
+    step?: number;
+    /** PageUp and PageDown move by this. */
+    page: number;
+    /** Past the max goes round to the min. The year stops instead. */
+    wrap: boolean;
+    /** Typing only sets the value once it's whole or the segment loses focus, so a year of 2026 doesn't pass through 0002. */
+    deferTyping?: boolean;
+    /** Letters that set a value: a and p for AM and PM. */
+    letters?: Record<string, number>;
+    /** Kept this many digits wide, so the field doesn't change width as it fills. */
+    width?: 2 | 4;
+}
+export type Part = Segment | {
+    type: "literal";
+    text: string;
+};
+export interface SegmentedFieldProps {
+    parts: Part[];
+    /** The field's whole value, for the hidden input. */
+    value: string;
+    onSegmentsChange(changes: SegmentValues): void;
+    /** Reads pasted text in the field's own format, such as "2026-10-13"; null when it can't. */
+    parsePaste?(text: string): SegmentValues | null;
+    /** The locale's digits, 0 to 9. */
+    digits: string[];
+    forwardedRef: ForwardedRef<HTMLDivElement>;
+    id?: string;
+    name?: string;
+    size: "sm" | "md";
+    isInvalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    startContent?: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export declare function SegmentedField({ parts, value, onSegmentsChange, parsePaste, digits, forwardedRef, id, name, size, isInvalid, disabled, readOnly, startContent, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: SegmentedFieldProps): import("react").JSX.Element;
+/** The locale's digits, 0 to 9, so typed and shown numbers follow its numbering system. */
+export declare function localeDigits(locale: string | undefined): string[];

package/dist/components/DateField/TimeField.d.cts

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+export interface TimeFieldProps {
+    /** The time on a 24-hour clock, "HH:MM", or "HH:MM:SS" when granularity is "second"; "" while any part is empty. */
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    /** Called with "HH:MM" (or "HH:MM:SS") when the time is complete and whenever it changes after that, and with "" when a part is cleared. */
+    onChange?(value: string): void;
+    /** 12 shows hours 1–12 and an AM/PM segment; 24 shows 00–23. Defaults to the locale's clock. */
+    hourCycle?: 12 | 24;
+    /** "second" adds a seconds segment.
+     * @default "minute" */
+    granularity?: "minute" | "second";
+    /** Up and Down move the minutes by this much, landing on its multiples: 5, 15. Typed minutes can still be anything.
+     * @default 1 */
+    minuteStep?: number;
+    /** The earliest valid time, "HH:MM". An earlier one shows the field as invalid. */
+    min?: string;
+    /** The latest valid time, "HH:MM". A later one shows the field as invalid. */
+    max?: string;
+    /** The separators, the AM/PM words and where they go follow this locale. Defaults to the browser's. */
+    locale?: string;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid. A time outside
+     * min and max does this by itself.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** The time can be focused and read but not changed.
+     * @default false */
+    readOnly?: boolean;
+    /** The form field name: a hidden input carries the "HH:MM" value. */
+    name?: string;
+    /** Inside the field, before the time: a 16px clock icon. */
+    startContent?: ReactNode;
+    /** Goes on the group. Field sets it, and its label then names the group and focuses the first segment when clicked. */
+    id?: string;
+    /** Names the time for screen readers when there's no visible label. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Field points it at its hint and error; each segment is described by them. */
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A time typed into hour, minute and optional second segments, with AM/PM on a 12-hour clock. It works like
+ * DateField: digits fill a segment and move on, the arrow keys step it, and the value is always on a 24-hour clock.
+ */
+export declare const TimeField: import("react").ForwardRefExoticComponent<TimeFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DateField/TimeField.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+export interface TimeFieldProps {
+    /** The time on a 24-hour clock, "HH:MM", or "HH:MM:SS" when granularity is "second"; "" while any part is empty. */
+    value?: string;
+    /** @default "" */
+    defaultValue?: string;
+    /** Called with "HH:MM" (or "HH:MM:SS") when the time is complete and whenever it changes after that, and with "" when a part is cleared. */
+    onChange?(value: string): void;
+    /** 12 shows hours 1–12 and an AM/PM segment; 24 shows 00–23. Defaults to the locale's clock. */
+    hourCycle?: 12 | 24;
+    /** "second" adds a seconds segment.
+     * @default "minute" */
+    granularity?: "minute" | "second";
+    /** Up and Down move the minutes by this much, landing on its multiples: 5, 15. Typed minutes can still be anything.
+     * @default 1 */
+    minuteStep?: number;
+    /** The earliest valid time, "HH:MM". An earlier one shows the field as invalid. */
+    min?: string;
+    /** The latest valid time, "HH:MM". A later one shows the field as invalid. */
+    max?: string;
+    /** The separators, the AM/PM words and where they go follow this locale. Defaults to the browser's. */
+    locale?: string;
+    /** sm 32px for toolbars and settings rows, md 40px in forms.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the field as wrong: a red border, and a red halo when focused. Also sets aria-invalid. A time outside
+     * min and max does this by itself.
+     * @default false */
+    isInvalid?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** The time can be focused and read but not changed.
+     * @default false */
+    readOnly?: boolean;
+    /** The form field name: a hidden input carries the "HH:MM" value. */
+    name?: string;
+    /** Inside the field, before the time: a 16px clock icon. */
+    startContent?: ReactNode;
+    /** Goes on the group. Field sets it, and its label then names the group and focuses the first segment when clicked. */
+    id?: string;
+    /** Names the time for screen readers when there's no visible label. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Field points it at its hint and error; each segment is described by them. */
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * A time typed into hour, minute and optional second segments, with AM/PM on a 12-hour clock. It works like
+ * DateField: digits fill a segment and move on, the arrow keys step it, and the value is always on a 24-hour clock.
+ */
+export declare const TimeField: import("react").ForwardRefExoticComponent<TimeFieldProps & import("react").RefAttributes<HTMLDivElement>>;