@openwarelabs/blocks 0.8.0 → 0.10.0

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Logos03Logo {
+    /** 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 Logos03Labels {
+    /** The button that stops the logos moving. @default "Pause the logos" */
+    pause?: string;
+    /** The same button once they're stopped. @default "Play the logos" */
+    play?: string;
+    /** The moving strip, for screen readers. @default "Customer logos" */
+    region?: string;
+}
+export interface Logos03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small, muted heading over the logos: "Teams that ship with Acme". */
+    title: ReactNode;
+    /** Customers' logos, in a slow, endless row that pauses on hover and focus, and stands still in rows with reduced motion. Eight look best. */
+    logos: Logos03Logo[];
+    /** Words that aren't content (names for screen readers, a button's name), in English unless you pass your own. */
+    labels?: Logos03Labels;
+}

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Logos03Logo {
+    /** 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 Logos03Labels {
+    /** The button that stops the logos moving. @default "Pause the logos" */
+    pause?: string;
+    /** The same button once they're stopped. @default "Play the logos" */
+    play?: string;
+    /** The moving strip, for screen readers. @default "Customer logos" */
+    region?: string;
+}
+export interface Logos03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small, muted heading over the logos: "Teams that ship with Acme". */
+    title: ReactNode;
+    /** Customers' logos, in a slow, endless row that pauses on hover and focus, and stands still in rows with reduced motion. Eight look best. */
+    logos: Logos03Logo[];
+    /** Words that aren't content (names for screen readers, a button's name), in English unless you pass your own. */
+    labels?: Logos03Labels;
+}

package/dist/newsletter/Newsletter01/Newsletter01.d.cts

@@ -0,0 +1,3 @@
+import type { Newsletter01Props } from "./Newsletter01.types.cjs";
+/** A newsletter sign-up in one row: the heading on the left, the field and button on the right, a confirmation in place of the form. */
+export declare function Newsletter01({ eyebrow, title, description, submitLabel, onSubmit, note, successTitle, successDescription, labels, className, ...props }: Newsletter01Props): import("react").JSX.Element;

package/dist/newsletter/Newsletter01/Newsletter01.d.ts

@@ -0,0 +1,3 @@
+import type { Newsletter01Props } from "./Newsletter01.types.js";
+/** A newsletter sign-up in one row: the heading on the left, the field and button on the right, a confirmation in place of the form. */
+export declare function Newsletter01({ eyebrow, title, description, submitLabel, onSubmit, note, successTitle, successDescription, labels, className, ...props }: Newsletter01Props): import("react").JSX.Element;

package/dist/newsletter/Newsletter01/Newsletter01.types.d.cts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** The words around the form that aren't content, in English unless you pass your own. */
+export interface Newsletter01Labels {
+    /** The field's label. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** The button that brings the form back after signing up. @default "Use a different email" */
+    change?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "Enter an email address like name@example.com." */
+    invalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+}
+export interface Newsletter01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title: what they'll get, and how often. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /**
+     * Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, the
+     * error's message shows under the field, and once it resolves the form gives way to `successTitle`.
+     */
+    onSubmit(email: string): void | Promise<void>;
+    /** A small line under the form: "Unsubscribe in one click. We never share your address." */
+    note?: ReactNode;
+    /** What replaces the form once they've signed up: "You're on the list". */
+    successTitle: ReactNode;
+    /** A line under it, given the address they signed up with. */
+    successDescription?(email: string): ReactNode;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Newsletter01Labels;
+}

package/dist/newsletter/Newsletter01/Newsletter01.types.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** The words around the form that aren't content, in English unless you pass your own. */
+export interface Newsletter01Labels {
+    /** The field's label. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** The button that brings the form back after signing up. @default "Use a different email" */
+    change?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "Enter an email address like name@example.com." */
+    invalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+}
+export interface Newsletter01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title: what they'll get, and how often. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /**
+     * Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, the
+     * error's message shows under the field, and once it resolves the form gives way to `successTitle`.
+     */
+    onSubmit(email: string): void | Promise<void>;
+    /** A small line under the form: "Unsubscribe in one click. We never share your address." */
+    note?: ReactNode;
+    /** What replaces the form once they've signed up: "You're on the list". */
+    successTitle: ReactNode;
+    /** A line under it, given the address they signed up with. */
+    successDescription?(email: string): ReactNode;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Newsletter01Labels;
+}

