@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/page-headings/PageHeading03/PageHeading03.types.d.cts

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockStatus } from "../../shared/shared.types.cjs";
+/** A filter menu: a name and the choices in it. Choices in one menu widen the list; different menus narrow it. */
+export interface PageHeading03Facet {
+    /** Unique among the menus; the key of the item's `facets` it filters on. */
+    id: string;
+    /** The menu's name, on its button and in its tags: "Status", "Project". */
+    label: string;
+    /** The choices, each a value an item's `facets[id]` can have. */
+    options: string[];
+}
+/** A filter in use: one choice in one menu. */
+export interface PageHeading03Filter {
+    /** The menu's id. */
+    facet: string;
+    /** The choice. */
+    value: string;
+}
+/** One row in the list under the heading. */
+export interface PageHeading03Item {
+    /** Unique in the list. */
+    id: string;
+    /** What it is, on the first line. */
+    title: ReactNode;
+    /** A reference in mono before the details: "#482". */
+    reference?: ReactNode;
+    /** The rest of the second line: the project, who, when. */
+    meta?: ReactNode;
+    /** The person it's from, as an avatar at the start of the row. */
+    person?: string;
+    /** A 15px icon in a round tile at the start of the row, in place of the avatar: an agent's, say. */
+    icon?: ReactNode;
+    /** Its state, as a badge. */
+    status?: BlockStatus;
+    /** How many comments it has, after the badge. None shows nothing. */
+    comments?: number;
+    /** Its value for each filter menu, by the menu's id: `{ status: "Approved", project: "docs" }`. */
+    facets: Record<string, string>;
+    /** The words a search matches. @default the title, when it's text */
+    searchText?: string[];
+}
+export interface PageHeading03Labels {
+    /** The search field's placeholder. @default "Search" */
+    searchPlaceholder?: string;
+    /** The search field's name for screen readers. @default "Search" */
+    search?: string;
+    /** Names the list for screen readers. @default "Results" */
+    list?: string;
+    /** The count beside the tags. @default "3 of 10 shown" */
+    count?(shown: number, total: number): ReactNode;
+    /** The button that takes every filter off. @default "Clear filters" */
+    clearFilters?: string;
+    /** Names a filter tag's remove button. @default "Status filter: Approved" */
+    removeFilter?(facet: string, value: string): string;
+    /** After a comment count, for screen readers. @default " comments" */
+    comments?: string;
+    /** The title when nothing matches. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it. @default "Try a different search, or take a filter off to see more." */
+    emptyDescription?: string;
+    /** The button that clears the search and the filters. @default "Clear search and filters" */
+    clearAll?: string;
+}
+export interface PageHeading03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** The one primary action, on the right: "Request review". */
+    primaryAction?: BlockButton;
+    /** The filter menus, after the search field. */
+    facets: PageHeading03Facet[];
+    /** The list the search and the filters narrow. */
+    items: PageHeading03Item[];
+    /** The filters in use to start with. */
+    defaultFilters?: PageHeading03Filter[];
+    /** Called with the filters in use whenever they change. */
+    onFiltersChange?(filters: PageHeading03Filter[]): void;
+    /** A 20px icon for the empty state, usually from lucide-react. @default a search glass with a cross */
+    emptyIcon?: ReactNode;
+    /** Words that aren't content (names for screen readers, button labels, the empty state), in English unless you pass your own. */
+    labels?: PageHeading03Labels;
+}

