@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/dashboards/Dashboard03/Dashboard03.types.d.ts

@@ -0,0 +1,131 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockTableColumn } from "../../shared/shared.types.js";
+/** A choice in the budget's editor, such as pausing work when spend reaches it. */
+export interface Dashboard03BudgetOption {
+    /** The checkbox's words. */
+    label: ReactNode;
+    /** A muted line under them. */
+    description?: ReactNode;
+    /** Whether it starts ticked. @default false */
+    defaultChecked?: boolean;
+}
+/** The table of spend, in its own card under the budget. */
+export interface Dashboard03Table<Row> {
+    /** The card's heading: "By project". */
+    title: ReactNode;
+    /** A caption on the right of the heading: "So far this month". */
+    description?: ReactNode;
+    /** Describes the table for screen readers. */
+    caption: string;
+    /** Its columns. */
+    columns: Array<BlockTableColumn<Row>>;
+    /** Its rows. */
+    rows: Row[];
+    /** The order to start with. */
+    defaultSort?: TableSort;
+}
+/** One line of the next invoice. */
+export interface Dashboard03InvoiceLine {
+    /** What it's for: "Business plan". */
+    label: ReactNode;
+    /** A caption under it: "14 people × €24". */
+    hint?: ReactNode;
+    /** The amount, formatted. */
+    amount: ReactNode;
+}
+/** The next invoice, in a card on the right. */
+export interface Dashboard03Invoice {
+    /** The card's heading: "Next invoice". */
+    title: ReactNode;
+    /** A caption under it: when it's due. */
+    due?: ReactNode;
+    /** Its lines. */
+    lines: Dashboard03InvoiceLine[];
+    /** The total, under a hairline. */
+    total?: {
+        label: ReactNode;
+        amount: ReactNode;
+    };
+    /** A caption under the total: "Before VAT". */
+    note?: ReactNode;
+    /** The card it's paid with, and a button to change it. */
+    payment?: {
+        label: ReactNode;
+        detail?: ReactNode;
+        onChange?(): void;
+    };
+    /** A button at the foot of the card: "Download past invoices". */
+    action?: BlockButton;
+}
+/** What the forecast's sentence is made from. */
+export interface Dashboard03Forecast {
+    /** The month's forecast spend, formatted in whole units. */
+    forecast: string;
+    /** How far over or under the budget it is, formatted in whole units. */
+    difference: string;
+    /** Whether the forecast goes over the budget. */
+    over: boolean;
+    /** Whether the budget option is ticked. */
+    optionChecked: boolean;
+}
+export interface Dashboard03Labels {
+    /** The button that opens the budget's editor. @default "Edit budget" */
+    editBudget?: string;
+    /** The editor's title. @default "Monthly budget" */
+    budgetTitle?: string;
+    /** The budget field's label. @default "Budget" */
+    budgetField?: string;
+    /** The field's error when the budget is missing or under 1. @default "Enter a budget of at least €1." */
+    budgetError?: string;
+    /** @default "Cancel" */
+    cancel?: string;
+    /** @default "Save budget" */
+    saveBudget?: string;
+    /** After the amount spent. @default "of a €3,000 budget" */
+    ofBudget?(budget: string): ReactNode;
+    /** Under the meter, on the left. @default "98% used" */
+    used?(percent: number): ReactNode;
+    /** Under the meter, on the right. @default "18 days left" */
+    daysLeft?(days: number): ReactNode;
+    /** Names the meter for screen readers. @default "98% of the budget spent" */
+    meter?(percent: number): string;
+    /** The sentence under the meter: where spend is heading. @default "At this pace you'll spend about €3,124 by the end of the month, €124 over budget." */
+    forecast?(forecast: Dashboard03Forecast): ReactNode;
+    /** The button that changes the payment card. @default "Change" */
+    changePayment?: string;
+}
+export interface Dashboard03Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under it: the month and the plan. */
+    description?: ReactNode;
+    /** The budget card's heading. @default "Spend this month" */
+    spendTitle?: ReactNode;
+    /** What's been spent so far this month. */
+    spent: number;
+    /** The month's forecast spend, at the pace so far. */
+    forecast: number;
+    /** Days left in the month. */
+    daysLeft: number;
+    /** The monthly budget, when you keep it yourself. */
+    budget?: number;
+    /** The budget to start with. @default 1000 */
+    defaultBudget?: number;
+    /** Called when the person saves a new budget, with whether the option is ticked. */
+    onBudgetChange?(budget: number, optionChecked: boolean): void;
+    /** A checkbox in the budget's editor. */
+    budgetOption?: Dashboard03BudgetOption;
+    /** A caption in the editor, under the checkbox. */
+    budgetNote?: ReactNode;
+    /** The currency amounts are in. @default "EUR" */
+    currency?: string;
+    /** The locale amounts are formatted for. @default "en-IE" */
+    locale?: string;
+    /** The spend broken down, in a table under the budget. */
+    table?: Dashboard03Table<Row>;
+    /** The next invoice, on the right. */
+    invoice?: Dashboard03Invoice;
+    /** Words that aren't content (button labels, the meter's captions, the forecast), in English unless you pass your own. */
+    labels?: Dashboard03Labels;
+}

