@dowel-ui/react 0.1.0

package/src/components/switch/switch.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Label } from "../label";
+import { Switch } from "./switch";
+
+describe("Switch", () => {
+  it("is exposed as a switch, not a checkbox", () => {
+    render(<Switch aria-label="Airplane mode" />);
+    expect(screen.getByRole("switch", { name: "Airplane mode" })).toBeInTheDocument();
+  });
+
+  it("starts off", () => {
+    render(<Switch aria-label="Airplane mode" />);
+    expect(screen.getByRole("switch")).not.toBeChecked();
+  });
+
+  it("toggles on click", async () => {
+    const user = userEvent.setup();
+    render(<Switch aria-label="Airplane mode" />);
+
+    const control = screen.getByRole("switch");
+    await user.click(control);
+    expect(control).toBeChecked();
+  });
+
+  it("toggles from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(<Switch aria-label="Airplane mode" />);
+
+    await user.tab();
+    expect(screen.getByRole("switch")).toHaveFocus();
+    await user.keyboard(" ");
+    expect(screen.getByRole("switch")).toBeChecked();
+  });
+
+  it("reports changes", async () => {
+    const onCheckedChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Switch aria-label="Airplane mode" onCheckedChange={onCheckedChange} />);
+
+    await user.click(screen.getByRole("switch"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works controlled", async () => {
+    const user = userEvent.setup();
+
+    function Controlled() {
+      const [on, setOn] = useState(false);
+      return <Switch aria-label="Airplane mode" checked={on} onCheckedChange={setOn} />;
+    }
+
+    render(<Controlled />);
+    await user.click(screen.getByRole("switch"));
+    expect(screen.getByRole("switch")).toBeChecked();
+  });
+
+  it("does not toggle while disabled", async () => {
+    const onCheckedChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Switch aria-label="Airplane mode" disabled onCheckedChange={onCheckedChange} />);
+
+    await user.click(screen.getByRole("switch"));
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it("moves its thumb to reflect state, not colour alone", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Switch aria-label="Airplane mode" />);
+
+    const thumb = container.querySelector("[data-slot='switch-thumb']");
+    expect(thumb).toHaveAttribute("data-state", "unchecked");
+
+    await user.click(screen.getByRole("switch"));
+    expect(thumb).toHaveAttribute("data-state", "checked");
+  });
+
+  it("takes its name from an associated label", () => {
+    render(
+      <>
+        <Switch id="wifi" />
+        <Label htmlFor="wifi">Wi-Fi</Label>
+      </>,
+    );
+    expect(screen.getByRole("switch", { name: "Wi-Fi" })).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <div className="flex items-center gap-2">
+        <Switch id="a11y-wifi" />
+        <Label htmlFor="a11y-wifi">Wi-Fi</Label>
+      </div>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/switch/switch.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * An immediate on/off toggle.
+ *
+ * Use a Switch when the change takes effect at once, and a Checkbox when it is
+ * staged until the form is submitted. The difference is real to users: a switch
+ * that needs a Save button is a broken promise.
+ */
+export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root>;
+
+export function Switch({ className, ...props }: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5",
+        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+        "bg-input data-[state=checked]:bg-primary",
+        "disabled:cursor-not-allowed disabled:opacity-55",
+        focusRing,
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0",
+          "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+          "translate-x-0 data-[state=checked]:translate-x-4",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}

package/src/components/table/index.ts

@@ -0,0 +1,11 @@
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type TableProps,
+} from "./table";

package/src/components/table/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "table",
+  title: "Table",
+  description: "Semantic table primitives for tabular data.",
+  category: "data",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: [],
+  files: ["table.tsx"],
+  a11y:
+    "A native table, so row and column position, header association and dimensions are all " +
+    "announced without ARIA. Give it a name with TableCaption or aria-label. The scrolling " +
+    "wrapper is focusable so an overflowing table can be scrolled by keyboard — without that, " +
+    'columns past the edge are unreachable. Use scope="row" on th elements inside tbody.',
+});

package/src/components/table/table.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Badge } from "@/components/badge";
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+const INVOICES = [
+  { id: "INV-001", status: "Paid", method: "Credit card", amount: "$250.00" },
+  { id: "INV-002", status: "Pending", method: "PayPal", amount: "$150.00" },
+  { id: "INV-003", status: "Failed", method: "Bank transfer", amount: "$350.00" },
+  { id: "INV-004", status: "Paid", method: "Credit card", amount: "$450.00" },
+];
+
+const meta = {
+  title: "Data/Table",
+  component: Table,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Table className="w-[36rem]">
+      <TableCaption>Invoices from the last month.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {INVOICES.map((invoice) => (
+          <TableRow key={invoice.id}>
+            {/* A row header, so a screen reader can say which row a cell is in. */}
+            <TableHead scope="row" className="font-medium text-foreground">
+              {invoice.id}
+            </TableHead>
+            <TableCell>
+              <Badge
+                variant={
+                  invoice.status === "Paid"
+                    ? "success"
+                    : invoice.status === "Failed"
+                      ? "destructive"
+                      : "secondary"
+                }
+                size="sm"
+              >
+                {invoice.status}
+              </Badge>
+            </TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right tabular-nums">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right tabular-nums">$1,200.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};
+
+export const Minimal: Story = {
+  render: () => (
+    <Table className="w-96" aria-label="Team members">
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Ada Lovelace</TableCell>
+          <TableCell>Engineering</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Grace Hopper</TableCell>
+          <TableCell>Engineering</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
+
+/** Overflowing horizontally: the wrapper is focusable so it can be scrolled by keyboard. */
+export const Overflowing: Story = {
+  render: () => (
+    <div className="w-80">
+      <Table aria-label="Wide data">
+        <TableHeader>
+          <TableRow>
+            {Array.from({ length: 8 }, (_, index) => (
+              <TableHead key={index} className="whitespace-nowrap">
+                Column {index + 1}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[0, 1, 2].map((row) => (
+            <TableRow key={row}>
+              {Array.from({ length: 8 }, (_, index) => (
+                <TableCell key={index} className="whitespace-nowrap">
+                  Value {row + 1}.{index + 1}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};

package/src/components/table/table.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+function Example() {
+  return (
+    <Table>
+      <TableCaption>Recent invoices</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableHead scope="row">INV-001</TableHead>
+          <TableCell>Paid</TableCell>
+          <TableCell>$250.00</TableCell>
+        </TableRow>
+        <TableRow data-state="selected">
+          <TableHead scope="row">INV-002</TableHead>
+          <TableCell>Pending</TableCell>
+          <TableCell>$150.00</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={2}>Total</TableCell>
+          <TableCell>$400.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  );
+}
+
+describe("Table", () => {
+  it("renders a real table, not a grid of divs", () => {
+    render(<Example />);
+    expect(screen.getByRole("table")).toBeInTheDocument();
+  });
+
+  it("is named by its caption", () => {
+    render(<Example />);
+    expect(screen.getByRole("table", { name: "Recent invoices" })).toBeInTheDocument();
+  });
+
+  it("exposes column headers", () => {
+    render(<Example />);
+    const headers = screen.getAllByRole("columnheader");
+    expect(headers.map((header) => header.textContent)).toEqual([
+      "Invoice",
+      "Status",
+      "Amount",
+    ]);
+  });
+
+  it("exposes row headers when scope is set", () => {
+    render(<Example />);
+    expect(screen.getAllByRole("rowheader")).toHaveLength(2);
+  });
+
+  it("groups rows into header, body and footer", () => {
+    render(<Example />);
+    expect(screen.getAllByRole("rowgroup")).toHaveLength(3);
+  });
+
+  it("marks a selected row for styling", () => {
+    render(<Example />);
+    const rows = screen.getAllByRole("row");
+    const selected = rows.find((row) => row.getAttribute("data-state") === "selected");
+    expect(selected).toBeDefined();
+    expect(within(selected as HTMLElement).getByText("Pending")).toBeInTheDocument();
+  });
+
+  describe("the scrolling wrapper", () => {
+    it("is focusable, so an overflowing table can be scrolled by keyboard", async () => {
+      const user = userEvent.setup();
+      const { container } = render(<Example />);
+
+      const wrapper = container.querySelector("[data-slot='table-container']");
+      expect(wrapper).toHaveAttribute("tabindex", "0");
+
+      await user.tab();
+      expect(wrapper).toHaveFocus();
+    });
+
+    it("is a named region, so it is not an unlabelled focus stop", () => {
+      render(<Example />);
+      expect(screen.getByRole("region", { name: "Table" })).toBeInTheDocument();
+    });
+
+    it("takes its name from the table's aria-label", () => {
+      render(
+        <Table aria-label="Invoices">
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>,
+      );
+      expect(screen.getByRole("region", { name: "Invoices" })).toBeInTheDocument();
+    });
+
+    it("accepts props of its own", () => {
+      const { container } = render(
+        <Table containerProps={{ className: "max-h-64", "data-testid": "wrapper" }}>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>,
+      );
+      expect(container.querySelector("[data-testid='wrapper']")).toHaveClass("max-h-64");
+    });
+  });
+
+  it("lets a consumer className override a conflicting utility", () => {
+    render(
+      <Table className="text-base" aria-label="T">
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    const table = screen.getByRole("table");
+    expect(table).toHaveClass("text-base");
+    expect(table).not.toHaveClass("text-sm");
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Example />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/table/table.tsx

@@ -0,0 +1,138 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Semantic table primitives.
+ *
+ * A real `<table>`, not a grid of divs: screen readers announce row and column
+ * position, header association and table dimensions from the native elements,
+ * and none of that can be recovered with ARIA after the fact.
+ *
+ * The wrapper scrolls horizontally and is focusable, because a table that
+ * overflows its container is otherwise unreachable by keyboard.
+ */
+/**
+ * Arbitrary `data-*` attributes.
+ *
+ * TypeScript accepts `data-*` written directly on JSX, but not inside an object
+ * literal typed as HTML attributes — so without this, `containerProps` could not
+ * carry a test id or a styling hook.
+ */
+type DataAttributes = Record<`data-${string}`, string | number | boolean | undefined>;
+
+export interface TableProps extends ComponentPropsWithRef<"table"> {
+  /** Props for the scrolling wrapper around the table. */
+  containerProps?: ComponentPropsWithRef<"div"> & DataAttributes;
+}
+
+export function Table({ className, containerProps, ...props }: TableProps) {
+  const { className: containerClassName, ...restContainer } = containerProps ?? {};
+
+  return (
+    <div
+      data-slot="table-container"
+      // tabIndex 0 with a role and label makes an overflowing table scrollable
+      // by keyboard. Without it, the columns past the edge are unreachable.
+      tabIndex={0}
+      role="region"
+      aria-label={props["aria-label"] ?? "Table"}
+      className={cn("relative w-full overflow-x-auto", containerClassName)}
+      {...restContainer}
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom border-collapse text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function TableHeader({ className, ...props }: ComponentPropsWithRef<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b [&_tr]:border-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableBody({ className, ...props }: ComponentPropsWithRef<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableFooter({ className, ...props }: ComponentPropsWithRef<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t border-border bg-muted/40 font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+export function TableRow({ className, ...props }: ComponentPropsWithRef<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors duration-[var(--duration-instant)]",
+        "hover:bg-muted/50 data-[state=selected]:bg-accent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableHead({ className, ...props }: ComponentPropsWithRef<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCell({ className, ...props }: ComponentPropsWithRef<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-3 py-2.5 align-middle",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * A caption describing the table.
+ *
+ * Rendered below the table but announced as its accessible name, which is why
+ * it belongs here rather than as a heading above.
+ */
+export function TableCaption({ className, ...props }: ComponentPropsWithRef<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,11 @@
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants,
+  tabsTriggerVariants,
+  type TabsContentProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+} from "./tabs";

package/src/components/tabs/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "tabs",
+  title: "Tabs",
+  description: "Switches between panels of related content.",
+  category: "navigation",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["tabs.tsx"],
+  a11y:
+    "Implements the ARIA tabs pattern: arrows move between tabs, Home/End jump to the ends, " +
+    "and only the active tab is in the tab sequence. Panels are focusable so keyboard users " +
+    'reach their content directly. Use activationMode="manual" when showing a panel is ' +
+    "expensive, so arrowing past it does not load it.",
+});