@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/chat/Chat01/Chat01.types.d.ts

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChatRating } from "@openwarelabs/ui";
+import type { BlockMenuItem } from "../../shared/shared.types.js";
+/** One message in the thread. */
+export interface Chat01Message {
+    /** Unique in the thread. */
+    id: string;
+    /** The person's own message, or the agent's reply. */
+    from: "user" | "assistant";
+    /** When it was sent, shown beside the name. */
+    time: Date | string;
+    /** The words as plain text: what Copy copies, what Edit puts back in the box, and what a reply shows while it streams in. */
+    text: string;
+    /** How a reply shows, when that's more than its text: code in blocks, a pull request. */
+    body?: ReactNode;
+    /** `streaming` while a reply is still arriving: the box shows Stop until it's done. */
+    status?: "streaming" | "done";
+}
+/** An idea to start from in an empty thread: choosing it puts its words in the box. */
+export interface Chat01Suggestion {
+    /** The words it puts in the box. */
+    label: string;
+    /** A 16px icon before them, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** What an empty thread shows: a title, a line, and ideas to start from. */
+export interface Chat01Empty {
+    /** A 20px icon over the title, usually from lucide-react. */
+    icon?: ReactNode;
+    /** "Ask the Acme agent". */
+    title: ReactNode;
+    /** What the agent can do. */
+    description?: ReactNode;
+    /** Ideas to start from. */
+    suggestions?: Chat01Suggestion[];
+}
+export interface Chat01Labels {
+    /** The new chat button's name. @default "New chat" */
+    newChat?: string;
+    /** The menu button's name. @default "More" */
+    more?: string;
+    /** The menu's name for screen readers. @default "Chat" */
+    menu?: string;
+    /** The box's placeholder. @default "Reply to the agent…" */
+    placeholder?: string;
+    /** Names the box for screen readers. @default "Reply to the agent" */
+    input?: string;
+    /** A muted line under the box. @default how to send and start a new line */
+    hint?: ReactNode;
+    /** What the agent is doing while the reply hasn't started. @default "Thinking…" */
+    thinking?: string;
+    /** Names the ideas for screen readers. @default "Ideas to start from" */
+    suggestions?: string;
+}
+export interface Chat01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The chat's name, as the page's h1. */
+    title: ReactNode;
+    /** A caption under it, after a green dot: the agent and what it's working in. */
+    context?: ReactNode;
+    /** The messages, oldest first. */
+    messages: Chat01Message[];
+    /** The person, beside their messages. */
+    user: {
+        name: string;
+        avatar?: string;
+    };
+    /** The agent's name, beside its replies and while it thinks. @default "Agent" */
+    agentName?: string;
+    /** A line above the first message, such as the day. */
+    day?: ReactNode;
+    /** Shows the agent thinking, before its reply starts. */
+    thinking?: boolean;
+    /** Called with the text when the person sends a message. The box clears itself. */
+    onSend?(text: string): void;
+    /** Called by Stop while the agent is thinking or replying. */
+    onStop?(): void;
+    /** Shows a new chat button in the header; called when it's pressed. The box clears and takes focus. */
+    onNewChat?(): void;
+    /** Called when the person rates a reply. */
+    onRate?(message: Chat01Message, rating: ChatRating | null): void;
+    /** More actions in a menu in the header: earlier chats, a link to what the chat made. */
+    menu?: BlockMenuItem[];
+    /** A small heading at the top of the menu: "Earlier chats". */
+    menuHeading?: ReactNode;
+    /** What an empty thread shows. */
+    empty?: Chat01Empty;
+    /** The text in the box, when you keep it yourself. */
+    draft?: string;
+    /** Called with the text in the box on every change. */
+    onDraftChange?(draft: string): void;
+    /** The locale for the messages' times, such as "en-GB". Defaults to the browser's. */
+    locale?: string;
+    /** Words that aren't content (names for screen readers, the box's placeholder), in English unless you pass your own. */
+    labels?: Chat01Labels;
+}

package/dist/chat/Chat02/Chat02.d.cts

