@nizivo/react 0.1.0 → 0.2.1

package/dist/banner/banner.d.ts

@@ -0,0 +1,34 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/banner/banner.d.ts
+/** Figma "Tone": `brand` is Figma's Promo (handoff Q25, D-bq). */
+export type BannerTone = "brand" | "warning";
+export interface BannerState {
+  tone: BannerTone;
+}
+export interface BannerProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  /** @default 'brand' */
+  tone?: BannerTone;
+  /** One line, Heading/H4. The description is `children`. */
+  title?: ReactNode;
+  /**
+   * A 72 px picture before the text, such as Figma's product render on the brand banner:
+   * `<img src="…" alt="" width={72} height={72} />`. Decorative; the text carries the message.
+   */
+  media?: ReactNode;
+  /** Decorative tone glyph at 24 px, such as a triangle for `warning`; used when there is no `media`. */
+  icon?: ReactNode;
+  /** One control after the text, such as `<Button variant="primary">Add storefront</Button>`. */
+  action?: ReactNode;
+  /** `<BannerDismiss onDismiss={…} />`; leave it out for a banner that blocks work and stays. */
+  dismiss?: ReactNode;
+  /**
+   * No live role by default: a banner present on page load must not interrupt. Pass `role="status"`
+   * for one added after a user action.
+   */
+  role?: ComponentPropsWithRef<"div">["role"];
+  render?: RenderProp<BannerState>;
+}
+/** A page-wide message under the header (Figma Banner 7275:15120): one at a time. */
+export declare function Banner({ tone, title, media, icon, action, dismiss, render, className, children, ...rest }: BannerProps): ReactElement;
+//#endregion

package/dist/banner/banner.js

@@ -0,0 +1,47 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/banner/banner.tsx
+/** A page-wide message under the header (Figma Banner 7275:15120): one at a time. */
+function Banner({ tone = "brand", title, media, icon, action, dismiss, render, className, children, ...rest }) {
+	return renderElement("div", render, { tone }, {
+		"data-slot": "banner",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-banner", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			media != null ? /* @__PURE__ */ jsx("span", {
+				className: "nz-banner-media",
+				"data-slot": "banner-media",
+				"aria-hidden": "true",
+				children: media
+			}) : icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-banner-icon",
+				"data-slot": "banner-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-banner-content",
+				"data-slot": "banner-content",
+				children: [title != null && /* @__PURE__ */ jsx("div", {
+					className: "nz-banner-title",
+					"data-slot": "banner-title",
+					children: title
+				}), children != null && children !== false && children !== "" && /* @__PURE__ */ jsx("div", {
+					className: "nz-banner-description",
+					"data-slot": "banner-description",
+					children
+				})]
+			}),
+			action != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-banner-action",
+				"data-slot": "banner-action",
+				children: action
+			}),
+			dismiss
+		] })
+	});
+}
+//#endregion
+export { Banner };

package/dist/banner/index.d.ts

@@ -0,0 +1,3 @@
+import { Banner, BannerProps, BannerState, BannerTone } from "./banner.js";
+import { BannerDismiss, BannerDismissLabels, BannerDismissProps } from "./banner-dismiss.client.js";
+export { Banner, BannerDismiss, type BannerDismissLabels, type BannerDismissProps, type BannerProps, type BannerState, type BannerTone };

package/dist/banner/index.js

@@ -0,0 +1,3 @@
+import { Banner } from "./banner.js";
+import { BannerDismiss } from "./banner-dismiss.client.js";
+export { Banner, BannerDismiss };

