@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/contact/Contact01/Contact01.types.d.ts

@@ -0,0 +1,103 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SelectItem } from "@openwarelabs/ui";
+/** What someone filled in. Fields the form doesn't show stay empty. */
+export interface Contact01Values {
+    /** Their name. */
+    name: string;
+    /** Their email address, as typed. */
+    email: string;
+    /** Their company, or empty. */
+    company: string;
+    /** The chosen team size's value, or empty. */
+    size: string;
+    /** The chosen topic's value. */
+    topic: string;
+    /** What they wrote. */
+    message: string;
+}
+/** The messages under the fields that need fixing. */
+export type Contact01Errors = Partial<Record<"name" | "email" | "message", string>>;
+/** A way to reach you, in the list beside the form. */
+export interface Contact01Detail {
+    /** A 16px icon in a tile before it. */
+    icon?: ReactNode;
+    /** What it is: "Sales". */
+    label: ReactNode;
+    /** The address or the fact: "sales@example.com", "Within one working day". */
+    value: ReactNode;
+    /** Makes the value a link, such as "mailto:sales@example.com". */
+    href?: string;
+    /** A line under it: "Plans, invoices and security reviews". */
+    note?: ReactNode;
+}
+/** The form's words, its validation messages included, in English unless you pass your own. */
+export interface Contact01Labels {
+    /** @default "Name" */
+    name?: string;
+    /** @default "Work email" */
+    email?: string;
+    /** @default "you@example.com" */
+    emailPlaceholder?: string;
+    /** @default "Company" */
+    company?: string;
+    /** @default "Team size" */
+    size?: string;
+    /** @default "Choose a size" */
+    sizePlaceholder?: string;
+    /** After the labels of the fields that can be left empty. @default "(optional)" */
+    optional?: string;
+    /** @default "What's it about?" */
+    topic?: string;
+    /** @default "Message" */
+    message?: string;
+    /** Under the message until there's an error. @default "A few lines about your team and what you need." */
+    messageHint?: string;
+    /** The submit button. @default "Send message" */
+    submit?: string;
+    /** The button that brings the form back. @default "Send another message" */
+    again?: string;
+    /** @default "Enter your name." */
+    nameEmpty?: string;
+    /** @default "Enter your work email." */
+    emailEmpty?: string;
+    /** @default "Enter an email address like name@example.com." */
+    emailInvalid?: string;
+    /** @default "Tell us a little about what you need." */
+    messageEmpty?: string;
+    /** For a message under `minMessageLength`. @default "Add a few more words, so it reaches the right person." */
+    messageShort?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+}
+export interface Contact01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** A short line in a Chip above the title, such as "Contact". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Ways to reach you and when you reply, listed under the heading. */
+    details?: Contact01Detail[];
+    /** The choices for "What's it about?". Leave out for no such field. */
+    topics?: SelectItem[];
+    /** The topic chosen at first. @default the first topic */
+    defaultTopic?: string;
+    /** The choices for an optional team size. Leave out for no such field. */
+    sizes?: SelectItem[];
+    /** The fewest characters a message can have.
+     * @default 20 */
+    minMessageLength?: number;
+    /**
+     * Sends the message. While its promise is pending the button shows a spinner; if it throws, the error's message
+     * shows beside the button, and once it resolves the form gives way to `successTitle`.
+     */
+    onSubmit(values: Contact01Values): void | Promise<void>;
+    /** A small line beside the button: "We use your details only to reply to you." */
+    note?: ReactNode;
+    /** What replaces the form once it's sent, given what they sent: "Thanks, Maya". */
+    successTitle(values: Contact01Values): ReactNode;
+    /** A line under it, given what they sent. */
+    successDescription?(values: Contact01Values): ReactNode;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Contact01Labels;
+}

package/dist/contact/Contact02/Contact02.d.cts

@@ -0,0 +1,3 @@
+import type { Contact02Props } from "./Contact02.types.cjs";
+/** Ways to get help before writing in, a card each with a few links and the way in, and a line about the service's state. */
+export declare function Contact02({ eyebrow, title, description, options, status, labels, className, ...props }: Contact02Props): import("react").JSX.Element;