@@ -0,0 +1,6 @@
+import type { Chat02Props } from "./Chat02.types.cjs";
+/**
+ * A new-task page: a question, a growing box to answer it in with attachments and pickers for the project and the
+ * model, and a few ideas to start from.
+ */
+export declare function Chat02({ title, description, pickers, defaultAttachments, suggestions, onSend, labels, className, ...props }: Chat02Props): import("react").JSX.Element;

package/dist/chat/Chat02/Chat02.d.ts

@@ -0,0 +1,6 @@
+import type { Chat02Props } from "./Chat02.types.js";
+/**
+ * A new-task page: a question, a growing box to answer it in with attachments and pickers for the project and the
+ * model, and a few ideas to start from.
+ */
+export declare function Chat02({ title, description, pickers, defaultAttachments, suggestions, onSend, labels, className, ...props }: Chat02Props): import("react").JSX.Element;

package/dist/chat/Chat02/Chat02.types.d.cts

@@ -0,0 +1,70 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { PromptAttachment } from "@openwarelabs/ui";
+/** One choice in a picker. */
+export interface Chat02PickerOption {
+    /** What the picker's value becomes. */
+    value: string;
+    /** Its name, in the menu and on the picker's button once chosen. */
+    label: string;
+    /** A caption under the name in the menu: what it's for. */
+    description?: ReactNode;
+}
+/** A ghost button in the box's toolbar that opens a menu of choices, the chosen one ticked: a project, a model. */
+export interface Chat02Picker {
+    /** Unique among the pickers; the key of its choice in the sent message's `choices`. */
+    id: string;
+    /** What's being chosen: the menu's heading and the button's name for screen readers. */
+    label: string;
+    /** A 14px icon before the chosen value, usually from lucide-react. Hidden on phones. */
+    icon?: ReactNode;
+    /** Its choices. */
+    options: Chat02PickerOption[];
+    /** 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's chosen. */
+    onChange?(value: string): void;
+}
+/** An idea to start from, under the box: choosing it puts its words in the box. */
+export interface Chat02Suggestion {
+    /** The words it puts in the box. */
+    label: string;
+    /** A 16px icon before them, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** What's sent: the words, the files attached and what each picker is set to. */
+export interface Chat02Message {
+    /** The task, trimmed. */
+    text: string;
+    /** The files attached to it. */
+    attachments: PromptAttachment[];
+    /** Each picker's value, by its id. */
+    choices: Record<string, string>;
+}
+export interface Chat02Labels {
+    /** The box's placeholder. @default "Describe the task…" */
+    placeholder?: string;
+    /** Names the box for screen readers. @default "Task for the agent" */
+    input?: string;
+    /** A muted line under the box. @default how to send, start a new line and attach files */
+    hint?: ReactNode;
+    /** Names the ideas for screen readers. @default "Ideas to start from" */
+    suggestions?: string;
+}
+export interface Chat02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The question over the box, as the section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Pickers in the box's toolbar, after the paperclip. */
+    pickers?: Chat02Picker[];
+    /** Files attached to start with. The person can attach more with the paperclip, or by dropping or pasting them. */
+    defaultAttachments?: PromptAttachment[];
+    /** Ideas to start from, under the box. */
+    suggestions?: Chat02Suggestion[];
+    /** Called with the message when the person sends it. The box then clears, and its attachments with it. */
+    onSend?(message: Chat02Message): void;
+    /** Words that aren't content (the box's placeholder, names for screen readers), in English unless you pass your own. */
+    labels?: Chat02Labels;
+}

package/dist/chat/Chat02/Chat02.types.d.ts

