@dowel-ui/react 0.1.0

package/src/components/calendar/calendar.test.tsx

@@ -0,0 +1,255 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Calendar } from "./calendar";
+
+/** January 2026 — a fixed month so the tests never depend on today's date. */
+const JANUARY_2026 = new Date(2026, 0, 1);
+
+function dayButton(container: HTMLElement, iso: string): HTMLElement {
+  const cell = container.querySelector<HTMLElement>(`[data-day="${iso}"]`);
+  if (!cell) throw new Error(`No day cell for ${iso}`);
+  return within(cell).getByRole("button");
+}
+
+describe("Calendar", () => {
+  it("renders a date grid", () => {
+    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+    expect(screen.getByRole("grid")).toBeInTheDocument();
+    expect(screen.getAllByRole("gridcell").length).toBeGreaterThan(27);
+  });
+
+  it("shows the month it was given", () => {
+    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+    expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
+  });
+
+  it("selects a day on click", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} onSelect={onSelect} />,
+    );
+
+    await user.click(dayButton(container, "2026-01-15"));
+    expect(onSelect).toHaveBeenCalled();
+    expect(onSelect.mock.calls[0]?.[0]).toBeInstanceOf(Date);
+  });
+
+  it("marks the selected day", () => {
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} selected={new Date(2026, 0, 15)} />,
+    );
+
+    const cell = container.querySelector('[data-day="2026-01-15"]');
+    expect(cell).toHaveAttribute("data-selected", "true");
+  });
+
+  it("navigates to the next and previous month", async () => {
+    const user = userEvent.setup();
+    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+
+    await user.click(screen.getByRole("button", { name: /next/i }));
+    await waitFor(() => {
+      expect(screen.getByText(/february 2026/i)).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole("button", { name: /previous/i }));
+    await waitFor(() => {
+      expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
+    });
+  });
+
+  it("announces the visible month in a live region", () => {
+    render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("moves through the grid with the arrow keys", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+
+    const start = dayButton(container, "2026-01-15");
+    start.focus();
+    expect(start).toHaveFocus();
+
+    await user.keyboard("{ArrowRight}");
+    expect(dayButton(container, "2026-01-16")).toHaveFocus();
+
+    // Down moves a whole week, which is what makes the grid a grid.
+    await user.keyboard("{ArrowDown}");
+    expect(dayButton(container, "2026-01-23")).toHaveFocus();
+
+    await user.keyboard("{ArrowLeft}");
+    expect(dayButton(container, "2026-01-22")).toHaveFocus();
+  });
+
+  it("selects the focused day with Enter", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} onSelect={onSelect} />,
+    );
+
+    dayButton(container, "2026-01-15").focus();
+    await user.keyboard("{Enter}");
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it("disables days that are not allowed", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    const { container } = render(
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2026}
+        disabled={{ before: new Date(2026, 0, 10) }}
+        onSelect={onSelect}
+      />,
+    );
+
+    const early = dayButton(container, "2026-01-05");
+    expect(early).toBeDisabled();
+    await user.click(early);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("marks days outside the visible month", () => {
+    const { container } = render(<Calendar mode="single" defaultMonth={JANUARY_2026} />);
+    expect(container.querySelector('[data-outside="true"]')).toBeInTheDocument();
+  });
+
+  it("can hide days outside the visible month", () => {
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} showOutsideDays={false} />,
+    );
+
+    // The cells stay, so the grid keeps its shape; they are marked hidden and
+    // render no button, which is what removes them from the keyboard path.
+    const hidden = container.querySelectorAll('[data-hidden="true"]');
+    expect(hidden.length).toBeGreaterThan(0);
+    for (const cell of hidden) {
+      expect(within(cell as HTMLElement).queryByRole("button")).not.toBeInTheDocument();
+    }
+  });
+
+  it("supports range selection", async () => {
+    const user = userEvent.setup();
+
+    function RangeExample() {
+      const [range, setRange] = useState<DateRange | undefined>();
+      return (
+        <>
+          <Calendar
+            mode="range"
+            defaultMonth={JANUARY_2026}
+            selected={range}
+            onSelect={setRange}
+          />
+          {/* A plain span, not <output>: <output> carries an implicit
+              role="status", which would collide with the calendar's own live
+              region. */}
+          <span data-testid="range">
+            {range?.from ? `${range.from.getDate()}-${String(range.to?.getDate())}` : "none"}
+          </span>
+        </>
+      );
+    }
+
+    const { container } = render(<RangeExample />);
+    expect(screen.getByTestId("range")).toHaveTextContent("none");
+
+    // The first click produces a one-day range, not a half-open one: `to` is
+    // set to the same day. The second click extends it.
+    await user.click(dayButton(container, "2026-01-10"));
+    await waitFor(() => {
+      expect(screen.getByTestId("range")).toHaveTextContent("10-10");
+    });
+
+    await user.click(dayButton(container, "2026-01-14"));
+    await waitFor(() => {
+      expect(screen.getByTestId("range")).toHaveTextContent("10-14");
+    });
+  });
+
+  it("marks the days between the ends of a range", async () => {
+    const user = userEvent.setup();
+
+    function RangeExample() {
+      const [range, setRange] = useState<DateRange | undefined>();
+      return (
+        <Calendar
+          mode="range"
+          defaultMonth={JANUARY_2026}
+          selected={range}
+          onSelect={setRange}
+        />
+      );
+    }
+
+    const { container } = render(<RangeExample />);
+    await user.click(dayButton(container, "2026-01-10"));
+    await user.click(dayButton(container, "2026-01-14"));
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-day="2026-01-12"]')).toHaveAttribute(
+        "data-selected",
+        "true",
+      );
+    });
+    expect(container.querySelector('[data-day="2026-01-16"]')).not.toHaveAttribute(
+      "data-selected",
+    );
+  });
+
+  it("shows more than one month when asked", () => {
+    render(<Calendar mode="single" defaultMonth={JANUARY_2026} numberOfMonths={2} />);
+    expect(screen.getByText(/january 2026/i)).toBeInTheDocument();
+    expect(screen.getByText(/february 2026/i)).toBeInTheDocument();
+  });
+
+  it("merges a consumer className", () => {
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} className="p-6" />,
+    );
+    expect(container.querySelector(".rdp-root")).toHaveClass("p-6");
+  });
+
+  it("lets a consumer override a generated classNames entry", () => {
+    const { container } = render(
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2026}
+        classNames={{ day: "custom-day-class" }}
+      />,
+    );
+    expect(container.querySelector(".custom-day-class")).toBeInTheDocument();
+  });
+
+  it("renders dropdown navigation with its own chevrons", () => {
+    render(
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2026}
+        captionLayout="dropdown"
+        startMonth={new Date(2024, 0)}
+        endMonth={new Date(2028, 11)}
+      />,
+    );
+
+    // Dropdown captions render comboboxes for month and year, each with a
+    // downward chevron — a different orientation from the nav arrows.
+    expect(screen.getAllByRole("combobox").length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <Calendar mode="single" defaultMonth={JANUARY_2026} aria-label="Event date" />,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { DayPicker, getDefaultClassNames, type DayPickerProps } from "react-day-picker";
+
+import { buttonVariants } from "@/components/button";
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * A date grid for selecting a day, several days or a range.
+ *
+ * Wraps `react-day-picker`, which supplies the parts that are genuinely hard —
+ * locale-aware week layout, the roving-focus grid keyboard model, range
+ * selection and out-of-month handling. This file is the design layer over it:
+ * every class comes from our tokens, so the calendar re-skins with the rest of
+ * the system rather than shipping its own visual language.
+ */
+export type CalendarProps = DayPickerProps;
+
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  const defaults = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      data-slot="calendar"
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        ...defaults,
+        root: cn(defaults.root, "w-fit"),
+        months: cn(defaults.months, "flex flex-col gap-4 sm:flex-row"),
+        month: cn(defaults.month, "flex flex-col gap-4"),
+        nav: cn(defaults.nav, "absolute inset-x-3 top-3 flex items-center justify-between"),
+        button_previous: cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "opacity-60 hover:opacity-100",
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "opacity-60 hover:opacity-100",
+        ),
+        month_caption: cn(defaults.month_caption, "flex h-8 items-center justify-center"),
+        caption_label: cn(defaults.caption_label, "text-sm font-medium"),
+        dropdowns: cn(defaults.dropdowns, "flex items-center gap-2 text-sm font-medium"),
+        dropdown_root: cn(defaults.dropdown_root, "relative rounded-md border border-input"),
+        dropdown: cn(defaults.dropdown, "absolute inset-0 opacity-0"),
+        month_grid: cn(defaults.month_grid, "w-full border-collapse"),
+        weekdays: cn(defaults.weekdays, "flex"),
+        weekday: cn(
+          defaults.weekday,
+          "w-9 text-2xs font-normal text-muted-foreground select-none",
+        ),
+        week: cn(defaults.week, "mt-1 flex w-full"),
+        week_number_header: cn(defaults.week_number_header, "w-9"),
+        week_number: cn(defaults.week_number, "text-2xs text-muted-foreground"),
+        day: cn(defaults.day, "group/day size-9 p-0 text-center text-sm"),
+        day_button: cn(
+          defaults.day_button,
+          "size-9 rounded-md font-normal transition-colors duration-[var(--duration-instant)]",
+          "hover:bg-accent hover:text-accent-foreground",
+          "group-data-[selected=true]/day:bg-primary group-data-[selected=true]/day:text-primary-foreground",
+          "group-data-[selected=true]/day:hover:bg-primary-hover",
+          "disabled:pointer-events-none disabled:opacity-40",
+          focusRing,
+        ),
+        // Range middles keep the muted surface so the two ends stay legible as
+        // the actual selection.
+        range_start: cn(defaults.range_start, "rounded-l-md bg-accent"),
+        range_middle: cn(
+          defaults.range_middle,
+          "bg-accent [&>button]:bg-transparent [&>button]:text-accent-foreground",
+        ),
+        range_end: cn(defaults.range_end, "rounded-r-md bg-accent"),
+        today: cn(defaults.today, "[&>button]:font-semibold [&>button]:text-primary"),
+        outside: cn(defaults.outside, "text-muted-foreground opacity-50"),
+        disabled: cn(defaults.disabled, "opacity-40"),
+        hidden: cn(defaults.hidden, "invisible"),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) => (
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            className={cn("size-4", chevronClassName)}
+            {...chevronProps}
+          >
+            <path
+              d={
+                orientation === "left"
+                  ? "m14 6-6 6 6 6"
+                  : orientation === "right"
+                    ? "m10 6 6 6-6 6"
+                    : orientation === "up"
+                      ? "m6 14 6-6 6 6"
+                      : "m6 10 6 6 6-6"
+              }
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ),
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/calendar/index.ts

