@openwarelabs/blocks 0.7.0 → 0.9.0

package/dist/pricing/Pricing01/Pricing01.types.d.cts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.cjs";
+export interface Pricing01Plan {
+    /** The plan's name. */
+    name: ReactNode;
+    /** A line on who it's for: "For teams shipping every day." */
+    summary?: ReactNode;
+    /** The amount, large: "€12". */
+    price: ReactNode;
+    /** What the amount buys, beside it: "a person a month". */
+    unit?: ReactNode;
+    /** Its button: primary for the recommended plan, secondary for the rest. */
+    action: BlockAction;
+    /** A heading over the list: "Everything in Free, plus:". */
+    featuresTitle?: ReactNode;
+    /** What's included, each with a tick. */
+    features: ReactNode[];
+    /** The plan most people pick: raised, with a brand edge and a primary button. */
+    recommended?: boolean;
+    /** A badge beside the name, usually on the recommended plan: "Most teams pick this". */
+    badge?: ReactNode;
+}
+export interface Pricing01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title: "Pricing". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The plans, side by side; three look best. They stack on phones. */
+    plans: Pricing01Plan[];
+    /** A line under the plans for a bigger, priced-by-hand plan, with a link. */
+    enterprise?: {
+        /** In bold: "Enterprise". */
+        title: ReactNode;
+        description: ReactNode;
+        link: BlockLink;
+        /** An 18px icon before it, usually from lucide-react. */
+        icon?: ReactNode;
+    };
+    /** Small print at the end: currency, tax, how to pay. */
+    note?: ReactNode;
+}

package/dist/pricing/Pricing01/Pricing01.types.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.js";
+export interface Pricing01Plan {
+    /** The plan's name. */
+    name: ReactNode;
+    /** A line on who it's for: "For teams shipping every day." */
+    summary?: ReactNode;
+    /** The amount, large: "€12". */
+    price: ReactNode;
+    /** What the amount buys, beside it: "a person a month". */
+    unit?: ReactNode;
+    /** Its button: primary for the recommended plan, secondary for the rest. */
+    action: BlockAction;
+    /** A heading over the list: "Everything in Free, plus:". */
+    featuresTitle?: ReactNode;
+    /** What's included, each with a tick. */
+    features: ReactNode[];
+    /** The plan most people pick: raised, with a brand edge and a primary button. */
+    recommended?: boolean;
+    /** A badge beside the name, usually on the recommended plan: "Most teams pick this". */
+    badge?: ReactNode;
+}
+export interface Pricing01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title: "Pricing". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The plans, side by side; three look best. They stack on phones. */
+    plans: Pricing01Plan[];
+    /** A line under the plans for a bigger, priced-by-hand plan, with a link. */
+    enterprise?: {
+        /** In bold: "Enterprise". */
+        title: ReactNode;
+        description: ReactNode;
+        link: BlockLink;
+        /** An 18px icon before it, usually from lucide-react. */
+        icon?: ReactNode;
+    };
+    /** Small print at the end: currency, tax, how to pay. */
+    note?: ReactNode;
+}

package/dist/pricing/Pricing02/Pricing02.d.cts

@@ -0,0 +1,3 @@
+import type { Pricing02Props } from "./Pricing02.types.cjs";
+/** Plans in one panel with a switch between monthly and yearly prices, which fade in as they change. */
+export declare function Pricing02({ eyebrow, title, description, plans, periodNote, defaultPeriod, onPeriodChange, note, labels, className, ...props }: Pricing02Props): import("react").JSX.Element;

package/dist/pricing/Pricing02/Pricing02.d.ts

@@ -0,0 +1,3 @@
+import type { Pricing02Props } from "./Pricing02.types.js";
+/** Plans in one panel with a switch between monthly and yearly prices, which fade in as they change. */
+export declare function Pricing02({ eyebrow, title, description, plans, periodNote, defaultPeriod, onPeriodChange, note, labels, className, ...props }: Pricing02Props): import("react").JSX.Element;

