@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/quick-view-01/quick-view.d.ts

@@ -0,0 +1,215 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * The three widths a quick view is drawn at, which is what the size prop selects.
+ *
+ * Named for what it selects rather than for the word variant, because in this
+ * package a name ending in `Variant` is the shape that names a cva recipe and the
+ * surface gate refuses it. Three steps rather than arbitrary values, so a quick view
+ * is always at a width the type and layout scales authored, and so the arrangement
+ * is a decision a caller makes by choosing a size rather than by writing utilities.
+ */
+export type QuickView01Size = 'sm' | 'md' | 'lg';
+/**
+ * One line of the summary, as a term and its answer.
+ *
+ * The same shape and the same reason as `Offering01Fact`: `label` is a string
+ * because a column of terms is read by scanning the left edge and a term that wraps
+ * costs every other row its alignment, and `value` is a node because the answers on
+ * a quick view are not all strings.
+ */
+export type QuickView01Fact = {
+    /** The line's stable key, so a caller can address one by name. */
+    id: string;
+    /** What is named, in the product's own words. */
+    label: string;
+    /** The answer. A string, or any node a caller composes. */
+    value: ReactNode;
+};
+/**
+ * The props a QuickView01 takes.
+ *
+ * Every word in the panel is a prop and the Block ships none: not the name, not the
+ * body, not one line of the summary, not the mark and not the words on its own close
+ * control. A Block that wrote any of them would put a sentence about somebody else's
+ * product into every consumer's page, inside a design system rather than inside a
+ * product's copy, which is where a translation tool is least likely to look.
+ */
+export type QuickView01Props = {
+    /**
+     * Whether the panel is open, as the caller holds it.
+     *
+     * Required and controlled, and this Block owns no state at all. The trigger belongs
+     * to the caller rather than to this Item, because a trigger is a claim about where
+     * the control goes: a card's whole tile, a button beside a name, a row in a table,
+     * a keypress on a focused cell. A Block that drew its own trigger would have to
+     * pick one of those, and every one of the four is right somewhere.
+     */
+    open: boolean;
+    /**
+     * Called when the reader dismisses the panel, by Escape, by the outside press or
+     * by the close control, and with `true` when they open it again.
+     *
+     * The caller holds the value because the caller opened it, and a controlled panel
+     * is what lets a caller's own state close the panel when the thing it describes has
+     * gone: a row deleted, a filter that no longer includes it, a route that moved.
+     */
+    onOpenChange: (open: boolean) => void;
+    /** The panel's title, drawn at the heading level the caller asked for. */
+    title: ReactNode;
+    /** The short body under the title. */
+    body?: ReactNode;
+    /** The lines of the summary, as the caller's own facts. See `QuickView01Fact`. */
+    facts?: readonly QuickView01Fact[];
+    /**
+     * A mark for the thing being summarised: a `ProductMark`, an icon, a monogram.
+     *
+     * Optional and additive. A panel that reserves room for a mark that is not there is
+     * a hole, and the title is what the panel is for. It is drawn in a tinted square so
+     * a coloured mark has a ground to sit on whatever the caller passes, and the caller's
+     * mark is never the panel's name: the name is `title`, and the panel is named by
+     * that alone.
+     */
+    mark?: ReactNode;
+    /**
+     * Up to two actions, in the panel's own footer.
+     *
+     * "Up to two" is the honest shape of a summary rather than a cap this Block
+     * enforces, and the reason is that a slot cannot be counted: `actions` may be one
+     * node, an array, or a fragment, and a Block that tried to measure which would be
+     * measuring React's shape rather than the caller's intent. Three actions is where a
+     * summary stops being a summary and becomes a page, and a panel with three actions
+     * is a page that a reader cannot link to, cannot bookmark and cannot go back from.
+     * The cost is that nothing stops it, and the JSDoc says so rather than pretending a
+     * prop could.
+     */
+    actions?: ReactNode;
+    /**
+     * The accessible name of the panel's own close control.
+     *
+     * Required, and the reason is the whole of the control's existence. `Dialog` draws
+     * a dismiss control in its corner whenever it is given one, and that control is the
+     * one thing every reader needs a name for: an icon-only button with no name is
+     * announced as "button". It is a prop rather than a default so a product whose
+     * interface never uses the word this package's default would carry is a consumer
+     * who cannot fix it. See `DialogContentProps.closeLabel` for the same prop on the
+     * Component, whose default this Block deliberately does not inherit.
+     */
+    closeLabel: string;
+    /**
+     * Heading level for the title.
+     *
+     * Defaults to `h2`, and the default is a claim worth stating rather than a shrug.
+     * A dialog is a transient surface, but its title is still a heading in the outline
+     * of the page that opened it, and a reader navigating by heading who opens a quick
+     * view from a card under an `h3` section would meet an `h2` announcing a thing two
+     * levels above its own section. So the level follows the document, exactly as it
+     * does for a card title inside a grid, and the caller who opens the panel from
+     * inside a card passes that card's level. See `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * How wide the panel is once there is room to decide it.
+     *
+     * `sm` is a line of two or three facts. `md` is the default and is right for a
+     * summary with a body paragraph. `lg` is for a summary carrying a specification
+     * with more than four lines, where anything narrower wraps every note onto two.
+     *
+     * @defaultValue 'md'
+     */
+    size?: QuickView01Size;
+    /**
+     * Layout only, exactly as on every Block and every Component. Changing a
+     * Prism-owned visual property from here is prohibited; the panel's width is the
+     * `size` prop.
+     */
+    className?: string;
+};
+/**
+ * A summary panel a reader opens without leaving the page, composed into a `Dialog`
+ * the caller controls.
+ *
+ * **A quick view may not be the only place the information exists, and that is the
+ * rule this Block exists to enforce.** Everything a quick view shows, a reader must
+ * be able to reach some other way: the card underneath, a row in the table behind it,
+ * a section further down the page. That is the same law `Carousel` states about
+ * everything a carousel shows, and a quick view is a carousel's mistake with a dialog
+ * instead of a slider: it hides content behind a deliberate act, it costs the reader a
+ * modal and a focus trap to see, and it takes the content off the page when they
+ * close it. A carousel whose images exist nowhere else is a set of images a reader on
+ * a keyboard, on a screen reader, or with the controls hidden by a stylesheet cannot
+ * see at all; a quick view whose specification exists nowhere else is a specification
+ * a reader has to know exists before they can find it. `Carousel` puts the rule in
+ * its documentation because the Component cannot detect the case, and this Block puts
+ * it in its documentation for the same reason. **This Block cannot enforce it.** There
+ * is no prop that would tell it the page also carries the summary, and a Block that
+ * took one would take a boolean a caller could pass and forget. So the law is stated
+ * here, where a caller meets it, and the caller is the only party who can keep it.
+ *
+ * **The storefront version of this pattern is a quick-view modal on a product tile,
+ * and the translation is the noun in the panel.** What that panel shows is an item
+ * for sale: its name, one paragraph, three or four attributes, the price, and an add
+ * to basket button. Every part of the layout transfers unchanged, and the parts are
+ * the same parts a reader of a capability page meets: a title, a standfirst, a
+ * specification, a price. What does not transfer is the noun and the transaction. The
+ * panel here summarises a capability the product offers, a capture source, an agent, a
+ * connector, a tier, and the action at the bottom is a decision rather than a purchase,
+ * so there is nothing to add to a basket and nothing to check out. What survives the
+ * translation is the reason the pattern exists at all, which is that a reader wants to
+ * know whether a capability is the right one before they leave the page they are on to
+ * find out.
+ *
+ * **The overlay is `Dialog`, and the argument is the same one `Lightbox` makes about
+ * `Dialog` and `Gallery01` makes about `Lightbox`.** A panel built on a `div` and a
+ * `keydown` listener gets the Escape key and no focus trap, so a keyboard reader tabs
+ * behind the panel into a page they cannot see, and the defect is invisible in review
+ * because the panel works for the person writing it. The focus trap, the restore of
+ * focus to whatever opened it, the Escape key, the outside press, the scroll lock and
+ * the portal all come from `Dialog` and are all solved once. What this Block adds is
+ * the three things `Dialog` does not know about: the summary's own shape, the title at
+ * the caller's heading level, and the statement of the law above. The cost is the one
+ * required prop, `closeLabel`, which is a real departure from the shape the rest of
+ * this wave uses and is stated on that prop.
+ *
+ * **The title is this Block's own heading rather than `DialogTitle`, and the reason
+ * is the heading level.** `DialogTitle` renders an `h2` and takes no `render` prop in
+ * this package, so a Block that composed it would put an `h2` in the outline of
+ * whatever page opened the panel, at whatever depth the page was composed. The title
+ * is therefore drawn at `headingLevel` and the panel is named by it through
+ * `aria-labelledby`, which is the attribute a dialog's accessible name comes from
+ * whichever element carries it. The cost is stated rather than hidden: the naming is
+ * wired here rather than by `Dialog`, so a caller who reaches past this Block for
+ * `Dialog` directly gets `Dialog`'s own behaviour back, which is the right default and
+ * the reason the seam is small.
+ *
+ * **This Block does not compose `Section`, and that is a decision rather than an
+ * oversight.** Every other Block in this package opens with `Section` so it inherits
+ * the container and the vertical rhythm. A modal has no container to inherit: `Section`
+ * is the page column with the page's vertical padding, and putting that inside a
+ * panel that is at most `max-w-overlay-dialog` produces a page layout applied to a
+ * four-hundred pixel box. `DialogContent` already owns the padding and the gap, and
+ * `Lightbox` and `SearchDialog` are absent from `Section` for the same reason. The
+ * corollary is that this Block draws no `SectionHeading` either, and its heading is
+ * its own element, aligned flush left by construction rather than by a prop.
+ *
+ * **The specification is `FactList`, and the panel draws no more than the caller
+ * passes.** A quick view that grew its own layout for a longer summary would be a
+ * Block competing with the page it summarises. The honest cost of that restraint is
+ * visible: a summary carrying more than about six lines is a page, and a reader who
+ * needs it should open the page.
+ *
+ * **The mark is drawn in a tinted square and names nothing.** A mark beside a title is
+ * a wayfinding mark, and a wayfinding mark that announced itself would give the panel
+ * two names. The caller's mark is drawn as passed; if it is an image the caller gives
+ * it its own description, and if it is decorative the caller marks it so.
+ *
+ * **It is a client Component**, and the reason is the `Dialog` it composes rather than
+ * anything this Block does: `Dialog` is a client module, and a server Component
+ * composing a client Component would be a server Component holding a modal's focus
+ * trap without the modal. It owns no state of its own, so the client cost is `useId`
+ * for the title's id and nothing else, and every prop crossing into it is data except
+ * `onOpenChange`, which is a handler the caller already holds in a client graph.
+ */
+export declare function QuickView01({ open, onOpenChange, title, body, facts, mark, actions, closeLabel, headingLevel, size, className, }: QuickView01Props): import("react").JSX.Element;
+export default QuickView01;
+//# sourceMappingURL=quick-view.d.ts.map

