@primitiv-ui/react 0.1.0

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,228 @@
+import { useMemo } from "react";
+
+import { Slot, composeEventHandlers } from "../Slot";
+
+import { CheckboxContext } from "./CheckboxContext";
+import { useCheckboxContext, useCheckboxRoot } from "./hooks";
+import {
+  CheckboxIndicatorProps,
+  CheckboxRootProps,
+  CheckedState,
+} from "./types";
+
+function dataStateOf(checked: CheckedState) {
+  if (checked === "indeterminate") return "indeterminate" as const;
+  return checked ? ("checked" as const) : ("unchecked" as const);
+}
+
+/**
+ * The root of a Checkbox — a native `<button role="checkbox">` that
+ * owns the tri-state checked value and provides
+ * {@link CheckboxContext | `CheckboxContext`} to descendant
+ * {@link CheckboxIndicator | `Checkbox.Indicator`}s.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass
+ *   {@link CheckboxRootProps.defaultChecked | `defaultChecked`} (or omit
+ *   for unchecked-on-mount). The component owns the value internally.
+ * - **Controlled** — pass
+ *   {@link CheckboxRootProps.checked | `checked`} *and*
+ *   {@link CheckboxRootProps.onCheckedChange | `onCheckedChange`}
+ *   together. The parent owns the value; the component defers every
+ *   change back through the callback.
+ *
+ * Both `checked` and `defaultChecked` accept `boolean | "indeterminate"`.
+ * Clicking an indeterminate checkbox resolves it to `true` per the
+ * WAI-ARIA tri-state convention, then flips boolean on subsequent clicks.
+ *
+ * **ARIA.** `role="checkbox"` and `aria-checked` are set automatically;
+ * `aria-checked="mixed"` represents the indeterminate state.
+ *
+ * **Styling hooks.** `data-state="checked" | "unchecked" | "indeterminate"`
+ * on the root, plus `data-disabled=""` when disabled.
+ *
+ * **`asChild` prop.** Pass `asChild` to render any consumer-supplied
+ * element (e.g. `<li role="menuitemcheckbox">` for menu composition)
+ * with the checkbox's ARIA attributes, data-state, composed onClick, and
+ * ref merged in. The native `<button>` is dropped; consumers who want
+ * keyboard activation on a non-button element are responsible for
+ * providing it.
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <Checkbox.Root defaultChecked aria-label="Accept terms">
+ *   <Checkbox.Indicator>
+ *     <CheckIcon />
+ *   </Checkbox.Indicator>
+ * </Checkbox.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [checked, setChecked] = useState<CheckedState>(false);
+ *
+ * <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label="…">
+ *   <Checkbox.Indicator>
+ *     <CheckIcon />
+ *   </Checkbox.Indicator>
+ * </Checkbox.Root>
+ * ```
+ *
+ * @example Composed into a menu item via `asChild`
+ * ```tsx
+ * <Checkbox.Root asChild aria-label="Show hidden files">
+ *   <li role="menuitemcheckbox">Show hidden files</li>
+ * </Checkbox.Root>
+ * ```
+ */
+function CheckboxRoot(props: CheckboxRootProps) {
+  const {
+    defaultChecked,
+    checked,
+    onCheckedChange,
+    onClick,
+    disabled,
+    asChild = false,
+    children,
+    ...rest
+  } = props;
+  const { checked: isChecked, toggle } = useCheckboxRoot({
+    defaultChecked,
+    checked,
+    onCheckedChange,
+  });
+  const contextValue = useMemo(() => ({ checked: isChecked }), [isChecked]);
+  const rootProps = {
+    ...rest,
+    role: "checkbox" as const,
+    "aria-checked":
+      isChecked === "indeterminate"
+        ? ("mixed" as const)
+        : (isChecked as boolean),
+    "data-state": dataStateOf(isChecked),
+    "data-disabled": disabled ? "" : undefined,
+    disabled,
+    onClick: composeEventHandlers(onClick, toggle),
+  };
+  return (
+    <CheckboxContext.Provider value={contextValue}>
+      {asChild ? (
+        <Slot {...rootProps}>{children}</Slot>
+      ) : (
+        <button type="button" {...rootProps}>
+          {children}
+        </button>
+      )}
+    </CheckboxContext.Provider>
+  );
+}
+
+CheckboxRoot.displayName = "CheckboxRoot";
+
+/**
+ * A decorative `<span aria-hidden="true">` that renders its children
+ * only while the parent {@link CheckboxRoot | `Checkbox.Root`} is
+ * **checked** or **indeterminate** — never when unchecked. The
+ * checkbox's accessible state is already conveyed by `aria-checked`
+ * on the root, so the indicator is purely visual.
+ *
+ * **Styling hook.** Mirrors the root's
+ * `data-state="checked" | "unchecked" | "indeterminate"` so the same
+ * CSS rules can target both.
+ *
+ * **`asChild` prop.** Pass `asChild` to render the consumer's own
+ * element (typically an `<svg>` tick icon) 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.
+ *
+ * @example Default span wrapper
+ * ```tsx
+ * <Checkbox.Indicator>
+ *   <CheckIcon />
+ * </Checkbox.Indicator>
+ * ```
+ *
+ * @example Icon as the indicator via `asChild`
+ * ```tsx
+ * <Checkbox.Indicator asChild>
+ *   <svg viewBox="0 0 10 10"><path d="M1 5l3 3 5-7" /></svg>
+ * </Checkbox.Indicator>
+ * ```
+ *
+ * @example Force-mounted for exit animation
+ * ```tsx
+ * <Checkbox.Indicator forceMount>
+ *   <CheckIcon />
+ * </Checkbox.Indicator>
+ * ```
+ *
+ * @throws if rendered outside a `Checkbox.Root`.
+ */
+function CheckboxIndicator({
+  children,
+  forceMount,
+  asChild = false,
+  ...rest
+}: CheckboxIndicatorProps) {
+  const { checked } = useCheckboxContext();
+  const isVisible = checked !== false;
+  if (!isVisible && !forceMount) return null;
+  const indicatorProps = {
+    ...rest,
+    "aria-hidden": "true" as const,
+    "data-state": dataStateOf(checked),
+  };
+  if (asChild) {
+    return <Slot {...indicatorProps}>{children}</Slot>;
+  }
+  return <span {...indicatorProps}>{children}</span>;
+}
+
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+type TCheckboxCompound = typeof CheckboxRoot & {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+};
+
+/**
+ * Headless, accessible **Checkbox** — a compound component built on a
+ * native `<button role="checkbox">` that implements the
+ * [WAI-ARIA Checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
+ * including the tri-state ("mixed") variant. Zero styles ship.
+ *
+ * `Checkbox` is both callable (an alias of {@link CheckboxRoot | `Checkbox.Root`})
+ * and carries its sub-components as static properties. Prefer the
+ * namespaced form in application code for readability and grep-ability.
+ *
+ * - {@link CheckboxRoot | `Checkbox.Root`} — state owner, context provider, toggle button.
+ * - {@link CheckboxIndicator | `Checkbox.Indicator`} — decorative tick, conditional on checked state.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { Checkbox } from "@primitiv-ui/react";
+ *
+ * <Checkbox.Root aria-label="Accept terms">
+ *   <Checkbox.Indicator>
+ *     <CheckIcon />
+ *   </Checkbox.Indicator>
+ * </Checkbox.Root>;
+ * ```
+ *
+ * @see {@link CheckboxRoot} for state modes and tri-state semantics.
+ * @see {@link CheckboxIndicator} for the mount gate and animation hooks.
+ */
+const CheckboxCompound: TCheckboxCompound = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator,
+});
+
+CheckboxCompound.displayName = "Checkbox";
+
+export { CheckboxCompound as Checkbox };

