@primitiv-ui/react 0.1.15 → 0.1.17

package/src/Switch/__tests__/Switch.form.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Switch } from "../Switch";
+
+/**
+ * The switch is a real native input (a checkbox with the switch role), so it
+ * participates in forms: an on switch submits its `value` under `name`, an off
+ * one submits nothing. The old `<button role="switch">` could do neither.
+ */
+describe("Switch form participation", () => {
+  function SettingsForm({ onSubmit }: { onSubmit: (value: string | null) => void }) {
+    return (
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const data = new FormData(event.currentTarget);
+          onSubmit(data.get("notify") as string | null);
+        }}
+      >
+        <Switch.Root name="notify" value="on" aria-label="Enable notifications">
+          <Switch.Thumb />
+        </Switch.Root>
+        <button type="submit">Save</button>
+      </form>
+    );
+  }
+
+  it("submits the value when on", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<SettingsForm onSubmit={onSubmit} />);
+
+    // Act
+    await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Assert
+    expect(onSubmit).toHaveBeenCalledWith("on");
+  });
+
+  it("submits nothing when off", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<SettingsForm onSubmit={onSubmit} />);
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    // Assert
+    expect(onSubmit).toHaveBeenCalledWith(null);
+  });
+});

package/src/Switch/__tests__/Switch.keyboard-interaction.test.tsx

@@ -15,10 +15,10 @@ describe("Switch keyboard interaction", () => {
     await user.keyboard(" ");
 
     // Assert
-    expect(sw).toHaveAttribute("aria-checked", "true");
+    expect(sw).toBeChecked();
   });
 