package/dist/empty-states/Empty01/Empty01.d.cts

@@ -0,0 +1,3 @@
+import type { Empty01Props } from "./Empty01.types.cjs";
+/** A first-run page: what will be here, the button that makes the first one, and other ways to start. */
+export declare function Empty01({ title, description, icon, emptyTitle, emptyDescription, ways, defaultItems, onCreate, onRemove, namePattern, labels, className, ...props }: Empty01Props): import("react").JSX.Element;

package/dist/empty-states/Empty01/Empty01.d.ts

@@ -0,0 +1,3 @@
+import type { Empty01Props } from "./Empty01.types.js";
+/** A first-run page: what will be here, the button that makes the first one, and other ways to start. */
+export declare function Empty01({ title, description, icon, emptyTitle, emptyDescription, ways, defaultItems, onCreate, onRemove, namePattern, labels, className, ...props }: Empty01Props): import("react").JSX.Element;

package/dist/empty-states/Empty01/Empty01.types.d.cts

@@ -0,0 +1,94 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Another way to make the first one, shown as a ChoiceCard under the main button. */
+export interface Empty01Way {
+    /** Tells the ways apart; it comes back on the item made this way. */
+    id: string;
+    /** The card's title, and the dialog's when this way is picked: "Connect a repository". */
+    title: string;
+    /** A line under it: "Its code, branches and history." */
+    description: string;
+    /** A 20px icon on the card, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Marks the card as the recommended way. */
+    recommended?: boolean;
+    /** What an item made this way says under its name: "Connected repository". */
+    source?: ReactNode;
+    /** The dialog's title when this way is picked. Defaults to the card's title. */
+    dialogTitle?: ReactNode;
+    /** A sentence under the dialog's title: "Name the project; you'll pick the repository next." */
+    dialogDescription?: ReactNode;
+}
+/** Something made from the empty page, listed once there's one. */
+export interface Empty01Item {
+    /** The name it was given. */
+    name: string;
+    /** How it was made, shown under its name. */
+    source?: ReactNode;
+    /** The id of the way it was made, or undefined for the main button. */
+    way?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty01Labels {
+    /** The button in the header once there's something. @default "New project" */
+    newItem?: string;
+    /** The main button, and the dialog's button for it. @default "Create project" */
+    create?: string;
+    /** The dialog's button for the other ways. @default "Continue" */
+    continue?: string;
+    /** @default "Cancel" */
+    cancel?: string;
+    /** The line above the other ways. @default "or start another way" */
+    otherWays?: string;
+    /** The dialog's title for the main button. @default "Create a project" */
+    dialogTitle?: ReactNode;
+    /** @default "An empty project. Connect a repository to it whenever you're ready." */
+    dialogDescription?: ReactNode;
+    /** The name field's label. @default "Project name" */
+    name?: string;
+    /** @default "Lowercase letters, numbers and dashes." */
+    nameHint?: string;
+    /** @default "billing-api" */
+    placeholder?: string;
+    /** @default "Give the project a name." */
+    nameRequired?: string;
+    /** Shown when the name doesn't match `namePattern`. @default "Use only lowercase letters, numbers and dashes." */
+    nameInvalid?: string;
+    /** @default (name) => `There's already a project called ${name}.` */
+    nameTaken?(name: string): string;
+    /** The list's name for screen readers. @default "Projects" */
+    list?: string;
+    /** What an item made with the main button says under its name. @default "Blank project" */
+    blankSource?: string;
+    /** @default "Created just now" */
+    createdJustNow?: string;
+    /** The badge on a new item. @default "New" */
+    newBadge?: string;
+    /** The toast once it's made. @default (name) => `Created ${name}` */
+    created?(name: string): string;
+    /** The toast's button that takes it away again. @default "Undo" */
+    undo?: string;
+}
+export interface Empty01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Projects". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The empty state's 20px icon. */
+    icon?: ReactNode;
+    /** What's missing, as a plain statement: "No projects yet". */
+    emptyTitle: ReactNode;
+    /** What will be here, and why to make the first one. */
+    emptyDescription?: ReactNode;
+    /** Other ways to start, as cards under the main button. */
+    ways?: Empty01Way[];
+    /** What's there to begin with: leave it empty for the empty state. */
+    defaultItems?: Empty01Item[];
+    /** Runs when something is made: create it in your app. */
+    onCreate?(item: Empty01Item): void;
+    /** Runs when the toast's Undo takes it away again. */
+    onRemove?(item: Empty01Item): void;
+    /** What a name must look like.
+     * @default /^[a-z0-9]+(-[a-z0-9]+)*$/ */
+    namePattern?: RegExp;
+    labels?: Empty01Labels;
+}