package/dist/pricing/Pricing02/Pricing02.types.d.cts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export type Pricing02Period = "monthly" | "yearly";
+/** What a plan costs in one period. */
+export interface Pricing02Price {
+    /** The amount, large: "€10". It fades in when it changes. */
+    amount: string;
+    /** Beside it: "a person a month". */
+    unit?: ReactNode;
+    /** A line under it about billing: "€120 billed yearly · save €24". */
+    billing?: ReactNode;
+    /** The amount is words, such as "Custom", so it's set a little smaller. */
+    custom?: boolean;
+}
+export interface Pricing02Plan {
+    /** The plan's name. */
+    name: string;
+    /** A line on who it's for. */
+    summary?: ReactNode;
+    /** The price each period, or one price for both (a free plan, a custom one). */
+    price: Pricing02Price | Record<Pricing02Period, Pricing02Price>;
+    /** Its button: primary for the recommended plan. */
+    action: BlockAction;
+    /** What's included, each with a tick. */
+    features: ReactNode[];
+    /** The plan most people pick, picked out with a brand edge and a primary button. */
+    recommended?: boolean;
+    /** A badge beside the name: "Popular". */
+    badge?: ReactNode;
+}
+export interface Pricing02Labels {
+    /** The switch's name. @default "Billing period" */
+    period?: string;
+    /** @default "Monthly" */
+    monthly?: string;
+    /** @default "Yearly" */
+    yearly?: string;
+    /** Read out when the switch changes. @default "Showing monthly prices." */
+    showingMonthly?: string;
+    /** @default "Showing yearly prices." */
+    showingYearly?: string;
+    /** Each plan's list, for screen readers. @default (name) => `${name} includes` */
+    includes?(name: string): string;
+}
+export interface Pricing02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The plans in one panel, side by side; four fit. */
+    plans: Pricing02Plan[];
+    /** A line under the switch, such as "Pay yearly and get two months free." */
+    periodNote?: ReactNode;
+    /** @default "monthly" */
+    defaultPeriod?: Pricing02Period;
+    /** Runs when the period changes. */
+    onPeriodChange?(period: Pricing02Period): void;
+    /** Small print at the end. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing02Labels;
+}

package/dist/pricing/Pricing02/Pricing02.types.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export type Pricing02Period = "monthly" | "yearly";
+/** What a plan costs in one period. */
+export interface Pricing02Price {
+    /** The amount, large: "€10". It fades in when it changes. */
+    amount: string;
+    /** Beside it: "a person a month". */
+    unit?: ReactNode;
+    /** A line under it about billing: "€120 billed yearly · save €24". */
+    billing?: ReactNode;
+    /** The amount is words, such as "Custom", so it's set a little smaller. */
+    custom?: boolean;
+}
+export interface Pricing02Plan {
+    /** The plan's name. */
+    name: string;
+    /** A line on who it's for. */
+    summary?: ReactNode;
+    /** The price each period, or one price for both (a free plan, a custom one). */
+    price: Pricing02Price | Record<Pricing02Period, Pricing02Price>;
+    /** Its button: primary for the recommended plan. */
+    action: BlockAction;
+    /** What's included, each with a tick. */
+    features: ReactNode[];
+    /** The plan most people pick, picked out with a brand edge and a primary button. */
+    recommended?: boolean;
+    /** A badge beside the name: "Popular". */
+    badge?: ReactNode;
+}
+export interface Pricing02Labels {
+    /** The switch's name. @default "Billing period" */
+    period?: string;
+    /** @default "Monthly" */
+    monthly?: string;
+    /** @default "Yearly" */
+    yearly?: string;
+    /** Read out when the switch changes. @default "Showing monthly prices." */
+    showingMonthly?: string;
+    /** @default "Showing yearly prices." */
+    showingYearly?: string;
+    /** Each plan's list, for screen readers. @default (name) => `${name} includes` */
+    includes?(name: string): string;
+}
+export interface Pricing02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The plans in one panel, side by side; four fit. */
+    plans: Pricing02Plan[];
+    /** A line under the switch, such as "Pay yearly and get two months free." */
+    periodNote?: ReactNode;
+    /** @default "monthly" */
+    defaultPeriod?: Pricing02Period;
+    /** Runs when the period changes. */
+    onPeriodChange?(period: Pricing02Period): void;
+    /** Small print at the end. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing02Labels;
+}

package/dist/pricing/Pricing03/Pricing03.d.cts

@@ -0,0 +1,3 @@
+import type { Pricing03Props } from "./Pricing03.types.cjs";
+/** Every feature down the side and a tick, a dash or a limit for each plan; one plan at a time on phones. */
+export declare function Pricing03({ eyebrow, title, description, plans, groups, pricesNote, defaultPlan, note, labels, className, ...props }: Pricing03Props): import("react").JSX.Element;

