@amberstack/comp-lib 0.0.0-stage → 0.1.0

package/dist/components/RichTextField/richTextCommands.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Everything that touches the browser's editing commands, kept in one file so it can be swapped for an
+ * editor library later. `document.execCommand` is deprecated but has no native replacement.
+ */
+export type RichTextFormat = 'h2' | 'h3' | 'bold' | 'italic' | 'link' | 'bulletList' | 'numberedList' | 'quote';
+/** True for the link addresses the editor accepts. */
+export declare function isSafeUrl(url: string): boolean;
+/** The formats at the current selection. */
+export declare function getActiveFormats(): RichTextFormat[];
+/**
+ * Toggles a format at the current selection. The editor must have focus. `url` is required to add a link;
+ * unsafe addresses are ignored.
+ */
+export declare function applyFormat(format: RichTextFormat, url?: string): void;
+/** Inserts plain text at the current selection, which is how pasted and dropped content arrives. */
+export declare function insertPlainText(text: string): void;
+/** Keeps only the markup the editor can produce. Runs on every value passed in, so a stored value cannot add scripts. */
+export declare function sanitizeHtml(html: string): string;

package/dist/components/ScatterPlot/ScatterPlot.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One point of a scatter plot. */
+export interface ScatterPoint {
+    /** Position along the x measure. */
+    x: number;
+    /** Position along the y measure. */
+    y: number;
+}
+/** A named group of points. */
+export interface ScatterSeries {
+    /** Stable identifier. */
+    id: string;
+    /** Name shown in the legend and tooltip. */
+    name: string;
+    /** The points. */
+    points: readonly ScatterPoint[];
+}
+export interface ScatterPlotProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** One or two series. Any more are left out, because points in more colours stop being readable. */
+    series: ScatterSeries[];
+    /** Name of the x measure, used in the data table. */
+    xLabel?: string;
+    /** Name of the y measure, used in the data table. */
+    yLabel?: string;
+    /** Height of the plot in pixels, including the axis labels. Width fills the container. */
+    height?: number;
+    /** Accessible name of the chart. Say what it shows. */
+    'aria-label'?: string;
+    /** Shown in place of the chart when there is no data. */
+    emptyMessage?: ReactNode;
+    /** Formats values in the tooltip and the data table. */
+    formatValue?: (value: number) => string;
+    /** Hidden series ids, when controlled. */
+    hiddenSeries?: string[];
+    /** Hidden series ids at first, when uncontrolled. */
+    defaultHiddenSeries?: string[];
+    /** Called with the new hidden series ids. */
+    onHiddenSeriesChange?: (hiddenSeries: string[]) => void;
+}
+/** The relationship between two measures. Points have a 2 px surface ring so they stay legible where they overlap. */
+export declare const ScatterPlot: import("react").ForwardRefExoticComponent<ScatterPlotProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ScatterPlot/index.d.ts

@@ -0,0 +1 @@
+export * from './ScatterPlot';

package/dist/components/Search/Search.d.ts

@@ -0,0 +1,15 @@
+import { type InputHTMLAttributes } from 'react';
+export interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> {
+    /** The query, when controlled. */
+    value?: string;
+    /** The first query, when uncontrolled. */
+    defaultValue?: string;
+    /** Keyboard shortcut chip, such as "Ctrl K". It is hidden while there is a value. */
+    shortcut?: string;
+    /** Called after the clear button empties the box. `onChange` fires first. */
+    onClear?: () => void;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+}
+/** Search box with an optional keyboard shortcut and a clear button. Sits at the top of a sidebar or table. */
+export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Search/index.d.ts

@@ -0,0 +1 @@
+export * from './Search';

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

