@primitiv-ui/react 0.1.38 → 0.1.40

package/dist/RadioCard/RadioCard.js

@@ -0,0 +1,264 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useDirection } from "../DirectionProvider/index.js";
+import { useRovingTabindex } from "../hooks/index.js";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.js";
+import { RadioCardContext } from "./RadioCardContext.js";
+import { RadioCardItemContext } from "./RadioCardItemContext.js";
+import { useRadioCardContext, useRadioCardItemContext, useRadioCardRoot, } from "./hooks/index.js";
+/**
+ * The root of a RadioCard group — a `<div role="radiogroup">` that owns the
+ * selected value and provides {@link RadioCardContext} to descendant
+ * {@link RadioCardItem | `RadioCard.Item`}s.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link RadioCardRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link RadioCardRootProps.value | `value`} *and*
+ *   {@link RadioCardRootProps.onValueChange | `onValueChange`}
+ *   together. The parent owns the value; the component defers every
+ *   change back through the callback.
+ *
+ * **ARIA.** `role="radiogroup"` is set automatically. Provide an
+ * accessible name via `aria-label` or `aria-labelledby`.
+ *
+ * **Orientation.** By default (`orientation="both"`) all four arrow keys
+ * navigate. Pass `orientation="horizontal"` or `"vertical"` to restrict
+ * navigation to a single axis.
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) swaps the horizontal
+ * arrow pair so Arrow Left moves forward in RTL. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied
+ * element with the RadioCard's props merged in. The native `<div>` is dropped.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <RadioCard.Root defaultValue="pro" aria-label="Plan">
+ *   <RadioCard.Item value="starter">
+ *     <h3>Starter</h3>
+ *     <RadioCard.Indicator />
+ *   </RadioCard.Item>
+ *   <RadioCard.Item value="pro">
+ *     <h3>Pro</h3>
+ *     <RadioCard.Indicator />
+ *   </RadioCard.Item>
+ * </RadioCard.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [plan, setPlan] = useState("pro");
+ *
+ * <RadioCard.Root value={plan} onValueChange={setPlan} aria-label="Plan">
+ *   <RadioCard.Item value="starter">Starter</RadioCard.Item>
+ *   <RadioCard.Item value="pro">Pro</RadioCard.Item>
+ * </RadioCard.Root>
+ * ```
+ */
+export function RadioCardRoot({ defaultValue, value: controlledValue, onValueChange, orientation = "both", dir, asChild = false, children, ...rest }) {
+    const resolvedDir = dir ?? useDirection();
+    const { value, select, registerItem, itemValues, disabledValues, focusItem } = useRadioCardRoot({
+        defaultValue,
+        value: controlledValue,
+        onValueChange,
+    });
+    const contextValue = useMemo(() => ({
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+        orientation,
+        dir: resolvedDir,
+    }), [
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+        orientation,
+        resolvedDir,
+    ]);
+    const rootProps = {
+        role: "radiogroup",
+        "aria-orientation": orientation === "both" ? undefined : orientation,
+        dir: resolvedDir,
+        ...rest,
+    };
+    return (_jsx(RadioCardContext.Provider, { value: contextValue, children: asChild ? (_jsx(Slot, { ...rootProps, children: children })) : (_jsx("div", { ...rootProps, children: children })) }));
+}
+/** @internal */
+// Runtime-dead: the compound alias below (same object via Object.assign)
+// overwrites this to "RadioCard" at load, so the value is never observable.
+// The assignment stays because it declares `displayName` on
+// `typeof RadioCardRoot`, which TRadioCardCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+RadioCardRoot.displayName = "RadioCardRoot";
+/**
+ * An individual card option inside a RadioCard group — a native
+ * `<button role="radio">` whose entire surface is the interactive area.
+ * Participates in the roving tabindex and handles arrow-key navigation.
+ *
+ * **Selection.** Clicking an Item (or pressing Space / Enter via native
+ * `<button>` behaviour) selects it. The arrow keys enabled by the group's
+ * `orientation` move focus and selection to the next or previous
+ * non-disabled Item, wrapping at the ends.
+ *
+ * **Roving tabindex.** Only one Item per group is in the document tab
+ * sequence at a time: the selected one if any, otherwise the first
+ * non-disabled Item.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute and
+ * excludes the Item from arrow-key navigation and the roving-tabindex
+ * home base.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state, and `data-disabled=""` is present while disabled — the
+ * same pair `CheckboxCard.Root` publishes, so one stylesheet can dress
+ * both.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element with
+ * the Item's ARIA, data-state, tabIndex, onClick, onKeyDown, disabled, and
+ * ref merged onto it.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `RadioCard.Root`.
+ */
+export function RadioCardItem({ value, children, onClick, onKeyDown, disabled, asChild = false, ref, ...rest }) {
+    const { value: selectedValue, select, registerItem, itemValues, disabledValues, focusItem, orientation, dir, } = useRadioCardContext();
+    const isChecked = selectedValue === value;
+    const enabledValues = useMemo(() => itemValues.filter((v) => !disabledValues.has(v)), [itemValues, disabledValues]);
+    const isTabStop = selectedValue !== undefined ? isChecked : enabledValues[0] === value;
+    const localRef = useRef(null);
+    const setRef = useMemo(() => composeRefs(localRef, ref), [ref]);
+    useEffect(() => {
+        registerItem(value, localRef.current, disabled);
+        return () => registerItem(value, null);
+    }, [value, disabled, registerItem]);
+    const { handleKeyDown } = useRovingTabindex({
+        orientation,
+        dir,
+        navigable: enabledValues,
+        currentKey: value,
+        onNavigate: (target) => {
+            select(target);
+            focusItem(target);
+        },
+    });
+    const itemContextValue = useMemo(() => ({ checked: isChecked }), [isChecked]);
+    const itemProps = {
+        ...rest,
+        ref: setRef,
+        role: "radio",
+        "aria-checked": isChecked,
+        "data-state": isChecked ? "checked" : "unchecked",
+        "data-disabled": disabled ? "" : undefined,
+        tabIndex: isTabStop ? 0 : -1,
+        disabled,
+        onClick: composeEventHandlers(onClick, () => select(value)),
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    };
+    return (_jsx(RadioCardItemContext.Provider, { value: itemContextValue, children: asChild ? (_jsx(Slot, { ...itemProps, children: children })) : (_jsx("button", { type: "button", ...itemProps, children: children })) }));
+}
+/** @internal */
+RadioCardItem.displayName = "RadioCardItem";
+/**
+ * A decorative `<span aria-hidden="true">` that renders its children
+ * only while the enclosing {@link RadioCardItem | `RadioCard.Item`}
+ * is the selected one. Purely visual — accessible state is conveyed by
+ * `aria-checked` on the Item.
+ *
+ * **Styling hook.** Mirrors the parent Item's
+ * `data-state="checked" | "unchecked"` so the same CSS rule can target both.
+ *
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own element
+ * as the indicator itself, with `aria-hidden` and `data-state` merged in.
+ *
+ * **`forceMount` prop.** Pass `forceMount` to keep the indicator in the DOM
+ * while unchecked so a CSS exit animation can play against
+ * `data-state="unchecked"`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <RadioCard.Item value="pro">
+ *   <RadioCard.Indicator />
+ *   Pro
+ * </RadioCard.Item>
+ * ```
+ *
+ * @throws if rendered outside a `RadioCard.Item`.
+ */
+export function RadioCardIndicator({ children, forceMount, asChild = false, ...rest }) {
+    const { checked } = useRadioCardItemContext();
+    if (!checked && !forceMount)
+        return null;
+    const indicatorProps = {
+        ...rest,
+        "aria-hidden": "true",
+        "data-state": checked ? "checked" : "unchecked",
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...indicatorProps, children: children });
+    }
+    return _jsx("span", { ...indicatorProps, children: children });
+}
+/** @internal */
+RadioCardIndicator.displayName = "RadioCardIndicator";
+/**
+ * Headless, accessible **RadioCard** — a card/tile-shaped radio group
+ * variant implementing the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
+ * The entire card surface is the interactive element. Zero styles ship.
+ *
+ * `RadioCard` is both callable (an alias of
+ * {@link RadioCardRoot | `RadioCard.Root`}) and carries its sub-components
+ * as static properties.
+ *
+ * - {@link RadioCardRoot | `RadioCard.Root`} — state owner, context provider,
+ *   `<div role="radiogroup">` wrapper.
+ * - {@link RadioCardItem | `RadioCard.Item`} — a selectable card participating
+ *   in the roving tabindex.
+ * - {@link RadioCardIndicator | `RadioCard.Indicator`} — decorative indicator,
+ *   mounted only while the parent Item is selected.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { RadioCard } from "@primitiv-ui/react";
+ *
+ * <RadioCard.Root defaultValue="pro" aria-label="Plan">
+ *   <RadioCard.Item value="starter">
+ *     <RadioCard.Indicator />
+ *     Starter
+ *   </RadioCard.Item>
+ *   <RadioCard.Item value="pro">
+ *     <RadioCard.Indicator />
+ *     Pro
+ *   </RadioCard.Item>
+ * </RadioCard.Root>
+ * ```
+ *
+ * @see {@link RadioCardRoot} for state modes.
+ * @see {@link RadioCardItem} for selection, roving tabindex, and keyboard navigation.
+ * @see {@link RadioCardIndicator} for the mount gate and animation hooks.
+ */
+const RadioCardCompound = Object.assign(RadioCardRoot, {
+    Root: RadioCardRoot,
+    Item: RadioCardItem,
+    Indicator: RadioCardIndicator,
+});
+RadioCardCompound.displayName = "RadioCard";
+export { RadioCardCompound as RadioCard };