package/dist/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,46 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/breadcrumb/breadcrumb.d.ts
+/** Breadcrumb's own strings (§16.4): serialisable, English defaults. */
+export interface BreadcrumbLabels {
+  /** The landmark's name. @default 'Breadcrumb' */
+  nav: string;
+}
+export interface BreadcrumbRootProps extends ComponentPropsWithRef<"nav"> {
+  /**
+   * Replaces the chevron between levels on every `Breadcrumb.Item` that sets none. It is decorative
+   * (`aria-hidden`), so a character such as "/" is fine. It is not mirrored under `dir="rtl"`.
+   */
+  separator?: ReactNode;
+  /** An `aria-label` wins over `labels.nav`. */
+  labels?: Partial<BreadcrumbLabels>;
+  /** Must render a navigation landmark (a `<nav>`, or an element with `role="navigation"`). */
+  render?: RenderProp<Record<string, never>>;
+  /** `Breadcrumb.Item` elements, the root of the site first. */
+  children?: ReactNode;
+}
+export interface BreadcrumbItemState {
+  current: boolean;
+}
+export interface BreadcrumbItemProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /**
+   * The page being shown: renders text with `aria-current="page"` instead of a link (Figma: the last
+   * item, Label/M Strong). @default false
+   */
+  current?: boolean;
+  /**
+   * The router's link, for example `render={<Link href="/products" />}`. It must render an `<a>`.
+   * Ignored on the current item, which is not a link; so are the other anchor props (`href`), while
+   * `className` goes on whichever element renders.
+   */
+  render?: RenderProp<BreadcrumbItemState>;
+  /**
+   * The mark before this level (none is drawn before the first). Only the default chevron mirrors
+   * under `dir="rtl"`. @default the chevron glyph
+   */
+  separator?: ReactNode;
+  children: ReactNode;
+}
+export declare function BreadcrumbRoot({ separator, labels, render, className, children, ...rest }: BreadcrumbRootProps): ReactElement;
+export declare function BreadcrumbItem({ current, render, separator, className, children, ...rest }: BreadcrumbItemProps): ReactElement;
+//#endregion

package/dist/breadcrumb/breadcrumb.js

@@ -0,0 +1,46 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronGlyph } from "../_internal/glyphs.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/breadcrumb/breadcrumb.tsx
+function BreadcrumbRoot({ separator, labels, render, className, children, ...rest }) {
+	const items = separator === void 0 ? children : Children.map(children, (child) => isValidElement(child) && child.type === BreadcrumbItem && child.props.separator === void 0 ? cloneElement(child, { separator }) : child);
+	return renderElement("nav", render, {}, {
+		"data-slot": "breadcrumb",
+		"aria-label": labels?.nav ?? "Breadcrumb",
+		...rest,
+		className: cx("nz-breadcrumb", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "nz-breadcrumb-list",
+			"data-slot": "breadcrumb-list",
+			children: items
+		})
+	});
+}
+function BreadcrumbItem({ current = false, render, separator, className, children, ...rest }) {
+	const level = current ? /* @__PURE__ */ jsx("span", {
+		className: cx("nz-breadcrumb-current", className),
+		"data-slot": "breadcrumb-current",
+		"aria-current": "page",
+		children
+	}) : renderElement("a", render, { current }, {
+		"data-slot": "breadcrumb-link",
+		...rest,
+		className: cx("nz-breadcrumb-link", className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "nz-breadcrumb-item",
+		"data-slot": "breadcrumb-item",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "nz-breadcrumb-separator",
+			"data-slot": "breadcrumb-separator",
+			"data-mirror": separator === void 0 ? "rtl" : void 0,
+			"aria-hidden": "true",
+			children: separator ?? /* @__PURE__ */ jsx(ChevronGlyph, {})
+		}), level]
+	});
+}
+//#endregion
+export { BreadcrumbItem, BreadcrumbRoot };

package/dist/breadcrumb/breadcrumb.parts.d.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+declare namespace breadcrumb_parts_d_exports {
+  export { BreadcrumbItem as Item, BreadcrumbRoot as Root };
+}
+//#endregion
+export { BreadcrumbItem as Item, BreadcrumbRoot as Root, breadcrumb_parts_d_exports };

