@openwarelabs/blocks 0.9.0 → 0.10.1

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

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.cjs";
+/** One of the main places, offered as a way out. */
+export interface ErrorPage01Place {
+    /** Its name: "Projects". */
+    name: string;
+    /** A line under it, hidden on phones: "Every project and its tasks". */
+    description?: string;
+    /** A 16px icon on a tile, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** More words the search finds it by: "tasks issues repositories". */
+    keywords?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage01Labels {
+    /** What the drawn 404 is read out as. @default "Error 404" */
+    code?: string;
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme overview". */
+    home?: string;
+    /** The search field's name. @default "Search" */
+    search?: string;
+    /** @default "Search" */
+    placeholder?: string;
+    /** The places' name for screen readers. @default "Places to go" */
+    places?: string;
+    /** Shown when no place matches the search. @default (query) => `Nothing here matches “${query}”. Press Enter to search.` */
+    noMatches?(query: string): ReactNode;
+}
+export interface ErrorPage01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link at the top right, such as "Help centre". */
+    helpLink?: BlockLink;
+    /** The page's h1: "This page isn't here". */
+    title: ReactNode;
+    /** A sentence under it: why, and what to do. */
+    description?: ReactNode;
+    /** The main places, which the search narrows as you type. */
+    places: ErrorPage01Place[];
+    /** How many places show at once.
+     * @default 4 */
+    maxPlaces?: number;
+    /** Runs on Enter in the search: search the whole product. */
+    onSearch?(query: string): void;
+    labels?: ErrorPage01Labels;
+}

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

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.js";
+/** One of the main places, offered as a way out. */
+export interface ErrorPage01Place {
+    /** Its name: "Projects". */
+    name: string;
+    /** A line under it, hidden on phones: "Every project and its tasks". */
+    description?: string;
+    /** A 16px icon on a tile, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** More words the search finds it by: "tasks issues repositories". */
+    keywords?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage01Labels {
+    /** What the drawn 404 is read out as. @default "Error 404" */
+    code?: string;
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme overview". */
+    home?: string;
+    /** The search field's name. @default "Search" */
+    search?: string;
+    /** @default "Search" */
+    placeholder?: string;
+    /** The places' name for screen readers. @default "Places to go" */
+    places?: string;
+    /** Shown when no place matches the search. @default (query) => `Nothing here matches “${query}”. Press Enter to search.` */
+    noMatches?(query: string): ReactNode;
+}
+export interface ErrorPage01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link at the top right, such as "Help centre". */
+    helpLink?: BlockLink;
+    /** The page's h1: "This page isn't here". */
+    title: ReactNode;
+    /** A sentence under it: why, and what to do. */
+    description?: ReactNode;
+    /** The main places, which the search narrows as you type. */
+    places: ErrorPage01Place[];
+    /** How many places show at once.
+     * @default 4 */
+    maxPlaces?: number;
+    /** Runs on Enter in the search: search the whole product. */
+    onSearch?(query: string): void;
+    labels?: ErrorPage01Labels;
+}

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

@@ -0,0 +1,3 @@
+import type { ErrorPage02Props } from "./ErrorPage02.types.cjs";
+/** A 500: that it isn't their fault, a button to try again, and an error ID to send to support. */
+export declare function ErrorPage02({ brand, statusLink, badge, title, description, onRetry, homeAction, report, errorId, visual, labels, className, ...props }: ErrorPage02Props): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import type { ErrorPage02Props } from "./ErrorPage02.types.js";
+/** A 500: that it isn't their fault, a button to try again, and an error ID to send to support. */
+export declare function ErrorPage02({ brand, statusLink, badge, title, description, onRetry, homeAction, report, errorId, visual, labels, className, ...props }: ErrorPage02Props): import("react").JSX.Element;