@@ -0,0 +1,70 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { PromptAttachment } from "@openwarelabs/ui";
+/** One choice in a picker. */
+export interface Chat02PickerOption {
+    /** What the picker's value becomes. */
+    value: string;
+    /** Its name, in the menu and on the picker's button once chosen. */
+    label: string;
+    /** A caption under the name in the menu: what it's for. */
+    description?: ReactNode;
+}
+/** A ghost button in the box's toolbar that opens a menu of choices, the chosen one ticked: a project, a model. */
+export interface Chat02Picker {
+    /** Unique among the pickers; the key of its choice in the sent message's `choices`. */
+    id: string;
+    /** What's being chosen: the menu's heading and the button's name for screen readers. */
+    label: string;
+    /** A 14px icon before the chosen value, usually from lucide-react. Hidden on phones. */
+    icon?: ReactNode;
+    /** Its choices. */
+    options: Chat02PickerOption[];
+    /** 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's chosen. */
+    onChange?(value: string): void;
+}
+/** An idea to start from, under the box: choosing it puts its words in the box. */
+export interface Chat02Suggestion {
+    /** The words it puts in the box. */
+    label: string;
+    /** A 16px icon before them, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** What's sent: the words, the files attached and what each picker is set to. */
+export interface Chat02Message {
+    /** The task, trimmed. */
+    text: string;
+    /** The files attached to it. */
+    attachments: PromptAttachment[];
+    /** Each picker's value, by its id. */
+    choices: Record<string, string>;
+}
+export interface Chat02Labels {
+    /** The box's placeholder. @default "Describe the task…" */
+    placeholder?: string;
+    /** Names the box for screen readers. @default "Task for the agent" */
+    input?: string;
+    /** A muted line under the box. @default how to send, start a new line and attach files */
+    hint?: ReactNode;
+    /** Names the ideas for screen readers. @default "Ideas to start from" */
+    suggestions?: string;
+}
+export interface Chat02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The question over the box, as the section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Pickers in the box's toolbar, after the paperclip. */
+    pickers?: Chat02Picker[];
+    /** Files attached to start with. The person can attach more with the paperclip, or by dropping or pasting them. */
+    defaultAttachments?: PromptAttachment[];
+    /** Ideas to start from, under the box. */
+    suggestions?: Chat02Suggestion[];
+    /** Called with the message when the person sends it. The box then clears, and its attachments with it. */
+    onSend?(message: Chat02Message): void;
+    /** Words that aren't content (the box's placeholder, names for screen readers), in English unless you pass your own. */
+    labels?: Chat02Labels;
+}

package/dist/chat/Chat03/Chat03.d.cts

@@ -0,0 +1,6 @@
+import type { Chat03Props } from "./Chat03.types.cjs";
+/**
+ * One agent run: what it's working on at the top, with its status, a clock and Stop; its reasoning, sources and
+ * tool calls below as they happen, each call opening to its input, output and the diffs of the files it changed.
+ */
+export declare function Chat03({ title, project, branch, byline, status, elapsed, onStop, onRestart, reasoning, sources, steps, summary, labels, className, ...props }: Chat03Props): import("react").JSX.Element;

package/dist/chat/Chat03/Chat03.d.ts

@@ -0,0 +1,6 @@
+import type { Chat03Props } from "./Chat03.types.js";
+/**
+ * One agent run: what it's working on at the top, with its status, a clock and Stop; its reasoning, sources and
+ * tool calls below as they happen, each call opening to its input, output and the diffs of the files it changed.
+ */
+export declare function Chat03({ title, project, branch, byline, status, elapsed, onStop, onRestart, reasoning, sources, steps, summary, labels, className, ...props }: Chat03Props): import("react").JSX.Element;

package/dist/chat/Chat03/Chat03.types.d.cts