package/dist/empty-states/Empty01/Empty01.types.d.ts

@@ -0,0 +1,94 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Another way to make the first one, shown as a ChoiceCard under the main button. */
+export interface Empty01Way {
+    /** Tells the ways apart; it comes back on the item made this way. */
+    id: string;
+    /** The card's title, and the dialog's when this way is picked: "Connect a repository". */
+    title: string;
+    /** A line under it: "Its code, branches and history." */
+    description: string;
+    /** A 20px icon on the card, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Marks the card as the recommended way. */
+    recommended?: boolean;
+    /** What an item made this way says under its name: "Connected repository". */
+    source?: ReactNode;
+    /** The dialog's title when this way is picked. Defaults to the card's title. */
+    dialogTitle?: ReactNode;
+    /** A sentence under the dialog's title: "Name the project; you'll pick the repository next." */
+    dialogDescription?: ReactNode;
+}
+/** Something made from the empty page, listed once there's one. */
+export interface Empty01Item {
+    /** The name it was given. */
+    name: string;
+    /** How it was made, shown under its name. */
+    source?: ReactNode;
+    /** The id of the way it was made, or undefined for the main button. */
+    way?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty01Labels {
+    /** The button in the header once there's something. @default "New project" */
+    newItem?: string;
+    /** The main button, and the dialog's button for it. @default "Create project" */
+    create?: string;
+    /** The dialog's button for the other ways. @default "Continue" */
+    continue?: string;
+    /** @default "Cancel" */
+    cancel?: string;
+    /** The line above the other ways. @default "or start another way" */
+    otherWays?: string;
+    /** The dialog's title for the main button. @default "Create a project" */
+    dialogTitle?: ReactNode;
+    /** @default "An empty project. Connect a repository to it whenever you're ready." */
+    dialogDescription?: ReactNode;
+    /** The name field's label. @default "Project name" */
+    name?: string;
+    /** @default "Lowercase letters, numbers and dashes." */
+    nameHint?: string;
+    /** @default "billing-api" */
+    placeholder?: string;
+    /** @default "Give the project a name." */
+    nameRequired?: string;
+    /** Shown when the name doesn't match `namePattern`. @default "Use only lowercase letters, numbers and dashes." */
+    nameInvalid?: string;
+    /** @default (name) => `There's already a project called ${name}.` */
+    nameTaken?(name: string): string;
+    /** The list's name for screen readers. @default "Projects" */
+    list?: string;
+    /** What an item made with the main button says under its name. @default "Blank project" */
+    blankSource?: string;
+    /** @default "Created just now" */
+    createdJustNow?: string;
+    /** The badge on a new item. @default "New" */
+    newBadge?: string;
+    /** The toast once it's made. @default (name) => `Created ${name}` */
+    created?(name: string): string;
+    /** The toast's button that takes it away again. @default "Undo" */
+    undo?: string;
+}
+export interface Empty01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Projects". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The empty state's 20px icon. */
+    icon?: ReactNode;
+    /** What's missing, as a plain statement: "No projects yet". */
+    emptyTitle: ReactNode;
+    /** What will be here, and why to make the first one. */
+    emptyDescription?: ReactNode;
+    /** Other ways to start, as cards under the main button. */
+    ways?: Empty01Way[];
+    /** What's there to begin with: leave it empty for the empty state. */
+    defaultItems?: Empty01Item[];
+    /** Runs when something is made: create it in your app. */
+    onCreate?(item: Empty01Item): void;
+    /** Runs when the toast's Undo takes it away again. */
+    onRemove?(item: Empty01Item): void;
+    /** What a name must look like.
+     * @default /^[a-z0-9]+(-[a-z0-9]+)*$/ */
+    namePattern?: RegExp;
+    labels?: Empty01Labels;
+}

