@primitiv-ui/react 0.1.38 → 0.1.40

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,128 @@
+import type { ReactElement } from "react";
+import { RadioIndicatorProps, RadioRootProps } from "./types.js";
+/**
+ * The root of a Radio — a `<label>` that is itself the **visible, styled box**
+ * and wraps a **real, visually-hidden `<input type="radio">`** (the focusable,
+ * form-participating control) plus the decorative
+ * {@link RadioIndicator | `Radio.Indicator`} dot. It provides
+ * {@link RadioContext | `RadioContext`} to the indicator.
+ *
+ * Because the underlying element is a genuine native radio, it behaves like
+ * one: siblings sharing a `name` form a **native radio group** (the browser
+ * deselects the others when one is chosen — no JS required), it submits with
+ * an enclosing form, resets with it, and gets keyboard activation and focus
+ * for free. This is the standalone primitive for "I own the grouping via
+ * `name`, or I'm a single opt-in". For a managed set with roving-tabindex
+ * arrow-key navigation, reach for `RadioGroup` instead.
+ *
+ * Props routing: `className` / `style` style the **box** (the `<label>` you
+ * see — the input is hidden); every other prop (`name`, `value`, `id`,
+ * `aria-*`, `required`, `disabled`, `ref`, ...) spreads onto the input, because
+ * semantically the Root *is* the radio.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link RadioRootProps.defaultChecked | `defaultChecked`} (or omit). The
+ *   **browser** owns the value, so native `name`-grouping just works.
+ * - **Controlled** — pass {@link RadioRootProps.checked | `checked`} *and*
+ *   {@link RadioRootProps.onCheckedChange | `onCheckedChange`} together. The
+ *   parent owns the value and the grouping.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` and
+ * `data-disabled=""` on the box (and `data-state` on the indicator). These
+ * mirror the input but can lag a silent native deselect, so shipped CSS keys
+ * visibility off the input's native `:checked` / `:has()` selectors;
+ * `data-state` is a convenience mirror.
+ *
+ * @extends HTMLInputElement
+ *
+ * @example Native group (the browser owns selection)
+ * ```tsx
+ * <Radio.Root name="density" value="compact" defaultChecked aria-label="Compact">
+ *   <Radio.Indicator />
+ * </Radio.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("comfortable");
+ *
+ * <Radio.Root
+ *   name="density"
+ *   value="compact"
+ *   checked={value === "compact"}
+ *   onCheckedChange={() => setValue("compact")}
+ *   aria-label="Compact"
+ * >
+ *   <Radio.Indicator />
+ * </Radio.Root>
+ * ```
+ */
+export declare function RadioRoot(props: RadioRootProps): ReactElement;
+export declare namespace RadioRoot {
+    var displayName: string;
+}
+/**
+ * The decorative dot — a `<span>` that is **always mounted**, sitting inside
+ * the {@link RadioRoot | `Radio.Root`} box. Its visibility is a pure CSS
+ * concern, driven off the input's native `:checked` state, so it stays correct
+ * even when the browser silently deselects a grouped sibling (an event React
+ * never sees). The radio's accessible state is conveyed by the native input,
+ * so the dot is purely visual.
+ *
+ * **Styling hook.** Mirrors the root's `data-state="checked" | "unchecked"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own element
+ * (typically an `<svg>` dot) as the indicator itself, with `data-state` merged
+ * onto that element rather than a wrapper.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Dot as the indicator via `asChild`
+ * ```tsx
+ * <Radio.Indicator asChild>
+ *   <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /></svg>
+ * </Radio.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `Radio.Root`.
+ */
+export declare function RadioIndicator({ children, asChild, ...rest }: RadioIndicatorProps): ReactElement;
+export declare namespace RadioIndicator {
+    var displayName: string;
+}
+/** Type of the {@link Radio} compound: the root callable plus its attached sub-components. */
+export type TRadioCompound = typeof RadioRoot & {
+    Root: typeof RadioRoot;
+    Indicator: typeof RadioIndicator;
+};
+/**
+ * Headless, accessible **Radio** — a standalone compound component built on a
+ * **real, visually-hidden native `<input type="radio">`**. Unlike a button
+ * dressed up with `role="radio"`, it participates in native forms and groups
+ * by `name` the way the platform intends. Zero styles ship.
+ *
+ * `Radio` is the lone control for when you own the grouping (via a native
+ * `name`, or a single opt-in); for a managed set with roving-tabindex
+ * keyboard navigation use `RadioGroup`.
+ *
+ * `Radio` is both callable (an alias of {@link RadioRoot | `Radio.Root`}) and
+ * carries its sub-components as static properties.
+ *
+ * - {@link RadioRoot | `Radio.Root`} — the styled box: label + hidden input, state owner, context provider.
+ * - {@link RadioIndicator | `Radio.Indicator`} — the decorative dot.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { Radio } from "@primitiv-ui/react";
+ *
+ * <Radio.Root name="plan" value="free" aria-label="Free">
+ *   <Radio.Indicator />
+ * </Radio.Root>;
+ * ```
+ *
+ * @see {@link RadioRoot} for state modes and native-grouping semantics.
+ */
+declare const RadioCompound: TRadioCompound;
+export { RadioCompound as Radio };

