@openwarelabs/ui 0.0.0-stage → 0.1.1

package/dist/components/Select/Select.d.cts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    /** Plain text for type-to-find and the trigger's tooltip, when `label` isn't a string. */
+    textValue?: string;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+export type SelectItem = SelectOption | SelectGroup;
+export interface SelectProps {
+    value: string;
+    options: SelectItem[];
+    onChange(value: string): void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    id?: string;
+    disabled?: boolean;
+    /** Shown when no option matches `value`. Default "Select…". */
+    placeholder?: string;
+    size?: "sm" | "md";
+    isInvalid?: boolean;
+    /** Classes for the trigger, e.g. a width. */
+    className?: string;
+    /** Classes for the trigger's and options' text, e.g. a monospace class. */
+    valueClassName?: string;
+}
+/**
+ * A dropdown: a button that opens a listbox of options, in place of a native <select>.
+ * It works with the keyboard like a select (arrows, Home/End, type to find, Enter/Space to pick,
+ * Escape/Tab to close), keeps focus on the trigger, and its menu sits in the top layer so it
+ * isn't clipped by dialogs or scroll areas.
+ */
+export declare function Select({ value, options, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, disabled, placeholder, size, isInvalid, className, valueClassName, }: SelectProps): import("react").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    /** Plain text for type-to-find and the trigger's tooltip, when `label` isn't a string. */
+    textValue?: string;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+export type SelectItem = SelectOption | SelectGroup;
+export interface SelectProps {
+    value: string;
+    options: SelectItem[];
+    onChange(value: string): void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    id?: string;
+    disabled?: boolean;
+    /** Shown when no option matches `value`. Default "Select…". */
+    placeholder?: string;
+    size?: "sm" | "md";
+    isInvalid?: boolean;
+    /** Classes for the trigger, e.g. a width. */
+    className?: string;
+    /** Classes for the trigger's and options' text, e.g. a monospace class. */
+    valueClassName?: string;
+}
+/**
+ * A dropdown: a button that opens a listbox of options, in place of a native <select>.
+ * It works with the keyboard like a select (arrows, Home/End, type to find, Enter/Space to pick,
+ * Escape/Tab to close), keeps focus on the trigger, and its menu sits in the top layer so it
+ * isn't clipped by dialogs or scroll areas.
+ */
+export declare function Select({ value, options, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, id, disabled, placeholder, size, isInvalid, className, valueClassName, }: SelectProps): import("react").JSX.Element;

package/dist/components/Skeleton/Skeleton.d.cts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from "react";
+export interface SkeletonProps {
+    /** CSS width, e.g. "40%" or 120. Default 100%. */
+    width?: CSSProperties["width"];
+    /** CSS height. Default 14px. */
+    height?: CSSProperties["height"];
+    /** The lighter grey, for second lines and control shapes. */
+    soft?: boolean;
+    /** `bar` has round ends; `block` has the field corners, for control placeholders. */
+    shape?: "bar" | "block";
+    className?: string;
+}
+/** One grey placeholder bar. Wrap a group of them in something with role="status" and a label. */
+export declare function Skeleton({ width, height, soft, shape, className }: SkeletonProps): import("react").JSX.Element;
+export interface SkeletonRowsProps {
+    /** Read out by screen readers while it's showing. Default "Loading". */
+    label?: string;
+    rows?: number;
+    /** Waits this long before appearing, so content that loads quickly never flashes it. Default 150. */
+    delayMs?: number;
+}
+/**
+ * A placeholder in the shape of settings rows (a label and description on the left, a control on the right),
+ * so a panel keeps its layout while it loads.
+ */
+export declare function SkeletonRows({ label, rows, delayMs }: SkeletonRowsProps): import("react").JSX.Element;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from "react";
+export interface SkeletonProps {
+    /** CSS width, e.g. "40%" or 120. Default 100%. */
+    width?: CSSProperties["width"];
+    /** CSS height. Default 14px. */
+    height?: CSSProperties["height"];
+    /** The lighter grey, for second lines and control shapes. */
+    soft?: boolean;
+    /** `bar` has round ends; `block` has the field corners, for control placeholders. */
+    shape?: "bar" | "block";
+    className?: string;
+}
+/** One grey placeholder bar. Wrap a group of them in something with role="status" and a label. */
+export declare function Skeleton({ width, height, soft, shape, className }: SkeletonProps): import("react").JSX.Element;
+export interface SkeletonRowsProps {
+    /** Read out by screen readers while it's showing. Default "Loading". */
+    label?: string;
+    rows?: number;
+    /** Waits this long before appearing, so content that loads quickly never flashes it. Default 150. */
+    delayMs?: number;
+}
+/**
+ * A placeholder in the shape of settings rows (a label and description on the left, a control on the right),
+ * so a panel keeps its layout while it loads.
+ */
+export declare function SkeletonRows({ label, rows, delayMs }: SkeletonRowsProps): import("react").JSX.Element;