package/dist/contact/Contact02/Contact02.d.ts

@@ -0,0 +1,3 @@
+import type { Contact02Props } from "./Contact02.types.js";
+/** Ways to get help before writing in, a card each with a few links and the way in, and a line about the service's state. */
+export declare function Contact02({ eyebrow, title, description, options, status, labels, className, ...props }: Contact02Props): import("react").JSX.Element;

package/dist/contact/Contact02/Contact02.types.d.cts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** A row in an option's list: a guide, a thread, a reply time. */
+export interface Contact02ListItem {
+    /** The row's words, on the left. */
+    label: ReactNode;
+    /** Makes them a link. */
+    href?: string;
+    /** A figure on the right, in tabular numerals: "4 min", "24 replies". */
+    meta?: ReactNode;
+}
+/** A way to get help, in a card of its own. */
+export interface Contact02Option {
+    /** A 20px icon in a tile at the top. */
+    icon?: ReactNode;
+    /** The card's heading: "Documentation". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** An email address in a field with a copy button. */
+    email?: string;
+    /** A few rows under a hairline. */
+    list?: Contact02ListItem[];
+    /** The list's accessible name: "Popular guides". */
+    listLabel?: string;
+    /** The link along the card's foot, with an arrow: "Browse the docs". */
+    link: BlockLink;
+    /** Something on the right of the foot, such as avatars and a member count. */
+    footNote?: ReactNode;
+}
+/** A line under the cards about whether everything's working. */
+export interface Contact02Status {
+    /** The state, after a green dot: "All systems working". */
+    label: ReactNode;
+    /** A line beside it, which can hold a link to the status page. */
+    description?: ReactNode;
+}
+/** The words on the cards that aren't content, in English unless you pass your own. */
+export interface Contact02Labels {
+    /** The button that copies an option's email address. @default "Copy address" */
+    copyAddress?: string;
+}
+export interface Contact02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Support". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The ways to get help, three to a row: the docs, a forum, email. */
+    options: Contact02Option[];
+    /** A line about the service's state under the cards. */
+    status?: Contact02Status;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Contact02Labels;
+}

package/dist/contact/Contact02/Contact02.types.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** A row in an option's list: a guide, a thread, a reply time. */
+export interface Contact02ListItem {
+    /** The row's words, on the left. */
+    label: ReactNode;
+    /** Makes them a link. */
+    href?: string;
+    /** A figure on the right, in tabular numerals: "4 min", "24 replies". */
+    meta?: ReactNode;
+}
+/** A way to get help, in a card of its own. */
+export interface Contact02Option {
+    /** A 20px icon in a tile at the top. */
+    icon?: ReactNode;
+    /** The card's heading: "Documentation". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** An email address in a field with a copy button. */
+    email?: string;
+    /** A few rows under a hairline. */
+    list?: Contact02ListItem[];
+    /** The list's accessible name: "Popular guides". */
+    listLabel?: string;
+    /** The link along the card's foot, with an arrow: "Browse the docs". */
+    link: BlockLink;
+    /** Something on the right of the foot, such as avatars and a member count. */
+    footNote?: ReactNode;
+}
+/** A line under the cards about whether everything's working. */
+export interface Contact02Status {
+    /** The state, after a green dot: "All systems working". */
+    label: ReactNode;
+    /** A line beside it, which can hold a link to the status page. */
+    description?: ReactNode;
+}
+/** The words on the cards that aren't content, in English unless you pass your own. */
+export interface Contact02Labels {
+    /** The button that copies an option's email address. @default "Copy address" */
+    copyAddress?: string;
+}
+export interface Contact02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Support". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The ways to get help, three to a row: the docs, a forum, email. */
+    options: Contact02Option[];
+    /** A line about the service's state under the cards. */
+    status?: Contact02Status;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Contact02Labels;
+}

package/dist/dashboards/Dashboard01/Dashboard01.d.cts