-  it("toggles on Enter key", async () => {
+  it("does not toggle on Enter (native checkbox semantics)", async () => {
     // Arrange
     const user = userEvent.setup();
     render(<Switch.Root aria-label="Enable notifications" />);
@@ -29,7 +29,7 @@ describe("Switch keyboard interaction", () => {
     await user.keyboard("{Enter}");
 
     // Assert
-    expect(sw).toHaveAttribute("aria-checked", "true");
+    expect(sw).not.toBeChecked();
   });
 
   it("does not toggle on Space when disabled", async () => {
@@ -51,6 +51,6 @@ describe("Switch keyboard interaction", () => {
 
     // Assert
     expect(onCheckedChange).not.toHaveBeenCalled();
-    expect(sw).toHaveAttribute("aria-checked", "false");
+    expect(sw).not.toBeChecked();
   });
 });

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

@@ -11,41 +11,40 @@ describe("Switch uncontrolled state", () => {
     // Assert
     expect(
       screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "false");
+    ).not.toBeChecked();
   });
 
   it("starts checked when defaultChecked={true}", () => {
     // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" defaultChecked />);
-
-    // Assert
-    expect(
-      screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("aria-checked", "true");
-  });
-
-  it('sets data-state="checked" when defaultChecked={true}', () => {
-    // Arrange & Act
-    render(<Switch.Root aria-label="Enable notifications" defaultChecked />);
+    const { container } = render(
+      <Switch.Root aria-label="Enable notifications" defaultChecked />,
+    );
 
     // Assert
     expect(
       screen.getByRole("switch", { name: "Enable notifications" }),
-    ).toHaveAttribute("data-state", "checked");
+    ).toBeChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 
   it("toggles to checked on first click", async () => {
     // Arrange
     const user = userEvent.setup();
-    render(<Switch.Root aria-label="Enable notifications" />);
+    const { container } = render(<Switch.Root aria-label="Enable notifications" />);
     const sw = screen.getByRole("switch", { name: "Enable notifications" });
 
     // Act
     await user.click(sw);
 
     // Assert
-    expect(sw).toHaveAttribute("aria-checked", "true");
-    expect(sw).toHaveAttribute("data-state", "checked");
+    expect(sw).toBeChecked();
+    expect(container.querySelector("label")).toHaveAttribute(
+      "data-state",
+      "checked",
+    );
   });
 
   it("toggles back to unchecked on second click", async () => {
@@ -58,17 +57,54 @@ describe("Switch uncontrolled state", () => {
     await user.click(sw);
 
     // Assert
-    expect(sw).toHaveAttribute("aria-checked", "false");
-    expect(sw).toHaveAttribute("data-state", "unchecked");
+    expect(sw).not.toBeChecked();
   });
 
   it("fires onCheckedChange with the new value on each toggle", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Switch.Root aria-label="Enable notifications" onCheckedChange={onCheckedChange} />,
+    );
+
+    // Act
+    await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
+
+    // Assert
+    expect(onCheckedChange).toHaveBeenCalledOnce();
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("composes a consumer onChange, running it before the internal handler", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const order: string[] = [];
+    const onChange = vi.fn(() => order.push("consumer"));
+    const onCheckedChange = vi.fn(() => order.push("internal"));
+    render(
+      <Switch.Root
+        aria-label="Enable notifications"
+        onChange={onChange}
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    // Act
+    await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
+
+    // Assert
+    expect(order).toEqual(["consumer", "internal"]);
+  });
+
+  it("lets a consumer onChange veto the internal handler via preventDefault", async () => {
     // Arrange
     const user = userEvent.setup();
     const onCheckedChange = vi.fn();
     render(
       <Switch.Root
         aria-label="Enable notifications"
+        onChange={(event) => event.preventDefault()}
         onCheckedChange={onCheckedChange}
       />,
     );
@@ -77,7 +113,6 @@ describe("Switch uncontrolled state", () => {
     await user.click(screen.getByRole("switch", { name: "Enable notifications" }));
 
     // Assert
-    expect(onCheckedChange).toHaveBeenCalledOnce();
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(onCheckedChange).not.toHaveBeenCalled();
   });
 });

package/src/Switch/hooks/useSwitchRoot.ts

@@ -1,28 +1,46 @@
-import { useCallback } from "react";
+import { useState } from "react";
+import type { ChangeEvent } from "react";
 
-import { useControllableState } from "../../hooks/index.ts";
+import { SwitchChangeHandler } from "../types";
 
 type UseSwitchRootArgs = {
   defaultChecked?: boolean;
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  onChange?: SwitchChangeHandler;
 };
 
+/**
+ * Resolves the controlled / uncontrolled state for a {@link Switch.Root} and
+ * produces the props to spread onto its native `<input type="checkbox"
+ * role="switch">`.
+ *
+ * In uncontrolled mode the input is rendered with `defaultChecked` and no
+ * `checked` prop, so the browser owns the value and the switch participates in
+ * forms and resets. The returned `checked` is a best-effort mirror for the
+ * `data-state` hook, updated from the input's own `change` events.
+ */
 export function useSwitchRoot({
   defaultChecked,
   checked: controlledChecked,
   onCheckedChange,
+  onChange,
 }: UseSwitchRootArgs) {
-  const [checked, setChecked] = useControllableState<boolean>(
-    controlledChecked,
-    defaultChecked ?? false,
-  );
+  const isControlled = controlledChecked !== undefined;
+  const [mirror, setMirror] = useState(defaultChecked ?? false);
+  const checked = isControlled ? controlledChecked : mirror;
 
-  const toggle = useCallback(() => {
-    const next = !checked;
-    setChecked(next);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    if (event.defaultPrevented) return;
+    const next = event.target.checked;
+    if (!isControlled) setMirror(next);
     onCheckedChange?.(next);
-  }, [checked, setChecked, onCheckedChange]);
+  };
 
-  return { checked, toggle };
+  const inputStateProps = isControlled
+    ? { checked: controlledChecked }
+    : { defaultChecked: defaultChecked ?? false };
+
+  return { checked, handleChange, inputStateProps };
 }

package/src/Switch/types.ts

@@ -1,19 +1,26 @@
-import { ButtonHTMLAttributes, ComponentProps, ReactNode, Ref } from "react";
+import { ChangeEventHandler, ComponentProps, ReactNode, Ref } from "react";
 
-/** Props common to both controlled and uncontrolled `Switch.Root` modes. */
+/**
+ * Props common to both controlled and uncontrolled `Switch.Root` modes — the
+ * native `<input type="checkbox">` attributes (minus the ones the component
+ * owns). `className` / `style` style the **track** (the visible control), not
+ * the hidden input; everything else spreads onto the input, because
+ * semantically the Root *is* the switch.
+ */
 export type SwitchRootBaseProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "type" | "role" | "aria-checked"
+  ComponentProps<"input">,
+  "type" | "role" | "checked" | "defaultChecked"
 > & {
-  /** Render the child element instead of the default `<button>`. */
-  asChild?: boolean;
-  /** Ref to the rendered `<button>` element. */
-  ref?: Ref<HTMLButtonElement>;
+  /** Optional content (typically `Switch.Thumb`). */
+  children?: ReactNode;
+  /** Ref to the underlying native `<input>` element. */
+  ref?: Ref<HTMLInputElement>;
 };
 
 /**
- * Props for `Switch.Root` in uncontrolled mode — the component owns the checked
- * state. Pass `defaultChecked` to set the initial value; `checked` is forbidden.
+ * Props for `Switch.Root` in uncontrolled mode — the **browser** owns the
+ * checked state. Pass `defaultChecked` to set the initial value; `checked` is
+ * forbidden.
  */
 export type SwitchRootUncontrolledProps = SwitchRootBaseProps & {
   /** Initial checked state when uncontrolled. */
@@ -56,3 +63,6 @@ export type SwitchThumbProps = ComponentProps<"span"> & {
   /** Render the child element instead of the default `<span>`. */
   asChild?: boolean;
 };
+
+/** Internal: the native `onChange` shape the Root composes with its own. */
+export type SwitchChangeHandler = ChangeEventHandler<HTMLInputElement>;

package/src/Checkbox/__tests__/Checkbox.asChild.test.tsx

@@ -1,69 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox asChild composition", () => {
-  it("Root asChild delegates to the child element while keeping ARIA and toggle wiring", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox.Root
-        asChild
-        onCheckedChange={onCheckedChange}
-        aria-label="Accept terms"
-      >
-        <li>Accept</li>
-      </Checkbox.Root>,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Assert element is the consumer's <li>
-    expect(checkbox.tagName).toBe("LI");
-    // ARIA + data-state merged onto the child
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
-    expect(checkbox).toHaveAttribute("data-state", "unchecked");
-
-    // Act
-    await user.click(checkbox);
-
-    // Assert toggle still fires through composed onClick
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("Root asChild lets the consumer override the role for menu-item contexts", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root asChild aria-label="Accept terms">
-        <li role="menuitemcheckbox">Accept</li>
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    const item = screen.getByRole("menuitemcheckbox", { name: "Accept terms" });
-    expect(item).toHaveAttribute("aria-checked", "false");
-    expect(item).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("Indicator asChild delegates rendering to the consumer's element", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root defaultChecked aria-label="Accept terms">
-        <Checkbox.Indicator asChild>
-          <svg data-testid="tick" viewBox="0 0 10 10">
-            <path d="M1 5l3 3 5-7" />
-          </svg>
-        </Checkbox.Indicator>
-      </Checkbox.Root>,
-    );
-
-    // Assert
-    const tick = screen.getByTestId("tick");
-    expect(tick.tagName.toLowerCase()).toBe("svg");
-    expect(tick).toHaveAttribute("aria-hidden", "true");
-    expect(tick).toHaveAttribute("data-state", "checked");
-  });
-
-});

package/src/Radio/__tests__/Radio.asChild.test.tsx

@@ -1,63 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Radio } from "../Radio";
-
-describe("Radio asChild composition", () => {
-  it("Root asChild delegates to the child element while keeping ARIA and select wiring", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Radio.Root asChild onCheckedChange={onCheckedChange} aria-label="Compact">
-        <li>Compact</li>
-      </Radio.Root>,
-    );
-    const radio = screen.getByRole("radio", { name: "Compact" });
-
-    // Assert element is the consumer's <li>
-    expect(radio.tagName).toBe("LI");
-    expect(radio).toHaveAttribute("aria-checked", "false");
-    expect(radio).toHaveAttribute("data-state", "unchecked");
-
-    // Act
-    await user.click(radio);
-
-    // Assert select still fires through composed onClick
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(radio).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("Root asChild lets the consumer override the role for menu-item contexts", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root asChild aria-label="Compact">
-        <li role="menuitemradio">Compact</li>
-      </Radio.Root>,
-    );
-
-    // Assert
-    const item = screen.getByRole("menuitemradio", { name: "Compact" });
-    expect(item).toHaveAttribute("aria-checked", "false");
-    expect(item).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("Indicator asChild delegates rendering to the consumer's element", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root defaultChecked aria-label="Compact">
-        <Radio.Indicator asChild>
-          <svg data-testid="dot" viewBox="0 0 10 10">
-            <circle cx="5" cy="5" r="3" />
-          </svg>
-        </Radio.Indicator>
-      </Radio.Root>,
-    );
-
-    // Assert
-    const dot = screen.getByTestId("dot");
-    expect(dot.tagName.toLowerCase()).toBe("svg");
-    expect(dot).toHaveAttribute("aria-hidden", "true");
-    expect(dot).toHaveAttribute("data-state", "checked");
-  });
-});

package/src/Radio/__tests__/Radio.indicator.test.tsx

@@ -1,103 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Radio } from "../Radio";
-
-describe("Radio.Indicator", () => {
-  it("does not render its children when the radio is unchecked", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root aria-label="Compact">
-        <Radio.Indicator>dot</Radio.Indicator>
-      </Radio.Root>,
-    );
-
-    // Assert
-    expect(screen.queryByText("dot")).not.toBeInTheDocument();
-  });
-
-  it("renders its children when the radio is checked", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root defaultChecked aria-label="Compact">
-        <Radio.Indicator>dot</Radio.Indicator>
-      </Radio.Root>,
-    );
-
-    // Assert
-    expect(screen.getByText("dot")).toBeInTheDocument();
-  });
-
-  it("mounts in response to selecting", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <Radio.Root aria-label="Compact">
-        <Radio.Indicator>dot</Radio.Indicator>
-      </Radio.Root>,
-    );
-    expect(screen.queryByText("dot")).not.toBeInTheDocument();
-
-    // Act
-    await user.click(screen.getByRole("radio", { name: "Compact" }));
-
-    // Assert
-    expect(screen.getByText("dot")).toBeInTheDocument();
-  });
-
-  it('carries aria-hidden="true" since it is decorative', () => {
-    // Arrange & Act
-    render(
-      <Radio.Root defaultChecked aria-label="Compact">
-        <Radio.Indicator data-testid="indicator">dot</Radio.Indicator>
-      </Radio.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute(
-      "aria-hidden",
-      "true",
-    );
-  });
-
-  it("mirrors the radio's data-state on the indicator", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root defaultChecked aria-label="Compact">
-        <Radio.Indicator data-testid="indicator">dot</Radio.Indicator>
-      </Radio.Root>,
-    );
-
-    // Assert
-    expect(screen.getByTestId("indicator")).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-
-  it("stays in the DOM while unchecked when forceMount is set", () => {
-    // Arrange & Act
-    render(
-      <Radio.Root aria-label="Compact">
-        <Radio.Indicator forceMount data-testid="indicator">
-          dot
-        </Radio.Indicator>
-      </Radio.Root>,
-    );
-    const indicator = screen.getByTestId("indicator");
-
-    // Assert
-    expect(indicator).toBeInTheDocument();
-    expect(indicator).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("throws when rendered outside Radio.Root", () => {
-    // Arrange
-    const error = vi.spyOn(console, "error").mockImplementation(() => {});
-
-    // Assert
-    expect(() => render(<Radio.Indicator>dot</Radio.Indicator>)).toThrow();
-
-    error.mockRestore();
-  });
-});