@openwarelabs/blocks 0.8.0 → 0.10.0

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

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

package/dist/onboarding/Onboarding01/Onboarding01.d.cts

@@ -0,0 +1,3 @@
+import type { Onboarding01Props } from "./Onboarding01.types.cjs";
+/** A first-run checklist on a panel: what it's for and the progress on the left, the steps on the right with the current one's action beside it. */
+export declare function Onboarding01({ eyebrow, title, description, finishedTitle, finishedDescription, steps, stepsTitle, defaultCompleted, onStepComplete, help, finishedAction, labels, className, ...props }: Onboarding01Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding01/Onboarding01.d.ts

@@ -0,0 +1,3 @@
+import type { Onboarding01Props } from "./Onboarding01.types.js";
+/** A first-run checklist on a panel: what it's for and the progress on the left, the steps on the right with the current one's action beside it. */
+export declare function Onboarding01({ eyebrow, title, description, finishedTitle, finishedDescription, steps, stepsTitle, defaultCompleted, onStepComplete, help, finishedAction, labels, className, ...props }: Onboarding01Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding01/Onboarding01.types.d.cts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Onboarding01Labels {
+    /** The progress bar's label. @default "Setup" */
+    progress?: string;
+    /** The button that starts the checklist again, once it's done. @default "Run setup again" */
+    restart?: string;
+}
+/** One step of the checklist. */
+export interface Onboarding01Step {
+    /** What to do: "Invite your team". */
+    title: ReactNode;
+    /** A line under it, while it isn't done. */
+    description?: ReactNode;
+    /** The button beside the step while it's the current one: "Invite people". */
+    actionLabel: ReactNode;
+    /** Does the step: opens the invite dialog, the issue picker and so on. While its promise is pending the button shows a spinner; when it resolves the step is ticked off and the next one opens. */
+    onAction?(): void | Promise<void>;
+}
+export interface Onboarding01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line over the heading, after a brass dot: "Getting started". */
+    eyebrow?: ReactNode;
+    /** The heading while there are steps to do: "Get Acme ready for your team". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The heading once every step is done. @default the title */
+    finishedTitle?: ReactNode;
+    /** The line under it then. @default the description */
+    finishedDescription?: ReactNode;
+    /** The steps, in order. */
+    steps: Onboarding01Step[];
+    /** The heading over the checklist, with a "2 of 5 done" count beside it. */
+    stepsTitle?: ReactNode;
+    /** How many steps are already done when it opens.
+     * @default 0 */
+    defaultCompleted?: number;
+    /** Called with a step's index once it's done. */
+    onStepComplete?(index: number): void;
+    /** Under the progress while there are steps to do: where to get help. */
+    help?: ReactNode;
+    /** The button once every step is done: "Go to overview". */
+    finishedAction?: BlockAction;
+    /** Words that aren't content (the progress bar's label, the restart button), in English unless you pass your own. */
+    labels?: Onboarding01Labels;
+}

package/dist/onboarding/Onboarding01/Onboarding01.types.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Onboarding01Labels {
+    /** The progress bar's label. @default "Setup" */
+    progress?: string;
+    /** The button that starts the checklist again, once it's done. @default "Run setup again" */
+    restart?: string;
+}
+/** One step of the checklist. */
+export interface Onboarding01Step {
+    /** What to do: "Invite your team". */
+    title: ReactNode;
+    /** A line under it, while it isn't done. */
+    description?: ReactNode;
+    /** The button beside the step while it's the current one: "Invite people". */
+    actionLabel: ReactNode;
+    /** Does the step: opens the invite dialog, the issue picker and so on. While its promise is pending the button shows a spinner; when it resolves the step is ticked off and the next one opens. */
+    onAction?(): void | Promise<void>;
+}
+export interface Onboarding01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line over the heading, after a brass dot: "Getting started". */
+    eyebrow?: ReactNode;
+    /** The heading while there are steps to do: "Get Acme ready for your team". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The heading once every step is done. @default the title */
+    finishedTitle?: ReactNode;
+    /** The line under it then. @default the description */
+    finishedDescription?: ReactNode;
+    /** The steps, in order. */
+    steps: Onboarding01Step[];
+    /** The heading over the checklist, with a "2 of 5 done" count beside it. */
+    stepsTitle?: ReactNode;
+    /** How many steps are already done when it opens.
+     * @default 0 */
+    defaultCompleted?: number;
+    /** Called with a step's index once it's done. */
+    onStepComplete?(index: number): void;
+    /** Under the progress while there are steps to do: where to get help. */
+    help?: ReactNode;
+    /** The button once every step is done: "Go to overview". */
+    finishedAction?: BlockAction;
+    /** Words that aren't content (the progress bar's label, the restart button), in English unless you pass your own. */
+    labels?: Onboarding01Labels;
+}