package/dist/page-headings/PageHeading03/PageHeading03.types.d.ts

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockStatus } from "../../shared/shared.types.js";
+/** A filter menu: a name and the choices in it. Choices in one menu widen the list; different menus narrow it. */
+export interface PageHeading03Facet {
+    /** Unique among the menus; the key of the item's `facets` it filters on. */
+    id: string;
+    /** The menu's name, on its button and in its tags: "Status", "Project". */
+    label: string;
+    /** The choices, each a value an item's `facets[id]` can have. */
+    options: string[];
+}
+/** A filter in use: one choice in one menu. */
+export interface PageHeading03Filter {
+    /** The menu's id. */
+    facet: string;
+    /** The choice. */
+    value: string;
+}
+/** One row in the list under the heading. */
+export interface PageHeading03Item {
+    /** Unique in the list. */
+    id: string;
+    /** What it is, on the first line. */
+    title: ReactNode;
+    /** A reference in mono before the details: "#482". */
+    reference?: ReactNode;
+    /** The rest of the second line: the project, who, when. */
+    meta?: ReactNode;
+    /** The person it's from, as an avatar at the start of the row. */
+    person?: string;
+    /** A 15px icon in a round tile at the start of the row, in place of the avatar: an agent's, say. */
+    icon?: ReactNode;
+    /** Its state, as a badge. */
+    status?: BlockStatus;
+    /** How many comments it has, after the badge. None shows nothing. */
+    comments?: number;
+    /** Its value for each filter menu, by the menu's id: `{ status: "Approved", project: "docs" }`. */
+    facets: Record<string, string>;
+    /** The words a search matches. @default the title, when it's text */
+    searchText?: string[];
+}
+export interface PageHeading03Labels {
+    /** The search field's placeholder. @default "Search" */
+    searchPlaceholder?: string;
+    /** The search field's name for screen readers. @default "Search" */
+    search?: string;
+    /** Names the list for screen readers. @default "Results" */
+    list?: string;
+    /** The count beside the tags. @default "3 of 10 shown" */
+    count?(shown: number, total: number): ReactNode;
+    /** The button that takes every filter off. @default "Clear filters" */
+    clearFilters?: string;
+    /** Names a filter tag's remove button. @default "Status filter: Approved" */
+    removeFilter?(facet: string, value: string): string;
+    /** After a comment count, for screen readers. @default " comments" */
+    comments?: string;
+    /** The title when nothing matches. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it. @default "Try a different search, or take a filter off to see more." */
+    emptyDescription?: string;
+    /** The button that clears the search and the filters. @default "Clear search and filters" */
+    clearAll?: string;
+}
+export interface PageHeading03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** The one primary action, on the right: "Request review". */
+    primaryAction?: BlockButton;
+    /** The filter menus, after the search field. */
+    facets: PageHeading03Facet[];
+    /** The list the search and the filters narrow. */
+    items: PageHeading03Item[];
+    /** The filters in use to start with. */
+    defaultFilters?: PageHeading03Filter[];
+    /** Called with the filters in use whenever they change. */
+    onFiltersChange?(filters: PageHeading03Filter[]): void;
+    /** A 20px icon for the empty state, usually from lucide-react. @default a search glass with a cross */
+    emptyIcon?: ReactNode;
+    /** Words that aren't content (names for screen readers, button labels, the empty state), in English unless you pass your own. */
+    labels?: PageHeading03Labels;
+}

package/dist/section-headings/SectionHeading01/SectionHeading01.d.cts

@@ -0,0 +1,3 @@
+import type { SectionHeading01Props } from "./SectionHeading01.types.cjs";
+/** The label, the title and the intro centred over the section. */
+export declare function SectionHeading01({ eyebrow, title, description, className, ...props }: SectionHeading01Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading01/SectionHeading01.d.ts

@@ -0,0 +1,3 @@
+import type { SectionHeading01Props } from "./SectionHeading01.types.js";
+/** The label, the title and the intro centred over the section. */
+export declare function SectionHeading01({ eyebrow, title, description, className, ...props }: SectionHeading01Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading01/SectionHeading01.types.d.cts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SectionHeading01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title, centred at a readable width. */
+    description?: ReactNode;
+}

package/dist/section-headings/SectionHeading01/SectionHeading01.types.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SectionHeading01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title, centred at a readable width. */
+    description?: ReactNode;
+}

package/dist/section-headings/SectionHeading02/SectionHeading02.d.cts

@@ -0,0 +1,3 @@
+import type { SectionHeading02Props } from "./SectionHeading02.types.cjs";
+/** The heading on the left and a link to the rest on the right. */
+export declare function SectionHeading02({ eyebrow, title, description, link, className, ...props }: SectionHeading02Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading02/SectionHeading02.d.ts

@@ -0,0 +1,3 @@
+import type { SectionHeading02Props } from "./SectionHeading02.types.js";
+/** The heading on the left and a link to the rest on the right. */
+export declare function SectionHeading02({ eyebrow, title, description, link, className, ...props }: SectionHeading02Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading02/SectionHeading02.types.d.cts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface SectionHeading02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A link to the rest, on the right with an arrow (under the heading on phones): "All releases". */
+    link: BlockLink;
+}

package/dist/section-headings/SectionHeading02/SectionHeading02.types.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface SectionHeading02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A link to the rest, on the right with an arrow (under the heading on phones): "All releases". */
+    link: BlockLink;
+}

