@dtsports/design-system 0.2.0

package/src/components/status-pill.tsx

@@ -0,0 +1,100 @@
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+import { LivePill } from "./live-pill";
+
+/**
+ * StatusPill — per design.md §3 (game-status colors)
+ *
+ * One source of truth for game status visualization across tables, cards,
+ * detail pages. Always includes an icon/dot signal plus text so it isn't
+ * color-only.
+ *
+ * status: draft | scheduled | filling | sold_out | live | completed | cancelled
+ */
+export type GameStatus =
+  | "draft"
+  | "scheduled"
+  | "filling"
+  | "sold_out"
+  | "live"
+  | "completed"
+  | "cancelled";
+
+const labels: Record<GameStatus, string> = {
+  draft: "Draft",
+  scheduled: "Scheduled",
+  filling: "Filling",
+  sold_out: "Sold out",
+  live: "Live",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};
+
+export function StatusPill({
+  status,
+  className,
+}: {
+  status: GameStatus;
+  className?: string;
+}) {
+  if (status === "live") return <LivePill className={className} />;
+
+  if (status === "draft" || status === "completed") {
+    return (
+      <Badge
+        variant="muted-outline"
+        shape="pill"
+        className={cn("gap-1.5", className)}
+      >
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-text-subtle"
+          aria-hidden="true"
+        />
+        {labels[status]}
+      </Badge>
+    );
+  }
+
+  if (status === "scheduled") {
+    return (
+      <Badge variant="forest" shape="pill" className={className}>
+        {labels[status]}
+      </Badge>
+    );
+  }
+
+  if (status === "filling") {
+    return (
+      <Badge variant="info" shape="pill" className={className}>
+        {labels[status]}
+      </Badge>
+    );
+  }
+
+  if (status === "sold_out") {
+    return (
+      <Badge
+        shape="pill"
+        className={cn("bg-foreground text-background", className)}
+      >
+        {labels[status]}
+      </Badge>
+    );
+  }
+
+  if (status === "cancelled") {
+    return (
+      <Badge
+        shape="pill"
+        className={cn(
+          "border border-danger bg-transparent text-danger",
+          className
+        )}
+      >
+        {labels[status]}
+      </Badge>
+    );
+  }
+
+  return null;
+}

package/src/components/switch.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../lib/utils";
+
+/**
+ * Switch — for boolean settings. Use only for instantly-applied toggles
+ * (theme, notification preferences, "use credit at checkout"). Don't use
+ * Switch for form fields that need an explicit Save button — use Checkbox.
+ */
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors",
+      // Invisible hit-area extension: 24px desktop / 44px touch.
+      "relative after:absolute after:-inset-y-1 pointer-coarse:after:-inset-y-3.5 pointer-coarse:after:-inset-x-2",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-brand-forest data-[state=unchecked]:bg-border-strong",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block h-3 w-3 rounded-full bg-background shadow-sm transition-transform",
+        "data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5"
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = "Switch";

