@dowel-ui/react 0.1.0

package/src/components/badge/badge.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing, iconSlot } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  cn(
+    "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border font-medium whitespace-nowrap",
+    "[&_svg:not([class*='size-'])]:size-3",
+    focusRing,
+    iconSlot,
+  ),
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border-strong bg-transparent text-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        success: "border-transparent bg-success text-success-foreground",
+        warning: "border-transparent bg-warning text-warning-foreground",
+        info: "border-transparent bg-info text-info-foreground",
+      },
+      size: {
+        sm: "h-5 px-1.5 text-2xs",
+        md: "h-6 px-2 text-xs",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends ComponentPropsWithRef<"span">, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+}
+
+/**
+ * Compact status or category marker.
+ *
+ * Colour alone never carries the meaning: the label text must say what the
+ * badge means, so the monochrome theme and colour-blind users lose nothing.
+ */
+export function Badge({ className, variant, size, asChild = false, ...props }: BadgeProps) {
+  const Comp = asChild ? Slot.Root : "span";
+  return <Comp className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+}
+
+export { badgeVariants };

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants, type BadgeProps } from "./badge";

package/src/components/badge/meta.ts

@@ -0,0 +1,15 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "badge",
+  title: "Badge",
+  description: "A compact marker for status, counts and categories.",
+  category: "display",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["badge.tsx"],
+  a11y:
+    "The badge label must convey the meaning on its own; variant colour is decoration. " +
+    "Use asChild to render an interactive badge as a link or button rather than adding handlers.",
+});

package/src/components/button/button.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ArrowRight, Plus, Trash2 } from "lucide-react";
+
+import { Button } from "./button";
+
+const meta = {
+  title: "Foundation/Button",
+  component: Button,
+  args: {
+    children: "Continue",
+    variant: "primary",
+    size: "md",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost", "destructive", "link"],
+    },
+    size: { control: "select", options: ["sm", "md", "lg", "icon", "icon-sm"] },
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    asChild: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+      <Button size="icon" aria-label="Add item">
+        <Plus />
+      </Button>
+      <Button size="icon-sm" variant="outline" aria-label="Delete item">
+        <Trash2 />
+      </Button>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button>
+        <Plus />
+        New project
+      </Button>
+      <Button variant="outline">
+        Continue
+        <ArrowRight />
+      </Button>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: { loading: true },
+};
+
+export const LoadingAcrossVariants: Story = {
+  name: "Loading (all variants)",
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button loading>Saving</Button>
+      <Button variant="secondary" loading>
+        Saving
+      </Button>
+      <Button variant="outline" loading>
+        Saving
+      </Button>
+      <Button variant="destructive" loading>
+        Deleting
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const AsLink: Story = {
+  name: "asChild (renders a link)",
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Button asChild>
+      <a href="#pricing">View pricing</a>
+    </Button>
+  ),
+};
+
+/** Icon-only buttons need an accessible name; the a11y addon fails without one. */
+export const IconOnly: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button size="icon" aria-label="Add item">
+        <Plus />
+      </Button>
+      <Button size="icon" variant="outline" aria-label="Delete item">
+        <Trash2 />
+      </Button>
+    </div>
+  ),
+};

package/src/components/button/button.test.tsx