package/dist/section-headings/SectionHeading03/SectionHeading03.d.cts

@@ -0,0 +1,3 @@
+import type { SectionHeading03Props } from "./SectionHeading03.types.cjs";
+/** The title on the left; the intro and a button on the right. */
+export declare function SectionHeading03({ eyebrow, title, description, action, className, ...props }: SectionHeading03Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading03/SectionHeading03.d.ts

@@ -0,0 +1,3 @@
+import type { SectionHeading03Props } from "./SectionHeading03.types.js";
+/** The title on the left; the intro and a button on the right. */
+export declare function SectionHeading03({ eyebrow, title, description, action, className, ...props }: SectionHeading03Props): import("react").JSX.Element;

package/dist/section-headings/SectionHeading03/SectionHeading03.types.d.cts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface SectionHeading03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left. */
+    title: ReactNode;
+    /** A sentence or two, on the right beside the title (under it on smaller screens). */
+    description?: ReactNode;
+    /** A button under the description, as a secondary pill: "How agents work". */
+    action?: BlockAction;
+}

package/dist/section-headings/SectionHeading03/SectionHeading03.types.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface SectionHeading03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, on the left. */
+    title: ReactNode;
+    /** A sentence or two, on the right beside the title (under it on smaller screens). */
+    description?: ReactNode;
+    /** A button under the description, as a secondary pill: "How agents work". */
+    action?: BlockAction;
+}

package/dist/settings/Settings01/Settings01.d.cts

@@ -0,0 +1,3 @@
+import type { Settings01Props } from "./Settings01.types.cjs";
+/** Commandr's settings dialog: the sections down the left on the canvas, the chosen one's rows on an inset panel. */
+export declare function Settings01({ sections, open: openProp, defaultOpen, onOpenChange, shortcut, section: sectionProp, defaultSection, onSectionChange, labels, className, ...props }: Settings01Props): import("react").JSX.Element;

package/dist/settings/Settings01/Settings01.d.ts

@@ -0,0 +1,3 @@
+import type { Settings01Props } from "./Settings01.types.js";
+/** Commandr's settings dialog: the sections down the left on the canvas, the chosen one's rows on an inset panel. */
+export declare function Settings01({ sections, open: openProp, defaultOpen, onOpenChange, shortcut, section: sectionProp, defaultSection, onSectionChange, labels, className, ...props }: Settings01Props): import("react").JSX.Element;

package/dist/settings/Settings01/Settings01.types.d.cts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Settings01Labels {
+    /** The dialog's title. @default "Settings" */
+    title?: string;
+    /** The close button's name. @default "Close settings" */
+    close?: string;
+    /** The list of sections' name for screen readers. @default "Settings sections" */
+    sections?: string;
+    /** The line under the sections. @default "Changes save as you go." */
+    saved?: string;
+}
+/** One section of settings, with its place in the list down the left. */
+export interface Settings01Section {
+    /** Names the section for `section` and `onSectionChange`. */
+    id: string;
+    /** Its name, in the list and as its heading. */
+    label: string;
+    /** A 15px icon before the name in the list. */
+    icon?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+    /** Its rows: SettingsRow components with the controls in them. Save each change as it happens. */
+    content: ReactNode;
+}
+export interface Settings01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The sections, in the order they're listed. */
+    sections: Settings01Section[];
+    /** Whether the dialog is open, to control it from outside (from a Settings button, say). */
+    open?: boolean;
+    /** Whether it starts open, when `open` isn't given.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens (with ⌘, or Ctrl+,) or closes (with Escape, the backdrop or the close button). */
+    onOpenChange?(open: boolean): void;
+    /** ⌘, on a Mac and Ctrl+, elsewhere open it, as in most desktop apps.
+     * @default true */
+    shortcut?: boolean;
+    /** The id of the section that's showing, to control it from outside. */
+    section?: string;
+    /** The section it starts on, when `section` isn't given. @default the first */
+    defaultSection?: string;
+    /** Called when someone picks another section. */
+    onSectionChange?(id: string): void;
+    /** Words that aren't content (the title, names for screen readers), in English unless you pass your own. */
+    labels?: Settings01Labels;
+}