package/dist/Radio/Radio.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Slot } from "../Slot/index.js";
+import { RadioContext } from "./RadioContext.js";
+import { useRadioContext, useRadioRoot } from "./hooks/index.js";
+function dataStateOf(checked) {
+    return checked ? "checked" : "unchecked";
+}
+/**
+ * The root of a Radio — a `<label>` that is itself the **visible, styled box**
+ * and wraps a **real, visually-hidden `<input type="radio">`** (the focusable,
+ * form-participating control) plus the decorative
+ * {@link RadioIndicator | `Radio.Indicator`} dot. It provides
+ * {@link RadioContext | `RadioContext`} to the indicator.
+ *
+ * Because the underlying element is a genuine native radio, it behaves like
+ * one: siblings sharing a `name` form a **native radio group** (the browser
+ * deselects the others when one is chosen — no JS required), it submits with
+ * an enclosing form, resets with it, and gets keyboard activation and focus
+ * for free. This is the standalone primitive for "I own the grouping via
+ * `name`, or I'm a single opt-in". For a managed set with roving-tabindex
+ * arrow-key navigation, reach for `RadioGroup` instead.
+ *
+ * Props routing: `className` / `style` style the **box** (the `<label>` you
+ * see — the input is hidden); every other prop (`name`, `value`, `id`,
+ * `aria-*`, `required`, `disabled`, `ref`, ...) spreads onto the input, because
+ * semantically the Root *is* the radio.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link RadioRootProps.defaultChecked | `defaultChecked`} (or omit). The
+ *   **browser** owns the value, so native `name`-grouping just works.
+ * - **Controlled** — pass {@link RadioRootProps.checked | `checked`} *and*
+ *   {@link RadioRootProps.onCheckedChange | `onCheckedChange`} together. The
+ *   parent owns the value and the grouping.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked"` and
+ * `data-disabled=""` on the box (and `data-state` on the indicator). These
+ * mirror the input but can lag a silent native deselect, so shipped CSS keys
+ * visibility off the input's native `:checked` / `:has()` selectors;
+ * `data-state` is a convenience mirror.
+ *
+ * @extends HTMLInputElement
+ *
+ * @example Native group (the browser owns selection)
+ * ```tsx
+ * <Radio.Root name="density" value="compact" defaultChecked aria-label="Compact">
+ *   <Radio.Indicator />
+ * </Radio.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("comfortable");
+ *
+ * <Radio.Root
+ *   name="density"
+ *   value="compact"
+ *   checked={value === "compact"}
+ *   onCheckedChange={() => setValue("compact")}
+ *   aria-label="Compact"
+ * >
+ *   <Radio.Indicator />
+ * </Radio.Root>
+ * ```
+ */
+export function RadioRoot(props) {
+    const { className, style, children, defaultChecked, checked, onCheckedChange, onChange, disabled, ref, ...inputRest } = props;
+    const { checked: isChecked, handleChange, inputStateProps, } = useRadioRoot({ defaultChecked, checked, onCheckedChange, onChange });
+    const contextValue = useMemo(() => ({ checked: isChecked, disabled: Boolean(disabled) }), [isChecked, disabled]);
+    return (_jsx(RadioContext.Provider, { value: contextValue, children: _jsxs("label", { className: className, style: style, "data-state": dataStateOf(isChecked), "data-disabled": disabled ? "" : undefined, children: [_jsx("input", { type: "radio", ref: ref, disabled: disabled, ...inputRest, ...inputStateProps, onChange: handleChange }), children] }) }));
+}
+// Runtime-dead: the compound alias below (same object via Object.assign)
+// overwrites this to "Radio" at load, so the value is never observable. The
+// assignment stays because it declares `displayName` on `typeof RadioRoot`,
+// which TRadioCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+RadioRoot.displayName = "RadioRoot";
+/**
+ * The decorative dot — a `<span>` that is **always mounted**, sitting inside
+ * the {@link RadioRoot | `Radio.Root`} box. Its visibility is a pure CSS
+ * concern, driven off the input's native `:checked` state, so it stays correct
+ * even when the browser silently deselects a grouped sibling (an event React
+ * never sees). The radio's accessible state is conveyed by the native input,
+ * so the dot is purely visual.
+ *
+ * **Styling hook.** Mirrors the root's `data-state="checked" | "unchecked"`.
+ *
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own element
+ * (typically an `<svg>` dot) as the indicator itself, with `data-state` merged
+ * onto that element rather than a wrapper.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Dot as the indicator via `asChild`
+ * ```tsx
+ * <Radio.Indicator asChild>
+ *   <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /></svg>
+ * </Radio.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `Radio.Root`.
+ */
+export function RadioIndicator({ children, asChild = false, ...rest }) {
+    const { checked } = useRadioContext();
+    const indicatorProps = {
+        ...rest,
+        "aria-hidden": "true",
+        "data-state": dataStateOf(checked),
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...indicatorProps, children: children });
+    }
+    return _jsx("span", { ...indicatorProps, children: children });
+}
+/** @internal */
+RadioIndicator.displayName = "RadioIndicator";
+/**
+ * Headless, accessible **Radio** — a standalone compound component built on a
+ * **real, visually-hidden native `<input type="radio">`**. Unlike a button
+ * dressed up with `role="radio"`, it participates in native forms and groups
+ * by `name` the way the platform intends. Zero styles ship.
+ *
+ * `Radio` is the lone control for when you own the grouping (via a native
+ * `name`, or a single opt-in); for a managed set with roving-tabindex
+ * keyboard navigation use `RadioGroup`.
+ *
+ * `Radio` is both callable (an alias of {@link RadioRoot | `Radio.Root`}) and
+ * carries its sub-components as static properties.
+ *
+ * - {@link RadioRoot | `Radio.Root`} — the styled box: label + hidden input, state owner, context provider.
+ * - {@link RadioIndicator | `Radio.Indicator`} — the decorative dot.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { Radio } from "@primitiv-ui/react";
+ *
+ * <Radio.Root name="plan" value="free" aria-label="Free">
+ *   <Radio.Indicator />
+ * </Radio.Root>;
+ * ```
+ *
+ * @see {@link RadioRoot} for state modes and native-grouping semantics.
+ */
+const RadioCompound = Object.assign(RadioRoot, {
+    Root: RadioRoot,
+    Indicator: RadioIndicator,
+});
+/** @internal */
+RadioCompound.displayName = "Radio";
+export { RadioCompound as Radio };

