@openwarelabs/ui 0.3.0 → 0.4.0

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>>;

package/dist/components/Field/Field.d.cts

@@ -1,18 +1,30 @@
 import { type ReactElement, type ReactNode } from "react";
+import { type ValidityMessages } from "../Form/Form.cjs";
 export interface FieldProps {
-    /** The label, set above the control. */
-    label: ReactNode;
+    /** The label, set above the control. Leave it out for a control that has its own, like a Checkbox. */
+    label?: ReactNode;
     /** One control: an Input, Textarea, Select, or any element that takes an id. */
     children: ReactElement;
     /** A muted line under the control. */
     hint?: ReactNode;
-    /** An error under the control; it also marks the control invalid. */
+    /** An error under the control; it also marks the control invalid. Inside a Form, it takes the place of the Form's. */
     error?: ReactNode;
+    /**
+     * The field's name, for a control with no `name` of its own (Select, Combobox, Switch, DatePicker): Field submits
+     * the control's `value` (or `checked`) under it in a hidden input, and inside a Form shows the Form's error for it.
+     * The control must be controlled; a string, a number, true or an array of them is sent.
+     */
+    name?: string;
+    /**
+     * Inside a Form, what to say when one of the browser's checks fails, in place of its own message: one string for
+     * any check, or one per check, like { valueMissing: "Enter your work email.", typeMismatch: "…" }.
+     */
+    errorMessages?: ValidityMessages;
     className?: string;
 }
 /**
  * A label above a control, with an optional hint and error below. Field wires them together:
  * it gives the control an id (unless it has one), points aria-describedby at the hint and error,
- * and marks it invalid when there is an error.
+ * and marks it invalid when there is an error. Inside a Form, it shows the Form's error for its control's name.
  */
-export declare function Field({ label, children, hint, error, className }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, children, hint, error, name: nameProp, errorMessages, className }: FieldProps): import("react").JSX.Element;

package/dist/components/Field/Field.d.ts

@@ -1,18 +1,30 @@
 import { type ReactElement, type ReactNode } from "react";
+import { type ValidityMessages } from "../Form/Form.js";
 export interface FieldProps {
-    /** The label, set above the control. */
-    label: ReactNode;
+    /** The label, set above the control. Leave it out for a control that has its own, like a Checkbox. */
+    label?: ReactNode;
     /** One control: an Input, Textarea, Select, or any element that takes an id. */
     children: ReactElement;
     /** A muted line under the control. */
     hint?: ReactNode;
-    /** An error under the control; it also marks the control invalid. */
+    /** An error under the control; it also marks the control invalid. Inside a Form, it takes the place of the Form's. */
     error?: ReactNode;
+    /**
+     * The field's name, for a control with no `name` of its own (Select, Combobox, Switch, DatePicker): Field submits
+     * the control's `value` (or `checked`) under it in a hidden input, and inside a Form shows the Form's error for it.
+     * The control must be controlled; a string, a number, true or an array of them is sent.
+     */
+    name?: string;
+    /**
+     * Inside a Form, what to say when one of the browser's checks fails, in place of its own message: one string for
+     * any check, or one per check, like { valueMissing: "Enter your work email.", typeMismatch: "…" }.
+     */
+    errorMessages?: ValidityMessages;
     className?: string;
 }
 /**
  * A label above a control, with an optional hint and error below. Field wires them together:
  * it gives the control an id (unless it has one), points aria-describedby at the hint and error,
- * and marks it invalid when there is an error.
+ * and marks it invalid when there is an error. Inside a Form, it shows the Form's error for its control's name.
  */
-export declare function Field({ label, children, hint, error, className }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, children, hint, error, name: nameProp, errorMessages, className }: FieldProps): import("react").JSX.Element;

package/dist/components/FileDropZone/FileDropZone.d.cts

@@ -18,7 +18,7 @@ export interface FileDropZoneProps {
      * @default <UploadIcon /> */
     icon?: ReactNode;
     disabled?: boolean;
-    /** The form field name for the file input. */
+    /** The form field name for the file input. A form submits the files from the last accepted pick or drop. */
     name?: string;
     className?: string;
 }

package/dist/components/FileDropZone/FileDropZone.d.ts

@@ -18,7 +18,7 @@ export interface FileDropZoneProps {
      * @default <UploadIcon /> */
     icon?: ReactNode;
     disabled?: boolean;
-    /** The form field name for the file input. */
+    /** The form field name for the file input. A form submits the files from the last accepted pick or drop. */
     name?: string;
     className?: string;
 }