@primitiv-ui/react 0.1.0

package/src/Accordion/__tests__/Accordion.mouse-interaction.test.tsx

@@ -0,0 +1,212 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion mouse interaction tests", () => {
+  it('should apply aria-expanded="true" attribute to accordion item trigger when clicking on a collapsed one', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Act
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should not make accordion item content panel visible when a different accordion item trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Accordion Trigger 1";
+    const title2 = "Accordion Trigger 2";
+    const content1 = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemPanel = screen.getByText(content1);
+    const accordionItemTrigger2 = screen.getByRole("button", {
+      name: title2,
+    });
+
+    // Act
+    await user.click(accordionItemTrigger2);
+
+    // Assert
+    expect(accordionItemPanel).not.toBeVisible();
+  });
+
+  it("should make accordion item content panel visible when accordion item trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+    const accordionItemPanel = screen.getByText(content);
+
+    // Act
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemPanel).toBeVisible();
+  });
+
+  it("should remove the hidden attribute from an accordion item content panel when the associated accordion item trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+    const accordionItemPanel = screen.getByText(content);
+
+    // Act
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemPanel).not.toHaveAttribute("hidden");
+  });
+
+  it('should apply aria-expanded="false" attribute to accordion item trigger when clicking on an expanded one', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Act
+    await user.click(accordionItemTrigger);
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it('should apply aria-expanded="true" attribute to accordion item trigger when re-expanding a collapsed one', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Act
+    await user.click(accordionItemTrigger);
+    await user.click(accordionItemTrigger);
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should make accordion item content panel not visible when an expanded accordion item trigger is clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+    const accordionItemPanel = screen.getByText(content);
+
+    // Act
+    await user.click(accordionItemTrigger);
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(accordionItemPanel).not.toBeVisible();
+  });
+
+  it("should call the onClick handler when provided to AccordionTrigger", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger onClick={onClick}>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger = screen.getByRole("button", { name: title });
+
+    // Act
+    await user.click(accordionItemTrigger);
+
+    // Assert
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Accordion/__tests__/Accordion.multiple-mode.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion multiple mode tests", () => {
+  it("should keep both panels open when multiple={true} and both triggers are clicked", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Accordion Trigger 1";
+    const content1 = "Accordion Content 1";
+    const title2 = "Accordion Trigger 2";
+    const content2 = "Accordion Content 2";
+    render(
+      <Accordion.Root multiple>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger1 = screen.getByRole("button", {
+      name: title1,
+    });
+    const accordionItemTrigger2 = screen.getByRole("button", {
+      name: title2,
+    });
+    const accordionItemPanel1 = screen.getByText(content1);
+    const accordionItemPanel2 = screen.getByText(content2);
+
+    // Act
+    await user.click(accordionItemTrigger1);
+    await user.click(accordionItemTrigger2);
+
+    // Assert - Both panels should be visible in multiple mode
+    expect(accordionItemPanel1).toBeVisible();
+    expect(accordionItemPanel2).toBeVisible();
+  });
+
+  it("should close both panels when multiple={true} and both triggers are clicked twice", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Accordion Trigger 1";
+    const content1 = "Accordion Content 1";
+    const title2 = "Accordion Trigger 2";
+    const content2 = "Accordion Content 2";
+    render(
+      <Accordion.Root multiple>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const accordionItemTrigger1 = screen.getByRole("button", {
+      name: title1,
+    });
+    const accordionItemTrigger2 = screen.getByRole("button", {
+      name: title2,
+    });
+    const accordionItemPanel1 = screen.getByText(content1);
+    const accordionItemPanel2 = screen.getByText(content2);
+
+    // Act - Open both, then close both
+    await user.click(accordionItemTrigger1);
+    await user.click(accordionItemTrigger2);
+    await user.click(accordionItemTrigger1);
+    await user.click(accordionItemTrigger2);
+
+    // Assert - Both panels should be closed
+    expect(accordionItemPanel1).not.toBeVisible();
+    expect(accordionItemPanel2).not.toBeVisible();
+  });
+});