package/dist/settings/Settings01/Settings01.types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Settings01Labels {
+    /** The dialog's title. @default "Settings" */
+    title?: string;
+    /** The close button's name. @default "Close settings" */
+    close?: string;
+    /** The list of sections' name for screen readers. @default "Settings sections" */
+    sections?: string;
+    /** The line under the sections. @default "Changes save as you go." */
+    saved?: string;
+}
+/** One section of settings, with its place in the list down the left. */
+export interface Settings01Section {
+    /** Names the section for `section` and `onSectionChange`. */
+    id: string;
+    /** Its name, in the list and as its heading. */
+    label: string;
+    /** A 15px icon before the name in the list. */
+    icon?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+    /** Its rows: SettingsRow components with the controls in them. Save each change as it happens. */
+    content: ReactNode;
+}
+export interface Settings01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The sections, in the order they're listed. */
+    sections: Settings01Section[];
+    /** Whether the dialog is open, to control it from outside (from a Settings button, say). */
+    open?: boolean;
+    /** Whether it starts open, when `open` isn't given.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens (with ⌘, or Ctrl+,) or closes (with Escape, the backdrop or the close button). */
+    onOpenChange?(open: boolean): void;
+    /** ⌘, on a Mac and Ctrl+, elsewhere open it, as in most desktop apps.
+     * @default true */
+    shortcut?: boolean;
+    /** The id of the section that's showing, to control it from outside. */
+    section?: string;
+    /** The section it starts on, when `section` isn't given. @default the first */
+    defaultSection?: string;
+    /** Called when someone picks another section. */
+    onSectionChange?(id: string): void;
+    /** Words that aren't content (the title, names for screen readers), in English unless you pass your own. */
+    labels?: Settings01Labels;
+}

package/dist/settings/Settings02/Settings02.d.cts

@@ -0,0 +1,3 @@
+import type { Settings02Props } from "./Settings02.types.cjs";
+/** The settings dialog's sections as a page: the list of sections on the left, the chosen one's cards of rows beside it. */
+export declare function Settings02({ title, description, sections, section: sectionProp, defaultSection, onSectionChange, savedAt, labels, className, ...props }: Settings02Props): import("react").JSX.Element;

package/dist/settings/Settings02/Settings02.d.ts

@@ -0,0 +1,3 @@
+import type { Settings02Props } from "./Settings02.types.js";
+/** The settings dialog's sections as a page: the list of sections on the left, the chosen one's cards of rows beside it. */
+export declare function Settings02({ title, description, sections, section: sectionProp, defaultSection, onSectionChange, savedAt, labels, className, ...props }: Settings02Props): import("react").JSX.Element;

package/dist/settings/Settings02/Settings02.types.d.cts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Settings02Labels {
+    /** The list of sections' name for screen readers. @default "Settings sections" */
+    sections?: string;
+    /** Beside the section's heading for a moment after `savedAt` changes. @default "Saved" */
+    saved?: string;
+}
+/** A card of rows within a section, under an optional heading. */
+export interface Settings02Group {
+    /** A small heading over the card: "Starting up". */
+    title?: ReactNode;
+    /** Its rows: SettingsRow components with the controls in them. */
+    content: ReactNode;
+}
+/** One section of settings, with its place in the list down the left. */
+export interface Settings02Section {
+    /** Names the section for `section` and `onSectionChange`. */
+    id: string;
+    /** Its name, in the list and as its heading. */
+    label: string;
+    /** A 15px icon before the name in the list. */
+    icon?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+    /** Its cards of rows. */
+    groups: Settings02Group[];
+}
+export interface Settings02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Settings". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The sections, in the order they're listed. */
+    sections: Settings02Section[];
+    /** The id of the section that's showing, to control it from outside. */
+    section?: string;
+    /** The section it starts on, when `section` isn't given. @default the first */
+    defaultSection?: string;
+    /** Called when someone picks another section. */
+    onSectionChange?(id: string): void;
+    /** When a change was last saved, such as Date.now(). Each new value shows "Saved" beside the heading for two seconds. */
+    savedAt?: number;
+    /** Words that aren't content (names for screen readers, "Saved"), in English unless you pass your own. */
+    labels?: Settings02Labels;
+}

