@openwarelabs/blocks 0.8.0 → 0.10.0

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;

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