@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/lists-and-tables/List01/List01.d.cts

@@ -0,0 +1,6 @@
+import type { List01Props } from "./List01.types.cjs";
+/**
+ * A section title with its primary action, then one card: a search field and filters, a sortable table, and the
+ * pages. Any change to what's shown starts again from the first page.
+ */
+export declare function List01<Row extends object>({ title, description, primaryAction, columns, rows, rowKey, searchText, filters, defaultSort, pageSize, emptyIcon, labels, className, ...props }: List01Props<Row>): import("react").JSX.Element;

package/dist/lists-and-tables/List01/List01.d.ts

@@ -0,0 +1,6 @@
+import type { List01Props } from "./List01.types.js";
+/**
+ * A section title with its primary action, then one card: a search field and filters, a sortable table, and the
+ * pages. Any change to what's shown starts again from the first page.
+ */
+export declare function List01<Row extends object>({ title, description, primaryAction, columns, rows, rowKey, searchText, filters, defaultSort, pageSize, emptyIcon, labels, className, ...props }: List01Props<Row>): import("react").JSX.Element;

package/dist/lists-and-tables/List01/List01.types.d.cts

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SelectOption, TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockTableColumn } from "../../shared/shared.types.cjs";
+/** A filter over the table: a select of choices, each matching the rows whose value is that choice. */
+export interface List01Filter<Row> {
+    /** Unique among the filters. */
+    id: string;
+    /** The select's name for screen readers: "Status". */
+    label: string;
+    /** The first choice, which shows every row: "Any status". */
+    allLabel: string;
+    /** The other choices. A row matches one when `value(row)` is its value. */
+    options: SelectOption[];
+    /** The row's value for this filter. */
+    value(row: Row): string;
+}
+export interface List01Labels {
+    /** The search field's placeholder. @default "Search" */
+    searchPlaceholder?: string;
+    /** The search field's name for screen readers. @default "Search" */
+    search?: string;
+    /** Describes the table for screen readers. @default the title, when it's text */
+    caption?: string;
+    /** The count at the end of the toolbar. @default "24 rows", or "3 of 24 rows" while searching or filtering */
+    count?(shown: number, total: number): ReactNode;
+    /** Names the page buttons for screen readers. @default "Pages" */
+    pages?: string;
+    /** The empty state's title when nothing matches. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it, given what was searched for (empty when only filters are on). @default "Nothing matches “…” with these filters." */
+    emptyDescription?(query: string): ReactNode;
+    /** The button that clears the search and the filters. @default "Clear search and filters" */
+    clearAll?: string;
+}
+export interface List01Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Deploy a branch". */
+    primaryAction?: BlockButton;
+    /** The table's columns. Sortable ones sort the whole list, before it's split into pages. */
+    columns: Array<BlockTableColumn<Row>>;
+    /** Every row; the component searches, filters, sorts and pages them. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key. @default "id" */
+    rowKey?: keyof Row | ((row: Row) => string | number);
+    /** The words in a row that the search matches. Without it there's no search field. */
+    searchText?(row: Row): string[];
+    /** Selects after the search field, each narrowing the rows. */
+    filters?: Array<List01Filter<Row>>;
+    /** The order to start with. */
+    defaultSort?: TableSort;
+    /** Rows on a page. @default 8 */
+    pageSize?: number;
+    /** 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, the count, the empty state), in English unless you pass your own. */
+    labels?: List01Labels;
+}

