@dowel-ui/react 0.1.0

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "@/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/card";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+/**
+ * Annotated rather than inferred with `satisfies`. These components are direct
+ * re-exports of Radix primitives, and inferring the meta type makes the emitted
+ * declaration reference Radix-internal prop types that are not nameable from
+ * this path (TS2883).
+ */
+const meta: Meta<typeof Tabs> = {
+  title: "Navigation/Tabs",
+  component: Tabs,
+  parameters: { controls: { disable: true } },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-96">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>Update your account details.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2">
+            <Label htmlFor="tabs-name">Name</Label>
+            <Input id="tabs-name" defaultValue="Ada Lovelace" />
+          </CardContent>
+          <CardFooter className="justify-end">
+            <Button>Save</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>Change your password here.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-2">
+            <Label htmlFor="tabs-password">New password</Label>
+            <Input id="tabs-password" type="password" />
+          </CardContent>
+          <CardFooter className="justify-end">
+            <Button>Update password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Underline: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-96">
+      <TabsList variant="underline">
+        <TabsTrigger value="overview" variant="underline">
+          Overview
+        </TabsTrigger>
+        <TabsTrigger value="deployments" variant="underline">
+          Deployments
+        </TabsTrigger>
+        <TabsTrigger value="settings" variant="underline">
+          Settings
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className="text-sm text-muted-foreground">
+        Traffic, errors and latency for the last 24 hours.
+      </TabsContent>
+      <TabsContent value="deployments" className="text-sm text-muted-foreground">
+        42 deployments this week.
+      </TabsContent>
+      <TabsContent value="settings" className="text-sm text-muted-foreground">
+        Environment variables and build settings.
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs defaultValue="general" className="w-96">
+      <TabsList>
+        <TabsTrigger value="general">General</TabsTrigger>
+        <TabsTrigger value="team">Team</TabsTrigger>
+        <TabsTrigger value="billing" disabled>
+          Billing
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="general" className="text-sm text-muted-foreground">
+        General settings.
+      </TabsContent>
+      <TabsContent value="team" className="text-sm text-muted-foreground">
+        Invite and manage teammates.
+      </TabsContent>
+      <TabsContent value="billing" className="text-sm text-muted-foreground">
+        Upgrade to manage billing.
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** Manual activation stops arrow keys from loading each panel in passing. */
+export const ManualActivation: Story = {
+  render: () => (
+    <Tabs defaultValue="one" activationMode="manual" className="w-96">
+      <TabsList>
+        <TabsTrigger value="one">Expensive one</TabsTrigger>
+        <TabsTrigger value="two">Expensive two</TabsTrigger>
+      </TabsList>
+      <TabsContent value="one" className="text-sm text-muted-foreground">
+        Arrow to the next tab, then press Enter or Space to load it.
+      </TabsContent>
+      <TabsContent value="two" className="text-sm text-muted-foreground">
+        Loaded on purpose, not in passing.
+      </TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/tabs/tabs.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Tabs, TabsContent, TabsList, TabsTrigger, type TabsListProps } from "./tabs";
+
+function Example({
+  variant,
+  onValueChange,
+  activationMode,
+}: {
+  variant?: TabsListProps["variant"];
+  onValueChange?: (value: string) => void;
+  activationMode?: "automatic" | "manual";
+} = {}) {
+  return (
+    <Tabs defaultValue="account" onValueChange={onValueChange} activationMode={activationMode}>
+      <TabsList variant={variant}>
+        <TabsTrigger value="account" variant={variant}>
+          Account
+        </TabsTrigger>
+        <TabsTrigger value="password" variant={variant}>
+          Password
+        </TabsTrigger>
+        <TabsTrigger value="team" variant={variant} disabled>
+          Team
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">Account panel</TabsContent>
+      <TabsContent value="password">Password panel</TabsContent>
+      <TabsContent value="team">Team panel</TabsContent>
+    </Tabs>
+  );
+}
+
+describe("Tabs", () => {
+  it("shows only the active panel", () => {
+    render(<Example />);
+    expect(screen.getByText("Account panel")).toBeInTheDocument();
+    expect(screen.queryByText("Password panel")).not.toBeInTheDocument();
+  });
+
+  it("marks the active tab as selected", () => {
+    render(<Example />);
+    expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("tab", { name: "Password" })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  it("switches panels on click", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("tab", { name: "Password" }));
+    expect(screen.getByText("Password panel")).toBeInTheDocument();
+    expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
+  });
+
+  it("moves between tabs with the arrow keys", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("tab", { name: "Account" }));
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByRole("tab", { name: "Password" })).toHaveFocus();
+    expect(screen.getByText("Password panel")).toBeInTheDocument();
+  });
+
+  it("keeps only the active tab in the tab sequence", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.tab();
+    expect(screen.getByRole("tab", { name: "Account" })).toHaveFocus();
+
+    // A second Tab leaves the tablist entirely rather than visiting each tab.
+    await user.tab();
+    expect(screen.getByRole("tab", { name: "Password" })).not.toHaveFocus();
+  });
+
+  it("skips disabled tabs when arrowing", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("tab", { name: "Password" }));
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByRole("tab", { name: "Team" })).not.toHaveFocus();
+  });
+
+  it("defers activation in manual mode", async () => {
+    const user = userEvent.setup();
+    render(<Example activationMode="manual" />);
+
+    await user.click(screen.getByRole("tab", { name: "Account" }));
+    await user.keyboard("{ArrowRight}");
+
+    expect(screen.getByRole("tab", { name: "Password" })).toHaveFocus();
+    expect(screen.getByText("Account panel")).toBeInTheDocument();
+
+    await user.keyboard("{Enter}");
+    expect(screen.getByText("Password panel")).toBeInTheDocument();
+  });
+
+  it("reports value changes", async () => {
+    const onValueChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Example onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("tab", { name: "Password" }));
+    expect(onValueChange).toHaveBeenCalledWith("password");
+  });
+
+  it.each([
+    ["solid", "bg-muted"],
+    ["underline", "border-b"],
+  ] as const)("applies the %s list variant", (variant, expectedClass) => {
+    render(<Example variant={variant} />);
+    expect(screen.getByRole("tablist")).toHaveClass(expectedClass);
+  });
+
+  it("lets a consumer className override a conflicting utility", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList className="bg-card">
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel</TabsContent>
+      </Tabs>,
+    );
+
+    const list = screen.getByRole("tablist");
+    expect(list).toHaveClass("bg-card");
+    expect(list).not.toHaveClass("bg-muted");
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Example />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * Switches between panels of related content.
+ *
+ * Tabs are for alternate views of the same subject, not for steps in a process
+ * — a user can leave a tab and come back with nothing lost. Activation is
+ * automatic on arrow keys by default; pass `activationMode="manual"` when
+ * revealing a panel is expensive.
+ */
+export const Tabs = TabsPrimitive.Root;
+
+const tabsListVariants = cva("inline-flex items-center", {
+  variants: {
+    variant: {
+      /** Pill track. Reads as a segmented control. */
+      solid: "gap-1 rounded-lg bg-muted p-1",
+      /** Underlined. Reads as page-level navigation between views. */
+      underline: "gap-4 border-b border-border",
+    },
+  },
+  defaultVariants: {
+    variant: "solid",
+  },
+});
+
+const tabsTriggerVariants = cva(
+  cn(
+    "inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap",
+    "transition-colors duration-[var(--duration-fast)]",
+    "disabled:pointer-events-none disabled:opacity-55",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    focusRing,
+  ),
+  {
+    variants: {
+      variant: {
+        solid: cn(
+          "h-7 rounded-md px-3 text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs",
+        ),
+        underline: cn(
+          "-mb-px h-9 border-b-2 border-transparent px-0.5 text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:border-primary data-[state=active]:text-foreground",
+        ),
+      },
+    },
+    defaultVariants: {
+      variant: "solid",
+    },
+  },
+);
+
+export interface TabsListProps
+  extends
+    ComponentPropsWithRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {}
+
+export function TabsList({ className, variant, ...props }: TabsListProps) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant ?? "solid"}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export interface TabsTriggerProps
+  extends
+    ComponentPropsWithRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+export function TabsTrigger({ className, variant, ...props }: TabsTriggerProps) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export type TabsContentProps = ComponentPropsWithRef<typeof TabsPrimitive.Content>;
+
+export function TabsContent({ className, ...props }: TabsContentProps) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("mt-4 outline-none", focusRing, className)}
+      {...props}
+    />
+  );
+}
+
+export { tabsListVariants, tabsTriggerVariants };