@@ -0,0 +1,224 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders its children inside a button element", () => {
+    render(<Button>Continue</Button>);
+    expect(screen.getByRole("button", { name: "Continue" })).toBeInTheDocument();
+  });
+
+  it("applies the default variant and size", () => {
+    render(<Button>Save</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("bg-primary");
+    expect(button).toHaveClass("h-9");
+  });
+
+  it.each([
+    ["secondary", "bg-secondary"],
+    ["outline", "border-input"],
+    ["ghost", "hover:bg-accent"],
+    ["destructive", "bg-destructive"],
+    ["link", "underline-offset-4"],
+  ] as const)("applies the %s variant", (variant, expectedClass) => {
+    render(<Button variant={variant}>Action</Button>);
+    expect(screen.getByRole("button")).toHaveClass(expectedClass);
+  });
+
+  it.each([
+    ["sm", "h-8"],
+    ["md", "h-9"],
+    ["lg", "h-10"],
+    ["icon", "size-9"],
+  ] as const)("applies the %s size", (size, expectedClass) => {
+    render(
+      <Button size={size} aria-label="Action">
+        A
+      </Button>,
+    );
+    expect(screen.getByRole("button")).toHaveClass(expectedClass);
+  });
+
+  it("drops box sizing for the link variant so it aligns with surrounding text", () => {
+    render(
+      <Button variant="link" size="md">
+        Read more
+      </Button>,
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("h-auto");
+    expect(button).not.toHaveClass("h-9");
+  });
+
+  it("lets a consumer className override a conflicting variant utility", () => {
+    render(<Button className="h-20 bg-card">Tall</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("h-20", "bg-card");
+    expect(button).not.toHaveClass("h-9");
+    expect(button).not.toHaveClass("bg-primary");
+  });
+
+  it("forwards a ref to the underlying element", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Save</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("forwards arbitrary props", () => {
+    render(
+      <Button type="submit" data-testid="submit">
+        Submit
+      </Button>,
+    );
+    expect(screen.getByTestId("submit")).toHaveAttribute("type", "submit");
+  });
+
+  it("calls onClick when activated with a pointer", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>Save</Button>);
+
+    await user.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("activates on Enter and Space from the keyboard", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>Save</Button>);
+
+    await user.tab();
+    expect(screen.getByRole("button")).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    await user.keyboard(" ");
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  describe("disabled", () => {
+    it("sets the disabled attribute and blocks activation", async () => {
+      const onClick = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <Button disabled onClick={onClick}>
+          Save
+        </Button>,
+      );
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+      await user.click(button);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("loading", () => {
+    it("exposes a busy, disabled state to assistive technology", () => {
+      render(<Button loading>Save</Button>);
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-busy", "true");
+      expect(button).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("renders a spinner alongside the label", () => {
+      const { container } = render(<Button loading>Save</Button>);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+    });
+
+    it("blocks activation", async () => {
+      const onClick = vi.fn();
+      const user = userEvent.setup();
+      render(
+        <Button loading onClick={onClick}>
+          Save
+        </Button>,
+      );
+
+      await user.click(screen.getByRole("button"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it("scales the spinner with the button size", () => {
+      const { container: large } = render(
+        <Button loading size="lg">
+          Save
+        </Button>,
+      );
+      expect(large.querySelector("svg")).toHaveClass("size-5");
+
+      const { container: small } = render(
+        <Button loading size="sm">
+          Save
+        </Button>,
+      );
+      expect(small.querySelector("svg")).toHaveClass("size-3.5");
+    });
+
+    it("stays focusable, so the user's keyboard position is not lost", async () => {
+      const user = userEvent.setup();
+      render(<Button loading>Save</Button>);
+
+      await user.tab();
+      expect(screen.getByRole("button")).toHaveFocus();
+    });
+
+    it("does not submit the form it belongs to", async () => {
+      const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
+      const user = userEvent.setup();
+      render(
+        <form onSubmit={onSubmit}>
+          <Button type="submit" loading>
+            Save
+          </Button>
+        </form>,
+      );
+
+      await user.click(screen.getByRole("button"));
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("asChild", () => {
+    it("renders the child element instead of a button", () => {
+      render(
+        <Button asChild>
+          <a href="/pricing">Pricing</a>
+        </Button>,
+      );
+
+      const link = screen.getByRole("link", { name: "Pricing" });
+      expect(link).toHaveAttribute("href", "/pricing");
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("passes its styles down to the child", () => {
+      render(
+        <Button asChild variant="destructive">
+          <a href="/delete">Delete</a>
+        </Button>,
+      );
+      expect(screen.getByRole("link")).toHaveClass("bg-destructive");
+    });
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <>
+        <Button>Save</Button>
+        <Button variant="outline" loading>
+          Loading
+        </Button>
+        <Button size="icon" aria-label="Close">
+          x
+        </Button>
+      </>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/button/button.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type { ComponentPropsWithRef, MouseEvent } from "react";
+
+import { Spinner } from "@/components/spinner";
+import { disabledStyles, focusRing, iconSlot } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  cn(
+    "inline-flex shrink-0 items-center justify-center font-medium whitespace-nowrap select-none",
+    "transition-[background-color,border-color,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+    focusRing,
+    disabledStyles,
+    iconSlot,
+  ),
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-accent active:bg-border",
+        outline:
+          "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary",
+        ghost:
+          "text-foreground hover:bg-accent hover:text-accent-foreground active:bg-secondary",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-8 gap-1.5 rounded-md px-3 text-sm",
+        md: "h-9 gap-2 rounded-md px-4 text-sm",
+        lg: "h-10 gap-2 rounded-lg px-5 text-base",
+        icon: "size-9 rounded-md",
+        "icon-sm": "size-8 rounded-md",
+      },
+    },
+    compoundVariants: [
+      // A link has no box, so box padding and height would only misalign it.
+      { variant: "link", size: "sm", className: "h-auto px-0" },
+      { variant: "link", size: "md", className: "h-auto px-0" },
+      { variant: "link", size: "lg", className: "h-auto px-0" },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends ComponentPropsWithRef<"button">, VariantProps<typeof buttonVariants> {
+  /**
+   * Renders the child element as the button instead of a `<button>`, keeping
+   * every style and behaviour. Use it for links that should look like buttons.
+   */
+  asChild?: boolean;
+  /**
+   * Shows a spinner and suppresses activation.
+   *
+   * Unlike `disabled`, a loading button stays focusable: taking focus away from
+   * the control a user just activated strands their keyboard position, and the
+   * state is transient by definition. Activation is blocked via `aria-disabled`
+   * plus a guarded click handler.
+   */
+  loading?: boolean;
+}
+
+/** Triggers an action or event. */
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  disabled,
+  onClick,
+  children,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
+    if (loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClick?.(event);
+  }
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size }), className)}
+      disabled={disabled}
+      aria-disabled={loading || undefined}
+      aria-busy={loading || undefined}
+      data-loading={loading || undefined}
+      onClick={handleClick}
+      {...props}
+    >
+      {loading ? <Spinner size={size === "lg" ? "lg" : "sm"} /> : null}
+      {/* Slottable marks which child Slot should merge into when asChild is set.
+          Without it, adding the spinner would give Slot two children and break
+          every `asChild` button the moment it started loading. */}
+      <Slot.Slottable>{children}</Slot.Slottable>
+    </Comp>
+  );
+}
+
+export { buttonVariants };

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants, type ButtonProps } from "./button";

package/src/components/button/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "button",
+  title: "Button",
+  description: "Triggers an action or event, with variants for every level of emphasis.",
+  category: "foundation",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: ["spinner"],
+  files: ["button.tsx"],
+  a11y:
+    "Keyboard activatable via Enter and Space. The loading state uses aria-disabled and " +
+    "aria-busy rather than the disabled attribute, so focus is never stranded mid-action. " +
+    'Use `size="icon"` only with an accessible name from aria-label or visually hidden text.',
+});

package/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { Calendar } from "./calendar";
+
+const JANUARY_2026 = new Date(2026, 0, 1);
+
+const meta = {
+  title: "Forms/Calendar",
+  component: Calendar,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  render: function Default() {
+    const [date, setDate] = useState<Date | undefined>(new Date(2026, 0, 15));
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2026}
+        selected={date}
+        onSelect={setDate}
+        className="rounded-lg border border-border"
+      />
+    );
+  },
+};
+
+export const Range: Story = {
+  render: function Range() {
+    const [range, setRange] = useState<DateRange | undefined>({
+      from: new Date(2026, 0, 10),
+      to: new Date(2026, 0, 16),
+    });
+    return (
+      <Calendar
+        mode="range"
+        defaultMonth={JANUARY_2026}
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={2}
+        className="rounded-lg border border-border"
+      />
+    );
+  },
+};
+
+export const Multiple: Story = {
+  render: function Multiple() {
+    const [days, setDays] = useState<Date[] | undefined>([
+      new Date(2026, 0, 6),
+      new Date(2026, 0, 13),
+      new Date(2026, 0, 20),
+    ]);
+    return (
+      <Calendar
+        mode="multiple"
+        defaultMonth={JANUARY_2026}
+        selected={days}
+        onSelect={setDays}
+        className="rounded-lg border border-border"
+      />
+    );
+  },
+};
+
+/** Past dates are disabled — useful for scheduling. */
+export const WithDisabledDates: Story = {
+  render: () => (
+    <Calendar
+      mode="single"
+      defaultMonth={JANUARY_2026}
+      disabled={{ before: new Date(2026, 0, 12) }}
+      className="rounded-lg border border-border"
+    />
+  ),
+};
+
+export const WithDropdownNavigation: Story = {
+  render: () => (
+    <Calendar
+      mode="single"
+      defaultMonth={JANUARY_2026}
+      captionLayout="dropdown"
+      startMonth={new Date(2020, 0)}
+      endMonth={new Date(2030, 11)}
+      className="rounded-lg border border-border"
+    />
+  ),
+};
+
+export const WithoutOutsideDays: Story = {
+  render: () => (
+    <Calendar
+      mode="single"
+      defaultMonth={JANUARY_2026}
+      showOutsideDays={false}
+      className="rounded-lg border border-border"
+    />
+  ),
+};