@primitiv-ui/react 0.1.37 → 0.1.39

package/dist/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,192 @@
+import type { ReactElement } from "react";
+import { RadioGroupIndicatorProps, RadioGroupItemProps, RadioGroupRootProps } from "./types.js";
+/**
+ * The root of a RadioGroup — a `<div role="radiogroup">` that owns the
+ * selected value and provides {@link RadioGroupContext} to descendant
+ * {@link RadioGroupItem | `RadioGroup.Item`}s.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link RadioGroupRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link RadioGroupRootProps.value | `value`} *and*
+ *   {@link RadioGroupRootProps.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 (e.g. `<menu role="menu">` for dropdown composition) with
+ * the RadioGroup's props merged in. The native `<div>` is dropped.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <RadioGroup.Root defaultValue="comfortable" aria-label="Density">
+ *   <RadioGroup.Item value="compact">
+ *     <RadioGroup.Indicator />
+ *     Compact
+ *   </RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">
+ *     <RadioGroup.Indicator />
+ *     Comfortable
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("comfortable");
+ *
+ * <RadioGroup.Root value={value} onValueChange={setValue} aria-label="...">
+ *   <RadioGroup.Item value="compact">Compact</RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">Comfortable</RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ */
+export declare function RadioGroupRoot({ defaultValue, value: controlledValue, onValueChange, orientation, dir, asChild, children, ...rest }: RadioGroupRootProps): ReactElement;
+export declare namespace RadioGroupRoot {
+    var displayName: string;
+}
+/**
+ * An individual radio option inside a RadioGroup — a native
+ * `<button role="radio">` that reports its state, participates in the
+ * roving tabindex, and handles arrow-key navigation within the group.
+ *
+ * **Selection.** Clicking an Item (or pressing Space / Enter on the
+ * focused Item 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. All others have `tabIndex=-1` so `Tab` escapes
+ * the group in a single keystroke.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute (the
+ * browser suppresses clicks and removes it from the focus ring) and
+ * excludes the Item from arrow-key navigation and the roving-tabindex
+ * home base. Styling via `:disabled` works natively.
+ *
+ * **Styling hook.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state for CSS targeting.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element
+ * (e.g. `<li role="menuitemradio">` for dropdown menu composition)
+ * with the Item's ARIA, data-state, tabIndex, onClick, onKeyDown,
+ * disabled, and ref merged onto it. The native `<button>` is dropped;
+ * consumers who render a non-focusable element are responsible for
+ * making it focusable.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `RadioGroup.Root`.
+ */
+export declare function RadioGroupItem({ value, children, onClick, onKeyDown, disabled, asChild, ref, ...rest }: RadioGroupItemProps): ReactElement;
+export declare namespace RadioGroupItem {
+    var displayName: string;
+}
+/**
+ * A decorative `<span aria-hidden="true">` that renders its children
+ * only while the enclosing {@link RadioGroupItem | `RadioGroup.Item`}
+ * is the selected one — typically the filled dot inside a radio
+ * control. The radio's accessible state is already conveyed by
+ * `aria-checked` on the Item, so the indicator is purely visual.
+ *
+ * **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 (typically an `<svg>` dot) as the indicator itself, with
+ * `aria-hidden` and `data-state` merged onto that element rather than
+ * a wrapper.
+ *
+ * **`forceMount` prop.** Pass `forceMount` to keep the indicator in
+ * the DOM while unchecked so a CSS exit animation can play against
+ * `data-state="unchecked"`. Consumers who use `forceMount` own the
+ * exit lifecycle themselves.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Default span wrapper
+ * ```tsx
+ * <RadioGroup.Item value="red">
+ *   <RadioGroup.Indicator />
+ *   Red
+ * </RadioGroup.Item>
+ * ```
+ *
+ * @example Icon as the indicator via `asChild`
+ * ```tsx
+ * <RadioGroup.Indicator asChild>
+ *   <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /></svg>
+ * </RadioGroup.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `RadioGroup.Item`.
+ */
+export declare function RadioGroupIndicator({ children, forceMount, asChild, ...rest }: RadioGroupIndicatorProps): ReactElement | null;
+export declare namespace RadioGroupIndicator {
+    var displayName: string;
+}
+/** Type of the {@link RadioGroup} compound: the root callable plus its attached sub-components. */
+export type TRadioGroupCompound = typeof RadioGroupRoot & {
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioGroupItem;
+    Indicator: typeof RadioGroupIndicator;
+};
+/**
+ * Headless, accessible **RadioGroup** — a compound component
+ * implementing the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+ * built on native `<button role="radio">` elements. Zero styles ship.
+ *
+ * `RadioGroup` is both callable (an alias of
+ * {@link RadioGroupRoot | `RadioGroup.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability.
+ *
+ * - {@link RadioGroupRoot | `RadioGroup.Root`} — state owner, context
+ *   provider, `<div role="radiogroup">` wrapper.
+ * - {@link RadioGroupItem | `RadioGroup.Item`} — a selectable radio
+ *   button participating in the roving tabindex.
+ * - {@link RadioGroupIndicator | `RadioGroup.Indicator`} — decorative
+ *   dot, mounted only while the parent Item is selected.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { RadioGroup } from "@primitiv-ui/react";
+ *
+ * <RadioGroup.Root defaultValue="compact" aria-label="Density">
+ *   <RadioGroup.Item value="compact">
+ *     <RadioGroup.Indicator />
+ *     Compact
+ *   </RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">
+ *     <RadioGroup.Indicator />
+ *     Comfortable
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>;
+ * ```
+ *
+ * @see {@link RadioGroupRoot} for state modes.
+ * @see {@link RadioGroupItem} for selection, roving tabindex, and keyboard navigation.
+ * @see {@link RadioGroupIndicator} for the mount gate and animation hooks.
+ */
+declare const RadioGroupCompound: TRadioGroupCompound;
+export { RadioGroupCompound as RadioGroup };