@@ -0,0 +1 @@
+export { Calendar, type CalendarProps } from "./calendar";

package/src/components/calendar/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "calendar",
+  title: "Calendar",
+  description: "A date grid for selecting a day, several days or a range.",
+  category: "form",
+  status: "stable",
+  dependencies: ["react-day-picker"],
+  registryDependencies: ["button"],
+  files: ["calendar.tsx"],
+  a11y:
+    "A real grid with roving focus: arrows move by day, Page Up/Down by month, Home/End to the " +
+    "ends of a week. Selection is announced through aria-selected, and the month caption is a " +
+    "live region so moving between months is announced. Give the calendar an accessible name " +
+    "when more than one is on the page.",
+});

package/src/components/card/card.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+const meta = {
+  title: "Display/Card",
+  component: Card,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Projects group your deployments and environments.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-2">
+        <Label htmlFor="name">Project name</Label>
+        <Input id="name" placeholder="acme-inc" />
+      </CardContent>
+      <CardFooter className="justify-end">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Create project</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const ContentOnly: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardContent className="pt-6">
+        <p className="text-sm text-muted-foreground">
+          A card does not require a header or a footer.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const Stat: Story = {
+  render: () => (
+    <Card className="w-56">
+      <CardHeader className="pb-2">
+        <CardDescription>Monthly recurring revenue</CardDescription>
+        <CardTitle className="text-3xl">$48,120</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-success">+12.4% from last month</p>
+      </CardContent>
+    </Card>
+  ),
+};

package/src/components/card/card.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+
+describe("Card", () => {
+  it("renders every part", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Create project</CardTitle>
+          <CardDescription>Projects group your deployments.</CardDescription>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+
+    expect(screen.getByRole("heading", { name: "Create project" })).toBeInTheDocument();
+    expect(screen.getByText("Projects group your deployments.")).toBeInTheDocument();
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+
+  it("renders the title as a level 3 heading by default", () => {
+    render(<CardTitle>Title</CardTitle>);
+    expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent("Title");
+  });
+
+  it("exposes slot attributes for styling hooks", () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+        </CardHeader>
+      </Card>,
+    );
+    expect(container.querySelector("[data-slot='card']")).toBeInTheDocument();
+    expect(container.querySelector("[data-slot='card-header']")).toBeInTheDocument();
+  });
+
+  it("merges a consumer className on every part", () => {
+    const { container } = render(<Card className="max-w-sm">Content</Card>);
+    const card = container.querySelector("[data-slot='card']");
+    expect(card).toHaveClass("max-w-sm", "bg-card");
+  });
+
+  it("forwards arbitrary props", () => {
+    render(<Card data-testid="card">Content</Card>);
+    expect(screen.getByTestId("card")).toBeInTheDocument();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Create project</CardTitle>
+          <CardDescription>Projects group your deployments.</CardDescription>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+      </Card>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/card/card.tsx

@@ -0,0 +1,81 @@
+import { Slot } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/** Surface that groups related content and actions. */
+export function Card({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6 pt-6 pb-4", className)}
+      {...props}
+    />
+  );
+}
+
+export interface CardTitleProps extends ComponentPropsWithRef<"h3"> {
+  /**
+   * Renders the child element instead of an `<h3>`.
+   *
+   * A card title is an `h3` because that is right in most layouts, and wrong in
+   * some — heading levels have to increase by one, and a card sitting directly
+   * under an `h1` needs an `h2`. Use this to set the level the page actually
+   * requires, or to render something that is not a heading at all.
+   */
+  asChild?: boolean;
+}
+
+export function CardTitle({ className, asChild, children, ...props }: CardTitleProps) {
+  const Comp = asChild ? Slot.Root : "h3";
+
+  // `children` is destructured rather than spread so static analysis can see
+  // that the heading has content — a heading that renders empty is a real
+  // accessibility defect, and we want the linter able to catch it at call sites.
+  return (
+    <Comp
+      data-slot="card-title"
+      className={cn("text-lg leading-tight font-semibold tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export function CardDescription({ className, ...props }: ComponentPropsWithRef<"p">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardContent({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return <div data-slot="card-content" className={cn("px-6 pb-6", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center gap-3 border-t border-border px-6 py-4", className)}
+      {...props}
+    />
+  );
+}

package/src/components/card/index.ts

@@ -0,0 +1,9 @@
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  type CardTitleProps,
+} from "./card";

package/src/components/card/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "card",
+  title: "Card",
+  description: "A surface that groups related content and actions into a single block.",
+  category: "display",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["card.tsx"],
+  a11y:
+    "Card renders a plain div with no implicit landmark. CardTitle is an h3 by default — use " +
+    "asChild to set the level the page actually needs, since heading levels must increase by one, " +
+    "or to render something that is not a heading at all.",
+});