package/src/components/toast/index.ts

@@ -0,0 +1,24 @@
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  Toaster,
+  toastVariants,
+  type ToastPosition,
+  type ToastProps,
+  type ToasterProps,
+} from "./toast";
+export {
+  DEFAULT_TOAST_DURATION,
+  TOAST_LIMIT,
+  toast,
+  useToasts,
+  type ToastAction as ToastActionOptions,
+  type ToastOptions,
+  type ToastPromiseMessages,
+  type ToastRecord,
+  type ToastVariant,
+} from "./toast-store";

package/src/components/toast/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "toast",
+  title: "Toast",
+  description: "Brief, non-blocking messages with an imperative API callable from anywhere.",
+  category: "feedback",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["toast-store.ts", "toast.tsx"],
+  a11y:
+    "Toasts are announced through a live region: destructive and warning variants interrupt " +
+    "(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, " +
+    "focus and window blur, and F8 moves focus into the toast list from anywhere. An action " +
+    "must carry altText describing how to do the same thing without the toast, since it may " +
+    "be gone before a screen reader user reaches it.",
+});

package/src/components/toast/toast-store.ts

@@ -0,0 +1,181 @@
+"use client";
+
+import { useSyncExternalStore, type ReactNode } from "react";
+
+/**
+ * Toast state, kept outside React.
+ *
+ * A toast is usually raised from somewhere that is not a component — a fetch
+ * handler, a mutation callback, a websocket message. Holding the queue in a
+ * plain module-level store means `toast()` is callable from anywhere, while
+ * `useToasts()` still gives components a properly-subscribed, concurrent-safe
+ * read via useSyncExternalStore.
+ *
+ * Dismiss *timing* deliberately lives in the component layer, not here: the
+ * underlying primitive already pauses timers on hover, focus and window blur,
+ * and reimplementing that in the store would only fight it.
+ */
+
+export type ToastVariant = "default" | "success" | "warning" | "destructive" | "info";
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+  /**
+   * Announced instead of the label, describing how to do the same thing without
+   * the toast (which may vanish before assistive technology reaches it).
+   * Defaults to the label.
+   */
+  altText?: string;
+}
+
+export interface ToastOptions {
+  id?: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  variant?: ToastVariant;
+  /** Milliseconds before auto-dismiss. `Infinity` keeps it until dismissed. */
+  duration?: number;
+  action?: ToastAction;
+  onDismiss?: (id: string) => void;
+}
+
+export interface ToastRecord extends ToastOptions {
+  id: string;
+  variant: ToastVariant;
+}
+
+/** Beyond a handful, toasts stop being read and start being dismissed. */
+export const TOAST_LIMIT = 4;
+
+export const DEFAULT_TOAST_DURATION = 5000;
+
+let toasts: ToastRecord[] = [];
+let nextId = 0;
+
+const listeners = new Set<() => void>();
+
+function emit(next: ToastRecord[]) {
+  toasts = next;
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot(): ToastRecord[] {
+  return toasts;
+}
+
+/** Subscribed read of the current queue. */
+export function useToasts(): ToastRecord[] {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+function add(options: ToastOptions): string {
+  nextId += 1;
+  const id = options.id ?? `toast-${String(nextId)}`;
+  const record: ToastRecord = { variant: "default", ...options, id };
+
+  // Newest first, oldest past the limit dropped.
+  emit([record, ...toasts.filter((existing) => existing.id !== id)].slice(0, TOAST_LIMIT));
+  return id;
+}
+
+function update(id: string, options: Partial<ToastOptions>): void {
+  emit(toasts.map((existing) => (existing.id === id ? { ...existing, ...options } : existing)));
+}
+
+function dismiss(id: string): void {
+  const target = toasts.find((existing) => existing.id === id);
+  emit(toasts.filter((existing) => existing.id !== id));
+  target?.onDismiss?.(id);
+}
+
+function dismissAll(): void {
+  const current = toasts;
+  emit([]);
+  for (const record of current) record.onDismiss?.(record.id);
+}
+
+export interface ToastPromiseMessages<T> {
+  loading: ReactNode;
+  success: ReactNode | ((value: T) => ReactNode);
+  error: ReactNode | ((error: unknown) => ReactNode);
+}
+
+function resolveMessage<T>(
+  message: ReactNode | ((value: T) => ReactNode),
+  value: T,
+): ReactNode {
+  return typeof message === "function" ? (message as (value: T) => ReactNode)(value) : message;
+}
+
+/**
+ * Shows a pending toast that resolves into a success or error toast.
+ *
+ * Returns the original promise so it stays awaitable and rejections are not
+ * swallowed — the toast is a side effect of the promise, not a replacement for
+ * handling it.
+ */
+function promise<T>(input: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T> {
+  const id = add({ title: messages.loading, duration: Infinity });
+
+  input.then(
+    (value) => {
+      update(id, {
+        title: resolveMessage(messages.success, value),
+        variant: "success",
+        duration: DEFAULT_TOAST_DURATION,
+      });
+    },
+    (error: unknown) => {
+      update(id, {
+        title: resolveMessage(messages.error, error),
+        variant: "destructive",
+        duration: DEFAULT_TOAST_DURATION,
+      });
+    },
+  );
+
+  return input;
+}
+
+function withVariant(variant: ToastVariant) {
+  return (title: ReactNode, options: Omit<ToastOptions, "title" | "variant"> = {}) =>
+    add({ ...options, title, variant });
+}
+
+/**
+ * Raises a toast from anywhere — no hook, no provider lookup.
+ *
+ *   toast.success("Project created");
+ *   toast.error("Could not save", { description: "Check your connection." });
+ *   await toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Failed" });
+ */
+export const toast = Object.assign(
+  (title: ReactNode, options: Omit<ToastOptions, "title"> = {}) => add({ ...options, title }),
+  {
+    default: withVariant("default"),
+    success: withVariant("success"),
+    error: withVariant("destructive"),
+    warning: withVariant("warning"),
+    info: withVariant("info"),
+    custom: add,
+    update,
+    dismiss,
+    dismissAll,
+    promise,
+  },
+);
+
+/** Test-only reset. Not exported from the package index. */
+export function resetToasts(): void {
+  toasts = [];
+  nextId = 0;
+  for (const listener of listeners) listener();
+}