package/dist/RadioCard/RadioCardContext.d.ts

@@ -0,0 +1,21 @@
+import type { Context } from "react";
+import { RadioCardOrientation, RadioCardReadingDirection } from "./types.js";
+/** The value shared by `RadioCard.Root` with its items through context: the
+ * current selection and setter, the item registry used for roving focus and
+ * keyboard navigation, and the resolved orientation/direction. */
+export type RadioCardContextValue = {
+    value: string | undefined;
+    select: (value: string) => void;
+    registerItem: (value: string, element: HTMLButtonElement | null, disabled?: boolean) => void;
+    itemValues: string[];
+    disabledValues: Set<string>;
+    focusItem: (value: string) => void;
+    orientation: RadioCardOrientation;
+    dir: RadioCardReadingDirection;
+};
+/** Strict React context carrying the {@link RadioCardContextValue} from
+ * `RadioCard.Root` to its items. `null` when read outside a `RadioCard.Root`. */
+export declare const RadioCardContext: Context<RadioCardContextValue | null>;
+/** Reads the {@link RadioCardContextValue}; throws when used outside a
+ * `RadioCard.Root`. */
+export declare const useRadioCardContext: () => RadioCardContextValue;

package/dist/RadioCard/RadioCardContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+const radioCardContextPair = createStrictContext("RadioCard sub-components must be rendered inside a <RadioCard.Root>.");
+/** Strict React context carrying the {@link RadioCardContextValue} from
+ * `RadioCard.Root` to its items. `null` when read outside a `RadioCard.Root`. */
+export const RadioCardContext = radioCardContextPair[0];
+/** Reads the {@link RadioCardContextValue}; throws when used outside a
+ * `RadioCard.Root`. */
+export const useRadioCardContext = radioCardContextPair[1];