package/dist/error-pages/ErrorPage02/ErrorPage02.types.d.cts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, BlockLink } from "../../shared/shared.types.cjs";
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage02Labels {
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme overview". */
+    home?: string;
+    /** @default "Try again" */
+    retry?: string;
+    /** The button while it tries. @default "Trying again…" */
+    retrying?: string;
+    /** The heading over how to report it. @default "If it keeps happening" */
+    reportTitle?: string;
+    /** @default "Error ID" */
+    errorId?: string;
+    /** The copy button's name. @default "Copy ID" */
+    copy?: string;
+    /** Added after `report` once someone has tried more than once. @default (count) => `You've tried ${count} times.` */
+    tries?(count: number): string;
+}
+export interface ErrorPage02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link to the status page at the top right, with an amber dot: "Some systems slow". */
+    statusLink?: BlockLink;
+    /** A small red badge above the title: "Error 500". */
+    badge?: ReactNode;
+    /** The page's h1: "Something went wrong on our side". */
+    title: ReactNode;
+    /** A sentence or two under it: that it isn't their fault, and that nothing is lost. */
+    description?: ReactNode;
+    /**
+     * Runs on Try again: load the page again. While its promise is pending the button shows a spinner.
+     * @default () => window.location.reload()
+     */
+    onRetry?(): void | Promise<void>;
+    /** A second button beside Try again, such as "Go to overview". */
+    homeAction?: BlockAction;
+    /** How to report it, under the buttons: "Send this error ID to support@example.com…". */
+    report?: ReactNode;
+    /** The ID to quote to support, in a field with a copy button. */
+    errorId?: string;
+    /** A drawn picture beside the words, such as the request's path to the step that failed. Hidden below 880px. */
+    visual?: ReactNode;
+    labels?: ErrorPage02Labels;
+}

package/dist/error-pages/ErrorPage02/ErrorPage02.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockBrand, BlockLink } from "../../shared/shared.types.js";
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage02Labels {
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme overview". */
+    home?: string;
+    /** @default "Try again" */
+    retry?: string;
+    /** The button while it tries. @default "Trying again…" */
+    retrying?: string;
+    /** The heading over how to report it. @default "If it keeps happening" */
+    reportTitle?: string;
+    /** @default "Error ID" */
+    errorId?: string;
+    /** The copy button's name. @default "Copy ID" */
+    copy?: string;
+    /** Added after `report` once someone has tried more than once. @default (count) => `You've tried ${count} times.` */
+    tries?(count: number): string;
+}
+export interface ErrorPage02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link to the status page at the top right, with an amber dot: "Some systems slow". */
+    statusLink?: BlockLink;
+    /** A small red badge above the title: "Error 500". */
+    badge?: ReactNode;
+    /** The page's h1: "Something went wrong on our side". */
+    title: ReactNode;
+    /** A sentence or two under it: that it isn't their fault, and that nothing is lost. */
+    description?: ReactNode;
+    /**
+     * Runs on Try again: load the page again. While its promise is pending the button shows a spinner.
+     * @default () => window.location.reload()
+     */
+    onRetry?(): void | Promise<void>;
+    /** A second button beside Try again, such as "Go to overview". */
+    homeAction?: BlockAction;
+    /** How to report it, under the buttons: "Send this error ID to support@example.com…". */
+    report?: ReactNode;
+    /** The ID to quote to support, in a field with a copy button. */
+    errorId?: string;
+    /** A drawn picture beside the words, such as the request's path to the step that failed. Hidden below 880px. */
+    visual?: ReactNode;
+    labels?: ErrorPage02Labels;
+}

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

@@ -0,0 +1,3 @@
+import type { ErrorPage03Props } from "./ErrorPage03.types.cjs";
+/** A maintenance page: when it'll be back, how the work is going, and a way to hear when it's done. */
+export declare function ErrorPage03({ brand, statusLink, badge, title, description, backTime, backDetail, onCheckAgain, onNotify, steps, currentStep, labels, className, ...props }: ErrorPage03Props): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import type { ErrorPage03Props } from "./ErrorPage03.types.js";
+/** A maintenance page: when it'll be back, how the work is going, and a way to hear when it's done. */
+export declare function ErrorPage03({ brand, statusLink, badge, title, description, backTime, backDetail, onCheckAgain, onNotify, steps, currentStep, labels, className, ...props }: ErrorPage03Props): import("react").JSX.Element;

package/dist/error-pages/ErrorPage03/ErrorPage03.types.d.cts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { StepItem } from "@openwarelabs/ui";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.cjs";
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage03Labels {
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme home". */
+    home?: string;
+    /** @default "Check again" */
+    checkAgain?: string;
+    /** The button that asks to hear when it's back. @default "Email me when it's back" */
+    notify?: string;
+    /** The same button once asked. @default "We'll email you" */
+    notified?: string;
+    /** The steps' heading. @default "Maintenance plan" */
+    steps?: string;
+}
+export interface ErrorPage03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link to the status page at the top right, with an arrow: "Status page". */
+    statusLink?: BlockLink;
+    /** A small amber badge above the title: "Planned maintenance". */
+    badge?: ReactNode;
+    /** The page's h1: "Acme is down for maintenance". */
+    title: ReactNode;
+    /** A sentence or two under it: what's happening, and that nothing is lost. */
+    description?: ReactNode;
+    /** When it'll be back, large beside a clock: "Back by 07:00 CET". */
+    backTime?: ReactNode;
+    /** A line under it: "Tuesday 14 Oct, about 40 minutes from now". */
+    backDetail?: ReactNode;
+    /**
+     * Runs on Check again: load the page again. While its promise is pending the button shows a spinner.
+     * @default () => window.location.reload()
+     */
+    onCheckAgain?(): void | Promise<void>;
+    /** Signs them up to hear when it's back. Without it there's no button for that. */
+    onNotify?(): void;
+    /** The work, in order, as a list of steps beside the words. */
+    steps?: StepItem[];
+    /** The index of the step under way; the ones before it are done.
+     * @default 0 */
+    currentStep?: number;
+    labels?: ErrorPage03Labels;
+}

