@primitiv-ui/react 0.1.0

package/src/Carousel/__tests__/Carousel.slides-per-page.test.tsx

@@ -0,0 +1,183 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+
+describe("Carousel slidesPerPage", () => {
+  it("should mark every slide on the active page as active when slidesPerPage > 1", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
+
+  it("should render ceil(slides / slidesPerPage) indicators in Carousel.Indicators", () => {
+    const { rerender } = render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
+    ).toHaveLength(2);
+
+    // Non-multiple total: ceil(5 / 2) === 3.
+    rerender(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getAllByRole("button", { name: /^Slide \d+$/ }),
+    ).toHaveLength(3);
+  });
+
+  it("should disable Carousel.NextTrigger at the last page (not the last slide)", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={2}
+        defaultPage={1}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
+  });
+
+  it("should advance by one page when Carousel.NextTrigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should jump to the targeted page when an auto-rendered Indicator is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" slidesPerPage={2}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Slide 2" }));
+
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should activate only the remaining slides on a partial last page", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        slidesPerPage={2}
+        defaultPage={2}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+          <Carousel.Slide data-testid="slide-3" />
+          <Carousel.Slide data-testid="slide-4" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-3")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-4")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.touch-interaction.test.tsx

@@ -0,0 +1,96 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+import { Carousel } from "..";
+
+describe("Carousel autoplay touch-pause (WCAG 2.2.2)", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should pause the timer while a touch is active on the Root, then resume on pointerup", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        data-testid="carousel-root"
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    const root = screen.getByTestId("carousel-root");
+
+    act(() => {
+      fireEvent.pointerDown(root, { pointerType: "touch" });
+    });
+
+    // Touch active: timer paused, no advance.
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+
+    act(() => {
+      fireEvent.pointerUp(root, { pointerType: "touch" });
+    });
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should pause during a touch and resume on pointercancel", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        data-testid="carousel-root"
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    const root = screen.getByTestId("carousel-root");
+
+    act(() => {
+      fireEvent.pointerDown(root, { pointerType: "touch" });
+    });
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+
+    act(() => {
+      fireEvent.pointerCancel(root, { pointerType: "touch" });
+    });
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.transition-modes.test.tsx

@@ -0,0 +1,70 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+
+function fireScrollSnapChange(
+  viewport: HTMLElement,
+  snapTarget: HTMLElement,
+) {
+  const event = new Event("scrollsnapchange", { bubbles: false });
+  Object.defineProperty(event, "snapTargetInline", {
+    value: snapTarget,
+    writable: false,
+  });
+  act(() => {
+    viewport.dispatchEvent(event);
+  });
+}
+
+describe("Carousel transition modes", () => {
+  it('should skip the programmatic scroll on page change when transition="none"', async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" transition="none">
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    const scrollIntoViewSpy = vi.spyOn(
+      screen.getByTestId("slide-1"),
+      "scrollIntoView",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    // Page advanced (data-state still flips so CSS-driven transitions
+    // can react), but no scroll was issued.
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(scrollIntoViewSpy).not.toHaveBeenCalled();
+  });
+
+  it('should ignore scrollsnapchange events on the viewport when transition="none"', () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" transition="none">
+        <Carousel.Viewport data-testid="viewport">
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    fireScrollSnapChange(
+      screen.getByTestId("viewport"),
+      screen.getByTestId("slide-1"),
+    );
+
+    // Listener was never attached; the page didn't change.
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+});

package/src/Carousel/__tests__/Carousel.translations.test.tsx

@@ -0,0 +1,157 @@
+import { render, screen } from "@testing-library/react";
+
+import { Carousel } from "..";
+
+describe("Carousel translations", () => {
+  it("should override the slide aria-label format via translations.slideLabel", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        translations={{
+          slideLabel: ({ index, total }) => `Page ${index} sur ${total}`,
+        }}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "aria-label",
+      "Page 1 sur 2",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "aria-label",
+      "Page 2 sur 2",
+    );
+  });
+
+  it("should still allow per-slide ariaLabel overrides to take precedence over translations.slideLabel", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        translations={{ slideLabel: ({ index }) => `auto-${index}` }}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide
+            ariaLabel="Hand-picked for you"
+            data-testid="slide-1"
+          />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "aria-label",
+      "auto-1",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "aria-label",
+      "Hand-picked for you",
+    );
+  });
+
+  it("should override the indicator aria-label format via translations.indicatorLabel", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        translations={{ indicatorLabel: ({ index }) => `Diapositive ${index}` }}
+      >
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} />
+          <Carousel.Indicator index={1} />
+        </Carousel.IndicatorGroup>
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Diapositive 1" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Diapositive 2" }),
+    ).toBeVisible();
+  });
+
+  it("should override the PlayPauseTrigger accessible name via translations.startSlideshow when paused", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        translations={{ startSlideshow: "Démarrer le diaporama" }}
+      >
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Démarrer le diaporama" }),
+    ).toBeVisible();
+  });
+
+  it("should override the PlayPauseTrigger accessible name via translations.stopSlideshow when playing", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        defaultPlaying
+        translations={{ stopSlideshow: "Arrêter le diaporama" }}
+      >
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Arrêter le diaporama" }),
+    ).toBeVisible();
+  });
+
+  it("should fall back to defaults for any translation keys not specified", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        autoplay
+        translations={{ startSlideshow: "Démarrer" }}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+        </Carousel.Viewport>
+        <Carousel.IndicatorGroup label="Choose slide">
+          <Carousel.Indicator index={0} />
+        </Carousel.IndicatorGroup>
+        <Carousel.PlayPauseTrigger />
+      </Carousel.Root>,
+    );
+
+    // startSlideshow override applied
+    expect(screen.getByRole("button", { name: "Démarrer" })).toBeVisible();
+    // slideLabel default still applied
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "aria-label",
+      "1 of 2",
+    );
+    // indicatorLabel default still applied
+    expect(screen.getByRole("button", { name: "Slide 1" })).toBeVisible();
+  });
+
+  it("should apply translations.indicatorLabel to indicators auto-rendered by Carousel.Indicators", () => {
+    render(
+      <Carousel.Root
+        ariaLabel="Featured products"
+        translations={{ indicatorLabel: ({ index }) => `Page ${index}` }}
+      >
+        <Carousel.Viewport>
+          <Carousel.Slide />
+          <Carousel.Slide />
+        </Carousel.Viewport>
+        <Carousel.Indicators label="Choose page" />
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByRole("button", { name: "Page 1" })).toBeVisible();
+    expect(screen.getByRole("button", { name: "Page 2" })).toBeVisible();
+  });
+});

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

