@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/react/dist/PlinthCodeBlock.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type CodeBlockTab } from './code-block';
+interface CodeBlockOptions {
+    /** A file name or a short label above the code; it may hold a little markup (a badge). */
+    label?: ReactNode;
+    /** The highlighter's markup for the code (trusted, not escaped), in place of `children`. */
+    html?: string;
+    /** Language tabs (up to six), each with its own code; `children` is then not used. */
+    tabs?: CodeBlockTab[];
+    /** The tab that starts checked (later the browser keeps it); the first when unknown. */
+    selected?: string;
+    /** The tabs' accessible name. */
+    tabsLabel?: string;
+    /** Shows the copy button. */
+    copy?: boolean;
+    copyLabel?: string;
+    /** What the button and the status say for two seconds after copying. */
+    copiedLabel?: string;
+    /** The code was copied to the clipboard (Vue's `copied` event). */
+    onCopied?: (text: string) => void;
+}
+export type PlinthCodeBlockProps = CodeBlockOptions & Omit<ComponentProps<'div'>, keyof CodeBlockOptions>;
+export declare function PlinthCodeBlock({ id, label, html, tabs: allTabs, selected, tabsLabel, copy, copyLabel, copiedLabel, onCopied, className, children, ...rest }: PlinthCodeBlockProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthConfirmDialog.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps } from 'react';
+import { type ConfirmDialogKind, type ConfirmDialogTone } from './confirm-dialog';
+import { type DialogSidePhone } from './dialog';
+interface ConfirmDialogOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The question, and the dialog's accessible name. */
+    title: string;
+    /** What happens if the person confirms, and the dialog's accessible description. */
+    message: string;
+    /** What it asks for: only a yes, a phrase typed exactly, or the person's password. */
+    kind?: ConfirmDialogKind;
+    /** The phrase to type, for the type-to-confirm kind. */
+    phrase?: string;
+    /** The field's label; `:phrase` shows the phrase in it. Each kind has a default. */
+    fieldLabel?: string;
+    /** The confirm button's label. */
+    confirmLabel?: string;
+    /** The cancel button's label. */
+    cancelLabel?: string;
+    /** danger makes the confirm button the danger variant, for a destructive action. */
+    tone?: ConfirmDialogTone;
+    /** A message under the field, set by the app (a wrong password). */
+    error?: string;
+    /** The confirm button is busy while the app checks. */
+    busy?: boolean;
+    /** How it shows below 768px: centred, or a bottom sheet. */
+    sidePhone?: DialogSidePhone;
+}
+/**
+ * A confirmation dialog on a `<dialog>`: open it with a button that has `commandfor` and
+ * `command="show-modal"`, or with `showModal()` on a ref. `onSubmit` (it bubbles from the form)
+ * is the confirm, after the browser checked the field; `onClose` is the dialog's close event
+ * (Vue's `close`), with `returnValue` "confirm", "cancel" (Cancel) or "" (Escape).
+ */
+export type PlinthConfirmDialogProps = ConfirmDialogOptions & Omit<ComponentProps<'dialog'>, keyof ConfirmDialogOptions | 'children'>;
+export declare function PlinthConfirmDialog({ id, title, message, kind, phrase, fieldLabel, confirmLabel, cancelLabel, tone, error, busy, sidePhone, className, ...rest }: PlinthConfirmDialogProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTable.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface DataTableOptions {
+    /** The table's name, shown above it. Without it, name the table with aria-label. */
+    caption?: string;
+    /** The column headers, PlinthDataTableColumn elements (Vue's `head` slot). */
+    head?: ReactNode;
+}
+/** A table that becomes a card per row on a phone: `children` are its rows. */
+export type PlinthDataTableProps = DataTableOptions & Omit<ComponentProps<'table'>, keyof DataTableOptions>;
+export declare function PlinthDataTable({ caption, head, className, children, ...rest }: PlinthDataTableProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableCell.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import { type DataTableCellKind } from './data-table';
+interface DataTableCellOptions {
+    /** The column's name, shown before the value on a phone's card. */
+    label?: string;
+    /** What the cell is on a phone's card: a labelled field, the card's title, or its actions. */
+    kind?: DataTableCellKind;
+    /** Numbers: aligned to the end, with figures of one width. */
+    numeric?: boolean;
+    /** Hidden on a phone's card; shown from 768px up. */
+    hideOnPhone?: boolean;
+}
+export type PlinthDataTableCellProps = DataTableCellOptions & Omit<ComponentProps<'td'>, keyof DataTableCellOptions>;
+export declare function PlinthDataTableCell({ label, kind, numeric, hideOnPhone, className, children, ...rest }: PlinthDataTableCellProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableColumn.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { type DataTableSort } from './data-table';
+interface DataTableColumnOptions {
+    /** A sortable column's state, printed as aria-sort; put a PlinthDataTableSort in it. */
+    sort?: DataTableSort;
+    /** Numbers: aligned to the end, with figures of one width. */
+    numeric?: boolean;
+    /** Hidden on a phone's card; shown from 768px up. Give the column's cells the same. */
+    hideOnPhone?: boolean;
+}
+export type PlinthDataTableColumnProps = DataTableColumnOptions & Omit<ComponentProps<'th'>, keyof DataTableColumnOptions>;
+export declare function PlinthDataTableColumn({ sort, numeric, hideOnPhone, className, children, ...rest }: PlinthDataTableColumnProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableEmpty.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface DataTableEmptyOptions {
+    /** How many columns the table has; the empty cell spans them all. */
+    columns?: number | string;
+}
+/** The row in place of the rows when there are none: `children` say so. */
+export type PlinthDataTableEmptyProps = DataTableEmptyOptions & Omit<ComponentProps<'tr'>, keyof DataTableEmptyOptions>;
+export declare function PlinthDataTableEmpty({ columns, className, children, ...rest }: PlinthDataTableEmptyProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableRow.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface DataTableRowOptions {
+    /** A selectable row's state, printed as aria-selected; leave it out when rows can't be selected. */
+    selected?: boolean;
+}
+/** A row of PlinthDataTableCell elements. */
+export type PlinthDataTableRowProps = DataTableRowOptions & Omit<ComponentProps<'tr'>, keyof DataTableRowOptions>;
+export declare function PlinthDataTableRow({ selected, className, children, ...rest }: PlinthDataTableRowProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDataTableSort.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+/** The sort button in a sortable column's header; the column's `sort` says its state. */
+export type PlinthDataTableSortProps = ComponentProps<'button'>;
+export declare function PlinthDataTableSort({ className, children, ...rest }: PlinthDataTableSortProps): import("react").JSX.Element;

package/packages/react/dist/PlinthDialog.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DialogSidePhone } from './dialog';
+interface DialogOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The heading, and the dialog's accessible name. */
+    title: string;
+    /** A line under the title, and the dialog's accessible description. */
+    description?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** Whether the close button, Escape and the backdrop close it; false makes an alert dialog. */
+    dismissible?: boolean;
+    /** How it shows below 768px: centred, or a bottom sheet. */
+    sidePhone?: DialogSidePhone;
+    /** The actions under the body (Vue's `footer` slot). */
+    footer?: ReactNode;
+}
+/**
+ * A `<dialog>`: open it with a button that has `commandfor` and `command="show-modal"`, or with
+ * `showModal()` on a ref. `onClose` is the dialog's close event (Vue's `close`): its buttons, the
+ * close button, Escape, the backdrop or `close()`.
+ */
+export type PlinthDialogProps = DialogOptions & Omit<ComponentProps<'dialog'>, keyof DialogOptions>;
+export declare function PlinthDialog({ id, title, description, closeLabel, dismissible, sidePhone, footer, className, children, ref, ...rest }: PlinthDialogProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthDrawer.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type DrawerDesktop, type DrawerSnap } from './drawer';
+interface DrawerOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The heading, and the drawer's accessible name. */
+    title: string;
+    /** A line under the title, and the drawer's accessible description. */
+    description?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** Its presentation from 768px up: a dialog or a sheet. */
+    desktop?: DrawerDesktop;
+    /** Where it can rest on a phone (a list, or a string separated by spaces); none for as tall as its content. */
+    snapPoints?: readonly DrawerSnap[] | string;
+    /** The snap point it opens at; the largest listed when it is missing. */
+    snap?: DrawerSnap;
+    /** The actions under the body (Vue's `footer` slot). */
+    footer?: ReactNode;
+}
+/**
+ * A `<dialog>` on the bottom edge of a phone that the person drags: open it with a button that
+ * has `commandfor` and `command="show-modal"`, or with `showModal()` on a ref. `onClose` is the
+ * dialog's close event (Vue's `close`): the close button, Escape, the backdrop, a swipe down or
+ * `close()`.
+ */
+export type PlinthDrawerProps = DrawerOptions & Omit<ComponentProps<'dialog'>, keyof DrawerOptions>;
+export declare function PlinthDrawer({ id, title, description, closeLabel, desktop, snapPoints, snap, footer, className, children, ref, ...rest }: PlinthDrawerProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthIcon.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { type IconSize } from './icon';
+export type PlinthIconProps = ComponentProps<'span'> & {
+    size?: IconSize;
+    /** Makes the icon meaningful; without it the icon is decorative and hidden. */
+    label?: string;
+    /** Flips the icon in right-to-left text, for icons that point a direction. */
+    mirror?: boolean;
+};
+export declare function PlinthIcon({ size, label, mirror, className, children, 'aria-label': ariaLabel, ...rest }: PlinthIconProps): import("react").JSX.Element;

package/packages/react/dist/PlinthIconButton.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+import { type ButtonVariant, type InvokerCommandProps } from './button';
+import { type ControlSize } from './size';
+interface IconButtonOptions {
+    /** The accessible name: required, since the button has no visible text. */
+    label: string;
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    disabled?: boolean;
+    busy?: boolean;
+    /** Makes it a toggle: true or false prints aria-pressed. */
+    pressed?: boolean | null;
+    /** Flips the icon in right-to-left text, for icons that point a direction. */
+    mirror?: boolean;
+}
+/**
+ * A `<button>` with only an icon, or with an `href` a link that looks like one. The button takes
+ * `commandfor` and `command`; a link doesn't.
+ */
+export type PlinthIconButtonProps = (IconButtonOptions & InvokerCommandProps & Omit<ComponentProps<'button'>, keyof IconButtonOptions | keyof InvokerCommandProps> & {
+    href?: undefined;
+}) | (IconButtonOptions & Omit<ComponentProps<'a'>, keyof IconButtonOptions> & {
+    href: string;
+});
+export declare function PlinthIconButton({ label, href, variant, size, disabled, busy, pressed, mirror, className, children, 'aria-label': ariaLabel, ...rest }: PlinthIconButtonProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthListCard.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import { type HeadingLevel } from './heading';
+interface ListCardOptions {
+    /** A heading above the card. */
+    heading?: string;
+    /** The heading's element, h2 to h6. */
+    headingLevel?: HeadingLevel;
+    /** A note under the card. */
+    footer?: string;
+}
+/** A card of list rows: `children` are its `<li>` elements, each holding a list row. */
+export type PlinthListCardProps = ListCardOptions & Omit<ComponentProps<'div'>, keyof ListCardOptions>;
+export declare function PlinthListCard({ heading, headingLevel, footer, className, children, ...rest }: PlinthListCardProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthListRow.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode, Ref } from 'react';
+interface ListRowOptions {
+    /** A second line under the title. */
+    description?: string;
+    /** The row's own chevron, at the end, for a row that opens something. */
+    chevron?: boolean;
+    /** Renders the row as a button, when it has no href. */
+    button?: boolean;
+    /** The row for the page being shown: aria-current="page", on a link or static row. */
+    current?: boolean;
+    /** Disables a link or button row. */
+    disabled?: boolean;
+    /** Before the title: an icon or an avatar (Vue's `leading` slot). */
+    leading?: ReactNode;
+    /** After the title: a value, a badge or a switch (Vue's `trailing` slot). */
+    trailing?: ReactNode;
+}
+/**
+ * A link with an `href`, a `<button>` with `button`, otherwise a static `<div>`. Without an
+ * `href` the root may be either, so its `ref` is an HTMLElement.
+ */
+export type PlinthListRowProps = (ListRowOptions & Omit<ComponentProps<'a'>, keyof ListRowOptions> & {
+    href: string;
+}) | (ListRowOptions & Omit<ComponentProps<'button'>, keyof ListRowOptions | 'ref'> & {
+    href?: undefined;
+    ref?: Ref<HTMLElement>;
+});
+export declare function PlinthListRow({ description, chevron, href, button, current, disabled, leading, trailing, className, children, ...rest }: PlinthListRowProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenu.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+interface MenuOptions {
+    /** The menu's id, which its button names in `popoverTarget`. */
+    id: string;
+}
+/**
+ * A `<div popover="auto">`: open it with a button that has `popoverTarget` set to its id (or
+ * `commandfor` and `command="toggle-popover"`). Its `onToggle` is the popover's toggle event.
+ */
+export type PlinthMenuProps = MenuOptions & Omit<ComponentProps<'div'>, keyof MenuOptions>;
+export declare function PlinthMenu({ id, className, children, ...rest }: PlinthMenuProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface MenuGroupOptions {
+    /** The heading over the group's items, and the group's accessible name. */
+    label?: string;
+}
+/** A `<div role="group">` of menu items under a heading. */
+export type PlinthMenuGroupProps = MenuGroupOptions & Omit<ComponentProps<'div'>, keyof MenuGroupOptions>;
+export declare function PlinthMenuGroup({ label, className, children, ...rest }: PlinthMenuGroupProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuItem.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { InvokerCommandProps } from './button';
+import { type MenuItemTone } from './menu';
+interface MenuItemOptions {
+    /** `danger` for an item that destroys or removes something. */
+    tone?: MenuItemTone;
+    /** A keyboard shortcut to show at the item's end, such as ⌘D. */
+    shortcut?: string;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** The id of the menu a button item closes; the menu around it when missing. */
+    menu?: string;
+    /** The project's icon before the label, decorative (Vue's `icon` slot). */
+    icon?: ReactNode;
+}
+/**
+ * A `<button>` that closes its menu when pressed (its own `commandfor` and `command` win), or
+ * with an `href` a link. The label is `children`.
+ */
+export type PlinthMenuItemProps = (MenuItemOptions & InvokerCommandProps & Omit<ComponentProps<'button'>, keyof MenuItemOptions | keyof InvokerCommandProps> & {
+    href?: undefined;
+}) | (MenuItemOptions & Omit<ComponentProps<'a'>, keyof MenuItemOptions> & {
+    href: string;
+});
+export declare function PlinthMenuItem({ href, tone, shortcut, disabled, menu, icon, className, children, ...rest }: PlinthMenuItemProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuSeparator.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+/** An `<hr>` between a menu's items. */
+export type PlinthMenuSeparatorProps = ComponentProps<'hr'>;
+export declare function PlinthMenuSeparator({ className, ...rest }: PlinthMenuSeparatorProps): import("react").JSX.Element;

package/packages/react/dist/PlinthMenuSheet.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type PlinthSheetProps } from './PlinthSheet';
+interface MenuSheetOptions {
+    /** The dialog's id, for the menu button's commandfor; one is generated when it is missing. */
+    id?: string;
+    /** The heading, and the sheet's and the navigation's accessible name. */
+    title?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** The signed-in user's name; leave it out for no user row. */
+    userName?: string;
+    /** A second line under the name: an email or a role. */
+    userDetail?: string;
+    /** The user's picture; initials from the name stand in without it. */
+    userSrc?: string;
+    /** Makes the user row a link, to the profile. */
+    userHref?: string;
+    /** The account's rows under the navigation, such as Sign out (Vue's `account` slot). */
+    account?: ReactNode;
+}
+/** A sheet from the end: `children` are the navigation. `onClose` is the dialog's close event. */
+export type PlinthMenuSheetProps = MenuSheetOptions & Omit<PlinthSheetProps, keyof MenuSheetOptions | 'description' | 'side' | 'sidePhone' | 'footer'>;
+export declare function PlinthMenuSheet({ id, title, closeLabel, userName, userDetail, userSrc, userHref, account, className, children, ...rest }: PlinthMenuSheetProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthPageHeader.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type PageHeaderLevel } from './page-header';
+interface PageHeaderOptions {
+    /** The page's heading. */
+    heading: string;
+    /** The heading's element: `h1`, or `h2` to `h6` beside another page's `h1`. */
+    level?: PageHeaderLevel;
+    /** The screen's top bar: it adds the top safe-area inset (data-top). */
+    top?: boolean;
+    /** The leading action, usually a menu button or a back link (Vue's `leading` slot). */
+    leading?: ReactNode;
+    /** The trailing actions: icon buttons or a primary button (Vue's `actions` slot). */
+    actions?: ReactNode;
+}
+export type PlinthPageHeaderProps = PageHeaderOptions & Omit<ComponentProps<'header'>, keyof PageHeaderOptions | 'children'>;
+export declare function PlinthPageHeader({ heading, level, top, leading, actions, className, ...rest }: PlinthPageHeaderProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthPill.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+interface PillOptions {
+    /** A number after the label, such as how many items the filter shows. */
+    count?: string | number | null;
+    /** The selected pill: aria-pressed="true" on a button, aria-current="page" on a link. */
+    selected?: boolean;
+    /** Disables the pill. */
+    disabled?: boolean;
+}
+/** A `<button>`, or with an `href` a link, for a row that navigates. */
+export type PlinthPillProps = (PillOptions & Omit<ComponentProps<'button'>, keyof PillOptions> & {
+    href?: undefined;
+}) | (PillOptions & Omit<ComponentProps<'a'>, keyof PillOptions> & {
+    href: string;
+});
+export declare function PlinthPill({ count, href, selected, disabled, className, children, ...rest }: PlinthPillProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthPillRow.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+interface PillRowOptions {
+    /** The row's accessible name (aria-label). */
+    label?: string;
+    /** Renders the row as a <nav>, for pills that are links. */
+    nav?: boolean;
+}
+/** A `<div role="group">`, or with `nav` a `<nav>`, so its `ref` is an HTMLElement. */
+export type PlinthPillRowProps = PillRowOptions & Omit<ComponentProps<'div'>, keyof PillRowOptions | 'ref'> & {
+    ref?: Ref<HTMLElement>;
+};
+export declare function PlinthPillRow({ label, nav, className, children, ...rest }: PlinthPillRowProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthSectionMenu.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+interface SectionMenuOptions {
+    /** The menu's accessible name (aria-label). */
+    label?: string;
+    /** A <nav> of links (the default); false for a <div role="group"> of buttons. */
+    nav?: boolean;
+}
+/** A `<nav>`, or without `nav` a `<div role="group">`. */
+export type PlinthSectionMenuProps = SectionMenuOptions & Omit<ComponentProps<'nav'>, keyof SectionMenuOptions>;
+export declare function PlinthSectionMenu({ label, nav, className, children, ...rest }: PlinthSectionMenuProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthSectionMenuItem.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+interface SectionMenuItemOptions {
+    /** A number after the label, such as how many items the section holds. */
+    count?: string | number | null;
+    /** The current section: aria-current="page" on a link, aria-pressed="true" on a button. */
+    current?: boolean;
+    /** Disables the item. */
+    disabled?: boolean;
+}
+/**
+ * A link to the section's address, or without an `href` a `<button>` that switches the view in
+ * place.
+ */
+export type PlinthSectionMenuItemProps = (SectionMenuItemOptions & Omit<ComponentProps<'button'>, keyof SectionMenuItemOptions> & {
+    href?: undefined;
+}) | (SectionMenuItemOptions & Omit<ComponentProps<'a'>, keyof SectionMenuItemOptions> & {
+    href: string;
+});
+export declare function PlinthSectionMenuItem({ count, href, current, disabled, className, children, ...rest }: PlinthSectionMenuItemProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthSheet.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type SheetSide } from './sheet';
+interface SheetOptions {
+    /** The dialog's id; one is generated when it is missing. */
+    id?: string;
+    /** The heading, and the sheet's accessible name. */
+    title: string;
+    /** A line under the title, and the sheet's accessible description. */
+    description?: string;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** The edge the sheet comes from, at every width. */
+    side?: SheetSide;
+    /** The edge below 768px, when it is another one. */
+    sidePhone?: SheetSide;
+    /** The actions under the body (Vue's `footer` slot). */
+    footer?: ReactNode;
+}
+/**
+ * A `<dialog>`: open it with a button that has `commandfor` and `command="show-modal"`, or with
+ * `showModal()` on a ref. `onClose` is the dialog's close event (Vue's `close`): the close button,
+ * Escape, the backdrop or `close()`.
+ */
+export type PlinthSheetProps = SheetOptions & Omit<ComponentProps<'dialog'>, keyof SheetOptions>;
+export declare function PlinthSheet({ id, title, description, closeLabel, side, sidePhone, footer, className, children, ref, ...rest }: PlinthSheetProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthTextField.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type TextFieldSize } from './text-field';
+interface TextFieldOptions {
+    /** The label, and the field's accessible name. */
+    label: string;
+    /** Hides the label visually; screen readers still read it. */
+    hideLabel?: boolean;
+    size?: TextFieldSize;
+    /** A line under the field that helps fill it in. */
+    description?: string;
+    /** What is wrong with the value; it marks the field invalid. */
+    error?: string;
+    /** The leading icon (Vue's `icon` slot). */
+    icon?: ReactNode;
+    /** A small control or hint at the end, such as a clear button (Vue's `trailing` slot). */
+    trailing?: ReactNode;
+}
+/**
+ * A text field. `className` goes on the root; every other prop (`value`, `onChange`, `name`,
+ * `placeholder`, `ref`, …) on the `<input>`.
+ */
+export type PlinthTextFieldProps = TextFieldOptions & Omit<ComponentProps<'input'>, keyof TextFieldOptions | 'children'>;
+export declare function PlinthTextField({ label, hideLabel, id, type, size, description, error, icon, trailing, className, ...rest }: PlinthTextFieldProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthTextarea.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+interface TextareaOptions {
+    /** The label, and the field's accessible name. */
+    label: string;
+    /** Hides the label visually; screen readers still read it. */
+    hideLabel?: boolean;
+    /** The lines it shows, and where it starts when it grows. */
+    rows?: number;
+    /** Grows with its content, from rows lines to maxRows, then scrolls. */
+    grow?: boolean;
+    /** The most lines it grows to. */
+    maxRows?: number;
+    /** A line under the field that helps fill it in. */
+    description?: string;
+    /** What is wrong with the value; it marks the field invalid. */
+    error?: string;
+}
+/**
+ * A textarea. `className` goes on the root; every other prop (`value`, `onChange`, `name`,
+ * `placeholder`, `ref`, …) on the `<textarea>`.
+ */
+export type PlinthTextareaProps = TextareaOptions & Omit<ComponentProps<'textarea'>, keyof TextareaOptions | 'children'>;
+export declare function PlinthTextarea({ label, hideLabel, id, rows, grow, maxRows, description, error, className, style, ...rest }: PlinthTextareaProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/avatar.d.ts

@@ -0,0 +1,12 @@
+/** The avatar sizes (24, 32, 40 and 56 px), from the shared size scale. `md` is the default. */
+export declare const avatarSizes: readonly ["sm", "md", "lg", "xl"];
+export type AvatarSize = (typeof avatarSizes)[number];
+/** A size from the list, or `md` when it is not one of them. */
+export declare function avatarSize(value: string | undefined): AvatarSize;
+/**
+ * Initials from a name: the first letter of the first and the last word, upper case. Blade's
+ * Initials::from() does the same; the parity tests compare them.
+ */
+export declare function initialsFrom(name: string): string;
+/** The person shown when there is neither an image nor a name to take initials from. */
+export declare const avatarGlyph = "<svg class=\"plinth-avatar-glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"9\" r=\"4\"></circle><path d=\"M4.5 20a7.5 7.5 0 0 1 15 0\"></path></svg>";

package/packages/react/dist/button.d.ts

@@ -0,0 +1,21 @@
+/** The button's variants. `primary` is the default. */
+export declare const buttonVariants: readonly ["primary", "accent", "secondary", "ghost", "danger", "danger-ghost"];
+export type ButtonVariant = (typeof buttonVariants)[number];
+/** A variant from the list, or `primary` when it is not one of them. */
+export declare function buttonVariant(value: string | undefined): ButtonVariant;
+/**
+ * The invoker commands a button can send to the element its `commandfor` names: the dialog and
+ * popover commands, or a custom one, which starts with two dashes.
+ */
+export type InvokerCommand = 'show-modal' | 'close' | 'request-close' | 'show-popover' | 'hide-popover' | 'toggle-popover' | `--${string}`;
+/**
+ * The invoker command attributes, typed here because `@types/react` doesn't list them yet. React
+ * passes them to the DOM as they are, lowercase. Plinth types them on its own buttons rather than
+ * adding them to React's global types.
+ */
+export interface InvokerCommandProps {
+    /** The id of the element the command goes to, such as a dialog. */
+    commandfor?: string;
+    /** What to do to it, such as `show-modal` or `close`. */
+    command?: InvokerCommand;
+}

package/packages/react/dist/callout.d.ts

@@ -0,0 +1,19 @@
+/** The callout's tones. `neutral` is the default. */
+export declare const calloutTones: readonly ["neutral", "info", "success", "warning", "danger"];
+export type CalloutTone = (typeof calloutTones)[number];
+/** A tone from the list, or `neutral` when it is not one of them. */
+export declare function calloutTone(value: string | undefined): CalloutTone;
+/**
+ * The callout's roles: `note` (the default) for a note in the page, `status` for a message the
+ * app adds after something happens, `alert` for an urgent one. Assistive technology announces the
+ * last two when they appear.
+ */
+export declare const calloutRoles: readonly ["note", "status", "alert"];
+export type CalloutRole = (typeof calloutRoles)[number];
+/** A role from the list, or `note` when it is not one of them. */
+export declare function calloutRole(value: string | undefined): CalloutRole;
+/**
+ * Each tone's icon, a different shape for each, so the tone never rests on colour alone. Blade's
+ * CalloutTone::icon() prints the same markup; the icon slot replaces it.
+ */
+export declare const calloutIcons: Record<CalloutTone, string>;

package/packages/react/dist/code-block.d.ts

@@ -0,0 +1,16 @@
+/** A language tab: its name (Blade, Vue, React, HTML) and its code, as text or as markup. */
+export interface CodeBlockTab {
+    label: string;
+    code: string;
+    /** The highlighter's markup for the code (trusted, not escaped), in place of `code`. */
+    html?: string;
+}
+/** The CSS shows the code of the first six tabs, so a block has at most six. */
+export declare const codeBlockTabs: (tabs: readonly CodeBlockTab[]) => CodeBlockTab[];
+/** The index of the tab that starts checked: the one labelled `selected`, or the first. */
+export declare const checkedTab: (tabs: readonly CodeBlockTab[], selected: string | undefined) => number;
+/**
+ * The text a code block's copy button copies: the code of the checked tab's <pre>, or of the only
+ * one. Vue's layer and Blade's Alpine do the same.
+ */
+export declare function codeBlockText(button: Element): string;

package/packages/react/dist/confirm-dialog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What the confirmation dialog asks for: `simple` (the default) asks only, `type` asks for a
+ * phrase typed exactly, `password` asks for the person's password, which the app checks.
+ */
+export declare const confirmDialogKinds: readonly ["simple", "type", "password"];
+export type ConfirmDialogKind = (typeof confirmDialogKinds)[number];
+/** A kind from the list, or `simple` when it is not one of them. */
+export declare function confirmDialogKind(value: string | undefined): ConfirmDialogKind;
+/** The confirm button's tone: `neutral` (the default, a primary button) or `danger`. */
+export declare const confirmDialogTones: readonly ["neutral", "danger"];
+export type ConfirmDialogTone = (typeof confirmDialogTones)[number];
+/** A tone from the list, or `neutral` when it is not one of them. */
+export declare function confirmDialogTone(value: string | undefined): ConfirmDialogTone;
+/** The field's label when the app gives none; `:phrase` is where the phrase goes. */
+export declare const confirmDialogFieldLabels: {
+    readonly type: "Type :phrase to confirm";
+    readonly password: "Password";
+};
+/**
+ * The input's pattern: the phrase with the characters a pattern (a `v`-flag regular expression)
+ * treats as syntax escaped, so the browser accepts exactly the phrase.
+ */
+export declare const confirmDialogPattern: (phrase: string) => string;