package/src/Accordion/__tests__/Accordion.reading-direction.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DirectionProvider } from "../../DirectionProvider";
+import { Accordion } from "../Accordion";
+
+describe("Accordion reading direction tests", () => {
+  it('should accept dir="ltr" prop', () => {
+    // Arrange
+    render(<Accordion.Root data-testid="accordion" dir="ltr" />);
+
+    // Assert
+    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "ltr");
+  });
+
+  it('should accept dir="rtl" prop', () => {
+    // Arrange
+    render(<Accordion.Root data-testid="accordion" dir="rtl" />);
+
+    // Assert
+    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "rtl");
+  });
+
+  it('should move focus to the next trigger using "ArrowLeft" when orientation="horizontal" and dir="rtl"', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root orientation="horizontal" dir="rtl">
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger2 = screen.getByRole("button", { name: title2 });
+
+    // Act — in RTL, "forward" is ArrowLeft
+    await user.tab();
+    await user.keyboard("[ArrowLeft]");
+
+    // Assert
+    expect(trigger2).toHaveFocus();
+  });
+
+  it('should move focus to the previous trigger using "ArrowRight" when orientation="horizontal" and dir="rtl"', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root orientation="horizontal" dir="rtl">
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger1 = screen.getByRole("button", { name: title1 });
+
+    // Act — in RTL, "back" is ArrowRight; tab to trigger 2 then go back
+    await user.tab();
+    await user.tab();
+    await user.keyboard("[ArrowRight]");
+
+    // Assert
+    expect(trigger1).toHaveFocus();
+  });
+
+  it("should inherit reading direction from a DirectionProvider", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <DirectionProvider dir="rtl">
+        <Accordion.Root data-testid="accordion" orientation="horizontal">
+          <Accordion.Item>
+            <Accordion.Header>
+              <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Content</Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>
+              <Accordion.Trigger>Trigger 2</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Content</Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>
+              <Accordion.Trigger>Trigger 3</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>Content</Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+      </DirectionProvider>,
+    );
+
+    // Assert — provider direction reaches both the DOM and the keyboard
+    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "rtl");
+
+    // Act — in RTL, "forward" is ArrowLeft
+    await user.tab();
+    await user.keyboard("[ArrowLeft]");
+
+    // Assert
+    expect(screen.getByRole("button", { name: "Trigger 2" })).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,154 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion uncontrolled state tests", () => {
+  it("should render first accordion item panel as expanded when using defaultValue with item value prop", () => {
+    // Arrange
+    const title1 = "Accordion Trigger 1";
+    const content1 = "Accordion Content 1";
+    const title2 = "Accordion Trigger 2";
+    const content2 = "Accordion Content 2";
+
+    render(
+      <Accordion.Root defaultValue="item-1">
+        <Accordion.Item value="item-1">
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    const trigger1 = screen.getByRole("button", { name: title1 });
+    const accordionItemPanel1 = screen.getByText(content1);
+
+    // Assert - Item 1 should be expanded by default
+    expect(trigger1).toHaveAttribute("aria-expanded", "true");
+    expect(accordionItemPanel1).toBeVisible();
+  });
+
+  it("should handle defaultValue when explicitly set to undefined", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Accordion Trigger 1";
+    const title2 = "Accordion Trigger 2";
+    const content1 = "Accordion Content 1.";
+    const content2 = "Cars can be expensive.";
+
+    render(
+      <Accordion.Root defaultValue={undefined}>
+        <Accordion.Item value="item-1">
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger1 = screen.getByRole("button", { name: title1 });
+    const trigger2 = screen.getByRole("button", { name: title2 });
+    const panel1 = screen.getByText(content1);
+    const panel2 = screen.getByText(content2);
+
+    // Assert - No items should be expanded
+    expect(trigger1).toHaveAttribute("aria-expanded", "false");
+    expect(trigger2).toHaveAttribute("aria-expanded", "false");
+    expect(panel1).not.toBeVisible();
+    expect(panel2).not.toBeVisible();
+
+    // Verify both can be expanded independently (proving Set is truly empty)
+    await user.click(trigger1);
+    expect(trigger1).toHaveAttribute("aria-expanded", "true");
+    expect(panel1).toBeVisible();
+    expect(trigger2).toHaveAttribute("aria-expanded", "false");
+    expect(panel2).not.toBeVisible();
+
+    await user.click(trigger2);
+    expect(trigger1).toHaveAttribute("aria-expanded", "false");
+    expect(panel1).not.toBeVisible();
+    expect(trigger2).toHaveAttribute("aria-expanded", "true");
+    expect(panel2).toBeVisible();
+  });
+
+  it("should update toggleItem behavior when multiple prop changes", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Item 1";
+    const title2 = "Item 2";
+    const content1 = "Content 1";
+    const content2 = "Content 2";
+
+    const { rerender } = render(
+      <Accordion.Root multiple={false}>
+        <Accordion.Item value="item-1">
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    const trigger1 = screen.getByRole("button", { name: title1 });
+    const trigger2 = screen.getByRole("button", { name: title2 });
+    const panel1 = screen.getByText(content1);
+    const panel2 = screen.getByText(content2);
+
+    // Act - In single mode, clicking second trigger should close first
+    await user.click(trigger1);
+    expect(trigger1).toHaveAttribute("aria-expanded", "true");
+    expect(panel1).toBeVisible();
+
+    await user.click(trigger2);
+    expect(trigger1).toHaveAttribute("aria-expanded", "false");
+    expect(panel1).not.toBeVisible();
+    expect(trigger2).toHaveAttribute("aria-expanded", "true");
+    expect(panel2).toBeVisible();
+
+    // Act - Change to multiple mode
+    rerender(
+      <Accordion.Root multiple>
+        <Accordion.Item value="item-1">
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content1}</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content2}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert - In multiple mode, both can be open at once
+    await user.click(trigger1);
+    expect(trigger1).toHaveAttribute("aria-expanded", "true");
+    expect(panel1).toBeVisible();
+    expect(trigger2).toHaveAttribute("aria-expanded", "true");
+    expect(panel2).toBeVisible();
+  });
+});