package/dist/Radio/RadioContext.d.ts

@@ -0,0 +1,13 @@
+export type RadioContextValue = {
+    /**
+     * Best-effort mirror of the input's checked state, for the `data-state`
+     * hook on the visual parts. Accurate in controlled mode and for self-clicks;
+     * may go stale when the browser silently deselects a grouped sibling, which
+     * is why the shipped CSS keys visibility off the input's native `:checked`,
+     * not off `data-state`.
+     */
+    checked: boolean;
+    /** Whether the radio is disabled, for the `data-disabled` hook. */
+    disabled: boolean;
+};
+export declare const RadioContext: import("react").Context<RadioContextValue | null>, useRadioContext: () => RadioContextValue;

package/dist/Radio/RadioContext.js

@@ -0,0 +1,3 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+export const [RadioContext, useRadioContext] = createStrictContext("Radio sub-components must be rendered inside a <Radio.Root>.");

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

@@ -0,0 +1,2 @@
+export { useRadioRoot } from "./useRadioRoot.js";
+export { useRadioContext } from "./useRadioContext.js";

package/dist/Radio/hooks/index.js

@@ -0,0 +1,2 @@
+export { useRadioRoot } from "./useRadioRoot.js";
+export { useRadioContext } from "./useRadioContext.js";

package/dist/Radio/hooks/useRadioContext.d.ts