@@ -0,0 +1,146 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Carousel } from "..";
+
+describe("Carousel uncontrolled page state", () => {
+  it("should mark the slide at index 0 as active by default when no defaultPage is provided", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should accept a defaultPage prop to seed the initial active slide", () => {
+    render(
+      <Carousel.Root ariaLabel="Featured products" defaultPage={1}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+      </Carousel.Root>,
+    );
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
+
+  it("should advance the active slide by one when Carousel.NextTrigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should advance multiple times when Carousel.NextTrigger is clicked repeatedly", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products">
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByTestId("slide-2")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  });
+
+  it("should retreat the active slide by one when Carousel.PreviousTrigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Carousel.Root ariaLabel="Featured products" defaultPage={1}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+        <Carousel.PreviousTrigger>Previous</Carousel.PreviousTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Previous" }));
+
+    expect(screen.getByTestId("slide-0")).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+    expect(screen.getByTestId("slide-1")).toHaveAttribute(
+      "data-state",
+      "inactive",
+    );
+  });
+
+  it("should still invoke the consumer's onClick handler when a trigger is clicked", async () => {
+    const user = userEvent.setup();
+    const onNextClick = vi.fn();
+    const onPrevClick = vi.fn();
+
+    render(
+      <Carousel.Root ariaLabel="Featured products" defaultPage={1}>
+        <Carousel.Viewport>
+          <Carousel.Slide data-testid="slide-0" />
+          <Carousel.Slide data-testid="slide-1" />
+          <Carousel.Slide data-testid="slide-2" />
+        </Carousel.Viewport>
+        <Carousel.PreviousTrigger onClick={onPrevClick}>
+          Previous
+        </Carousel.PreviousTrigger>
+        <Carousel.NextTrigger onClick={onNextClick}>Next</Carousel.NextTrigger>
+      </Carousel.Root>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Previous" }));
+
+    expect(onNextClick).toHaveBeenCalledTimes(1);
+    expect(onPrevClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Carousel/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./useCarouselContext";
+export * from "./useCarouselRoot";
+export * from "./useCarouselSlide";
+export * from "./useCarouselViewport";

package/src/Carousel/hooks/useCarouselContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { CarouselContext } from "../CarouselContext";
+
+export function useCarouselContext() {
+  const context = useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("Component must be rendered as a child of Carousel.Root");
+  }
+
+  return context;
+}