package/dist/pricing/Pricing03/Pricing03.d.ts

@@ -0,0 +1,3 @@
+import type { Pricing03Props } from "./Pricing03.types.js";
+/** Every feature down the side and a tick, a dash or a limit for each plan; one plan at a time on phones. */
+export declare function Pricing03({ eyebrow, title, description, plans, groups, pricesNote, defaultPlan, note, labels, className, ...props }: Pricing03Props): import("react").JSX.Element;

package/dist/pricing/Pricing03/Pricing03.types.d.cts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Pricing03Plan {
+    /** Ties the plan to its values in each row. */
+    id: string;
+    /** The plan's name. */
+    name: string;
+    /** The amount, in bold: "€12", or "Custom". */
+    price: ReactNode;
+    /** After it: "a person a month". */
+    unit?: ReactNode;
+    /** Its small button: primary for the recommended plan. */
+    action: BlockAction;
+    /** The plan most people pick: its button is primary. */
+    recommended?: boolean;
+    /** A badge beside the name: "Popular". */
+    badge?: ReactNode;
+}
+/** true is a tick, false a dash, anything else is shown as it is (a limit, such as "1,000 a person"). */
+export type Pricing03Value = boolean | ReactNode;
+export interface Pricing03Row {
+    /** The feature's name, down the side. */
+    feature: ReactNode;
+    /** A line under the feature, in small type. */
+    note?: ReactNode;
+    /** Each plan's value, by plan id. */
+    values: Record<string, Pricing03Value>;
+}
+/** A table of rows under a heading: "Usage", "Security". */
+export interface Pricing03Group {
+    /** The group's heading, above its rows. */
+    title: string;
+    /** The features in the group. */
+    rows: Pricing03Row[];
+}
+export interface Pricing03Labels {
+    /** The phone plan picker's name. @default "Plan to compare" */
+    picker?: string;
+    /** Read out for a tick. @default "Included" */
+    included?: string;
+    /** Read out for a dash. @default "Not included" */
+    notIncluded?: string;
+    /** Each table's caption, for screen readers. @default (title) => `${title}, by plan` */
+    caption?(title: string): string;
+}
+export interface Pricing03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The plans, as columns. On phones one shows at a time, picked above the table. */
+    plans: Pricing03Plan[];
+    /** The features, in groups, as rows. */
+    groups: Pricing03Group[];
+    /** A small line beside the plans' prices: "Prices a month, in euro, before VAT." */
+    pricesNote?: ReactNode;
+    /** The plan shown first on phones. @default the recommended plan, or the first */
+    defaultPlan?: string;
+    /** Small print at the end. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing03Labels;
+}

package/dist/pricing/Pricing03/Pricing03.types.d.ts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Pricing03Plan {
+    /** Ties the plan to its values in each row. */
+    id: string;
+    /** The plan's name. */
+    name: string;
+    /** The amount, in bold: "€12", or "Custom". */
+    price: ReactNode;
+    /** After it: "a person a month". */
+    unit?: ReactNode;
+    /** Its small button: primary for the recommended plan. */
+    action: BlockAction;
+    /** The plan most people pick: its button is primary. */
+    recommended?: boolean;
+    /** A badge beside the name: "Popular". */
+    badge?: ReactNode;
+}
+/** true is a tick, false a dash, anything else is shown as it is (a limit, such as "1,000 a person"). */
+export type Pricing03Value = boolean | ReactNode;
+export interface Pricing03Row {
+    /** The feature's name, down the side. */
+    feature: ReactNode;
+    /** A line under the feature, in small type. */
+    note?: ReactNode;
+    /** Each plan's value, by plan id. */
+    values: Record<string, Pricing03Value>;
+}
+/** A table of rows under a heading: "Usage", "Security". */
+export interface Pricing03Group {
+    /** The group's heading, above its rows. */
+    title: string;
+    /** The features in the group. */
+    rows: Pricing03Row[];
+}
+export interface Pricing03Labels {
+    /** The phone plan picker's name. @default "Plan to compare" */
+    picker?: string;
+    /** Read out for a tick. @default "Included" */
+    included?: string;
+    /** Read out for a dash. @default "Not included" */
+    notIncluded?: string;
+    /** Each table's caption, for screen readers. @default (title) => `${title}, by plan` */
+    caption?(title: string): string;
+}
+export interface Pricing03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The plans, as columns. On phones one shows at a time, picked above the table. */
+    plans: Pricing03Plan[];
+    /** The features, in groups, as rows. */
+    groups: Pricing03Group[];
+    /** A small line beside the plans' prices: "Prices a month, in euro, before VAT." */
+    pricesNote?: ReactNode;
+    /** The plan shown first on phones. @default the recommended plan, or the first */
+    defaultPlan?: string;
+    /** Small print at the end. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing03Labels;
+}

package/dist/pricing/Pricing04/Pricing04.d.cts

@@ -0,0 +1,3 @@
+import type { Pricing04Props } from "./Pricing04.types.cjs";
+/** One price with what's included, for a simple product: a wide card with the features on the left and the offer on the right. */
+export declare function Pricing04({ eyebrow, title, description, product, offer, promises, className, ...props }: Pricing04Props): import("react").JSX.Element;