package/src/Checkbox/CheckboxContext.ts

@@ -0,0 +1,12 @@
+import { createStrictContext } from "../utils";
+
+import { CheckedState } from "./types";
+
+export type CheckboxContextValue = {
+  checked: CheckedState;
+};
+
+export const [CheckboxContext, useCheckboxContext] =
+  createStrictContext<CheckboxContextValue>(
+    "Checkbox sub-components must be rendered inside a <Checkbox.Root>.",
+  );

package/src/Checkbox/README.md

@@ -0,0 +1,156 @@
+# Checkbox
+
+A headless, accessible compound component implementing the
+[WAI-ARIA Checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/),
+including the tri-state ("mixed") variant.
+
+Checkbox renders a native `<button role="checkbox">` so it gets
+keyboard activation (`Space` / `Enter`), focus ring, and disabled
+semantics for free from the browser. The React layer adds three-state
+support, `Indicator` mounting driven by the checked state, and the
+`asChild` composition every primitive in this package supports.
+
+```tsx
+import { Checkbox } from "@primitiv-ui/react";
+
+<Checkbox.Root defaultChecked aria-label="Accept terms">
+  <Checkbox.Indicator>
+    <CheckIcon />
+  </Checkbox.Indicator>
+</Checkbox.Root>;
+```
+
+## Sub-components
+
+| Export               | Element    | Notes                                                                                      |
+| -------------------- | ---------- | ------------------------------------------------------------------------------------------ |
+| `Checkbox.Root`      | `<button>` | `role="checkbox"`, `aria-checked`, `data-state`, `data-disabled`. `asChild`                |
+| `Checkbox.Indicator` | `<span>`   | `aria-hidden="true"`. Renders only while checked or indeterminate. `asChild`, `forceMount` |
+
+## Checked state
+
+Checkbox is tri-state. The `checked` / `defaultChecked` value is
+`boolean | "indeterminate"`:
+
+| Value             | `aria-checked` | `data-state`      | Indicator renders?       |
+| ----------------- | -------------- | ----------------- | ------------------------ |
+| `true`            | `"true"`       | `"checked"`       | Yes                      |
+| `false`           | `"false"`      | `"unchecked"`     | No (unless `forceMount`) |
+| `"indeterminate"` | `"mixed"`      | `"indeterminate"` | Yes                      |
+
+Clicking an indeterminate checkbox resolves it to `true` per the
+WAI-ARIA tri-state convention; subsequent clicks flip between `true`
+and `false`.
+
+## State modes
+
+- **Uncontrolled** — pass `defaultChecked` (or omit for unchecked on mount).
+- **Controlled** — pass `checked` **and** `onCheckedChange` together.
+
+The two shapes are statically discriminated at the type level;
+TypeScript rejects mixing them.
+
+```tsx
+// Uncontrolled
+<Checkbox.Root defaultChecked>…</Checkbox.Root>;
+
+// Controlled
+const [checked, setChecked] = useState<CheckedState>(false);
+<Checkbox.Root checked={checked} onCheckedChange={setChecked}>
+  …
+</Checkbox.Root>;
+```
+
+## Keyboard interaction
+
+| Key     | Behaviour                                |
+| ------- | ---------------------------------------- |
+| `Space` | Toggles the checkbox (native `<button>`) |
+| `Enter` | Toggles the checkbox (native `<button>`) |
+
+Keyboard handling comes from the underlying `<button>` element — no
+custom `keydown` listeners are needed.
+
+## Disabled
+
+Passing `disabled` forwards the native `disabled` attribute to the
+button (removing it from the tab order and suppressing clicks) **and**
+sets `data-disabled=""` on the root so CSS can target
+`[data-disabled]` without reaching for `:disabled`.
+
+```tsx
+<Checkbox.Root disabled aria-label="Locked setting">
+  <Checkbox.Indicator>
+    <CheckIcon />
+  </Checkbox.Indicator>
+</Checkbox.Root>
+```
+
+## `asChild` composition
+
+Both `Checkbox.Root` and `Checkbox.Indicator` accept an `asChild`
+boolean. When set, the component delegates rendering to its single
+child element and merges its own ARIA attributes, data-state, composed
+event handlers, and ref onto the child (the asChild contract: the
+child's handler runs first, the library's runs second unless the child
+calls `preventDefault`).
+
+```tsx
+// Menu-item checkbox — the same state machinery, different element + role.
+<Checkbox.Root asChild aria-label="Show hidden files">
+  <li role="menuitemcheckbox">Show hidden files</li>
+</Checkbox.Root>
+
+// Icon-only indicator — the svg itself becomes the indicator.
+<Checkbox.Indicator asChild>
+  <svg viewBox="0 0 10 10">
+    <path d="M1 5l3 3 5-7" />
+  </svg>
+</Checkbox.Indicator>
+```
+
+`Root`'s `asChild` is what lets `Dropdown.CheckboxItem` (in a later
+phase) wrap an `<li role="menuitemcheckbox">` around the Checkbox
+state / toggle behaviour without re-implementing any of it.
+
+## Animation hooks
+
+`Checkbox.Indicator` accepts a `forceMount` boolean. When set, the
+indicator stays in the DOM regardless of checked state so a CSS
+animation can play against `data-state="unchecked"`:
+
+```tsx
+<Checkbox.Indicator forceMount>
+  <CheckIcon />
+</Checkbox.Indicator>
+```
+
+```css
+[data-state="checked"] {
+  animation: tick-in 120ms ease-out;
+}
+[data-state="unchecked"] {
+  animation: tick-out 100ms ease-in forwards;
+}
+```
+
+Consumers using `forceMount` own the exit timing themselves.
+
+## Styling hooks
+
+`data-state="checked" | "unchecked" | "indeterminate"` is set on both
+`Checkbox.Root` and `Checkbox.Indicator`, letting any CSS system target
+the three phases.
+
+```css
+button[data-state="checked"] {
+  background: oklch(65% 0.18 145);
+}
+button[data-state="indeterminate"] {
+  background: oklch(70% 0.1 250);
+}
+button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```

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