@@ -0,0 +1,38 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type IconName } from '../../icons';
+export interface SelectOption {
+    /** The value reported by `onChange`. */
+    value: string;
+    /** The text shown for the option. */
+    label: string;
+    /** Stops the option being chosen. */
+    disabled?: boolean;
+    /** Icon before the label. */
+    icon?: IconName;
+}
+export interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children'> {
+    /** The options to choose from. */
+    options: SelectOption[];
+    /** The chosen value, when controlled. */
+    value?: string;
+    /** The first chosen value, when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new value when an option is chosen. */
+    onChange?: (value: string) => void;
+    /** Text shown when nothing is chosen. */
+    placeholder?: string;
+    /** Shows the error state and sets `aria-invalid`. */
+    invalid?: boolean;
+    /** Read-only look with a "Locked" tag. It can be focused but not opened. */
+    locked?: boolean;
+    /** Marks the control as required. */
+    required?: boolean;
+    /** Adds a filter box at the top of the popup. */
+    searchable?: boolean;
+    /** Accessible name and placeholder of the filter box. */
+    filterLabel?: string;
+    /** Text shown when the filter matches nothing. */
+    emptyLabel?: string;
+}
+/** Single select dropdown, following the WAI-ARIA select-only combobox pattern. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+export * from './Select';

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

@@ -0,0 +1,38 @@
+export interface ListboxItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/** The active row, filter text and type-ahead buffer shared by Select and MultiSelect. */
+export declare function useListbox<T extends ListboxItem>(options: T[]): {
+    query: string;
+    setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    activeIndex: number;
+    setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    filtered: T[];
+    typed: import("react").RefObject<{
+        text: string;
+        time: number;
+    }>;
+};
+/** The first enabled index at or after `start`, walking in `step` direction. Returns -1 if there is none. */
+export declare function findEnabled(items: ListboxItem[], start: number, step: 1 | -1): number;
+/** The index a navigation key moves to, or null if the key does not navigate. It does not wrap, as the APG select-only pattern advises. */
+export declare function nextIndexForKey(key: string, items: ListboxItem[], current: number): number | null;
+/** True for a single printable character, without modifiers. */
+export declare function isPrintableKey(event: {
+    key: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}): boolean;
+/**
+ * Finds the next match for typed characters. Characters typed quickly build up a prefix, and repeating one
+ * character cycles through the options that start with it. Returns -1 if nothing matches.
+ */
+export declare function typeAheadIndex(items: ListboxItem[], current: number, char: string, buffer: {
+    text: string;
+    time: number;
+}, now: number): number;
+/** The id of an option row, or undefined when no row is active. */
+export declare function optionId(listId: string, index: number): string | undefined;

package/dist/components/SetupStep/SetupStep.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type SetupStepState = 'done' | 'next' | 'todo';
+export interface SetupStepProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** `done` is finished, `next` is the step to do now and `todo` is still to come. */
+    state?: SetupStepState;
+    /** The position of the step in the list. */
+    step?: number;
+    /** What the step achieves. */
+    title: ReactNode;
+    /** More about the step, or what was done. */
+    description?: ReactNode;
+    /** The control that starts the step, normally a Button. Use `primary` only for `next`. Not shown when `done`. */
+    action?: ReactNode;
+    /** Text shown at the right when `done`. */
+    doneLabel?: ReactNode;
+}
+/** One step in a setup list. Marks the current step with `aria-current`. */
+export declare const SetupStep: import("react").ForwardRefExoticComponent<SetupStepProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SetupStep/index.d.ts

@@ -0,0 +1 @@
+export * from './SetupStep';

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Top of the column: a SidebarBrand, or a back link with an environment label. */
+    header?: ReactNode;
+    /** The Quick search box. */
+    search?: ReactNode;
+    /** NavItems kept below the scrolling list, such as Settings. */
+    pinned?: ReactNode;
+    /** Bottom of the column: connection status and a SidebarUser. */
+    footer?: ReactNode;
+    /** Accessible name of the navigation landmark. */
+    navLabel?: string;
+    /** The scrolling navigation: NavGroups and NavItems. */
+    children?: ReactNode;
+}
+/** The navigation column of the app. It fills the height of its container and its list scrolls. */
+export declare const Sidebar: import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Sidebar/SidebarBrand.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface SidebarBrandProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'children'> {
+    /** Name of the account. */
+    name: string;
+    /** Line under the name. */
+    description?: string;
+    /** Letter in the tile. */
+    initial: string;
+}
+/** The account tile and name at the top of the sidebar. It opens the menu to change account. */
+export declare const SidebarBrand: import("react").ForwardRefExoticComponent<SidebarBrandProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Sidebar/SidebarUser.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes } from 'react';
+export interface SidebarUserProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'name' | 'children'> {
+    /** The person's name. */
+    name: string;
+    /** Their role, shown under the name. */
+    role?: string;
+    /** Short text for the avatar, such as `DR`. */
+    initials?: string;
+    /** Photo for the avatar. */
+    src?: string;
+}
+/** The signed-in person at the foot of the sidebar. It opens the account menu. */
+export declare const SidebarUser: import("react").ForwardRefExoticComponent<SidebarUserProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Sidebar';
+export * from './SidebarBrand';
+export * from './SidebarUser';

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