package/dist/pricing/Pricing04/Pricing04.d.ts

@@ -0,0 +1,3 @@
+import type { Pricing04Props } from "./Pricing04.types.js";
+/** One price with what's included, for a simple product: a wide card with the features on the left and the offer on the right. */
+export declare function Pricing04({ eyebrow, title, description, product, offer, promises, className, ...props }: Pricing04Props): import("react").JSX.Element;

package/dist/pricing/Pricing04/Pricing04.types.d.cts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Pricing04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The left of the card: what you get. */
+    product: {
+        name: ReactNode;
+        description?: ReactNode;
+        /** A heading over the list: "What's included". */
+        featuresTitle?: ReactNode;
+        /** In two columns, each with a tick. */
+        features: ReactNode[];
+    };
+    /** The right of the card: what it costs, and the button. */
+    offer: {
+        /** Above the price: "Pay monthly, per person". */
+        label?: ReactNode;
+        /** The amount, large: "€12". */
+        price: ReactNode;
+        /** Small, beside it: "EUR". */
+        currency?: ReactNode;
+        /** Under it: "a person a month, before VAT". */
+        unit?: ReactNode;
+        action: BlockAction;
+        /** Small print under the button. */
+        note?: ReactNode;
+    };
+    /** Short reassurances in a row under the card, each with an icon: "Cancel any time". */
+    promises?: Array<{
+        text: ReactNode;
+        icon?: ReactNode;
+    }>;
+}

package/dist/pricing/Pricing04/Pricing04.types.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Pricing04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The left of the card: what you get. */
+    product: {
+        name: ReactNode;
+        description?: ReactNode;
+        /** A heading over the list: "What's included". */
+        featuresTitle?: ReactNode;
+        /** In two columns, each with a tick. */
+        features: ReactNode[];
+    };
+    /** The right of the card: what it costs, and the button. */
+    offer: {
+        /** Above the price: "Pay monthly, per person". */
+        label?: ReactNode;
+        /** The amount, large: "€12". */
+        price: ReactNode;
+        /** Small, beside it: "EUR". */
+        currency?: ReactNode;
+        /** Under it: "a person a month, before VAT". */
+        unit?: ReactNode;
+        action: BlockAction;
+        /** Small print under the button. */
+        note?: ReactNode;
+    };
+    /** Short reassurances in a row under the card, each with an icon: "Cancel any time". */
+    promises?: Array<{
+        text: ReactNode;
+        icon?: ReactNode;
+    }>;
+}

