@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/blocks/feature-rows-01/feature-rows-01.d.ts

@@ -0,0 +1,158 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One row: a copy column and a visual column, with the visual on a side this
+ * Block derives rather than one the caller passes.
+ */
+export type FeatureRow = {
+    /** Optional label above the row's title. It has no default, and none is a default. */
+    eyebrow?: string;
+    /**
+     * The row's title. A heading one step below the section that introduces the set,
+     * derived from `headingLevel`, so a section embedded one level deeper carries its
+     * outline with it.
+     */
+    title: string;
+    /** The paragraph under the title. One or two sentences. */
+    body: string;
+    /**
+     * The visual: a figure, a screenshot, a chart, or any node the consumer
+     * composed. Omit it for a row that is copy only.
+     *
+     * The Block draws the panel around it. See the Block's own JSDoc for why the
+     * frame is the Block's and not the caller's.
+     */
+    media?: ReactNode;
+    /**
+     * The accessible name of the visual, published on the `<figure>` and as no
+     * visible text.
+     *
+     * Required whenever `media` is passed, and the Block throws without it rather
+     * than shipping a figure a reader cannot name. That is the rule
+     * `InstrumentPanel01` states for its state, and the reason is the same one: a
+     * reader navigating by figure lands on two of them on this page and can tell
+     * them apart only by their names.
+     */
+    mediaAlt?: string;
+    /**
+     * Forbidden, and present in the type only to say so.
+     *
+     * The side of the visual is derived from the row's index. See the Block's own
+     * JSDoc: a per-row `align` is a decision four times over, and they disagree the
+     * first time somebody inserts a row. `align` on the Block sets the first row
+     * and the rest follow from the index.
+     */
+    align?: never;
+};
+/**
+ * The props a FeatureRows01 takes. Every string is a prop and the Block ships
+ * none: no row, no title and no default set of arguments.
+ */
+export type FeatureRows01Props = {
+    /**
+     * The rows, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which capability matters first.
+     */
+    rows: readonly FeatureRow[];
+    /**
+     * Which side the FIRST row's copy column takes. Every row after it alternates.
+     *
+     * One decision for the whole set rather than one per row, for the reason the
+     * row type forbids `align`: a per-row value is a decision four times over and
+     * the four answers will disagree the first time somebody inserts a row above
+     * them, and the disagreement is invisible because each row on its own looks
+     * deliberate.
+     *
+     * @defaultValue 'left'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Starts the alternation from the other side, so the first row's copy takes the
+     * side `align` does not name.
+     *
+     * It is a second spelling of the same single decision rather than a second
+     * decision, and both exist because a page's composition is written two ways: a
+     * layout is described as "copy on the right" by someone reading the grid and as
+     * "image first" by someone reading the page. When both are passed, `reverse`
+     * wins, and that is stated here rather than left for a reader to infer from the
+     * order of two keywords.
+     *
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a set of rows composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * Heading level for the section title and, one step below it, for each row's
+     * title. Defaults to `h2` because a Block is composed, not a page. See
+     * `HeadingLevel`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A set of two-column rows: a copy column and a visual column, with the visual
+ * alternating sides down the set.
+ *
+ * **The alternation is derived from the row's index, and the row type forbids the
+ * prop that would stop it.** The obvious API is `align` on each row, and it is
+ * wrong for a reason that only shows up over time: a set of four rows with four
+ * alignments is one decision made four times, and the four answers agree until
+ * somebody inserts a row in the middle, at which point every row below it is
+ * wrong and each of them looks deliberate. A Block exists to end exactly that
+ * drift, so the Block ends it here: the section's `align` sets the first row and
+ * the index does the rest. Inserting a row re-alternates the whole set, which is
+ * the correct answer, and the alternative is a page where row three and row four
+ * both put the visual on the same side because somebody copied row two.
+ *
+ * **The visual is inside a panel, and the panel is the Block's.** The rule is
+ * `Hero01`'s and it is repeated rather than assumed: a bare figure on the page
+ * ground reads as an illustration, and the same figure inside a bordered panel
+ * reads as an instrument, which is what it is. A screenshot of a dashboard with
+ * no frame is a picture of a dashboard; the same screenshot in a panel is a
+ * product making a claim about itself. Here Prism draws the frame because the
+ * rows are the section's rhythm rather than the consumer's, and a set of rows
+ * where four of the six frames are missing reads as four rows somebody forgot.
+ * The cost is real: the panel is not free, it is a border and a surface on every
+ * row, and a consumer with one row and no other frame on the page has added a
+ * box for a box's sake. `mediaAlt` is required alongside `media` for the same
+ * reason the panel exists: a figure a reader cannot name is a figure a reader
+ * navigating by figure cannot find again.
+ *
+ * **The copy is first in the DOM on every row, whatever side it is drawn on.** The
+ * alternation is expressed with `order` rather than by swapping the markup, so a
+ * screen reader reaches the title before the figure on all four rows instead of
+ * first on two of them, and a reader with styles off still gets title then
+ * figure. The visual order changes; the reading order does not.
+ *
+ * **The rows are `<section>`s inside the section, and that nesting is on
+ * purpose.** Each row is a topic of its own, with its own title, so it is a
+ * region a reader can jump to and one a browser can scroll to. A page of four
+ * rows rendered as four `<div>`s is four topics with no names, and the outline
+ * stops at the section heading. The rows are headings one level below the
+ * section, derived with `childLevel` for the same reason every other Block that
+ * draws titled cards derives it: a Block moved from an `h2` section into an `h3`
+ * one carries its outline with it instead of announcing four siblings of itself.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule: `center` is
+ * for a band that is only a heading, and this section has four rows of content
+ * under it. A centred title above an alternating set reads as two unrelated
+ * pieces, because every row below it is flush left or flush right.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width
+ * and no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export declare function FeatureRows01({ rows, align, reverse, eyebrow, title, description, headingLevel, className, }: FeatureRows01Props): import("react").JSX.Element;
+export default FeatureRows01;
+//# sourceMappingURL=feature-rows-01.d.ts.map

package/dist/blocks/feature-rows-01/feature-rows-01.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-rows-01.d.ts","sourceRoot":"","sources":["../../../src/blocks/feature-rows-01/feature-rows-01.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,EAAE,SAAS,UAAU,EAAE,CAAA;IAC3B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAc,EACd,OAAe,EACf,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,+BA8FpB;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/feature-rows-01/feature-rows-01.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A set of two-column rows: a copy column and a visual column, with the visual
+ * alternating sides down the set.
+ *
+ * **The alternation is derived from the row's index, and the row type forbids the
+ * prop that would stop it.** The obvious API is `align` on each row, and it is
+ * wrong for a reason that only shows up over time: a set of four rows with four
+ * alignments is one decision made four times, and the four answers agree until
+ * somebody inserts a row in the middle, at which point every row below it is
+ * wrong and each of them looks deliberate. A Block exists to end exactly that
+ * drift, so the Block ends it here: the section's `align` sets the first row and
+ * the index does the rest. Inserting a row re-alternates the whole set, which is
+ * the correct answer, and the alternative is a page where row three and row four
+ * both put the visual on the same side because somebody copied row two.
+ *
+ * **The visual is inside a panel, and the panel is the Block's.** The rule is
+ * `Hero01`'s and it is repeated rather than assumed: a bare figure on the page
+ * ground reads as an illustration, and the same figure inside a bordered panel
+ * reads as an instrument, which is what it is. A screenshot of a dashboard with
+ * no frame is a picture of a dashboard; the same screenshot in a panel is a
+ * product making a claim about itself. Here Prism draws the frame because the
+ * rows are the section's rhythm rather than the consumer's, and a set of rows
+ * where four of the six frames are missing reads as four rows somebody forgot.
+ * The cost is real: the panel is not free, it is a border and a surface on every
+ * row, and a consumer with one row and no other frame on the page has added a
+ * box for a box's sake. `mediaAlt` is required alongside `media` for the same
+ * reason the panel exists: a figure a reader cannot name is a figure a reader
+ * navigating by figure cannot find again.
+ *
+ * **The copy is first in the DOM on every row, whatever side it is drawn on.** The
+ * alternation is expressed with `order` rather than by swapping the markup, so a
+ * screen reader reaches the title before the figure on all four rows instead of
+ * first on two of them, and a reader with styles off still gets title then
+ * figure. The visual order changes; the reading order does not.
+ *
+ * **The rows are `<section>`s inside the section, and that nesting is on
+ * purpose.** Each row is a topic of its own, with its own title, so it is a
+ * region a reader can jump to and one a browser can scroll to. A page of four
+ * rows rendered as four `<div>`s is four topics with no names, and the outline
+ * stops at the section heading. The rows are headings one level below the
+ * section, derived with `childLevel` for the same reason every other Block that
+ * draws titled cards derives it: a Block moved from an `h2` section into an `h3`
+ * one carries its outline with it instead of announcing four siblings of itself.
+ *
+ * **The heading is aligned left.** `SectionHeading` states the rule: `center` is
+ * for a band that is only a heading, and this section has four rows of content
+ * under it. A centred title above an alternating set reads as two unrelated
+ * pieces, because every row below it is flush left or flush right.
+ *
+ * It composes `Section` and `SectionHeading`, so it inherits the container and the
+ * vertical rhythm rather than re-deriving either, and it adds no container width
+ * and no section padding of its own.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function FeatureRows01({ rows, align = 'left', reverse = false, eyebrow, title, description, headingLevel = 'h2', className, }) {
+    // A row's title is a heading one step below the section that introduces the set,
+    // derived rather than written, so a Block embedded one level deeper carries its
+    // outline with it.
+    const Title = childLevel(headingLevel);
+    // The side the first row's copy takes, resolved once. `reverse` is the second
+    // spelling of the same decision and wins when both are passed, which the prop
+    // documents rather than leaves to the order of two keywords.
+    const firstCopyLeft = reverse ? align === 'right' : align === 'left';
+    for (const row of rows) {
+        if (row.media !== undefined && !row.mediaAlt) {
+            throw new Error('FeatureRows01: a row was passed a media node with no mediaAlt, so the figure would be one a reader ' +
+                'navigating by figure cannot tell from the next one on the page. Pass the words you mean, or omit the media.');
+        }
+    }
+    return (_jsxs(Section, { "data-slot": "feature-rows-01", className: className, children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-16" })) : null, _jsx("div", { "data-slot": "feature-rows", className: "flex flex-col gap-20", children: rows.map((row, index) => {
+                    // The derivation, and the whole of the prop decision: the first row takes
+                    // the section's side and every row after it is the other one.
+                    const copyOnLeft = index % 2 === 0 ? firstCopyLeft : !firstCopyLeft;
+                    return (_jsxs("section", { "data-slot": "feature-rows-row", className: "grid items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [_jsxs("div", { "data-slot": "feature-rows-copy", className: cn('flex flex-col gap-4', !copyOnLeft ? 'lg:order-2' : 'lg:order-1'), children: [row.eyebrow ? (_jsx("span", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: row.eyebrow })) : null, _jsx(Title, { className: "text-2xl font-semibold tracking-tight sm:text-3xl", children: row.title }), _jsx("p", { className: "text-muted-foreground text-pretty text-base", children: row.body })] }), row.media ? (_jsx("figure", { "data-slot": "feature-rows-media", "aria-label": row.mediaAlt, className: cn('bg-card flex min-w-0 flex-col justify-center rounded-xl border p-4 shadow-sm', copyOnLeft ? 'lg:order-1' : 'lg:order-2'), children: row.media })) : null] }, row.title));
+                }) })] }));
+}
+export default FeatureRows01;

package/dist/blocks/feature-rows-01/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureRows01, default } from './feature-rows-01.js';
+export type { FeatureRow, FeatureRows01Props } from './feature-rows-01.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/feature-rows-01/index.d.ts.map

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

package/dist/blocks/feature-rows-01/index.js

@@ -0,0 +1 @@
+export { FeatureRows01, default } from './feature-rows-01.js';

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

@@ -0,0 +1,235 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One point on the caller's own scale.
+ *
+ * **`id` is a key and `value` is the number.** The separation is what lets a caller
+ * keep their own record stable while the scale is reordered, and what lets one scale
+ * be a set of words at one end and a number at the other, which is most of them. On
+ * submit the Block hands over both, so a caller storing by key and a caller
+ * aggregating by number are both served without either reading the other's field.
+ */
+export type Feedback01Point = {
+    /** A stable key for the point. What the Block selects on and what it hands back. */
+    id: string;
+    /** The words drawn beside the control, and all a screen reader announces. */
+    label: string;
+    /** The number this point contributes, for a caller who aggregates. */
+    value: number;
+};
+/** The free-text half of a feedback panel, and its counter. */
+export type Feedback01Comment = {
+    /** The field's visible label, and its accessible name. */
+    label: string;
+    /** The comment as the caller holds it, which makes the field controlled. */
+    value?: string;
+    /** Called as the reader types. */
+    onValueChange?: (value: string) => void;
+    /**
+     * The character ceiling, enforced by the control itself.
+     *
+     * A number and not a sentence, because "200 characters" is a fact about a limit
+     * and the sentence for it belongs to whoever set the limit. Pass the same number
+     * to `counter` and the reader can see the ceiling before they reach it.
+     */
+    maxLength?: number;
+    /**
+     * Whether to draw the character count beside the field.
+     *
+     * A count and not a limit, because a reader who has been typing for a while needs
+     * to know how much room is left rather than what the rule is. It is drawn in
+     * `tabular-nums` so the digits do not shuffle the field's width as they change,
+     * and it is not announced, because a counter that reads itself aloud on every
+     * keystroke is the fastest way to make a screen reader unusable.
+     */
+    counter?: boolean;
+};
+/** The optional file the reader can hand over with their words. */
+export type Feedback01Artefact = {
+    /** The caller's name for what may be attached. Drawn on the drop target. */
+    label: string;
+    /**
+     * Called with the files the reader chose or dropped.
+     *
+     * Required, and the Block calls it as well as recording the files, because the
+     * upload is the caller's: Prism never reads a byte, never sends one and never
+     * knows a size limit. A consumer who wants the files at submit instead reads them
+     * off `FeedbackValue.files`.
+     */
+    onFiles: (files: File[]) => void;
+    /**
+     * The file types the platform's own picker offers, as an `accept` value.
+     *
+     * A hint to the browser and to nothing else. Files dragged onto the target arrive
+     * whatever they are, so the check belongs in `onFiles`, which is the caller's.
+     */
+    accept?: string;
+};
+/**
+ * What a submit hands over, and the whole of what this Block collects.
+ *
+ * **`files` is here as well as in `onFiles` because the two answer different
+ * questions.** `onFiles` fires the moment a reader picks, so an upload can start
+ * while they are still typing. `files` is what the panel holds at submit, so a
+ * caller who wanted to hold everything until the reader pressed the button can.
+ * Neither is the transport, and both are the caller's to use or ignore.
+ */
+export type FeedbackValue = {
+    /** The `id` of the point the reader chose, when they chose one. */
+    rating?: string;
+    /** That point's `value`, read out of the caller's own scale. */
+    ratingValue?: number;
+    /** The comment as typed, when the panel has a comment field. */
+    comment?: string;
+    /** The files the reader attached, when the panel has an artefact field. */
+    files?: File[];
+};
+/** The outcome of the caller's own request, drawn in a live region. */
+export type Feedback01Status = {
+    /** Which of the four the request is in. Read by the Block for two things only. */
+    state: 'idle' | 'sending' | 'sent' | 'error';
+    /** The words for that state, in the product's own voice. */
+    message: ReactNode;
+};
+/** The props a Feedback01 takes. Every string in this Block is one of them. */
+export type Feedback01Props = {
+    /** The short line above the title, usually what the feedback is about. */
+    eyebrow?: ReactNode;
+    /** The heading. Required, because a panel 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;
+    /**
+     * The scale, in the order the reader should meet it.
+     *
+     * **Required, and the caller's data rather than five faces Prism chose.** The
+     * number of points and the words at each end are the caller's product knowledge,
+     * and they differ per product in ways no design system can decide. A five-point
+     * scale labelled "bad" to "great" is a survey instrument, and a feedback form
+     * usually is not one: it is one reader telling one team something they could not
+     * have guessed. A support scale has three points with "Blocked" at one end, a
+     * design review scale is arguably not ordered at all, and a rating scale has ten.
+     * So Prism takes the points, the order and the words, and supplies none of the
+     * three. The cost is stated rather than hidden: a caller who passes two points
+     * gets two controls, because rounding up would be the Block inventing a data
+     * point on the caller's behalf.
+     */
+    scale: Feedback01Point[];
+    /**
+     * The scale's own name: what the points are measuring.
+     *
+     * Required, because a `RadioGroup` with no name is a set of radios a reader cannot
+     * identify. A screen reader announces the position within a set, and without this
+     * it announces "3 of 5" and nothing about what is being rated, so a panel that
+     * collected a rating of the support rather than of the interface is one nobody can
+     * catch. It is drawn above the group and the group is named from that same
+     * element, so what a sighted reader reads and what is announced are one thing
+     * rather than two.
+     */
+    scaleLabel: string;
+    /** The chosen point's `id`, which makes the group controlled. */
+    value?: string;
+    /** Called with the chosen point's `id` as the reader moves through the scale. */
+    onValueChange?: (id: string) => void;
+    /** The free-text field. Omit it for a panel that collects a rating only. */
+    comment?: Feedback01Comment;
+    /** The file the reader may attach. Omit it where nothing may be attached. */
+    artefact?: Feedback01Artefact;
+    /**
+     * Called with everything the panel collected when the reader submits.
+     *
+     * **Required, and the requirement is the design.** A panel that gathered a rating,
+     * a comment and a screenshot and then had nowhere to put them would be a component
+     * collecting product data and discarding it, and there is no destination Prism
+     * could pick that would not be wrong for three of the four products that install
+     * it. Making the handler required moves that question to the caller, where it is
+     * answerable.
+     */
+    onSubmit: (value: FeedbackValue) => void;
+    /** The label on the one control that submits. */
+    submitLabel: string;
+    /**
+     * The caller's own way out, as a slot.
+     *
+     * A slot and not a label with a handler, for the reason `Announcement` gives: the
+     * way out of a feedback panel is never only here. It belongs in the surrounding
+     * surface too, so a reader who has decided not to leave feedback is not held by a
+     * Block they cannot dismiss.
+     */
+    cancel?: ReactNode;
+    /**
+     * The outcome of the caller's request, drawn in a live region and announced.
+     *
+     * A prop and never an internal state Prism writes, for the reason every Block in
+     * this wave states it: a sentence this package wrote would be inherited by every
+     * consumer, and a feedback form has more outcomes than any other form here, from a
+     * queued ticket to a duplicate to a rate limit to an artefact that was too large.
+     */
+    status?: Feedback01Status;
+    /** 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 panel that asks a reader one question properly: a scale, a place to say more,
+ * and optionally the thing they are talking about.
+ *
+ * **The scale is the caller's data, and that is the argument for the whole Block.** A
+ * five-point scale labelled from "bad" to "great" is a survey instrument, and a
+ * feedback form usually is not one: it is one reader telling one team something they
+ * could not have guessed. How many points there are and what the ends are called is
+ * product knowledge, and it differs per product in ways no design system can decide:
+ * a support scale has three points with "Blocked" at one end, a design review scale
+ * is arguably not ordered at all, and a rating scale has ten. So `scale` is required
+ * and Prism supplies none of it, and the cost is named: a caller who passes two
+ * points gets two controls rather than three, because rounding up would be the Block
+ * inventing a data point.
+ *
+ * **The scale renders as a `RadioGroup` and this Block refuses to render it as five
+ * buttons.** A set of mutually exclusive options is a radio group, and that is not a
+ * styling preference: a screen reader announces the size of the set and the checked
+ * state only when it is one, so a reader of five buttons is told he is on the third
+ * of five undifferentiated controls rather than that he has chosen three out of
+ * five. The keyboard model is the second half of it. Arrow keys move within the
+ * group and Tab crosses it as one stop, which is the model `RadioGroup` already owns
+ * and which five buttons each take a Tab stop of their own instead. Five buttons are
+ * what a sentiment scale looks like on a gallery page, and they are what this Block
+ * deliberately is not.
+ *
+ * **`scaleLabel` is required and it is drawn.** A `RadioGroup` with no name is a set
+ * of radios a reader cannot identify: the reader hears a count and a position and no
+ * indication of what is being rated. Prism draws the name above the group and points
+ * the group's accessible name at that same element, so the two are one thing rather
+ * than a sentence that appears once on the page and once in the accessibility tree.
+ *
+ * **The artefact is a `Dropzone` and a `FileUpload`, and there is no remove control
+ * on purpose.** The list is a record of what was attached, and `FileUpload` is
+ * explicit that a record a reader cannot change is the right rendering of a receipt.
+ * The cost is real and is named here rather than hidden: a reader who picked the
+ * wrong screenshot has to pick again, and the way out is to compose `Dropzone` and
+ * `FileUpload` directly with an `onRemove` and a `removeLabel` of your own rather
+ * than to reach into this Block. Prism did not add the control because doing so
+ * would mean shipping a remove button whose confirmation sentence and whose
+ * replacement state are both sentences about the caller's upload.
+ *
+ * **Nothing here validates anything.** There is no minimum comment length, no
+ * required point, no file size rule and no address format. Each of those is a
+ * decision about the caller's product and its data, and a Block that guessed one
+ * would refuse a reader on the caller's behalf. What Prism does do is hand over the
+ * number a point contributes, so a caller who wants to reject a rating below three
+ * can do it in their own handler with their own sentence.
+ *
+ * **The submit control is disabled while the caller's state reads `sending`**, which
+ * is the same one reading of that state every Block in this wave makes: a second
+ * press while the first request is in flight is a duplicate report no triage queue
+ * wants. The control is disabled rather than replaced so its label never changes
+ * under the reader's finger, and the live region carries the busy state.
+ *
+ * It is a client Component, and there are three reasons rather than one: the handler
+ * is a function, the attached files are state, and the counter reads state on every
+ * keystroke. A server component cannot hand an event handler down to a `<form>`.
+ */
+export declare function Feedback01({ eyebrow, title, description, scale, scaleLabel, value, onValueChange, comment, artefact, onSubmit, submitLabel, cancel, status, headingLevel, className, }: Feedback01Props): import("react").JSX.Element;
+export default Feedback01;
+//# sourceMappingURL=feedback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/blocks/feedback-01/feedback.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { Card, CardContent, CardFooter } from '../../components/ui/card.js';
+import { Dropzone } from '../../components/ui/dropzone.js';
+import { Field, FieldLabel } from '../../components/ui/field.js';
+import { FileUpload } from '../../components/ui/file-upload.js';
+import { LiveRegion } from '../../components/ui/live-region.js';
+import { RadioGroup, RadioGroupItem } from '../../components/ui/radio-group.js';
+import { Section, SectionHeading } from '../../components/ui/section.js';
+import { Textarea } from '../../components/ui/textarea.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A character count as the runtime's own locale groups it, because a counter is a
+ * number a reader reads and the separator between its digits is their locale's.
+ */
+function countOf(text) {
+    return text.length.toLocaleString();
+}
+/**
+ * The panel that asks a reader one question properly: a scale, a place to say more,
+ * and optionally the thing they are talking about.
+ *
+ * **The scale is the caller's data, and that is the argument for the whole Block.** A
+ * five-point scale labelled from "bad" to "great" is a survey instrument, and a
+ * feedback form usually is not one: it is one reader telling one team something they
+ * could not have guessed. How many points there are and what the ends are called is
+ * product knowledge, and it differs per product in ways no design system can decide:
+ * a support scale has three points with "Blocked" at one end, a design review scale
+ * is arguably not ordered at all, and a rating scale has ten. So `scale` is required
+ * and Prism supplies none of it, and the cost is named: a caller who passes two
+ * points gets two controls rather than three, because rounding up would be the Block
+ * inventing a data point.
+ *
+ * **The scale renders as a `RadioGroup` and this Block refuses to render it as five
+ * buttons.** A set of mutually exclusive options is a radio group, and that is not a
+ * styling preference: a screen reader announces the size of the set and the checked
+ * state only when it is one, so a reader of five buttons is told he is on the third
+ * of five undifferentiated controls rather than that he has chosen three out of
+ * five. The keyboard model is the second half of it. Arrow keys move within the
+ * group and Tab crosses it as one stop, which is the model `RadioGroup` already owns
+ * and which five buttons each take a Tab stop of their own instead. Five buttons are
+ * what a sentiment scale looks like on a gallery page, and they are what this Block
+ * deliberately is not.
+ *
+ * **`scaleLabel` is required and it is drawn.** A `RadioGroup` with no name is a set
+ * of radios a reader cannot identify: the reader hears a count and a position and no
+ * indication of what is being rated. Prism draws the name above the group and points
+ * the group's accessible name at that same element, so the two are one thing rather
+ * than a sentence that appears once on the page and once in the accessibility tree.
+ *
+ * **The artefact is a `Dropzone` and a `FileUpload`, and there is no remove control
+ * on purpose.** The list is a record of what was attached, and `FileUpload` is
+ * explicit that a record a reader cannot change is the right rendering of a receipt.
+ * The cost is real and is named here rather than hidden: a reader who picked the
+ * wrong screenshot has to pick again, and the way out is to compose `Dropzone` and
+ * `FileUpload` directly with an `onRemove` and a `removeLabel` of your own rather
+ * than to reach into this Block. Prism did not add the control because doing so
+ * would mean shipping a remove button whose confirmation sentence and whose
+ * replacement state are both sentences about the caller's upload.
+ *
+ * **Nothing here validates anything.** There is no minimum comment length, no
+ * required point, no file size rule and no address format. Each of those is a
+ * decision about the caller's product and its data, and a Block that guessed one
+ * would refuse a reader on the caller's behalf. What Prism does do is hand over the
+ * number a point contributes, so a caller who wants to reject a rating below three
+ * can do it in their own handler with their own sentence.
+ *
+ * **The submit control is disabled while the caller's state reads `sending`**, which
+ * is the same one reading of that state every Block in this wave makes: a second
+ * press while the first request is in flight is a duplicate report no triage queue
+ * wants. The control is disabled rather than replaced so its label never changes
+ * under the reader's finger, and the live region carries the busy state.
+ *
+ * It is a client Component, and there are three reasons rather than one: the handler
+ * is a function, the attached files are state, and the counter reads state on every
+ * keystroke. A server component cannot hand an event handler down to a `<form>`.
+ */
+export function Feedback01({ eyebrow, title, description, scale, scaleLabel, value, onValueChange, comment, artefact, onSubmit, submitLabel, cancel, status, headingLevel = 'h2', className, }) {
+    const generated = useId();
+    const scaleLabelId = `${generated}-scale-label`;
+    const commentId = `${generated}-comment`;
+    const sending = status?.state === 'sending';
+    const [files, setFiles] = useState([]);
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const chosen = scale.find((point) => point.id === value);
+        const next = {};
+        if (chosen !== undefined) {
+            next.rating = chosen.id;
+            next.ratingValue = chosen.value;
+        }
+        if (comment !== undefined)
+            next.comment = comment.value ?? '';
+        if (artefact !== undefined)
+            next.files = files;
+        onSubmit(next);
+    };
+    return (_jsx(Section, { "data-slot": "feedback-01", className: cn(className), children: _jsxs("div", { "data-slot": "feedback-01-body", className: "flex flex-col gap-8", children: [_jsx(SectionHeading, { eyebrow: eyebrow, title: title, description: description, align: "left", as: headingLevel }), _jsx(Card, { "data-slot": "feedback-01-panel", children: _jsxs("form", { "data-slot": "feedback-01-form", onSubmit: handleSubmit, className: "flex w-full flex-col gap-6", children: [_jsxs(CardContent, { "data-slot": "feedback-01-fields", className: "flex flex-col gap-6", children: [_jsxs(Field, { "data-slot": "feedback-01-scale", className: "gap-2", children: [_jsx("span", { id: scaleLabelId, "data-slot": "feedback-01-scale-label", className: "text-foreground text-sm leading-none font-medium", children: scaleLabel }), _jsx(RadioGroup, { "aria-labelledby": scaleLabelId, value: value, onValueChange: onValueChange, className: "flex w-full flex-wrap gap-2", children: scale.map((point) => (_jsxs(FieldLabel, { htmlFor: `${generated}-${point.id}`, className: "border-input hover:border-primary focus-within:border-ring inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2", children: [_jsx(RadioGroupItem, { value: point.id, id: `${generated}-${point.id}` }), point.label] }, point.id))) })] }), comment === undefined ? null : (_jsxs(Field, { "data-slot": "feedback-01-comment", children: [_jsx(FieldLabel, { htmlFor: commentId, children: comment.label }), _jsx(Textarea, { id: commentId, rows: 4, value: comment.value, maxLength: comment.maxLength, onChange: comment.onValueChange
+                                                    ? (event) => comment.onValueChange?.(event.target.value)
+                                                    : undefined }), comment.counter === true ? (_jsx("span", { "data-slot": "feedback-01-counter", className: "text-muted-foreground self-end text-xs tabular-nums", children: comment.maxLength === undefined
+                                                    ? countOf(comment.value ?? '')
+                                                    : `${countOf(comment.value ?? '')} / ${countOf(String(comment.maxLength))}` })) : null] })), artefact === undefined ? null : (_jsxs(Field, { "data-slot": "feedback-01-artefact", className: "gap-3", children: [_jsx(Dropzone, { label: artefact.label, onFiles: (chosen) => {
+                                                    setFiles(chosen);
+                                                    artefact.onFiles(chosen);
+                                                }, ...(artefact.accept === undefined ? null : { accept: artefact.accept }) }), _jsx(FileUpload, { files: files.map((file, index) => ({
+                                                    id: `${file.name}-${file.size}-${index}`,
+                                                    name: file.name,
+                                                    size: file.size,
+                                                })) })] }))] }), _jsxs(CardFooter, { "data-slot": "feedback-01-actions", className: "flex-col items-stretch gap-3 sm:flex-row sm:items-center", children: [_jsx(Button, { "data-slot": "feedback-01-submit", type: "submit", disabled: sending, children: submitLabel }), cancel === undefined ? null : cancel, _jsx(LiveRegion, { politeness: status?.state === 'error' ? 'assertive' : 'polite', busy: sending, className: "ml-auto text-sm", children: status?.message })] })] }) })] }) }));
+}
+export default Feedback01;

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

@@ -0,0 +1,3 @@
+export { Feedback01, default } from './feedback.js';
+export type { Feedback01Artefact, Feedback01Comment, Feedback01Point, Feedback01Props, Feedback01Status, FeedbackValue, } from './feedback.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/feedback-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAKhD,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,GACd,MAAM,YAAY,CAAA"}

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

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