package/dist/newsletter/Newsletter02/Newsletter02.d.cts

@@ -0,0 +1,3 @@
+import type { Newsletter02Props } from "./Newsletter02.types.cjs";
+/** A newsletter sign-up in a card at the reading width, for the end of a post, with its writers along the foot. */
+export declare function Newsletter02({ icon, title, description, submitLabel, onSubmit, successTitle, successDescription, authors, authorsNote, archiveLink, labels, className, ...props }: Newsletter02Props): import("react").JSX.Element;

package/dist/newsletter/Newsletter02/Newsletter02.d.ts

@@ -0,0 +1,3 @@
+import type { Newsletter02Props } from "./Newsletter02.types.js";
+/** A newsletter sign-up in a card at the reading width, for the end of a post, with its writers along the foot. */
+export declare function Newsletter02({ icon, title, description, submitLabel, onSubmit, successTitle, successDescription, authors, authorsNote, archiveLink, labels, className, ...props }: Newsletter02Props): import("react").JSX.Element;

package/dist/newsletter/Newsletter02/Newsletter02.types.d.cts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** The words around the form that aren't content, in English unless you pass your own. */
+export interface Newsletter02Labels {
+    /** The field's label. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "Enter an email address like name@example.com." */
+    invalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+}
+export interface Newsletter02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** A 20px icon in a tile above the title, such as a mail icon. */
+    icon?: ReactNode;
+    /** The card's heading. */
+    title: ReactNode;
+    /** A sentence or two under it: what they'll get, and how often. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /**
+     * Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, the
+     * error's message shows under the field, and once it resolves a toast says so and the field empties.
+     */
+    onSubmit(email: string): void | Promise<void>;
+    /** The toast's title once they've signed up: "Check your inbox". */
+    successTitle: ReactNode;
+    /** The toast's line under it, given the address they signed up with. */
+    successDescription?(email: string): ReactNode;
+    /** The people who write it, as avatars at the foot of the card. */
+    authors?: string[];
+    /** A line beside the avatars: "Clara, Jonas and Sam write it for 9,400 readers." */
+    authorsNote?: ReactNode;
+    /** A link at the foot's right, with an arrow: "Read past posts". */
+    archiveLink?: BlockLink;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Newsletter02Labels;
+}

package/dist/newsletter/Newsletter02/Newsletter02.types.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** The words around the form that aren't content, in English unless you pass your own. */
+export interface Newsletter02Labels {
+    /** The field's label. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "Enter an email address like name@example.com." */
+    invalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+}
+export interface Newsletter02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** A 20px icon in a tile above the title, such as a mail icon. */
+    icon?: ReactNode;
+    /** The card's heading. */
+    title: ReactNode;
+    /** A sentence or two under it: what they'll get, and how often. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /**
+     * Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, the
+     * error's message shows under the field, and once it resolves a toast says so and the field empties.
+     */
+    onSubmit(email: string): void | Promise<void>;
+    /** The toast's title once they've signed up: "Check your inbox". */
+    successTitle: ReactNode;
+    /** The toast's line under it, given the address they signed up with. */
+    successDescription?(email: string): ReactNode;
+    /** The people who write it, as avatars at the foot of the card. */
+    authors?: string[];
+    /** A line beside the avatars: "Clara, Jonas and Sam write it for 9,400 readers." */
+    authorsNote?: ReactNode;
+    /** A link at the foot's right, with an arrow: "Read past posts". */
+    archiveLink?: BlockLink;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Newsletter02Labels;
+}

package/dist/notifications/Notifications01/Notifications01.d.cts

@@ -0,0 +1,3 @@
+import type { Notifications01Props } from "./Notifications01.types.cjs";
+/** A bell with the unread count that opens the latest notifications, in All and Mentions tabs, with Mark all as read. */
+export declare function Notifications01({ notifications, onOpen, onMarkAllRead, viewAllHref, onSettings, defaultOpen, labels, className, ...props }: Notifications01Props): import("react").JSX.Element;

