@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/blocks/team-01/team.d.ts

@@ -0,0 +1,176 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One person, as a team section shows them.
+ *
+ * Four things, and the fourth is the one that varies: a portrait may be absent
+ * and a biography may be absent and a destination may be absent, and each absence
+ * is a fact about what the consumer publishes rather than a state this Block has
+ * to render around.
+ */
+export type Team01Person = {
+    /**
+     * A stable key for the cell, and carried on the markup as `data-person` so a
+     * test can name one person rather than the first one, and so `highlight` can
+     * name them.
+     */
+    id: string;
+    /**
+     * The person's own name, as they publish it.
+     *
+     * The anchor of the cell and the card title. It is also the source of the
+     * initials the portrait falls back to, so a name a consumer wants displayed
+     * differently from the one it wants abbreviated is a caller problem this Block
+     * has no opinion about.
+     */
+    name: string;
+    /**
+     * What they do, in the words the consumer uses.
+     *
+     * Required, because a portrait with a name and no role says who someone is and
+     * not what they are for, which on a team page is the only reason the person is
+     * in it.
+     */
+    role: string;
+    /**
+     * A sentence or two about the person, as a node.
+     *
+     * Set at the prose measure rather than at the card measure, because a
+     * biography is prose and a line of text at card width is a caption. Nothing
+     * here truncates it: see the Block's JSDoc for why this Block will not cut a
+     * biography short.
+     */
+    bio?: ReactNode;
+    /**
+     * The portrait, with the name the initials come from.
+     *
+     * A name rather than a string here, because an `Avatar` without a fallback is
+     * an empty circle for exactly as long as the image takes to arrive and forever
+     * if it never does. Omit the whole field for a person the consumer has no
+     * photograph of and would rather show as a card with a name on it.
+     */
+    avatar?: {
+        /** The photograph. Omit it, or pass a URL that fails, for the initials. */
+        src?: string;
+        /** The person's name, which is the initials' source. */
+        name: string;
+    };
+    /**
+     * Where the person goes.
+     *
+     * A native anchor `href`, and it makes the whole cell or the whole row the
+     * destination rather than a control in the corner of it.
+     */
+    href?: string;
+    /**
+     * The words naming the destination, drawn inside the link.
+     *
+     * Required whenever `href` is given, and not defaulted, for the reason
+     * `Compliance01` states for its evidence label: a link whose name is its
+     * address is announced as punctuation. Keeping the words inside the link rather
+     * than replacing the link's accessible name is deliberate: the visible name of
+     * the cell has to be contained in the accessible name, so a label that
+     * overrode it would break the one rule a screen reader user cannot see broken.
+     */
+    hrefLabel?: string;
+};
+/**
+ * The props a Team01 takes.
+ *
+ * Every string is a prop and the Block ships none: no name, no role, no biography
+ * and not one person. A team section that hardcoded any of them would put Prism
+ * staff inside a consumer's product.
+ */
+export type Team01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a grid composed under its own heading. */
+    title?: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /** The people, in the order a reader should meet them. Order is the caller's. */
+    people: readonly Team01Person[];
+    /**
+     * `cards` draws a card per person with the portrait above the name. `list`
+     * draws hairline rows with the portrait at the leading edge.
+     *
+     * @defaultValue 'cards'
+     */
+    variant?: 'cards' | 'list';
+    /**
+     * The ids that get a stronger border.
+     *
+     * Ids rather than names or positions, because a border that follows a position
+     * moves to a different person after a reorder, and a border is a claim about
+     * who matters on this page. The Block draws a border in `primary` and nothing
+     * else: no fill, no ring, no badge, because a highlight on a marketing page
+     * becomes a statement about rank and the only statement this Block can make is
+     * the one the consumer asked for. An id here that is not in `people` throws,
+     * because a highlight that silently does nothing is worse than one that fails.
+     */
+    highlight?: readonly string[];
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A grid or a list of people: a portrait where there is one, a name, a role, a
+ * biography, and a destination where the consumer publishes one.
+ *
+ * All four NaniSoft sites publish a team section and each one wrote it by hand:
+ * a grid of portraits with a name and a role under each, on a marketing page, for
+ * the people who watch a pipeline, who read a market, and who keep an estate
+ * observed. Four copies of the same arrangement, four decisions about whether
+ * the biography was set at card width or at the reading measure, and four
+ * decisions about what a person with no photograph looks like. None of those is a
+ * hard problem. The reason the section is worth a Block is the opposite of the
+ * usual one, which is that it is where a marketing page is most tempted to make a
+ * claim about a person: a card with a portrait and a job title under it reads as
+ * an endorsement, so the arrangement this Block ships keeps the person's own name
+ * as the anchor, keeps the role in the words the consumer wrote, and refuses to
+ * invent either.
+ *
+ * **The biography is not truncated, and the caller is the one who decides how long
+ * it is.** A Block that cut a biography at three lines with an ellipsis would be
+ * deciding which part of a person's account of their own work matters, and it
+ * would do it by cutting mid-sentence, which is the one place a truncation is
+ * guaranteed to remove the qualification rather than the flattery. So the bio is
+ * rendered at the measure and at whatever length the caller passed, and a caller
+ * who wants three lines writes three lines. The cost is stated rather than
+ * hidden: a card grid with six two-paragraph biographies is a very tall page, and
+ * the fix is the caller's editing rather than this Block's ellipsis.
+ *
+ * **`avatar-group` is deliberately not composed here.** It is the right
+ * Component for a set a page is summarising rather than showing: a row of
+ * overlapping discs with a count for the rest is a statement that the set is
+ * longer than the space. A team page shows every person, because the person is
+ * the content, so the count would replace a person with a numeral. The one place
+ * a group belongs on a team page is a related section about a project, and that
+ * is a caller's row rather than this Block's job.
+ *
+ * **A card with a destination is a native anchor wrapping the card, so the focus
+ * ring bounds the card rather than the words inside it.** That is the argument
+ * `Item` states in full and it is the reason the anchor sits outside the surface
+ * here. The link's words are drawn inside it as the trailing label, and the
+ * label is required whenever the link is, because a link announced by its address
+ * is a link a reader cannot follow. A person with no `href` is not a disabled
+ * link: the card is a card.
+ *
+ * The card title is composed at `childLevel(headingLevel)` rather than at a fixed
+ * level, so a team grid embedded one level deeper than it was written for carries
+ * its titles with it. An empty set renders nothing, for the reason
+ * `ProductSwitcher` and `AvatarGroup` each state: an empty frame is worse than an
+ * absent one, and a team page with nobody on it has nothing to say.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. The
+ * portrait is `Avatar`, which is a client Component whose only client work is
+ * measuring whether an image has loaded, so a grid of twelve people costs no
+ * JavaScript from this module beyond that.
+ */
+export declare function Team01({ eyebrow, title, description, people, variant, highlight, headingLevel, className, }: Team01Props): import("react").JSX.Element | null;
+export default Team01;
+//# sourceMappingURL=team.d.ts.map