package/dist/onboarding/Onboarding02/Onboarding02.d.cts

@@ -0,0 +1,3 @@
+import type { Onboarding02Props } from "./Onboarding02.types.cjs";
+/** A setup screen: the brand and progress along the top, two or three ChoiceCards for how to start, each opening a short page of its own. */
+export declare function Onboarding02({ brand, progress, skip, title, description, choices, note, doneTitle, doneDescription, doneAction, onFinish, labels, className, ...props }: Onboarding02Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding02/Onboarding02.d.ts

@@ -0,0 +1,3 @@
+import type { Onboarding02Props } from "./Onboarding02.types.js";
+/** A setup screen: the brand and progress along the top, two or three ChoiceCards for how to start, each opening a short page of its own. */
+export declare function Onboarding02({ brand, progress, skip, title, description, choices, note, doneTitle, doneDescription, doneAction, onFinish, labels, className, ...props }: Onboarding02Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding02/Onboarding02.types.d.cts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Onboarding02Labels {
+    /** The progress strip's name for screen readers. @default "Setup" */
+    progress?: string;
+    /** The badge on a recommended choice. @default "Recommended" */
+    recommended?: string;
+    /** The button on the last page that goes back to the choice. @default "Start again" */
+    startAgain?: string;
+}
+/** What a choice's page gets to move on with. */
+export interface Onboarding02Controls {
+    /** Back to the choice. */
+    back(): void;
+    /** On to the last page, given what was made: "billing-api". */
+    finish(name: string): void;
+}
+/** One way to start, as a card, and the page it opens. */
+export interface Onboarding02Choice {
+    /** Names it for `onFinish`. */
+    id: string;
+    /** The card's title: "Use a template". */
+    title: string;
+    /** The card's line: what it gives you. */
+    description: string;
+    /** A 20px icon on the card. */
+    icon?: ReactNode;
+    /** Marks the card, with a badge in its corner. */
+    recommended?: boolean;
+    /** The heading of the page it opens: "Pick a template". */
+    heading: ReactNode;
+    /** A line under it. */
+    lead?: ReactNode;
+    /** The page's content: a small form or list on a card, with a Back button that calls `back` and an action that calls `finish`. */
+    render(controls: Onboarding02Controls): ReactNode;
+}
+export interface Onboarding02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 22px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The setup's steps along the top, and which one this is. On the last page the next one is current. */
+    progress?: {
+        steps: ReactNode[];
+        current: number;
+    };
+    /** A quiet button at the top right: "Skip for now". */
+    skip?: BlockAction;
+    /** The choice's heading: "How do you want to start?". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Two or three ways to start, as cards side by side. */
+    choices: Onboarding02Choice[];
+    /** A line under the cards, with a 16px icon first if you like. */
+    note?: ReactNode;
+    /** The last page's heading, given what was made. @default `${name} is ready` */
+    doneTitle?(name: string): ReactNode;
+    /** The last page's line: what comes next. */
+    doneDescription?: ReactNode;
+    /** The last page's button: "Invite your team". */
+    doneAction?: BlockAction;
+    /** Called when a choice's page finishes, with the choice's id and what was made. */
+    onFinish?(choice: string, name: string): void;
+    /** Words that aren't content (names for screen readers, the badge, a button), in English unless you pass your own. */
+    labels?: Onboarding02Labels;
+}

package/dist/onboarding/Onboarding02/Onboarding02.types.d.ts

@@ -0,0 +1,68 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Onboarding02Labels {
+    /** The progress strip's name for screen readers. @default "Setup" */
+    progress?: string;
+    /** The badge on a recommended choice. @default "Recommended" */
+    recommended?: string;
+    /** The button on the last page that goes back to the choice. @default "Start again" */
+    startAgain?: string;
+}
+/** What a choice's page gets to move on with. */
+export interface Onboarding02Controls {
+    /** Back to the choice. */
+    back(): void;
+    /** On to the last page, given what was made: "billing-api". */
+    finish(name: string): void;
+}
+/** One way to start, as a card, and the page it opens. */
+export interface Onboarding02Choice {
+    /** Names it for `onFinish`. */
+    id: string;
+    /** The card's title: "Use a template". */
+    title: string;
+    /** The card's line: what it gives you. */
+    description: string;
+    /** A 20px icon on the card. */
+    icon?: ReactNode;
+    /** Marks the card, with a badge in its corner. */
+    recommended?: boolean;
+    /** The heading of the page it opens: "Pick a template". */
+    heading: ReactNode;
+    /** A line under it. */
+    lead?: ReactNode;
+    /** The page's content: a small form or list on a card, with a Back button that calls `back` and an action that calls `finish`. */
+    render(controls: Onboarding02Controls): ReactNode;
+}
+export interface Onboarding02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 22px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The setup's steps along the top, and which one this is. On the last page the next one is current. */
+    progress?: {
+        steps: ReactNode[];
+        current: number;
+    };
+    /** A quiet button at the top right: "Skip for now". */
+    skip?: BlockAction;
+    /** The choice's heading: "How do you want to start?". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Two or three ways to start, as cards side by side. */
+    choices: Onboarding02Choice[];
+    /** A line under the cards, with a 16px icon first if you like. */
+    note?: ReactNode;
+    /** The last page's heading, given what was made. @default `${name} is ready` */
+    doneTitle?(name: string): ReactNode;
+    /** The last page's line: what comes next. */
+    doneDescription?: ReactNode;
+    /** The last page's button: "Invite your team". */
+    doneAction?: BlockAction;
+    /** Called when a choice's page finishes, with the choice's id and what was made. */
+    onFinish?(choice: string, name: string): void;
+    /** Words that aren't content (names for screen readers, the badge, a button), in English unless you pass your own. */
+    labels?: Onboarding02Labels;
+}