package/dist/empty-states/Empty02/Empty02.d.cts

@@ -0,0 +1,3 @@
+import type { Empty02Props } from "./Empty02.types.cjs";
+/** A searchable, filterable table that says what was looked for when nothing matches, with the ways back. */
+export declare function Empty02<Row extends object>({ title, description, columns, rows, rowKey, searchText, filters, defaultQuery, defaultFilters, onQueryChange, onFiltersChange, emptyTitle, emptyDescription, labels, className, ...props }: Empty02Props<Row>): import("react").JSX.Element;

package/dist/empty-states/Empty02/Empty02.d.ts

@@ -0,0 +1,3 @@
+import type { Empty02Props } from "./Empty02.types.js";
+/** A searchable, filterable table that says what was looked for when nothing matches, with the ways back. */
+export declare function Empty02<Row extends object>({ title, description, columns, rows, rowKey, searchText, filters, defaultQuery, defaultFilters, onQueryChange, onFiltersChange, emptyTitle, emptyDescription, labels, className, ...props }: Empty02Props<Row>): import("react").JSX.Element;

package/dist/empty-states/Empty02/Empty02.types.d.cts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TableColumn, TableProps } from "@openwarelabs/ui";
+/** A filter the toolbar can add: a menu section of values, and a Tag once one is picked. */
+export interface Empty02Filter<Row extends object> {
+    /** Tells the filters apart, in `defaultFilters` and `onFiltersChange`. */
+    key: string;
+    /** Its name, as the menu's heading and on the Tag ("Status: Failed"). */
+    label: string;
+    /** The values to pick from. */
+    options: string[];
+    /** The row's value for this filter. */
+    value(row: Row): string;
+}
+/** What's being looked for, given to the empty state's words. */
+export interface Empty02Search {
+    /** The search, trimmed. Empty when there's none. */
+    query: string;
+    /** The value picked for each filter that's on, by its key. */
+    filters: Record<string, string>;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty02Labels {
+    /** The search field's name and placeholder. @default "Search" */
+    search?: string;
+    /** The filters' name for screen readers. @default "Filters" */
+    filters?: string;
+    /** The filter menu's name. @default "Add a filter" */
+    filterMenu?: string;
+    /** The filter button with no filter on. @default "Add filter" */
+    addFilter?: string;
+    /** The filter button once one is on. @default "Filter" */
+    filter?: string;
+    /** A Tag's remove button. @default (label, value) => `${label.toLowerCase()} filter: ${value}` */
+    removeFilter?(label: string, value: string): string;
+    /** The count beside the filters. @default (shown, total) => `${shown} of ${total}` */
+    count?(shown: number, total: number): ReactNode;
+    /** @default "Clear search" */
+    clearSearch?: string;
+    /** @default "Clear filters" */
+    clearFilters?: string;
+}
+export interface Empty02Props<Row extends object> extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading, and the table's caption for screen readers: "Deploys". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The table's columns. */
+    columns: Array<TableColumn<Row>>;
+    /** Every row; the search and the filters narrow them. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: TableProps<Row>["rowKey"];
+    /** The text a row is found by. Every word of the search has to be in it. */
+    searchText(row: Row): string;
+    /** The filters the toolbar can add. */
+    filters?: Array<Empty02Filter<Row>>;
+    /** The search to start with. */
+    defaultQuery?: string;
+    /** The filters on to start with: a value for each filter's key. */
+    defaultFilters?: Record<string, string>;
+    /** Runs as the search changes. */
+    onQueryChange?(query: string): void;
+    /** Runs as filters are added and removed. */
+    onFiltersChange?(filters: Record<string, string>): void;
+    /** The empty state's title when nothing matches.
+     * @default `No results match “${query}”`, or "No results match these filters" */
+    emptyTitle?(search: Empty02Search): ReactNode;
+    /** The empty state's sentence when nothing matches: where you looked, and what to try. */
+    emptyDescription?(search: Empty02Search): ReactNode;
+    labels?: Empty02Labels;
+}