package/dist/RadioCard/RadioCardItemContext.d.ts

@@ -0,0 +1,14 @@
+import type { Context } from "react";
+/** The value shared by `RadioCard.Item` with its `RadioCard.Indicator`,
+ * exposing whether the item is currently selected. */
+export type RadioCardItemContextValue = {
+    /** Whether the enclosing item is the selected card. */
+    checked: boolean;
+};
+/** Strict React context carrying the {@link RadioCardItemContextValue} from
+ * `RadioCard.Item` to its indicator. `null` when read outside a
+ * `RadioCard.Item`. */
+export declare const RadioCardItemContext: Context<RadioCardItemContextValue | null>;
+/** Reads the {@link RadioCardItemContextValue}; throws when used outside a
+ * `RadioCard.Item`. */
+export declare const useRadioCardItemContext: () => RadioCardItemContextValue;

package/dist/RadioCard/RadioCardItemContext.js

@@ -0,0 +1,10 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+const radioCardItemContextPair = createStrictContext("RadioCard.Indicator must be rendered inside a <RadioCard.Item>.");
+/** Strict React context carrying the {@link RadioCardItemContextValue} from
+ * `RadioCard.Item` to its indicator. `null` when read outside a
+ * `RadioCard.Item`. */
+export const RadioCardItemContext = radioCardItemContextPair[0];
+/** Reads the {@link RadioCardItemContextValue}; throws when used outside a
+ * `RadioCard.Item`. */
+export const useRadioCardItemContext = radioCardItemContextPair[1];

package/dist/RadioCard/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useRadioCardContext } from "./useRadioCardContext.js";
+export { useRadioCardItemContext } from "./useRadioCardItemContext.js";
+export { useRadioCardRoot } from "./useRadioCardRoot.js";

package/dist/RadioCard/hooks/index.js

@@ -0,0 +1,3 @@
+export { useRadioCardContext } from "./useRadioCardContext.js";
+export { useRadioCardItemContext } from "./useRadioCardItemContext.js";
+export { useRadioCardRoot } from "./useRadioCardRoot.js";

package/dist/RadioCard/hooks/useRadioCardContext.d.ts

@@ -0,0 +1 @@
+export { useRadioCardContext } from "../RadioCardContext.js";