package/dist/notifications/Notifications01/Notifications01.d.ts

@@ -0,0 +1,3 @@
+import type { Notifications01Props } from "./Notifications01.types.js";
+/** A bell with the unread count that opens the latest notifications, in All and Mentions tabs, with Mark all as read. */
+export declare function Notifications01({ notifications, onOpen, onMarkAllRead, viewAllHref, onSettings, defaultOpen, labels, className, ...props }: Notifications01Props): import("react").JSX.Element;

package/dist/notifications/Notifications01/Notifications01.types.d.cts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One notification in the popover. */
+export interface Notifications01Item {
+    /** Tells them apart. */
+    id: string;
+    /** Who it's from: a person's name, drawn as their Avatar. */
+    from?: string;
+    /** A 14–15px icon in a circle instead of an Avatar, for what the product sends itself (an agent, a deploy). */
+    icon?: ReactNode;
+    /** The icon's circle: the brand's tint, or red for something that failed.
+     * @default "primary" */
+    tone?: "primary" | "danger";
+    /** What happened, with the names in bold: <><strong>Clara Novak</strong> mentioned you in …</>. */
+    message: ReactNode;
+    /** The same in plain words, read out in place of `message`. */
+    summary: string;
+    /** A line or two quoted from a comment, clamped to two lines. */
+    quote?: ReactNode;
+    /** Where it happened: "billing-api". */
+    where: string;
+    /** When: "4 min ago". */
+    when: string;
+    /** It mentions you, so it's under Mentions too. */
+    mention?: boolean;
+    /** Not read yet: a brass dot, and counted on the bell. */
+    unread?: boolean;
+    /** Where it goes. Without one, opening it only marks it read. */
+    href?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Notifications01Labels {
+    /** The popover's heading and name. @default "Notifications" */
+    title?: string;
+    /** The bell's name. @default (unread) => unread ? `Notifications, ${unread} unread` : "Notifications" */
+    bell?(unread: number): string;
+    /** @default "Mark all as read" */
+    markAllRead?: string;
+    /** The tabs' name for screen readers. @default "Show" */
+    tabs?: string;
+    /** @default "All" */
+    all?: string;
+    /** @default "Mentions" */
+    mentions?: string;
+    /** Read out before an unread one. @default "Unread: " */
+    unread?: string;
+    /** When a tab has none. @default "Nothing here yet." */
+    empty?: string;
+    /** The link at the foot. @default "View all notifications" */
+    viewAll?: string;
+    /** The settings button's name. @default "Notification settings" */
+    settings?: string;
+}
+export interface Notifications01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The latest notifications, newest first. */
+    notifications: Notifications01Item[];
+    /** Runs when one is opened; it's marked read as it opens. */
+    onOpen?(notification: Notifications01Item): void;
+    /** Runs on Mark all as read. */
+    onMarkAllRead?(): void;
+    /** Where "View all notifications" goes. Without it there's no link. */
+    viewAllHref?: string;
+    /** Runs when the settings button at the foot is pressed. */
+    onSettings?(): void;
+    /** Starts with the popover open, without moving focus into it. */
+    defaultOpen?: boolean;
+    labels?: Notifications01Labels;
+}
+/** The list inside one tab. */
+export interface Notifications01ListProps {
+    items: Notifications01Item[];
+    isUnread(item: Notifications01Item): boolean;
+    onOpen(item: Notifications01Item): void;
+    labels: Notifications01Labels;
+}