package/dist/lists-and-tables/List01/List01.types.d.ts

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SelectOption, TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockTableColumn } from "../../shared/shared.types.js";
+/** A filter over the table: a select of choices, each matching the rows whose value is that choice. */
+export interface List01Filter<Row> {
+    /** Unique among the filters. */
+    id: string;
+    /** The select's name for screen readers: "Status". */
+    label: string;
+    /** The first choice, which shows every row: "Any status". */
+    allLabel: string;
+    /** The other choices. A row matches one when `value(row)` is its value. */
+    options: SelectOption[];
+    /** The row's value for this filter. */
+    value(row: Row): string;
+}
+export interface List01Labels {
+    /** The search field's placeholder. @default "Search" */
+    searchPlaceholder?: string;
+    /** The search field's name for screen readers. @default "Search" */
+    search?: string;
+    /** Describes the table for screen readers. @default the title, when it's text */
+    caption?: string;
+    /** The count at the end of the toolbar. @default "24 rows", or "3 of 24 rows" while searching or filtering */
+    count?(shown: number, total: number): ReactNode;
+    /** Names the page buttons for screen readers. @default "Pages" */
+    pages?: string;
+    /** The empty state's title when nothing matches. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it, given what was searched for (empty when only filters are on). @default "Nothing matches “…” with these filters." */
+    emptyDescription?(query: string): ReactNode;
+    /** The button that clears the search and the filters. @default "Clear search and filters" */
+    clearAll?: string;
+}
+export interface List01Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Deploy a branch". */
+    primaryAction?: BlockButton;
+    /** The table's columns. Sortable ones sort the whole list, before it's split into pages. */
+    columns: Array<BlockTableColumn<Row>>;
+    /** Every row; the component searches, filters, sorts and pages them. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key. @default "id" */
+    rowKey?: keyof Row | ((row: Row) => string | number);
+    /** The words in a row that the search matches. Without it there's no search field. */
+    searchText?(row: Row): string[];
+    /** Selects after the search field, each narrowing the rows. */
+    filters?: Array<List01Filter<Row>>;
+    /** The order to start with. */
+    defaultSort?: TableSort;
+    /** Rows on a page. @default 8 */
+    pageSize?: number;
+    /** 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, the count, the empty state), in English unless you pass your own. */
+    labels?: List01Labels;
+}

package/dist/lists-and-tables/List02/List02.d.cts

@@ -0,0 +1,3 @@
+import type { List02Props } from "./List02.types.cjs";
+/** A table with checkboxes. Once rows are selected, a bar takes over the card's header with what can be done to all of them. */
+export declare function List02<Row extends object>({ title, description, primaryAction, columns, rows, rowKey, rowLabel, defaultSort, selectedKeys, defaultSelectedKeys, onSelectionChange, bulkActions, summary, hint, labels, className, ...props }: List02Props<Row>): import("react").JSX.Element;

package/dist/lists-and-tables/List02/List02.d.ts

@@ -0,0 +1,3 @@
+import type { List02Props } from "./List02.types.js";
+/** A table with checkboxes. Once rows are selected, a bar takes over the card's header with what can be done to all of them. */
+export declare function List02<Row extends object>({ title, description, primaryAction, columns, rows, rowKey, rowLabel, defaultSort, selectedKeys, defaultSelectedKeys, onSelectionChange, bulkActions, summary, hint, labels, className, ...props }: List02Props<Row>): import("react").JSX.Element;

package/dist/lists-and-tables/List02/List02.types.d.cts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+import type { TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockMenuItem, BlockTableColumn } from "../../shared/shared.types.cjs";
+/** Something the bar can do to every selected row: a button, or a button that opens a menu of choices. */
+export interface List02BulkAction extends BlockButton {
+    /** `danger` for actions that remove or can't be undone. @default "secondary" */
+    variant?: "secondary" | "danger";
+    /** Makes it a button that opens a menu of these choices, with a chevron after its label. */
+    menu?: BlockMenuItem[];
+    /** A small heading at the top of the menu: "Make them all". */
+    menuHeading?: ReactNode;
+}
+export interface List02Labels {
+    /** Describes the table for screen readers. @default the title, when it's text */
+    caption?: string;
+    /** Names the bar for screen readers. @default "Selected rows" */
+    bar?: string;
+    /** The count at the start of the bar. @default "2 selected" */
+    selected?(count: number): ReactNode;
+    /** The button that clears the selection, and its tooltip. @default "Clear selection" */
+    clearSelection?: string;
+}
+export interface List02Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Invite people". */
+    primaryAction?: BlockButton;
+    /** The table's columns, after the checkboxes. */
+    columns: Array<BlockTableColumn<Row>>;
+    /** The rows. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key: what the selection holds. @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Names a row for its checkbox, read out as "Select …". */
+    rowLabel?(row: Row): string;
+    /** The order to start with. */
+    defaultSort?: TableSort;
+    /** The selected rows' keys, when you keep them yourself. */
+    selectedKeys?: Key[];
+    /** The rows selected to start with. */
+    defaultSelectedKeys?: Key[];
+    /** Called with the selected rows' keys when the selection changes. */
+    onSelectionChange?(keys: Key[]): void;
+    /** What can be done to the selected rows, given them: the buttons in the bar that takes over the card's header. */
+    bulkActions?(selected: Row[]): List02BulkAction[];
+    /** The card's header while nothing is selected, on the left: how many rows there are. */
+    summary?: ReactNode;
+    /** A caption on the right of it, such as how selecting works. Hidden on phones. */
+    hint?: ReactNode;
+    /** Words that aren't content (names for screen readers, the count), in English unless you pass your own. */
+    labels?: List02Labels;
+}