@@ -0,0 +1,3 @@
+import type { Dashboard01Props } from "./Dashboard01.types.cjs";
+/** A page title with its filters, a row of stats, then a chart across the page in a card. */
+export declare function Dashboard01({ title, description, filters, stats, chart, labels, className, ...props }: Dashboard01Props): import("react").JSX.Element;

package/dist/dashboards/Dashboard01/Dashboard01.d.ts

@@ -0,0 +1,3 @@
+import type { Dashboard01Props } from "./Dashboard01.types.js";
+/** A page title with its filters, a row of stats, then a chart across the page in a card. */
+export declare function Dashboard01({ title, description, filters, stats, chart, labels, className, ...props }: Dashboard01Props): import("react").JSX.Element;

package/dist/dashboards/Dashboard01/Dashboard01.types.d.cts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SegmentedControlOption, StatProps } from "@openwarelabs/ui";
+/** A control beside the title that changes what the page shows: a select (a project) or segments (a time range). */
+export interface Dashboard01Filter {
+    /** `select` for a list of choices, `segmented` for two to five side by side. */
+    kind: "select" | "segmented";
+    /** Names it for screen readers: "Project", "Time range". */
+    label: string;
+    /** Its choices. */
+    options: SegmentedControlOption[];
+    /** The chosen value, when you keep it yourself. */
+    value?: string;
+    /** The value chosen to start with. @default the first option's */
+    defaultValue?: string;
+    /** Called with the new value when it changes. */
+    onChange?(value: string): void;
+}
+/** One entry in the chart's legend. */
+export interface Dashboard01LegendItem {
+    /** What the mark stands for. */
+    label: ReactNode;
+    /** The mark itself, drawn to match the chart: a short line, a small bar. */
+    swatch: ReactNode;
+}
+/** The chart across the page, in a card. */
+export interface Dashboard01Chart {
+    /** The card's heading: "Deploys per day". */
+    title: ReactNode;
+    /** A caption under it, summing up what the chart shows. */
+    description?: ReactNode;
+    /** The legend, on the right of the heading. */
+    legend?: Dashboard01LegendItem[];
+    /** The chart: an SVG you draw, or one from a charting library. */
+    content: ReactNode;
+}
+export interface Dashboard01Labels {
+    /** Names the legend for screen readers. @default "Legend" */
+    legend?: string;
+}
+export interface Dashboard01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Controls on the right of the title that change what the stats and the chart show. */
+    filters?: Dashboard01Filter[];
+    /** A row of stats: four fill it on desktops, two to a row on tablets and phones. */
+    stats: StatProps[];
+    /** The chart across the page, under the stats. */
+    chart?: Dashboard01Chart;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: Dashboard01Labels;
+}

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

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SegmentedControlOption, StatProps } from "@openwarelabs/ui";
+/** A control beside the title that changes what the page shows: a select (a project) or segments (a time range). */
+export interface Dashboard01Filter {
+    /** `select` for a list of choices, `segmented` for two to five side by side. */
+    kind: "select" | "segmented";
+    /** Names it for screen readers: "Project", "Time range". */
+    label: string;
+    /** Its choices. */
+    options: SegmentedControlOption[];
+    /** The chosen value, when you keep it yourself. */
+    value?: string;
+    /** The value chosen to start with. @default the first option's */
+    defaultValue?: string;
+    /** Called with the new value when it changes. */
+    onChange?(value: string): void;
+}
+/** One entry in the chart's legend. */
+export interface Dashboard01LegendItem {
+    /** What the mark stands for. */
+    label: ReactNode;
+    /** The mark itself, drawn to match the chart: a short line, a small bar. */
+    swatch: ReactNode;
+}
+/** The chart across the page, in a card. */
+export interface Dashboard01Chart {
+    /** The card's heading: "Deploys per day". */
+    title: ReactNode;
+    /** A caption under it, summing up what the chart shows. */
+    description?: ReactNode;
+    /** The legend, on the right of the heading. */
+    legend?: Dashboard01LegendItem[];
+    /** The chart: an SVG you draw, or one from a charting library. */
+    content: ReactNode;
+}
+export interface Dashboard01Labels {
+    /** Names the legend for screen readers. @default "Legend" */
+    legend?: string;
+}
+export interface Dashboard01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Controls on the right of the title that change what the stats and the chart show. */
+    filters?: Dashboard01Filter[];
+    /** A row of stats: four fill it on desktops, two to a row on tablets and phones. */
+    stats: StatProps[];
+    /** The chart across the page, under the stats. */
+    chart?: Dashboard01Chart;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: Dashboard01Labels;
+}