@@ -0,0 +1,96 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChainOfThoughtStep, ChatSourceItem, ChatToolProps } from "@openwarelabs/ui";
+/** A file a tool call changed, opening to its diff. */
+export interface Chat03File {
+    /** Its path: "src/invoices/format.ts". */
+    path: string;
+    /** Lines added. */
+    added: number;
+    /** Lines removed. */
+    removed: number;
+    /** The diff's lines, each starting with "+", "-", " " (context) or "@@" (a hunk's header). */
+    diff: string[];
+    /** Whether its diff starts open. @default false */
+    defaultOpen?: boolean;
+}
+/** A tool call the agent makes: what it's doing, the tool, its status and result, and what it changed. */
+export interface Chat03Tool extends Pick<ChatToolProps, "title" | "name" | "icon" | "status" | "summary" | "duration" | "input" | "output" | "error" | "defaultExpanded" | "approvalMessage" | "approveLabel" | "denyLabel" | "onApprove" | "onDeny"> {
+    /** The files it changed, as its output, each opening to its diff. Without a summary, the lines added and removed sum up. */
+    files?: Chat03File[];
+}
+/** One step of the run: a tool call, or the agent's own words between calls. */
+export interface Chat03Step {
+    /** Unique in the run. */
+    id: string;
+    /** The tool call. */
+    tool?: Chat03Tool;
+    /** The agent's words, level with the calls' titles, when the step isn't a call. */
+    note?: ReactNode;
+}
+/** The agent's reasoning before it starts: what it thought and the plan it made. */
+export interface Chat03Reasoning {
+    /** The reasoning itself, as text. */
+    text?: ReactNode;
+    /** The plan, in order, each with its status. */
+    steps?: ChainOfThoughtStep[];
+    /** How long it thought, in milliseconds. */
+    duration?: number;
+    /** Whether it starts open. @default true */
+    defaultExpanded?: boolean;
+}
+/** Where the run has got to: working, waiting for the person to approve a call, stopped, or finished. */
+export type Chat03Status = "running" | "waiting" | "stopped" | "done";
+export interface Chat03Labels {
+    /** The badge while it works. @default "Running" */
+    running?: string;
+    /** The badge while it waits for an approval. @default "Needs approval" */
+    waiting?: string;
+    /** @default "Stopped" */
+    stopped?: string;
+    /** @default "Done" */
+    done?: string;
+    /** @default "Stop" */
+    stop?: string;
+    /** @default "Run again" */
+    runAgain?: string;
+    /** Read out before the clock. @default "Time taken: " */
+    elapsed?: string;
+    /** Names the list of steps. @default "Steps" */
+    steps?: string;
+    /** Names a call's list of files. @default "Files changed" */
+    files?: string;
+    /** Names a file's diff. @default "Changes to src/invoices/format.ts" */
+    diff?(path: string): string;
+    /** Read out after lines added. @default "8 lines added," */
+    linesAdded?(count: number): string;
+    /** Read out after lines removed. @default "2 removed" */
+    linesRemoved?(count: number): string;
+}
+export interface Chat03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The task the agent is working on, as the section's heading. */
+    title: ReactNode;
+    /** Where it's working, first in the line under the title: the project. */
+    project?: ReactNode;
+    /** The branch it works on, in mono after the project. */
+    branch?: ReactNode;
+    /** The end of that line: who started it. Hidden behind its dot on phones. */
+    byline?: ReactNode;
+    /** Where the run has got to: sets the badge and whether Stop or Run again shows. */
+    status: Chat03Status;
+    /** How long it has taken so far, in seconds, as a clock. */
+    elapsed?: number;
+    /** Called by Stop, while it's running or waiting. */
+    onStop?(): void;
+    /** Called by Run again, once it's stopped or done. */
+    onRestart?(): void;
+    /** Its reasoning before it starts. */
+    reasoning?: Chat03Reasoning;
+    /** What it read, cited in its reasoning and summary. */
+    sources?: ChatSourceItem[];
+    /** Its steps, as they happen. */
+    steps: Chat03Step[];
+    /** What happened, under a hairline at the end: shown once it's stopped or done. */
+    summary?: ReactNode;
+    /** Words that aren't content (the badge, the buttons, names for screen readers), in English unless you pass your own. */
+    labels?: Chat03Labels;
+}

package/dist/chat/Chat03/Chat03.types.d.ts