package/dist/empty-states/Empty02/Empty02.types.d.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TableColumn, TableProps } from "@openwarelabs/ui";
+/** A filter the toolbar can add: a menu section of values, and a Tag once one is picked. */
+export interface Empty02Filter<Row extends object> {
+    /** Tells the filters apart, in `defaultFilters` and `onFiltersChange`. */
+    key: string;
+    /** Its name, as the menu's heading and on the Tag ("Status: Failed"). */
+    label: string;
+    /** The values to pick from. */
+    options: string[];
+    /** The row's value for this filter. */
+    value(row: Row): string;
+}
+/** What's being looked for, given to the empty state's words. */
+export interface Empty02Search {
+    /** The search, trimmed. Empty when there's none. */
+    query: string;
+    /** The value picked for each filter that's on, by its key. */
+    filters: Record<string, string>;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty02Labels {
+    /** The search field's name and placeholder. @default "Search" */
+    search?: string;
+    /** The filters' name for screen readers. @default "Filters" */
+    filters?: string;
+    /** The filter menu's name. @default "Add a filter" */
+    filterMenu?: string;
+    /** The filter button with no filter on. @default "Add filter" */
+    addFilter?: string;
+    /** The filter button once one is on. @default "Filter" */
+    filter?: string;
+    /** A Tag's remove button. @default (label, value) => `${label.toLowerCase()} filter: ${value}` */
+    removeFilter?(label: string, value: string): string;
+    /** The count beside the filters. @default (shown, total) => `${shown} of ${total}` */
+    count?(shown: number, total: number): ReactNode;
+    /** @default "Clear search" */
+    clearSearch?: string;
+    /** @default "Clear filters" */
+    clearFilters?: string;
+}
+export interface Empty02Props<Row extends object> extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading, and the table's caption for screen readers: "Deploys". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The table's columns. */
+    columns: Array<TableColumn<Row>>;
+    /** Every row; the search and the filters narrow them. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key.
+     * @default "id" */
+    rowKey?: TableProps<Row>["rowKey"];
+    /** The text a row is found by. Every word of the search has to be in it. */
+    searchText(row: Row): string;
+    /** The filters the toolbar can add. */
+    filters?: Array<Empty02Filter<Row>>;
+    /** The search to start with. */
+    defaultQuery?: string;
+    /** The filters on to start with: a value for each filter's key. */
+    defaultFilters?: Record<string, string>;
+    /** Runs as the search changes. */
+    onQueryChange?(query: string): void;
+    /** Runs as filters are added and removed. */
+    onFiltersChange?(filters: Record<string, string>): void;
+    /** The empty state's title when nothing matches.
+     * @default `No results match “${query}”`, or "No results match these filters" */
+    emptyTitle?(search: Empty02Search): ReactNode;
+    /** The empty state's sentence when nothing matches: where you looked, and what to try. */
+    emptyDescription?(search: Empty02Search): ReactNode;
+    labels?: Empty02Labels;
+}