package/dist/lists-and-tables/List02/List02.types.d.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+import type { TableSort } from "@openwarelabs/ui";
+import type { BlockButton, BlockMenuItem, BlockTableColumn } from "../../shared/shared.types.js";
+/** Something the bar can do to every selected row: a button, or a button that opens a menu of choices. */
+export interface List02BulkAction extends BlockButton {
+    /** `danger` for actions that remove or can't be undone. @default "secondary" */
+    variant?: "secondary" | "danger";
+    /** Makes it a button that opens a menu of these choices, with a chevron after its label. */
+    menu?: BlockMenuItem[];
+    /** A small heading at the top of the menu: "Make them all". */
+    menuHeading?: ReactNode;
+}
+export interface List02Labels {
+    /** Describes the table for screen readers. @default the title, when it's text */
+    caption?: string;
+    /** Names the bar for screen readers. @default "Selected rows" */
+    bar?: string;
+    /** The count at the start of the bar. @default "2 selected" */
+    selected?(count: number): ReactNode;
+    /** The button that clears the selection, and its tooltip. @default "Clear selection" */
+    clearSelection?: string;
+}
+export interface List02Props<Row extends object> extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Invite people". */
+    primaryAction?: BlockButton;
+    /** The table's columns, after the checkboxes. */
+    columns: Array<BlockTableColumn<Row>>;
+    /** The rows. */
+    rows: Row[];
+    /** A field name or function giving each row a unique key: what the selection holds. @default "id" */
+    rowKey?: keyof Row | ((row: Row) => Key);
+    /** Names a row for its checkbox, read out as "Select …". */
+    rowLabel?(row: Row): string;
+    /** The order to start with. */
+    defaultSort?: TableSort;
+    /** The selected rows' keys, when you keep them yourself. */
+    selectedKeys?: Key[];
+    /** The rows selected to start with. */
+    defaultSelectedKeys?: Key[];
+    /** Called with the selected rows' keys when the selection changes. */
+    onSelectionChange?(keys: Key[]): void;
+    /** What can be done to the selected rows, given them: the buttons in the bar that takes over the card's header. */
+    bulkActions?(selected: Row[]): List02BulkAction[];
+    /** The card's header while nothing is selected, on the left: how many rows there are. */
+    summary?: ReactNode;
+    /** A caption on the right of it, such as how selecting works. Hidden on phones. */
+    hint?: ReactNode;
+    /** Words that aren't content (names for screen readers, the count), in English unless you pass your own. */
+    labels?: List02Labels;
+}

package/dist/lists-and-tables/List03/List03.d.cts

@@ -0,0 +1,3 @@
+import type { List03Props } from "./List03.types.cjs";
+/** Rows of a title, one line of detail and a status, each with its actions in a menu at its end. On phones the status moves under the detail. */
+export declare function List03({ title, description, primaryAction, items, footnote, labels, className, ...props }: List03Props): import("react").JSX.Element;

package/dist/lists-and-tables/List03/List03.d.ts

@@ -0,0 +1,3 @@
+import type { List03Props } from "./List03.types.js";
+/** Rows of a title, one line of detail and a status, each with its actions in a menu at its end. On phones the status moves under the detail. */
+export declare function List03({ title, description, primaryAction, items, footnote, labels, className, ...props }: List03Props): import("react").JSX.Element;

package/dist/lists-and-tables/List03/List03.types.d.cts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.cjs";
+/** One row: a title, one line of detail and a status, with its actions in a menu at its end. */
+export interface List03Item {
+    /** Unique in the list. */
+    id: string;
+    /** Its name, on the first line. */
+    title: string;
+    /** A short code in mono after the name: a key's last characters, a version. */
+    code?: ReactNode;
+    /** One line of detail under it: who made it, when it was last used. On phones it may wrap. */
+    detail?: ReactNode;
+    /** Its state, as a badge. */
+    status?: BlockStatus;
+    /** Mutes the name and the icon, for something expired, revoked or archived. */
+    inactive?: boolean;
+    /** A 16px icon on a tile at the start of the row, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What can be done to it, in a menu behind a button at the row's end. */
+    menu?: BlockMenuItem[];
+}
+export interface List03Labels {
+    /** Names a row's menu button. @default "Actions for Production deploys" */
+    actions?(title: string): string;
+    /** Names a row's menu. @default "Production deploys actions" */
+    menu?(title: string): string;
+}
+export interface List03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line or two under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Create key". */
+    primaryAction?: BlockButton;
+    /** The rows, in order. */
+    items: List03Item[];
+    /** A caption under the list: how things expire, where to find more. */
+    footnote?: ReactNode;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: List03Labels;
+}