package/dist/blocks/quick-view-01/quick-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-view.d.ts","sourceRoot":"","sources":["../../../src/blocks/quick-view-01/quick-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAS7C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAyBD;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;OAQG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,0EAA0E;IAC1E,KAAK,EAAE,SAAS,CAAA;IAChB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;;;;OAUG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,EACV,YAAmB,EACnB,IAAW,EACX,SAAS,GACV,EAAE,gBAAgB,+BA2ElB;AAED,eAAe,WAAW,CAAA"}

package/dist/blocks/quick-view-01/quick-view.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, } from '../../components/ui/dialog.js';
+import { FactList } from '../../components/ui/fact-list.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The width each size takes, as an authored step rather than an arbitrary value.
+ *
+ * Applied at the `sm` breakpoint and above, so on a phone the panel is the width the
+ * viewport gives it with its own padding either way, and the three sizes only decide
+ * how much of the page the panel occupies once there is room to decide it.
+ *
+ * **The three are overlay widths rather than steps of a size scale**, and that is the
+ * whole reason the token build closes Tailwind's own container namespace. These used
+ * to be spelled with three of its steps, which ship at the same values, so nothing
+ * rendered differently; what they cost was that the widest step also meant something
+ * on a page, and a retune of this panel would have moved the panel and left the page.
+ * An overlay's width is a property of the kind of surface it is, so it is named for
+ * that surface and it moves on its own or not at all. The retired names are written
+ * here in prose rather than as classes because Tailwind's extractor reads this file's
+ * comments, and a class recorded in a JSDoc block is a class the sheet emits.
+ */
+const WIDTH = {
+    sm: 'sm:max-w-overlay-panel',
+    md: 'sm:max-w-overlay-dialog',
+    lg: 'sm:max-w-overlay-form',
+};
+/**
+ * A summary panel a reader opens without leaving the page, composed into a `Dialog`
+ * the caller controls.
+ *
+ * **A quick view may not be the only place the information exists, and that is the
+ * rule this Block exists to enforce.** Everything a quick view shows, a reader must
+ * be able to reach some other way: the card underneath, a row in the table behind it,
+ * a section further down the page. That is the same law `Carousel` states about
+ * everything a carousel shows, and a quick view is a carousel's mistake with a dialog
+ * instead of a slider: it hides content behind a deliberate act, it costs the reader a
+ * modal and a focus trap to see, and it takes the content off the page when they
+ * close it. A carousel whose images exist nowhere else is a set of images a reader on
+ * a keyboard, on a screen reader, or with the controls hidden by a stylesheet cannot
+ * see at all; a quick view whose specification exists nowhere else is a specification
+ * a reader has to know exists before they can find it. `Carousel` puts the rule in
+ * its documentation because the Component cannot detect the case, and this Block puts
+ * it in its documentation for the same reason. **This Block cannot enforce it.** There
+ * is no prop that would tell it the page also carries the summary, and a Block that
+ * took one would take a boolean a caller could pass and forget. So the law is stated
+ * here, where a caller meets it, and the caller is the only party who can keep it.
+ *
+ * **The storefront version of this pattern is a quick-view modal on a product tile,
+ * and the translation is the noun in the panel.** What that panel shows is an item
+ * for sale: its name, one paragraph, three or four attributes, the price, and an add
+ * to basket button. Every part of the layout transfers unchanged, and the parts are
+ * the same parts a reader of a capability page meets: a title, a standfirst, a
+ * specification, a price. What does not transfer is the noun and the transaction. The
+ * panel here summarises a capability the product offers, a capture source, an agent, a
+ * connector, a tier, and the action at the bottom is a decision rather than a purchase,
+ * so there is nothing to add to a basket and nothing to check out. What survives the
+ * translation is the reason the pattern exists at all, which is that a reader wants to
+ * know whether a capability is the right one before they leave the page they are on to
+ * find out.
+ *
+ * **The overlay is `Dialog`, and the argument is the same one `Lightbox` makes about
+ * `Dialog` and `Gallery01` makes about `Lightbox`.** A panel built on a `div` and a
+ * `keydown` listener gets the Escape key and no focus trap, so a keyboard reader tabs
+ * behind the panel into a page they cannot see, and the defect is invisible in review
+ * because the panel works for the person writing it. The focus trap, the restore of
+ * focus to whatever opened it, the Escape key, the outside press, the scroll lock and
+ * the portal all come from `Dialog` and are all solved once. What this Block adds is
+ * the three things `Dialog` does not know about: the summary's own shape, the title at
+ * the caller's heading level, and the statement of the law above. The cost is the one
+ * required prop, `closeLabel`, which is a real departure from the shape the rest of
+ * this wave uses and is stated on that prop.
+ *
+ * **The title is this Block's own heading rather than `DialogTitle`, and the reason
+ * is the heading level.** `DialogTitle` renders an `h2` and takes no `render` prop in
+ * this package, so a Block that composed it would put an `h2` in the outline of
+ * whatever page opened the panel, at whatever depth the page was composed. The title
+ * is therefore drawn at `headingLevel` and the panel is named by it through
+ * `aria-labelledby`, which is the attribute a dialog's accessible name comes from
+ * whichever element carries it. The cost is stated rather than hidden: the naming is
+ * wired here rather than by `Dialog`, so a caller who reaches past this Block for
+ * `Dialog` directly gets `Dialog`'s own behaviour back, which is the right default and
+ * the reason the seam is small.
+ *
+ * **This Block does not compose `Section`, and that is a decision rather than an
+ * oversight.** Every other Block in this package opens with `Section` so it inherits
+ * the container and the vertical rhythm. A modal has no container to inherit: `Section`
+ * is the page column with the page's vertical padding, and putting that inside a
+ * panel that is at most `max-w-overlay-dialog` produces a page layout applied to a
+ * four-hundred pixel box. `DialogContent` already owns the padding and the gap, and
+ * `Lightbox` and `SearchDialog` are absent from `Section` for the same reason. The
+ * corollary is that this Block draws no `SectionHeading` either, and its heading is
+ * its own element, aligned flush left by construction rather than by a prop.
+ *
+ * **The specification is `FactList`, and the panel draws no more than the caller
+ * passes.** A quick view that grew its own layout for a longer summary would be a
+ * Block competing with the page it summarises. The honest cost of that restraint is
+ * visible: a summary carrying more than about six lines is a page, and a reader who
+ * needs it should open the page.
+ *
+ * **The mark is drawn in a tinted square and names nothing.** A mark beside a title is
+ * a wayfinding mark, and a wayfinding mark that announced itself would give the panel
+ * two names. The caller's mark is drawn as passed; if it is an image the caller gives
+ * it its own description, and if it is decorative the caller marks it so.
+ *
+ * **It is a client Component**, and the reason is the `Dialog` it composes rather than
+ * anything this Block does: `Dialog` is a client module, and a server Component
+ * composing a client Component would be a server Component holding a modal's focus
+ * trap without the modal. It owns no state of its own, so the client cost is `useId`
+ * for the title's id and nothing else, and every prop crossing into it is data except
+ * `onOpenChange`, which is a handler the caller already holds in a client graph.
+ */
+export function QuickView01({ open, onOpenChange, title, body, facts, mark, actions, closeLabel, headingLevel = 'h2', size = 'md', className, }) {
+    /*
+     * The id the panel is named by. `Dialog` computes its own `aria-labelledby` from
+     * whichever `DialogTitle` is mounted, and there is none here because the title is
+     * this Block's own heading at the caller's level, so the name is wired through this
+     * id instead. See the JSDoc above for why the heading is not `DialogTitle`.
+     */
+    const generated = useId();
+    const titleId = `${generated}-title`;
+    const Title = headingLevel;
+    /*
+     * The caller's lines, in the shape `FactList` draws. The mapping is one line and it
+     * is the reason this Block takes its own `QuickView01Fact` rather than importing
+     * `Fact`: a line in a summary is keyed, because a caller assembling a panel's
+     * contents outside JSX has to name each row to type the array, and `Fact` has no key.
+     */
+    const summary = (facts ?? []).map((fact) => ({
+        label: fact.label,
+        value: fact.value,
+    }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "quick-view-01", "data-size": size, "aria-labelledby": titleId, closeLabel: closeLabel, className: cn(WIDTH[size], className), children: [_jsxs(DialogHeader, { "data-slot": "quick-view-01-header", className: mark === undefined ? undefined : 'flex-row items-start gap-3', children: [mark === undefined ? null : (_jsx("span", { "data-slot": "quick-view-01-mark", className: "bg-muted text-muted-foreground flex size-9 shrink-0 items-center justify-center rounded-md", children: mark })), _jsx(Title, { id: titleId, className: "text-lg leading-none font-semibold tracking-tight", children: title })] }), body === undefined ? null : (_jsx("div", { "data-slot": "quick-view-01-body", className: "text-muted-foreground text-pretty text-sm", children: body })), _jsx(FactList, { facts: summary }), actions === undefined ? null : (_jsx(DialogFooter, { "data-slot": "quick-view-01-actions", children: actions }))] }) }));
+}
+export default QuickView01;