@@ -0,0 +1,12 @@
+import { type HTMLAttributes } from 'react';
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Shape: `text` is one line of text, `circle` is an avatar and `rect` is any block. */
+    variant?: SkeletonVariant;
+    /** Width, in pixels or any CSS length. Defaults to 32 px for `circle` and the full width otherwise. */
+    width?: number | string;
+    /** Height, in pixels or any CSS length. Defaults to the width for `circle`, one line for `text` and 80 px for `rect`. */
+    height?: number | string;
+}
+/** Placeholder for content that is still loading. Hidden from assistive technology: announce loading with a Spinner or a status message. */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1 @@
+export * from './Skeleton';

package/dist/components/SortableRow/SortableRow.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type SortableRowState = 'default' | 'dragging';
+export interface SortableRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** `dragging` lifts the row, to show it being moved. */
+    state?: SortableRowState;
+    /** A short overline at the left, such as the kind of block. */
+    kind?: ReactNode;
+    /** What the row is. */
+    title: ReactNode;
+    /** A quieter line below the title. */
+    subtitle?: ReactNode;
+    /** The control at the right, normally a ghost Button. */
+    action?: ReactNode;
+    /** Called by the Move up button. Without it, the button is disabled. */
+    onMoveUp?: () => void;
+    /** Called by the Move down button. Without it, the button is disabled. */
+    onMoveDown?: () => void;
+    /** Accessible name of the Move up button. Name the row. */
+    moveUpLabel?: string;
+    /** Accessible name of the Move down button. Name the row. */
+    moveDownLabel?: string;
+}
+/** One row in a list that can be reordered, using Move up and Move down buttons that work from the keyboard. */
+export declare const SortableRow: import("react").ForwardRefExoticComponent<SortableRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SortableRow/index.d.ts

@@ -0,0 +1 @@
+export * from './SortableRow';

package/dist/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type SparklineTone = 'accent' | 'neutral';
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Values in order. Use `null` where nothing was recorded. */
+    data: (number | null)[];
+    /** Accessible name. Say what the trend is, because the shape alone has no words. */
+    label: string;
+    /** `accent` for the one trend that matters, `neutral` for the rest. */
+    tone?: SparklineTone;
+    /** Height in pixels. Width fills the container. */
+    height?: number;
+    /** Shown in place of the line when there is no data. */
+    emptyMessage?: ReactNode;
+    /** Formats values in the data table. */
+    formatValue?: (value: number) => string;
+}
+/** A tiny trend for tables and KPIs, with no axes. Pair it with a number, because it shows shape rather than exact values. */
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sparkline/index.d.ts

@@ -0,0 +1 @@
+export * from './Sparkline';

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

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+export type SpinnerSize = 'sm' | 'md';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Diameter: `sm` is 16 px and `md` is 20 px. */
+    size?: SpinnerSize;
+    /** Accessible name, announced as a status message. */
+    label?: string;
+}
+/** Shows that something is loading, for a wait of unknown length. */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/components/Status/Status.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+export type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'pending';
+export interface StatusProps extends HTMLAttributes<HTMLSpanElement> {
+    /** State of the object. Sets the dot colour; `pending` draws a hollow ring. */
+    tone?: StatusTone;
+}
+/** Dot plus text, for object state in tables, cards and headers. The text always states the status, so colour is never the only signal. */
+export declare const Status: import("react").ForwardRefExoticComponent<StatusProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Status/index.d.ts

@@ -0,0 +1 @@
+export * from './Status';

package/dist/components/StatusIcon/StatusIcon.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+import type { StatusTone } from '../Status';
+export type StatusIconSize = 'sm' | 'md' | 'lg';
+export interface StatusIconProps extends HTMLAttributes<HTMLSpanElement> {
+    /** State to show. Picks both the icon and its colour. */
+    tone?: StatusTone;
+    /** Icon size: `sm` is 16 px, `md` is 20 px and `lg` is 24 px. */
+    size?: StatusIconSize;
+    /** Accessible name stating the status, because the icon has no visible text. */
+    label: string;
+}
+/** Icon-only status for dense spots such as table cells and checklists. */
+export declare const StatusIcon: import("react").ForwardRefExoticComponent<StatusIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/StatusIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './StatusIcon';