package/dist/error-pages/ErrorPage03/ErrorPage03.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { StepItem } from "@openwarelabs/ui";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.js";
+/** The words that aren't content, in English unless you pass your own. */
+export interface ErrorPage03Labels {
+    /** The logo link's name, when the brand's name alone isn't clear: "Acme home". */
+    home?: string;
+    /** @default "Check again" */
+    checkAgain?: string;
+    /** The button that asks to hear when it's back. @default "Email me when it's back" */
+    notify?: string;
+    /** The same button once asked. @default "We'll email you" */
+    notified?: string;
+    /** The steps' heading. @default "Maintenance plan" */
+    steps?: string;
+}
+export interface ErrorPage03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The logo and name at the top left, linking home. */
+    brand: BlockBrand;
+    /** A link to the status page at the top right, with an arrow: "Status page". */
+    statusLink?: BlockLink;
+    /** A small amber badge above the title: "Planned maintenance". */
+    badge?: ReactNode;
+    /** The page's h1: "Acme is down for maintenance". */
+    title: ReactNode;
+    /** A sentence or two under it: what's happening, and that nothing is lost. */
+    description?: ReactNode;
+    /** When it'll be back, large beside a clock: "Back by 07:00 CET". */
+    backTime?: ReactNode;
+    /** A line under it: "Tuesday 14 Oct, about 40 minutes from now". */
+    backDetail?: ReactNode;
+    /**
+     * Runs on Check again: load the page again. While its promise is pending the button shows a spinner.
+     * @default () => window.location.reload()
+     */
+    onCheckAgain?(): void | Promise<void>;
+    /** Signs them up to hear when it's back. Without it there's no button for that. */
+    onNotify?(): void;
+    /** The work, in order, as a list of steps beside the words. */
+    steps?: StepItem[];
+    /** The index of the step under way; the ones before it are done.
+     * @default 0 */
+    currentStep?: number;
+    labels?: ErrorPage03Labels;
+}

package/dist/faq/Faq01/Faq01.d.cts

@@ -0,0 +1,3 @@
+import type { Faq01Props } from "./Faq01.types.cjs";
+/** Questions in an accordion that opens one at a time, under a centred heading. */
+export declare function Faq01({ eyebrow, title, description, questions, defaultOpen, note, className, ...props }: Faq01Props): import("react").JSX.Element;

package/dist/faq/Faq01/Faq01.d.ts

@@ -0,0 +1,3 @@
+import type { Faq01Props } from "./Faq01.types.js";
+/** Questions in an accordion that opens one at a time, under a centred heading. */
+export declare function Faq01({ eyebrow, title, description, questions, defaultOpen, note, className, ...props }: Faq01Props): import("react").JSX.Element;

package/dist/faq/Faq01/Faq01.types.d.cts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Faq01Question {
+    /** Names it for `defaultOpen`. @default its index, as a string */
+    id?: string;
+    /** The question, as the row's title. */
+    question: ReactNode;
+    /** The answer, shown when the row is open. */
+    answer: ReactNode;
+}
+export interface Faq01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading, centred. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The questions, in an accordion that opens one at a time. */
+    questions: Faq01Question[];
+    /** The question open at first, by id (or index). @default the first */
+    defaultOpen?: string[];
+    /** A line under the questions, such as where to ask one that isn't there, with links. */
+    note?: ReactNode;
+}

package/dist/faq/Faq01/Faq01.types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Faq01Question {
+    /** Names it for `defaultOpen`. @default its index, as a string */
+    id?: string;
+    /** The question, as the row's title. */
+    question: ReactNode;
+    /** The answer, shown when the row is open. */
+    answer: ReactNode;
+}
+export interface Faq01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading, centred. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The questions, in an accordion that opens one at a time. */
+    questions: Faq01Question[];
+    /** The question open at first, by id (or index). @default the first */
+    defaultOpen?: string[];
+    /** A line under the questions, such as where to ask one that isn't there, with links. */
+    note?: ReactNode;
+}