package/dist/onboarding/Onboarding03/Onboarding03.d.cts

@@ -0,0 +1,3 @@
+import type { Onboarding03Props } from "./Onboarding03.types.cjs";
+/** A short dialog for what's new: a picture, a few changes with their icons, and one button to carry on. */
+export declare function Onboarding03({ eyebrow, title, description, visual, changes, link, open: openProp, defaultOpen, onOpenChange, labels, className, ...props }: Onboarding03Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding03/Onboarding03.d.ts

@@ -0,0 +1,3 @@
+import type { Onboarding03Props } from "./Onboarding03.types.js";
+/** A short dialog for what's new: a picture, a few changes with their icons, and one button to carry on. */
+export declare function Onboarding03({ eyebrow, title, description, visual, changes, link, open: openProp, defaultOpen, onOpenChange, labels, className, ...props }: Onboarding03Props): import("react").JSX.Element;

package/dist/onboarding/Onboarding03/Onboarding03.types.d.cts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Onboarding03Labels {
+    /** The button that closes it. @default "Continue" */
+    continue?: string;
+}
+/** One change in the list. */
+export interface Onboarding03Change {
+    /** A 15px icon on a tinted square before it. */
+    icon?: ReactNode;
+    /** What changed: "One place for reviews". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+}
+export interface Onboarding03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** A short line over the title, after a brass dot: "October update". */
+    eyebrow?: ReactNode;
+    /** The dialog's title: "What's new in Acme". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A picture over the list: a screenshot, a short video, or one drawn with components. */
+    visual?: ReactNode;
+    /** The changes, in order. */
+    changes: Onboarding03Change[];
+    /** A quiet link on the left of the button, such as "Read the changelog". */
+    link?: BlockLink;
+    /** Whether it's open, to control it from outside (from a "What's new" button, say). */
+    open?: boolean;
+    /** Whether it starts open, when `open` isn't given.
+     * @default true */
+    defaultOpen?: boolean;
+    /** Called when it closes: by Continue, Escape or the backdrop. */
+    onOpenChange?(open: boolean): void;
+    /** Words that aren't content (the button), in English unless you pass your own. */
+    labels?: Onboarding03Labels;
+}

package/dist/onboarding/Onboarding03/Onboarding03.types.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Onboarding03Labels {
+    /** The button that closes it. @default "Continue" */
+    continue?: string;
+}
+/** One change in the list. */
+export interface Onboarding03Change {
+    /** A 15px icon on a tinted square before it. */
+    icon?: ReactNode;
+    /** What changed: "One place for reviews". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+}
+export interface Onboarding03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** A short line over the title, after a brass dot: "October update". */
+    eyebrow?: ReactNode;
+    /** The dialog's title: "What's new in Acme". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A picture over the list: a screenshot, a short video, or one drawn with components. */
+    visual?: ReactNode;
+    /** The changes, in order. */
+    changes: Onboarding03Change[];
+    /** A quiet link on the left of the button, such as "Read the changelog". */
+    link?: BlockLink;
+    /** Whether it's open, to control it from outside (from a "What's new" button, say). */
+    open?: boolean;
+    /** Whether it starts open, when `open` isn't given.
+     * @default true */
+    defaultOpen?: boolean;
+    /** Called when it closes: by Continue, Escape or the backdrop. */
+    onOpenChange?(open: boolean): void;
+    /** Words that aren't content (the button), in English unless you pass your own. */
+    labels?: Onboarding03Labels;
+}

package/dist/page-headings/PageHeading01/PageHeading01.d.cts

@@ -0,0 +1,6 @@
+import type { PageHeading01Props } from "./PageHeading01.types.cjs";
+/**
+ * The top of a page on a raised panel: its name and state, one primary action and a menu for the rest, then a row
+ * of facts. The page itself can carry on under it, on the same panel.
+ */
+export declare function PageHeading01({ title, icon, status, description, primaryAction, menu, facts, children, labels, className, ...props }: PageHeading01Props): import("react").JSX.Element;

package/dist/page-headings/PageHeading01/PageHeading01.d.ts

@@ -0,0 +1,6 @@
+import type { PageHeading01Props } from "./PageHeading01.types.js";
+/**
+ * The top of a page on a raised panel: its name and state, one primary action and a menu for the rest, then a row
+ * of facts. The page itself can carry on under it, on the same panel.
+ */
+export declare function PageHeading01({ title, icon, status, description, primaryAction, menu, facts, children, labels, className, ...props }: PageHeading01Props): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.cjs";
+/** One fact in the row under the heading: what you'd look up first. */
+export interface PageHeading01Fact {
+    /** What it is, as a caption: "Production", "Branch". */
+    label: ReactNode;
+    /** Its value. Spans in it are cut short with an ellipsis when there's no room. */
+    value: ReactNode;
+}
+export interface PageHeading01Labels {
+    /** The name of the button that opens the menu. @default "More actions" */
+    moreActions?: string;
+    /** The menu's name for screen readers. @default "Actions" */
+    menu?: string;
+}
+export interface PageHeading01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A 20px icon on a tile before the title, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Its state, as a badge beside the title: "Live", "Paused". */
+    status?: BlockStatus;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** The one primary action, on the right: "Deploy". */
+    primaryAction?: BlockButton;
+    /** Everything else you can do, in a menu behind a button before the primary action. */
+    menu?: BlockMenuItem[];
+    /** A row of facts under the heading, split by hairlines: four fill it. */
+    facts?: PageHeading01Fact[];
+    /** The start of the page under the heading, on the same panel. */
+    children?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: PageHeading01Labels;
+}

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

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockButton, BlockMenuItem, BlockStatus } from "../../shared/shared.types.js";
+/** One fact in the row under the heading: what you'd look up first. */
+export interface PageHeading01Fact {
+    /** What it is, as a caption: "Production", "Branch". */
+    label: ReactNode;
+    /** Its value. Spans in it are cut short with an ellipsis when there's no room. */
+    value: ReactNode;
+}
+export interface PageHeading01Labels {
+    /** The name of the button that opens the menu. @default "More actions" */
+    moreActions?: string;
+    /** The menu's name for screen readers. @default "Actions" */
+    menu?: string;
+}
+export interface PageHeading01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A 20px icon on a tile before the title, usually from lucide-react. */
+    icon?: ReactNode;
+    /** Its state, as a badge beside the title: "Live", "Paused". */
+    status?: BlockStatus;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** The one primary action, on the right: "Deploy". */
+    primaryAction?: BlockButton;
+    /** Everything else you can do, in a menu behind a button before the primary action. */
+    menu?: BlockMenuItem[];
+    /** A row of facts under the heading, split by hairlines: four fill it. */
+    facts?: PageHeading01Fact[];
+    /** The start of the page under the heading, on the same panel. */
+    children?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: PageHeading01Labels;
+}