package/dist/components/Stepper/Step.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../../icons';
+export type StepState = 'done' | 'current' | 'upcoming' | 'failed';
+export interface StepProps extends HTMLAttributes<HTMLDivElement> {
+    /** Name of the step. */
+    label: ReactNode;
+    /** Small text under the label, such as "In progress". */
+    meta?: ReactNode;
+    /** Where the step has got to. `done` draws a check and `failed` draws a cross. */
+    state?: StepState;
+    /** Number in the indicator, for current and upcoming steps. */
+    number?: number;
+    /** Icon in the indicator, in place of the number or the state icon. */
+    icon?: IconName;
+    /** Words that say the state to screen readers when the indicator shows an icon. */
+    stateLabel?: string;
+}
+/** One stage in a sequence: an indicator with the label and meta stacked and centred under it. */
+export declare const Step: import("react").ForwardRefExoticComponent<StepProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,28 @@
+import { type OlHTMLAttributes, type ReactNode } from 'react';
+import type { IconName } from '../../icons';
+import { type StepState } from './Step';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export interface StepperStep {
+    /** Stable key for this step. */
+    id: string;
+    /** Name of the step. */
+    label: ReactNode;
+    /** Small text under the label. Takes priority over `stateMeta`. */
+    meta?: ReactNode;
+    /** Icon in the indicator, in place of the number or the state icon. */
+    icon?: IconName;
+    /** Overrides the state worked out from `current`, usually to mark a step as `failed`. */
+    state?: StepState;
+}
+export interface StepperProps extends OlHTMLAttributes<HTMLOListElement> {
+    /** The steps, in order. */
+    steps: StepperStep[];
+    /** Zero-based index of the current step. Earlier steps are done and later ones are upcoming. Use `steps.length` when every step is done. */
+    current: number;
+    /** Direction of the sequence. Each step stays stacked and centred in both. */
+    orientation?: StepperOrientation;
+    /** Text under each label, by state, for steps that have no `meta` of their own. */
+    stateMeta?: Partial<Record<StepState, ReactNode>>;
+}
+/** Shows progress through a fixed sequence. */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Step';

package/dist/components/SwitchField/SwitchField.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type ToggleProps } from '../Toggle';
+export interface SwitchFieldProps extends ToggleProps {
+    /** The visible label. */
+    label: ReactNode;
+    /** A short explanation below the label. */
+    description?: ReactNode;
+}
+/** A labelled Toggle for settings lists. It takes effect immediately, so do not use it inside a form that needs saving. */
+export declare const SwitchField: import("react").ForwardRefExoticComponent<SwitchFieldProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/SwitchField/index.d.ts

@@ -0,0 +1 @@
+export * from './SwitchField';

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

@@ -0,0 +1,9 @@
+import { type TableHTMLAttributes } from 'react';
+import { type TableDensity } from './TableContext';
+export type { TableDensity } from './TableContext';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Row height: `default` is 52 px and `dense` is 40 px. */
+    density?: TableDensity;
+}
+/** The semantic table. Compose it with `thead`, `tbody`, TableHeaderRow, TableRow and TableCell. Give it a `caption`, `aria-label` or `aria-labelledby`. */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;

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