package/dist/lists-and-tables/List03/List03.types.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.js";
+/** One row: a title, one line of detail and a status, with its actions in a menu at its end. */
+export interface List03Item {
+    /** Unique in the list. */
+    id: string;
+    /** Its name, on the first line. */
+    title: string;
+    /** A short code in mono after the name: a key's last characters, a version. */
+    code?: ReactNode;
+    /** One line of detail under it: who made it, when it was last used. On phones it may wrap. */
+    detail?: ReactNode;
+    /** Its state, as a badge. */
+    status?: BlockStatus;
+    /** Mutes the name and the icon, for something expired, revoked or archived. */
+    inactive?: boolean;
+    /** A 16px icon on a tile at the start of the row, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What can be done to it, in a menu behind a button at the row's end. */
+    menu?: BlockMenuItem[];
+}
+export interface List03Labels {
+    /** Names a row's menu button. @default "Actions for Production deploys" */
+    actions?(title: string): string;
+    /** Names a row's menu. @default "Production deploys actions" */
+    menu?(title: string): string;
+}
+export interface List03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A line or two under it. */
+    description?: ReactNode;
+    /** The one primary action, beside the title: "Create key". */
+    primaryAction?: BlockButton;
+    /** The rows, in order. */
+    items: List03Item[];
+    /** A caption under the list: how things expire, where to find more. */
+    footnote?: ReactNode;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: List03Labels;
+}

package/dist/lists-and-tables/List04/List04.d.cts

@@ -0,0 +1,3 @@
+import type { List04Props } from "./List04.types.cjs";
+/** A grid of cards, each with a tile, a name, a line about it, its status and its people, and a menu of actions. A search field narrows them. */
+export declare function List04({ title, count, description, primaryAction, items, searchable, emptyIcon, labels, className, ...props }: List04Props): import("react").JSX.Element;

package/dist/lists-and-tables/List04/List04.d.ts

@@ -0,0 +1,3 @@
+import type { List04Props } from "./List04.types.js";
+/** A grid of cards, each with a tile, a name, a line about it, its status and its people, and a menu of actions. A search field narrows them. */
+export declare function List04({ title, count, description, primaryAction, items, searchable, emptyIcon, labels, className, ...props }: List04Props): import("react").JSX.Element;

package/dist/lists-and-tables/List04/List04.types.d.cts

@@ -0,0 +1,67 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.cjs";
+/** One card: what it is, how it's doing, who works on it, and a menu of actions. */
+export interface List04Item {
+    /** Unique in the grid. */
+    id: string;
+    /** Its name, as the card's heading. */
+    title: string;
+    /** A line in mono under the name, such as its repository. */
+    subtitle?: ReactNode;
+    /** A 17px icon on a tile before the name, usually from lucide-react. */
+    icon?: ReactNode;
+    /** A line or two about it. */
+    description?: ReactNode;
+    /** Its state, as a badge at the foot of the card. */
+    status?: BlockStatus;
+    /** A caption beside the badge: when it last changed. */
+    meta?: ReactNode;
+    /** The people on it, as avatars at the foot. Three show; the rest are counted. */
+    members?: string[];
+    /** Marks it with a small brass star after its name. */
+    pinned?: boolean;
+    /** What can be done to it, in a menu behind a button on the card. */
+    menu?: BlockMenuItem[];
+    /** The words the search matches. @default the title, and the description when it's text */
+    searchText?: string[];
+}
+export interface List04Labels {
+    /** The search field's placeholder, and its name for screen readers. @default "Search" */
+    search?: string;
+    /** Read out for the star of a pinned card. @default "Pinned" */
+    pinned?: string;
+    /** Names a card's menu button. @default "Actions for marketing-site" */
+    actions?(title: string): string;
+    /** Names a card's menu. @default "marketing-site actions" */
+    menu?(title: string): string;
+    /** Names a card's group of avatars. @default "6 people on marketing-site" */
+    members?(count: number, title: string): string;
+    /** The empty state's title when the search matches nothing. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it, given the search. @default "Nothing is called “…”, and no description mentions it." */
+    emptyDescription?(query: string): ReactNode;
+    /** The button that clears the search. @default "Clear search" */
+    clearSearch?: string;
+    /** The empty state's title when there are no cards at all. @default "Nothing here yet" */
+    noItemsTitle?: string;
+    /** The line under it. */
+    noItemsDescription?: ReactNode;
+}
+export interface List04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A muted count after the heading. */
+    count?: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A small primary action beside the search field: "New project". */
+    primaryAction?: BlockButton;
+    /** The cards, in order: three to a row on desktops, two on tablets, one on phones. */
+    items: List04Item[];
+    /** Shows a search field that narrows the cards. @default true */
+    searchable?: boolean;
+    /** 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, the empty state), in English unless you pass your own. */
+    labels?: List04Labels;
+}