package/dist/faq/Faq02/Faq02.d.cts

@@ -0,0 +1,3 @@
+import type { Faq02Props } from "./Faq02.types.cjs";
+/** A heading on the left, the questions on the right. */
+export declare function Faq02({ eyebrow, title, description, links, questions, defaultOpen, className, ...props }: Faq02Props): import("react").JSX.Element;

package/dist/faq/Faq02/Faq02.d.ts

@@ -0,0 +1,3 @@
+import type { Faq02Props } from "./Faq02.types.js";
+/** A heading on the left, the questions on the right. */
+export declare function Faq02({ eyebrow, title, description, links, questions, defaultOpen, className, ...props }: Faq02Props): import("react").JSX.Element;

package/dist/faq/Faq02/Faq02.types.d.cts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Faq02Question {
+    /** Names it for `defaultOpen`. @default its index, as a string */
+    id?: string;
+    /** The question, as the row's title. */
+    question: ReactNode;
+    /** The answer, shown when the row is open. */
+    answer: ReactNode;
+}
+export interface Faq02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left, staying in view while the questions scroll past. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Links under the heading, each with an arrow: "Contact support", "Read the docs". */
+    links?: BlockLink[];
+    /** The questions, on the right, between hairlines; several can be open at once. */
+    questions: Faq02Question[];
+    /** The questions open at first, by id (or index). @default the first */
+    defaultOpen?: string[];
+}

package/dist/faq/Faq02/Faq02.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Faq02Question {
+    /** Names it for `defaultOpen`. @default its index, as a string */
+    id?: string;
+    /** The question, as the row's title. */
+    question: ReactNode;
+    /** The answer, shown when the row is open. */
+    answer: ReactNode;
+}
+export interface Faq02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left, staying in view while the questions scroll past. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Links under the heading, each with an arrow: "Contact support", "Read the docs". */
+    links?: BlockLink[];
+    /** The questions, on the right, between hairlines; several can be open at once. */
+    questions: Faq02Question[];
+    /** The questions open at first, by id (or index). @default the first */
+    defaultOpen?: string[];
+}

package/dist/faq/Faq03/Faq03.d.cts

@@ -0,0 +1,3 @@
+import type { Faq03Props } from "./Faq03.types.cjs";
+/** Every question answered in two columns, and a card for anything they don't cover. */
+export declare function Faq03({ eyebrow, title, description, questions, contact, className, ...props }: Faq03Props): import("react").JSX.Element;

package/dist/faq/Faq03/Faq03.d.ts

@@ -0,0 +1,3 @@
+import type { Faq03Props } from "./Faq03.types.js";
+/** Every question answered in two columns, and a card for anything they don't cover. */
+export declare function Faq03({ eyebrow, title, description, questions, contact, className, ...props }: Faq03Props): import("react").JSX.Element;

package/dist/faq/Faq03/Faq03.types.d.cts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Faq03Question {
+    /** The question, as a small title. */
+    question: ReactNode;
+    /** The answer, always on show under it. */
+    answer: ReactNode;
+}
+export interface Faq03Person {
+    /** Their name, for their avatar's initials. */
+    name: string;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+}
+export interface Faq03Contact {
+    /** The card's title: "Still have a question?". */
+    title: ReactNode;
+    /** A sentence on who answers and how. */
+    description?: ReactNode;
+    /** A small line after a green dot, such as how quickly they reply. */
+    status?: ReactNode;
+    /** The people who answer, as overlapping avatars on the left. */
+    people?: Faq03Person[];
+    /** Names the avatars for screen readers: "Lena, Omar and Aiko from support". */
+    peopleLabel?: string;
+    /** The main way to get in touch, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second way, beside it. */
+    secondaryAction?: BlockAction;
+}
+export interface Faq03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The questions, every answer on show, two to a row (one on phones). */
+    questions: Faq03Question[];
+    /** A card under the questions for anything they don't cover. */
+    contact?: Faq03Contact;
+}

package/dist/faq/Faq03/Faq03.types.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Faq03Question {
+    /** The question, as a small title. */
+    question: ReactNode;
+    /** The answer, always on show under it. */
+    answer: ReactNode;
+}
+export interface Faq03Person {
+    /** Their name, for their avatar's initials. */
+    name: string;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+}
+export interface Faq03Contact {
+    /** The card's title: "Still have a question?". */
+    title: ReactNode;
+    /** A sentence on who answers and how. */
+    description?: ReactNode;
+    /** A small line after a green dot, such as how quickly they reply. */
+    status?: ReactNode;
+    /** The people who answer, as overlapping avatars on the left. */
+    people?: Faq03Person[];
+    /** Names the avatars for screen readers: "Lena, Omar and Aiko from support". */
+    peopleLabel?: string;
+    /** The main way to get in touch, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second way, beside it. */
+    secondaryAction?: BlockAction;
+}
+export interface Faq03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The questions, every answer on show, two to a row (one on phones). */
+    questions: Faq03Question[];
+    /** A card under the questions for anything they don't cover. */
+    contact?: Faq03Contact;
+}