package/dist/empty-states/Empty03/Empty03.d.cts

@@ -0,0 +1,3 @@
+import type { Empty03Props } from "./Empty03.types.cjs";
+/** A card whose list couldn't load: what went wrong, a button to try again, and the list once it comes back. */
+export declare function Empty03({ title, description, cardTitle, views, items, status, defaultStatus, onRetry, errorIcon, errorTitle, errorDescription, errorDetail, secondaryAction, labels, className, ...props }: Empty03Props): import("react").JSX.Element;

package/dist/empty-states/Empty03/Empty03.d.ts

@@ -0,0 +1,3 @@
+import type { Empty03Props } from "./Empty03.types.js";
+/** A card whose list couldn't load: what went wrong, a button to try again, and the list once it comes back. */
+export declare function Empty03({ title, description, cardTitle, views, items, status, defaultStatus, onRetry, errorIcon, errorTitle, errorDescription, errorDetail, secondaryAction, labels, className, ...props }: Empty03Props): import("react").JSX.Element;

package/dist/empty-states/Empty03/Empty03.types.d.cts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+/** Whether the list loaded: the error, the spinner while trying again, or the list. */
+export type Empty03Status = "failed" | "loading" | "loaded";
+/** One row of the list, once it loads. */
+export interface Empty03Item {
+    /** Tells the rows apart. Defaults to the row's place in the list. */
+    id?: string;
+    /** A 15px icon in a circle at the start of the row. */
+    icon?: ReactNode;
+    /** The row's main line. */
+    title: ReactNode;
+    /** A caption under it: "billing-api · for Tomás Reyes". */
+    meta?: ReactNode;
+    /** A short figure on the right, such as how long it took. Hidden on phones. */
+    time?: ReactNode;
+    /** A badge at the end of the row. */
+    status?: {
+        label: ReactNode;
+        tone?: BadgeVariant;
+    };
+}
+/** A view of the list in the card's segmented control. */
+export interface Empty03View {
+    value: string;
+    label: string;
+    /** Which rows it shows. Leave it out for all of them. */
+    match?(item: Empty03Item): boolean;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty03Labels {
+    /** @default "Try again" */
+    retry?: string;
+    /** Beside the spinner. @default "Loading…" */
+    loading?: string;
+    /** The views' name for screen readers. @default "Show" */
+    views?: string;
+    /** The list's name for screen readers. Defaults to the card's title. */
+    list?: string;
+}
+export interface Empty03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Agent runs". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The card's heading: "Today". */
+    cardTitle: ReactNode;
+    /** Views of the list, as a segmented control in the card's corner. Off until the list loads. */
+    views?: Empty03View[];
+    /** The rows, once the list loads. */
+    items: Empty03Item[];
+    /** Whether the list loaded, for controlled use. */
+    status?: Empty03Status;
+    /** Where it starts, when it isn't controlled.
+     * @default "failed" */
+    defaultStatus?: Empty03Status;
+    /** Runs on Try again: fetch the list again. While its promise is pending the card shows a spinner; once it resolves
+     * the list shows, and if it throws the error comes back. */
+    onRetry?(): void | Promise<void>;
+    /** The error's 20px icon. @default a cloud with a line through it */
+    errorIcon?: ReactNode;
+    /** What didn't load: "Couldn't load agent runs". */
+    errorTitle: ReactNode;
+    /** What went wrong, and what still works. */
+    errorDescription?: ReactNode;
+    /** A status and request ID for support, in code under the description: "504 · req_8f2c41d9". */
+    errorDetail?: ReactNode;
+    /** A second button beside Try again, such as "Check status". */
+    secondaryAction?: BlockAction;
+    labels?: Empty03Labels;
+}

