@dowel-ui/react 0.1.0

package/src/components/separator/separator.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Separator } from "./separator";
+
+describe("Separator", () => {
+  it("is decorative by default and stays out of the accessibility tree", () => {
+    render(<Separator data-testid="rule" />);
+    expect(screen.getByTestId("rule")).toHaveAttribute("role", "none");
+    expect(screen.queryByRole("separator")).not.toBeInTheDocument();
+  });
+
+  it("exposes a separator role when it is not decorative", () => {
+    render(<Separator decorative={false} />);
+    expect(screen.getByRole("separator")).toBeInTheDocument();
+  });
+
+  it("renders horizontally by default", () => {
+    render(<Separator data-testid="rule" />);
+    expect(screen.getByTestId("rule")).toHaveClass("h-px", "w-full");
+  });
+
+  it("renders vertically when asked", () => {
+    render(<Separator orientation="vertical" data-testid="rule" />);
+    const rule = screen.getByTestId("rule");
+    expect(rule).toHaveClass("w-px", "h-full");
+    expect(rule).toHaveAttribute("data-orientation", "vertical");
+  });
+
+  it("merges a consumer className", () => {
+    render(<Separator className="my-4" data-testid="rule" />);
+    expect(screen.getByTestId("rule")).toHaveClass("my-4", "bg-border");
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <div>
+        <p>Above</p>
+        <Separator decorative={false} />
+        <p>Below</p>
+      </div>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/separator/separator.tsx

@@ -0,0 +1,33 @@
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SeparatorProps = ComponentPropsWithRef<typeof SeparatorPrimitive.Root>;
+
+/**
+ * Visual or semantic divider.
+ *
+ * Defaults to decorative, which removes it from the accessibility tree. Pass
+ * `decorative={false}` only when the rule genuinely separates two groups of
+ * content that a screen reader user needs to know are distinct.
+ */
+export function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive.Root
+      orientation={orientation}
+      decorative={decorative}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/sheet/index.ts

@@ -0,0 +1,14 @@
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetVariants,
+  type SheetContentProps,
+} from "./sheet";

package/src/components/sheet/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "sheet",
+  title: "Sheet",
+  description: "A panel that enters from an edge of the viewport for secondary content.",
+  category: "overlay",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["sheet.tsx"],
+  a11y:
+    "Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. " +
+    "For a side navigation sheet, put a nav landmark inside rather than relying on placement " +
+    "to convey the role.",
+});

package/src/components/sheet/sheet.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+const meta = {
+  title: "Overlays/Sheet",
+  component: SheetContent,
+  args: { side: "right" },
+  argTypes: {
+    side: { control: "inline-radio", options: ["top", "right", "bottom", "left"] },
+  },
+} satisfies Meta<typeof SheetContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open sheet</Button>
+      </SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Changes are saved when you close the sheet.</SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="sheet-name">Name</Label>
+            <Input id="sheet-name" defaultValue="Ada Lovelace" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button>Done</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const Sides: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>From the {side}</SheetTitle>
+              <SheetDescription>Sheets can enter from any edge.</SheetDescription>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+};
+
+/** A navigation sheet carries a nav landmark; placement alone conveys nothing. */
+export const Navigation: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Menu</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+        </SheetHeader>
+        <nav aria-label="Main">
+          <ul className="grid gap-1 text-sm">
+            {["Overview", "Projects", "Deployments", "Settings"].map((item) => (
+              <li key={item}>
+                <a
+                  href={`#${item.toLowerCase()}`}
+                  className="block rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground"
+                >
+                  {item}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/components/sheet/sheet.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Button } from "../button";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  type SheetContentProps,
+} from "./sheet";
+
+function Example({ side }: { side?: SheetContentProps["side"] } = {}) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>Open</Button>
+      </SheetTrigger>
+      <SheetContent side={side}>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Changes are saved immediately.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="outline">Done</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+describe("Sheet", () => {
+  it("opens from its trigger and is named by its title", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(await screen.findByRole("dialog", { name: "Edit profile" })).toBeInTheDocument();
+  });
+
+  it.each([
+    ["top", "[--slide-y:-100%]"],
+    ["bottom", "[--slide-y:100%]"],
+    ["left", "[--slide-x:-100%]"],
+    ["right", "[--slide-x:100%]"],
+  ] as const)("slides in from the %s", async (side, expectedClass) => {
+    const user = userEvent.setup();
+    render(<Example side={side} />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(await screen.findByRole("dialog")).toHaveClass(expectedClass);
+  });
+
+  it("defaults to the right edge", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    expect(await screen.findByRole("dialog")).toHaveClass("[--slide-x:100%]");
+  });
+
+  it("closes on Escape and restores focus", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("button", { name: "Open" });
+    await user.click(trigger);
+    await screen.findByRole("dialog");
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+  });
+
+  it("closes from SheetClose", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await user.click(screen.getByRole("button", { name: "Done" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("omits the close button when asked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent showCloseButton={false}>
+          <SheetTitle>No close button</SheetTitle>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("dialog");
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+
+  it("closes from the built-in close button", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("lets a consumer className override the width", async () => {
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open</SheetTrigger>
+        <SheetContent className="max-w-2xl">
+          <SheetTitle>Wide</SheetTitle>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    await user.click(screen.getByText("Open"));
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveClass("max-w-2xl");
+    expect(dialog).not.toHaveClass("max-w-sm");
+  });
+
+  it("has no accessibility violations while open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await screen.findByRole("dialog");
+
+    await expectNoA11yViolations(baseElement);
+  });
+});

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * A panel that enters from an edge of the viewport.
+ *
+ * Built on the same modal primitive as Dialog, so focus management, Escape
+ * handling and page inerting are identical; only the placement and motion
+ * differ. Reach for Sheet when the content is a secondary surface — filters,
+ * details, navigation — rather than a decision that must be answered.
+ */
+export const Sheet = SheetPrimitive.Root;
+export const SheetTrigger = SheetPrimitive.Trigger;
+export const SheetPortal = SheetPrimitive.Portal;
+export const SheetClose = SheetPrimitive.Close;
+
+export function SheetOverlay({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+        "data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const sheetVariants = cva(
+  cn(
+    "fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-card p-6 text-card-foreground shadow-xl",
+    "data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in",
+  ),
+  {
+    variants: {
+      // --slide-x/--slide-y feed the shared slide keyframes, so all four sides
+      // reuse one animation pair instead of eight bespoke keyframes.
+      side: {
+        top: "inset-x-0 top-0 border-b [--slide-y:-100%]",
+        bottom: "inset-x-0 bottom-0 border-t [--slide-y:100%]",
+        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]",
+        right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+export interface SheetContentProps
+  extends
+    ComponentPropsWithRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  showCloseButton?: boolean;
+}
+
+export function SheetContent({
+  className,
+  children,
+  side,
+  showCloseButton = true,
+  ...props
+}: SheetContentProps) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            aria-label="Close"
+            className={cn(
+              "absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground",
+              "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
+              "[&_svg]:size-4",
+              focusRing,
+            )}
+          >
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path
+                d="m6 6 12 12M18 6 6 18"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </SheetPrimitive.Close>
+        ) : null}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+export function SheetHeader({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 pr-8 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetFooter({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        "mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SheetTitle({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-lg leading-tight font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetDescription({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { sheetVariants };

package/src/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton";

package/src/components/skeleton/meta.ts

@@ -0,0 +1,15 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "skeleton",
+  title: "Skeleton",
+  description: "A shaped placeholder that holds layout while content loads.",
+  category: "feedback",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: [],
+  files: ["skeleton.tsx"],
+  a11y:
+    "Hidden from assistive technology. Put aria-busy on the container that owns the loading " +
+    "data so the state is announced once instead of once per placeholder.",
+});

package/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Card, CardContent, CardHeader } from "@/components/card";
+
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "Feedback/Skeleton",
+  component: Skeleton,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-48" />,
+};
+
+export const Shapes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Skeleton className="size-10 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+    </div>
+  ),
+};
+
+/** aria-busy belongs on the region that owns the data, not on each placeholder. */
+export const LoadingCard: Story = {
+  render: () => (
+    <Card className="w-80" aria-busy="true" aria-label="Loading project">
+      <CardHeader className="gap-3">
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-4/5" />
+      </CardContent>
+    </Card>
+  ),
+};

package/src/components/skeleton/skeleton.test.tsx

@@ -0,0 +1,57 @@
+import { render } from "@testing-library/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton", () => {
+  it("is hidden from assistive technology", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.querySelector("[data-slot='skeleton']")).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    );
+  });
+
+  it("animates", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild).toHaveClass("animate-pulse-soft");
+  });
+
+  it("takes its shape from the consumer className", () => {
+    const { container } = render(<Skeleton className="h-4 w-32 rounded-full" />);
+    const skeleton = container.firstElementChild;
+    expect(skeleton).toHaveClass("h-4", "w-32", "rounded-full");
+    expect(skeleton).not.toHaveClass("rounded-md");
+  });
+
+  it("survives HTML parsing inside a paragraph", () => {
+    // A skeleton stands in for content, so it lands inside paragraphs, labels
+    // and headings — all of which accept phrasing content only. A `div` there
+    // is invalid, and the parser closes the paragraph early to correct it, so
+    // the server HTML and the client tree disagree and hydration fails.
+    //
+    // Rendering through the real parser is what makes this catchable: React
+    // builds the DOM with appendChild and never applies parsing rules, so
+    // `render` alone reproduces neither the correction nor the failure.
+    const host = document.createElement("div");
+    host.innerHTML = renderToStaticMarkup(
+      <p>
+        <Skeleton className="h-7 w-24" />
+      </p>,
+    );
+
+    const skeleton = host.querySelector("[data-slot='skeleton']");
+    expect(skeleton?.parentElement?.tagName).toBe("P");
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <div aria-busy="true">
+        <Skeleton className="h-4 w-32" />
+      </div>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,28 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Placeholder shown while content loads.
+ *
+ * Rendered aria-hidden: the shape is meaningless to a screen reader, and the
+ * loading state belongs on the region that owns the data (via aria-busy) rather
+ * than on each individual placeholder.
+ *
+ * A `span` set to `display: block`, not a `div`. A skeleton stands in for
+ * whatever was going to be there, so it gets placed inside paragraphs, headings
+ * and labels as often as inside layout containers — and a `div` inside a `p` is
+ * invalid HTML that the parser corrects, which breaks hydration rather than
+ * merely looking wrong. Phrasing content is valid in both places, and `block`
+ * keeps the box behaviour identical.
+ */
+export function Skeleton({ className, ...props }: ComponentPropsWithRef<"span">) {
+  return (
+    <span
+      data-slot="skeleton"
+      aria-hidden="true"
+      className={cn("block animate-pulse-soft rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}

package/src/components/slider/index.ts

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from "./slider";