@primitiv-ui/react 0.1.38 → 0.1.40

package/src/Table/__tests__/Table.Row.test.tsx

@@ -1,67 +0,0 @@
-import { Table } from "../index.ts";
-import { render, screen } from "@testing-library/react";
-
-describe("Table.Row rendering", () => {
-  it("should render tr element", () => {
-    // Arrange
-    render(
-      <table>
-        <tbody>
-          <Table.Row />
-        </tbody>
-      </table>,
-    );
-    const tr = screen.getByRole("row");
-
-    // Assert
-    expect(tr).toBeVisible();
-  });
-
-  it("should render children correctly", () => {
-    // Arrange
-    render(
-      <table>
-        <tbody>
-          <Table.Row>
-            <th>Example text</th>
-          </Table.Row>
-        </tbody>
-      </table>,
-    );
-    const childElement = screen.getByText(/Example text/i);
-
-    // Assert
-    expect(childElement).toBeVisible();
-  });
-
-  it("should add className to tr element", () => {
-    // Arrange
-    const testClass = "test-class";
-    render(
-      <table>
-        <tbody>
-          <Table.Row className={testClass} />
-        </tbody>
-      </table>,
-    );
-    const tr = screen.getByRole("row");
-
-    // Assert
-    expect(tr).toHaveClass(testClass);
-  });
-
-  it("should apply correct HTML attributes to tr element", () => {
-    // Arrange
-    render(
-      <table>
-        <tbody>
-          <Table.Row id="test" />
-        </tbody>
-      </table>,
-    );
-    const tr = screen.getByRole("row");
-
-    // Assert
-    expect(tr).toHaveAttribute("id", "test");
-  });
-});

package/src/Table/__tests__/Table.ScrollArea.test.tsx