@@ -0,0 +1,69 @@
+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/Checkbox/__tests__/Checkbox.basic-rendering.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+
+import { Checkbox } from "../Checkbox";
+
+describe("Checkbox basic rendering", () => {
+  it('renders a <button> with role="checkbox"', () => {
+    // Arrange & Act
+    render(<Checkbox.Root aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox.tagName).toBe("BUTTON");
+  });
+
+  it('defaults aria-checked to "false"', () => {
+    // Arrange & Act
+    render(<Checkbox.Root aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+  });
+
+  it('defaults type="button" so the checkbox never submits an enclosing form', () => {
+    // Arrange & Act
+    render(<Checkbox.Root aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("type", "button");
+  });
+
+  it('sets data-state="unchecked" on the root when unchecked', () => {
+    // Arrange & Act
+    render(<Checkbox.Root aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+  });
+});

package/src/Checkbox/__tests__/Checkbox.controlled-state.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+
+import { Checkbox } from "../Checkbox";
+
+describe("Checkbox controlled state", () => {
+  it("reflects the controlled `checked` prop", () => {
+    // Arrange & Act
+    const { rerender } = render(
+      <Checkbox.Root
+        checked={false}
+        onCheckedChange={() => {}}
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+
+    rerender(
+      <Checkbox.Root
+        checked
+        onCheckedChange={() => {}}
+        aria-label="Accept terms"
+      />,
+    );
+
+    // Assert
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it("does not update its rendered state when the parent refuses to update `checked`", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox.Root
+        checked={false}
+        onCheckedChange={onCheckedChange}
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Act
+    await user.click(checkbox);
+
+    // Assert: callback fired but the rendered state stays false because the
+    // parent did not flip the controlled prop.
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("lets a parent drive the value end to end", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    function Harness() {
+      // Start true so the pre-click state can only be correct if the
+      // controlled prop is honoured (a broken impl would fall back to
+      // defaultChecked=false and render the opposite).
+      const [checked, setChecked] = useState(true);
+      return (
+        <Checkbox.Root
+          checked={checked}
+          onCheckedChange={setChecked}
+          aria-label="Accept terms"
+        />
+      );
+    }
+    render(<Harness />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+
+    // Act & Assert
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    await user.click(checkbox);
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+  });
+});

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

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+
+import { Checkbox } from "../Checkbox";
+
+describe("Checkbox disabled state", () => {
+  it('sets data-disabled="" on the root so CSS can target the disabled state', () => {
+    // Arrange & Act
+    render(<Checkbox.Root disabled aria-label="Accept terms" />);
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("data-disabled", "");
+  });
+
+});

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

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Checkbox } from "../Checkbox";
+
+describe("Checkbox indeterminate state", () => {
+  it('exposes aria-checked="mixed" when defaultChecked is "indeterminate"', () => {
+    // Arrange & Act
+    render(
+      <Checkbox.Root
+        defaultChecked="indeterminate"
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("aria-checked", "mixed");
+  });
+
+  it('sets data-state="indeterminate" on the root in indeterminate mode', () => {
+    // Arrange & Act
+    render(
+      <Checkbox.Root
+        defaultChecked="indeterminate"
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Assert
+    expect(checkbox).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("resolves to checked=true on the first click (WAI-ARIA tri-state convention)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox.Root
+        defaultChecked="indeterminate"
+        onCheckedChange={onCheckedChange}
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+
+    // Act
+    await user.click(checkbox);
+
+    // Assert
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it('honours controlled checked="indeterminate" across re-renders', () => {
+    // Arrange
+    const { rerender } = render(
+      <Checkbox.Root
+        checked={false}
+        onCheckedChange={() => {}}
+        aria-label="Accept terms"
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+
+    // Act
+    rerender(
+      <Checkbox.Root
+        checked="indeterminate"
+        onCheckedChange={() => {}}
+        aria-label="Accept terms"
+      />,
+    );
+
+    // Assert
+    expect(checkbox).toHaveAttribute("aria-checked", "mixed");
+    expect(checkbox).toHaveAttribute("data-state", "indeterminate");
+  });
+});