@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/milestone-timeline-01/milestone-timeline.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Progress } from '../../components/ui/progress.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { Status } from '../../components/ui/status.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The mark each of the three states draws.
+ *
+ * The three differ by fill before they differ by colour, for the reason
+ * `steps.tsx` states in full: a filled mint disc and a mint outline are the same
+ * picture narrowed to one channel, and a reader who cannot separate them is being
+ * told the same thing about two different milestones. `current` is the only one
+ * that carries words, and that is what makes a state column of three shapes
+ * honest rather than colour-coded.
+ */
+const MARK = {
+    complete: 'bg-primary border-primary',
+    current: 'bg-background border-brand-ink',
+    upcoming: 'bg-muted border-border',
+};
+/**
+ * A dated sequence of what a system reached: when, what, and how far along it
+ * was, on a rail with a rule down one side and a fill per milestone.
+ *
+ * **What this is not, and it has to be sharp because two sibling items exist and
+ * a reader will meet all three.** The three differ by tense and by whether the
+ * sequence is still running, and nothing else, so the differences are worth
+ * stating as exactly that. `timeline.tsx` is a Component, not a Block, and it
+ * shows where a **run** has got to **as it happens**: it is fed events, it has
+ * four run states of its own (`pending`, `running`, `done`, `failed`), it scales
+ * each step's duration against the longest step in the run, and one of its states
+ * moves. It is a `live` concern, and a reader who met one of those on a page
+ * would be told something about the product is running right now. `story-01` is
+ * a Block, and it arranges a company's **past** in the **past tense**: a history,
+ * dated, in the order it happened, with a figure beside some of the entries and
+ * no state on any of them, because a history has nothing to be current about.
+ * This Block is a Block too, and it shows a system's **reached and not yet** state
+ * with a **fill per milestone**, and that is the middle case: it has a future, so
+ * it has an `upcoming`, and it has a position, so exactly one of its milestones
+ * may be `current` and that one is named. A consumer who has a run wants
+ * `Timeline`, a consumer who has a company wants `story-01`, and a consumer who
+ * has a system that has got to where it is now, and has not got to the rest of
+ * it, wants this.
+ *
+ * **The fill is `Progress`, and a filled bar drawn here would be a second
+ * implementation of a Component whose accessibility was already worked out.**
+ * Three states in a row is what `steps.tsx` already owns, and a Block that
+ * re-drew the rule would be a second implementation of a Component whose
+ * accessibility was already worked out. The same argument settles the bar: a
+ * hand-drawn filled bar is a div with a width on it, and a div with a width is a
+ * picture of a value that no screen reader, no crawler and no print stylesheet can
+ * read, which is the exact failure `Progress` exists to close, because it exposes
+ * the value, the minimum and the maximum through ARIA and takes the words for it
+ * through `valueText`. The cost of composing it rather than drawing is real
+ * and is named here: `Progress` is a client Component over Base UI, so a
+ * milestone that carries a `progress` is a client island, and a consumer with
+ * eight milestones all carrying one is paying for eight. The answer is to leave
+ * `progress` off the milestones that are moments, which is what the prop's own
+ * documentation says.
+ *
+ * **The words travel as a string and not as a function, and that is the server
+ * boundary rather than a preference.** This Block is a server Component and
+ * `Progress` is a client one, so a callback prop handed down from here is a build
+ * error: the two halves do not share a runtime, and a function cannot be
+ * serialised across the seam. It called `getAriaValueText={(v) => progressLabel(v)}`
+ * first, and the whole roster failed to prerender on the first milestone that
+ * carried a bar. `Progress` therefore publishes `valueText` for exactly this case
+ * and throws when a caller gives it both forms, so the ambiguity is reported
+ * rather than resolved by whichever prop the framework happened to read last.
+ *
+ * **`progressLabel` is required whenever a milestone carries a `progress`, and
+ * the reason is that the number is not a sentence and does not know its unit.**
+ * A milestone's bar is a percentage of something this Block cannot see, and
+ * sixty per cent of a migration is not the same fact as sixty per cent of a
+ * rollout of a policy, so the bar alone announces a bare figure that means
+ * whatever the reader assumes. The label is the caller's because the thing being
+ * measured is the caller's, and the same argument as `RelativeTime` applies to the
+ * rest of this surface: a sentence about a caller's own quantity cannot be
+ * authored here, because Prism does not know the unit, the period, or what the
+ * bar is a bar of.
+ *
+ * **`nowLabel` is required whenever a milestone is `current`, and the reason is
+ * the one this package keeps arriving at from three directions.** A mark is a
+ * shape, and a reader who cannot separate the emphasis ink from the border colour
+ * has learned nothing from it; a `current` milestone is the one row a reader may
+ * act on, and an unnamed current row is a row a reader has to guess the
+ * importance of. `StatusLedger01` requires its words for the same reason,
+ * `InstrumentPanel01` throws on a state with no label beside it, and the copy gate
+ * holds the close button of a dialog for it. The Block throws rather than
+ * shipping a state a reader can only see.
+ *
+ * **A milestone with no state draws a tick and not one of the three marks.**
+ * That is a small decision with a large one behind it. The three state marks all
+ * say something: this one is reached, this one is where the system is, this one
+ * has not happened. A caller who passes no `state` has said none of those, and the
+ * Block cannot pick one on their behalf, because the two available guesses are
+ * both wrong in a way a reader would act on. Drawing it as `complete` claims the
+ * system got there, and a milestone the team is still working on would then read
+ * as done. Drawing it as `upcoming` claims it has not, and a milestone that
+ * finished last year would then read as pending. So the row draws a bare hairline
+ * on the rail, which reads as a mark that has nothing to say, and the sequence is
+ * still complete and legible without it.
+ *
+ * **`at` is a string rather than a `Date`, so the caller keeps its own locale.**
+ * See the field's own documentation above. A `Date` prop would carry a timezone
+ * and a calendar into a Block that formats nothing, and the honest way to render
+ * a moment in a caller's language is the caller's to compose: `RelativeTime` for
+ * a localised absolute reading with the relative words handed back, or the
+ * platform's `Intl.DateTimeFormat` for a fixed one.
+ *
+ * **One `<ol>`, and the rail is not a second list.** A sequence drawn as a row
+ * per group would be several lists, and a screen reader would announce it as
+ * several. The milestones are one ordered list, the spine is a decorative span
+ * inside each entry and is `aria-hidden`, so the sequence is read from the
+ * entries and not from a rule. The spine runs from the mark to the bottom of its
+ * own entry and the last entry draws none, which is the detail that separates a
+ * rail from a border.
+ *
+ * A milestone title is a heading one step below the section, derived rather than
+ * written, so a Block embedded one level deeper carries its headings with it. A
+ * body of more than about four lines stops being a milestone body, and the detail
+ * belongs above the rail in `description` or in the caller's own figure.
+ *
+ * It is a server Component: no hook, no state, no client code of its own and no
+ * router. The only client code it can pull in is one `Progress` island per
+ * milestone that asks for a fill.
+ */
+export function MilestoneTimeline01({ eyebrow, title, description, milestones, nowLabel, progressLabel, headingLevel = 'h2', className, }) {
+    /*
+     * The announced sentence for a bar, bound once after the guard below.
+     *
+     * The guard throws for a milestone that carries a `progress` with no
+     * `progressLabel`, so by the time anything renders the pair is complete. The
+     * type cannot see that, because the guard is a loop over the array above the
+     * return rather than a narrowing statement on the value being used, so a
+     * closure is bound here and the render reads one name. `labelProgress` never
+     * returns an empty string: the guard has already refused that case, and a
+     * second refusal inside the render would be the same diagnostic twice.
+     */
+    const labelProgress = (value) => {
+        if (progressLabel === undefined) {
+            throw new Error('MilestoneTimeline01: reached the bar with no progressLabel, which the guard above should have ' +
+                'refused. The two are separate so that the diagnostic names the prop rather than the render.');
+        }
+        return progressLabel(value);
+    };
+    for (const milestone of milestones) {
+        if (milestone.state === 'current' && !nowLabel) {
+            throw new Error('MilestoneTimeline01: a milestone is the current state and no nowLabel was passed, so the one ' +
+                'row a reader might act on would be a ring they can only see. Pass the words your readers use ' +
+                'for where the system is now, or drop the current state.');
+        }
+        if (milestone.progress !== undefined && !progressLabel) {
+            throw new Error('MilestoneTimeline01: a milestone carries a progress and no progressLabel was passed, so the ' +
+                'bar would announce a bare number that means whatever the reader assumes it is a percentage of. ' +
+                'Pass the words for the value, or drop the progress.');
+        }
+        if (milestone.href !== undefined && !milestone.hrefLabel) {
+            throw new Error('MilestoneTimeline01: a milestone carries an href with no hrefLabel, so the link would be ' +
+                'announced by its destination alone. A milestone name is a name, and the sentence saying that ' +
+                'following the link is a thing you can do belongs to the caller.');
+        }
+    }
+    if (milestones.length === 0)
+        return null;
+    const Title = childLevel(headingLevel);
+    return (_jsxs(Section, { children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" }), _jsx("ol", { "data-slot": "milestone-timeline", className: cn('flex flex-col', className), children: milestones.map((milestone, index) => {
+                    const isLast = index === milestones.length - 1;
+                    return (_jsxs("li", { "data-slot": "milestone", "data-state": milestone.state ?? 'unstated', className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4", children: [_jsxs("div", { "data-slot": "milestone-track", "aria-hidden": true, className: "flex flex-col items-center", children: [milestone.state === undefined ? (_jsx("span", { "data-slot": "milestone-tick", className: "bg-border mt-3 h-px w-3 shrink-0" })) : (_jsx("span", { "data-slot": "milestone-marker", className: cn('mt-2 size-2.5 shrink-0 rounded-full border-2', MARK[milestone.state]) })), _jsx("span", { "data-slot": "milestone-spine", className: cn('bg-border w-px flex-1', isLast && 'hidden') })] }), _jsxs("div", { "data-slot": "milestone-body", className: cn('flex min-w-0 flex-col gap-2', isLast ? 'pb-0' : 'pb-10'), children: [_jsxs("div", { "data-slot": "milestone-when", className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx("span", { "data-slot": "milestone-at", className: "text-muted-foreground font-mono text-xs", children: milestone.at }), milestone.state === 'current' ? (_jsx(Status, { size: "sm", tone: "info", label: nowLabel })) : null] }), _jsx(Title, { className: "text-lg tracking-tight", children: milestone.title }), milestone.body === undefined ? null : (_jsx("p", { "data-slot": "milestone-copy", className: "text-muted-foreground text-pretty text-sm", children: milestone.body })), milestone.progress === undefined ? null : (_jsx("div", { "data-slot": "milestone-progress", className: "max-w-measure pt-1", children: _jsx(Progress, { value: milestone.progress, valueText: labelProgress(milestone.progress) }) })), milestone.href === undefined ? null : (_jsx("div", { "data-slot": "milestone-action", className: "pt-1", children: _jsx(CtaLink, { href: milestone.href, size: "sm", variant: "ghost", children: milestone.hrefLabel }) }))] })] }, milestone.id));
+                }) })] }));
+}
+export default MilestoneTimeline01;

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

