@primitiv-ui/react 0.1.12 → 0.1.14

package/src/Radio/__tests__/Radio.uncontrolled-state.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Radio } from "../Radio";
+
+describe("Radio uncontrolled state", () => {
+  it("starts checked when defaultChecked is true", () => {
+    // Arrange & Act
+    render(<Radio.Root defaultChecked aria-label="Compact" />);
+    const radio = screen.getByRole("radio", { name: "Compact" });
+
+    // Assert
+    expect(radio).toHaveAttribute("aria-checked", "true");
+    expect(radio).toHaveAttribute("data-state", "checked");
+  });
+
+  it("selects on click from unchecked to checked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<Radio.Root aria-label="Compact" />);
+    const radio = screen.getByRole("radio", { name: "Compact" });
+
+    // Act
+    await user.click(radio);
+
+    // Assert
+    expect(radio).toHaveAttribute("aria-checked", "true");
+    expect(radio).toHaveAttribute("data-state", "checked");
+  });
+
+  it("is a no-op when an already-selected radio is clicked (no toggle-off)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Radio.Root
+        defaultChecked
+        onCheckedChange={onCheckedChange}
+        aria-label="Compact"
+      />,
+    );
+    const radio = screen.getByRole("radio", { name: "Compact" });
+
+    // Act
+    await user.click(radio);
+
+    // Assert: stays checked and the callback never fires for a re-select.
+    expect(radio).toHaveAttribute("aria-checked", "true");
+    expect(radio).toHaveAttribute("data-state", "checked");
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it("calls onCheckedChange with true the first time it is selected", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Radio.Root onCheckedChange={onCheckedChange} aria-label="Compact" />);
+    const radio = screen.getByRole("radio", { name: "Compact" });
+
+    // Act
+    await user.click(radio);
+    await user.click(radio);
+
+    // Assert: selection is one-way, so the second click is swallowed.
+    expect(onCheckedChange).toHaveBeenCalledTimes(1);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("composes the consumer's onClick with the internal select (consumer runs first)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const order: string[] = [];
+    const onClick = vi.fn(() => order.push("consumer"));
+    const onCheckedChange = vi.fn(() => order.push("internal"));
+    render(
+      <Radio.Root
+        onClick={onClick}
+        onCheckedChange={onCheckedChange}
+        aria-label="Compact"
+      />,
+    );
+
+    // Act
+    await user.click(screen.getByRole("radio", { name: "Compact" }));
+
+    // Assert
+    expect(order).toEqual(["consumer", "internal"]);
+  });
+});

package/src/Radio/hooks/index.ts

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

package/src/Radio/hooks/useRadioContext.ts

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

package/src/Radio/hooks/useRadioRoot.ts

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+
+import { useControllableState } from "../../hooks/index.ts";
+
+type UseRadioRootArgs = {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+export function useRadioRoot({
+  defaultChecked,
+  checked: controlledChecked,
+  onCheckedChange,
+}: UseRadioRootArgs) {
+  const [checked, setChecked] = useControllableState<boolean>(
+    controlledChecked,
+    defaultChecked ?? false,
+  );
+
+  const select = useCallback(() => {
+    // A radio only ever moves *into* the selected state — re-clicking the
+    // already-selected radio is a no-op (no toggle-off), per the WAI-ARIA
+    // radio convention. De-selection happens when a sibling is chosen, which
+    // is the grouping consumer's concern, not this lone control's.
+    if (checked) return;
+    setChecked(true);
+    onCheckedChange?.(true);
+  }, [checked, setChecked, onCheckedChange]);
+
+  return { checked, select };
+}

package/src/Radio/index.ts

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

package/src/Radio/types.ts

@@ -0,0 +1,56 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+
+/**
+ * Props for {@link Radio.Indicator} — all `<span>` attributes plus
+ * `forceMount` (keep mounted while unchecked for exit animations) and the
+ * `asChild` escape hatch.
+ */
+export type RadioIndicatorProps = ComponentProps<"span"> & {
+  children?: ReactNode;
+  forceMount?: boolean;
+  asChild?: boolean;
+};
+
+/**
+ * Shared base for both {@link RadioRootProps} variants — the native
+ * `<button>` attributes (minus the ones the component owns) plus the
+ * `asChild` escape hatch and a typed `ref`.
+ */
+export type RadioRootBaseProps = Omit<
+  ComponentProps<"button">,
+  "type" | "role" | "aria-checked" | "defaultChecked"
+> & {
+  asChild?: boolean;
+  ref?: Ref<HTMLButtonElement>;
+};
+
+/**
+ * Uncontrolled variant of {@link RadioRootProps}: the component owns the
+ * checked value. Pass `defaultChecked` (or omit it); `onCheckedChange` is
+ * optional and `checked` is forbidden.
+ */
+export type RadioRootUncontrolledProps = RadioRootBaseProps & {
+  defaultChecked?: boolean;
+  checked?: never;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+/**
+ * Controlled variant of {@link RadioRootProps}: the parent owns the checked
+ * value. Pass `checked` and `onCheckedChange` together; `defaultChecked` is
+ * forbidden.
+ */
+export type RadioRootControlledProps = RadioRootBaseProps & {
+  defaultChecked?: never;
+  checked: boolean;
+  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;

package/src/index.ts

@@ -21,6 +21,7 @@ export * from "./MillerColumns/index.ts";
 export * from "./Modal/index.ts";
 export * from "./Portal/index.ts";
 export * from "./Progress/index.ts";
+export * from "./Radio/index.ts";
 export * from "./RadioCard/index.ts";
 export * from "./RadioGroup/index.ts";
 export * from "./Select/index.ts";