@@ -0,0 +1,96 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ChainOfThoughtStep, ChatSourceItem, ChatToolProps } from "@openwarelabs/ui";
+/** A file a tool call changed, opening to its diff. */
+export interface Chat03File {
+    /** Its path: "src/invoices/format.ts". */
+    path: string;
+    /** Lines added. */
+    added: number;
+    /** Lines removed. */
+    removed: number;
+    /** The diff's lines, each starting with "+", "-", " " (context) or "@@" (a hunk's header). */
+    diff: string[];
+    /** Whether its diff starts open. @default false */
+    defaultOpen?: boolean;
+}
+/** A tool call the agent makes: what it's doing, the tool, its status and result, and what it changed. */
+export interface Chat03Tool extends Pick<ChatToolProps, "title" | "name" | "icon" | "status" | "summary" | "duration" | "input" | "output" | "error" | "defaultExpanded" | "approvalMessage" | "approveLabel" | "denyLabel" | "onApprove" | "onDeny"> {
+    /** The files it changed, as its output, each opening to its diff. Without a summary, the lines added and removed sum up. */
+    files?: Chat03File[];
+}
+/** One step of the run: a tool call, or the agent's own words between calls. */
+export interface Chat03Step {
+    /** Unique in the run. */
+    id: string;
+    /** The tool call. */
+    tool?: Chat03Tool;
+    /** The agent's words, level with the calls' titles, when the step isn't a call. */
+    note?: ReactNode;
+}
+/** The agent's reasoning before it starts: what it thought and the plan it made. */
+export interface Chat03Reasoning {
+    /** The reasoning itself, as text. */
+    text?: ReactNode;
+    /** The plan, in order, each with its status. */
+    steps?: ChainOfThoughtStep[];
+    /** How long it thought, in milliseconds. */
+    duration?: number;
+    /** Whether it starts open. @default true */
+    defaultExpanded?: boolean;
+}
+/** Where the run has got to: working, waiting for the person to approve a call, stopped, or finished. */
+export type Chat03Status = "running" | "waiting" | "stopped" | "done";
+export interface Chat03Labels {
+    /** The badge while it works. @default "Running" */
+    running?: string;
+    /** The badge while it waits for an approval. @default "Needs approval" */
+    waiting?: string;
+    /** @default "Stopped" */
+    stopped?: string;
+    /** @default "Done" */
+    done?: string;
+    /** @default "Stop" */
+    stop?: string;
+    /** @default "Run again" */
+    runAgain?: string;
+    /** Read out before the clock. @default "Time taken: " */
+    elapsed?: string;
+    /** Names the list of steps. @default "Steps" */
+    steps?: string;
+    /** Names a call's list of files. @default "Files changed" */
+    files?: string;
+    /** Names a file's diff. @default "Changes to src/invoices/format.ts" */
+    diff?(path: string): string;
+    /** Read out after lines added. @default "8 lines added," */
+    linesAdded?(count: number): string;
+    /** Read out after lines removed. @default "2 removed" */
+    linesRemoved?(count: number): string;
+}
+export interface Chat03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The task the agent is working on, as the section's heading. */
+    title: ReactNode;
+    /** Where it's working, first in the line under the title: the project. */
+    project?: ReactNode;
+    /** The branch it works on, in mono after the project. */
+    branch?: ReactNode;
+    /** The end of that line: who started it. Hidden behind its dot on phones. */
+    byline?: ReactNode;
+    /** Where the run has got to: sets the badge and whether Stop or Run again shows. */
+    status: Chat03Status;
+    /** How long it has taken so far, in seconds, as a clock. */
+    elapsed?: number;
+    /** Called by Stop, while it's running or waiting. */
+    onStop?(): void;
+    /** Called by Run again, once it's stopped or done. */
+    onRestart?(): void;
+    /** Its reasoning before it starts. */
+    reasoning?: Chat03Reasoning;
+    /** What it read, cited in its reasoning and summary. */
+    sources?: ChatSourceItem[];
+    /** Its steps, as they happen. */
+    steps: Chat03Step[];
+    /** What happened, under a hairline at the end: shown once it's stopped or done. */
+    summary?: ReactNode;
+    /** Words that aren't content (the badge, the buttons, names for screen readers), in English unless you pass your own. */
+    labels?: Chat03Labels;
+}

package/dist/contact/Contact01/Contact01.d.cts

@@ -0,0 +1,3 @@
+import type { Contact01Props } from "./Contact01.types.cjs";
+/** A short contact form in a card, beside the heading and a list of ways to reach you, with a thank-you in place of the form once it's sent. */
+export declare function Contact01({ eyebrow, title, description, details, topics, defaultTopic, sizes, minMessageLength, onSubmit, note, successTitle, successDescription, labels, className, ...props }: Contact01Props): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import type { Contact01Props } from "./Contact01.types.js";
+/** A short contact form in a card, beside the heading and a list of ways to reach you, with a thank-you in place of the form once it's sent. */
+export declare function Contact01({ eyebrow, title, description, details, topics, defaultTopic, sizes, minMessageLength, onSubmit, note, successTitle, successDescription, labels, className, ...props }: Contact01Props): import("react").JSX.Element;

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

@@ -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;
+}