@@ -0,0 +1,3 @@
+export { Newsletter01, default } from './newsletter.js';
+export type { Newsletter01Props, Newsletter01Status, NewsletterValue } from './newsletter.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,216 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * The one thing this Block collects, and the whole of what it hands over.
+ *
+ * **A shape rather than a bare string, and the reason is what a transport needs.**
+ * `email` alone would be the minimum, and it is not wrong. It is just that the
+ * moment a caller stores a subscription, the two questions that arrive next are
+ * which consent they recorded and when, and an object they receive is a place to
+ * answer them while a bare string is a place to reconstruct them from whatever
+ * happened to be in scope at the call site. The alternative was to hand over the
+ * form's own `SubmitEvent` the way `AuthForm01` does, which puts the address
+ * behind `FormData` at the consumer and makes every one of them write the same
+ * eight lines. Prism reads the value out of the form and hands over the value.
+ */
+export type NewsletterValue = {
+    /** What the reader typed, exactly as they typed it. Prism validates nothing. */
+    email: string;
+};
+/**
+ * The outcome of the caller's own request, as the Block draws it.
+ *
+ * **`message` is the caller's sentence and Prism has no default for it, because
+ * there is no default that is true.** "You are subscribed" is a claim about a list
+ * Prism never joined, "Something went wrong" is a claim about a failure Prism never
+ * saw, and "Thanks" is a claim about a reader's day. So `state` is a machine value
+ * the Block can act on and `message` is a node the caller has to supply, and a
+ * `status` with no message draws nothing at all.
+ *
+ * The four states are the four a request actually has: not started, in flight,
+ * finished, refused. `error` is a state and not a fifth kind of message, because a
+ * caller that draws a failure as ordinary body copy is a caller whose failure is
+ * the same size as its success.
+ */
+export type Newsletter01Status = {
+    /**
+     * Which of the four the request is in. Read by the Block for exactly two things:
+     * the submit control is disabled while it reads `sending`, and the live region
+     * is marked busy. Nothing else.
+     */
+    state: 'idle' | 'sending' | 'sent' | 'error';
+    /** The words for that state, in the product's own voice. */
+    message: ReactNode;
+};
+/** The props a Newsletter01 takes. Every string in this Block is one of them. */
+export type Newsletter01Props = {
+    /** The short line above the title, usually what the list is. */
+    eyebrow?: ReactNode;
+    /** The heading. Required, because a band with no heading is a form in a page. */
+    title: ReactNode;
+    /** One supporting line under the heading, for the part the title cannot carry. */
+    description?: ReactNode;
+    /**
+     * Called with the address when the reader submits, and the only thing this Block
+     * does with the address.
+     *
+     * **Required, and the requirement is the design.** There is no arm of this
+     * component in which an address is collected and then nothing happens, because
+     * there is no way for Prism to know what should happen to it. The obvious
+     * alternative is an `onSubmit` that is optional, with a form that renders and
+     * does nothing when it is absent, and that is a form which collects a personal
+     * datum, displays it back to the reader, and then discards it without telling
+     * anyone. Making the handler required moves the question to the caller, where it
+     * is answerable.
+     */
+    onSubmit: (value: NewsletterValue) => void;
+    /**
+     * The address, as the caller holds it, which makes the field controlled.
+     *
+     * Optional because a reader's own address in an uncontrolled field is ordinary
+     * for a form that hands the value over at submit and is gone. Pair it with
+     * `onSubmit` when the caller has to look the address up before sending it, which
+     * is the case where the caller also has to be able to clear the field.
+     */
+    value?: string;
+    /** The address the field starts with, for an uncontrolled field. */
+    defaultValue?: string;
+    /**
+     * What the reader is told happens to the address: the frequency, the sender, the
+     * way out.
+     *
+     * **Required, and this is the second half of the design.** A newsletter form
+     * that can be shipped without saying what happens to the address is a form that
+     * lets a consumer make a promise they did not write, in the one place on the page
+     * where the reader is about to hand over something personal. Prism is not in a
+     * position to write that sentence: the frequency, the sender and the unsubscribe
+     * route are facts about the caller's list, and any sentence Prism produced would
+     * be inherited verbatim by every product that installs this Block and would be
+     * wrong for at least one of them. So the sentence is required rather than
+     * optional, and it is wired to the field as its description rather than left
+     * floating under the form, so a screen reader announces it with the control the
+     * reader is about to type into rather than as a footnote they may never reach.
+     */
+    consent: ReactNode;
+    /** The label on the one control, in the product's own words. */
+    submitLabel: string;
+    /**
+     * The outcome of the caller's request, drawn in a live region and announced.
+     *
+     * **A prop and never a state this Block writes, and the reason is the sentence
+     * Prism refuses to ship.** A form that owns its own success message renders one
+     * the moment `onSubmit` returns, and that sentence then belongs to every consumer
+     * of the Block: it is published by the corpus as part of this Block's own
+     * documentation and it is read on a page about a list Prism never joined. It is
+     * also the one sentence on the page most certainly wrong, because the outcomes a
+     * real request has are a subscription, a duplicate, a soft bounce, a hard bounce,
+     * a rate limit and a consent withdrawal, and one sentence cannot be true of all
+     * six. So Prism holds no pending, no sent and no failed flag, `LiveRegion`
+     * renders nothing at all while there is no message, and the caller passes the
+     * sentence it means. The cost is that a consumer wires four states into its own
+     * handler instead of getting them for free, and that is the correct place for it:
+     * the four states are the consumer's transport, not this frame's.
+     */
+    status?: Newsletter01Status;
+    /**
+     * The field's visible label, and the accessible name a screen reader announces.
+     *
+     * Required, and a `string` rather than a node because an address field has one
+     * name and "Email" or "Your email address" is the whole of it. A control with no
+     * name is announced as "text field", which is the one name every other field on
+     * the page shares.
+     */
+    label: string;
+    /**
+     * Whether the field and the control share a row or stack.
+     *
+     * `inline` is right where the section is narrow in words and wide in space, which
+     * is most landing pages. `stacked` is right everywhere the address is long, and
+     * it is the safe default to reach for when a page is already narrow. There is no
+     * third arrangement that changes Prism's drawing rather than this Block's
+     * spacing, and the reason is that `className` is layout only: a caller who wants
+     * the control somewhere else composes this Block's pieces rather than reaching
+     * for the buttons, which is a decision they can see.
+     */
+    layout?: 'inline' | 'stacked';
+    /** Heading level for the section heading. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+};
+/**
+ * The band that takes an address: a heading, one field, one control, the line that
+ * says what happens to it, and a region that announces the outcome.
+ *
+ * **This Block renders no success message, and that is the whole argument of it.**
+ * Every other part of this component is ordinary: a section, a labelled field, a
+ * button and a live region, each of which a consumer could have written in a
+ * morning. The part that is not ordinary is the hole where the sentence "You are
+ * on the list" would go. A success message this package wrote is a sentence every
+ * consumer of the Block inherits, the corpus publishes it as this design system's
+ * own voice, and it is the single sentence on the page most certainly to be wrong,
+ * because the outcomes a real subscription request has are more than one and none
+ * of them is the one Prism would have guessed. So `status` is a prop, `onSubmit` is
+ * required, and a consumer who installs this Block owns the promise it makes.
+ *
+ * **`onSubmit` is required and the Block sends nothing, which is what makes it
+ * installable.** The alternative shape, the one this Block is shaped to refuse, is a
+ * component that collects an address and posts it to a route it guesses at: four
+ * consumers with four back ends then either patch it or rewrite it, and in the
+ * meantime the address has been handled, stored, retried, de-duplicated and
+ * forgotten by a piece of code that was installed to draw a form. Every one of
+ * those five is a decision about the caller's product and its data, and a frame
+ * that takes one of them is a frame that has to be replaced rather than configured.
+ * Handing the address over at submit keeps the frame a frame: a consumer who wants
+ * a transport writes one, and a consumer who already has one passes it straight in.
+ *
+ * **`consent` is required for the same reason in a different register.** A newsletter
+ * form that can be shipped without saying what happens to the address is a form
+ * that lets a consumer make a legal claim they did not write: the frequency, the
+ * sender and the way out are facts about the caller's list, and a Block that
+ * defaulted to a sentence about a generic list would publish it as the design
+ * system's voice to a product it knows nothing about. Requiring it also puts it
+ * where it is useful, wired to the field as the control's description, so a screen
+ * reader hears what will happen to the address as it focuses the address rather
+ * than after the reader has already typed it.
+ *
+ * **`status` is a prop and never an internal state Prism writes.** The reason is the
+ * one above and it is worth saying in the second form it takes: there is no
+ * internal `sent` flag, no internal `error` flag and no internal message anywhere
+ * in this file, so a consumer cannot accidentally inherit a success sentence by
+ * forgetting a prop. They either pass the sentence they mean or the region renders
+ * nothing, and a form with no outcome shown is a worse form than one with a wrong
+ * one.
+ *
+ * **`LiveRegion` renders nothing when it has nothing to say**, which is the correct
+ * shape and is also why a caller whose transport answers slowly should pass a
+ * `status` from the first paint with their own in-progress sentence rather than
+ * adding it later. Prism cannot hold the region open on the caller's behalf,
+ * because Prism does not know whether a message is ever coming, and a permanently
+ * present live region announces every unrelated state change of its ancestors.
+ *
+ * **The one thing Prism does with `status` is refuse a second press.** While the
+ * state reads `sending`, the submit control is disabled, because a second press
+ * while the first request is in flight is a duplicate subscription that no
+ * transport wants and that the caller cannot see. The control is disabled rather
+ * than replaced by a spinner, so the label never changes under the reader's finger
+ * and the live region carries the busy state instead. That is the whole of Prism's
+ * reading of the state, and it is stated here because the alternative is a Block
+ * that has begun to have opinions about the request.
+ *
+ * **This is one of the four items DESIGN.md's Known Open Items lists as deferred to
+ * v1.1**, alongside three Blocks that have since been written as well. The deferral
+ * was a specification of what was still to come rather than a decision not to build
+ * it, and this is that item arriving; the table in `DESIGN.md` still names it, and
+ * removing it from that row is a maintainer's line rather than this file's.
+ *
+ * It is a client Component, and the reason is the handler rather than the state.
+ * `onSubmit` is a function, a function is a piece of state, and state is a client
+ * module: a server component cannot hand an event handler down to a `<form>`, so a
+ * caller rendering this from a server component gets a form that submits and calls
+ * nothing. The rest of the rendering is a section and a field, which is the price
+ * of the argument above and not a claim about what else this Block might do.
+ */
+export declare function Newsletter01({ eyebrow, title, description, onSubmit, value, defaultValue, consent, submitLabel, status, label, layout, headingLevel, className, }: Newsletter01Props): import("react").JSX.Element;
+export default Newsletter01;
+//# sourceMappingURL=newsletter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"newsletter.d.ts","sourceRoot":"","sources":["../../../src/blocks/newsletter-01/newsletter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjD,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGxF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;IAC5C,4DAA4D;IAC5D,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,iFAAiF;AACjF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;;;;;;OAYG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC7B,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,OAAO,EACP,WAAW,EACX,MAAM,EACN,KAAK,EACL,MAAkB,EAClB,YAAmB,EACnB,SAAS,GACV,EAAE,iBAAiB,+BA0FnB;AAED,eAAe,YAAY,CAAA"}

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

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { Field, FieldDescription, FieldLabel } from '../../components/ui/field.js';
+import { Input } from '../../components/ui/input.js';
+import { LiveRegion } from '../../components/ui/live-region.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The band that takes an address: a heading, one field, one control, the line that
+ * says what happens to it, and a region that announces the outcome.
+ *
+ * **This Block renders no success message, and that is the whole argument of it.**
+ * Every other part of this component is ordinary: a section, a labelled field, a
+ * button and a live region, each of which a consumer could have written in a
+ * morning. The part that is not ordinary is the hole where the sentence "You are
+ * on the list" would go. A success message this package wrote is a sentence every
+ * consumer of the Block inherits, the corpus publishes it as this design system's
+ * own voice, and it is the single sentence on the page most certainly to be wrong,
+ * because the outcomes a real subscription request has are more than one and none
+ * of them is the one Prism would have guessed. So `status` is a prop, `onSubmit` is
+ * required, and a consumer who installs this Block owns the promise it makes.
+ *
+ * **`onSubmit` is required and the Block sends nothing, which is what makes it
+ * installable.** The alternative shape, the one this Block is shaped to refuse, is a
+ * component that collects an address and posts it to a route it guesses at: four
+ * consumers with four back ends then either patch it or rewrite it, and in the
+ * meantime the address has been handled, stored, retried, de-duplicated and
+ * forgotten by a piece of code that was installed to draw a form. Every one of
+ * those five is a decision about the caller's product and its data, and a frame
+ * that takes one of them is a frame that has to be replaced rather than configured.
+ * Handing the address over at submit keeps the frame a frame: a consumer who wants
+ * a transport writes one, and a consumer who already has one passes it straight in.
+ *
+ * **`consent` is required for the same reason in a different register.** A newsletter
+ * form that can be shipped without saying what happens to the address is a form
+ * that lets a consumer make a legal claim they did not write: the frequency, the
+ * sender and the way out are facts about the caller's list, and a Block that
+ * defaulted to a sentence about a generic list would publish it as the design
+ * system's voice to a product it knows nothing about. Requiring it also puts it
+ * where it is useful, wired to the field as the control's description, so a screen
+ * reader hears what will happen to the address as it focuses the address rather
+ * than after the reader has already typed it.
+ *
+ * **`status` is a prop and never an internal state Prism writes.** The reason is the
+ * one above and it is worth saying in the second form it takes: there is no
+ * internal `sent` flag, no internal `error` flag and no internal message anywhere
+ * in this file, so a consumer cannot accidentally inherit a success sentence by
+ * forgetting a prop. They either pass the sentence they mean or the region renders
+ * nothing, and a form with no outcome shown is a worse form than one with a wrong
+ * one.
+ *
+ * **`LiveRegion` renders nothing when it has nothing to say**, which is the correct
+ * shape and is also why a caller whose transport answers slowly should pass a
+ * `status` from the first paint with their own in-progress sentence rather than
+ * adding it later. Prism cannot hold the region open on the caller's behalf,
+ * because Prism does not know whether a message is ever coming, and a permanently
+ * present live region announces every unrelated state change of its ancestors.
+ *
+ * **The one thing Prism does with `status` is refuse a second press.** While the
+ * state reads `sending`, the submit control is disabled, because a second press
+ * while the first request is in flight is a duplicate subscription that no
+ * transport wants and that the caller cannot see. The control is disabled rather
+ * than replaced by a spinner, so the label never changes under the reader's finger
+ * and the live region carries the busy state instead. That is the whole of Prism's
+ * reading of the state, and it is stated here because the alternative is a Block
+ * that has begun to have opinions about the request.
+ *
+ * **This is one of the four items DESIGN.md's Known Open Items lists as deferred to
+ * v1.1**, alongside three Blocks that have since been written as well. The deferral
+ * was a specification of what was still to come rather than a decision not to build
+ * it, and this is that item arriving; the table in `DESIGN.md` still names it, and
+ * removing it from that row is a maintainer's line rather than this file's.
+ *
+ * It is a client Component, and the reason is the handler rather than the state.
+ * `onSubmit` is a function, a function is a piece of state, and state is a client
+ * module: a server component cannot hand an event handler down to a `<form>`, so a
+ * caller rendering this from a server component gets a form that submits and calls
+ * nothing. The rest of the rendering is a section and a field, which is the price
+ * of the argument above and not a claim about what else this Block might do.
+ */
+export function Newsletter01({ eyebrow, title, description, onSubmit, value, defaultValue, consent, submitLabel, status, label, layout = 'stacked', headingLevel = 'h2', className, }) {
+    const generated = useId();
+    const inputId = `${generated}-email`;
+    const consentId = `${generated}-consent`;
+    const sending = status?.state === 'sending';
+    /*
+     * The value is read out of the form rather than out of `value`, because a
+     * controlled field and an uncontrolled one have to reach the same handler. A
+     * Block that read `value` would hand over an empty address from every consumer
+     * who left the field uncontrolled, and one that kept its own copy would own the
+     * address, which is the thing this whole Block is shaped to refuse.
+     */
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const read = new FormData(event.currentTarget).get('email');
+        onSubmit({ email: typeof read === 'string' ? read : '' });
+    };
+    return (_jsx(Section, { "data-slot": "newsletter-01", className: cn(className), children: _jsxs("div", { "data-slot": "newsletter-01-body", className: "flex flex-col gap-8", children: [_jsx(SectionHeading, { eyebrow: eyebrow, title: title, description: description, align: "left", as: headingLevel }), _jsxs("form", { "data-slot": "newsletter-01-form", onSubmit: handleSubmit, className: "flex w-full max-w-measure flex-col gap-4", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: inputId, children: label }), _jsxs("div", { "data-slot": "newsletter-01-row", className: cn('flex w-full flex-col gap-3', layout === 'inline' ? 'sm:flex-row sm:items-start' : null), children: [_jsx(Input, { "data-slot": "newsletter-01-field", id: inputId, name: "email", type: "email", autoComplete: "email", value: value, defaultValue: defaultValue, "aria-describedby": consentId }), _jsx(Button, { "data-slot": "newsletter-01-submit", type: "submit", disabled: sending, children: submitLabel })] }), _jsx(FieldDescription, { id: consentId, children: consent })] }), _jsx(LiveRegion, { politeness: status?.state === 'error' ? 'assertive' : 'polite', busy: sending, className: "text-sm", children: status?.message })] })] }) }));
+}
+export default Newsletter01;

package/dist/blocks/notification-center-01/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationCenter01, default } from './notification-center-01.js';
+export type { NotificationCenter01Notification, NotificationCenter01Props, } from './notification-center-01.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/notification-center-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/notification-center-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAIxE,YAAY,EACV,gCAAgC,EAChC,yBAAyB,GAC1B,MAAM,0BAA0B,CAAA"}

package/dist/blocks/notification-center-01/index.js

@@ -0,0 +1 @@
+export { NotificationCenter01, default } from './notification-center-01.js';