@@ -1,83 +0,0 @@
-import { Table } from "../index.ts";
-import { render, screen } from "@testing-library/react";
-
-describe("Table.ScrollArea rendering", () => {
-  it("should render the table element as children", () => {
-    // Arrange
-    render(
-      <Table.ScrollArea>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const table = screen.getByRole("table");
-
-    // Assert
-    expect(table).toBeVisible();
-  });
-
-  it("should render a scrollable container with automatic overflow on the x-axis", () => {
-    // Arrange
-    render(
-      <Table.ScrollArea>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const scrollArea = screen.getByRole("table").parentElement;
-
-    // Assert
-    expect(scrollArea?.style.overflowX).toBe("auto");
-  });
-
-  it('should render a scrollable container with a "display: block" style applied', () => {
-    // Arrange
-    render(
-      <Table.ScrollArea>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const scrollArea = screen.getByRole("table").parentElement;
-
-    // Assert
-    expect(scrollArea?.style.display).toBe("block");
-  });
-
-  it('should render a scrollable container with a "maxWidth: 100%" style applied', () => {
-    // Arrange
-    render(
-      <Table.ScrollArea>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const scrollArea = screen.getByRole("table").parentElement;
-
-    // Assert
-    expect(scrollArea).toHaveStyle({ maxWidth: "100%" });
-  });
-
-  it("should preserve base scroll styles when a custom style prop is passed", () => {
-    // Arrange
-    render(
-      <Table.ScrollArea style={{ color: "red" }}>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const scrollArea = screen.getByRole("table").parentElement;
-
-    // Assert
-    expect(scrollArea?.style.overflowX).toBe("auto");
-  });
-
-  it("should add className to the scrollable container", () => {
-    // Arrange
-    const testClass = "test-class";
-    render(
-      <Table.ScrollArea className={testClass}>
-        <Table.Root />
-      </Table.ScrollArea>,
-    );
-    const scrollArea = screen.getByRole("table").parentElement;
-
-    // Assert
-    expect(scrollArea).toHaveClass(testClass);
-  });
-});

package/src/Table/__tests__/Table.contract.test.tsx

@@ -1,80 +0,0 @@
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-
-import { render } from "@testing-library/react";
-
-import { Table } from "../Table";
-
-/**
- * Auto-verification of the Table styling contract (RFC 0004 §3.4 / D15). The
- * `data-*` half of `registry/components/table/contract.json` is *derived from and
- * asserted against the rendered headless component* so it can never drift from
- * what the component actually emits. Table is a **static** structural compound:
- * it carries no state, so neither the root nor any part emits a `data-*` — the
- * guard pins that emptiness across every part.
- */
-const contractPath = resolve(
-  dirname(fileURLToPath(import.meta.url)),
-  "../../../../../registry/components/table/contract.json",
-);
-
-const contract = JSON.parse(readFileSync(contractPath, "utf8"));
-
-type DataAttribute = { name: string; value: string; when: string; source: string };
-
-/** Every `data-*` attribute name present anywhere in a subtree. */
-function dataAttributeNames(root: Element): string[] {
-  return [
-    ...new Set(
-      [root, ...root.querySelectorAll("*")].flatMap((element) =>
-        [...element.attributes]
-          .map((attribute) => attribute.name)
-          .filter((name) => name.startsWith("data-")),
-      ),
-    ),
-  ].sort();
-}
-
-function renderTable() {
-  return render(
-    <Table.Root>
-      <Table.Caption>Team</Table.Caption>
-      <Table.Head>
-        <Table.Row>
-          <Table.Header scope="col">Name</Table.Header>
-          <Table.Header scope="col">Role</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row aria-selected="true">
-          <Table.Cell>Alice</Table.Cell>
-          <Table.Cell>Engineer</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-      <Table.Footer>
-        <Table.Row>
-          <Table.Cell>Total</Table.Cell>
-          <Table.Cell>1</Table.Cell>
-        </Table.Row>
-      </Table.Footer>
-    </Table.Root>,
-  );
-}
-
-describe("Table styling contract", () => {
-  it("declares every data-* attribute on every part as auto-verified", () => {
-    const all: DataAttribute[] = [
-      ...contract.dataAttributes,
-      ...contract.subcomponents.flatMap(
-        (sub: { dataAttributes: DataAttribute[] }) => sub.dataAttributes,
-      ),
-    ];
-    expect(all.every((attribute) => attribute.source === "auto")).toBe(true);
-  });
-
-  it("emits no data-* attributes on the root or any part", () => {
-    const { container } = renderTable();
-    expect(dataAttributeNames(container.firstElementChild as Element)).toEqual([]);
-  });
-});

package/src/Table/index.ts

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

package/src/Table/types.ts

@@ -1,237 +0,0 @@
-import type {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  ReactNode,
-  TableHTMLAttributes,
-  ThHTMLAttributes,
-  TdHTMLAttributes,
-} from "react";
-
-/**
- * Props for {@link TableRoot | `Table.Root`} — all `TableHTMLAttributes` on
- * the native `<table>`. No custom props are added.
- *
- * @extends HTMLTableElement
- */
-export type TableRootProps = TableHTMLAttributes<HTMLTableElement>;
-
-/**
- * Props for {@link TableHead | `Table.Head`} — all `HTMLAttributes` on the
- * native `<thead>`. No custom props are added.
- *
- * @extends HTMLTableSectionElement
- */
-export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
-
-/**
- * Props for {@link TableBody | `Table.Body`} — all `HTMLAttributes` on the
- * native `<tbody>`. No custom props are added.
- *
- * @extends HTMLTableSectionElement
- */
-export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
-
-/**
- * Props for {@link TableFooter | `Table.Footer`} — all `HTMLAttributes` on
- * the native `<tfoot>`. No custom props are added.
- *
- * @extends HTMLTableSectionElement
- */
-export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
-
-/**
- * Props for {@link TableRow | `Table.Row`} — all `HTMLAttributes` on the
- * native `<tr>`. No custom props are added.
- *
- * @extends HTMLTableRowElement
- */
-export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
-
-/**
- * Props for {@link TableHeader | `Table.Header`} — all `ThHTMLAttributes` on
- * the native `<th>`, including `colSpan`, `rowSpan`, and `abbr`.
- *
- * The most important prop for accessibility is `scope`: set it to `"col"` for
- * column headers and `"row"` for row headers so assistive technology can
- * associate data cells with the correct header. See the scope table on
- * {@link TableHeader}.
- *
- * @extends HTMLTableCellElement
- */
-export type TableHeaderProps = ThHTMLAttributes<HTMLTableCellElement>;
-
-/**
- * Props for {@link TableCell | `Table.Cell`} — all `TdHTMLAttributes` on the
- * native `<td>`.
- *
- * Includes `colSpan` and `rowSpan` for spanning multiple columns or rows.
- *
- * @extends HTMLTableCellElement
- */
-export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
-
-/**
- * Props for {@link TableScrollArea | `Table.ScrollArea`} — a required
- * `children` plus all `HTMLAttributes` on the wrapping `<div>`.
- *
- * @extends HTMLDivElement
- */
-export type TableScrollAreaProps = {
-  /** The table (typically a single {@link TableRoot | `Table.Root`}) to
-   * wrap in the horizontally-scrolling container. */
-  children: ReactNode;
-  /**
-   * Merged with (and taking priority over) the base scroll styles
-   * (`display: block`, `overflow-x: auto`, `max-width: 100%`), so
-   * additional styles can be layered on without repeating the scroll
-   * declarations. See {@link TableScrollArea}'s custom-styles example.
-   */
-  style?: HTMLAttributes<HTMLDivElement>["style"];
-} & Omit<HTMLAttributes<HTMLDivElement>, "style">;
-
-/**
- * The value shared by {@link TableExpandable | `Table.Expandable`} with its
- * {@link TableExpandTrigger | `Table.ExpandTrigger`} and
- * {@link TableDetailRow | `Table.DetailRow`} children.
- *
- * @internal
- */
-export type TableExpandableContextValue = {
-  /** Whether the detail row is currently revealed. */
-  expanded: boolean;
-  /** The id wired to the detail row's `<tr>` and the trigger's `aria-controls`. */
-  detailId: string;
-  /** Flips `expanded` and notifies `onExpandedChange`. */
-  toggle: () => void;
-};
-
-/**
- * Props for {@link TableExpandable | `Table.Expandable`} — the pairing
- * provider for one expandable row and its detail row.
- */
-export type TableExpandableProps = {
-  /** The parent {@link TableRow | `Table.Row`} and its
-   * {@link TableDetailRow | `Table.DetailRow`}, as siblings. */
-  children: ReactNode;
-  /**
-   * Whether the detail row is revealed. Pass this (with
-   * `onExpandedChange`) to drive expansion from outside — which is what an
-   * external table engine such as TanStack Table does.
-   */
-  expanded?: boolean;
-  /**
-   * Initial expanded state when running uncontrolled. Ignored when
-   * `expanded` is supplied.
-   * @default false
-   */
-  defaultExpanded?: boolean;
-  /** Called with the next expanded state whenever the trigger is activated. */
-  onExpandedChange?: (expanded: boolean) => void;
-};
-
-/**
- * Props for {@link TableExpandTrigger | `Table.ExpandTrigger`} — all
- * `ButtonHTMLAttributes` on the native `<button>`.
- *
- * `aria-expanded`, `aria-controls` and `type` are owned by the component and
- * therefore `Omit`-ted: they are derived from the surrounding
- * {@link TableExpandable | `Table.Expandable`} and must not be overridden, or
- * the relationship the pair exists to express would break.
- *
- * @extends HTMLButtonElement
- */
-export type TableExpandTriggerProps = {
-  /**
-   * Render a consumer-supplied control instead of the native `<button>`, with
-   * this part's `aria-expanded`, `aria-controls`, `data-state` and click
-   * handling merged onto it via the {@link Slot} pattern.
-   *
-   * This is how a styled layer composes a real Button rather than re-creating
-   * one: the registry `data-table` renders a ghost Button through it, matching
-   * the Figma set, whose Expand Trigger is an Icon Button instance rather than a
-   * drawn glyph. The child must be a single element that accepts a `ref`, and it
-   * should be a `<button>` — the wiring assumes a control.
-   * @default false
-   */
-  asChild?: boolean;
-} & Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "aria-expanded" | "aria-controls" | "type"
->;
-
-/**
- * Props for {@link TableDetailRow | `Table.DetailRow`} — a required `colSpan`
- * plus all `HTMLAttributes` on the native `<tr>`.
- *
- * `id` is component-owned (it is the target of the trigger's `aria-controls`)
- * and so is `Omit`-ted.
- *
- * @extends HTMLTableRowElement
- */
-export type TableDetailRowProps = {
-  /** The detail panel's content. */
-  children?: ReactNode;
-  /**
-   * How many columns the panel spans — **every** column the table renders,
-   * control columns included.
-   *
-   * Deliberately a required prop rather than a value counted from context:
-   * counting would mean the table registering its own columns, and an
-   * external table engine already knows the number (TanStack Table:
-   * `table.getVisibleLeafColumns().length`).
-   */
-  colSpan: number;
-  /**
-   * How many leading columns to leave empty before the panel starts — the
-   * control columns (select, expand) a row renders in front of its data.
-   *
-   * The panel then spans the columns that remain, so `colSpan` keeps its
-   * meaning: the table's full column count, gutter included.
-   *
-   * This is how a panel aligns with the first **data** column instead of the
-   * table's edge (a panel starting under the checkbox reads as a new section of
-   * the table rather than an opened row). Alignment by empty cell rather than by
-   * a CSS indent is deliberate: the browser's own table layout resolves the
-   * width, so it stays exact across every size, density and control-column set
-   * with nothing measured and no arithmetic to drift.
-   * @default 0
-   */
-  gutter?: number;
-  /**
-   * Keep the row mounted while collapsed so a CSS transition can run.
-   *
-   * Off by default, and that default matters more here than it does on a
-   * `<div>`-based disclosure: a mounted row is still a **row**, so assistive
-   * technology counts it, and a table of 24 rows with 24 force-mounted
-   * detail rows announces 48. Opt in only when you are animating, and note
-   * that the collapsed row remains in the accessibility tree while you do.
-   * @default false
-   */
-  forceMount?: boolean;
-  /** Passed through to the `<td>` that spans the row, for styling the cell
-   * itself rather than the row. */
-  cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
-} & Omit<HTMLAttributes<HTMLTableRowElement>, "id" | "children">;
-
-/**
- * Props for {@link TableCaption | `Table.Caption`} — a required `children`,
- * an optional `captionSide`, plus all `HTMLAttributes` on the native
- * `<caption>`.
- *
- * @extends HTMLTableCaptionElement
- */
-export type TableCaptionProps = {
-  /** The visible, accessible label for the table. Preferred over
-   * `aria-label`/`aria-labelledby` on the table itself — the browser
-   * programmatically associates a `<caption>` with its `<table>`. */
-  children: ReactNode;
-  /**
-   * Controls the CSS `caption-side` property, positioning the caption
-   * above or below the table. See {@link TableCaption}'s placement
-   * examples.
-   * - `"bottom"` — caption appears below the table.
-   * - `"top"` — caption appears above the table.
-   * @default "bottom"
-   */
-  captionSide?: "bottom" | "top";
-} & HTMLAttributes<HTMLTableCaptionElement>;

package/src/Tabs/README.md

@@ -1,111 +0,0 @@
-# Tabs
-
-A compound component implementing the
-[WAI-ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
-
-```tsx
-import { Tabs } from "@primitiv-ui/react";
-
-<Tabs.Root defaultValue="overview">
-  <Tabs.List label="Account sections">
-    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
-    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
-  </Tabs.List>
-  <Tabs.Content value="overview">Dashboard...</Tabs.Content>
-  <Tabs.Content value="settings">Preferences...</Tabs.Content>
-</Tabs.Root>;
-```
-
-## Sub-components
-
-| Export         | Role        | Notes                                                                        |
-| -------------- | ----------- | ---------------------------------------------------------------------------- |
-| `Tabs.Root`    | State owner | Uncontrolled (`defaultValue`) or controlled (`value` + `onValueChange`)      |
-| `Tabs.List`    | `tablist`   | Requires `label` or `ariaLabelledBy` for accessibility                       |
-| `Tabs.Trigger` | `tab`       | Supports `asChild` to render any element with tab semantics                  |
-| `Tabs.Content` | `tabpanel`  | Stays mounted when inactive; use `lazyMount` or conditional rendering for deferred/unmount semantics |
-
-## Keyboard interaction
-
-| Key                        | Behaviour                                         |
-| -------------------------- | ------------------------------------------------- |
-| `ArrowRight` / `ArrowLeft` | Move between triggers (horizontal tabs)           |
-| `ArrowDown` / `ArrowUp`    | Move between triggers (vertical tabs)             |
-| `Home` / `End`             | Jump to first / last trigger                      |
-| `Enter` / `Space`          | Activate focused trigger (manual activation mode) |
-| `Tab`                      | Move from tablist into the active panel           |
-
-## Reading direction
-
-Pass `dir` (`"ltr"` / `"rtl"`) to set the arrow-key direction for horizontal
-tabs and the container's `dir` attribute. When `dir` is omitted, it is
-inherited from the nearest [`DirectionProvider`](../DirectionProvider/README.md),
-falling back to `"ltr"` when there is no provider. An explicit `dir` prop
-always wins over the inherited value.
-
-## State modes
-
-- **Uncontrolled** — pass `defaultValue` (or omit for no initial selection).
-- **Controlled** — pass `value` and `onValueChange` together.
-
-## Activation modes
-
-- `activationMode="automatic"` (default) — arrow keys immediately activate the panel.
-- `activationMode="manual"` — arrow keys move focus only; `Enter`/`Space` confirms.
-
-## Lazy mounting
-
-Pass `lazyMount` on `Tabs.Root` to defer rendering a panel's children until
-that tab is first activated. Once mounted, children remain in the DOM across
-subsequent tab switches (lazy mount, not unmount-on-hide). The
-`<div role="tabpanel">` wrapper always renders so the ARIA relationship between
-trigger and panel is always present.
-
-```tsx
-<Tabs.Root defaultValue="overview" lazyMount>
-  ...
-</Tabs.Root>
-```
-
-This is useful when a panel owns expensive initialisation that depends on the
-element being visible — for example, a scroll-snap carousel whose initial scroll
-position must be computed while the panel has real dimensions.
-
-## Imperative API
-
-```tsx
-const ref = useRef<TabsImperativeApi>(null);
-<Tabs.Root ref={ref} defaultValue="a">
-  ...
-</Tabs.Root>;
-ref.current?.setActiveTab("b");
-```
-
-## `asChild` composition
-
-`Tabs.Trigger` accepts an `asChild` prop to render any child element with
-full tab semantics. All ARIA attributes, event handlers, and the roving
-`tabIndex` are merged onto the child following the asChild composition
-pattern (child handler runs first, then the trigger's):
-
-```tsx
-<Tabs.Trigger asChild value="settings">
-  <Link to="/settings">Settings</Link>
-</Tabs.Trigger>
-```
-
-## Styling hooks
-
-```css
-[role="tab"][data-state="active"] {
-  border-bottom: 2px solid currentColor;
-}
-[role="tabpanel"][data-state="active"] {
-  display: block;
-}
-```
-
-Both `data-state` (`"active"` | `"inactive"`) and
-`data-orientation` (`"horizontal"` | `"vertical"`) are available on
-every rendered element. `Tabs.Trigger` also sets `data-disabled=""`
-when disabled (omitted otherwise), matching the rest of the library.