package/dist/settings/Settings02/Settings02.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Settings02Labels {
+    /** The list of sections' name for screen readers. @default "Settings sections" */
+    sections?: string;
+    /** Beside the section's heading for a moment after `savedAt` changes. @default "Saved" */
+    saved?: string;
+}
+/** A card of rows within a section, under an optional heading. */
+export interface Settings02Group {
+    /** A small heading over the card: "Starting up". */
+    title?: ReactNode;
+    /** Its rows: SettingsRow components with the controls in them. */
+    content: ReactNode;
+}
+/** One section of settings, with its place in the list down the left. */
+export interface Settings02Section {
+    /** Names the section for `section` and `onSectionChange`. */
+    id: string;
+    /** Its name, in the list and as its heading. */
+    label: string;
+    /** A 15px icon before the name in the list. */
+    icon?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+    /** Its cards of rows. */
+    groups: Settings02Group[];
+}
+export interface Settings02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's heading: "Settings". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The sections, in the order they're listed. */
+    sections: Settings02Section[];
+    /** The id of the section that's showing, to control it from outside. */
+    section?: string;
+    /** The section it starts on, when `section` isn't given. @default the first */
+    defaultSection?: string;
+    /** Called when someone picks another section. */
+    onSectionChange?(id: string): void;
+    /** When a change was last saved, such as Date.now(). Each new value shows "Saved" beside the heading for two seconds. */
+    savedAt?: number;
+    /** Words that aren't content (names for screen readers, "Saved"), in English unless you pass your own. */
+    labels?: Settings02Labels;
+}

package/dist/settings/Settings03/Settings03.d.cts

@@ -0,0 +1,3 @@
+import type { Settings03Props } from "./Settings03.types.cjs";
+/** API keys in a table, each with its public part to copy, when it was last used and a way to revoke it; and a dialog that makes one and shows it once. */
+export declare function Settings03({ title, description, keys: initialKeys, accessOptions, defaultAccess, expiryOptions, defaultExpiry, onCreateKey, onRevokeKey, note, labels, className, ...props }: Settings03Props): import("react").JSX.Element;

package/dist/settings/Settings03/Settings03.d.ts

@@ -0,0 +1,3 @@
+import type { Settings03Props } from "./Settings03.types.js";
+/** API keys in a table, each with its public part to copy, when it was last used and a way to revoke it; and a dialog that makes one and shows it once. */
+export declare function Settings03({ title, description, keys: initialKeys, accessOptions, defaultAccess, expiryOptions, defaultExpiry, onCreateKey, onRevokeKey, note, labels, className, ...props }: Settings03Props): import("react").JSX.Element;

package/dist/settings/Settings03/Settings03.types.d.cts