package/dist/notifications/Notifications01/Notifications01.types.d.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One notification in the popover. */
+export interface Notifications01Item {
+    /** Tells them apart. */
+    id: string;
+    /** Who it's from: a person's name, drawn as their Avatar. */
+    from?: string;
+    /** A 14–15px icon in a circle instead of an Avatar, for what the product sends itself (an agent, a deploy). */
+    icon?: ReactNode;
+    /** The icon's circle: the brand's tint, or red for something that failed.
+     * @default "primary" */
+    tone?: "primary" | "danger";
+    /** What happened, with the names in bold: <><strong>Clara Novak</strong> mentioned you in …</>. */
+    message: ReactNode;
+    /** The same in plain words, read out in place of `message`. */
+    summary: string;
+    /** A line or two quoted from a comment, clamped to two lines. */
+    quote?: ReactNode;
+    /** Where it happened: "billing-api". */
+    where: string;
+    /** When: "4 min ago". */
+    when: string;
+    /** It mentions you, so it's under Mentions too. */
+    mention?: boolean;
+    /** Not read yet: a brass dot, and counted on the bell. */
+    unread?: boolean;
+    /** Where it goes. Without one, opening it only marks it read. */
+    href?: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Notifications01Labels {
+    /** The popover's heading and name. @default "Notifications" */
+    title?: string;
+    /** The bell's name. @default (unread) => unread ? `Notifications, ${unread} unread` : "Notifications" */
+    bell?(unread: number): string;
+    /** @default "Mark all as read" */
+    markAllRead?: string;
+    /** The tabs' name for screen readers. @default "Show" */
+    tabs?: string;
+    /** @default "All" */
+    all?: string;
+    /** @default "Mentions" */
+    mentions?: string;
+    /** Read out before an unread one. @default "Unread: " */
+    unread?: string;
+    /** When a tab has none. @default "Nothing here yet." */
+    empty?: string;
+    /** The link at the foot. @default "View all notifications" */
+    viewAll?: string;
+    /** The settings button's name. @default "Notification settings" */
+    settings?: string;
+}
+export interface Notifications01Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The latest notifications, newest first. */
+    notifications: Notifications01Item[];
+    /** Runs when one is opened; it's marked read as it opens. */
+    onOpen?(notification: Notifications01Item): void;
+    /** Runs on Mark all as read. */
+    onMarkAllRead?(): void;
+    /** Where "View all notifications" goes. Without it there's no link. */
+    viewAllHref?: string;
+    /** Runs when the settings button at the foot is pressed. */
+    onSettings?(): void;
+    /** Starts with the popover open, without moving focus into it. */
+    defaultOpen?: boolean;
+    labels?: Notifications01Labels;
+}
+/** The list inside one tab. */
+export interface Notifications01ListProps {
+    items: Notifications01Item[];
+    isUnread(item: Notifications01Item): boolean;
+    onOpen(item: Notifications01Item): void;
+    labels: Notifications01Labels;
+}

package/dist/notifications/Notifications02/Notifications02.d.cts

@@ -0,0 +1,3 @@
+import type { Notifications02Props } from "./Notifications02.types.cjs";
+/** An activity page: days down the page, each day's events on a thin rail, with a filter and a way to load older days. */
+export declare function Notifications02({ title, description, days, kinds, onLoadEarlier, labels, className, ...props }: Notifications02Props): import("react").JSX.Element;

package/dist/notifications/Notifications02/Notifications02.d.ts

@@ -0,0 +1,3 @@
+import type { Notifications02Props } from "./Notifications02.types.js";
+/** An activity page: days down the page, each day's events on a thin rail, with a filter and a way to load older days. */
+export declare function Notifications02({ title, description, days, kinds, onLoadEarlier, labels, className, ...props }: Notifications02Props): import("react").JSX.Element;

