@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Progress/__tests__/Progress.value.test.tsx

@@ -1,104 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Progress } from "../Progress";
-
-import { determinateStateCases } from "./Progress.fixtures";
-
-describe("Progress value", () => {
-  it("sets aria-valuenow and data-value from value", () => {
-    // Arrange & Act
-    render(<Progress.Root value={42} aria-label="Upload" />);
-    const bar = screen.getByRole("progressbar", { name: "Upload" });
-
-    // Assert
-    expect(bar).toHaveAttribute("aria-valuenow", "42");
-    expect(bar).toHaveAttribute("data-value", "42");
-  });
-
-  it("defaults aria-valuetext to a rounded percentage", () => {
-    // Arrange & Act
-    render(<Progress.Root value={1} max={3} aria-label="Upload" />);
-
-    // Assert
-    expect(screen.getByRole("progressbar", { name: "Upload" })).toHaveAttribute(
-      "aria-valuetext",
-      "33%",
-    );
-  });
-
-  it("honours a custom max for aria-valuemax and the percentage label", () => {
-    // Arrange & Act
-    render(<Progress.Root value={25} max={50} aria-label="Upload" />);
-    const bar = screen.getByRole("progressbar", { name: "Upload" });
-
-    // Assert
-    expect(bar).toHaveAttribute("aria-valuemax", "50");
-    expect(bar).toHaveAttribute("aria-valuetext", "50%");
-  });
-
-  it("uses a custom getValueLabel for aria-valuetext", () => {
-    // Arrange & Act
-    render(
-      <Progress.Root
-        value={3}
-        max={10}
-        getValueLabel={(v, m) => `${v} of ${m} files`}
-        aria-label="Upload"
-      />,
-    );
-
-    // Assert
-    expect(screen.getByRole("progressbar", { name: "Upload" })).toHaveAttribute(
-      "aria-valuetext",
-      "3 of 10 files",
-    );
-  });
-
-  it("mirrors data-value onto the Indicator when determinate", () => {
-    // Arrange & Act
-    render(
-      <Progress.Root value={70} aria-label="Upload">
-        <Progress.Indicator data-testid="indicator" />
-      </Progress.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute("data-value", "70");
-  });
-
-  it("propagates a changed value to the Indicator through context", () => {
-    // Arrange
-    const { rerender } = render(
-      <Progress.Root value={40} aria-label="Upload">
-        <Progress.Indicator data-testid="indicator" />
-      </Progress.Root>,
-    );
-    expect(screen.getByTestId("indicator")).toHaveAttribute("data-value", "40");
-
-    // Act — a new value must recompute the memoised context value, not a stale
-    // one frozen by empty dependencies.
-    rerender(
-      <Progress.Root value={70} aria-label="Upload">
-        <Progress.Indicator data-testid="indicator" />
-      </Progress.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute("data-value", "70");
-  });
-
-  describe.each(determinateStateCases)(
-    "value $value of $max",
-    ({ value, max, expectedState }) => {
-      it(`derives data-state="${expectedState}"`, () => {
-        // Arrange & Act
-        render(<Progress.Root value={value} max={max} aria-label="Upload" />);
-
-        // Assert
-        expect(
-          screen.getByRole("progressbar", { name: "Upload" }),
-        ).toHaveAttribute("data-state", expectedState);
-      });
-    },
-  );
-});

package/src/Progress/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useProgressContext } from "./useProgressContext";
-export { useProgressRoot } from "./useProgressRoot";

package/src/Progress/hooks/useProgressContext.ts

@@ -1 +0,0 @@
-export { useProgressContext } from "../ProgressContext";

package/src/Progress/hooks/useProgressRoot.ts

@@ -1,45 +0,0 @@
-import { ProgressState } from "../types";
-
-const DEFAULT_MAX = 100;
-
-type UseProgressRootArgs = {
-  value?: number | null;
-  max?: number;
-};
-
-type UseProgressRootResult = {
-  value: number | null;
-  max: number;
-  state: ProgressState;
-};
-
-/**
- * Resolves a Progress root's `value` / `max` props into the canonical
- * `{ value, max, state }` triple consumed by the Root element and shared
- * through {@link ProgressContext}.
- */
-export function useProgressRoot({
-  value = null,
-  max = DEFAULT_MAX,
-}: UseProgressRootArgs): UseProgressRootResult {
-  if (!Number.isFinite(max) || max <= 0) {
-    throw new Error(
-      `Progress.Root: \`max\` must be a positive, finite number. Received: ${max}.`,
-    );
-  }
-
-  if (value != null && (!Number.isFinite(value) || value < 0 || value > max)) {
-    throw new Error(
-      `Progress.Root: \`value\` must be a finite number between 0 and ${max}, or null for an indeterminate bar. Received: ${value}.`,
-    );
-  }
-
-  const isIndeterminate = value == null;
-  const state: ProgressState = isIndeterminate
-    ? "indeterminate"
-    : value >= max
-      ? "complete"
-      : "loading";
-
-  return { value: isIndeterminate ? null : value, max, state };
-}

package/src/Progress/index.ts

@@ -1,3 +0,0 @@
-export * from "./Progress";
-export * from "./ProgressContext";
-export * from "./types";

package/src/Progress/types.ts

@@ -1,59 +0,0 @@
-import { ComponentProps } from "react";
-
-/**
- * The lifecycle state of a progress bar, derived from `value` and `max`.
- *
- * - `"indeterminate"` — `value` is `null` / omitted; the operation's
- *   completion ratio is unknown.
- * - `"loading"` — `value` is a number below `max`.
- * - `"complete"` — `value` has reached `max`.
- */
-export type ProgressState = "indeterminate" | "loading" | "complete";
-
-/**
- * Props for {@link Progress.Root} — all `<div>` attributes except the ones
- * the component derives itself (`role` and the `aria-value*` family), plus
- * the progress-specific props.
- */
-export type ProgressRootProps = Omit<
-  ComponentProps<"div">,
-  "role" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow" | "aria-valuetext"
-> & {
-  /**
-   * Current progress, between `0` and `max`. Pass `null` (or omit) for an
-   * indeterminate progress bar whose completion ratio is unknown. Drives the
-   * resolved {@link ProgressState} and the `aria-valuenow` / `data-value`
-   * hooks. A non-`null` value outside `0..max` throws.
-   * @default null
-   */
-  value?: number | null;
-  /**
-   * Upper bound of `value`. Must be a positive, finite number, or Root throws
-   * during render.
-   * @default 100
-   */
-  max?: number;
-  /**
-   * Produces the human-readable `aria-valuetext`. Receives the resolved
-   * `value` and `max`. Defaults to a rounded percentage (e.g. `"42%"`).
-   * Not called while indeterminate.
-   * @default (value, max) => `${Math.round((value / max) * 100)}%`
-   */
-  getValueLabel?: (value: number, max: number) => string;
-  /**
-   * Render the consumer's own element instead of the native `<div>`, merging
-   * the ARIA and `data-*` hooks onto it via {@link Slot}.
-   * @default false
-   */
-  asChild?: boolean;
-};
-
-/** Props for {@link Progress.Indicator} — all `<div>` attributes plus `asChild`. */
-export type ProgressIndicatorProps = ComponentProps<"div"> & {
-  /**
-   * Render the consumer's own element instead of the native `<div>`, merging
-   * the `data-*` hooks onto it via {@link Slot}.
-   * @default false
-   */
-  asChild?: boolean;
-};

package/src/Radio/README.md

@@ -1,160 +0,0 @@
-# Radio
-
-A headless, accessible, **standalone** radio control built on a **real native
-`<input type="radio">`**.
-
-Radio renders a `<label>` that is the visible box, wrapping a visually-hidden
-native `<input type="radio">` (the focusable, form-participating control) and a
-decorative `Indicator` dot. Because the underlying element is a genuine native
-radio, siblings sharing a `name` form a **native radio group** — the browser,
-not JavaScript, enforces single-selection and silently deselects the others.
-It also submits with an enclosing form, resets with it, and gets keyboard
-activation and focus for free.
-
-> **Radio vs. RadioGroup.** `Radio` is the lone native control for when you own
-> the grouping (a shared `name`, a bespoke layout, a single opt-in). For a
-> managed set with roving-tabindex keyboard navigation, arrow-key selection, and
-> disabled-item skipping, reach for [`RadioGroup`](../RadioGroup/README.md) — it
-> composes `role="radio"` items and owns the shared selected value itself.
-
-```tsx
-import { Radio } from "@primitiv-ui/react";
-
-<Radio.Root name="density" value="comfortable" defaultChecked aria-label="Comfortable">
-  <Radio.Indicator />
-</Radio.Root>;
-```
-
-## Sub-components
-
-| Export            | Element                          | Notes                                                                              |
-| ----------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
-| `Radio.Root`      | `<label>` + hidden `<input>`     | The styled box. `data-state`, `data-disabled` on the label; `name`/`value`/`aria-*`/`ref` go to the input. |
-| `Radio.Indicator` | `<span>`                         | `aria-hidden="true"`. Always mounted; CSS reveals it. `asChild`                    |
-
-`Radio.Root`'s `className` / `style` style the **box** (the `<label>` you see).
-Every other prop spreads onto the hidden `<input>`, because semantically the
-Root *is* the radio: pass `name`, `value`, `id`, `required`, `aria-*`, `ref`,
-etc. straight to `Radio.Root`.
-
-## Native grouping (the headline)
-
-Give sibling radios the same `name` and the browser groups them. No shared
-state, no `RadioGroup`, no controlled wiring required:
-
-```tsx
-{plans.map((plan) => (
-  <Radio.Root key={plan.id} name="plan" value={plan.id} aria-label={plan.label}>
-    <Radio.Indicator />
-  </Radio.Root>
-))}
-```
-
-Selecting one deselects the rest, and the chosen `value` submits under `plan`
-with an enclosing `<form>`.
-
-## Selected state
-
-Radio is binary. The `checked` / `defaultChecked` value is a `boolean`:
-
-| Value   | Native    | `data-state`  | Dot visible? |
-| ------- | --------- | ------------- | ------------ |
-| `true`  | `:checked`| `"checked"`   | Yes          |
-| `false` | —         | `"unchecked"` | No           |
-
-A native radio only ever moves *into* the checked state by user action —
-clicking the already-selected radio is a no-op, and selection moves off it only
-when a sibling is chosen. You get that for free.
-
-## State modes
-
-- **Uncontrolled** — pass `defaultChecked` (or omit for unselected on mount).
-  The **browser** owns the value, so native `name`-grouping works.
-- **Controlled** — pass `checked` **and** `onCheckedChange` together. The parent
-  owns the value (and the grouping).
-
-The two shapes are statically discriminated at the type level; TypeScript
-rejects mixing them.
-
-```tsx
-// Uncontrolled native group
-<Radio.Root name="density" value="compact" defaultChecked>
-  <Radio.Indicator />
-</Radio.Root>;
-
-// Controlled — the consumer owns the group's selected value.
-const [value, setValue] = useState("comfortable");
-<Radio.Root
-  name="density"
-  value="compact"
-  checked={value === "compact"}
-  onCheckedChange={() => setValue("compact")}
->
-  <Radio.Indicator />
-</Radio.Root>;
-```
-
-> **`data-state` is a best-effort mirror.** It is accurate in controlled mode and
-> for self-clicks, but a sibling the browser silently deselects fires no React
-> event, so its `data-state` can lag. Drive the *visual* checked look off the
-> input's native `:checked` (and `:has(> input:checked)` on the box), as the
-> shipped registry stylesheet does — not off `data-state`.
-
-## Keyboard interaction
-
-| Key            | Behaviour                                  |
-| -------------- | ------------------------------------------ |
-| `Space`        | Selects the focused radio (native `<input>`) |
-| `Tab`          | Moves to / from the radio (native)         |
-
-Keyboard handling comes from the underlying native input — no custom `keydown`
-listeners. (Arrow-key navigation *within* a group is a `RadioGroup` concern.)
-
-## Disabled
-
-Passing `disabled` forwards the native `disabled` attribute to the input
-(removing it from the tab order and suppressing clicks) **and** sets
-`data-disabled=""` on the box so CSS can target `[data-disabled]` without
-reaching for `:disabled`.
-
-```tsx
-<Radio.Root disabled aria-label="Unavailable plan">
-  <Radio.Indicator />
-</Radio.Root>
-```
-
-## `asChild` composition
-
-`Radio.Indicator` accepts an `asChild` boolean. When set, the component
-delegates rendering to its single child element and merges its `aria-hidden`,
-`data-state`, and ref onto the child — typically to use an `<svg>` as the dot:
-
-```tsx
-<Radio.Indicator asChild>
-  <svg viewBox="0 0 10 10">
-    <circle cx="5" cy="5" r="3" />
-  </svg>
-</Radio.Indicator>
-```
-
-## Styling hooks
-
-- The box (`Radio.Root`) carries `data-state="checked" | "unchecked"` and
-  `data-disabled=""`.
-- The hidden input exposes the always-correct native states: `:checked`,
-  `:focus-visible`, `:disabled`. Prefer these for the *checked* look.
-
-```css
-/* Reveal the dot from the native checked state — correct even on a silent
-   sibling deselect. */
-.radio > input:checked ~ .radio__indicator {
-  scale: 1;
-}
-.radio:has(> input:checked) {
-  border-color: oklch(55% 0.2 265);
-}
-.radio[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```

package/src/Radio/Radio.tsx

@@ -1,210 +0,0 @@
-import { useMemo } from "react";
-import type { ReactElement } from "react";
-
-import { Slot } from "../Slot/index.ts";
-
-import { RadioContext } from "./RadioContext";
-import { useRadioContext, useRadioRoot } from "./hooks/index.ts";
-import { RadioIndicatorProps, RadioRootProps } from "./types";
-
-function dataStateOf(checked: boolean) {
-  return checked ? ("checked" as const) : ("unchecked" as const);
-}
-
-/**
- * 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: RadioRootProps): ReactElement {
-  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 (
-    <RadioContext.Provider value={contextValue}>
-      <label
-        className={className}
-        style={style}
-        data-state={dataStateOf(isChecked)}
-        data-disabled={disabled ? "" : undefined}
-      >
-        <input
-          type="radio"
-          ref={ref}
-          disabled={disabled}
-          {...inputRest}
-          {...inputStateProps}
-          onChange={handleChange}
-        />
-        {children}
-      </label>
-    </RadioContext.Provider>
-  );
-}
-
-// 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
-}: RadioIndicatorProps): ReactElement {
-  const { checked } = useRadioContext();
-  const indicatorProps = {
-    ...rest,
-    "aria-hidden": "true" as const,
-    "data-state": dataStateOf(checked),
-  };
-  if (asChild) {
-    return <Slot {...indicatorProps}>{children}</Slot>;
-  }
-  return <span {...indicatorProps}>{children}</span>;
-}
-
-/** @internal */
-RadioIndicator.displayName = "RadioIndicator";
-
-/** 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.
- */
-const RadioCompound: TRadioCompound = Object.assign(RadioRoot, {
-  Root: RadioRoot,
-  Indicator: RadioIndicator,
-});
-
-/** @internal */
-RadioCompound.displayName = "Radio";
-
-export { RadioCompound as Radio };

package/src/Radio/RadioContext.ts

@@ -1,19 +0,0 @@
-import { createStrictContext } from "../utils/index.ts";
-
-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 const [RadioContext, useRadioContext] =
-  createStrictContext<RadioContextValue>(
-    "Radio sub-components must be rendered inside a <Radio.Root>.",
-  );

package/src/Radio/__tests__/Radio.basic-rendering.test.tsx

@@ -1,80 +0,0 @@
-import { render, screen } from "@testing-library/react";
-
-import { Radio } from "../Radio";
-
-describe("Radio basic rendering", () => {
-  it("renders a real native <input type=radio> as the control", () => {
-    // Arrange & Act
-    render(<Radio.Root aria-label="Compact" />);
-    const radio = screen.getByRole("radio", { name: "Compact" });
-
-    // Assert
-    expect(radio.tagName).toBe("INPUT");
-    expect(radio).toHaveAttribute("type", "radio");
-  });
-
-  it("wraps the input in a <label> so the visible control is clickable", () => {
-    // Arrange & Act
-    render(<Radio.Root aria-label="Compact" />);
-    const radio = screen.getByRole("radio", { name: "Compact" });
-
-    // Assert
-    expect(radio.closest("label")).not.toBeNull();
-  });
-
-  it("is unchecked by default", () => {
-    // Arrange & Act
-    render(<Radio.Root aria-label="Compact" />);
-
-    // Assert
-    expect(screen.getByRole("radio", { name: "Compact" })).not.toBeChecked();
-  });
-
-  it("forwards native input attributes (name, value, id) to the input", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root id="r1" name="density" value="compact" aria-label="Compact" />,
-    );
-    const radio = screen.getByRole("radio", { name: "Compact" });
-
-    // Assert
-    expect(radio).toHaveAttribute("id", "r1");
-    expect(radio).toHaveAttribute("name", "density");
-    expect(radio).toHaveAttribute("value", "compact");
-  });
-
-  it("applies className to the wrapper, not the hidden input", () => {
-    // Arrange & Act
-    render(<Radio.Root className="box" aria-label="Compact" />);
-    const radio = screen.getByRole("radio", { name: "Compact" });
-
-    // Assert
-    expect(radio).not.toHaveClass("box");
-    expect(radio.closest("label")).toHaveClass("box");
-  });
-
-  it('sets data-state="unchecked" on the wrapper when unchecked', () => {
-    // Arrange & Act
-    const { container } = render(<Radio.Root aria-label="Compact" />);
-
-    // Assert
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "unchecked",
-    );
-  });
-
-  it("sets a displayName on the compound and the Indicator", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // Root aliases the compound (Object.assign), so its name is "Radio".
-    expect(Radio.displayName).toBe("Radio");
-    expect(Radio.Indicator.displayName).toBe("RadioIndicator");
-  });
-
-  it("throws a helpful error when a sub-component renders outside Radio.Root", () => {
-    // Assert — the strict-context guard names the required parent.
-    expect(() => render(<Radio.Indicator />)).toThrow(
-      "Radio sub-components must be rendered inside a <Radio.Root>.",
-    );
-  });
-});