package/src/Accordion/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from "./useAccordionContext";
+export * from "./useAccordionHeaderContext";
+export * from "./useAccordionItem";
+export * from "./useAccordionItemContext";
+export * from "./useAccordionRoot";
+export * from "./useAccordionTrigger";

package/src/Accordion/hooks/useAccordionContext.ts

@@ -0,0 +1 @@
+export { useAccordionContext } from "../AccordionContext";

package/src/Accordion/hooks/useAccordionHeaderContext.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AccordionContext } from "../AccordionContext";
+
+export function useAccordionHeaderContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("AccordionHeader must be used within AccordionRoot");
+  }
+  return context;
+}

package/src/Accordion/hooks/useAccordionItem.ts

@@ -0,0 +1,22 @@
+import { useId, useMemo } from "react";
+
+import { deriveId } from "../../utils";
+
+import { useAccordionContext } from "./useAccordionContext";
+
+export function useAccordionItem(value: string | undefined) {
+  const { accordionId, expandedItems } = useAccordionContext();
+  // Use provided value prop, or fall back to React's useId for stable IDs
+  const autoId = useId();
+  const itemId = value ?? autoId;
+  const buttonId = deriveId(accordionId, "heading", itemId);
+  const panelId = deriveId(accordionId, "panel", itemId);
+  const isExpanded = expandedItems.has(itemId);
+
+  const contextValue = useMemo(
+    () => ({ buttonId, panelId, itemId, isExpanded }),
+    [buttonId, panelId, itemId, isExpanded],
+  );
+
+  return { contextValue };
+}

package/src/Accordion/hooks/useAccordionItemContext.ts

@@ -0,0 +1 @@
+export { useAccordionItemContext } from "../AccordionContext";