package/dist/blocks/team-01/team.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team.d.ts","sourceRoot":"","sources":["../../../src/blocks/team-01/team.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAuBpG;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,SAAS,CAAA;IACf;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE;QACP,2EAA2E;QAC3E,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,wDAAwD;QACxD,IAAI,EAAE,MAAM,CAAA;KACb,CAAA;IACD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,iFAAiF;IACjF,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC7B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAiB,EACjB,SAAS,EACT,YAAmB,EACnB,SAAS,GACV,EAAE,WAAW,sCA2Ib;AAED,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from '../../components/ui/avatar.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The initials a name produces, and the rule that produces them.
+ *
+ * Two letters from the first and last words, and the first two characters of a
+ * single word. It is the same rule `AvatarGroup` applies and it is repeated here
+ * rather than imported, and the reason is a boundary rather than an oversight:
+ * that helper is private to its module, and exporting it would make a private
+ * derivation part of the published surface of a Component in order to save six
+ * lines in a Block. The cost of the repetition is stated rather than hidden: two
+ * modules carry this rule, so a change to it is a change in both, and a caller
+ * who needs a case the rule does not cover passes their own node.
+ */
+function initialsOf(name) {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const first = words[0];
+    if (first === undefined)
+        return '';
+    if (words.length === 1)
+        return first.slice(0, 2).toUpperCase();
+    return `${first.charAt(0)}${words[words.length - 1].charAt(0)}`.toUpperCase();
+}
+/**
+ * The checks that keep a claim about a person from being one Prism made.
+ *
+ * A label with no link is a word with nothing behind it, which is the same defect
+ * `Status` refuses with its own `label`; a highlight naming a person who is not
+ * in the set is a border drawn around nobody, which is invisible in review and
+ * permanent in the rendered page. Both throw rather than degrade.
+ */
+function assertPeople(people, highlight) {
+    for (const id of highlight ?? []) {
+        if (!people.some((person) => person.id === id)) {
+            throw new Error('Team01: highlight names an id that is not in people, so the border would be drawn around nobody and the ' +
+                'page would look deliberate. Name a person, or drop the id.');
+        }
+    }
+    for (const person of people) {
+        if (person.href !== undefined && (person.hrefLabel === undefined || person.hrefLabel.trim() === '')) {
+            throw new Error('Team01: a person declares an href and no hrefLabel, so the link would be announced by its address, which ' +
+                'is punctuation rather than a name. Pass the words that say where the person goes.');
+        }
+    }
+}
+/**
+ * A grid or a list of people: a portrait where there is one, a name, a role, a
+ * biography, and a destination where the consumer publishes one.
+ *
+ * All four NaniSoft sites publish a team section and each one wrote it by hand:
+ * a grid of portraits with a name and a role under each, on a marketing page, for
+ * the people who watch a pipeline, who read a market, and who keep an estate
+ * observed. Four copies of the same arrangement, four decisions about whether
+ * the biography was set at card width or at the reading measure, and four
+ * decisions about what a person with no photograph looks like. None of those is a
+ * hard problem. The reason the section is worth a Block is the opposite of the
+ * usual one, which is that it is where a marketing page is most tempted to make a
+ * claim about a person: a card with a portrait and a job title under it reads as
+ * an endorsement, so the arrangement this Block ships keeps the person's own name
+ * as the anchor, keeps the role in the words the consumer wrote, and refuses to
+ * invent either.
+ *
+ * **The biography is not truncated, and the caller is the one who decides how long
+ * it is.** A Block that cut a biography at three lines with an ellipsis would be
+ * deciding which part of a person's account of their own work matters, and it
+ * would do it by cutting mid-sentence, which is the one place a truncation is
+ * guaranteed to remove the qualification rather than the flattery. So the bio is
+ * rendered at the measure and at whatever length the caller passed, and a caller
+ * who wants three lines writes three lines. The cost is stated rather than
+ * hidden: a card grid with six two-paragraph biographies is a very tall page, and
+ * the fix is the caller's editing rather than this Block's ellipsis.
+ *
+ * **`avatar-group` is deliberately not composed here.** It is the right
+ * Component for a set a page is summarising rather than showing: a row of
+ * overlapping discs with a count for the rest is a statement that the set is
+ * longer than the space. A team page shows every person, because the person is
+ * the content, so the count would replace a person with a numeral. The one place
+ * a group belongs on a team page is a related section about a project, and that
+ * is a caller's row rather than this Block's job.
+ *
+ * **A card with a destination is a native anchor wrapping the card, so the focus
+ * ring bounds the card rather than the words inside it.** That is the argument
+ * `Item` states in full and it is the reason the anchor sits outside the surface
+ * here. The link's words are drawn inside it as the trailing label, and the
+ * label is required whenever the link is, because a link announced by its address
+ * is a link a reader cannot follow. A person with no `href` is not a disabled
+ * link: the card is a card.
+ *
+ * The card title is composed at `childLevel(headingLevel)` rather than at a fixed
+ * level, so a team grid embedded one level deeper than it was written for carries
+ * its titles with it. An empty set renders nothing, for the reason
+ * `ProductSwitcher` and `AvatarGroup` each state: an empty frame is worse than an
+ * absent one, and a team page with nobody on it has nothing to say.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. The
+ * portrait is `Avatar`, which is a client Component whose only client work is
+ * measuring whether an image has loaded, so a grid of twelve people costs no
+ * JavaScript from this module beyond that.
+ */
+export function Team01({ eyebrow, title, description, people, variant = 'cards', highlight, headingLevel = 'h2', className, }) {
+    if (people.length === 0)
+        return null;
+    assertPeople(people, highlight);
+    const Title = childLevel(headingLevel);
+    const marked = (id) => highlight?.includes(id) === true;
+    return (_jsxs(Section, { className: className, children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, variant === 'list' ? (_jsx("ul", { "data-slot": "team", "data-variant": variant, className: "flex flex-col", children: people.map((person) => {
+                    const row = (_jsxs(_Fragment, { children: [person.avatar === undefined ? null : (_jsxs(Avatar, { className: "size-10", children: [person.avatar.src === undefined ? null : (_jsx(AvatarImage, { src: person.avatar.src, alt: "" })), _jsx(AvatarFallback, { children: initialsOf(person.avatar.name) })] })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-sm font-semibold", children: person.name }), _jsx("span", { className: "text-muted-foreground text-sm", children: person.role }), person.bio === undefined ? null : (_jsx("p", { className: "text-muted-foreground max-w-measure text-pretty text-sm", children: person.bio }))] }), person.hrefLabel === undefined ? null : (_jsx("span", { className: "text-muted-foreground shrink-0 text-sm", children: person.hrefLabel }))] }));
+                    return (_jsx("li", { "data-slot": "team-item", "data-person": person.id, "data-highlighted": marked(person.id) ? 'true' : undefined, className: cn('border-border border-b first:border-t', marked(person.id) ? 'border-primary border-l-2 pl-4' : ''), children: person.href === undefined ? (_jsx("div", { className: "flex items-start gap-4 py-5", children: row })) : (_jsx("a", { "data-slot": "team-link", href: person.href, className: "hover:bg-accent/50 focus-visible:ring-ring flex items-start gap-4 rounded-sm px-2 py-5 transition-colors duration-fast ease-out focus-visible:ring-[3px] focus-visible:outline-none", children: row })) }, person.id));
+                }) })) : (_jsx("ul", { "data-slot": "team", "data-variant": variant, className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: people.map((person) => {
+                    const card = (_jsxs(Card, { className: cn('h-full gap-4 py-6', marked(person.id) ? 'border-primary' : ''), children: [_jsxs(CardHeader, { className: "gap-2.5", children: [person.avatar === undefined ? null : (_jsxs(Avatar, { className: "size-16", children: [person.avatar.src === undefined ? null : (_jsx(AvatarImage, { src: person.avatar.src, alt: "" })), _jsx(AvatarFallback, { children: initialsOf(person.avatar.name) })] })), _jsx(CardTitle, { as: Title, children: person.name }), _jsx("p", { className: "text-muted-foreground text-sm", children: person.role })] }), person.bio === undefined ? null : (_jsx(CardContent, { className: "text-muted-foreground max-w-measure text-pretty text-sm", children: person.bio })), person.hrefLabel === undefined ? null : (_jsx(CardFooter, { className: "text-muted-foreground text-sm", children: person.hrefLabel }))] }));
+                    return (_jsx("li", { "data-slot": "team-item", "data-person": person.id, "data-highlighted": marked(person.id) ? 'true' : undefined, className: "h-full", children: person.href === undefined ? (card) : (_jsx("a", { "data-slot": "team-link", href: person.href, className: "focus-visible:ring-ring block h-full rounded-xl transition-opacity duration-fast ease-out hover:opacity-80 focus-visible:ring-[3px] focus-visible:outline-none", children: card })) }, person.id));
+                }) }))] }));
+}
+export default Team01;

package/dist/blocks/testimonial-01/index.d.ts

@@ -0,0 +1,3 @@
+export { Testimonial01, default } from './testimonial.js';
+export type { Testimonial01Props, Testimonial01Quote } from './testimonial.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/testimonial-01/index.d.ts.map

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

package/dist/blocks/testimonial-01/index.js

@@ -0,0 +1 @@
+export { Testimonial01, default } from './testimonial.js';

package/dist/blocks/testimonial-01/testimonial.d.ts

@@ -0,0 +1,173 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One quote and the person it is attributed to.
+ *
+ * `id` is separate from `name` for the reason every id in this package is
+ * separate from its display text: `format="pair"` matches on it, and a name is
+ * display content a consumer may correct in one release and not the other.
+ */
+export type Testimonial01Quote = {
+    /** Stable identity, used for the key and for the pair's column matching. */
+    id: string;
+    /** The words, as the caller composes them. A node so a caller can mark one. */
+    quote: ReactNode;
+    /**
+     * The person quoted.
+     *
+     * Required, and it is the only required field after the words themselves,
+     * because a quote with no name is a sentence the reader cannot weigh. See the
+     * JSDoc on the Block.
+     */
+    name: string;
+    /**
+     * What the person does, in the product's own words.
+     *
+     * A separate field from `company` rather than one `byline` string, and the
+     * reason is the shape of the data. A quote whose speaker has a role and no
+     * company, a consultant, a regulator, an author, would otherwise have to write
+     * something in the company field to fill it, and the two common workarounds are
+     * both worse than an empty field: a consumer writes "Independent" and publishes
+     * a claim about a person's employment status, or they concatenate the two into
+     * one string and lose the ability to link the company.
+     */
+    role?: string;
+    /** The organisation the person speaks for, when there is one. */
+    company?: string;
+    /**
+     * Where the organisation's own page is, when there is one.
+     *
+     * Rendered as a real anchor with the company as its accessible name, so a
+     * reader hears "NaniSoft, link" rather than a bare URL and can follow it. Omit
+     * it and the company is text, which is the right answer when the company has no
+     * page of its own.
+     */
+    companyUrl?: string;
+    /**
+     * The person's picture, and what to show when there is none.
+     *
+     * `src` and `name` are both the caller's and the pairing is the point: `name` is
+     * what the fallback shows, so a caller supplies the initials or monogram they
+     * want rather than accepting ones this Block derived. See the JSDoc on the
+     * Block for why Prism does not extract them.
+     */
+    avatar?: {
+        src?: string;
+        name: string;
+    };
+};
+/**
+ * The props a Testimonial01 takes.
+ *
+ * Every string is a prop and the Block ships none: no quote, no name, no role, no
+ * company and no avatar text. A testimonial is the one place on a marketing page
+ * where a hardcoded name is a claim about a real person, which is a different kind
+ * of wrong from a hardcoded price.
+ */
+export type Testimonial01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: ReactNode;
+    /**
+     * The section title.
+     *
+     * Optional, unlike a section that introduces a set. A testimonial band placed
+     * between a case study and a pricing table often has nothing to add to what is
+     * above it, and a heading invented to fill the space is a heading nobody
+     * wanted.
+     */
+    title?: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /**
+     * The quotes, in the order a reader should meet them.
+     *
+     * `format="single"` takes exactly one and `format="pair"` takes exactly two.
+     * A count that does not match is a thrown diagnostic rather than a short row,
+     * for the reason the matrix throws: a testimonial that quietly drops its third
+     * quote is a product that decided a reader was not meant to read it.
+     */
+    quotes: readonly Testimonial01Quote[];
+    /**
+     * Which form the quotes take.
+     *
+     * `single` is the default because one quote read well is worth more than three
+     * read quickly, and a band of four is a carousel with better manners. `pair` is
+     * two columns, which is the most a reader can hold side by side before the
+     * attributions start to blur.
+     *
+     * @defaultValue 'single'
+     */
+    format?: 'single' | 'pair';
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /** Layout classes for the band. Layout only; every visual property is Prism's. */
+    className?: string;
+};
+/**
+ * One quote with an attribution, or two side by side.
+ *
+ * **The attribution is the load-bearing part, and everything else on this Block is
+ * arranged around it.** A quote with no name is a sentence the reader cannot
+ * weigh: an unattributed sentence on a marketing page is a claim the page makes
+ * about itself, wearing somebody's voice, and a reader who is weighing whether to
+ * trust the product has nothing to weigh it against. A quote with a name and no
+ * role is only slightly better, because a name is a name and a reader cannot tell
+ * a user from the person who wrote the thing they are using.
+ *
+ * **So `role` and `company` are two optional fields and not one `byline` string,
+ * and the reason is the shape of the data rather than the shape of the layout.** A
+ * testimonial whose speaker has a role and no company is ordinary: a consultant, a
+ * regulator, an auditor, an author, an engineer who has left. One `byline` string
+ * would have forced that speaker to put something in the company half, and the two
+ * workarounds available at the time were both worse than an empty field. A
+ * consumer writes "Independent" and publishes a claim about somebody's employment
+ * status that may be false. Or the consumer concatenates the two into one string
+ * and loses the ability to link the company, which is the half a reader most wants
+ * to follow. Two fields cost a consumer one extra line and cost this Block
+ * nothing, and the two are laid out as two items in one caption line rather than
+ * as one concatenated string, so a reader is not left parsing a byline and working
+ * out where the role ends and the employer begins. The cost of the decision is
+ * that a caller who wants a single unbroken byline has to write the punctuation
+ * themselves, which is the right way round: it is their name and their voice.
+ *
+ * **`companyUrl` renders a real anchor, and the company is its accessible name.**
+ * The alternative was a bare URL under the attribution, which is a link a reader
+ * has to read character by character and a link whose destination is announced as
+ * punctuation. The anchor also carries the full-strength focus ring the rest of
+ * this package draws, because a bare anchor in a `figcaption` is the one link on
+ * the page a keyboard reader is most likely to reach without having seen.
+ *
+ * **`avatar.name` is the caller's fallback text and Prism does not derive it.** The
+ * obvious Block would take a `name` and take the initials from it, and that is a
+ * claim about the grammar of names in a language this repository has no data for:
+ * one word, two words, a surname first, a patronymic, a suffix, a name that is
+ * written with a space in it. So the fallback is the caller's own short string, and
+ * a caller who wants a monogram writes the monogram. The image's `alt` is empty
+ * rather than the person's name, for the reason `Avatar`'s JSDoc gives: the
+ * attribution beside it already identifies the person, and an `alt` repeating that
+ * name is the same sentence twice.
+ *
+ * **There is no carousel and nothing advances.** `DESIGN.md`'s Motion section
+ * refuses an attention loop, and a testimonial that moves is a testimonial a
+ * reader cannot finish reading. A quote is a sentence somebody chose to say about
+ * a product they use, and the reader is being asked to weigh it; swapping it out
+ * from under them mid-sentence is the opposite of being asked, and an
+ * auto-advancing quote is a quote the reader has to outrun. The consequence is
+ * that a reader who wants more quotes scrolls, and a product with twenty
+ * testimonials ships a `pair` twice or a page of them rather than a control. That
+ * is a real cost: a carousel is shorter, and this is a Block that cannot be made
+ * shorter. The rejected alternative was a manual carousel, which is the same
+ * component with the motion taken out and the truncation left in.
+ *
+ * **The count must match the form, and it throws rather than truncating.** See
+ * `Testimonial01Props.quotes`. `format="single"` with three quotes would render one
+ * of them and drop two, and a dropped testimonial is a product that decided a
+ * reader was not meant to read it.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. It
+ * composes `Avatar`, which ships its own client directive, so a consumer who
+ * passes no `avatar` pays for nothing.
+ */
+export declare function Testimonial01({ eyebrow, title, description, quotes, format, headingLevel, className, }: Testimonial01Props): import("react").JSX.Element;
+export default Testimonial01;
+//# sourceMappingURL=testimonial.d.ts.map

package/dist/blocks/testimonial-01/testimonial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.d.ts","sourceRoot":"","sources":["../../../src/blocks/testimonial-01/testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAA;IACV,+EAA+E;IAC/E,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CACxC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACrC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAwFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,MAAiB,EACjB,YAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,+BA0CpB;AAED,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from '../../components/ui/avatar.js';
+import { Card, CardContent } from '../../components/ui/card.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/** One quote: the words, then the person they are attributed to. */
+function Quote({ quote, name, role, company, companyUrl, avatar, Name, }) {
+    return (_jsx(Card, { "data-slot": "testimonial-quote", className: "gap-4", children: _jsx(CardContent, { children: _jsxs("figure", { className: "flex flex-col gap-4", children: [_jsx("blockquote", { "data-slot": "testimonial-text", className: "text-pretty text-base leading-relaxed", children: quote }), _jsxs("figcaption", { "data-slot": "testimonial-attribution", className: "text-muted-foreground flex items-center gap-3 text-sm", children: [avatar ? (_jsxs(Avatar, { className: "size-9", children: [avatar.src ? _jsx(AvatarImage, { src: avatar.src, alt: "" }) : null, _jsx(AvatarFallback, { children: avatar.name })] })) : null, _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(Name, { className: "text-foreground text-sm font-medium", children: name }), role || company ? (_jsxs("span", { className: "flex flex-wrap items-center gap-x-2", children: [role ? _jsx("span", { children: role }) : null, company ? (companyUrl ? (_jsx("a", { href: companyUrl, rel: "noopener noreferrer", className: "focus-visible:ring-ring rounded-xs underline underline-offset-4 outline-none focus-visible:ring-[3px]", children: company })) : (_jsx("span", { children: company }))) : null] })) : null] })] })] }) }) }));
+}
+/**
+ * One quote with an attribution, or two side by side.
+ *
+ * **The attribution is the load-bearing part, and everything else on this Block is
+ * arranged around it.** A quote with no name is a sentence the reader cannot
+ * weigh: an unattributed sentence on a marketing page is a claim the page makes
+ * about itself, wearing somebody's voice, and a reader who is weighing whether to
+ * trust the product has nothing to weigh it against. A quote with a name and no
+ * role is only slightly better, because a name is a name and a reader cannot tell
+ * a user from the person who wrote the thing they are using.
+ *
+ * **So `role` and `company` are two optional fields and not one `byline` string,
+ * and the reason is the shape of the data rather than the shape of the layout.** A
+ * testimonial whose speaker has a role and no company is ordinary: a consultant, a
+ * regulator, an auditor, an author, an engineer who has left. One `byline` string
+ * would have forced that speaker to put something in the company half, and the two
+ * workarounds available at the time were both worse than an empty field. A
+ * consumer writes "Independent" and publishes a claim about somebody's employment
+ * status that may be false. Or the consumer concatenates the two into one string
+ * and loses the ability to link the company, which is the half a reader most wants
+ * to follow. Two fields cost a consumer one extra line and cost this Block
+ * nothing, and the two are laid out as two items in one caption line rather than
+ * as one concatenated string, so a reader is not left parsing a byline and working
+ * out where the role ends and the employer begins. The cost of the decision is
+ * that a caller who wants a single unbroken byline has to write the punctuation
+ * themselves, which is the right way round: it is their name and their voice.
+ *
+ * **`companyUrl` renders a real anchor, and the company is its accessible name.**
+ * The alternative was a bare URL under the attribution, which is a link a reader
+ * has to read character by character and a link whose destination is announced as
+ * punctuation. The anchor also carries the full-strength focus ring the rest of
+ * this package draws, because a bare anchor in a `figcaption` is the one link on
+ * the page a keyboard reader is most likely to reach without having seen.
+ *
+ * **`avatar.name` is the caller's fallback text and Prism does not derive it.** The
+ * obvious Block would take a `name` and take the initials from it, and that is a
+ * claim about the grammar of names in a language this repository has no data for:
+ * one word, two words, a surname first, a patronymic, a suffix, a name that is
+ * written with a space in it. So the fallback is the caller's own short string, and
+ * a caller who wants a monogram writes the monogram. The image's `alt` is empty
+ * rather than the person's name, for the reason `Avatar`'s JSDoc gives: the
+ * attribution beside it already identifies the person, and an `alt` repeating that
+ * name is the same sentence twice.
+ *
+ * **There is no carousel and nothing advances.** `DESIGN.md`'s Motion section
+ * refuses an attention loop, and a testimonial that moves is a testimonial a
+ * reader cannot finish reading. A quote is a sentence somebody chose to say about
+ * a product they use, and the reader is being asked to weigh it; swapping it out
+ * from under them mid-sentence is the opposite of being asked, and an
+ * auto-advancing quote is a quote the reader has to outrun. The consequence is
+ * that a reader who wants more quotes scrolls, and a product with twenty
+ * testimonials ships a `pair` twice or a page of them rather than a control. That
+ * is a real cost: a carousel is shorter, and this is a Block that cannot be made
+ * shorter. The rejected alternative was a manual carousel, which is the same
+ * component with the motion taken out and the truncation left in.
+ *
+ * **The count must match the form, and it throws rather than truncating.** See
+ * `Testimonial01Props.quotes`. `format="single"` with three quotes would render one
+ * of them and drop two, and a dropped testimonial is a product that decided a
+ * reader was not meant to read it.
+ *
+ * It is a server Component: no hook, no state and no client code of its own. It
+ * composes `Avatar`, which ships its own client directive, so a consumer who
+ * passes no `avatar` pays for nothing.
+ */
+export function Testimonial01({ eyebrow, title, description, quotes, format = 'single', headingLevel = 'h2', className, }) {
+    const wanted = format === 'pair' ? 2 : 1;
+    if (quotes.length !== wanted) {
+        throw new Error(`Testimonial01: format is '${format}', which takes ${wanted} quote(s), and ${quotes.length} were ` +
+            'passed. A testimonial that quietly drops the ones past the count is a product deciding a reader ' +
+            'was not meant to read them, so the mismatch is refused rather than truncated.');
+    }
+    // The person quoted is the section's child title, for the reason the JSDoc gives:
+    // a reader navigating by heading should reach the name as well as the words.
+    const AttributionName = 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", { "data-slot": "testimonial", "data-format": format, className: cn('grid gap-6', format === 'pair' ? 'lg:grid-cols-2' : 'max-w-measure', className), children: quotes.map((entry) => (_jsx(Quote, { ...entry, Name: AttributionName }, entry.id))) })] }));
+}
+export default Testimonial01;

package/dist/blocks/todo-01/index.d.ts

@@ -0,0 +1,3 @@
+export { Todo01, default } from './todo.js';
+export type { Todo01Props, Todo01Task, Todo01Form } from './todo.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/todo-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/todo-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAKxC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA"}

package/dist/blocks/todo-01/index.js

@@ -0,0 +1 @@
+export { Todo01, default } from './todo.js';