@openwarelabs/ui 0.3.1 → 0.5.0

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

package/dist/components/Form/Form.d.cts

@@ -0,0 +1,63 @@
+import { type FormEvent, type FormHTMLAttributes, type MutableRefObject, type ReactNode, type RefObject } from "react";
+/** What onSubmit and validate get: each name in the form with its value, or a string[] when the name appears more than once. */
+export type FormValues = Record<string, string | string[]>;
+/** Messages by field name. */
+export type FormErrors = Partial<Record<string, string>>;
+/** The browser's own checks, by their ValidityState names. */
+export type ValidityCheck = "valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput";
+/** What to say when a browser check fails: one message for any of them, or one per check. */
+export type ValidityMessages = string | Partial<Record<ValidityCheck, string>>;
+/** What a Form tells the components inside it, through the render function or useFormStatus(). */
+export interface FormStatus {
+    /** True while the promise onSubmit returned is pending. */
+    isSubmitting: boolean;
+    /** The errors showing now, by field name. */
+    errors: FormErrors;
+}
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "children"> {
+    /**
+     * Called with the values once every check passes. Return a promise to keep the form busy until it settles; if it
+     * rejects, the error's message shows in FormError ("That didn't work. Try again." when it has none). Without
+     * onSubmit, a valid form submits the usual way, to its `action`.
+     */
+    onSubmit?(values: FormValues, event: FormEvent<HTMLFormElement>): unknown;
+    /** Checks the values after the browser's own checks, for rules it can't express: return { [name]: message } for what's wrong. */
+    validate?(values: FormValues): FormErrors | void;
+    /** Errors from the server, by field name. Each shows under its field until the person changes that field. */
+    validationErrors?: FormErrors;
+    /** The fields and buttons, or a function of the form's status: ({ isSubmitting, errors }) => … */
+    children?: ReactNode | ((status: FormStatus) => ReactNode);
+}
+/** @internal What a Field tells its Form, so the Form can word its errors, focus it and tell which field lost focus. */
+export interface FormFieldEntry {
+    name: string | undefined;
+    root: RefObject<HTMLElement>;
+    controlId: string;
+    errorMessages: ValidityMessages | undefined;
+}
+interface FormContextValue {
+    status: FormStatus;
+    formError: string | undefined;
+    register(entry: MutableRefObject<FormFieldEntry>): () => void;
+    changed(name: string): void;
+    addErrorSlot(): () => void;
+}
+/** @internal */
+export declare const FormContext: import("react").Context<FormContextValue | null>;
+/**
+ * A form that checks its fields before it submits. On submit it runs the browser's checks (required, type, minLength,
+ * pattern, min, max…), then `validate`, then any `validationErrors`; each message shows under its Field and focus goes to
+ * the first wrong field. Only when everything passes does it call onSubmit with the values.
+ */
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export interface FormErrorProps {
+    className?: string;
+}
+/**
+ * Where a Form says why a submission failed: the message from a rejected onSubmit, in a danger Alert (role="alert").
+ * Put it just above the buttons. Without one, the Form shows the message at its end.
+ */
+export declare function FormError({ className }: FormErrorProps): import("react").JSX.Element | null;
+/** The status of the Form around a component, for a submit button that shows `loading` while it submits. */
+export declare function useFormStatus(): FormStatus;
+export {};

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,63 @@
+import { type FormEvent, type FormHTMLAttributes, type MutableRefObject, type ReactNode, type RefObject } from "react";
+/** What onSubmit and validate get: each name in the form with its value, or a string[] when the name appears more than once. */
+export type FormValues = Record<string, string | string[]>;
+/** Messages by field name. */
+export type FormErrors = Partial<Record<string, string>>;
+/** The browser's own checks, by their ValidityState names. */
+export type ValidityCheck = "valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput";
+/** What to say when a browser check fails: one message for any of them, or one per check. */
+export type ValidityMessages = string | Partial<Record<ValidityCheck, string>>;
+/** What a Form tells the components inside it, through the render function or useFormStatus(). */
+export interface FormStatus {
+    /** True while the promise onSubmit returned is pending. */
+    isSubmitting: boolean;
+    /** The errors showing now, by field name. */
+    errors: FormErrors;
+}
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "children"> {
+    /**
+     * Called with the values once every check passes. Return a promise to keep the form busy until it settles; if it
+     * rejects, the error's message shows in FormError ("That didn't work. Try again." when it has none). Without
+     * onSubmit, a valid form submits the usual way, to its `action`.
+     */
+    onSubmit?(values: FormValues, event: FormEvent<HTMLFormElement>): unknown;
+    /** Checks the values after the browser's own checks, for rules it can't express: return { [name]: message } for what's wrong. */
+    validate?(values: FormValues): FormErrors | void;
+    /** Errors from the server, by field name. Each shows under its field until the person changes that field. */
+    validationErrors?: FormErrors;
+    /** The fields and buttons, or a function of the form's status: ({ isSubmitting, errors }) => … */
+    children?: ReactNode | ((status: FormStatus) => ReactNode);
+}
+/** @internal What a Field tells its Form, so the Form can word its errors, focus it and tell which field lost focus. */
+export interface FormFieldEntry {
+    name: string | undefined;
+    root: RefObject<HTMLElement>;
+    controlId: string;
+    errorMessages: ValidityMessages | undefined;
+}
+interface FormContextValue {
+    status: FormStatus;
+    formError: string | undefined;
+    register(entry: MutableRefObject<FormFieldEntry>): () => void;
+    changed(name: string): void;
+    addErrorSlot(): () => void;
+}
+/** @internal */
+export declare const FormContext: import("react").Context<FormContextValue | null>;
+/**
+ * A form that checks its fields before it submits. On submit it runs the browser's checks (required, type, minLength,
+ * pattern, min, max…), then `validate`, then any `validationErrors`; each message shows under its Field and focus goes to
+ * the first wrong field. Only when everything passes does it call onSubmit with the values.
+ */
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export interface FormErrorProps {
+    className?: string;
+}
+/**
+ * Where a Form says why a submission failed: the message from a rejected onSubmit, in a danger Alert (role="alert").
+ * Put it just above the buttons. Without one, the Form shows the message at its end.
+ */
+export declare function FormError({ className }: FormErrorProps): import("react").JSX.Element | null;
+/** The status of the Form around a component, for a submit button that shows `loading` while it submits. */
+export declare function useFormStatus(): FormStatus;
+export {};