package/dist/notifications/Notifications02/Notifications02.types.d.cts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One event on the rail. */
+export interface Notifications02Event {
+    /** Tells them apart. */
+    id: string;
+    /** What kind it is, for the filter: "deploy", "review". */
+    kind?: string;
+    /** Who did it: a person's name, drawn as their Avatar. */
+    by?: string;
+    /** A 14–15px icon in a circle instead of an Avatar, for what the product records itself. */
+    icon?: ReactNode;
+    /** The icon's circle: muted, the brand's tint, or red for something that failed.
+     * @default "default" */
+    tone?: "default" | "primary" | "danger";
+    /** The time of day, as written and in the `<time>` element: "14:32". */
+    time: string;
+    /** What happened, in a sentence: names in bold, the things it happened to as links. */
+    line: ReactNode;
+    /** What came with it, under the line: a badge, a commit, a quote, the people added. */
+    detail?: ReactNode;
+}
+/** A day's events, under its heading. */
+export interface Notifications02Day {
+    /** The day as an ISO date, for each event's `<time>`: "2026-10-13". */
+    dateTime: string;
+    /** The heading: "Today", "Yesterday", "Friday". */
+    label: ReactNode;
+    /** The date, muted beside it: "Tuesday 13 October". */
+    date?: ReactNode;
+    events: Notifications02Event[];
+}
+/** A kind of event the filter can show on its own. */
+export interface Notifications02Kind {
+    /** Matches the events' `kind`. */
+    value: string;
+    /** The filter's word for it: "Deploys". */
+    label: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Notifications02Labels {
+    /** The filter's first option, for every kind. @default "All" */
+    all?: string;
+    /** The filter's name for screen readers. @default "Show" */
+    filter?: string;
+    /** When the filter leaves nothing. @default "Nothing of this kind yet." */
+    empty?: string;
+    /** The button that loads older days. @default "Show earlier activity" */
+    loadEarlier?: string;
+    /** Under the list once there's nothing older. @default "That's everything." */
+    end?: string;
+}
+export interface Notifications02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's heading: "Activity". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The days to show, newest first. */
+    days: Notifications02Day[];
+    /** The kinds the filter offers after All. Without them there's no filter. */
+    kinds?: Notifications02Kind[];
+    /** Fetches the days before these. While its promise is pending the button shows a spinner; the days it gives
+     * are added below. Without it there's no button, only the `end` line. */
+    onLoadEarlier?(): Notifications02Day[] | Promise<Notifications02Day[]>;
+    labels?: Notifications02Labels;
+}

package/dist/notifications/Notifications02/Notifications02.types.d.ts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One event on the rail. */
+export interface Notifications02Event {
+    /** Tells them apart. */
+    id: string;
+    /** What kind it is, for the filter: "deploy", "review". */
+    kind?: string;
+    /** Who did it: a person's name, drawn as their Avatar. */
+    by?: string;
+    /** A 14–15px icon in a circle instead of an Avatar, for what the product records itself. */
+    icon?: ReactNode;
+    /** The icon's circle: muted, the brand's tint, or red for something that failed.
+     * @default "default" */
+    tone?: "default" | "primary" | "danger";
+    /** The time of day, as written and in the `<time>` element: "14:32". */
+    time: string;
+    /** What happened, in a sentence: names in bold, the things it happened to as links. */
+    line: ReactNode;
+    /** What came with it, under the line: a badge, a commit, a quote, the people added. */
+    detail?: ReactNode;
+}
+/** A day's events, under its heading. */
+export interface Notifications02Day {
+    /** The day as an ISO date, for each event's `<time>`: "2026-10-13". */
+    dateTime: string;
+    /** The heading: "Today", "Yesterday", "Friday". */
+    label: ReactNode;
+    /** The date, muted beside it: "Tuesday 13 October". */
+    date?: ReactNode;
+    events: Notifications02Event[];
+}
+/** A kind of event the filter can show on its own. */
+export interface Notifications02Kind {
+    /** Matches the events' `kind`. */
+    value: string;
+    /** The filter's word for it: "Deploys". */
+    label: string;
+}
+/** The words that aren't content, in English unless you pass your own. */
+export interface Notifications02Labels {
+    /** The filter's first option, for every kind. @default "All" */
+    all?: string;
+    /** The filter's name for screen readers. @default "Show" */
+    filter?: string;
+    /** When the filter leaves nothing. @default "Nothing of this kind yet." */
+    empty?: string;
+    /** The button that loads older days. @default "Show earlier activity" */
+    loadEarlier?: string;
+    /** Under the list once there's nothing older. @default "That's everything." */
+    end?: string;
+}
+export interface Notifications02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The page's heading: "Activity". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The days to show, newest first. */
+    days: Notifications02Day[];
+    /** The kinds the filter offers after All. Without them there's no filter. */
+    kinds?: Notifications02Kind[];
+    /** Fetches the days before these. While its promise is pending the button shows a spinner; the days it gives
+     * are added below. Without it there's no button, only the `end` line. */
+    onLoadEarlier?(): Notifications02Day[] | Promise<Notifications02Day[]>;
+    labels?: Notifications02Labels;
+}

package/dist/notifications/Notifications03/Notifications03.d.cts