package/dist/breadcrumb/breadcrumb.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+//#region src/breadcrumb/breadcrumb.parts.ts
+var breadcrumb_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => BreadcrumbItem,
+	Root: () => BreadcrumbRoot
+});
+//#endregion
+export { BreadcrumbItem as Item, BreadcrumbRoot as Root, breadcrumb_parts_exports };

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbItem, BreadcrumbItemProps, BreadcrumbItemState, BreadcrumbLabels, BreadcrumbRoot, BreadcrumbRootProps } from "./breadcrumb.js";
+import { breadcrumb_parts_d_exports } from "./breadcrumb.parts.js";
+export { breadcrumb_parts_d_exports as Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbItemState, type BreadcrumbLabels, BreadcrumbRoot, type BreadcrumbRootProps };

package/dist/breadcrumb/index.js

@@ -0,0 +1,3 @@
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+import { breadcrumb_parts_exports } from "./breadcrumb.parts.js";
+export { breadcrumb_parts_exports as Breadcrumb, BreadcrumbItem, BreadcrumbRoot };

package/dist/button/button.d.ts

@@ -44,8 +44,9 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "chil
   render?: RenderProp<ButtonState>;
   /**
    * Overrides Button's strings, for example `labels={{ pending: 'Wird geladen…' }}`; `pending: ''`
-   * shows no text and keeps the label visible. Translation is per instance (no global labels in 0.1.0): an app wraps Button once to
-   * pass its own.
+   * shows no text and keeps the label visible. Translation is per instance: Button is a server
+   * part, so `NizivoConfig labels` does not reach it, and an app wraps Button once to pass its own.
+   * SubmitButton, its client twin, does read them (`button.pending`).
    */
   labels?: Partial<ButtonLabels>;
   children?: ReactNode;

package/dist/card/card.d.ts

@@ -1,8 +1,12 @@
 import { RenderProp } from "../contracts/render.js";
 import { ComponentPropsWithRef, ReactElement } from "react";
 //#region src/card/card.d.ts
-/** Figma "Style": Surface | Subtle | Inverse. */
-export type CardTone = "surface" | "subtle" | "inverse";
+/**
+ * Figma "Style": Surface | Subtle | Inverse, plus the tinted surfaces of the dashboard widgets (KPI
+ * Tile "Tinted", Insight Card Brand and Accent; figma/04 §2/§3, M41): `brand` (bg/brand-subtle) and
+ * `accent` (bg/accent-subtle).
+ */
+export type CardTone = "surface" | "subtle" | "inverse" | "brand" | "accent";
 export type CardTitleLevel = 2 | 3 | 4 | 5 | 6;
 /** 24 px (`md`, Figma) or 20 px (`sm`). */
 export type CardPadding = "sm" | "md";