package/dist/components/InputOTP/InputOTP.d.cts

@@ -22,10 +22,16 @@ export interface InputOTPProps {
     "aria-label"?: string;
     /** The form field name; a hidden input carries the whole code. */
     name?: string;
+    /** Names the code by another element's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it, read from every box; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the first box, so a Field's label points at it and clicking the label starts there; Field sets this. */
+    id?: string;
     className?: string;
 }
 /**
  * A one-time code in separate boxes. Typing moves forward, Backspace moves back,
  * and pasting a code fills every box. The browser can fill it from a text message.
  */
-export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, name, className, }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, name, className, }: InputOTPProps): import("react").JSX.Element;

package/dist/components/InputOTP/InputOTP.d.ts

@@ -22,10 +22,16 @@ export interface InputOTPProps {
     "aria-label"?: string;
     /** The form field name; a hidden input carries the whole code. */
     name?: string;
+    /** Names the code by another element's id, in place of aria-label. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it, read from every box; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the first box, so a Field's label points at it and clicking the label starts there; Field sets this. */
+    id?: string;
     className?: string;
 }
 /**
  * A one-time code in separate boxes. Typing moves forward, Backspace moves back,
  * and pasting a code fills every box. The browser can fill it from a text message.
  */
-export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, name, className, }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTP({ length, value, defaultValue, onChange, onComplete, type, groupSize, isInvalid, disabled, autoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, name, className, }: InputOTPProps): import("react").JSX.Element;

package/dist/components/ListBox/ListBox.d.cts