package/dist/blocks/rate-card-01/index.d.ts

@@ -0,0 +1,3 @@
+export { RateCard01, default } from './rate-card.js';
+export type { RateCard01Labels, RateCard01Props, RateCard01Rate } from './rate-card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/rate-card-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/rate-card-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAIjD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/blocks/rate-card-01/index.js

@@ -0,0 +1 @@
+export { RateCard01, default } from './rate-card.js';

package/dist/blocks/rate-card-01/rate-card.d.ts

@@ -0,0 +1,184 @@
+import { type ReactNode } from 'react';
+import { type PriceProps } from '../../components/ui/price.js';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One row: a tier, what it costs, and what comes with it.
+ *
+ * `tier` is the caller's word and never one Prism invents, for the reason
+ * `StatusLedger01` gives for its four tiers: between four products the same
+ * ladder is called eight different things, and the vocabulary belongs in the row
+ * rather than in the type. A type here would be a ladder Prism chose and a
+ * consumer had to argue with, and a consumer with a pricing model that is not a
+ * ladder at all, a flat rate with a floor, a per-market price, has nowhere to put
+ * it.
+ */
+export type RateCard01Rate = {
+    /** Stable identity, used for the row's key. */
+    id: string;
+    /**
+     * The name of this band of usage, as the caller writes it: a volume band, a
+     * word, a market.
+     *
+     * A short noun phrase. The column is scanned down its left edge and a tier that
+     * wraps to two lines is a row whose amount sits below its neighbours'.
+     */
+    tier: string;
+    /**
+     * What the tier costs, and everything about how that amount is written.
+     *
+     * A `PriceProps` rather than a number and a symbol, and the argument for that is
+     * the Block's own JSDoc below.
+     */
+    amount: PriceProps;
+    /**
+     * What the tier includes before the overage applies, in the caller's own words
+     * and units: an allowance, a count, a ceiling.
+     *
+     * A string and not a number because a rate card's allowance is rarely a bare
+     * figure. "Ten thousand rows", "the first five gigabytes" and "10" are three
+     * products' decisions, and a `number` prop would make two of them impossible.
+     */
+    included?: string;
+    /** What it costs past `included`, with its own period. See `amount`. */
+    overage?: PriceProps;
+};
+/**
+ * The column names a rate card needs, and it needs all of them.
+ *
+ * Three words, all required, and none of them is Prism's. The reason they are
+ * required rather than optional is the one `PricingCompare01Labels` is built on: a
+ * column whose heading is missing is a column a reader identifies by counting from
+ * the left, and a table with three columns where two are named and one is not
+ * reads as a table with a mistake in it. A caller with no allowances passes words
+ * for two columns they will not render, which is a small price for the rule that
+ * no column in a rate card is identified by its position.
+ *
+ * The rate column's heading is not here. It is the `unit` prop, because the
+ * column of amounts is headed by the noun those amounts count, and a heading that
+ * said "Rate" beside a period that already says "a month" would be the same fact
+ * twice.
+ */
+export type RateCard01Labels = {
+    /** The heading of the column that names each band of usage. */
+    tier: string;
+    /** The heading of the allowance column. */
+    included: string;
+    /** The heading of the past-the-allowance column. */
+    overage: string;
+};
+/**
+ * The props a RateCard01 takes.
+ *
+ * Every string is a prop and the Block ships none: no unit, no tier, no amount, no
+ * allowance, no overage rate and no column name. A rate card is a price list, and
+ * a price list is the densest claim a product makes about itself per square inch,
+ * so a single hardcoded currency symbol on this Block would be a sentence in four
+ * consumer products at once.
+ */
+export type RateCard01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: ReactNode;
+    /** The section title. Omit it for a rate card composed under its own heading. */
+    title?: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /**
+     * The noun the numbers count, in the caller's own words and grammar: an agent
+     * run, a gigabyte captured, a tracked node, a thousand API calls.
+     *
+     * Required, and it is the heading of the rate column rather than a decoration,
+     * for the reason a price without a unit is not a price: a reader who cannot see
+     * what they are buying is being asked to guess, and the guess is the whole cost
+     * of the number. It is a string rather than a node because a column heading is
+     * one phrase, and a caller who needs a footnote on the unit has `description`
+     * and `footnote` for it.
+     */
+    unit: string;
+    /** The rates, in the order a reader should meet them. */
+    rates: readonly RateCard01Rate[];
+    /** The column names. See `RateCard01Labels`. */
+    labels: RateCard01Labels;
+    /**
+     * The line under the card: the rounding rule, the billing granularity, the
+     * sentence that qualifies every number on the page.
+     *
+     * A node rather than a string, because three of the four products that would
+     * install this carry a link inside it, pointing at the tax treatment or the
+     * full tariff.
+     */
+    footnote?: ReactNode;
+    /**
+     * The control under the card, for the link to the full document.
+     *
+     * A slot rather than a `documentLabel` and a `documentHref` pair, because the
+     * control is usually a call to action the caller already has, and re-declaring
+     * it here would give a product two buttons that say the same thing in two
+     * weights.
+     */
+    actions?: ReactNode;
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /** Layout classes for the card. Layout only; every visual property is Prism's. */
+    className?: string;
+};
+/**
+ * A price list per unit: what something costs, measured by a unit the caller
+ * names, with the period, the allowance, the overage and a slot for the full
+ * document.
+ *
+ * **It composes `Price` rather than printing a currency, and the argument is that
+ * a rate card is the one Block where a hardcoded symbol would be a legal claim
+ * about a market.** It would also still be the wrong answer. A symbol is the least
+ * of what a price needs: a symbol says the currency and nothing else, while a rate
+ * card also has a currency code, a precision, a period and a locale, and `Intl`
+ * already knows all four. A rate card is the place where those four matter most,
+ * because the numbers are small and the reader is checking them, so a rate card
+ * that printed a dollar sign and two decimal places would be wrong in most of the
+ * world and wrong for a unit price everywhere, and a design system that hardcoded
+ * it would be making that call for every consumer. `Price` composes the platform's
+ * formatter, which is already localised and already in every runtime a browser
+ * has. The cost is worth naming: `Intl` is a constructor rather than a template, so
+ * a server Component builds one per request rather than one at build, and a page
+ * that prints a hundred rates builds a hundred formatters. A consumer whose rates
+ * are on a hot path caches the formatter itself, which is a better home for that
+ * knowledge than a design system. See `Price` for the rest of the argument.
+ *
+ * **The `tier` is the caller's word, and there is no ladder in the type.** See
+ * `RateCard01Rate.tier`. The rejected alternative was a `RateTier` union of four or
+ * five names, which would have been a pricing model: a flat rate with a floor, a
+ * per-market price and a per-seat price are all real rate cards and none of them
+ * fits a ladder, and a consumer with one would have had to put it in `tier` as a
+ * string anyway, with none of the type's help.
+ *
+ * **A rate card with no tiers is a rate card with one row, and one row renders
+ * correctly.** This is stated because the alternative was quietly assumed. A
+ * layout that only reads correctly with two rows is a layout with a minimum, and
+ * a minimum is a claim about how many bands a price has; the header row, the
+ * single data row and the column widths are all the same with one as with six, and
+ * nothing here is padded, centred or measured against a second row. The cost is
+ * that a one-row card looks sparse, and the honest answer to that is a title that
+ * says what the single rate is rather than a heading for a ladder that is not
+ * there.
+ *
+ * **The allowance and overage columns render when the data has them, not when the
+ * caller asks for them.** A column that exists for some rows and not others is a
+ * column a reader has to check, and a card that shows a "what is included" column
+ * of empty cells because one tier happens to have no allowance is a card making a
+ * claim about that tier. So each of the two is drawn when at least one rate carries
+ * it, and a rate that does not gets an empty cell rather than a placeholder: see
+ * `Price`'s JSDoc for why a Component that prints a placeholder where it has no
+ * data has chosen a sentence, and the same argument applies to an empty cell in an
+ * allowance column.
+ *
+ * **It is a real table, for the same reason the comparison matrix is one.** A
+ * rate card is read down the tier column and across the amount columns, and a
+ * reader using a screen reader navigates it by heading in both directions. The
+ * cost is the horizontal scroll on a narrow viewport, which `Table` provides and
+ * which is cheaper than losing the headers.
+ *
+ * It is a server Component: no hook, no state, no client code and no router. The
+ * formatting is arithmetic over props that happens to go through the platform.
+ */
+export declare function RateCard01({ eyebrow, title, description, unit, rates, labels, footnote, actions, headingLevel, className, }: RateCard01Props): import("react").JSX.Element;
+export default RateCard01;
+//# sourceMappingURL=rate-card.d.ts.map