@@ -0,0 +1,132 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** An API key, as the table lists it. The secret itself is never kept: only the public part that identifies it. */
+export interface Settings03Key {
+    /** Names it for `onRevokeKey`. */
+    id: string;
+    /** Where it's used: "CI deploys". */
+    name: string;
+    /** The public part at the front of the key, shown with the secret masked after it, and copied by its button. */
+    prefix: string;
+    /** What it can do: "Read only". */
+    access?: string;
+    /** Who made it. */
+    createdBy?: string;
+    /** When it was made: "12 Mar 2026". */
+    created: string;
+    /** When it was last used: "2 hours ago". Leave it out for a key that's never been used. */
+    lastUsed?: string;
+}
+/** A choice in the create dialog's menus. */
+export interface Settings03Option {
+    value: string;
+    label: string;
+    /** Under the menu while it's chosen. */
+    description?: string;
+}
+/** What the create dialog asks for. */
+export interface Settings03NewKey {
+    /** The name, trimmed. */
+    name: string;
+    /** The chosen access option's value. */
+    access?: string;
+    /** The chosen expiry option's value. */
+    expiry?: string;
+}
+/** A key just made: its row, and the whole key to show once. */
+export interface Settings03CreatedKey {
+    key: Settings03Key;
+    /** The full key, secret and all. It's shown in the dialog to copy, then never again. */
+    secret: string;
+}
+export interface Settings03Labels {
+    /** The button in the header and the create dialog's. @default "Create key" */
+    create?: string;
+    /** The create dialog's title. @default "Create an API key" */
+    createTitle?: string;
+    /** The line under it. @default "You'll see the key once, straight after you create it." */
+    createDescription?: string;
+    /** @default "Name" */
+    name?: string;
+    /** @default "Where it's used, so you know which one to revoke." */
+    nameHint?: string;
+    /** @default "Nightly backups" */
+    namePlaceholder?: string;
+    /** @default "Name the key after where it's used, like the service or script." */
+    nameEmpty?: string;
+    /** When another key has the name. @default `There's already a key called ${name}.` */
+    nameTaken?(name: string): string;
+    /** Shown when `onCreateKey` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+    /** @default "Access" */
+    access?: string;
+    /** @default "Expires" */
+    expiry?: string;
+    /** @default "Cancel" */
+    cancel?: string;
+    /** The dialog's title once the key is made. @default "Copy your new key" */
+    createdTitle?: string;
+    /** The line under it. @default "This is the only time you'll see it. Put it somewhere safe, like your CI's secrets, before you close this." */
+    createdDescription?: string;
+    /** @default "Done" */
+    done?: string;
+    /** The table's caption, for screen readers. @default "API keys" */
+    table?: string;
+    /** Column headings. @default "Name", "Key", "Created", "Last used", "Actions" */
+    columns?: {
+        name?: string;
+        key?: string;
+        created?: string;
+        lastUsed?: string;
+        actions?: string;
+    };
+    /** Read out after the key's public part. @default ", then the secret, hidden" */
+    secretHidden?: string;
+    /** The copy button's name. @default `Copy the ID of ${name}` */
+    copy?(name: string): string;
+    /** For a key that's never been used. @default "Never" */
+    never?: string;
+    /** Under the name on phones. @default `used ${lastUsed.toLowerCase()}`, or "never used" */
+    used?(lastUsed: string | undefined): string;
+    /** @default "Revoke" */
+    revoke?: string;
+    /** The revoke button's name. @default `Revoke ${name}` */
+    revokeKey?(name: string): string;
+    /** The confirmation's title. @default `Revoke ${name}?` */
+    revokeTitle?(name: string): string;
+    /** The confirmation's line, given the key's public part in code. @default (prefix) => <>Anything still using {prefix} stops working straight away. You can't undo this.</> */
+    revokeDescription?(prefix: ReactNode): ReactNode;
+    /** The confirmation's button. @default "Revoke key" */
+    revokeConfirm?: string;
+    /** With no keys. @default "No API keys" */
+    emptyTitle?: string;
+    /** @default "Create one to use the API from a script or your CI." */
+    emptyDescription?: string;
+    /** Who made a key made here, when `onCreateKey` doesn't say. @default "You" */
+    you?: string;
+    /** When a key made here was made, when `onCreateKey` doesn't say. @default "Today" */
+    today?: string;
+}
+export interface Settings03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading: "API keys". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The keys there are, newest first. The block keeps its own list from here, adding and removing keys as people do. */
+    keys: Settings03Key[];
+    /** The create dialog's access menu. Leave it out to not ask. */
+    accessOptions?: Settings03Option[];
+    /** The access chosen to start with. @default the first option */
+    defaultAccess?: string;
+    /** The create dialog's expiry menu. Leave it out to not ask. */
+    expiryOptions?: Settings03Option[];
+    /** The expiry chosen to start with. @default the first option */
+    defaultExpiry?: string;
+    /** Makes the key on your server and returns it, with the full secret to show once. If it throws, its message shows under the name. Without it a sample key is made here. */
+    onCreateKey?(values: Settings03NewKey): Settings03CreatedKey | Promise<Settings03CreatedKey>;
+    /** Revokes the key on your server, once it's confirmed. The confirmation waits for its promise and shows its error if it throws. */
+    onRevokeKey?(key: Settings03Key): void | Promise<void>;
+    /** Small print under the table, such as a link to the API guide. */
+    note?: ReactNode;
+    /** Words that aren't content (buttons, headings, messages), in English unless you pass your own. */
+    labels?: Settings03Labels;
+}