package/dist/RadioGroup/RadioGroup.js

@@ -0,0 +1,281 @@
+"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 { RadioGroupContext } from "./RadioGroupContext.js";
+import { RadioGroupItemContext } from "./RadioGroupItemContext.js";
+import { useRadioGroupContext, useRadioGroupItemContext, useRadioGroupRoot, } from "./hooks/index.js";
+/**
+ * The root of a RadioGroup — a `<div role="radiogroup">` that owns the
+ * selected value and provides {@link RadioGroupContext} to descendant
+ * {@link RadioGroupItem | `RadioGroup.Item`}s.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link RadioGroupRootProps.defaultValue | `defaultValue`} (or omit
+ *   for nothing selected on mount). The component owns the value.
+ * - **Controlled** — pass
+ *   {@link RadioGroupRootProps.value | `value`} *and*
+ *   {@link RadioGroupRootProps.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 (e.g. `<menu role="menu">` for dropdown composition) with
+ * the RadioGroup's props merged in. The native `<div>` is dropped.
+ *
+ * @extends HTMLDivElement
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <RadioGroup.Root defaultValue="comfortable" aria-label="Density">
+ *   <RadioGroup.Item value="compact">
+ *     <RadioGroup.Indicator />
+ *     Compact
+ *   </RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">
+ *     <RadioGroup.Indicator />
+ *     Comfortable
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState("comfortable");
+ *
+ * <RadioGroup.Root value={value} onValueChange={setValue} aria-label="...">
+ *   <RadioGroup.Item value="compact">Compact</RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">Comfortable</RadioGroup.Item>
+ * </RadioGroup.Root>
+ * ```
+ */
+export function RadioGroupRoot({ defaultValue, value: controlledValue, onValueChange, orientation = "both", dir, asChild = false, children, ...rest }) {
+    const resolvedDir = dir ?? useDirection();
+    const { value, select, registerItem, itemValues, disabledValues, focusItem } = useRadioGroupRoot({
+        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(RadioGroupContext.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 "RadioGroup" at load, so the value is never observable.
+// The assignment stays because it declares `displayName` on
+// `typeof RadioGroupRoot`, which TRadioGroupCompound extends.
+// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
+RadioGroupRoot.displayName = "RadioGroupRoot";
+/**
+ * An individual radio option inside a RadioGroup — a native
+ * `<button role="radio">` that reports its state, participates in the
+ * roving tabindex, and handles arrow-key navigation within the group.
+ *
+ * **Selection.** Clicking an Item (or pressing Space / Enter on the
+ * focused Item 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. All others have `tabIndex=-1` so `Tab` escapes
+ * the group in a single keystroke.
+ *
+ * **Disabled.** Passing `disabled` forwards the native attribute (the
+ * browser suppresses clicks and removes it from the focus ring) and
+ * excludes the Item from arrow-key navigation and the roving-tabindex
+ * home base. Styling via `:disabled` works natively.
+ *
+ * **Styling hook.** `data-state="checked" | "unchecked"` mirrors the
+ * selection state for CSS targeting.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer element
+ * (e.g. `<li role="menuitemradio">` for dropdown menu composition)
+ * with the Item's ARIA, data-state, tabIndex, onClick, onKeyDown,
+ * disabled, and ref merged onto it. The native `<button>` is dropped;
+ * consumers who render a non-focusable element are responsible for
+ * making it focusable.
+ *
+ * @extends HTMLButtonElement
+ *
+ * @throws if rendered outside a `RadioGroup.Root`.
+ */
+export function RadioGroupItem({ value, children, onClick, onKeyDown, disabled, asChild = false, ref, ...rest }) {
+    const { value: selectedValue, select, registerItem, itemValues, disabledValues, focusItem, orientation, dir, } = useRadioGroupContext();
+    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",
+        tabIndex: isTabStop ? 0 : -1,
+        disabled,
+        onClick: composeEventHandlers(onClick, () => select(value)),
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    };
+    return (_jsx(RadioGroupItemContext.Provider, { value: itemContextValue, children: asChild ? (_jsx(Slot, { ...itemProps, children: children })) : (_jsx("button", { type: "button", ...itemProps, children: children })) }));
+}
+/** @internal */
+RadioGroupItem.displayName = "RadioGroupItem";
+/**
+ * A decorative `<span aria-hidden="true">` that renders its children
+ * only while the enclosing {@link RadioGroupItem | `RadioGroup.Item`}
+ * is the selected one — typically the filled dot inside a radio
+ * control. The radio's accessible state is already conveyed by
+ * `aria-checked` on the Item, so the indicator is purely visual.
+ *
+ * **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 (typically an `<svg>` dot) as the indicator itself, with
+ * `aria-hidden` and `data-state` merged onto that element rather than
+ * a wrapper.
+ *
+ * **`forceMount` prop.** Pass `forceMount` to keep the indicator in
+ * the DOM while unchecked so a CSS exit animation can play against
+ * `data-state="unchecked"`. Consumers who use `forceMount` own the
+ * exit lifecycle themselves.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Default span wrapper
+ * ```tsx
+ * <RadioGroup.Item value="red">
+ *   <RadioGroup.Indicator />
+ *   Red
+ * </RadioGroup.Item>
+ * ```
+ *
+ * @example Icon as the indicator via `asChild`
+ * ```tsx
+ * <RadioGroup.Indicator asChild>
+ *   <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" /></svg>
+ * </RadioGroup.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `RadioGroup.Item`.
+ */
+export function RadioGroupIndicator({ children, forceMount, asChild = false, ...rest }) {
+    const { checked } = useRadioGroupItemContext();
+    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 */
+RadioGroupIndicator.displayName = "RadioGroupIndicator";
+/**
+ * Headless, accessible **RadioGroup** — a compound component
+ * implementing the
+ * [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+ * built on native `<button role="radio">` elements. Zero styles ship.
+ *
+ * `RadioGroup` is both callable (an alias of
+ * {@link RadioGroupRoot | `RadioGroup.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability.
+ *
+ * - {@link RadioGroupRoot | `RadioGroup.Root`} — state owner, context
+ *   provider, `<div role="radiogroup">` wrapper.
+ * - {@link RadioGroupItem | `RadioGroup.Item`} — a selectable radio
+ *   button participating in the roving tabindex.
+ * - {@link RadioGroupIndicator | `RadioGroup.Indicator`} — decorative
+ *   dot, mounted only while the parent Item is selected.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { RadioGroup } from "@primitiv-ui/react";
+ *
+ * <RadioGroup.Root defaultValue="compact" aria-label="Density">
+ *   <RadioGroup.Item value="compact">
+ *     <RadioGroup.Indicator />
+ *     Compact
+ *   </RadioGroup.Item>
+ *   <RadioGroup.Item value="comfortable">
+ *     <RadioGroup.Indicator />
+ *     Comfortable
+ *   </RadioGroup.Item>
+ * </RadioGroup.Root>;
+ * ```
+ *
+ * @see {@link RadioGroupRoot} for state modes.
+ * @see {@link RadioGroupItem} for selection, roving tabindex, and keyboard navigation.
+ * @see {@link RadioGroupIndicator} for the mount gate and animation hooks.
+ */
+const RadioGroupCompound = Object.assign(RadioGroupRoot, {
+    Root: RadioGroupRoot,
+    Item: RadioGroupItem,
+    Indicator: RadioGroupIndicator,
+});
+/** @internal */
+RadioGroupCompound.displayName = "RadioGroup";
+export { RadioGroupCompound as RadioGroup };

package/dist/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,12 @@
+import { RadioGroupOrientation, RadioGroupReadingDirection } from "./types.js";
+export type RadioGroupContextValue = {
+    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: RadioGroupOrientation;
+    dir: RadioGroupReadingDirection;
+};
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>, useRadioGroupContext: () => RadioGroupContextValue;

package/dist/RadioGroup/RadioGroupContext.js

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

package/dist/RadioGroup/RadioGroupItemContext.d.ts

@@ -0,0 +1,4 @@
+export type RadioGroupItemContextValue = {
+    checked: boolean;
+};
+export declare const RadioGroupItemContext: import("react").Context<RadioGroupItemContextValue | null>, useRadioGroupItemContext: () => RadioGroupItemContextValue;

package/dist/RadioGroup/RadioGroupItemContext.js

@@ -0,0 +1,3 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+export const [RadioGroupItemContext, useRadioGroupItemContext] = createStrictContext("RadioGroup.Indicator must be rendered inside a <RadioGroup.Item>.");

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

@@ -0,0 +1,3 @@
+export { useRadioGroupContext } from "./useRadioGroupContext.js";
+export { useRadioGroupItemContext } from "./useRadioGroupItemContext.js";
+export { useRadioGroupRoot } from "./useRadioGroupRoot.js";

package/dist/RadioGroup/hooks/index.js

@@ -0,0 +1,3 @@
+export { useRadioGroupContext } from "./useRadioGroupContext.js";
+export { useRadioGroupItemContext } from "./useRadioGroupItemContext.js";
+export { useRadioGroupRoot } from "./useRadioGroupRoot.js";

package/dist/RadioGroup/hooks/useRadioGroupContext.d.ts

@@ -0,0 +1 @@
+export { useRadioGroupContext } from "../RadioGroupContext.js";

package/dist/RadioGroup/hooks/useRadioGroupContext.js

@@ -0,0 +1 @@
+export { useRadioGroupContext } from "../RadioGroupContext.js";

package/dist/RadioGroup/hooks/useRadioGroupItemContext.d.ts

@@ -0,0 +1 @@
+export { useRadioGroupItemContext } from "../RadioGroupItemContext.js";

package/dist/RadioGroup/hooks/useRadioGroupItemContext.js

@@ -0,0 +1 @@
+export { useRadioGroupItemContext } from "../RadioGroupItemContext.js";

package/dist/RadioGroup/hooks/useRadioGroupRoot.d.ts

@@ -0,0 +1,14 @@
+type UseRadioGroupRootArgs = {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function useRadioGroupRoot({ defaultValue, value: controlledValue, onValueChange, }: UseRadioGroupRootArgs): {
+    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/RadioGroup/hooks/useRadioGroupRoot.js

@@ -0,0 +1,53 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { useCollection, useControllableState } from "../../hooks/index.js";
+export function useRadioGroupRoot({ defaultValue, value: controlledValue, onValueChange, }) {
+    const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
+    const select = useCallback((next) => {
+        if (value === next)
+            return;
+        setValue(next);
+    }, [value, setValue]);
+    // Track registered item metadata in a ref (for focus handling) and
+    // their ordered values as state — required for the roving-tabindex
+    // home base. Disabled values are derived per render from itemsRef:
+    // any change that affects the set (mount, unmount, disabled toggle)
+    // already re-runs the registrar effect, which updates the keys state
+    // and forces the re-render that recomputes the memo.
+    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 is a fresh array on every register call (new identity even
+    // when the keys are the same), so the memo re-runs whenever any item
+    // mounts, unmounts, or toggles disabled — which is exactly the trigger
+    // we want for re-deriving disabledValues.
+    [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/RadioGroup/index.d.ts

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

package/dist/RadioGroup/index.js

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