@nizivo/react 0.0.0-stage → 0.2.0

package/dist/card/card.js

@@ -0,0 +1,62 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/card/card.tsx
+function CardRoot({ tone = "surface", padding = "md", elevation = 0, render, className, ...rest }) {
+	return renderElement("div", render, {
+		tone,
+		padding,
+		elevation
+	}, {
+		"data-slot": "card",
+		"data-tone": tone,
+		"data-padding": padding,
+		"data-elevation": elevation === 1 ? "1" : void 0,
+		"data-nz-scheme": tone === "inverse" ? "inverse" : void 0,
+		...rest,
+		className: cx("nz-card", className)
+	});
+}
+function CardHeader({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-header",
+		...rest,
+		className: cx("nz-card-header", className)
+	});
+}
+function CardTitle({ level = 3, render, className, ...rest }) {
+	return renderElement(`h${level}`, render, {}, {
+		"data-slot": "card-title",
+		...rest,
+		className: cx("nz-card-title", className)
+	});
+}
+function CardDescription({ render, className, ...rest }) {
+	return renderElement("p", render, {}, {
+		"data-slot": "card-description",
+		...rest,
+		className: cx("nz-card-description", className)
+	});
+}
+function CardAction({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-action",
+		...rest,
+		className: cx("nz-card-action", className)
+	});
+}
+function CardBody({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-body",
+		...rest,
+		className: cx("nz-card-body", className)
+	});
+}
+function CardFooter({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-footer",
+		...rest,
+		className: cx("nz-card-footer", className)
+	});
+}
+//#endregion
+export { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/card/card.parts.d.ts

@@ -0,0 +1,6 @@
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+declare namespace card_parts_d_exports {
+  export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title };
+}
+//#endregion
+export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title, card_parts_d_exports };

package/dist/card/card.parts.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+//#region src/card/card.parts.ts
+var card_parts_exports = /* @__PURE__ */ __exportAll({
+	Action: () => CardAction,
+	Body: () => CardBody,
+	Description: () => CardDescription,
+	Footer: () => CardFooter,
+	Header: () => CardHeader,
+	Root: () => CardRoot,
+	Title: () => CardTitle
+});
+//#endregion
+export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title, card_parts_exports };

package/dist/card/index.d.ts

@@ -0,0 +1,3 @@
+import { CardAction, CardActionProps, CardBody, CardBodyProps, CardDescription, CardDescriptionProps, CardElevation, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardPadding, CardRoot, CardRootProps, CardRootState, CardTitle, CardTitleLevel, CardTitleProps, CardTone } from "./card.js";
+import { card_parts_d_exports } from "./card.parts.js";
+export { card_parts_d_exports as Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, CardRoot, type CardRootProps, type CardRootState, CardTitle, type CardTitleLevel, type CardTitleProps, type CardTone };

package/dist/card/index.js

@@ -0,0 +1,3 @@
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+import { card_parts_exports } from "./card.parts.js";
+export { card_parts_exports as Card, CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/checkbox/checkbox.client.d.ts

@@ -0,0 +1,37 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/checkbox/checkbox.client.d.ts
+/** `'indeterminate'` is the mixed state of a "select all" box; it submits as unchecked. */
+export type CheckboxCheckedState = boolean | "indeterminate";
+/** Every change comes from the native `change` event: a click, Space, or a click on the label. */
+export type CheckboxChangeReason = "input";
+/** What a `render` function receives for the root `<label>`. */
+export interface CheckboxState {
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<"input">, "type" | "checked" | "defaultChecked" | "children" | "readOnly" | "size"> {
+  /** Controlled state. `'indeterminate'` shows the dash; a click then reports `true`. */
+  checked?: CheckboxCheckedState;
+  /** Uncontrolled initial state. @default false */
+  defaultChecked?: CheckboxCheckedState;
+  /** Called after the consumer's own `onChange`, unless it called `preventDefault()`. */
+  onCheckedChange?: (checked: boolean, details: ChangeDetails<CheckboxChangeReason>) => void;
+  /** An error message is presented for this box. Inside a Field, the Field decides. */
+  invalid?: boolean;
+  /** Replaces the internal check and dash glyphs (decorative), shown while checked or mixed. */
+  indicator?: ReactNode;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<CheckboxState>;
+  /** The label, after the box. Without one, name the box with `aria-label`. */
+  children?: ReactNode;
+}
+/**
+ * `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+ * native `<input>`, so form libraries (`register`, `setFocus`) reach the real control.
+ */
+export declare function Checkbox({ id, name, required, disabled, invalid, "aria-describedby": describedBy, checked, defaultChecked, onCheckedChange, indicator, render, className, style, children, ...rest }: CheckboxProps): ReactElement;
+//#endregion

package/dist/checkbox/checkbox.client.js

@@ -0,0 +1,81 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { CheckGlyph, MinusGlyph } from "../_internal/glyphs.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { useLayoutEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/checkbox/checkbox.client.tsx
+/**
+* `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+* native `<input>`, so form libraries (`register`, `setFocus`) reach the real control.
+*/
+function Checkbox({ id, name, required, disabled, invalid, "aria-describedby": describedBy, checked, defaultChecked, onCheckedChange, indicator, render, className, style, children, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const { readOnly: _readOnly, ...control } = field.controlProps;
+	const input = useRef(null);
+	const initiallyMixed = useRef(defaultChecked === "indeterminate");
+	const mixed = checked === void 0 ? void 0 : checked === "indeterminate";
+	useLayoutEffect(() => {
+		const element = input.current;
+		if (element === null) return;
+		if (mixed !== void 0) element.indeterminate = mixed;
+		else if (initiallyMixed.current) {
+			element.indeterminate = true;
+			initiallyMixed.current = false;
+		}
+	}, [mixed]);
+	const own = {
+		...control,
+		ref: input,
+		checked: checked === void 0 ? void 0 : checked === true,
+		defaultChecked: defaultChecked === void 0 ? void 0 : defaultChecked === true,
+		onChange(event) {
+			if (mixed === true) event.currentTarget.indeterminate = true;
+			onCheckedChange?.(event.currentTarget.checked, details("input", event.nativeEvent));
+		}
+	};
+	const state = {
+		invalid: field.invalid,
+		disabled: field.disabled,
+		required: field.required
+	};
+	return renderElement("label", render, state, {
+		"data-slot": "checkbox",
+		...stateAttrs(state),
+		className: cx("nz-checkbox nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "checkbox",
+				className: "nz-checkbox-input",
+				"data-slot": "checkbox-input"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-checkbox-indicator",
+				"data-slot": "checkbox-indicator",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckGlyph, {}), /* @__PURE__ */ jsx(MinusGlyph, {})] })
+			}),
+			presented(children) && /* @__PURE__ */ jsx("span", {
+				className: "nz-checkbox-label",
+				"data-slot": "checkbox-label",
+				children
+			})
+		] })
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxChangeReason, CheckboxCheckedState, CheckboxProps, CheckboxState } from "./checkbox.client.js";
+export { Checkbox, type CheckboxChangeReason, type CheckboxCheckedState, type CheckboxProps, type CheckboxState };

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.client.js";

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