package/dist/pricing/Pricing05/Pricing05.d.cts

@@ -0,0 +1,3 @@
+import type { Pricing05Props } from "./Pricing05.types.cjs";
+/** A price per unit in bands, with a slider to estimate the month and the cost of each band beside it. */
+export declare function Pricing05({ eyebrow, title, description, tiers, aside, estimate: words, max, step, defaultValue, marks, currency, locale, action, note, labels, className, ...props }: Pricing05Props): import("react").JSX.Element;

package/dist/pricing/Pricing05/Pricing05.d.ts

@@ -0,0 +1,3 @@
+import type { Pricing05Props } from "./Pricing05.types.js";
+/** A price per unit in bands, with a slider to estimate the month and the cost of each band beside it. */
+export declare function Pricing05({ eyebrow, title, description, tiers, aside, estimate: words, max, step, defaultValue, marks, currency, locale, action, note, labels, className, ...props }: Pricing05Props): import("react").JSX.Element;

package/dist/pricing/Pricing05/Pricing05.types.d.cts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+/** A price band. Each unit is charged at the band it falls in, like income tax. */
+export interface Pricing05Tier {
+    /** Where the band starts: 0, 500, 10000. */
+    from: number;
+    /** Where it ends; Infinity for the last. */
+    to: number;
+    /** The price of one unit in it; 0 for free. */
+    price: number;
+}
+export interface Pricing05Labels {
+    /** One unit: "run". @default "unit" */
+    unit?: string;
+    /** More than one: "runs". @default "units" */
+    units?: string;
+    /** After the big number: "runs a month". @default `${units} a month` */
+    perMonth?: string;
+    /** A free band's price. @default "Free" */
+    free?: string;
+    /** The list of bands, for screen readers. @default `Price per ${unit}` */
+    tiers?: string;
+    /** The slider's name. @default `${units} a month`, capitalised */
+    slider?: string;
+}
+export interface Pricing05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The price bands, from 0 up, the last ending at Infinity. */
+    tiers: Pricing05Tier[];
+    /** A paragraph under the bands: what a unit is. */
+    aside?: ReactNode;
+    /** The estimate card's words. */
+    estimate: {
+        title: ReactNode;
+        description?: ReactNode;
+        /** Over the total: "Estimated month". */
+        totalLabel: ReactNode;
+        /** Small, under it: "Before VAT, billed on the 1st". */
+        totalNote?: ReactNode;
+    };
+    /** The slider's end. */
+    max: number;
+    /** @default max / 200 */
+    step?: number;
+    /** Where the slider starts. */
+    defaultValue: number;
+    /** Values marked under the slider. @default 0, a quarter, half, three quarters and max */
+    marks?: number[];
+    /** The currency the prices are in. @default "EUR" */
+    currency?: string;
+    /** How numbers and money are written. @default the browser's language */
+    locale?: string;
+    /** The button under the total. */
+    action: BlockAction;
+    /** Small print under the button. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing05Labels;
+}

package/dist/pricing/Pricing05/Pricing05.types.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+/** A price band. Each unit is charged at the band it falls in, like income tax. */
+export interface Pricing05Tier {
+    /** Where the band starts: 0, 500, 10000. */
+    from: number;
+    /** Where it ends; Infinity for the last. */
+    to: number;
+    /** The price of one unit in it; 0 for free. */
+    price: number;
+}
+export interface Pricing05Labels {
+    /** One unit: "run". @default "unit" */
+    unit?: string;
+    /** More than one: "runs". @default "units" */
+    units?: string;
+    /** After the big number: "runs a month". @default `${units} a month` */
+    perMonth?: string;
+    /** A free band's price. @default "Free" */
+    free?: string;
+    /** The list of bands, for screen readers. @default `Price per ${unit}` */
+    tiers?: string;
+    /** The slider's name. @default `${units} a month`, capitalised */
+    slider?: string;
+}
+export interface Pricing05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line 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;
+    /** The price bands, from 0 up, the last ending at Infinity. */
+    tiers: Pricing05Tier[];
+    /** A paragraph under the bands: what a unit is. */
+    aside?: ReactNode;
+    /** The estimate card's words. */
+    estimate: {
+        title: ReactNode;
+        description?: ReactNode;
+        /** Over the total: "Estimated month". */
+        totalLabel: ReactNode;
+        /** Small, under it: "Before VAT, billed on the 1st". */
+        totalNote?: ReactNode;
+    };
+    /** The slider's end. */
+    max: number;
+    /** @default max / 200 */
+    step?: number;
+    /** Where the slider starts. */
+    defaultValue: number;
+    /** Values marked under the slider. @default 0, a quarter, half, three quarters and max */
+    marks?: number[];
+    /** The currency the prices are in. @default "EUR" */
+    currency?: string;
+    /** How numbers and money are written. @default the browser's language */
+    locale?: string;
+    /** The button under the total. */
+    action: BlockAction;
+    /** Small print under the button. */
+    note?: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Pricing05Labels;
+}