@@ -0,0 +1,10 @@
+import { type TdHTMLAttributes } from 'react';
+export type TableCellAlign = 'left' | 'right' | 'center';
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Horizontal alignment. Use `right` for numbers and row actions. */
+    align?: TableCellAlign;
+    /** Column width, in pixels or any CSS length. */
+    width?: number | string;
+}
+/** One cell in a TableRow. Holds a cell-content part such as TableCellText, or any content. Its height follows the density of the Table. */
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
+export interface TableCellActionsProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    /** Accessible name of the default button. Name the row, such as `Actions for Docs`. */
+    label?: string;
+    /** Called when the default button is pressed. */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Replaces the default button, for example with a DropdownMenu. */
+    children?: ReactNode;
+}
+/** The actions at the end of a row: a More button by default, or your own controls. */
+export declare const TableCellActions: import("react").ForwardRefExoticComponent<TableCellActionsProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,7 @@
+import { type CheckboxProps } from '../Checkbox';
+export interface TableCellCheckboxProps extends Omit<CheckboxProps, 'label' | 'description' | 'aria-label'> {
+    /** Accessible name. Name the row, such as `Select Docs`. */
+    label: string;
+}
+/** The checkbox that selects a row, or in a header the whole table. Has no visible label. */
+export declare const TableCellCheckbox: import("react").ForwardRefExoticComponent<TableCellCheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export interface TableCellNumberProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The number. Numbers are grouped for the locale. A string is shown as it is, such as `No data`. */
+    value: number | string;
+    /** Locale used to group digits. */
+    locale?: string;
+    /** Options for the number format, such as a currency or a percentage. */
+    format?: Intl.NumberFormatOptions;
+}
+/** A number in a table cell, in monospaced digits and aligned to the right so that columns of numbers line up. */
+export declare const TableCellNumber: import("react").ForwardRefExoticComponent<TableCellNumberProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,4 @@
+import { type StatusProps } from '../Status';
+export type TableCellStatusProps = StatusProps;
+/** The state of a row, as a dot plus text. */
+export declare const TableCellStatus: import("react").ForwardRefExoticComponent<StatusProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'react';
+export interface TableCellTextProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Uses the monospaced font in a quieter colour, for times, IDs and paths. */
+    mono?: boolean;
+}
+/** One line of text in a table cell. */
+export declare const TableCellText: import("react").ForwardRefExoticComponent<TableCellTextProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface TableCellTwoLineProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The first line. */
+    primary: ReactNode;
+    /** The quieter second line. */
+    secondary?: ReactNode;
+}
+/** A name with a quieter line of detail below it. */
+export declare const TableCellTwoLine: import("react").ForwardRefExoticComponent<TableCellTwoLineProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export interface TableCellUserProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The name of the person or team. */
+    name: string;
+    /** Short text for the avatar, such as `DR`. */
+    initials?: string;
+    /** Avatar image. */
+    src?: string;
+}
+/** A person, as a small avatar and their name. */
+export declare const TableCellUser: import("react").ForwardRefExoticComponent<TableCellUserProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,3 @@
+export type TableDensity = 'default' | 'dense';
+/** Passes the density of a Table to its cells. */
+export declare const TableDensityContext: import("react").Context<TableDensity>;

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

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** How many rows are showing, such as `Showing 1–5 of 8`. Announced politely when it changes. */
+    count?: ReactNode;
+    /** The page controls, normally a Pagination. */
+    pagination?: ReactNode;
+}
+/** The bar below a table, with the row count and page controls. */
+export declare const TableFooter: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,17 @@
+import { type MouseEventHandler, type ThHTMLAttributes } from 'react';
+export type TableHeaderCellSort = 'none' | 'sortable' | 'ascending' | 'descending';
+export type TableHeaderCellAlign = 'left' | 'right' | 'center';
+export interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** `none` is plain text. The others render a button: `sortable` is unsorted, `ascending` and `descending` show the current direction. */
+    sort?: TableHeaderCellSort;
+    /** Called when the sort button is pressed. */
+    onSort?: MouseEventHandler<HTMLButtonElement>;
+    /** Horizontal alignment. Match the cells below. */
+    align?: TableHeaderCellAlign;
+    /** Column width, in pixels or any CSS length. */
+    width?: number | string;
+    /** Keeps the text for assistive technology only, for columns such as row actions. */
+    hideLabel?: boolean;
+}
+/** A column header, with `aria-sort` and a real button when the column can be sorted. */
+export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export type TableHeaderRowProps = HTMLAttributes<HTMLTableRowElement>;
+/** The row of column headers. Place it inside `thead`, with TableHeaderCell children. */
+export declare const TableHeaderRow: import("react").ForwardRefExoticComponent<TableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>>;

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'react';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Marks the row as chosen, with the selection tint. Pair it with a checked TableCellCheckbox, which states the selection to assistive technology. */
+    selected?: boolean;
+}
+/** One row of data. Place it inside `tbody`, with TableCell children. It highlights on hover. */
+export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;

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

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface TableToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What the table lists. */
+    title?: ReactNode;
+    /** The search box, normally a Search. */
+    search?: ReactNode;
+    /** The action that opens the filters, normally a Button. */
+    filterAction?: ReactNode;
+    /** A second row below the title, such as a FilterBar. */
+    children?: ReactNode;
+}
+/** The bar above a table, with its title, search and filter action. */
+export declare const TableToolbar: import("react").ForwardRefExoticComponent<TableToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+export * from './Table';
+export * from './TableHeaderCell';
+export * from './TableHeaderRow';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableCellText';
+export * from './TableCellTwoLine';
+export * from './TableCellStatus';
+export * from './TableCellUser';
+export * from './TableCellNumber';
+export * from './TableCellActions';
+export * from './TableCellCheckbox';
+export * from './TableToolbar';
+export * from './TableFooter';

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

@@ -0,0 +1,12 @@
+import type { ComponentType } from 'react';
+import type { TableDensity } from './TableContext';
+/** Renders a story that is a `tr` inside a table body. */
+export declare const inTableBody: (density?: TableDensity) => (Story: ComponentType) => import("react").JSX.Element;
+/** Renders a story that is a header `tr`. */
+export declare const inTableHead: (Story: ComponentType) => import("react").JSX.Element;
+/** Renders a story that is a `td` inside a row. */
+export declare const inRow: (density?: TableDensity) => (Story: ComponentType) => import("react").JSX.Element;
+/** Renders a story that is a `th` inside a header row. */
+export declare const inHeaderRow: (Story: ComponentType) => import("react").JSX.Element;
+/** Renders a story that is the content of a cell. */
+export declare const inCell: (Story: ComponentType) => import("react").JSX.Element;