package/dist/lists-and-tables/List04/List04.types.d.ts

@@ -0,0 +1,67 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.js";
+/** One card: what it is, how it's doing, who works on it, and a menu of actions. */
+export interface List04Item {
+    /** Unique in the grid. */
+    id: string;
+    /** Its name, as the card's heading. */
+    title: string;
+    /** A line in mono under the name, such as its repository. */
+    subtitle?: ReactNode;
+    /** A 17px icon on a tile before the name, usually from lucide-react. */
+    icon?: ReactNode;
+    /** A line or two about it. */
+    description?: ReactNode;
+    /** Its state, as a badge at the foot of the card. */
+    status?: BlockStatus;
+    /** A caption beside the badge: when it last changed. */
+    meta?: ReactNode;
+    /** The people on it, as avatars at the foot. Three show; the rest are counted. */
+    members?: string[];
+    /** Marks it with a small brass star after its name. */
+    pinned?: boolean;
+    /** What can be done to it, in a menu behind a button on the card. */
+    menu?: BlockMenuItem[];
+    /** The words the search matches. @default the title, and the description when it's text */
+    searchText?: string[];
+}
+export interface List04Labels {
+    /** The search field's placeholder, and its name for screen readers. @default "Search" */
+    search?: string;
+    /** Read out for the star of a pinned card. @default "Pinned" */
+    pinned?: string;
+    /** Names a card's menu button. @default "Actions for marketing-site" */
+    actions?(title: string): string;
+    /** Names a card's menu. @default "marketing-site actions" */
+    menu?(title: string): string;
+    /** Names a card's group of avatars. @default "6 people on marketing-site" */
+    members?(count: number, title: string): string;
+    /** The empty state's title when the search matches nothing. @default "Nothing matches" */
+    emptyTitle?: string;
+    /** The line under it, given the search. @default "Nothing is called “…”, and no description mentions it." */
+    emptyDescription?(query: string): ReactNode;
+    /** The button that clears the search. @default "Clear search" */
+    clearSearch?: string;
+    /** The empty state's title when there are no cards at all. @default "Nothing here yet" */
+    noItemsTitle?: string;
+    /** The line under it. */
+    noItemsDescription?: ReactNode;
+}
+export interface List04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A muted count after the heading. */
+    count?: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A small primary action beside the search field: "New project". */
+    primaryAction?: BlockButton;
+    /** The cards, in order: three to a row on desktops, two on tablets, one on phones. */
+    items: List04Item[];
+    /** Shows a search field that narrows the cards. @default true */
+    searchable?: boolean;
+    /** 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, the empty state), in English unless you pass your own. */
+    labels?: List04Labels;
+}

package/dist/logo-clouds/Logos01/Logos01.d.cts

@@ -0,0 +1,3 @@
+import type { Logos01Props } from "./Logos01.types.cjs";
+/** A row of customers' logos under a small heading. */
+export declare function Logos01({ title, logos, className, ...props }: Logos01Props): import("react").JSX.Element;

package/dist/logo-clouds/Logos01/Logos01.d.ts

@@ -0,0 +1,3 @@
+import type { Logos01Props } from "./Logos01.types.js";
+/** A row of customers' logos under a small heading. */
+export declare function Logos01({ title, logos, className, ...props }: Logos01Props): import("react").JSX.Element;