package/dist/RadioCard/hooks/useRadioCardContext.js

@@ -0,0 +1 @@
+export { useRadioCardContext } from "../RadioCardContext.js";

package/dist/RadioCard/hooks/useRadioCardItemContext.d.ts

@@ -0,0 +1 @@
+export { useRadioCardItemContext } from "../RadioCardItemContext.js";

package/dist/RadioCard/hooks/useRadioCardItemContext.js

@@ -0,0 +1 @@
+export { useRadioCardItemContext } from "../RadioCardItemContext.js";

package/dist/RadioCard/hooks/useRadioCardRoot.d.ts

@@ -0,0 +1,14 @@
+type UseRadioCardRootArgs = {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function useRadioCardRoot({ defaultValue, value: controlledValue, onValueChange, }: UseRadioCardRootArgs): {
+    value: string | undefined;
+    select: (next: string) => void;
+    registerItem: (itemValue: string, element: HTMLButtonElement | null, disabled?: boolean) => void;
+    itemValues: string[];
+    disabledValues: Set<string>;
+    focusItem: (itemValue: string) => void;
+};
+export {};

package/dist/RadioCard/hooks/useRadioCardRoot.js

@@ -0,0 +1,42 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { useCollection, useControllableState } from "../../hooks/index.js";
+export function useRadioCardRoot({ defaultValue, value: controlledValue, onValueChange, }) {
+    const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
+    const select = useCallback((next) => {
+        if (value === next)
+            return;
+        setValue(next);
+    }, [value, setValue]);
+    const { register: registerItemBase, itemsRef, keys: itemValues, } = useCollection();
+    const registerItem = useCallback((itemValue, element, disabled = false) => {
+        registerItemBase(itemValue, element ? { element, disabled } : null);
+    }, 
+    // `registerItemBase` is a stable useCollection callback (its own deps never
+    // change), so emptying this array yields the identical memoised function.
+    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
+    [registerItemBase]);
+    const disabledValues = useMemo(() => new Set(Array.from(itemsRef.current.entries())
+        .filter(([, meta]) => meta.disabled)
+        .map(([v]) => v)), [itemValues, itemsRef]);
+    const focusItem = useCallback((itemValue) => {
+        // `itemValue` is always sourced from `navigable` (the enabled subset of
+        // `itemValues`), and `useCollection`'s register() writes `itemsRef` and
+        // the `itemValues` state together in the same call — so a value that
+        // appears here is guaranteed to already have a live entry in the map.
+        // Stryker disable next-line OptionalChaining: unreachable given that invariant.
+        itemsRef.current.get(itemValue)?.element.focus();
+    }, 
+    // `itemsRef` is a stable RefObject, so emptying this array yields the
+    // identical memoised function.
+    // Stryker disable next-line ArrayDeclaration: equivalent — stable dependency.
+    [itemsRef]);
+    return {
+        value,
+        select,
+        registerItem,
+        itemValues,
+        disabledValues,
+        focusItem,
+    };
+}

package/dist/RadioCard/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./RadioCard.js";
+export * from "./RadioCardContext.js";
+export * from "./RadioCardItemContext.js";
+export * from "./types.js";

package/dist/RadioCard/index.js

@@ -0,0 +1,4 @@
+export * from "./RadioCard.js";
+export * from "./RadioCardContext.js";
+export * from "./RadioCardItemContext.js";
+export * from "./types.js";

package/dist/RadioCard/types.d.ts

@@ -0,0 +1,129 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+/**
+ * Which arrow keys navigate the group. `"both"` (default) accepts all
+ * four; `"horizontal"` only Arrow Left/Right; `"vertical"` only Arrow
+ * Up/Down.
+ */
+export type RadioCardOrientation = "horizontal" | "vertical" | "both";
+/** Reading direction — swaps the horizontal arrow pair when `"rtl"`. */
+export type RadioCardReadingDirection = "ltr" | "rtl";
+/**
+ * Shared base for both {@link RadioCardRootProps} variants — the native
+ * `<div>` attributes (minus the component-owned `role` and the narrowed
+ * `dir`) plus the `asChild` escape hatch, orientation, reading direction,
+ * and a typed `ref`.
+ */
+export type RadioCardRootBaseProps = Omit<ComponentProps<"div">, "role" | "dir" | "defaultValue"> & {
+    /** The group's cards — typically {@link RadioCardItemProps | `RadioCard.Item`}
+     * elements, each optionally wrapping a {@link RadioCardIndicatorProps | `RadioCard.Indicator`}. */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLDivElement`. */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * When `true`, Root delegates rendering to a single consumer-supplied
+     * element via the {@link Slot} pattern instead of the default `<div>`;
+     * `role="radiogroup"`, `aria-orientation`, `dir`, and remaining props
+     * are merged onto it.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Which arrow keys move focus and selection through the group.
+     * `"both"` enables all four arrows; `"horizontal"` only Arrow
+     * Left/Right; `"vertical"` only Arrow Up/Down. When not `"both"`, the
+     * value is also reflected as `aria-orientation` on the root.
+     * @default "both"
+     */
+    orientation?: RadioCardOrientation;
+    /**
+     * Reading direction. In `"rtl"` the horizontal arrow pair is swapped so
+     * Arrow Left moves forward. When omitted, it is inherited from the
+     * nearest {@link DirectionProvider}, falling back to `"ltr"`.
+     */
+    dir?: RadioCardReadingDirection;
+};
+/**
+ * Uncontrolled variant of {@link RadioCardRootProps}: the component owns
+ * the selected value. Pass `defaultValue` (or omit it); `onValueChange` is
+ * optional and `value` is forbidden.
+ */
+export type RadioCardRootUncontrolledProps = RadioCardRootBaseProps & {
+    /** Value of the card selected on first render. Omit for nothing selected
+     * on mount. */
+    defaultValue?: string;
+    /** Forbidden in uncontrolled mode — use `defaultValue` instead. */
+    value?: never;
+    /** Called with the new value whenever the selection changes. Optional in
+     * uncontrolled mode. */
+    onValueChange?: (value: string) => void;
+};
+/**
+ * Controlled variant of {@link RadioCardRootProps}: the parent owns the
+ * selected value. Pass `value` and `onValueChange` together; `defaultValue`
+ * is forbidden.
+ */
+export type RadioCardRootControlledProps = RadioCardRootBaseProps & {
+    /** Forbidden in controlled mode — use `value` instead. */
+    defaultValue?: never;
+    /** The currently selected value. Must be kept in sync by the parent via
+     * `onValueChange`. */
+    value: string;
+    /** Called with the new value whenever the user selects a card. Required
+     * in controlled mode. */
+    onValueChange: (value: string) => void;
+};
+/**
+ * Props for {@link RadioCard.Root}. A discriminated union of
+ * {@link RadioCardRootUncontrolledProps} and
+ * {@link RadioCardRootControlledProps}, so TypeScript accepts exactly one
+ * state mode.
+ */
+export type RadioCardRootProps = RadioCardRootUncontrolledProps | RadioCardRootControlledProps;
+/**
+ * Props for {@link RadioCardItem | `RadioCard.Item`} — a selectable card
+ * rendered as a `role="radio"` button. `value` identifies the option; all
+ * native `<button>` attributes (minus the component-owned `type`, `role`,
+ * `aria-checked`, and `value`) plus the `asChild` escape hatch and a typed
+ * `ref` are passed through.
+ */
+export type RadioCardItemProps = Omit<ComponentProps<"button">, "type" | "role" | "aria-checked" | "value"> & {
+    /** Uniquely identifies this card within the group and is reported to
+     * `onValueChange` / matched against Root's `value` when selected. Required. */
+    value: string;
+    /** The card's content — the whole surface is the interactive control,
+     * and typically includes a {@link RadioCardIndicatorProps | `RadioCard.Indicator`}. */
+    children?: ReactNode;
+    /** Forwarded to the underlying `HTMLButtonElement`. */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * When `true`, renders the single child element via the {@link Slot}
+     * pattern instead of the default `<button>`; ARIA, `data-state`,
+     * `tabIndex`, `onClick`, `onKeyDown`, `disabled`, and `ref` are merged
+     * onto it. A non-focusable child must be made focusable by the consumer.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * Props for {@link RadioCardIndicator | `RadioCard.Indicator`} — the visual
+ * marker rendered inside the selected card. All native `<span>` attributes
+ * plus `forceMount` and the `asChild` escape hatch.
+ */
+export type RadioCardIndicatorProps = ComponentProps<"span"> & {
+    /** The visual mark shown while the parent Item is selected. */
+    children?: ReactNode;
+    /**
+     * When `true`, keeps the indicator mounted while unchecked so a CSS exit
+     * animation can play against `data-state="unchecked"`. Consumers who set
+     * it own the exit lifecycle.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * When `true`, renders the single child element via the {@link Slot}
+     * pattern instead of the default `<span>`; `aria-hidden` and `data-state`
+     * are merged onto it.
+     * @default false
+     */
+    asChild?: boolean;
+};

package/dist/RadioCard/types.js

@@ -0,0 +1 @@
+export {};