package/dist/dashboards/Dashboard02/Dashboard02.d.cts

@@ -0,0 +1,3 @@
+import type { Dashboard02Props } from "./Dashboard02.types.cjs";
+/** The numbers on the left, with a table under them; what just happened in a feed on the right, grouped by day. */
+export declare function Dashboard02<Row extends object>({ title, description, stats, table, events, newEvents, eventFilters, labels, className, ...props }: Dashboard02Props<Row>): import("react").JSX.Element;

package/dist/dashboards/Dashboard02/Dashboard02.d.ts

@@ -0,0 +1,3 @@
+import type { Dashboard02Props } from "./Dashboard02.types.js";
+/** The numbers on the left, with a table under them; what just happened in a feed on the right, grouped by day. */
+export declare function Dashboard02<Row extends object>({ title, description, stats, table, events, newEvents, eventFilters, labels, className, ...props }: Dashboard02Props<Row>): import("react").JSX.Element;

package/dist/dashboards/Dashboard02/Dashboard02.types.d.cts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { StatProps, TableSort } from "@openwarelabs/ui";
+import type { BlockTableColumn } from "../../shared/shared.types.cjs";
+/** One thing that happened, in the feed. */
+export interface Dashboard02Event {
+    /** Unique in the feed. */
+    id: string;
+    /** What sort of event it is, matched by the feed's filters: "deploy", "review". */
+    kind?: string;
+    /** A 14px icon in a round tile, usually from lucide-react. */
+    icon: ReactNode;
+    /** Colours the tile: green for something that went live, red for a failure, the primary colour for agents. */
+    tone?: "success" | "danger" | "primary";
+    /** The sentence: who did what. */
+    text: ReactNode;
+    /** A caption under it: where, how long, when. */
+    meta?: ReactNode;
+    /** The day it belongs to, as a heading over its group: "Today", "Yesterday". Events of a day sit together. */
+    day: string;
+}
+/** A filter over the feed: shows the events of one kind. */
+export interface Dashboard02EventFilter {
+    /** The kind it shows, matching events' `kind`. */
+    value: string;
+    /** Its words. */
+    label: ReactNode;
+}
+/** The table under the stats, in its own card. */
+export interface Dashboard02Table<Row> {
+    /** The card's heading: "Projects". */
+    title: 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;
+}
+export interface Dashboard02Labels {
+    /** The feed's heading. @default "Activity" */
+    feed?: string;
+    /** Names the feed's filters for screen readers. @default "Show" */
+    filters?: string;
+    /** The filter that shows every event. @default "All" */
+    all?: string;
+    /** The button over the feed when new events are waiting. @default "2 new events" */
+    newEvents?(count: number): ReactNode;
+    /** The button under the feed that shows the days before the first. @default "Show earlier activity" */
+    showEarlier?: string;
+    /** When nothing in the first day matches the filter. @default "Nothing like this has happened today." */
+    noneToday?: string;
+    /** When nothing at all matches it. @default "Nothing like this happened this week." */
+    none?: string;
+}
+export interface Dashboard02Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Stats on the left, two to a row: four fill it. */
+    stats: StatProps[];
+    /** A table under the stats. */
+    table?: Dashboard02Table<Row>;
+    /** What happened, newest first, in a feed on the right. Only the first day shows until the person asks for more. */
+    events: Dashboard02Event[];
+    /** Events that arrived while the page was open. A button over the feed shows how many, and adds them to it. */
+    newEvents?: Dashboard02Event[];
+    /** Filters over the feed, after "All", each showing the events of one kind. */
+    eventFilters?: Dashboard02EventFilter[];
+    /** Words that aren't content (headings, buttons, empty text), in English unless you pass your own. */
+    labels?: Dashboard02Labels;
+}

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

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { StatProps, TableSort } from "@openwarelabs/ui";
+import type { BlockTableColumn } from "../../shared/shared.types.js";
+/** One thing that happened, in the feed. */
+export interface Dashboard02Event {
+    /** Unique in the feed. */
+    id: string;
+    /** What sort of event it is, matched by the feed's filters: "deploy", "review". */
+    kind?: string;
+    /** A 14px icon in a round tile, usually from lucide-react. */
+    icon: ReactNode;
+    /** Colours the tile: green for something that went live, red for a failure, the primary colour for agents. */
+    tone?: "success" | "danger" | "primary";
+    /** The sentence: who did what. */
+    text: ReactNode;
+    /** A caption under it: where, how long, when. */
+    meta?: ReactNode;
+    /** The day it belongs to, as a heading over its group: "Today", "Yesterday". Events of a day sit together. */
+    day: string;
+}
+/** A filter over the feed: shows the events of one kind. */
+export interface Dashboard02EventFilter {
+    /** The kind it shows, matching events' `kind`. */
+    value: string;
+    /** Its words. */
+    label: ReactNode;
+}
+/** The table under the stats, in its own card. */
+export interface Dashboard02Table<Row> {
+    /** The card's heading: "Projects". */
+    title: 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;
+}
+export interface Dashboard02Labels {
+    /** The feed's heading. @default "Activity" */
+    feed?: string;
+    /** Names the feed's filters for screen readers. @default "Show" */
+    filters?: string;
+    /** The filter that shows every event. @default "All" */
+    all?: string;
+    /** The button over the feed when new events are waiting. @default "2 new events" */
+    newEvents?(count: number): ReactNode;
+    /** The button under the feed that shows the days before the first. @default "Show earlier activity" */
+    showEarlier?: string;
+    /** When nothing in the first day matches the filter. @default "Nothing like this has happened today." */
+    noneToday?: string;
+    /** When nothing at all matches it. @default "Nothing like this happened this week." */
+    none?: string;
+}
+export interface Dashboard02Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Stats on the left, two to a row: four fill it. */
+    stats: StatProps[];
+    /** A table under the stats. */
+    table?: Dashboard02Table<Row>;
+    /** What happened, newest first, in a feed on the right. Only the first day shows until the person asks for more. */
+    events: Dashboard02Event[];
+    /** Events that arrived while the page was open. A button over the feed shows how many, and adds them to it. */
+    newEvents?: Dashboard02Event[];
+    /** Filters over the feed, after "All", each showing the events of one kind. */
+    eventFilters?: Dashboard02EventFilter[];
+    /** Words that aren't content (headings, buttons, empty text), in English unless you pass your own. */
+    labels?: Dashboard02Labels;
+}

