@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/blocks/pricing-01/pricing.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { Check } from 'lucide-react';
-import { Badge } from '../../components/ui/badge';
-import { Button } from '../../components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card';
-import { Section, SectionHeading } from '../../components/ui/section';
+import { Badge } from '../../components/ui/badge.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
 /**
  * A three-up plan comparison.
  *
@@ -13,8 +14,24 @@ import { Section, SectionHeading } from '../../components/ui/section';
  * plan". A shared library has no plans to sell, so those strings described a
  * business that does not exist here, and every consumer who installed the block
  * inherited them.
+ *
+ * The section heading is aligned left, for the reason `FeatureGrid01` now records
+ * in full and `test/section-heading-align.test.tsx` holds: three cards sit under
+ * it, and a centred title above a left-aligned grid reads as two unrelated pieces.
+ * `Pricing01` and `FeatureGrid01` were the only two Blocks that left the heading
+ * centred over content, and neither had a stated reason for it, so both were
+ * taking the default rather than making a decision.
+ *
+ * **The card's foot is a link or the caller's own control, and never a button of
+ * this Block's.** `Plan` used to carry a required `cta` string and the Block
+ * rendered it as a `Button`, so every pricing table in every consumer's product
+ * shipped a focusable control, announced as a button, that activated to nothing,
+ * on the card a reader was about to choose from. See `PricingAction`.
  */
 export function Pricing01({ eyebrow, title, description, plans, headingLevel = 'h2', }) {
-    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { className: "grid gap-6 lg:grid-cols-3", children: plans.map((plan) => (_jsxs(Card, { className: plan.featured ? 'border-primary shadow-md' : undefined, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: plan.name }), plan.featured && plan.badge ? _jsx(Badge, { children: plan.badge }) : null] }), plan.body ? _jsx(CardDescription, { children: plan.body }) : null, _jsxs("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: [plan.price, plan.period ? (_jsx("span", { className: "text-muted-foreground text-sm font-normal", children: plan.period })) : null] })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: plan.features.map((feature, index) => (_jsxs("p", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "text-success mt-0.5 size-4 shrink-0" }), feature] }, index))) }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { className: "w-full", variant: plan.featured ? 'default' : 'outline', children: plan.cta }) })] }, plan.name))) })] }));
+    // A plan name is a heading one step below the section that introduces the set,
+    // so three plans under one `h2` are three `h3`s and not three competing sections.
+    const Title = childLevel(headingLevel);
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { className: "grid gap-6 lg:grid-cols-3", children: plans.map((plan) => (_jsxs(Card, { className: plan.featured ? 'border-primary shadow-md' : undefined, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: _jsx(Title, { children: plan.name }) }), plan.featured && plan.badge ? _jsx(Badge, { children: plan.badge }) : null] }), plan.body ? _jsx(CardDescription, { children: plan.body }) : null, _jsxs("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: [plan.price, plan.period ? (_jsx("span", { className: "text-muted-foreground text-sm font-normal", children: plan.period })) : null] })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: plan.features.map((feature, index) => (_jsxs("p", { className: "flex items-start gap-2 text-sm", children: [_jsx(Check, { className: "text-success mt-0.5 size-4 shrink-0" }), feature] }, index))) }), _jsx(CardFooter, { className: "mt-auto", children: 'slot' in plan.action ? (_jsx(Fragment, { children: plan.action.slot })) : (_jsx(CtaLink, { href: plan.action.href, newTab: plan.action.newTab, className: "w-full", variant: plan.featured ? 'default' : 'outline', children: plan.action.label })) })] }, plan.id))) })] }));
 }
 export default Pricing01;

package/dist/blocks/pricing-compare-01/index.d.ts

@@ -0,0 +1,3 @@
+export { PricingCompare01, default } from './pricing-compare.js';
+export type { PricingCompare01Labels, PricingCompare01Props, PricingCompareAction, PricingCompareFeature, PricingCompareGroup, PricingComparePlan, } from './pricing-compare.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/pricing-compare-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/pricing-compare-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAK7D,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,mBAAmB,CAAA"}

package/dist/blocks/pricing-compare-01/index.js

@@ -0,0 +1 @@
+export { PricingCompare01, default } from './pricing-compare.js';

package/dist/blocks/pricing-compare-01/pricing-compare.d.ts

@@ -0,0 +1,277 @@
+import { type ReactNode } from 'react';
+import { type PriceProps } from '../../components/ui/price.js';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * The one control a plan's column offers.
+ *
+ * A link, with a required destination, for the reason `Cta01Action` gives in full:
+ * a control with no handler navigates nothing, and a call to action that navigates
+ * nothing is a button wearing a link's clothes. A consumer whose control is not a
+ * link at all, a client router's `Link` or a form that posts, uses the Block's
+ * `actions` function instead, and the two are not unioned here because the Block
+ * resolves them at the same call site and a union at the Block level would make
+ * every caller read both arms to find out which one is live.
+ */
+export type PricingCompareAction = {
+    /** The control's own words. The caller's, because a plan's action is its pitch. */
+    label: string;
+    /** Where the control goes. Rendered as a native anchor's `href`. */
+    href: string;
+    /**
+     * Opens the destination in a new browsing context, which defaults the link
+     * relationship to `noopener noreferrer`. Declared rather than inferred, for the
+     * reason `Cta01Action.newTab` states.
+     */
+    newTab?: boolean;
+    /**
+     * Which weight this control draws at.
+     *
+     * All three are legal on this Block, and the reason is the surface. `Cta01`
+     * draws a filled `bg-primary` band and a `default` control on it is the band's
+     * colour against the band's colour; this Block draws a table on the page ground,
+     * so `default` is the page's own emphasis and is what a matrix wants for the
+     * plan a reader is being walked towards. The measurement behind the rule is in
+     * `Cta01Action.variant` and in `packages/ui/scripts/check-variant-ink.mjs`.
+     */
+    variant?: 'default' | 'secondary' | 'outline';
+};
+/**
+ * One plan: the column heading, the price, and whatever the reader needs beside
+ * them.
+ *
+ * `id` is the identity, and it is separate from `name` for the reason every id in
+ * this package is separate from its display text: the id is what `highlight` and
+ * `actions` match on, and a name is display content that a caller may rewrite in
+ * one release and not the other.
+ */
+export type PricingComparePlan = {
+    /** Stable identity. Matched by `highlight` and passed to `actions`. */
+    id: string;
+    /** The plan's name, as the caller writes it. */
+    name: string;
+    /**
+     * The amount, and everything about how it is formatted.
+     *
+     * A `PriceProps` rather than a string, so the currency, the locale, the
+     * precision and the period are all the caller's and `Intl` does the rest. See
+     * `Price` for why a Block composes it rather than printing a symbol.
+     */
+    price: PriceProps;
+    /**
+     * The line under the price: the plan's own qualification, or a slot for a
+     * control such as a `Badge` the caller composes.
+     *
+     * A slot rather than a `badge?: string`, and the reason is the defect this
+     * Block's own copy law was written against. `pricing-01` took a `badge?: string`
+     * and then rendered the word "Popular" for a featured plan that passed none, so
+   * *every* consumer who highlighted a plan inherited a claim about that plan. Here
+     * a plan with no note renders nothing, and a caller who wants a badge writes
+     * their own word and their own component into this slot.
+     */
+    note?: ReactNode;
+    /** The plan's action, when it is a link. See `PricingCompareAction`. */
+    action?: PricingCompareAction;
+};
+/**
+ * One row: a feature and what each plan does with it.
+ *
+ * `values` is positional and its length must equal the number of plans. There is
+ * no id per value and there is no second object to merge, because a matrix cell
+ * is the intersection of two things that already exist and a keyed object would
+ * be a third place for a caller to get the two out of step.
+ */
+export type PricingCompareFeature = {
+    /** Stable identity, used for the row's key. */
+    id: string;
+    /**
+     * The feature's name, as the caller writes it, and the row's header.
+     *
+     * A short noun phrase. A feature whose name wraps to two lines is a row whose
+     * plan cells are vertically centred against two lines of prose, and a matrix
+     * read down a column loses its alignment on the longest row.
+     */
+    label: string;
+    /**
+     * One answer per plan, in the order the plans were given.
+     *
+     * The union is the whole design of the cell. A `boolean` renders Prism's own
+     * two marks, a `Check` and a muted dash, each beside the caller's word from
+     * `labels`; anything else is rendered exactly as the caller wrote it, because a
+     * value that is not a yes and not a no is a number, a limit or a phrase and
+     * Prism has no way to know which, so it prints none of them.
+     *
+     * An array whose length does not match `plans` is a thrown diagnostic rather
+     * than a short row. See the JSDoc on the Block.
+     */
+    values: readonly (boolean | ReactNode)[];
+    /**
+     * The qualification under the feature's name: what the answer means, or what it
+     * excludes.
+     *
+     * A string rather than a node because this is the one cell in the row that is
+     * always one sentence, and a caller who needs a link in it needs the cell
+     * below, not a sentence with a hole in it.
+     */
+    note?: string;
+};
+/**
+ * A band of features under one name.
+ *
+ * Groups are the caller's because grouping is a claim about how the features
+ * relate, which is a fact about the product and not about the matrix. Most
+ * matrices are one group, and that is a legitimate answer: pass one group with an
+ * empty `title` and it is the only row of headers the table carries.
+ */
+export type PricingCompareGroup = {
+    /** The group's name, as the caller writes it. */
+    title: string;
+    /** The features in this group, in the order a reader should meet them. */
+    features: readonly PricingCompareFeature[];
+};
+/**
+ * The two words a matrix needs, and it needs both.
+ *
+ * Required, and the argument for requiring the negative one is the whole reason
+ * this object exists. A `true` cell carries a word, so a screen reader announces
+ * an answer. A `false` cell that carried only a muted dash would announce nothing,
+ * and a cell that announces nothing in a column of forty cells that do reads as a
+ * rendering fault rather than as an answer, with nothing in the document to tell
+ * the two apart. So the dash is a shape and the word is the answer, and a
+ * consumer whose product has no word for "not included" has to write one, which
+ * is the right kind of forcing: it turns a silent omission into a decision the
+ * consumer made.
+ */
+export type PricingCompare01Labels = {
+    /** Announced beside the check in an included cell. */
+    included: string;
+    /** Announced beside the dash in a cell that says the feature is not included. */
+    excluded: string;
+};
+/**
+ * The props a PricingCompare01 takes.
+ *
+ * Every string is a prop and the Block ships none: no plan, no price, no feature
+ * name, no feature label, no cell value, no badge word and not one of the two
+ * words a cell announces. A matrix is the densest arrangement of claims a product
+ * makes about itself, and it is the arrangement where one hardcoded word is
+ * hardest to notice, because the reader is looking at forty cells and reading none
+ * of them.
+ */
+export type PricingCompare01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: ReactNode;
+    /** The section title. Omit it for a matrix composed under its own heading. */
+    title?: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /** The plans, in the order a reader should meet them. Order is the caller's. */
+    plans: readonly PricingComparePlan[];
+    /**
+     * The features, grouped. Group order is the caller's, and so is the order
+     * inside each group, for the same reason.
+     */
+    groups: readonly PricingCompareGroup[];
+    /**
+     * The words the two cell answers announce. See `PricingCompare01Labels`.
+     */
+    labels: PricingCompare01Labels;
+    /**
+     * The plan `id` to point at, or nothing for a matrix that points at none.
+     *
+     * A named id rather than a `featured?: boolean` on the plan, because a plan may
+     * only be named by its own `id` and a boolean would let two plans claim it. The
+     * Block reads it as a fill on that plan's column and nothing else: no badge, no
+     * ordering, no change to any answer. The judgment about which plan a reader
+     * should be walked towards is the consumer's, and the design system's share of
+     * it is a tint.
+     */
+    highlight?: string;
+    /**
+     * The control for a plan that passed no `action`, called with the plan's `id`.
+     *
+     * This is the slot arm, and it exists because the link arm cannot be every
+     * control: a consumer whose pricing table lives behind a client router, or whose
+     * plan button opens a checkout sheet, has a control with no `href` at all. The
+     * per-plan `action` wins when both are given, so a caller can mix a real link on
+     * one plan with a router link on another.
+     */
+    actions?: (id: string) => ReactNode;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /** Layout classes for the matrix. Layout only; every visual property is Prism's. */
+    className?: string;
+};
+/**
+ * A feature-by-plan matrix: the plans across the top, the features down the side,
+ * and one cell per intersection saying what the plan does with the feature.
+ *
+ * **It is a real `<table>`, and the rejected alternative is a grid of `div`s that
+ * looks the same.** A comparison matrix is the one table on a marketing page, and
+ * a reader using a screen reader navigates it by header: they ask the table for a
+ * column and hear the plan's name, then move down the cells and hear each answer
+ * against that name, and they ask for a row and hear the feature and then its
+ * answers. A grid of `div`s has no header cells to ask for, so the same reader
+ * receives forty cells of unlabelled text and has to hold the column in their head
+ * while reading down it, which is the single task a matrix exists to remove. The
+ * cost of the table is the one every real table carries: `Table` wraps the whole
+ * thing in a horizontally scrollable container, because four plans do not fit a
+ * phone, and a matrix that reflowed into a stack would no longer be a matrix. The
+ * scroll is the price and it is worth naming rather than hiding, because the
+ * alternative is not a narrower matrix, it is a div grid.
+ *
+ * **A `true` is a `Check` beside the caller's own word, and never a bare icon.**
+ * This is the whole of `check-block-copy.mjs` in one cell. An icon that is not
+ * labelled is invisible to a screen reader, and a "yes" that is only a tick is a
+ * claim the reader has to infer from a shape, which is inference dressed as
+ * information. So the mark is `aria-hidden` and the caller's word sits beside it in
+ * a visually hidden span: the reader hears the answer, a reader who cannot separate
+ * `success` from `muted` gets the same answer, and the shape is left free to be
+ * the shape. The same rule runs the other way, which is why a `false` cell is a
+ * muted dash plus the caller's negative word rather than a dash marked
+ * `aria-hidden` on its own: a cell that announces nothing beside forty that
+ * announce something is a rendering fault, and nothing in the document tells a
+ * reader which it is.
+ *
+ * **A `values` array that does not match `plans` throws.** This is the defect
+ * this Block is most able to produce and least able to notice. Four plans and three
+ * values renders perfectly: the markup is valid, the table has a price header over
+ * it, the styling is correct, and a column is simply not there. A silent
+ * truncation in a matrix is a claim about a plan nobody made, and a reader cannot
+ * tell it from a rendering bug, so the Block refuses the props instead of
+ * rendering them. The cost is a render that throws in development rather than a
+ * page that lies in production, and the alternative was considered and refused: a
+ * pad of empty cells would have turned a caller's mistake into a document in which
+ * four plans have no answer to a feature.
+ *
+ * **The group is a row group, and a group's name is a table header rather than a
+ * heading.** Each group is its own `<tbody>` and its name is a `th` with
+ * `scope="rowgroup"`, which is what HTML offers for a header that names the rows
+ * below it, so a screen reader announces the group when the reader enters it
+ * rather than repeating it over every column. It is deliberately not in the page
+ * outline: a group name is a band of rows and not a section of the page, and seven
+ * group names in the outline would be seven entries for a reader navigating by
+ * heading who expected sections.
+ *
+ * **A plan name is a heading, at `childLevel(headingLevel)`.** The plan is the
+ * column's title, a reader who navigates by heading wants to reach the plan, and a
+ * matrix embedded one level deeper than it was written for must carry its plan
+ * names with it, which is what the function is for.
+ *
+ * **No plan name, price, feature label or badge word is the Block's.** The copy
+ * law is not new here, but this is where it is hardest, and `pricing-01` shipped
+ * the exact defect it exists for: a featured plan with no badge of its own
+ * rendered the word "Popular", so every consumer who highlighted a plan inherited
+ * a claim about a plan the consumer may not have had. A plan here carries a `note`
+ * slot, a caller who wants a badge composes their own word and their own
+ * component into it, and a highlighted plan with no note renders nothing at all,
+ * which is the honest answer for a plan whose only distinction is that the caller
+ * pointed at it. `highlight` tints that plan's column and does nothing else: it
+ * adds no badge, moves no plan, and changes no answer, because the judgment about
+ * which plan a reader should be walked towards is the consumer's.
+ *
+ * It is a server Component: no hook, no state, no client code and no router. The
+ * `Check` and the `Minus` are drawn as vectors, so a matrix costs no JavaScript.
+ */
+export declare function PricingCompare01({ eyebrow, title, description, plans, groups, labels, highlight, actions, headingLevel, className, }: PricingCompare01Props): import("react").JSX.Element;
+export default PricingCompare01;
+//# sourceMappingURL=pricing-compare.d.ts.map

package/dist/blocks/pricing-compare-01/pricing-compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pricing-compare.d.ts","sourceRoot":"","sources":["../../../src/blocks/pricing-compare-01/pricing-compare.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG7C,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAWpG;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAA;IACV,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,KAAK,EAAE,UAAU,CAAA;IACjB;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,wEAAwE;IACxE,MAAM,CAAC,EAAE,oBAAoB,CAAA;CAC9B,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,EAAE,CAAA;IACxC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,qBAAqB,EAAE,CAAA;CAC3C,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAA;IAChB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,gFAAgF;IAChF,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACpC;;;OAGG;IACH,MAAM,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACtC;;OAEG;IACH,MAAM,EAAE,sBAAsB,CAAA;IAC9B;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,SAAS,CAAA;IACnC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,OAAO,EACP,YAAmB,EACnB,SAAS,GACV,EAAE,qBAAqB,+BA+JvB;AAED,eAAe,gBAAgB,CAAA"}

package/dist/blocks/pricing-compare-01/pricing-compare.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Minus } from 'lucide-react';
+import { useId } from 'react';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Price } from '../../components/ui/price.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../../components/ui/table.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * One cell: the mark and the word, or the caller's own value as the caller wrote
+ * it.
+ *
+ * A component in the module and not a second Item, because it has no public
+ * surface and nothing to document for a consumer. It exists so the two boolean
+ * arms are written once, and they are written once because the span wrapping the
+ * mark and the visually hidden word is the part that is easy to get subtly wrong
+ * three times in a row.
+ */
+function MatrixCell({ value, labels, }) {
+    if (typeof value === 'boolean') {
+        return value ? (_jsxs("span", { "data-slot": "pricing-compare-answer", className: "text-success inline-flex items-center gap-1.5", children: [_jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "sr-only", children: labels.included })] })) : (_jsxs("span", { "data-slot": "pricing-compare-answer", className: "text-muted-foreground inline-flex items-center gap-1.5", children: [_jsx(Minus, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "sr-only", children: labels.excluded })] }));
+    }
+    return _jsx("span", { "data-slot": "pricing-compare-value", children: value });
+}
+/**
+ * A feature-by-plan matrix: the plans across the top, the features down the side,
+ * and one cell per intersection saying what the plan does with the feature.
+ *
+ * **It is a real `<table>`, and the rejected alternative is a grid of `div`s that
+ * looks the same.** A comparison matrix is the one table on a marketing page, and
+ * a reader using a screen reader navigates it by header: they ask the table for a
+ * column and hear the plan's name, then move down the cells and hear each answer
+ * against that name, and they ask for a row and hear the feature and then its
+ * answers. A grid of `div`s has no header cells to ask for, so the same reader
+ * receives forty cells of unlabelled text and has to hold the column in their head
+ * while reading down it, which is the single task a matrix exists to remove. The
+ * cost of the table is the one every real table carries: `Table` wraps the whole
+ * thing in a horizontally scrollable container, because four plans do not fit a
+ * phone, and a matrix that reflowed into a stack would no longer be a matrix. The
+ * scroll is the price and it is worth naming rather than hiding, because the
+ * alternative is not a narrower matrix, it is a div grid.
+ *
+ * **A `true` is a `Check` beside the caller's own word, and never a bare icon.**
+ * This is the whole of `check-block-copy.mjs` in one cell. An icon that is not
+ * labelled is invisible to a screen reader, and a "yes" that is only a tick is a
+ * claim the reader has to infer from a shape, which is inference dressed as
+ * information. So the mark is `aria-hidden` and the caller's word sits beside it in
+ * a visually hidden span: the reader hears the answer, a reader who cannot separate
+ * `success` from `muted` gets the same answer, and the shape is left free to be
+ * the shape. The same rule runs the other way, which is why a `false` cell is a
+ * muted dash plus the caller's negative word rather than a dash marked
+ * `aria-hidden` on its own: a cell that announces nothing beside forty that
+ * announce something is a rendering fault, and nothing in the document tells a
+ * reader which it is.
+ *
+ * **A `values` array that does not match `plans` throws.** This is the defect
+ * this Block is most able to produce and least able to notice. Four plans and three
+ * values renders perfectly: the markup is valid, the table has a price header over
+ * it, the styling is correct, and a column is simply not there. A silent
+ * truncation in a matrix is a claim about a plan nobody made, and a reader cannot
+ * tell it from a rendering bug, so the Block refuses the props instead of
+ * rendering them. The cost is a render that throws in development rather than a
+ * page that lies in production, and the alternative was considered and refused: a
+ * pad of empty cells would have turned a caller's mistake into a document in which
+ * four plans have no answer to a feature.
+ *
+ * **The group is a row group, and a group's name is a table header rather than a
+ * heading.** Each group is its own `<tbody>` and its name is a `th` with
+ * `scope="rowgroup"`, which is what HTML offers for a header that names the rows
+ * below it, so a screen reader announces the group when the reader enters it
+ * rather than repeating it over every column. It is deliberately not in the page
+ * outline: a group name is a band of rows and not a section of the page, and seven
+ * group names in the outline would be seven entries for a reader navigating by
+ * heading who expected sections.
+ *
+ * **A plan name is a heading, at `childLevel(headingLevel)`.** The plan is the
+ * column's title, a reader who navigates by heading wants to reach the plan, and a
+ * matrix embedded one level deeper than it was written for must carry its plan
+ * names with it, which is what the function is for.
+ *
+ * **No plan name, price, feature label or badge word is the Block's.** The copy
+ * law is not new here, but this is where it is hardest, and `pricing-01` shipped
+ * the exact defect it exists for: a featured plan with no badge of its own
+ * rendered the word "Popular", so every consumer who highlighted a plan inherited
+ * a claim about a plan the consumer may not have had. A plan here carries a `note`
+ * slot, a caller who wants a badge composes their own word and their own
+ * component into it, and a highlighted plan with no note renders nothing at all,
+ * which is the honest answer for a plan whose only distinction is that the caller
+ * pointed at it. `highlight` tints that plan's column and does nothing else: it
+ * adds no badge, moves no plan, and changes no answer, because the judgment about
+ * which plan a reader should be walked towards is the consumer's.
+ *
+ * It is a server Component: no hook, no state, no client code and no router. The
+ * `Check` and the `Minus` are drawn as vectors, so a matrix costs no JavaScript.
+ */
+export function PricingCompare01({ eyebrow, title, description, plans, groups, labels, highlight, actions, headingLevel = 'h2', className, }) {
+    // The handle a table below takes its name from; see the note on the table.
+    const headingId = useId();
+    if (plans.length === 0) {
+        throw new Error('PricingCompare01: plans is empty, so the matrix has no columns and the table would render a ' +
+            'header row and nothing else. Pass the plans a reader is choosing between.');
+    }
+    if (groups.length === 0) {
+        throw new Error('PricingCompare01: groups is empty, so the matrix has no rows. Pass one group, even when its title ' +
+            'is empty, rather than leaving the reader with a row of prices and no features beside them.');
+    }
+    for (const group of groups) {
+        for (const feature of group.features) {
+            if (feature.values.length !== plans.length) {
+                throw new Error(`PricingCompare01: the feature '${feature.label}' has ${feature.values.length} value(s) and there ` +
+                    `are ${plans.length} plan(s). A short row renders a plan with no answer, which is a claim ` +
+                    'nobody made, so it is refused rather than padded.');
+            }
+        }
+    }
+    // A plan is a column, and a column is a title inside the section that
+    // introduces the set, so three plans under one `h2` are three `h3`s.
+    const PlanHeading = childLevel(headingLevel);
+    const columns = plans.length + 1;
+    const isHighlighted = (id) => highlight === id;
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, id: headingId, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("div", { "data-slot": "pricing-compare", className: cn('flex flex-col gap-4', className), children: _jsx("div", { className: "border-border overflow-hidden rounded-xl border", children: _jsxs(Table, { "aria-labelledby": title ? headingId : undefined, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-48 align-bottom" }), plans.map((plan) => (_jsx(TableHead, { scope: "col", "data-plan": plan.id, "data-highlight": isHighlighted(plan.id) ? 'true' : undefined, className: cn('w-40 whitespace-normal align-bottom', isHighlighted(plan.id) && 'bg-muted/50'), children: _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(PlanHeading, { className: "text-base font-semibold tracking-tight text-balance", children: plan.name }), _jsx(Price, { ...plan.price }), plan.note ? (_jsx("span", { "data-slot": "pricing-compare-plan-note", className: "text-sm", children: plan.note })) : null, plan.action ? (_jsx(CtaLink, { "data-slot": "pricing-compare-action", size: "sm", variant: plan.action.variant ?? 'default', href: plan.action.href, newTab: plan.action.newTab, children: plan.action.label })) : actions ? (_jsx("span", { "data-slot": "pricing-compare-action", children: actions(plan.id) })) : null] }) }, plan.id)))] }) }), groups.map((group, groupIndex) => (
+                            // Positional: a group's title is display content and a caller may
+                            // legitimately split a ladder into two bands under one name.
+                            _jsxs(TableBody, { "data-slot": "pricing-compare-group", children: [_jsx(TableRow, { children: _jsx(TableHead, { scope: "rowgroup", colSpan: columns, className: "bg-muted/50 whitespace-normal", children: _jsx("span", { className: "text-sm font-semibold", children: group.title }) }) }), group.features.map((feature) => (_jsxs(TableRow, { "data-slot": "pricing-compare-feature", children: [_jsx(TableHead, { scope: "row", className: "w-48 align-top whitespace-normal font-normal", children: _jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-medium", children: feature.label }), feature.note ? (_jsx("span", { className: "text-muted-foreground text-xs font-normal", children: feature.note })) : null] }) }), feature.values.map((value, index) => (_jsx(TableCell, { "data-plan": plans[index].id, "data-highlight": isHighlighted(plans[index].id) ? 'true' : undefined, className: cn(isHighlighted(plans[index].id) && 'bg-muted/50'), children: _jsx(MatrixCell, { value: value, labels: labels }) }, plans[index].id)))] }, feature.id)))] }, groupIndex)))] }) }) })] }));
+}
+export default PricingCompare01;

package/dist/blocks/process-flow-01/index.d.ts

@@ -0,0 +1,3 @@
+export { ProcessFlow01, default } from './process-flow.js';
+export type { ProcessFlow01Props, ProcessStage, FlowColumns } from './process-flow.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/process-flow-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/process-flow-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/blocks/process-flow-01/index.js

@@ -0,0 +1 @@
+export { ProcessFlow01, default } from './process-flow.js';

package/dist/blocks/process-flow-01/process-flow.d.ts

@@ -0,0 +1,118 @@
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One stage of a pipeline, as the flow draws it.
+ *
+ * The same shape as a `ProcessStep`, declared separately rather than imported: a
+ * flow and a rail are different claims and a consumer composing one has no reason
+ * to take the other's type, and sharing the declaration would invite a caller to
+ * widen a rail by reaching for a flow's step.
+ */
+export type ProcessStage = {
+    /** The stage's own name, as a reader would name it in conversation. */
+    name: string;
+    /** One line about what happens at this stage. */
+    description: string;
+};
+/**
+ * How many stages a flow puts on one line.
+ *
+ * The grid tracks, not the stage count. A flow is a sequence that has to wrap, so
+ * the number of stages is the caller's and the number on a line is this Block's:
+ * those are different questions, and a caller that had to state both would state
+ * them in step by hand, which is the thing a Block should not ask.
+ *
+ * Three is the default because three divides the two lengths the sites actually
+ * state, six and nine, and a row of three is the widest that still leaves an ordinal
+ * and a name beside each other without one of them wrapping.
+ */
+export type FlowColumns = 2 | 3 | 4;
+/**
+ * The props a ProcessFlow01 takes.
+ *
+ * Every string is a prop. The Block ships no stage, no ordinal and no label for the
+ * end of the flow: a pipeline that hardcoded a stage name would hand every consumer
+ * a diagram of somebody else's pipeline.
+ */
+export type ProcessFlow01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a flow composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The label on the last stage, for a flow that ends in a state worth naming:
+     * "merged", "shipping", "verified". Omit it when the last stage needs no label,
+     * which is the honest state for a pipeline that has not finished.
+     */
+    finalLabel?: string;
+    /**
+     * The stages, in the order the pipeline runs.
+     *
+     * An array rather than the tuple `ProcessRail01` uses, and the difference is the
+     * whole of what this Block is for. A rail holds one line, so its length is a
+     * layout claim the type can make and a wider rail would break; a flow wraps, so
+     * its length is content and the type has nothing to say about it. Six stages are
+     * six stages, and the grid carries them.
+     */
+    stages: ProcessStage[];
+    /**
+     * How many stages sit on one line. Defaults to 3.
+     *
+     * A prop because a five-stage pipeline and a nine-stage one do not read alike at
+     * the same width, and a caller who knows their own length knows their own line.
+     */
+    columns?: FlowColumns;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    className?: string;
+};
+/**
+ * A pipeline drawn as a flow: the stages in order, wrapping across lines.
+ *
+ * **The rail's refusal of a fifth stage is left standing.** `ProcessRail01` holds
+ * two, three or four stages and a five-element array is a compile error, and that is
+ * the same decision this Block is built beside rather than against: a rail is a
+ * claim about a sequence on one line, and a rail that quietly dropped a stage to fit
+ * a width would be a diagram of a process that is not the process. A company site
+ * states six stages, and it was drawing them as a grid of short points, where the
+ * six ordinals and the terminal label were lost and a sequence read as a set. That
+ * gap is a gap in the roster, and the honest repair is a second shape rather than a
+ * wider tuple: raising the rail's ceiling to six would make the fourth column
+ * unrepresentable as a type error, which is the property that made the original
+ * decision good.
+ *
+ * **It is one `<ol>`, and that is the part the layout is built around.** A flow that
+ * wrapped into a row per group would be several lists, and a screen reader would
+ * announce it as three lists of two, which is precisely the set-where-a-sequence-was
+ * that this Block exists to avoid. So the stages are one ordered list and the
+ * wrapping is done by the grid, which means the Block never gets to know where a
+ * line broke, and therefore cannot draw something that is only right on the widest
+ * screen.
+ *
+ * **The ordinal is the continuity mechanism, and it is treated as one.** It runs
+ * `01` through to the last stage with no restart, in the mono face, at a size a
+ * reader can scan down a column rather than read one at a time. That is what makes a
+ * wrapped flow legible: a reader who lands on stage four sees `04` and knows it
+ * continues stage three, whatever the column count happens to be at the width they
+ * are using. Nothing else in this Block is load-bearing for the sequence, and
+ * anything that needed to know where the line broke would be.
+ *
+ * **The thread is a line through the stages, not a box around each one.** Each
+ * stage draws a top border and the grid separates them by a single pixel, so a run
+ * of stages on one line reads as one line broken by hairline gaps, and the gap
+ * between two lines is wider. That is the same technique the rail uses, and it is
+ * chosen here for a specific reason: it holds at any column count, including the
+ * one-column layout a phone gets, without the Block knowing anything about it. A
+ * connector drawn between a stage and its successor would need the column count to
+ * be right, and would be wrong at every width the type does not describe.
+ *
+ * A caption of more than about twelve words wraps under a stage and the line stops
+ * reading as a line, so the caption is a line and the detail belongs above the flow
+ * in `description`.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function ProcessFlow01({ eyebrow, title, description, finalLabel, stages, columns, headingLevel, className, }: ProcessFlow01Props): import("react").JSX.Element;
+export default ProcessFlow01;
+//# sourceMappingURL=process-flow.d.ts.map

package/dist/blocks/process-flow-01/process-flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-flow.d.ts","sourceRoot":"","sources":["../../../src/blocks/process-flow-01/process-flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAA;IACZ,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAgBnC;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,+BAgDpB;AAED,eAAe,aAAa,CAAA"}