package/dist/page-headings/PageHeading02/PageHeading02.d.cts

@@ -0,0 +1,3 @@
+import type { PageHeading02Props } from "./PageHeading02.types.cjs";
+/** Breadcrumbs, the page's name and its action, then line tabs for its views that run edge to edge across the panel. */
+export declare function PageHeading02({ title, description, breadcrumbs, members, primaryAction, tabs, value, defaultValue, onValueChange, labels, className, ...props }: PageHeading02Props): import("react").JSX.Element;

package/dist/page-headings/PageHeading02/PageHeading02.d.ts

@@ -0,0 +1,3 @@
+import type { PageHeading02Props } from "./PageHeading02.types.js";
+/** Breadcrumbs, the page's name and its action, then line tabs for its views that run edge to edge across the panel. */
+export declare function PageHeading02({ title, description, breadcrumbs, members, primaryAction, tabs, value, defaultValue, onValueChange, labels, className, ...props }: PageHeading02Props): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BreadcrumbItem } from "@openwarelabs/ui";
+import type { BlockButton } from "../../shared/shared.types.cjs";
+/** One of the page's views, as a tab. */
+export interface PageHeading02Tab {
+    /** Unique among the tabs; what `value` and `onValueChange` use. */
+    value: string;
+    /** The tab's words. */
+    label: ReactNode;
+    /** A count in a small pill after the label: how many things the view lists. */
+    count?: ReactNode;
+    /** What the view shows when its tab is chosen. */
+    content: ReactNode;
+}
+/** Someone who works on the page's thing, shown as an avatar. */
+export interface PageHeading02Member {
+    /** Their name: the avatar's initials and its label. */
+    name: string;
+    /** A photo URL. */
+    avatar?: string;
+}
+export interface PageHeading02Labels {
+    /** Names the row of tabs for screen readers. @default the title, when it's text */
+    tabs?: string;
+    /** Names the group of avatars for screen readers. @default "3 people" */
+    members?(count: number): string;
+}
+export interface PageHeading02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "defaultValue"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** Where the page sits, above the title. The last item is the page itself, without a link. */
+    breadcrumbs?: BreadcrumbItem[];
+    /** The people on it, as a group of avatars before the primary action. Four show; the rest are counted. */
+    members?: PageHeading02Member[];
+    /** The one primary action, on the right: "New release". */
+    primaryAction?: BlockButton;
+    /** The page's views, as line tabs that run edge to edge under the heading. */
+    tabs: PageHeading02Tab[];
+    /** The open tab, when you keep it yourself. */
+    value?: string;
+    /** The tab that's open to start with. @default the first */
+    defaultValue?: string;
+    /** Called with a tab's value when it's chosen. */
+    onValueChange?(value: string): void;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: PageHeading02Labels;
+}

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

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BreadcrumbItem } from "@openwarelabs/ui";
+import type { BlockButton } from "../../shared/shared.types.js";
+/** One of the page's views, as a tab. */
+export interface PageHeading02Tab {
+    /** Unique among the tabs; what `value` and `onValueChange` use. */
+    value: string;
+    /** The tab's words. */
+    label: ReactNode;
+    /** A count in a small pill after the label: how many things the view lists. */
+    count?: ReactNode;
+    /** What the view shows when its tab is chosen. */
+    content: ReactNode;
+}
+/** Someone who works on the page's thing, shown as an avatar. */
+export interface PageHeading02Member {
+    /** Their name: the avatar's initials and its label. */
+    name: string;
+    /** A photo URL. */
+    avatar?: string;
+}
+export interface PageHeading02Labels {
+    /** Names the row of tabs for screen readers. @default the title, when it's text */
+    tabs?: string;
+    /** Names the group of avatars for screen readers. @default "3 people" */
+    members?(count: number): string;
+}
+export interface PageHeading02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "defaultValue"> {
+    /** The page's name, as its h1. */
+    title: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** Where the page sits, above the title. The last item is the page itself, without a link. */
+    breadcrumbs?: BreadcrumbItem[];
+    /** The people on it, as a group of avatars before the primary action. Four show; the rest are counted. */
+    members?: PageHeading02Member[];
+    /** The one primary action, on the right: "New release". */
+    primaryAction?: BlockButton;
+    /** The page's views, as line tabs that run edge to edge under the heading. */
+    tabs: PageHeading02Tab[];
+    /** The open tab, when you keep it yourself. */
+    value?: string;
+    /** The tab that's open to start with. @default the first */
+    defaultValue?: string;
+    /** Called with a tab's value when it's chosen. */
+    onValueChange?(value: string): void;
+    /** Words that aren't content (names for screen readers), in English unless you pass your own. */
+    labels?: PageHeading02Labels;
+}

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

@@ -0,0 +1,6 @@
+import type { PageHeading03Props } from "./PageHeading03.types.cjs";
+/**
+ * A page title over a search field and filter menus. The filters in use show as tags above the list they narrow,
+ * with a count, and a list that matches nothing says so and offers to clear them.
+ */
+export declare function PageHeading03({ title, description, primaryAction, facets, items, defaultFilters, onFiltersChange, emptyIcon, labels, className, ...props }: PageHeading03Props): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { PageHeading03Props } from "./PageHeading03.types.js";
+/**
+ * A page title over a search field and filter menus. The filters in use show as tags above the list they narrow,
+ * with a count, and a list that matches nothing says so and offers to clear them.
+ */
+export declare function PageHeading03({ title, description, primaryAction, facets, items, defaultFilters, onFiltersChange, emptyIcon, labels, className, ...props }: PageHeading03Props): import("react").JSX.Element;