package/dist/shared/BlockActions.d.cts

@@ -1,5 +1,5 @@
 import type { BlockActionButtonProps, BlockActionsProps } from "./shared.types.cjs";
 /** One action as a large pill: a link styled as a button when it has an href, a button otherwise. */
-export declare function BlockActionButton({ action, variant }: BlockActionButtonProps): import("react").JSX.Element;
+export declare function BlockActionButton({ action, variant, size, className, onAfterClick, fullWidth }: BlockActionButtonProps): import("react").JSX.Element;
 /** The primary action and an optional secondary one, side by side. */
 export declare function BlockActions({ primary, secondary, className }: BlockActionsProps): import("react").JSX.Element;

package/dist/shared/BlockActions.d.ts

@@ -1,5 +1,5 @@
 import type { BlockActionButtonProps, BlockActionsProps } from "./shared.types.js";
 /** One action as a large pill: a link styled as a button when it has an href, a button otherwise. */
-export declare function BlockActionButton({ action, variant }: BlockActionButtonProps): import("react").JSX.Element;
+export declare function BlockActionButton({ action, variant, size, className, onAfterClick, fullWidth }: BlockActionButtonProps): import("react").JSX.Element;
 /** The primary action and an optional secondary one, side by side. */
 export declare function BlockActions({ primary, secondary, className }: BlockActionsProps): import("react").JSX.Element;

package/dist/shared/BlockBrandLink.d.cts

@@ -0,0 +1,3 @@
+import type { BlockBrandLinkProps } from "./shared.types.cjs";
+/** The product's logo and name, as a link home. */
+export declare const BlockBrandLink: import("react").ForwardRefExoticComponent<BlockBrandLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/shared/BlockBrandLink.d.ts

@@ -0,0 +1,3 @@
+import type { BlockBrandLinkProps } from "./shared.types.js";
+/** The product's logo and name, as a link home. */
+export declare const BlockBrandLink: import("react").ForwardRefExoticComponent<BlockBrandLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/shared/FooterColumns.d.cts

@@ -0,0 +1,3 @@
+import type { FooterColumnsProps } from "./shared.types.cjs";
+/** A footer's columns of links, each a <nav> named by its heading. */
+export declare function FooterColumns({ columns, headingClassName, listClassName, badgeClassName }: FooterColumnsProps): import("react").JSX.Element;

package/dist/shared/FooterColumns.d.ts

@@ -0,0 +1,3 @@
+import type { FooterColumnsProps } from "./shared.types.js";
+/** A footer's columns of links, each a <nav> named by its heading. */
+export declare function FooterColumns({ columns, headingClassName, listClassName, badgeClassName }: FooterColumnsProps): import("react").JSX.Element;