package/dist/empty-states/Empty03/Empty03.types.d.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+import type { BlockAction } from "../../shared/shared.types.js";
+/** Whether the list loaded: the error, the spinner while trying again, or the list. */
+export type Empty03Status = "failed" | "loading" | "loaded";
+/** One row of the list, once it loads. */
+export interface Empty03Item {
+    /** Tells the rows apart. Defaults to the row's place in the list. */
+    id?: string;
+    /** A 15px icon in a circle at the start of the row. */
+    icon?: ReactNode;
+    /** The row's main line. */
+    title: ReactNode;
+    /** A caption under it: "billing-api · for Tomás Reyes". */
+    meta?: ReactNode;
+    /** A short figure on the right, such as how long it took. Hidden on phones. */
+    time?: ReactNode;
+    /** A badge at the end of the row. */
+    status?: {
+        label: ReactNode;
+        tone?: BadgeVariant;
+    };
+}
+/** A view of the list in the card's segmented control. */
+export interface Empty03View {
+    value: string;
+    label: string;
+    /** Which rows it shows. Leave it out for all of them. */
+    match?(item: Empty03Item): boolean;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Empty03Labels {
+    /** @default "Try again" */
+    retry?: string;
+    /** Beside the spinner. @default "Loading…" */
+    loading?: string;
+    /** The views' name for screen readers. @default "Show" */
+    views?: string;
+    /** The list's name for screen readers. Defaults to the card's title. */
+    list?: string;
+}
+export interface Empty03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Agent runs". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The card's heading: "Today". */
+    cardTitle: ReactNode;
+    /** Views of the list, as a segmented control in the card's corner. Off until the list loads. */
+    views?: Empty03View[];
+    /** The rows, once the list loads. */
+    items: Empty03Item[];
+    /** Whether the list loaded, for controlled use. */
+    status?: Empty03Status;
+    /** Where it starts, when it isn't controlled.
+     * @default "failed" */
+    defaultStatus?: Empty03Status;
+    /** Runs on Try again: fetch the list again. While its promise is pending the card shows a spinner; once it resolves
+     * the list shows, and if it throws the error comes back. */
+    onRetry?(): void | Promise<void>;
+    /** The error's 20px icon. @default a cloud with a line through it */
+    errorIcon?: ReactNode;
+    /** What didn't load: "Couldn't load agent runs". */
+    errorTitle: ReactNode;
+    /** What went wrong, and what still works. */
+    errorDescription?: ReactNode;
+    /** A status and request ID for support, in code under the description: "504 · req_8f2c41d9". */
+    errorDetail?: ReactNode;
+    /** A second button beside Try again, such as "Check status". */
+    secondaryAction?: BlockAction;
+    labels?: Empty03Labels;
+}

package/dist/error-pages/ErrorPage01/ErrorPage01.d.cts

@@ -0,0 +1,3 @@
+import type { ErrorPage01Props } from "./ErrorPage01.types.cjs";
+/** A 404 on the dot grid: the zero drawn as an empty orbit, a search field, and links to the main places. */
+export declare function ErrorPage01({ brand, helpLink, title, description, places, maxPlaces, onSearch, labels, className, ...props }: ErrorPage01Props): import("react").JSX.Element;

package/dist/error-pages/ErrorPage01/ErrorPage01.d.ts

@@ -0,0 +1,3 @@
+import type { ErrorPage01Props } from "./ErrorPage01.types.js";
+/** A 404 on the dot grid: the zero drawn as an empty orbit, a search field, and links to the main places. */
+export declare function ErrorPage01({ brand, helpLink, title, description, places, maxPlaces, onSearch, labels, className, ...props }: ErrorPage01Props): import("react").JSX.Element;