@@ -0,0 +1,65 @@
+import { type ReactElement, type ReactNode, type RefAttributes } from "react";
+import type { SelectOption } from "../Select/Select.cjs";
+/** An option, shaped like Select's, with an optional icon. */
+export interface ListBoxOption extends SelectOption {
+    /** A 16px icon between the checkmark and the label. */
+    icon?: ReactNode;
+    /** Plain text for type-to-find, when `label` isn't a string. */
+    textValue?: string;
+}
+/** Options under a heading, like a Select's groups. */
+export interface ListBoxGroup {
+    /** The heading, shown in uppercase above the options and read out as the group's name. */
+    label: string;
+    options: ListBoxOption[];
+}
+export type ListBoxItem = ListBoxOption | ListBoxGroup;
+export type ListBoxSelectionMode = "single" | "multiple";
+/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
+export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
+    /** The options, and groups of options under a heading. */
+    options: ListBoxItem[];
+    /** `single` chooses one option; `multiple` any number.
+     * @default "single" */
+    selectionMode?: Mode;
+    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
+    value?: Mode extends "multiple" ? string[] : string;
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: Mode extends "multiple" ? string[] : string;
+    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
+    onChange?(value: Mode extends "multiple" ? string[] : string): void;
+    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** Shown in the list when there are no options.
+     * @default "No options" */
+    emptyMessage?: ReactNode;
+    /** Scrolls the options past this height, e.g. 240 or "40vh". */
+    maxHeight?: number | string;
+    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
+     * @default false */
+    isInvalid?: boolean;
+    /** The options can be moved through and read, but the selection can't change.
+     * @default false */
+    isReadOnly?: boolean;
+    /** Fades the list and takes it out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    id?: string;
+    /** Names the list for screen readers when it isn't in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
+export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
+}
+/**
+ * Select's list of options on its own: a choice that stays on the page. `selectionMode="multiple"` makes `value` an array.
+ */
+export declare const ListBox: <Mode extends ListBoxSelectionMode = "single">(props: ListBoxModeProps<Mode> & RefAttributes<HTMLDivElement>) => ReactElement | null;

package/dist/components/ListBox/ListBox.d.ts