@@ -0,0 +1 @@
+export { useRadioContext } from "../RadioContext.js";

package/dist/Radio/hooks/useRadioContext.js

@@ -0,0 +1 @@
+export { useRadioContext } from "../RadioContext.js";

package/dist/Radio/hooks/useRadioRoot.d.ts

@@ -0,0 +1,32 @@
+import type { ChangeEvent } from "react";
+import type { RadioChangeHandler } from "../types.js";
+type UseRadioRootArgs = {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onChange?: RadioChangeHandler;
+};
+/**
+ * Resolves the controlled / uncontrolled state for a {@link Radio.Root} and
+ * produces the props to spread onto its native `<input type="radio">`.
+ *
+ * The key correctness move: in **uncontrolled** mode the input is rendered
+ * with `defaultChecked` and *no* `checked` prop, so the browser owns the
+ * value and native `name`-grouping (including the silent deselection of
+ * siblings) works. The returned `checked` is only a best-effort mirror used
+ * for the `data-state` styling hook — it is updated from the input's own
+ * `change` events, and may lag behind a sibling-driven deselect, which the
+ * CSS `:checked` selector handles instead.
+ */
+export declare function useRadioRoot({ defaultChecked, checked: controlledChecked, onCheckedChange, onChange, }: UseRadioRootArgs): {
+    checked: boolean;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    inputStateProps: {
+        checked: boolean;
+        defaultChecked?: undefined;
+    } | {
+        defaultChecked: boolean;
+        checked?: undefined;
+    };
+};
+export {};

package/dist/Radio/hooks/useRadioRoot.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState } from "react";
+/**
+ * Resolves the controlled / uncontrolled state for a {@link Radio.Root} and
+ * produces the props to spread onto its native `<input type="radio">`.
+ *
+ * The key correctness move: in **uncontrolled** mode the input is rendered
+ * with `defaultChecked` and *no* `checked` prop, so the browser owns the
+ * value and native `name`-grouping (including the silent deselection of
+ * siblings) works. The returned `checked` is only a best-effort mirror used
+ * for the `data-state` styling hook — it is updated from the input's own
+ * `change` events, and may lag behind a sibling-driven deselect, which the
+ * CSS `:checked` selector handles instead.
+ */
+export function useRadioRoot({ defaultChecked, checked: controlledChecked, onCheckedChange, onChange, }) {
+    const isControlled = controlledChecked !== undefined;
+    const [mirror, setMirror] = useState(defaultChecked ?? false);
+    const checked = isControlled ? controlledChecked : mirror;
+    const handleChange = (event) => {
+        onChange?.(event);
+        if (event.defaultPrevented)
+            return;
+        const next = event.target.checked;
+        // Stryker disable next-line ConditionalExpression: in controlled mode the
+        // input reads the controlled value, never `mirror`, so setting mirror here
+        // (the mutant's always-run form) has no observable effect — equivalent.
+        if (!isControlled)
+            setMirror(next);
+        onCheckedChange?.(next);
+    };
+    const inputStateProps = isControlled
+        ? { checked: controlledChecked }
+        : { defaultChecked: defaultChecked ?? false };
+    return { checked, handleChange, inputStateProps };
+}

package/dist/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Radio.js";
+export * from "./types.js";

package/dist/Radio/index.js

@@ -0,0 +1,2 @@
+export * from "./Radio.js";
+export * from "./types.js";

package/dist/Radio/types.d.ts