package/dist/logo-clouds/Logos01/Logos01.types.d.cts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Logos01Logo {
+    /** The company, for the list's key. Put it in the logo too: as the <img>'s alt, or as text beside an SVG. */
+    name: string;
+    /** The logo: an `<img src alt>` or an inline SVG, in one colour (currentColor), about 22px tall. */
+    logo: ReactNode;
+}
+export interface Logos01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small, muted heading over the logos: "Trusted by more than 4,000 software teams". */
+    title: ReactNode;
+    /** Customers' logos, in one row that wraps to a grid on smaller screens. Five or six look best. */
+    logos: Logos01Logo[];
+}

package/dist/logo-clouds/Logos01/Logos01.types.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Logos01Logo {
+    /** The company, for the list's key. Put it in the logo too: as the <img>'s alt, or as text beside an SVG. */
+    name: string;
+    /** The logo: an `<img src alt>` or an inline SVG, in one colour (currentColor), about 22px tall. */
+    logo: ReactNode;
+}
+export interface Logos01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small, muted heading over the logos: "Trusted by more than 4,000 software teams". */
+    title: ReactNode;
+    /** Customers' logos, in one row that wraps to a grid on smaller screens. Five or six look best. */
+    logos: Logos01Logo[];
+}

package/dist/logo-clouds/Logos02/Logos02.d.cts

@@ -0,0 +1,3 @@
+import type { Logos02Props } from "./Logos02.types.cjs";
+/** Customers' logos in tiles on one card, each linking to its story. */
+export declare function Logos02({ eyebrow, title, description, logos, link, labels, className, ...props }: Logos02Props): import("react").JSX.Element;

package/dist/logo-clouds/Logos02/Logos02.d.ts

@@ -0,0 +1,3 @@
+import type { Logos02Props } from "./Logos02.types.js";
+/** Customers' logos in tiles on one card, each linking to its story. */
+export declare function Logos02({ eyebrow, title, description, logos, link, labels, className, ...props }: Logos02Props): import("react").JSX.Element;

package/dist/logo-clouds/Logos02/Logos02.types.d.cts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Logos02Logo {
+    /** The company, for the list's key. Put it in the logo too: as the <img>'s alt, or as text beside an SVG. */
+    name: string;
+    /** The logo: an `<img src alt>` or an inline SVG, in one colour (currentColor), about 22px tall. */
+    logo: ReactNode;
+    /** Where its tile goes, such as the customer's story. */
+    href: string;
+}
+export interface Logos02Labels {
+    /** Shown under a logo when its tile is hovered or focused. @default "Read the story" */
+    more?: string;
+}
+export interface Logos02Props 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;
+    /** Customers' logos, each a tile that links to its story: four to a row, two on phones. Eight look best. */
+    logos: Logos02Logo[];
+    /** A link under the tiles: "See all 40 customer stories". */
+    link?: BlockLink;
+    /** Words that aren't content, in English unless you pass your own. */
+    labels?: Logos02Labels;
+}

package/dist/logo-clouds/Logos02/Logos02.types.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Logos02Logo {
+    /** The company, for the list's key. Put it in the logo too: as the <img>'s alt, or as text beside an SVG. */
+    name: string;
+    /** The logo: an `<img src alt>` or an inline SVG, in one colour (currentColor), about 22px tall. */
+    logo: ReactNode;
+    /** Where its tile goes, such as the customer's story. */
+    href: string;
+}
+export interface Logos02Labels {
+    /** Shown under a logo when its tile is hovered or focused. @default "Read the story" */
+    more?: string;
+}
+export interface Logos02Props 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;
+    /** Customers' logos, each a tile that links to its story: four to a row, two on phones. Eight look best. */
+    logos: Logos02Logo[];
+    /** A link under the tiles: "See all 40 customer stories". */
+    link?: BlockLink;
+    /** Words that aren't content, in English unless you pass your own. */
+    labels?: Logos02Labels;
+}

package/dist/logo-clouds/Logos03/Logos03.d.cts

@@ -0,0 +1,3 @@
+import type { Logos03Props } from "./Logos03.types.cjs";
+/** A slow, endless row of customers' logos that pauses on hover and stands still with reduced motion. */
+export declare function Logos03({ title, logos, labels, className, ...props }: Logos03Props): import("react").JSX.Element;

package/dist/logo-clouds/Logos03/Logos03.d.ts

@@ -0,0 +1,3 @@
+import type { Logos03Props } from "./Logos03.types.js";
+/** A slow, endless row of customers' logos that pauses on hover and stands still with reduced motion. */
+export declare function Logos03({ title, logos, labels, className, ...props }: Logos03Props): import("react").JSX.Element;