@@ -0,0 +1,3 @@
+import type { Notifications03Props } from "./Notifications03.types.cjs";
+/** Notification settings: a grid of switches with events down the side and channels across the top, and delivery settings under it. */
+export declare function Notifications03({ title, description, channels, groups, value, defaultValue, onChange, options, onOptionChange, labels, className, ...props }: Notifications03Props): import("react").JSX.Element;

package/dist/notifications/Notifications03/Notifications03.d.ts

@@ -0,0 +1,3 @@
+import type { Notifications03Props } from "./Notifications03.types.js";
+/** Notification settings: a grid of switches with events down the side and channels across the top, and delivery settings under it. */
+export declare function Notifications03({ title, description, channels, groups, value, defaultValue, onChange, options, onOptionChange, labels, className, ...props }: Notifications03Props): import("react").JSX.Element;

package/dist/notifications/Notifications03/Notifications03.types.d.cts

@@ -0,0 +1,87 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SelectOption } from "@openwarelabs/ui";
+/** A way notifications reach someone, as a column of switches. */
+export interface Notifications03Channel {
+    /** Tells them apart, in the settings: "email". */
+    id: string;
+    /** The column's heading: "Email". */
+    label: string;
+    /** A 15px icon beside it, usually from lucide-react. */
+    icon?: ReactNode;
+}
+/** Something that can send a notification, as a row of switches. */
+export interface Notifications03Event {
+    /** Tells them apart, in the settings: "review-requested". */
+    id: string;
+    /** What happens: "Someone asks for your review". */
+    label: ReactNode;
+    /** A caption under it. */
+    description?: ReactNode;
+    /** The ids of channels it can't use at all: a dash instead of a switch. */
+    unavailable?: string[];
+}
+/** Events under a small heading. */
+export interface Notifications03Group {
+    /** The heading: "Reviews". */
+    label: ReactNode;
+    events: Notifications03Event[];
+}
+/** Which channels each event reaches, by event id. An event that's missing reaches none. */
+export type Notifications03Value = Record<string, string[]>;
+/** One switch flipped, as given to `onChange`. */
+export interface Notifications03Change {
+    event: string;
+    channel: string;
+    on: boolean;
+}
+/** A setting under the grid, as a row with its control on the right. */
+export type Notifications03Option = {
+    kind: "select";
+    /** Tells them apart, in `onOptionChange`. */
+    id: string;
+    label: string;
+    description?: ReactNode;
+    options: SelectOption[];
+    defaultValue: string;
+} | {
+    kind: "switch";
+    /** Tells them apart, in `onOptionChange`. */
+    id: string;
+    label: string;
+    description?: ReactNode;
+    defaultValue: boolean;
+};
+/** The words that aren't content, in English unless you pass your own. */
+export interface Notifications03Labels {
+    /** The grid's corner, over the events. @default "Event" */
+    event?: string;
+    /** Beside an event that reaches no channel. @default "Muted" */
+    muted?: string;
+    /** Read out for a dash. @default (channel) => `Not sent by ${channel.toLowerCase()}` */
+    unavailable?(channel: string): string;
+    /** The heading over `options`. @default "Delivery" */
+    options?: string;
+    /** Shown for a moment after each change. @default "Saved" */
+    saved?: string;
+}
+export interface Notifications03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "defaultValue" | "onChange"> {
+    /** The page's heading: "Notifications". */
+    title: ReactNode;
+    /** A sentence under it. */
+    description?: ReactNode;
+    /** The columns. */
+    channels: Notifications03Channel[];
+    /** The rows, in groups. */
+    groups: Notifications03Group[];
+    /** Which channels each event reaches, for controlled use. */
+    value?: Notifications03Value;
+    /** Where it starts, when it isn't controlled. */
+    defaultValue?: Notifications03Value;
+    /** Runs on every switch in the grid, with the new settings and what changed: save them. */
+    onChange?(value: Notifications03Value, change: Notifications03Change): void;
+    /** Settings under the grid, such as how often emails go and quiet hours. */
+    options?: Notifications03Option[];
+    /** Runs when one of `options` changes: save it. */
+    onOptionChange?(id: string, value: string | boolean): void;
+    labels?: Notifications03Labels;
+}