@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/billing-source.d.ts

@@ -0,0 +1,293 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * One payment or billing source, and every word about it.
+ *
+ * **Nothing on this type is a payment fact, and that is the whole of the design.**
+ * There is no number, no network, no brand, no currency and no expiry rule,
+ * because each of those is a fact about somebody else's payment method and this
+ * package has no business asserting one. A source is a set of caller-owned words
+ * and a caller-owned mark, arranged into a shape a reader can scan. The type
+ * carries the shape and refuses the facts, and a consumer who wants the facts
+ * already has them.
+ *
+ * The two fields that look like they could have been typed more strictly are the
+ * two that carry the load, and both are loose on purpose. `id` is a `string`
+ * because it is a caller's own key, not a Prism one, and it crosses back out
+ * through `onChange` and into whatever store the caller keeps. `name` is a node
+ * because a source is often a logo and a word, and because the node is the
+ * element a sighted reader reads, which is the element a screen reader then names
+ * the source by.
+ */
+export type BillingSourceItem = {
+    /**
+     * The caller's own key for this source.
+     *
+     * Required, and passed back to `onChange` and written into the hidden form
+     * field when `BillingSources` is given a `name`. It is the one value on this
+     * type that leaves the Component, and it is chosen to be a key rather than an
+     * account number for the reason the rest of the type exists: a form that posts
+     * a source's id posts an opaque handle, and a form that posts a card number
+     * posts a card number.
+     */
+    id: string;
+    /**
+     * How this product names the source, in the words a reader would use about it.
+     *
+     * Required, and a node because a source is often a mark and a word. There is no
+     * default and no generated label anywhere in this module, because a billing
+     * surface that shipped Prism's own name for a source would be shipping a claim
+     * about somebody else's payment method: one product writes "Visa ending 4417",
+     * another writes "Corporate card", and a third writes "Northwind IT". The type
+     * exists partly to hold that refusal.
+     */
+    name: ReactNode;
+    /**
+     * The identifying value, drawn exactly as passed.
+     *
+     * **This Component never masks, truncates, groups, reorders or shortens it, and
+     * the absence of a `mask` prop is the decision rather than an omission.** What
+     * may be shown on this surface is a compliance question with a different answer
+     * in every product, in every jurisdiction and for every field: a full number
+     * on an invoice a reader has already authenticated for, four digits on a shared
+     * screen, a token from a provider that has no digits to show at all, an account
+     * code for a mandate. A Component that masked would be picking the answer, and a
+     * Component that refused to mask would be refusing a legitimate display. So the
+     * value arrives already decided, as the string the caller has concluded is safe
+     * to render, and this module puts it in text and nowhere else: never in a
+     * `data-` attribute, never in a class name, never in a `title`, never in an
+     * `aria-label` of its own.
+     *
+     * A `string` is drawn in the mono face and a composed node is not, following the
+     * rule `Metric` states: the platform monospace annotates a machine-readable
+     * reading, and a caller's grouped digits, a provider's token and a partial
+     * number are all one, while a value the caller composed out of several parts is
+     * a sentence with a number in it.
+     */
+    value: ReactNode;
+    /**
+     * The words a screen reader reads in place of the value on screen.
+     *
+     * Optional, and it is the seam that lets a caller mask without a Component
+     * knowing what a mask is. A value of dots and a value of four digits are both
+     * unreadable when spoken, and a reader who is told "star star star star four
+     * four one seven" learns nothing about which card is about to be charged. So
+     * when the visible value would say nothing aloud, the caller passes the words
+     * here and the visible value is hidden from assistive technology rather than
+     * read twice.
+     *
+     * **It cannot be required when it matters, and that limit is stated rather than
+     * papered over.** A rule that said "pass this whenever the value is masked"
+     * would have to know what a mask is, which is the caller's compliance posture
+     * and not a property of the string, so the Component has nothing to test. What
+     * it can do is put the two halves together, and it does: with `valueLabel` the
+     * value is not announced, and without it the value is announced as written. The
+     * cost is that a caller who masks and forgets this ships a row that reads as
+     * punctuation, and the fix is one prop, in a place the caller already is.
+     */
+    valueLabel?: string;
+    /**
+     * What kind of source it is, in the caller's own machine words.
+     *
+     * Optional, and drawn in the muted ink at the `xs` step, because a kind is a
+     * column a reader scans rather than one they read. A product whose kind is a
+     * code has a reason to print the code and no reason to have this Component
+     * translate it, so the value is printed exactly as passed.
+     */
+    kind?: ReactNode;
+    /**
+     * The caller's own mark for the source, which is a slot and never a mark this
+     * package draws.
+     *
+     * A card network's mark is a licensed asset with rules governing its size, its
+     * clear space, its colour and its use on a third party's surface, and a set of
+     * them shipped as a Component is a set that is out of date within a year as the
+     * networks add and retire programmes. So the space is here, the frame around it
+     * is a size and a clip and nothing else, and a source with no mark draws no
+     * frame rather than a grey disc where a logo would be. The cost is stated: a
+     * consumer with four card sources has four assets to license, where a package
+     * that shipped them would have handed over four marks it was not entitled to.
+     */
+    mark?: ReactNode;
+    /**
+     * Whatever else the caller wants said about this source: an expiry reading, a
+     * verification state, a note about a failed charge.
+     *
+     * Optional, and printed exactly as passed, for the reason `BillingSource01`
+     * gives at length: a Component that formatted the moment would be choosing a
+     * locale, a calendar and a granularity on a reader's behalf, and would put
+     * `Intl` into every consumer's bundle for a rendering Prism has no stake in.
+     */
+    note?: ReactNode;
+    /**
+     * Whether this source cannot be chosen, and why the caller decided that.
+     *
+     * A source can be un-choosable for facts only the caller has: it failed
+     * verification, it is the source an open dispute is about, a contract ended.
+     * A disabled option is refused rather than drawn as enabled-and-ignored, and it
+     * stays in the accessibility tree so a reader is told it exists and is not
+     * available, rather than finding the row missing with nothing said.
+     */
+    disabled?: boolean;
+};
+/** The props a `BillingSource` takes, for the single-source display. */
+export type BillingSourceProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * The source to draw. One entry of the caller's set, and the same shape
+     * `BillingSources` takes, so moving between the display and the chooser is a
+     * change of arrangement rather than a change of data.
+     */
+    source: BillingSourceItem;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+};
+/**
+ * The props a `BillingSources` takes, for the chooser.
+ *
+ * The element's own props are forwarded, and three of them are handled here
+ * rather than inherited. `children` is removed because the chooser draws its rows
+ * from `sources` and a caller who passed any would be reaching past the set.
+ * `onChange` is removed because the group reports the selected source's id and
+ * the element's own `onChange` is a form event this Component does not forward to
+ * anything. `defaultValue` is declared rather than removed, which is the same move
+ * `radio-group` makes, and the reason is below it.
+ */
+export interface BillingSourcesProps extends Omit<ComponentProps<'div'>, 'onChange' | 'children'> {
+    /**
+     * There is no uncontrolled form, so the element's own `defaultValue` is not
+     * offered either.
+     *
+     * The underlying group declares it as a narrower type than the element does, so
+     * inheriting the element's version is a shape mismatch rather than a missing
+     * feature, and a chooser that rendered a source the reader never chose because a
+     * form said so is a chooser that has pointed their money at it. Pass `value`.
+     */
+    defaultValue?: never;
+    /**
+     * The sources a reader may choose between, in the order a reader should meet
+     * them. Order is the caller's and nothing is sorted here, because which source
+     * is about to be charged is the caller's claim and not this package's.
+     */
+    sources: readonly BillingSourceItem[];
+    /**
+     * The `id` of the source the charges fall to right now.
+     *
+     * Required, because a chooser that does not know where it is renders a
+     * question with no answer, and this is a question about a reader's money. An id
+     * that is not in `sources` marks nothing, which is a real state and not a throw:
+     * a store that names a source the product has since withdrawn is a caller's
+     * data problem, and taking the page down over it is worse than drawing a chooser
+     * with nothing selected.
+     */
+    value: string;
+    /**
+     * Called with a source's `id` when the reader selects it.
+     *
+     * Required, and a request rather than a mutation, for the reason every other
+     * control in this package takes one: which source is active is the caller's
+     * state, and a control that moved the marking and put it back when the request
+     * failed would be a control that lied about where a reader's money goes. Prism
+     * does not apply the choice, does not call a payment provider and does not know
+     * what applying it involves.
+     */
+    onChange: (id: string) => void;
+    /**
+     * The chooser's own accessible name.
+     *
+     * Required, and not defaulted, because it names a decision about money and the
+     * sentence is the consumer's: "Payment method", "Charge to", "Billing source".
+     * A default would be a word in a language the consumer did not choose, sitting
+     * above the control that spends their money.
+     */
+    label: string;
+    /**
+     * The form field name the selected source's `id` is submitted under.
+     *
+     * Optional, and the privacy argument for it is the reason it is worth naming.
+     * The hidden field carries the caller's `id` and nothing else, so a form that
+     * posts a chosen source posts an opaque handle and not the value the reader can
+     * see beside it. A caller who would rather not post anything omits this.
+     */
+    name?: string;
+    /**
+     * What to draw when there are no sources.
+     *
+     * Optional, and with none of them the chooser renders nothing, which is the same
+     * choice `TagGroup` makes. An empty bordered box with a name on it and nothing
+     * inside it reads as a rendering failure rather than as an absence, and a
+     * billing surface with no sources is a state a product has words for.
+     */
+    empty?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * The row, with no border, no fill and no chrome of its own.
+ *
+ * A source is a row, and the thing that encloses it is the caller's, for the
+ * reason `Item` makes about lists: the same row appears inside a settings panel,
+ * inside a receipt, inside a checkout summary and inside a table cell, and a
+ * Component that owned the enclosure would have to own all four. It draws no
+ * heading, so there is nothing here for `SectionHeading` to be right about; a
+ * caller who needs the row named wraps it in a `Field` and a `FieldLabel`, or
+ * puts the pair in a `ListPanel` whose region they name themselves.
+ *
+ * It is drawn in a server render. Nothing here is decided at hydration time: no
+ * hook, no state, no effect, and a source's identity is its own `id` rather than
+ * anything this Component remembers.
+ */
+declare function BillingSource({ source, className, ...props }: BillingSourceProps): import("react").JSX.Element;
+/**
+ * A set of sources a reader chooses between, and the one the charges fall to.
+ *
+ * **It is a radio group, and the reason is the same one `PackSwitcher` gives: a
+ * single source is always the one in use and choosing either of any two leaves the
+ * same state as choosing the other.** The whole row is the radio rather than a
+ * small circle at one end, which is the decision worth defending: a control the
+ * size of a card and a name the length of one is a control a reader aims at
+ * without reading, a reader using voice control can name, and a finger can hit
+ * without landing on a fourteen-pixel target beside a sentence it does not want.
+ * The cost is that the row is a large hit area, so a reader who wants to select
+ * the text inside it cannot, and a caller with a value worth copying puts the copy
+ * control in a slot of their own rather than expecting the row to be transparent
+ * to a selection.
+ *
+ * **The selection is a `data-` surface change beside `aria-checked`, and never
+ * instead of it.** The same order the package keeps everywhere: the attribute is
+ * the fact and the border and the fill are the reminder, so a reader who cannot
+ * separate the two and a reader using a screen reader are told the same thing.
+ *
+ * **A disabled source stays in the list.** It is drawn, announced and refused,
+ * because a source a reader cannot choose is still a source they have on file and
+ * a row that silently vanished is a row they will think has been removed.
+ *
+ * **The keyboard model is the one a radio group already owns: one Tab stop for
+ * the whole set, and the arrow keys moving between the rows inside it.** That is
+ * inherited rather than implemented, and inheriting it is the reason this is a
+ * radio group and not a row of buttons. It is stated here because the cost of
+ * inheriting is invisible: a caller who wants a different model cannot have one
+ * without building their own control, and a set of four sources is not a case
+ * where that is worth doing. Every row is a real radio with a real `aria-checked`,
+ * and the indicator is drawn at full strength on the row rather than on a circle
+ * inside it, so the ring bounds the thing it names.
+ *
+ * **It is a client Component, and the directive is unconditional.** The rule is
+ * the one `BillingSource01` states in full: a surface that attaches a handler is
+ * a client Component, and the directive sits on the module rather than in a leaf
+ * so that a consumer composing a server page gets the boundary in one place they
+ * can see. The cost is named rather than hidden, and on this surface it is
+ * sharper than usual: a single source on a receipt is a pure display, and this
+ * module puts even that in the client graph where a server render would have
+ * shipped no JavaScript at all. The price was judged worth paying for one
+ * boundary rather than two arrangements of the same surface, and a consumer for
+ * whom the receipt is the only use should hold the row in their own markup until
+ * the section around it is ready to compose this.
+ *
+ * It imports no Block and composes no section. A Block is a pre-composed region
+ * and a Component that imported one would be reaching upwards, so the section
+ * that holds these rows is `billing-source-01` and the relationship is a
+ * vocabulary rather than a dependency: the two agree on the fields because the
+ * fields are the ones a source has, and either can be used without the other.
+ */
+declare function BillingSources({ sources, value, onChange, label, name, empty, className, ...props }: BillingSourcesProps): import("react").JSX.Element | null;
+export { BillingSource, BillingSources };
+//# sourceMappingURL=billing-source.d.ts.map

package/dist/components/ui/billing-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing-source.d.ts","sourceRoot":"","sources":["../../../src/components/ui/billing-source.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;;OASG;IACH,IAAI,EAAE,SAAS,CAAA;IACf;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wEAAwE;AACxE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzE;;;;OAIG;IACH,MAAM,EAAE,iBAAiB,CAAA;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC5D;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB;;;;OAIG;IACH,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACrC;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2BD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAWzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAyDrB;AA8CD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/billing-source.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { cn } from '../../lib/utils.js';
+/**
+ * The mark frame, drawn once for both arrangements.
+ *
+ * A size and a clip and nothing else, so a network's mark and a caller's
+ * monogram are the same height whichever they pass, and a source with no mark
+ * draws no frame rather than a grey disc where a logo would be. The clip is on
+ * the frame and not on the mark, so a caller who passes an SVG wider than the
+ * frame gets it cropped rather than shrunk and a caller who passes a mark with its
+ * own clear space keeps it.
+ */
+const MARK_FRAME = 'bg-muted flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full [&_img]:object-cover';
+/**
+ * The words about the source, and the split of the two axes of the row.
+ *
+ * The name is the first thing read and the detail line is the second, so the
+ * detail wraps onto as many lines as the value needs and the name does not move
+ * out from under it. The value sits at the `xs` step beside the kind because the
+ * two are read as one sentence by a reader scanning a column: which card, and
+ * what kind of thing it is.
+ */
+const SOURCE_BODY = 'flex min-w-0 flex-1 flex-col gap-0.5';
+const SOURCE_NAME = 'text-sm font-medium';
+const SOURCE_DETAIL = 'text-muted-foreground flex flex-wrap items-baseline gap-x-2 text-xs';
+/**
+ * The row, with no border, no fill and no chrome of its own.
+ *
+ * A source is a row, and the thing that encloses it is the caller's, for the
+ * reason `Item` makes about lists: the same row appears inside a settings panel,
+ * inside a receipt, inside a checkout summary and inside a table cell, and a
+ * Component that owned the enclosure would have to own all four. It draws no
+ * heading, so there is nothing here for `SectionHeading` to be right about; a
+ * caller who needs the row named wraps it in a `Field` and a `FieldLabel`, or
+ * puts the pair in a `ListPanel` whose region they name themselves.
+ *
+ * It is drawn in a server render. Nothing here is decided at hydration time: no
+ * hook, no state, no effect, and a source's identity is its own `id` rather than
+ * anything this Component remembers.
+ */
+function BillingSource({ source, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "billing-source", className: cn('flex items-start gap-3', className), ...props, children: [source.mark === undefined || source.mark === null || source.mark === false ? null : (_jsx("span", { "data-slot": "billing-source-mark", className: MARK_FRAME, children: source.mark })), _jsx(SourceBody, { source: source })] }));
+}
+/**
+ * A set of sources a reader chooses between, and the one the charges fall to.
+ *
+ * **It is a radio group, and the reason is the same one `PackSwitcher` gives: a
+ * single source is always the one in use and choosing either of any two leaves the
+ * same state as choosing the other.** The whole row is the radio rather than a
+ * small circle at one end, which is the decision worth defending: a control the
+ * size of a card and a name the length of one is a control a reader aims at
+ * without reading, a reader using voice control can name, and a finger can hit
+ * without landing on a fourteen-pixel target beside a sentence it does not want.
+ * The cost is that the row is a large hit area, so a reader who wants to select
+ * the text inside it cannot, and a caller with a value worth copying puts the copy
+ * control in a slot of their own rather than expecting the row to be transparent
+ * to a selection.
+ *
+ * **The selection is a `data-` surface change beside `aria-checked`, and never
+ * instead of it.** The same order the package keeps everywhere: the attribute is
+ * the fact and the border and the fill are the reminder, so a reader who cannot
+ * separate the two and a reader using a screen reader are told the same thing.
+ *
+ * **A disabled source stays in the list.** It is drawn, announced and refused,
+ * because a source a reader cannot choose is still a source they have on file and
+ * a row that silently vanished is a row they will think has been removed.
+ *
+ * **The keyboard model is the one a radio group already owns: one Tab stop for
+ * the whole set, and the arrow keys moving between the rows inside it.** That is
+ * inherited rather than implemented, and inheriting it is the reason this is a
+ * radio group and not a row of buttons. It is stated here because the cost of
+ * inheriting is invisible: a caller who wants a different model cannot have one
+ * without building their own control, and a set of four sources is not a case
+ * where that is worth doing. Every row is a real radio with a real `aria-checked`,
+ * and the indicator is drawn at full strength on the row rather than on a circle
+ * inside it, so the ring bounds the thing it names.
+ *
+ * **It is a client Component, and the directive is unconditional.** The rule is
+ * the one `BillingSource01` states in full: a surface that attaches a handler is
+ * a client Component, and the directive sits on the module rather than in a leaf
+ * so that a consumer composing a server page gets the boundary in one place they
+ * can see. The cost is named rather than hidden, and on this surface it is
+ * sharper than usual: a single source on a receipt is a pure display, and this
+ * module puts even that in the client graph where a server render would have
+ * shipped no JavaScript at all. The price was judged worth paying for one
+ * boundary rather than two arrangements of the same surface, and a consumer for
+ * whom the receipt is the only use should hold the row in their own markup until
+ * the section around it is ready to compose this.
+ *
+ * It imports no Block and composes no section. A Block is a pre-composed region
+ * and a Component that imported one would be reaching upwards, so the section
+ * that holds these rows is `billing-source-01` and the relationship is a
+ * vocabulary rather than a dependency: the two agree on the fields because the
+ * fields are the ones a source has, and either can be used without the other.
+ */
+function BillingSources({ sources, value, onChange, label, name, empty, className, ...props }) {
+    if (sources.length === 0) {
+        if (empty === undefined)
+            return null;
+        return (_jsx("p", { "data-slot": "billing-sources-empty", className: "text-muted-foreground text-sm", children: empty }));
+    }
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "billing-sources", "aria-label": label, value: value, name: name, onValueChange: onChange, className: cn('flex flex-col gap-2', className), ...props, children: sources.map((source) => (_jsxs(RadioPrimitive.Root, { value: source.id, disabled: source.disabled, "data-slot": "billing-sources-option", "data-source": source.id, className: cn(
+            // The selected row states both halves of its surface, which is the
+            // Stated Ink Rule: an ink inherited from whatever is behind the row is
+            // not the page's foreground, and the token gate measures token pairs
+            // rather than what a Component leaves out.
+            'border-border bg-background text-foreground hover:bg-muted', 'data-[checked]:border-primary data-[checked]:bg-muted', 'flex w-full items-start gap-3 rounded-lg border p-3 text-left', 'transition-colors duration-fast ease-out', 'outline-none focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'), children: [source.mark === undefined || source.mark === null || source.mark === false ? null : (
+                /*
+                 * The mark, left in the accessibility tree rather than hidden, because
+                 * a caller's licensed asset carries information the row's words do not
+                 * and hiding the slot would make the caller's own `alt` unreachable. A
+                 * caller whose mark really is decoration passes an `aria-hidden` image
+                 * and decides that for itself, which is the only party that knows.
+                 */
+                _jsx("span", { "data-slot": "billing-sources-mark", className: MARK_FRAME, children: source.mark })), _jsx(SourceBody, { source: source })] }, source.id))) }));
+}
+/**
+ * The two halves of a source's identity, drawn once for the display and the row.
+ *
+ * Compound parts of one Item stay inside the parent module and do not form a
+ * second vocabulary, so this is a module-local function rather than a third
+ * export. The value and the spoken value are the one place it does something
+ * rather than arranging: when the caller has said what the value should sound
+ * like, the drawn one is hidden from assistive technology rather than read a
+ * second time, and when they have not, the drawn one is announced exactly as
+ * written. Which of the two is right is the caller's compliance posture, and the
+ * honest limit is that this function cannot tell them apart.
+ */
+function SourceBody({ source }) {
+    const spoken = source.valueLabel;
+    return (_jsxs("span", { "data-slot": "billing-source-body", className: SOURCE_BODY, children: [_jsx("span", { "data-slot": "billing-source-name", className: SOURCE_NAME, children: source.name }), _jsxs("span", { "data-slot": "billing-source-detail", className: SOURCE_DETAIL, children: [_jsx("span", { "data-slot": "billing-source-value", "aria-hidden": spoken === undefined ? undefined : true, className: cn('tabular-nums', typeof source.value === 'string' && 'font-mono'), children: source.value }), spoken === undefined ? null : (_jsx("span", { "data-slot": "billing-source-value-label", className: "sr-only", children: spoken })), source.kind === undefined || source.kind === null || source.kind === false ? null : (_jsx("span", { "data-slot": "billing-source-kind", children: source.kind })), source.note === undefined || source.note === null || source.note === false ? null : (_jsx("span", { "data-slot": "billing-source-note", children: source.note }))] })] }));
+}
+export { BillingSource, BillingSources };