package/dist/forms/Form01/Form01.d.cts

@@ -0,0 +1,3 @@
+import type { Form01Props } from "./Form01.types.cjs";
+/** One column on the canvas: a back link, the page's heading, then the fields on a card with the action in its footer. */
+export declare function Form01({ title, description, backLink, children, submitLabel, onSubmit, submitting, note, className, ...props }: Form01Props): import("react").JSX.Element;

package/dist/forms/Form01/Form01.d.ts

@@ -0,0 +1,3 @@
+import type { Form01Props } from "./Form01.types.js";
+/** One column on the canvas: a back link, the page's heading, then the fields on a card with the action in its footer. */
+export declare function Form01({ title, description, backLink, children, submitLabel, onSubmit, submitting, note, className, ...props }: Form01Props): import("react").JSX.Element;

package/dist/forms/Form01/Form01.types.d.cts

@@ -0,0 +1,20 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Form01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    /** The page's heading: "New project". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A link back above the heading, with an arrow: the page this one came from. */
+    backLink?: BlockLink;
+    /** The fields, stacked on the card in order: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    children: ReactNode;
+    /** The button in the card's footer: "Create project". */
+    submitLabel: ReactNode;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Shows a spinner on the button while the form is saving. */
+    submitting?: boolean;
+    /** Small print beside the button. */
+    note?: ReactNode;
+}

package/dist/forms/Form01/Form01.types.d.ts

@@ -0,0 +1,20 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Form01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    /** The page's heading: "New project". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A link back above the heading, with an arrow: the page this one came from. */
+    backLink?: BlockLink;
+    /** The fields, stacked on the card in order: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    children: ReactNode;
+    /** The button in the card's footer: "Create project". */
+    submitLabel: ReactNode;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Shows a spinner on the button while the form is saving. */
+    submitting?: boolean;
+    /** Small print beside the button. */
+    note?: ReactNode;
+}

package/dist/forms/Form02/Form02.d.cts

@@ -0,0 +1,3 @@
+import type { Form02Props } from "./Form02.types.cjs";
+/** Sections down the page, each one's title and purpose on the left and its fields on a card on the right, with Discard and Save at the end. */
+export declare function Form02({ title, description, sections, dirty, onSubmit, onDiscard, submitting, labels, className, ...props }: Form02Props): import("react").JSX.Element;

package/dist/forms/Form02/Form02.d.ts

@@ -0,0 +1,3 @@
+import type { Form02Props } from "./Form02.types.js";
+/** Sections down the page, each one's title and purpose on the left and its fields on a card on the right, with Discard and Save at the end. */
+export declare function Form02({ title, description, sections, dirty, onSubmit, onDiscard, submitting, labels, className, ...props }: Form02Props): import("react").JSX.Element;

package/dist/forms/Form02/Form02.types.d.cts

@@ -0,0 +1,38 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+export interface Form02Labels {
+    /** Beside the buttons while there are changes. @default "You have unsaved changes." */
+    unsaved?: string;
+    /** Beside them when there aren't. @default "Everything is saved." */
+    saved?: string;
+    /** The button that puts the saved values back. @default "Discard" */
+    discard?: string;
+    /** The button that saves. @default "Save changes" */
+    save?: string;
+}
+/** One section of the form: its title and purpose on the left, its fields on a card on the right. */
+export interface Form02Section {
+    /** The section's heading. */
+    title: ReactNode;
+    /** What it's for, under the heading. */
+    description?: ReactNode;
+    /** Its fields, stacked on the card: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    content: ReactNode;
+}
+export interface Form02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onSubmit"> {
+    /** The page's heading: "Workspace". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The sections, down the page. */
+    sections: Form02Section[];
+    /** Whether the values differ from what's saved: it turns the buttons on and says so beside them. */
+    dirty: boolean;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Puts the saved values back. */
+    onDiscard?(): void;
+    /** Shows a spinner on the save button while saving. */
+    submitting?: boolean;
+    /** Words that aren't content (the buttons, the status), in English unless you pass your own. */
+    labels?: Form02Labels;
+}