@@ -0,0 +1,65 @@
+import { type ReactElement, type ReactNode, type RefAttributes } from "react";
+import type { SelectOption } from "../Select/Select.js";
+/** An option, shaped like Select's, with an optional icon. */
+export interface ListBoxOption extends SelectOption {
+    /** A 16px icon between the checkmark and the label. */
+    icon?: ReactNode;
+    /** Plain text for type-to-find, when `label` isn't a string. */
+    textValue?: string;
+}
+/** Options under a heading, like a Select's groups. */
+export interface ListBoxGroup {
+    /** The heading, shown in uppercase above the options and read out as the group's name. */
+    label: string;
+    options: ListBoxOption[];
+}
+export type ListBoxItem = ListBoxOption | ListBoxGroup;
+export type ListBoxSelectionMode = "single" | "multiple";
+/** ListBox's props for one selection mode: `value` is a string in single mode and an array in multiple mode. */
+export interface ListBoxModeProps<Mode extends ListBoxSelectionMode> {
+    /** The options, and groups of options under a heading. */
+    options: ListBoxItem[];
+    /** `single` chooses one option; `multiple` any number.
+     * @default "single" */
+    selectionMode?: Mode;
+    /** The selected option's value in single mode ("" for none), or the selected values in multiple mode. */
+    value?: Mode extends "multiple" ? string[] : string;
+    /** The starting value when uncontrolled.
+     * @default "" or [] */
+    defaultValue?: Mode extends "multiple" ? string[] : string;
+    /** Called with the new value: a string in single mode, the selected values in the options' order in multiple mode. */
+    onChange?(value: Mode extends "multiple" ? string[] : string): void;
+    /** Keeps at least one option selected: choosing the selected option again doesn't clear it.
+     * @default false */
+    disallowEmptySelection?: boolean;
+    /** Shown in the list when there are no options.
+     * @default "No options" */
+    emptyMessage?: ReactNode;
+    /** Scrolls the options past this height, e.g. 240 or "40vh". */
+    maxHeight?: number | string;
+    /** md rows are 36px; sm rows are 32px with 12px text, like a small Select's list.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** Shows the list as wrong: a red border, and a red halo when focused. Also sets aria-invalid. Field passes it.
+     * @default false */
+    isInvalid?: boolean;
+    /** The options can be moved through and read, but the selection can't change.
+     * @default false */
+    isReadOnly?: boolean;
+    /** Fades the list and takes it out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    id?: string;
+    /** Names the list for screen readers when it isn't in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/** ListBox's props. `value`, `defaultValue` and `onChange` take a string in single mode and an array in multiple mode. */
+export interface ListBoxProps extends ListBoxModeProps<ListBoxSelectionMode> {
+}
+/**
+ * Select's list of options on its own: a choice that stays on the page. `selectionMode="multiple"` makes `value` an array.
+ */
+export declare const ListBox: <Mode extends ListBoxSelectionMode = "single">(props: ListBoxModeProps<Mode> & RefAttributes<HTMLDivElement>) => ReactElement | null;

package/dist/components/Meter/Meter.d.cts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import type { ProgressTone } from "../Progress/Progress.cjs";
+export interface MeterProps {
+    /** The amount measured, from min to max. */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** Shown above the bar, and names it for screen readers. */
+    label?: ReactNode;
+    /** Shows the value label at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /**
+     * The text shown and read out for the value: a string ("Strong"), or a function given the value, min and max
+     * formatted with `formatOptions`, such as `({ value, max }) => \`${value} of ${max}\``. Defaults to the formatted value.
+     */
+    valueLabel?: string | ((formatted: {
+        value: string;
+        min: string;
+        max: string;
+    }) => string);
+    /**
+     * How the value is written, as Intl.NumberFormat options. The percent style shows where the value sits in the range;
+     * any other formats the value itself, such as `{ style: "unit", unit: "gigabyte" }`.
+     * @default { style: "percent" }
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The locale numbers are written in, such as "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** The fill's colour. Leave it out to work it out from `low`, `high` and `optimum`; with none of those, it's primary. */
+    tone?: ProgressTone;
+    /** Values below this are in the low range, as on the meter element.
+     * @default min */
+    low?: number;
+    /** Values above this are in the high range.
+     * @default max */
+    high?: number;
+    /**
+     * The best value. The range it's in is good (success), the middle range otherwise middling (warning), and the range
+     * at the far end bad (danger). With optimum between low and high, both outer ranges are middling.
+     * @default halfway between min and max
+     */
+    optimum?: number;
+    /** sm is 4px; md is 8px.
+     * @default "sm" */
+    size?: "sm" | "md";
+    /** Draws the bar as this many separate blocks, such as 4 for a password's strength. */
+    segments?: number;
+    id?: string;
+    /** Names the meter for screen readers when there's no `label`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * An amount within a known range: storage used, runs against a plan's limit, a password's strength. Unlike ProgressBar,
+ * it doesn't mean something will finish.
+ */
+export declare function Meter({ value, min, max, label, showValue, valueLabel, formatOptions, locale, tone, low, high, optimum, size, segments, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, }: MeterProps): import("react").JSX.Element;

package/dist/components/Meter/Meter.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import type { ProgressTone } from "../Progress/Progress.js";
+export interface MeterProps {
+    /** The amount measured, from min to max. */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** Shown above the bar, and names it for screen readers. */
+    label?: ReactNode;
+    /** Shows the value label at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /**
+     * The text shown and read out for the value: a string ("Strong"), or a function given the value, min and max
+     * formatted with `formatOptions`, such as `({ value, max }) => \`${value} of ${max}\``. Defaults to the formatted value.
+     */
+    valueLabel?: string | ((formatted: {
+        value: string;
+        min: string;
+        max: string;
+    }) => string);
+    /**
+     * How the value is written, as Intl.NumberFormat options. The percent style shows where the value sits in the range;
+     * any other formats the value itself, such as `{ style: "unit", unit: "gigabyte" }`.
+     * @default { style: "percent" }
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The locale numbers are written in, such as "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** The fill's colour. Leave it out to work it out from `low`, `high` and `optimum`; with none of those, it's primary. */
+    tone?: ProgressTone;
+    /** Values below this are in the low range, as on the meter element.
+     * @default min */
+    low?: number;
+    /** Values above this are in the high range.
+     * @default max */
+    high?: number;
+    /**
+     * The best value. The range it's in is good (success), the middle range otherwise middling (warning), and the range
+     * at the far end bad (danger). With optimum between low and high, both outer ranges are middling.
+     * @default halfway between min and max
+     */
+    optimum?: number;
+    /** sm is 4px; md is 8px.
+     * @default "sm" */
+    size?: "sm" | "md";
+    /** Draws the bar as this many separate blocks, such as 4 for a password's strength. */
+    segments?: number;
+    id?: string;
+    /** Names the meter for screen readers when there's no `label`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    className?: string;
+}
+/**
+ * An amount within a known range: storage used, runs against a plan's limit, a password's strength. Unlike ProgressBar,
+ * it doesn't mean something will finish.
+ */
+export declare function Meter({ value, min, max, label, showValue, valueLabel, formatOptions, locale, tone, low, high, optimum, size, segments, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, }: MeterProps): import("react").JSX.Element;

package/dist/components/PromptInput/PromptInput.d.cts

@@ -0,0 +1,95 @@
+import { type KeyboardEvent, type ReactNode } from "react";
+/** A file attached to the message, shown as a chip above the text. */
+export interface PromptAttachment {
+    /** Identifies it to onRemoveAttachment, and keys its chip. */
+    id: string;
+    /** The file name, shown on the chip (a long one is cut short before its extension) and read out by its remove button. */
+    name: string;
+    /** Bytes, shown under the name: "48 kB". */
+    size?: number;
+    /** The MIME type, such as "image/png". With the name, it picks the chip's icon when there's no preview. */
+    type?: string;
+    /** An image to show as the chip's thumbnail: an object URL from URL.createObjectURL, or any image URL. */
+    previewUrl?: string;
+}
+export interface PromptInputProps {
+    /** The text, when controlled. Clear it yourself in onSubmit. */
+    value?: string;
+    /** The starting text when uncontrolled. The box clears itself after each send.
+     * @default "" */
+    defaultValue?: string;
+    /** Called with the text on every change. */
+    onChange?(value: string): void;
+    /**
+     * Called on Enter or the send button with the text (trimmed) and the attachments. It isn't called while there's
+     * nothing to send (no text and no attachments), while streaming, or while disabled.
+     */
+    onSubmit?(value: string, attachments: PromptAttachment[]): void;
+    /** The agent is replying: the send button becomes a Stop button and Escape in the box stops it. The next message can
+     * be typed meanwhile, but not sent.
+     * @default false */
+    isStreaming?: boolean;
+    /** Called by the Stop button, and by Escape in the box, while streaming. */
+    onStop?(): void;
+    /** The files attached so far, as chips above the text. You keep the list: add to it in onAttach and take from it in
+     * onRemoveAttachment. */
+    attachments?: PromptAttachment[];
+    /** Called with the files picked with the paperclip, pasted, or dropped on the box. Giving it shows the paperclip. */
+    onAttach?(files: File[]): void;
+    /** Called with an attachment's id when its remove button is pressed. Giving it shows the remove buttons. */
+    onRemoveAttachment?(id: string): void;
+    /** File types to accept, as for <input accept>: "image/*,.log,.txt". Other files are turned away with a message. */
+    accept?: string;
+    /** Lets several files be attached at once.
+     * @default true */
+    multiple?: boolean;
+    /** Controls at the start of the toolbar under the text, after the paperclip: a model Select, a toggle. Buttons here
+     * should be size sm. */
+    startActions?: ReactNode;
+    /** Controls at the end of the toolbar, before the send button. */
+    endActions?: ReactNode;
+    /** A muted line under the box, such as how to send: "Enter to send, Shift + Enter for a new line". The text box
+     * points to it with aria-describedby. */
+    hint?: ReactNode;
+    /** @default "Message the agent…" */
+    placeholder?: string;
+    /** Names the text box for screen readers. It's "Message" unless something else labels it: aria-labelledby, or an id
+     * that a <label> points to, as in a Field. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** The text box's id. Field sets it. */
+    id?: string;
+    /** Marks the box invalid: a danger border, and aria-invalid on the text box. Field sets it from its error.
+     * @default false */
+    isInvalid?: boolean;
+    /** Turns off the text box, its buttons and the controls in the toolbar, and fades the box.
+     * @default false */
+    disabled?: boolean;
+    /** Focuses the text box when it appears. Use it where typing is plainly the next step, such as a new chat.
+     * @default false */
+    autoFocus?: boolean;
+    /** The most characters the text can have. A quiet count shows once it's 80% full. */
+    maxLength?: number;
+    /** The rows of text the box shows when it's empty.
+     * @default 1 */
+    minRows?: number;
+    /** The most rows it grows to; past that, the text scrolls.
+     * @default 8 */
+    maxRows?: number;
+    /** md for a chat page, sm for a side panel or a reply box.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** The locale for attachment sizes and the character count, such as "de-CH". Defaults to the browser's. */
+    locale?: string;
+    /** Called for each key in the text box before the box's own keys. Call event.preventDefault() to take a key over, for
+     * example the Up arrow to edit the last message. */
+    onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement>): void;
+    /** Classes for the outer element, which holds the box and the hint. */
+    className?: string;
+}
+/**
+ * The box you write to the agent in. Enter sends and Shift+Enter starts a new line; it grows with the text, takes files
+ * from a picker, the clipboard or a drop, and turns its send button into Stop while the agent replies.
+ */
+export declare const PromptInput: import("react").ForwardRefExoticComponent<PromptInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;