package/dist/blocks/rate-card-01/rate-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rate-card.d.ts","sourceRoot":"","sources":["../../../src/blocks/rate-card-01/rate-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAWxF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;;;;OAUG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,gDAAgD;IAChD,MAAM,EAAE,gBAAgB,CAAA;IACxB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BA2GjB;AAED,eAAe,UAAU,CAAA"}

package/dist/blocks/rate-card-01/rate-card.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Price } from '../../components/ui/price.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../../components/ui/table.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A price list per unit: what something costs, measured by a unit the caller
+ * names, with the period, the allowance, the overage and a slot for the full
+ * document.
+ *
+ * **It composes `Price` rather than printing a currency, and the argument is that
+ * a rate card is the one Block where a hardcoded symbol would be a legal claim
+ * about a market.** It would also still be the wrong answer. A symbol is the least
+ * of what a price needs: a symbol says the currency and nothing else, while a rate
+ * card also has a currency code, a precision, a period and a locale, and `Intl`
+ * already knows all four. A rate card is the place where those four matter most,
+ * because the numbers are small and the reader is checking them, so a rate card
+ * that printed a dollar sign and two decimal places would be wrong in most of the
+ * world and wrong for a unit price everywhere, and a design system that hardcoded
+ * it would be making that call for every consumer. `Price` composes the platform's
+ * formatter, which is already localised and already in every runtime a browser
+ * has. The cost is worth naming: `Intl` is a constructor rather than a template, so
+ * a server Component builds one per request rather than one at build, and a page
+ * that prints a hundred rates builds a hundred formatters. A consumer whose rates
+ * are on a hot path caches the formatter itself, which is a better home for that
+ * knowledge than a design system. See `Price` for the rest of the argument.
+ *
+ * **The `tier` is the caller's word, and there is no ladder in the type.** See
+ * `RateCard01Rate.tier`. The rejected alternative was a `RateTier` union of four or
+ * five names, which would have been a pricing model: a flat rate with a floor, a
+ * per-market price and a per-seat price are all real rate cards and none of them
+ * fits a ladder, and a consumer with one would have had to put it in `tier` as a
+ * string anyway, with none of the type's help.
+ *
+ * **A rate card with no tiers is a rate card with one row, and one row renders
+ * correctly.** This is stated because the alternative was quietly assumed. A
+ * layout that only reads correctly with two rows is a layout with a minimum, and
+ * a minimum is a claim about how many bands a price has; the header row, the
+ * single data row and the column widths are all the same with one as with six, and
+ * nothing here is padded, centred or measured against a second row. The cost is
+ * that a one-row card looks sparse, and the honest answer to that is a title that
+ * says what the single rate is rather than a heading for a ladder that is not
+ * there.
+ *
+ * **The allowance and overage columns render when the data has them, not when the
+ * caller asks for them.** A column that exists for some rows and not others is a
+ * column a reader has to check, and a card that shows a "what is included" column
+ * of empty cells because one tier happens to have no allowance is a card making a
+ * claim about that tier. So each of the two is drawn when at least one rate carries
+ * it, and a rate that does not gets an empty cell rather than a placeholder: see
+ * `Price`'s JSDoc for why a Component that prints a placeholder where it has no
+ * data has chosen a sentence, and the same argument applies to an empty cell in an
+ * allowance column.
+ *
+ * **It is a real table, for the same reason the comparison matrix is one.** A
+ * rate card is read down the tier column and across the amount columns, and a
+ * reader using a screen reader navigates it by heading in both directions. The
+ * cost is the horizontal scroll on a narrow viewport, which `Table` provides and
+ * which is cheaper than losing the headers.
+ *
+ * It is a server Component: no hook, no state, no client code and no router. The
+ * formatting is arithmetic over props that happens to go through the platform.
+ */
+export function RateCard01({ eyebrow, title, description, unit, rates, labels, footnote, actions, headingLevel = 'h2', className, }) {
+    // The handle a table below takes its name from; see the note on the table.
+    const headingId = useId();
+    if (rates.length === 0) {
+        throw new Error('RateCard01: rates is empty, so the card is a row of column headings over no rows. Pass at least ' +
+            'one rate, which is the ordinary case for a flat price.');
+    }
+    // Read from the data rather than declared, because whether a card has an
+    // allowance column is a fact about the pricing and not a prop a caller has to
+    // keep in step with the rates.
+    const hasIncluded = rates.some((rate) => rate.included !== undefined);
+    const hasOverage = rates.some((rate) => rate.overage !== undefined);
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, id: headingId, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsxs("div", { "data-slot": "rate-card", 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, { scope: "col", className: "w-48", children: labels.tier }), _jsx(TableHead, { scope: "col", children: unit }), hasIncluded ? (_jsx(TableHead, { scope: "col", className: "whitespace-normal", children: labels.included })) : null, hasOverage ? (_jsx(TableHead, { scope: "col", className: "whitespace-normal", children: labels.overage })) : null] }) }), _jsx(TableBody, { children: rates.map((rate) => (_jsxs(TableRow, { "data-slot": "rate-card-rate", children: [_jsx(TableHead, { scope: "row", className: "w-48 align-top whitespace-normal font-normal", children: _jsx("span", { className: "text-sm font-medium", children: rate.tier }) }), _jsx(TableCell, { children: _jsx(Price, { ...rate.amount, size: "md" }) }), hasIncluded ? (_jsx(TableCell, { className: "align-top whitespace-normal", children: rate.included ? (_jsx("span", { className: "text-sm text-pretty", children: rate.included })) : null })) : null, hasOverage ? (_jsx(TableCell, { children: rate.overage ? _jsx(Price, { ...rate.overage, size: "sm" }) : null })) : null] }, rate.id))) })] }) }), footnote ? (_jsx("p", { "data-slot": "rate-card-footnote", className: "text-muted-foreground text-pretty text-sm", children: footnote })) : null, actions ? (_jsx("div", { "data-slot": "rate-card-actions", className: "flex flex-wrap items-center gap-3", children: actions })) : null] })] }));
+}
+export default RateCard01;

package/dist/blocks/reset-password-01/index.d.ts

@@ -0,0 +1,3 @@
+export { ResetPassword01, default } from './reset-password.js';
+export type { ResetPassword01Confirm, ResetPassword01Expired, ResetPassword01Outcome, ResetPassword01Props, ResetPassword01Secret, ResetPassword01Status, } from './reset-password.js';
+//# sourceMappingURL=index.d.ts.map