@@ -16,6 +20,9 @@ export interface CardRootState {
 export interface CardRootProps extends ComponentPropsWithRef<"div"> {
   /**
    * `inverse` sets `data-nz-scheme="inverse"`, so every token inside resolves in the inverse scheme.
+   * Every tone declares `--nz-surface`, the colour the card paints, for children to read with a
+   * fallback (`var(--nz-surface, var(--nz-bg-surface))`); on `brand` and `accent` a Delta pill
+   * inside is `bg/surface`, so it shows on the tint (M42).
    * @default 'surface'
    */
   tone?: CardTone;

package/dist/chip-group/chip-group.client.d.ts

@@ -0,0 +1,88 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/chip-group/chip-group.client.d.ts
+/** Why the value changed: the user checked or cleared an input (a pointer or a key). */
+export type ChipGroupChangeReason = "input";
+/** ChipGroup's own strings (§16.4): serialisable, English defaults. */
+export interface ChipGroupLabels {
+  /**
+   * Describes an `unavailable` chip (out of stock), read after its name; the strike-through is
+   * only visual. @default 'Unavailable'
+   */
+  unavailable: string;
+}
+export interface ChipGroupState {
+  multiple: boolean;
+  disabled: boolean;
+  invalid: boolean;
+}
+/** What `onValueChange` receives: the checked value, or with `multiple` every checked value. */
+export type ChipGroupValue<M extends boolean> = M extends true ? string[] : string;
+/**
+ * `M` is `true` when `multiple` is: TypeScript infers it from the prop, so `value`, `defaultValue`
+ * and `onValueChange` take arrays exactly when the chips are checkboxes.
+ */
+export interface ChipGroupProps<M extends boolean = false> extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "role"> {
+  /**
+   * Any number of values: native checkboxes under `role="group"`. Without it, one value: native
+   * radios under `role="radiogroup"`. @default false
+   */
+  multiple?: M;
+  /** Controlled: the checked chip's `value` (or `null` for none); with `multiple`, every one's. */
+  value?: M extends true ? readonly string[] : string | null;
+  /** The chip, or with `multiple` the chips, checked at first (`form.reset()` returns to them). */
+  defaultValue?: M extends true ? readonly string[] : string;
+  /**
+   * Called when the user checks a chip (or, with `multiple`, checks or clears one), with every checked
+   * value in document order; `details.event` is the native `change` event.
+   */
+  onValueChange?: (value: ChipGroupValue<M>, details: ChangeDetails<ChipGroupChangeReason>) => void;
+  /**
+   * A choice must be made before the form submits. One value only: on checkboxes the browser would
+   * require every one.
+   */
+  required?: M extends true ? never : boolean;
+  /**
+   * The inputs' shared name, and the `FormData` key (a multiple group submits one entry per checked
+   * chip). Without one (and outside a named Field), a generated name groups the inputs.
+   */
+  name?: string;
+  /** The `<form>` the inputs belong to, when they are outside it. */
+  form?: string;
+  /** Disables every chip. */
+  disabled?: boolean;
+  /** An error message is presented (set by a Field). */
+  invalid?: boolean;
+  labels?: Partial<ChipGroupLabels>;
+  render?: RenderProp<ChipGroupState>;
+  /** `Chip` elements. */
+  children?: ReactNode;
+}
+export interface ChipState {
+  disabled: boolean;
+  unavailable: boolean;
+}
+export interface ChipProps extends Omit<ComponentPropsWithRef<"label">, "htmlFor" | "aria-label"> {
+  /** This chip's value: what `onValueChange` receives and the form submits. */
+  value: string;
+  disabled?: boolean;
+  /**
+   * Out of stock, or otherwise not available: it keeps its colour, gets a strike-through and is
+   * described as `labels.unavailable`. It can still be chosen (to show "Notify me", for example);
+   * add `disabled` to stop that. @default false
+   */
+  unavailable?: boolean;
+  /**
+   * A swatch or glyph before the text (Figma Type=Colour), in a 24 px circle; decorative. A colour
+   * is data: pass an element with that background, such as `<span style={{ background: '#2e5a3c' }} />`.
+   */
+  leading?: ReactNode;
+  /** Names a chip with no text (a swatch only): it goes on the input, which is what is announced. */
+  "aria-label"?: string;
+  render?: RenderProp<ChipState>;
+  children?: ReactNode;
+}
+export declare function ChipGroup<M extends boolean = false>({ multiple: multipleProp, value: valueProp, defaultValue: defaultValueProp, onValueChange: onValueChangeProp, name, form, required: requiredProp, disabled, invalid, labels: labelsProp, "aria-describedby": describedBy, "aria-labelledby": labelledBy, render, className, children, ...rest }: ChipGroupProps<M>): JSX.Element;
+export declare function Chip({ value, disabled, unavailable, leading, "aria-label": ariaLabel, render, className, children, ...rest }: ChipProps): JSX.Element;
+//#endregion

package/dist/chip-group/chip-group.client.js

@@ -0,0 +1,157 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { clearFocus, definedProps, markFocus, markKeyDown } from "../_internal/nested-focus.js";
+import { createContext, use, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chip-group/chip-group.client.tsx
+const GroupContext = createContext(null);
+function ChipGroup({ multiple: multipleProp, value: valueProp, defaultValue: defaultValueProp, onValueChange: onValueChangeProp, name, form, required: requiredProp, disabled, invalid, labels: labelsProp, "aria-describedby": describedBy, "aria-labelledby": labelledBy, render, className, children, ...rest }) {
+	const labels = useLabels("chipGroup", labelsProp);
+	const multiple = multipleProp === true;
+	const value = valueProp;
+	const defaultValue = defaultValueProp;
+	const required = requiredProp;
+	const onValueChange = onValueChangeProp;
+	const field = useFieldControl({
+		name,
+		required: multiple ? false : required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const generated = useId();
+	const { required: inputRequired, onInvalid, onInput, onBlur } = field.controlProps;
+	const groupName = field.name ?? generated;
+	const unavailable = labels?.unavailable ?? "Unavailable";
+	const group = useMemo(() => {
+		const controlled = value !== void 0;
+		const has = (list, item) => typeof list === "string" ? list === item : list?.includes(item) === true;
+		return {
+			name: groupName,
+			multiple,
+			checkedProps: (item) => controlled ? { checked: has(value, item) } : { defaultChecked: has(defaultValue, item) },
+			disabled: field.disabled,
+			invalid: field.invalid,
+			unavailable,
+			input: definedProps({
+				required: multiple ? void 0 : inputRequired,
+				form,
+				onInvalid,
+				onInput,
+				onBlur
+			}),
+			onChange(item, event) {
+				if (onValueChange === void 0) return;
+				const target = event.currentTarget;
+				if (!multiple) {
+					if (target.checked) onValueChange(item, details("input", event.nativeEvent));
+					return;
+				}
+				const checked = [...target.closest("[data-slot=\"chip-group\"]")?.querySelectorAll("input[data-slot=\"chip-input\"]") ?? []].filter((input) => input.name === groupName && input.checked).map((input) => input.value);
+				onValueChange(checked, details("input", event.nativeEvent));
+			}
+		};
+	}, [
+		groupName,
+		multiple,
+		value,
+		defaultValue,
+		field.disabled,
+		field.invalid,
+		unavailable,
+		inputRequired,
+		form,
+		onInvalid,
+		onInput,
+		onBlur,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(GroupContext, {
+		value: group,
+		children: renderElement("div", render, {
+			multiple,
+			disabled: field.disabled,
+			invalid: field.invalid
+		}, {
+			"data-slot": "chip-group",
+			...stateAttrs({
+				disabled: field.disabled,
+				invalid: field.invalid,
+				required: field.required
+			}),
+			...rest,
+			role: multiple ? "group" : "radiogroup",
+			"aria-labelledby": labelledBy ?? field.labelledBy,
+			"aria-describedby": field.describedBy,
+			"aria-invalid": !multiple && field.invalid ? true : void 0,
+			"aria-required": !multiple && field.required ? true : void 0,
+			className: cx("nz-chip-group", className),
+			children
+		})
+	});
+}
+function Chip({ value, disabled, unavailable = false, leading, "aria-label": ariaLabel, render, className, children, ...rest }) {
+	const group = use(GroupContext);
+	if (group === null) throw new Error("Chip must be inside ChipGroup");
+	const off = disabled === true || group.disabled;
+	const noteId = useId();
+	const strike = unavailable ? /* @__PURE__ */ jsx("span", {
+		className: "nz-chip-strike",
+		"data-slot": "chip-strike",
+		"aria-hidden": "true"
+	}) : null;
+	return renderElement("label", render, {
+		disabled: off,
+		unavailable
+	}, {
+		"data-slot": "chip",
+		...stateAttrs({ disabled: off }),
+		...rest,
+		className: cx("nz-chip", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(group.input, {
+					onChange: (event) => group.onChange(value, event),
+					onFocus: markFocus,
+					onBlur: clearFocus,
+					onKeyDown: markKeyDown
+				}),
+				...group.checkedProps(value),
+				type: group.multiple ? "checkbox" : "radio",
+				className: "nz-chip-input",
+				"data-slot": "chip-input",
+				name: group.name,
+				value,
+				disabled: off || void 0,
+				"aria-label": ariaLabel,
+				"aria-describedby": unavailable ? noteId : void 0,
+				"aria-invalid": group.multiple && group.invalid ? true : void 0
+			}),
+			leading != null && /* @__PURE__ */ jsxs("span", {
+				className: "nz-chip-leading",
+				"data-slot": "chip-leading",
+				"aria-hidden": "true",
+				children: [leading, strike]
+			}),
+			children != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-chip-label",
+				"data-slot": "chip-label",
+				children
+			}),
+			leading == null && strike,
+			unavailable && /* @__PURE__ */ jsx("span", {
+				id: noteId,
+				hidden: true,
+				children: group.unavailable
+			})
+		] })
+	});
+}
+//#endregion
+export { Chip, ChipGroup };

package/dist/chip-group/index.d.ts

@@ -0,0 +1,2 @@
+import { Chip, ChipGroup, ChipGroupChangeReason, ChipGroupLabels, ChipGroupProps, ChipGroupState, ChipGroupValue, ChipProps, ChipState } from "./chip-group.client.js";
+export { Chip, ChipGroup, type ChipGroupChangeReason, type ChipGroupLabels, type ChipGroupProps, type ChipGroupState, type ChipGroupValue, type ChipProps, type ChipState };

package/dist/chip-group/index.js

@@ -0,0 +1 @@
+export { Chip, ChipGroup } from "./chip-group.client.js";

package/dist/choice-card/choice-card.client.d.ts

@@ -0,0 +1,66 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/choice-card/choice-card.client.d.ts
+/** Why the value changed: the user checked a radio (a pointer or a key). */
+export type ChoiceCardChangeReason = "input";
+export interface ChoiceCardGroupState {
+  disabled: boolean;
+  invalid: boolean;
+}
+export interface ChoiceCardGroupProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "role"> {
+  /** Controlled: the checked card's `value`, or `null` for none. */
+  value?: string | null;
+  /** The card checked at first (uncontrolled; `form.reset()` returns to it). */
+  defaultValue?: string;
+  /** Called when the user checks a card; `details.event` is the native `change` event. */
+  onValueChange?: (value: string, details: ChangeDetails<ChoiceCardChangeReason>) => void;
+  /**
+   * The radios' shared name, and the `FormData` key. Without one (and outside a named Field), a
+   * generated name groups the radios.
+   */
+  name?: string;
+  /** The `<form>` the radios belong to, when they are outside it. */
+  form?: string;
+  /** A choice must be made before the form submits. */
+  required?: boolean;
+  /** Disables every card. */
+  disabled?: boolean;
+  /**
+   * An error message is presented (set by a Field): the checked card, or every card when none is
+   * checked, shows the critical edge.
+   */
+  invalid?: boolean;
+  render?: RenderProp<ChoiceCardGroupState>;
+  /** `ChoiceCard` elements, possibly with other content between them (an "Add" row). */
+  children?: ReactNode;
+}
+export interface ChoiceCardState {
+  disabled: boolean;
+}
+export interface ChoiceCardProps extends Omit<ComponentPropsWithRef<"label">, "htmlFor"> {
+  /** This card's value: what `onValueChange` receives and the form submits. */
+  value: string;
+  disabled?: boolean;
+  /**
+   * A mark after the radio, such as a card brand's logo (Figma's 44 × 30 Mark); decorative, so put
+   * the brand's name in the text too.
+   */
+  leading?: ReactNode;
+  /**
+   * A second line, such as "Expires 08/28". It describes the radio (`aria-describedby`) instead of
+   * joining its name.
+   */
+  description?: ReactNode;
+  /**
+   * Content at the card's end, such as a "Default" `Badge` (Figma's Show default): composition, not a
+   * prop. Its text joins the radio's name, after `children`.
+   */
+  trailing?: ReactNode;
+  render?: RenderProp<ChoiceCardState>;
+  /** The radio's name, such as "Visa ending in 4242". */
+  children: ReactNode;
+}
+export declare function ChoiceCardGroup({ value, defaultValue, onValueChange, name, form, required, disabled, invalid, "aria-describedby": describedBy, "aria-labelledby": labelledBy, render, className, children, ...rest }: ChoiceCardGroupProps): JSX.Element;
+export declare function ChoiceCard({ value, disabled, leading, description, trailing, render, className, children, ...rest }: ChoiceCardProps): JSX.Element;
+//#endregion