package/dist/components/Slider/Slider.d.cts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+type SliderValue = number | [number, number];
+export interface SliderProps<V extends SliderValue = number> {
+    /** A number, or a [low, high] pair for a range with two handles. */
+    value?: V;
+    defaultValue?: V;
+    onChange?(value: NoInfer<V>): void;
+    /** Called when the person lets go, for work too slow to do on every move. */
+    onChangeEnd?(value: NoInfer<V>): void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the current value at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /** Turns a number into the text shown and read out, e.g. (v) => `${v}%`. */
+    formatValue?(value: number): string;
+    /** Names the slider when there's no visible label. */
+    "aria-label"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Picks a number, or a range, by dragging. It's built on native range inputs, so the arrow keys,
+ * PageUp, PageDown, Home and End work as people expect.
+ */
+export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
+export {};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+type SliderValue = number | [number, number];
+export interface SliderProps<V extends SliderValue = number> {
+    /** A number, or a [low, high] pair for a range with two handles. */
+    value?: V;
+    defaultValue?: V;
+    onChange?(value: NoInfer<V>): void;
+    /** Called when the person lets go, for work too slow to do on every move. */
+    onChangeEnd?(value: NoInfer<V>): void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** Shown above the track, and names the slider for screen readers. */
+    label?: ReactNode;
+    /** Shows the current value at the right of the label.
+     * @default true */
+    showValue?: boolean;
+    /** Turns a number into the text shown and read out, e.g. (v) => `${v}%`. */
+    formatValue?(value: number): string;
+    /** Names the slider when there's no visible label. */
+    "aria-label"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Picks a number, or a range, by dragging. It's built on native range inputs, so the arrow keys,
+ * PageUp, PageDown, Home and End work as people expect.
+ */
+export declare function Slider<V extends SliderValue = number>({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, "aria-label": ariaLabel, disabled, className, }: SliderProps<V>): import("react").JSX.Element;
+export {};

package/dist/components/Spinner/Spinner.d.cts

@@ -0,0 +1,14 @@
+export interface SpinnerProps {
+    /** sm 14px, md 20px, lg 28px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** `primary` draws the arc in the progress colour; `current` takes the text colour, for use inside buttons.
+     * @default "primary" */
+    tone?: "primary" | "current";
+    /** Read out by screen readers. Pass an empty string when something nearby already says it's loading.
+     * @default "Loading" */
+    label?: string;
+    className?: string;
+}
+/** A small spinning ring for work that takes a moment. */
+export declare function Spinner({ size, tone, label, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+export interface SpinnerProps {
+    /** sm 14px, md 20px, lg 28px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** `primary` draws the arc in the progress colour; `current` takes the text colour, for use inside buttons.
+     * @default "primary" */
+    tone?: "primary" | "current";
+    /** Read out by screen readers. Pass an empty string when something nearby already says it's loading.
+     * @default "Loading" */
+    label?: string;
+    className?: string;
+}
+/** A small spinning ring for work that takes a moment. */
+export declare function Spinner({ size, tone, label, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Stat/Stat.d.cts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface StatProps {
+    /** What's measured, in a few words: "Tokens this week". */
+    label: ReactNode;
+    /** The number, formatted: "1.2M", "€48.20". */
+    value: ReactNode;
+    /** A 14px icon on a small tile beside the label. */
+    icon?: ReactNode;
+    /** The change since last time, as text: "+12%", "−3". */
+    change?: string;
+    /** Whether the change is good or bad. Worked out from a leading + or − when left out; costs going up are negative, so set it. */
+    changeTone?: "positive" | "negative" | "neutral";
+    /** A muted line under the value: "vs last week". */
+    description?: ReactNode;
+    /** Recent values for a small line chart under the number. */
+    trend?: number[];
+    className?: string;
+}
+/** One headline number with its label, change and trend, for overview cards. */
+export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;

package/dist/components/Stat/Stat.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface StatProps {
+    /** What's measured, in a few words: "Tokens this week". */
+    label: ReactNode;
+    /** The number, formatted: "1.2M", "€48.20". */
+    value: ReactNode;
+    /** A 14px icon on a small tile beside the label. */
+    icon?: ReactNode;
+    /** The change since last time, as text: "+12%", "−3". */
+    change?: string;
+    /** Whether the change is good or bad. Worked out from a leading + or − when left out; costs going up are negative, so set it. */
+    changeTone?: "positive" | "negative" | "neutral";
+    /** A muted line under the value: "vs last week". */
+    description?: ReactNode;
+    /** Recent values for a small line chart under the number. */
+    trend?: number[];
+    className?: string;
+}
+/** One headline number with its label, change and trend, for overview cards. */
+export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;

package/dist/components/Steps/Steps.d.cts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface StepItem {
+    title: ReactNode;
+    /** A line under the title. Hidden once the step is done, in the vertical layout. */
+    description?: ReactNode;
+    /** A control on the right of the current step, such as a small Button. */
+    action?: ReactNode;
+    /** Overrides the status worked out from `current`. */
+    status?: "done" | "current" | "upcoming";
+}
+export interface StepsProps {
+    items: StepItem[];
+    /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
+     * @default 0 */
+    current?: number;
+    /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** A heading above a vertical list, with a "2 of 4 done" count beside it. */
+    title?: ReactNode;
+    /** Names the list for screen readers when there's no title.
+     * @default "Steps" */
+    label?: string;
+    className?: string;
+}
+/** Numbered steps toward a goal. The current one is raised; finished ones are checked off. */
+export declare function Steps({ items, current, orientation, title, label, className }: StepsProps): import("react").JSX.Element;

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export interface StepItem {
+    title: ReactNode;
+    /** A line under the title. Hidden once the step is done, in the vertical layout. */
+    description?: ReactNode;
+    /** A control on the right of the current step, such as a small Button. */
+    action?: ReactNode;
+    /** Overrides the status worked out from `current`. */
+    status?: "done" | "current" | "upcoming";
+}
+export interface StepsProps {
+    items: StepItem[];
+    /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
+     * @default 0 */
+    current?: number;
+    /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** A heading above a vertical list, with a "2 of 4 done" count beside it. */
+    title?: ReactNode;
+    /** Names the list for screen readers when there's no title.
+     * @default "Steps" */
+    label?: string;
+    className?: string;
+}
+/** Numbered steps toward a goal. The current one is raised; finished ones are checked off. */
+export declare function Steps({ items, current, orientation, title, label, className }: StepsProps): import("react").JSX.Element;

package/dist/components/Switch/Switch.d.cts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from "react";
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "type" | "role"> {
+    checked: boolean;
+    onChange(checked: boolean): void;
+    /** What it turns on, for screen readers. Leave it out only when aria-labelledby names it. */
+    label?: string;
+}
+/** A small on/off switch for settings rows; it takes effect at once, with no save button. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from "react";
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "type" | "role"> {
+    checked: boolean;
+    onChange(checked: boolean): void;
+    /** What it turns on, for screen readers. Leave it out only when aria-labelledby names it. */
+    label?: string;
+}
+/** A small on/off switch for settings rows; it takes effect at once, with no save button. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Table/Table.d.cts

@@ -0,0 +1,55 @@
+import { type Key, type ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}
+/** Rows of records with sortable columns and optional selection, in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,55 @@
+import { type Key, type ReactNode } from "react";
+export interface TableColumn<Row> {
+    /** Unique; also the row field shown when there's no `render`. */
+    key: string;
+    header: ReactNode;
+    /** Numbers and amounts go at the end, so their digits line up.
+     * @default "start" */
+    align?: "start" | "center" | "end";
+    /** A CSS width, e.g. 120 or "30%". */
+    width?: number | string;
+    /** Lets the person sort by this column. */
+    sortable?: boolean;
+    /** What the cell shows. Defaults to the row's field named by `key`. */
+    render?(row: Row): ReactNode;
+    /** The value sorted by, when it isn't the field itself. */
+    sortValue?(row: Row): string | number;
+}
+export interface TableSort {
+    key: string;
+    direction: "ascending" | "descending";
+}
+export interface TableProps<Row> {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Describes the table for screen readers; shown above it unless `hideCaption`. */
+    caption?: ReactNode;
+    /** @default false */
+    hideCaption?: boolean;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?(sort: TableSort): void;
+    /** Sort the rows yourself (e.g. on a server) and only show the arrows.
+     * @default false */
+    manualSort?: boolean;
+    /** Adds a checkbox column.
+     * @default "none" */
+    selectionMode?: "none" | "multiple";
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    onSelectionChange?(keys: Key[]): void;
+    /** Shown in place of the rows when there are none, such as an EmptyState. */
+    emptyContent?: ReactNode;
+    /** `compact` rows are 36px; `comfortable` 44px.
+     * @default "comfortable" */
+    density?: "compact" | "comfortable";
+    /** Keeps the header in view while the table scrolls; use with maxHeight. */
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    className?: string;
+}
+/** Rows of records with sortable columns and optional selection, in a bordered card. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Tabs/Tabs.d.cts

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** The selected tab's value. Leave out to let Tabs keep its own state. */
+    value?: string;
+    /** The tab selected first when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?(value: string): void;
+    /** `segmented` raises the chosen tab in a well; `line` underlines it.
+     * @default "segmented" */
+    variant?: "segmented" | "line";
+    children: ReactNode;
+}
+/** Views of the same thing, one at a time: TabList with Tabs, then a TabPanel for each. */
+export declare function Tabs({ value, defaultValue, onValueChange, variant, className, children, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the set of tabs for screen readers. */
+    "aria-label"?: string;
+}
+/** The row of tabs. The arrow keys, Home and End move between them and select. */
+export declare function TabList({ className, onKeyDown, children, ...props }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+}
+/** One tab. Its `value` matches a TabPanel's. */
+export declare function Tab({ value, icon, className, children, onClick, ...props }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    /** Keep the panel in the page while hidden, so its state survives switching tabs.
+     * @default false */
+    keepMounted?: boolean;
+}
+/** The content for one tab. */
+export declare function TabPanel({ value, keepMounted, className, children, ...props }: TabPanelProps): import("react").JSX.Element | null;

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** The selected tab's value. Leave out to let Tabs keep its own state. */
+    value?: string;
+    /** The tab selected first when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?(value: string): void;
+    /** `segmented` raises the chosen tab in a well; `line` underlines it.
+     * @default "segmented" */
+    variant?: "segmented" | "line";
+    children: ReactNode;
+}
+/** Views of the same thing, one at a time: TabList with Tabs, then a TabPanel for each. */
+export declare function Tabs({ value, defaultValue, onValueChange, variant, className, children, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the set of tabs for screen readers. */
+    "aria-label"?: string;
+}
+/** The row of tabs. The arrow keys, Home and End move between them and select. */
+export declare function TabList({ className, onKeyDown, children, ...props }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+}
+/** One tab. Its `value` matches a TabPanel's. */
+export declare function Tab({ value, icon, className, children, onClick, ...props }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    /** Keep the panel in the page while hidden, so its state survives switching tabs.
+     * @default false */
+    keepMounted?: boolean;
+}
+/** The content for one tab. */
+export declare function TabPanel({ value, keepMounted, className, children, ...props }: TabPanelProps): import("react").JSX.Element | null;

package/dist/components/Tag/Tag.d.cts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Shows a ✕ that calls this. */
+    onRemove?(): void;
+    /** `neutral` for labels and filters; `active` for the ones currently applied.
+     * @default "neutral" */
+    variant?: "neutral" | "active";
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** A 14px icon or a ColorSwatch before the text. */
+    icon?: ReactNode;
+    /** What the ✕ removes, read out as "Remove …". Defaults to the text when it's a string. */
+    removeLabel?: string;
+    children: ReactNode;
+}
+/** A label on something (a topic, a filter, a recipient) that can be removed. */
+export declare function Tag({ onRemove, variant, size, icon, removeLabel, className, children, ...props }: TagProps): import("react").JSX.Element;
+export interface TagGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the set for screen readers, e.g. "Filters". */
+    label?: string;
+    children: ReactNode;
+}
+/** Tags in a wrapping row. */
+export declare function TagGroup({ label, className, children, ...props }: TagGroupProps): import("react").JSX.Element;
+export interface ColorSwatchProps {
+    /** Any CSS colour: "#312c7e", "var(--ow-brass)". */
+    color: string;
+    /** The colour's name, read out and shown beside the swatch. */
+    name?: string;
+    /** The value shown under the name, e.g. the hex. */
+    value?: string;
+    /** sm 16px, md 24px, lg 40px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    className?: string;
+}
+/** A colour sample, with its name and value if given. */
+export declare function ColorSwatch({ color, name, value, size, shape, className }: ColorSwatchProps): import("react").JSX.Element;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Shows a ✕ that calls this. */
+    onRemove?(): void;
+    /** `neutral` for labels and filters; `active` for the ones currently applied.
+     * @default "neutral" */
+    variant?: "neutral" | "active";
+    /** @default "md" */
+    size?: "sm" | "md";
+    /** A 14px icon or a ColorSwatch before the text. */
+    icon?: ReactNode;
+    /** What the ✕ removes, read out as "Remove …". Defaults to the text when it's a string. */
+    removeLabel?: string;
+    children: ReactNode;
+}
+/** A label on something (a topic, a filter, a recipient) that can be removed. */
+export declare function Tag({ onRemove, variant, size, icon, removeLabel, className, children, ...props }: TagProps): import("react").JSX.Element;
+export interface TagGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the set for screen readers, e.g. "Filters". */
+    label?: string;
+    children: ReactNode;
+}
+/** Tags in a wrapping row. */
+export declare function TagGroup({ label, className, children, ...props }: TagGroupProps): import("react").JSX.Element;
+export interface ColorSwatchProps {
+    /** Any CSS colour: "#312c7e", "var(--ow-brass)". */
+    color: string;
+    /** The colour's name, read out and shown beside the swatch. */
+    name?: string;
+    /** The value shown under the name, e.g. the hex. */
+    value?: string;
+    /** sm 16px, md 24px, lg 40px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "square" */
+    shape?: "square" | "circle";
+    className?: string;
+}
+/** A colour sample, with its name and value if given. */
+export declare function ColorSwatch({ color, name, value, size, shape, className }: ColorSwatchProps): import("react").JSX.Element;

package/dist/components/Textarea/Textarea.d.cts

@@ -0,0 +1,12 @@
+import { type TextareaHTMLAttributes } from "react";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Grows with its text, up to `autoGrowMaxHeight`, then scrolls. */
+    autoGrow?: boolean;
+    /** The tallest an auto-growing box gets. A number is pixels. Default 180. */
+    autoGrowMaxHeight?: number | string;
+    /** Borderless and transparent, for use inside your own field container (a chat composer). */
+    bare?: boolean;
+    isInvalid?: boolean;
+}
+/** A multi-line text field, 72px tall at least; it can grow with its text. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;