package/dist/dashboards/Dashboard03/Dashboard03.d.cts

@@ -0,0 +1,6 @@
+import type { Dashboard03Props } from "./Dashboard03.types.cjs";
+/**
+ * This month's spend against a budget the person can change, the same spend broken down in a table, and what the
+ * next invoice will be. The meter turns amber at 80% and red at the budget.
+ */
+export declare function Dashboard03<Row extends object>({ title, description, spendTitle, spent, forecast, daysLeft, budget: budgetProp, defaultBudget, onBudgetChange, budgetOption, budgetNote, currency, locale, table, invoice, labels, className, ...props }: Dashboard03Props<Row>): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { Dashboard03Props } from "./Dashboard03.types.js";
+/**
+ * This month's spend against a budget the person can change, the same spend broken down in a table, and what the
+ * next invoice will be. The meter turns amber at 80% and red at the budget.
+ */
+export declare function Dashboard03<Row extends object>({ title, description, spendTitle, spent, forecast, daysLeft, budget: budgetProp, defaultBudget, onBudgetChange, budgetOption, budgetNote, currency, locale, table, invoice, labels, className, ...props }: Dashboard03Props<Row>): import("react").JSX.Element;

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

@@ -0,0 +1,131 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockTableColumn } from "../../shared/shared.types.cjs";
+/** 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;
+}