@@ -0,0 +1,79 @@
+import { ChangeEventHandler, ComponentProps, ReactNode, Ref } from "react";
+/**
+ * Props for {@link Radio.Indicator} — the decorative dot. All `<span>`
+ * attributes plus the `asChild` escape hatch. The indicator is always mounted;
+ * its visibility is a CSS concern, driven off the input's native `:checked`
+ * state, so it stays correct even when the browser silently deselects a
+ * grouped sibling (which fires no React event).
+ */
+export type RadioIndicatorProps = ComponentProps<"span"> & {
+    /** Custom dot content. Omit to let the shipped CSS draw the dot off the
+     * input's native `:checked` state; provide your own (an icon, glyph, or
+     * nested element) to override it. */
+    children?: ReactNode;
+    /**
+     * When `true`, render `children` as the indicator element itself (via the
+     * {@link Slot} pattern) instead of wrapping them in a `<span>`. `data-state`
+     * and `aria-hidden` are merged onto that element.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * Shared base for both {@link RadioRootProps} variants — the native
+ * `<input type="radio">` attributes (minus the ones the component owns) plus
+ * the `onCheckedChange` convenience callback. `className` / `style` here style
+ * the **wrapper** (the visible control), not the hidden input; everything
+ * else spreads onto the input, because semantically the Root *is* the radio.
+ */
+export type RadioRootBaseProps = Omit<ComponentProps<"input">, "type" | "checked" | "defaultChecked"> & {
+    /**
+     * Fired with the new checked value whenever this radio becomes selected.
+     * A native radio only ever fires `change` when it moves *into* the checked
+     * state, so this is always called with `true`.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    children?: ReactNode;
+    /** Forwarded to the underlying native `<input type="radio">`. */
+    ref?: Ref<HTMLInputElement>;
+};
+/**
+ * Uncontrolled variant of {@link RadioRootProps}: the **browser** owns the
+ * checked value (the input is rendered with `defaultChecked` and no `checked`
+ * prop), so native `name`-grouping — including the silent deselection of
+ * siblings — works for free. Pass `defaultChecked` (or omit it); `checked` is
+ * forbidden.
+ */
+export type RadioRootUncontrolledProps = RadioRootBaseProps & {
+    /** Whether this radio is selected on first render; the **browser** owns it
+     * thereafter, so native `name`-grouping (including silent deselection of
+     * siblings) works for free. Omit for an initially unselected radio. */
+    defaultChecked?: boolean;
+    /** Forbidden in uncontrolled mode — use `defaultChecked` instead. */
+    checked?: never;
+};
+/**
+ * Controlled variant of {@link RadioRootProps}: the parent owns the checked
+ * value. Pass `checked` and `onCheckedChange` together; `defaultChecked` is
+ * forbidden. The consumer owns grouping in this mode.
+ */
+export type RadioRootControlledProps = RadioRootBaseProps & {
+    /** Forbidden in controlled mode — use `checked` instead. */
+    defaultChecked?: never;
+    /** Whether this radio is currently selected, owned by the parent. The
+     * consumer owns grouping in this mode (typically deriving each radio's
+     * `checked` from a single shared value). Keep it in sync via
+     * `onCheckedChange`. */
+    checked: boolean;
+    /** Called (always with `true`) whenever this radio becomes selected —
+     * required in controlled mode so the parent can update its shared value. */
+    onCheckedChange: (checked: boolean) => void;
+};
+/**
+ * Props for {@link Radio.Root}. A discriminated union of
+ * {@link RadioRootUncontrolledProps} and {@link RadioRootControlledProps},
+ * so TypeScript accepts exactly one state mode.
+ */
+export type RadioRootProps = RadioRootUncontrolledProps | RadioRootControlledProps;
+/** Internal: the native `onChange` shape the Root composes with its own. */
+export type RadioChangeHandler = ChangeEventHandler<HTMLInputElement>;

package/dist/Radio/types.js

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

package/dist/RadioCard/RadioCard.d.ts

@@ -0,0 +1,176 @@
+import type { ReactElement } from "react";
+import { RadioCardIndicatorProps, RadioCardItemProps, RadioCardRootProps } from "./types.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 declare function RadioCardRoot({ defaultValue, value: controlledValue, onValueChange, orientation, dir, asChild, children, ...rest }: RadioCardRootProps): ReactElement;
+export declare namespace RadioCardRoot {
+    var displayName: string;
+}
+/**
+ * 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 declare function RadioCardItem({ value, children, onClick, onKeyDown, disabled, asChild, ref, ...rest }: RadioCardItemProps): ReactElement;
+export declare namespace RadioCardItem {
+    var displayName: string;
+}
+/**
+ * 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 declare function RadioCardIndicator({ children, forceMount, asChild, ...rest }: RadioCardIndicatorProps): ReactElement | null;
+export declare namespace RadioCardIndicator {
+    var displayName: string;
+}
+/** Type of the {@link RadioCard} compound: the callable `RadioCard.Root`
+ * component augmented with its sub-components as static properties. */
+export type TRadioCardCompound = typeof RadioCardRoot & {
+    Root: typeof RadioCardRoot;
+    Item: typeof RadioCardItem;
+    Indicator: typeof 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.
+ */
+declare const RadioCardCompound: TRadioCardCompound;
+export { RadioCardCompound as RadioCard };