package/dist/components/ui/breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronRight } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The trail of ancestor links that shows where the current page sits.
  *

package/dist/components/ui/button-group.d.ts

@@ -0,0 +1,68 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** The props the ButtonGroup accepts. */
+export interface ButtonGroupProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * The buttons, or the controls, in the order a reader meets them.
+     *
+     * Children rather than an array of entries, because a ButtonGroup's whole claim
+     * is that it arranges whatever the caller composed. It does not decide what a
+     * button says, which variant it wears, or what it does; it draws the frame
+     * around them and removes the frames they would otherwise each draw.
+     */
+    children?: ReactNode;
+    /**
+     * The accessible name of the group.
+     *
+     * Required rather than defaulted, and it is the one prop a caller cannot skip.
+     * A row of three buttons is announced as three buttons and nothing else, so a
+     * reader who tabs into a toolbar of alignment controls cannot tell which of the
+     * four toolbars on the page they are in. Prism does not know what the caller's
+     * buttons are for, so the name is the caller's word.
+     */
+    label: string;
+    /** The direction the group runs in. @defaultValue 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * Related controls joined as one, with the focus ring drawn once around them.
+ *
+ * **The ring is the reason this is a Component and not a flex row.** Three
+ * buttons side by side each draw their own focus ring, so a reader tabbing along
+ * the row sees three separate rings marching across a control that reads as one
+ * thing, and the reader has to work out each time whether the thing they are in
+ * has changed. Here the group takes the ring: the buttons suppress their own, and
+ * the group draws a single ring around its whole bounds when focus is inside it.
+ * The reader sees one indicator around one control, and it moves as a unit.
+ *
+ * The cost is stated rather than hidden: a ring drawn around a group is on the
+ * group, so it is visible whether the focus arrived from the keyboard or from a
+ * click. That is a real trade, and it is the right one here, because a group of
+ * mutually exclusive or sequential actions is nearly always operated from the
+ * keyboard and the ambiguity of a ring on a click is much cheaper than three rings
+ * marching. A caller who needs the per-button indicator back puts the buttons in a
+ * `Toolbar` instead, which is a different Component with a different claim.
+ *
+ * **The frame is drawn by the group and the inner frames are removed.** A
+ * ButtonGroup carries the border and the radius; each button inside drops its own
+ * border and its own corner radius, and the first and last keep the outer corners.
+ * The alternative, letting each button keep its own border, gives a row with a
+ * double rule between every pair and a gap at both ends, which is the reason
+ * grouped toolbars so often look like a row of separate buttons that happen to be
+ * near each other.
+ *
+ * **It is a `group` with a name, not a `toolbar`.** A toolbar is a set of controls
+ * that operates on a document, with its own arrow-key model, and a ButtonGroup is
+ * usually a set of related actions rather than an editing surface. The `group`
+ * role says "these belong together" and stops there, which is the claim being
+ * made. A caller whose buttons operate on a document and want the arrow keys
+ * composes Prism's `Toolbar` and does not use this.
+ *
+ * It is a server Component. It holds no state, reads no context and attaches no
+ * handler, so a row of controls in a static page costs no JavaScript, and the
+ * focus behaviour is two descendant variants of the group's own class string.
+ */
+declare function ButtonGroup({ className, children, label, orientation, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export { ButtonGroup };
+//# sourceMappingURL=button-group.d.ts.map

package/dist/components/ui/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA8ClB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/button-group.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * Related controls joined as one, with the focus ring drawn once around them.
+ *
+ * **The ring is the reason this is a Component and not a flex row.** Three
+ * buttons side by side each draw their own focus ring, so a reader tabbing along
+ * the row sees three separate rings marching across a control that reads as one
+ * thing, and the reader has to work out each time whether the thing they are in
+ * has changed. Here the group takes the ring: the buttons suppress their own, and
+ * the group draws a single ring around its whole bounds when focus is inside it.
+ * The reader sees one indicator around one control, and it moves as a unit.
+ *
+ * The cost is stated rather than hidden: a ring drawn around a group is on the
+ * group, so it is visible whether the focus arrived from the keyboard or from a
+ * click. That is a real trade, and it is the right one here, because a group of
+ * mutually exclusive or sequential actions is nearly always operated from the
+ * keyboard and the ambiguity of a ring on a click is much cheaper than three rings
+ * marching. A caller who needs the per-button indicator back puts the buttons in a
+ * `Toolbar` instead, which is a different Component with a different claim.
+ *
+ * **The frame is drawn by the group and the inner frames are removed.** A
+ * ButtonGroup carries the border and the radius; each button inside drops its own
+ * border and its own corner radius, and the first and last keep the outer corners.
+ * The alternative, letting each button keep its own border, gives a row with a
+ * double rule between every pair and a gap at both ends, which is the reason
+ * grouped toolbars so often look like a row of separate buttons that happen to be
+ * near each other.
+ *
+ * **It is a `group` with a name, not a `toolbar`.** A toolbar is a set of controls
+ * that operates on a document, with its own arrow-key model, and a ButtonGroup is
+ * usually a set of related actions rather than an editing surface. The `group`
+ * role says "these belong together" and stops there, which is the claim being
+ * made. A caller whose buttons operate on a document and want the arrow keys
+ * composes Prism's `Toolbar` and does not use this.
+ *
+ * It is a server Component. It holds no state, reads no context and attaches no
+ * handler, so a row of controls in a static page costs no JavaScript, and the
+ * focus behaviour is two descendant variants of the group's own class string.
+ */
+function ButtonGroup({ className, children, label, orientation = 'horizontal', ...props }) {
+    return (_jsx("div", { "data-slot": "button-group", "data-orientation": orientation, role: "group", "aria-label": label, className: cn('inline-flex items-center', orientation === 'vertical' ? 'flex-col' : 'flex-row', 
+        // The ring belongs to the group, at full strength, and it is drawn when
+        // focus is anywhere inside it. This is the whole Component: without this
+        // the buttons beside it draw their own and the reader sees three rings
+        // crossing one control.
+        'focus-within:ring-ring focus-within:ring-[3px]', 'rounded-md', className), ...props, children: _jsx("div", { "data-slot": "button-group-inner", className: cn('flex items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', '[&>*]:rounded-none', orientation === 'vertical'
+                ? '[&>*+*]:-mt-px [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md'
+                : '[&>*+*]:-ms-px [&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md', 
+            // The ring is the group's, and only the group's. A button that drew its
+            // own as well would put a second indicator on the same control.
+            '[&>*]:focus-visible:outline-none'), children: children }) }));
+}
+export { ButtonGroup };

package/dist/components/ui/button.d.ts

@@ -10,7 +10,22 @@ declare const buttonVariants: (props?: ({
  * Renders a native `<button>` and takes the standard React button props plus
  * `variant` and `size`. The coarse-pointer media query grows the target to 44px
  * on touch input without changing the desktop metrics.
+ *
+ * **`type` defaults to `"button"`.** A `<button>` with no `type` is a submit button
+ * as far as the HTML is concerned, so the default here was that every Prism `Button`
+ * a consumer placed in their own form submitted it: a Cancel, a Close, a second step
+ * of a wizard, anything that was not the one control that should. The failure is
+ * silent and it costs data, which is why the default is stated here rather than left
+ * to the HTML.
+ *
+ * The cost is one consumer who relied on the old default, and the migration is one
+ * token: pass `type="submit"`. That is a deliberate trade rather than an oversight.
+ * A submit button is a decision someone makes about a form, and this Component
+ * cannot see the form; making the destructive default the safe one and the
+ * deliberate act the explicit one is the only arrangement where the mistake is the
+ * one you have to write on purpose. Every form in this repository already states its
+ * submit button's `type`, which is why nothing here changed when the default did.
  */
-declare function Button({ className, variant, size, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+declare function Button({ className, variant, size, type, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
 export { Button };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,QAAA,MAAM,cAAc;;;8EAmEnB,CAAA;AAED;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQhE;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,QAAA,MAAM,cAAc;;;8EAmEnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAShE;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const buttonVariants = cva(
 // The focus ring is `ring-ring` at full strength, not shadcn's stock
 // `focus-visible:ring-ring/50`. The token build pins `--ring` to a step that
@@ -69,8 +69,23 @@ const buttonVariants = cva(
  * Renders a native `<button>` and takes the standard React button props plus
  * `variant` and `size`. The coarse-pointer media query grows the target to 44px
  * on touch input without changing the desktop metrics.
+ *
+ * **`type` defaults to `"button"`.** A `<button>` with no `type` is a submit button
+ * as far as the HTML is concerned, so the default here was that every Prism `Button`
+ * a consumer placed in their own form submitted it: a Cancel, a Close, a second step
+ * of a wizard, anything that was not the one control that should. The failure is
+ * silent and it costs data, which is why the default is stated here rather than left
+ * to the HTML.
+ *
+ * The cost is one consumer who relied on the old default, and the migration is one
+ * token: pass `type="submit"`. That is a deliberate trade rather than an oversight.
+ * A submit button is a decision someone makes about a form, and this Component
+ * cannot see the form; making the destructive default the safe one and the
+ * deliberate act the explicit one is the only arrangement where the mistake is the
+ * one you have to write on purpose. Every form in this repository already states its
+ * submit button's `type`, which is why nothing here changed when the default did.
  */
-function Button({ className, variant, size, ...props }) {
-    return (_jsx("button", { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+function Button({ className, variant, size, type = 'button', ...props }) {
+    return (_jsx("button", { "data-slot": "button", type: type, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
 export { Button };