package/src/components/table.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Table primitives — per design.md §10
+ *
+ * Centerpiece component for the data-heavy UI.
+ *  - Row height: 36px compact (default) / 40px comfortable
+ *  - Header: text-xs uppercase tracking-wide muted on bg-subtle
+ *  - Cell padding: 8px / 12px
+ *  - Border: 1px bottom on rows, NO vertical borders
+ *  - Numeric columns: add `tabular text-right` to cells
+ *  - Sticky header: wrap <Table> in a scrollable parent and set <TableHeader sticky>
+ *
+ * Accessibility:
+ *  - Always provide a <caption> via <TableCaption> for screen readers (it can be visually hidden)
+ *  - Use scope="col" / scope="row" on <TableHead> / row headers
+ *  - For sortable columns, pass aria-sort on <TableHead>
+ */
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto scrollbar-thin">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm border-collapse", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & { sticky?: boolean }
+>(({ className, sticky, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(
+      "bg-bg-subtle border-b border-border",
+      sticky && "sticky top-0 z-10",
+      className
+    )}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-bg-subtle font-medium border-t border-border", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    interactive?: boolean;
+    selected?: boolean;
+  }
+>(({ className, interactive, selected, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-border transition-colors duration-150 ease-out",
+      interactive && "cursor-pointer hover:bg-bg-subtle",
+      selected && "bg-brand-lime/[0.06] border-l-2 border-l-brand-forest",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    scope="col"
+    className={cn(
+      "h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-[0.04em] text-text-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("h-9 px-3 py-2 align-middle text-sm", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-2 text-xs text-text-muted text-left", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";

package/src/components/tabs.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../lib/utils";
+
+/**
+ * Tabs — underline-style horizontal tabs.
+ *
+ *   <Tabs defaultValue="today">
+ *     <TabsList>
+ *       <TabsTrigger value="today">Today</TabsTrigger>
+ *       <TabsTrigger value="week">This week</TabsTrigger>
+ *     </TabsList>
+ *     <TabsContent value="today">…</TabsContent>
+ *     <TabsContent value="week">…</TabsContent>
+ *   </Tabs>
+ *
+ * Use for: admin time-window filters, booking status filters, settings
+ * groupings. Keyboard nav (←/→/Home/End) handled by Radix.
+ */
+export const Tabs = TabsPrimitive.Root;
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center gap-1 border-b border-border w-full",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-sm font-medium text-text-muted transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+      "hover:text-foreground",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      "data-[state=active]:text-foreground",
+      "data-[state=active]:after:absolute data-[state=active]:after:left-0 data-[state=active]:after:right-0 data-[state=active]:after:-bottom-px data-[state=active]:after:h-0.5 data-[state=active]:after:bg-brand-forest",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = "TabsContent";

package/src/components/textarea.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Textarea — multi-line text input. Same focus/error pattern as Input.
+ * Use for: house rules markdown, broadcast composer, policy notes.
+ */
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-[80px] w-full rounded-sm border border-border-strong bg-background px-2.5 py-2 text-sm text-foreground transition-colors duration-150 ease-out",
+        "placeholder:text-text-subtle",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:bg-bg-muted disabled:opacity-60",
+        "aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:ring-danger",
+        "resize-y",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Textarea.displayName = "Textarea";

package/src/components/theme-provider.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+import { TooltipProvider } from "./tooltip";
+
+/**
+ * Theme = the effective look the page is rendered in (one of
+ * "light" | "dark"). ThemePreference = the user's chosen mode
+ * ("light", "dark", or "system"). When preference is "system" the
+ * effective theme tracks the OS `prefers-color-scheme` media query
+ * and updates live as the user toggles their laptop's appearance.
+ *
+ * Storage:
+ *   - "dt-theme" persists the user's PREFERENCE (light/dark/system).
+ *     Default if unset = "system" — out-of-the-box experience matches
+ *     the laptop, no flash of wrong theme on first visit.
+ *
+ * Backward compatibility:
+ *   - `theme` is still the effective theme (consumers that read
+ *     `useTheme().theme` keep working unchanged).
+ *   - `setTheme(t)` is preserved as a shortcut for setPreference(t)
+ *     where t is "light" or "dark".
+ *   - `toggle()` is preserved and now cycles light → dark → system.
+ */
+
+type Theme = "light" | "dark";
+type ThemePreference = "light" | "dark" | "system";
+
+interface ThemeContextValue {
+  theme: Theme;
+  preference: ThemePreference;
+  setPreference: (p: ThemePreference) => void;
+  setTheme: (t: Theme) => void;
+  toggle: () => void;
+}
+
+const ThemeContext = React.createContext<ThemeContextValue | undefined>(
+  undefined
+);
+
+const STORAGE_KEY = "dt-theme";
+
+function isPreference(v: unknown): v is ThemePreference {
+  return v === "light" || v === "dark" || v === "system";
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [preference, setPreferenceState] =
+    React.useState<ThemePreference>("system");
+  const [systemTheme, setSystemTheme] = React.useState<Theme>("light");
+
+  // On mount: read stored preference + current system theme, and
+  // subscribe to system theme changes so the page updates live when
+  // the user flips macOS / Windows appearance with the app open.
+  React.useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      // SSR renders "system"; the stored preference can only be read on the
+      // client, so this one-time post-mount setState (and its extra render)
+      // is the hydration-safe path — a lazy initializer would mismatch.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      if (isPreference(stored)) setPreferenceState(stored);
+    } catch {
+      /* localStorage blocked — fall back to default "system" */
+    }
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemTheme(mql.matches ? "dark" : "light");
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    // addEventListener is the modern API; older Safari needs addListener
+    if (mql.addEventListener) {
+      mql.addEventListener("change", handler);
+      return () => mql.removeEventListener("change", handler);
+    }
+    mql.addListener(handler);
+    return () => mql.removeListener(handler);
+  }, []);
+
+  // Resolved theme: explicit override wins, else follow system.
+  const theme: Theme = preference === "system" ? systemTheme : preference;
+
+  // Apply class to <html> whenever the effective theme changes.
+  React.useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+
+  const setPreference = React.useCallback((p: ThemePreference) => {
+    setPreferenceState(p);
+    try {
+      localStorage.setItem(STORAGE_KEY, p);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  // Legacy setter — accepts "light" | "dark", routes to preference.
+  const setTheme = React.useCallback(
+    (t: Theme) => setPreference(t),
+    [setPreference]
+  );
+
+  // Cycle light → dark → system → light. Keeps a single toggle
+  // button useful while still letting power users reach "system".
+  const toggle = React.useCallback(() => {
+    setPreference(
+      preference === "light"
+        ? "dark"
+        : preference === "dark"
+          ? "system"
+          : "light"
+    );
+  }, [preference, setPreference]);
+
+  return (
+    <ThemeContext.Provider
+      value={{ theme, preference, setPreference, setTheme, toggle }}
+    >
+      {/* TooltipProvider is co-located so consumers get tooltips for free. */}
+      <TooltipProvider delayDuration={200} skipDelayDuration={300}>
+        {children}
+      </TooltipProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}

package/src/components/theme-toggle.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Laptop, Moon, Sun } from "lucide-react";
+import { Button } from "./button";
+import { useTheme } from "./theme-provider";
+
+/**
+ * ThemeToggle — single button that cycles light → dark → system,
+ * mirroring the macOS / Windows / iOS "Appearance" model. The icon
+ * reflects the user's PREFERENCE, not the resolved theme, so
+ * "system" shows a laptop glyph even when the effective theme is
+ * dark — that's how the user sees they're not in an explicit
+ * override.
+ */
+export function ThemeToggle() {
+  const { preference, toggle } = useTheme();
+  const { Icon, label, next } =
+    preference === "light"
+      ? { Icon: Sun, label: "Light theme", next: "Switch to dark" }
+      : preference === "dark"
+        ? { Icon: Moon, label: "Dark theme", next: "Switch to system" }
+        : { Icon: Laptop, label: "System theme", next: "Switch to light" };
+  return (
+    <Button
+      variant="secondary"
+      size="icon"
+      onClick={toggle}
+      aria-label={`${label} — ${next}`}
+      title={`${label} — click to ${next.toLowerCase()}`}
+    >
+      <Icon className="h-4 w-4" strokeWidth={1.75} />
+    </Button>
+  );
+}

package/src/components/three-state.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Skeleton } from "./skeleton";
+import { EmptyState, type EmptyStateProps } from "./empty-state";
+import { Button } from "./button";
+import { AlertTriangle } from "lucide-react";
+
+/**
+ * ThreeState — implements design.md §3.14 Empty/Loading/Full discipline.
+ *
+ * One wrapper for every list, every chart, every dashboard tile. Forces
+ * you to think about all three states (plus error) at design time.
+ *
+ * Usage:
+ *   <ThreeState
+ *     state={state}
+ *     loading={<TableSkeleton rows={5} />}
+ *     empty={{ title: "No games this week", description: "Host one?", action: <Button>Create</Button> }}
+ *     error={(err, retry) => <ErrorView err={err} onRetry={retry} />}
+ *   >
+ *     <RealList items={data} />
+ *   </ThreeState>
+ */
+export type ListState<T> =
+  | { kind: "loading" }
+  | { kind: "empty" }
+  | { kind: "error"; error: Error; retry?: () => void }
+  | { kind: "data"; data: T };
+
+export interface ThreeStateProps<T> {
+  state: ListState<T>;
+  loading?: React.ReactNode;
+  empty: EmptyStateProps;
+  error?: (err: Error, retry?: () => void) => React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function ThreeState<T>({
+  state,
+  loading,
+  empty,
+  error,
+  children,
+}: ThreeStateProps<T>) {
+  if (state.kind === "loading") {
+    return <>{loading ?? <DefaultLoading />}</>;
+  }
+  if (state.kind === "empty") {
+    return <EmptyState {...empty} />;
+  }
+  if (state.kind === "error") {
+    return (
+      <>
+        {error ? (
+          error(state.error, state.retry)
+        ) : (
+          <DefaultError err={state.error} retry={state.retry} />
+        )}
+      </>
+    );
+  }
+  return <>{children}</>;
+}
+
+function DefaultLoading() {
+  return (
+    <div className="space-y-2 p-2">
+      <Skeleton className="h-9 w-full" />
+      <Skeleton className="h-9 w-full" />
+      <Skeleton className="h-9 w-full" />
+    </div>
+  );
+}
+
+function DefaultError({ err, retry }: { err: Error; retry?: () => void }) {
+  return (
+    <div
+      role="alert"
+      className="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
+    >
+      <AlertTriangle className="h-5 w-5 text-danger" strokeWidth={1.75} />
+      <div className="text-sm font-medium">Couldn&apos;t load this</div>
+      <div className="text-xs text-text-muted max-w-xs">{err.message}</div>
+      {retry && (
+        <Button variant="secondary" size="sm" onClick={retry} className="mt-2">
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}