@dtsports/design-system 0.2.0

package/dist/tokens/tokens.json

@@ -0,0 +1,154 @@
+{
+  "$description": "DT Sports design tokens — single source of truth. Edit this file, then run `npm run build:tokens`. Never edit the generated blocks in globals.css, src/styles/generated/, or src/tokens/index.ts by hand.",
+  "color": {
+    "$format": "HSL channel triplets (\"H S% L%\") so CSS can compose hsl(var(--x) / alpha).",
+    "light": {
+      "brand-lime": "72 65% 52%",
+      "brand-lime-foreground": "0 0% 4%",
+      "brand-forest": "147 66% 26%",
+      "brand-forest-foreground": "0 0% 100%",
+      "background": "0 0% 100%",
+      "bg-subtle": "0 0% 98%",
+      "bg-muted": "240 5% 96%",
+      "border": "0 0% 90%",
+      "border-strong": "0 0% 83%",
+      "foreground": "0 0% 4%",
+      "text-muted": "0 0% 32%",
+      "text-subtle": "0 0% 45%",
+      "success": "142 72% 29%",
+      "success-foreground": "0 0% 100%",
+      "warning": "35 90% 33%",
+      "warning-foreground": "0 0% 100%",
+      "danger": "0 72% 49%",
+      "danger-foreground": "0 0% 100%",
+      "info": "217 91% 50%",
+      "info-foreground": "0 0% 100%",
+      "ring": "147 66% 26%"
+    },
+    "dark": {
+      "$comment": "Overrides only — anything not listed inherits the light value.",
+      "background": "0 0% 4%",
+      "bg-subtle": "0 0% 8%",
+      "bg-muted": "0 0% 12%",
+      "border": "0 0% 15%",
+      "border-strong": "240 5% 26%",
+      "foreground": "0 0% 98%",
+      "text-muted": "240 5% 65%",
+      "text-subtle": "240 4% 52%",
+      "success": "142 60% 45%",
+      "success-foreground": "0 0% 4%",
+      "warning": "38 92% 50%",
+      "warning-foreground": "0 0% 4%",
+      "danger": "0 84% 62%",
+      "danger-foreground": "0 0% 4%",
+      "info": "217 91% 62%",
+      "info-foreground": "0 0% 4%",
+      "ring": "72 65% 52%"
+    }
+  },
+  "fontFamily": {
+    "sans": ["\"Exo 2\"", "system-ui", "sans-serif"],
+    "mono": [
+      "ui-monospace",
+      "SFMono-Regular",
+      "\"JetBrains Mono\"",
+      "Menlo",
+      "monospace"
+    ]
+  },
+  "fontSize": {
+    "xs": { "size": 11, "lineHeight": 16 },
+    "sm": { "size": 13, "lineHeight": 18 },
+    "base": { "size": 14, "lineHeight": 20 },
+    "md": { "size": 15, "lineHeight": 22 },
+    "lg": { "size": 17, "lineHeight": 24 },
+    "xl": { "size": 20, "lineHeight": 28 },
+    "2xl": { "size": 24, "lineHeight": 32 },
+    "3xl": { "size": 30, "lineHeight": 36 }
+  },
+  "fontSizeFluid": {
+    "$comment": "Marketing display scale — clamp(minPx, basePx + vw, maxPx). Web gets fluid clamp(); React Native gets {min,max}.",
+    "display-sm": {
+      "min": 32,
+      "max": 44,
+      "base": 24,
+      "vw": 2.5,
+      "lineHeight": 1.1,
+      "letterSpacing": "-0.02em"
+    },
+    "display": {
+      "min": 40,
+      "max": 64,
+      "base": 26,
+      "vw": 4,
+      "lineHeight": 1.05,
+      "letterSpacing": "-0.02em"
+    },
+    "display-lg": {
+      "min": 48,
+      "max": 96,
+      "base": 28,
+      "vw": 6,
+      "lineHeight": 1,
+      "letterSpacing": "-0.025em"
+    }
+  },
+  "fontWeight": {
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700
+  },
+  "spacing": {
+    "0.5": 2,
+    "1": 4,
+    "1.5": 6,
+    "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "32": 128,
+    "40": 160
+  },
+  "radius": {
+    "sm": 2,
+    "DEFAULT": 4,
+    "md": 6
+  },
+  "shadow": {
+    "sm": "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)",
+    "md": "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
+    "lg": "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)"
+  },
+  "gradient": {
+    "brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)",
+    "forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)"
+  },
+  "motion": {
+    "duration": { "DEFAULT": 150, "slow": 200, "pulse": 1500 },
+    "easing": { "out": "cubic-bezier(0.2, 0, 0, 1)" }
+  },
+  "zIndex": {
+    "sticky": 20,
+    "overlay": 40,
+    "modal": 50,
+    "popover": 50,
+    "toast": 60
+  },
+  "breakpoint": {
+    "$comment": "Matches Tailwind defaults; declared so RN and marketing share them.",
+    "sm": 640,
+    "md": 768,
+    "lg": 1024,
+    "xl": 1280,
+    "2xl": 1536
+  }
+}

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@dtsports/design-system",
+  "version": "0.2.0",
+  "description": "DT Sports — shared design system. Tokens, components, and UX patterns for hosts and players.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./showcase": {
+      "types": "./dist/showcase/index.d.ts",
+      "default": "./dist/showcase/index.js"
+    },
+    "./marketing": {
+      "types": "./dist/marketing/index.d.ts",
+      "default": "./dist/marketing/index.js"
+    },
+    "./styles/globals.css": "./dist/styles/globals.css",
+    "./tailwind-preset": {
+      "types": "./dist/styles/tailwind.preset.d.ts",
+      "default": "./dist/styles/tailwind.preset.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "default": "./dist/tokens/index.js"
+    },
+    "./tokens.json": "./dist/tokens/tokens.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:tokens && rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && cp src/styles/globals.css dist/styles/globals.css && cp src/tokens/tokens.json dist/tokens/tokens.json",
+    "dev": "vite --config dev/vite.config.ts",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:contrast": "node scripts/check-contrast.mjs",
+    "build:tokens": "node scripts/build-tokens.mjs",
+    "check:tokens": "node scripts/build-tokens.mjs --check",
+    "lint": "eslint src",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"*.{js,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\" \"*.{js,json,md}\""
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.4.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.460.0",
+    "react-day-picker": "^10.0.1",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^2.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": ">=3.4"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.61.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "autoprefixer": "^10.5.2",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^27.0.1",
+    "prettier": "^3.9.4",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^7.3.6",
+    "vitest": "^3.2.6"
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Accordion — for grouped expandable sections (House rules · Policy ·
+ * About). Use `type="single"` for FAQ-style (one-open-at-a-time) and
+ * `type="multiple"` for settings panels.
+ *
+ *   <Accordion type="single" collapsible>
+ *     <AccordionItem value="a">
+ *       <AccordionTrigger>House rules</AccordionTrigger>
+ *       <AccordionContent>…</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ */
+export const Accordion = AccordionPrimitive.Root;
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-border last:border-b-0", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-3 text-sm font-medium text-foreground transition-all duration-150",
+        "hover:text-brand-forest",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        className="h-3.5 w-3.5 shrink-0 text-text-muted transition-transform duration-150"
+        strokeWidth={1.75}
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm text-foreground",
+      "data-[state=closed]:animate-fade-in data-[state=open]:animate-fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-3 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = "AccordionContent";

package/src/components/alert.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Alert / inline notice — for status messages that aren't transient.
+ * Pair with the right variant:
+ *   - info     neutral notices
+ *   - success  confirmations that stick (booking saved, etc.)
+ *   - warning  needs attention (below min to run, low credit)
+ *   - danger   error / failure
+ *
+ * Use Toast for transient feedback; use Alert when the message belongs
+ * inline with the content.
+ */
+export const alertVariants = cva(
+  "relative w-full rounded border px-3 py-2.5 text-sm",
+  {
+    variants: {
+      variant: {
+        info: "border-info/30 bg-info/5 text-foreground",
+        success: "border-success/30 bg-success/5 text-foreground",
+        warning: "border-warning/40 bg-warning/5 text-foreground",
+        danger: "border-danger/30 bg-danger/5 text-foreground",
+      },
+    },
+    defaultVariants: { variant: "info" },
+  }
+);
+
+const ICON_MAP = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  danger: XCircle,
+} as const;
+
+const ICON_COLOR_MAP = {
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+} as const;
+
+export interface AlertProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof alertVariants> {
+  title?: React.ReactNode;
+  /** Set false to hide the leading status icon */
+  showIcon?: boolean;
+  /** Show a close (×) button. Provide onDismiss to handle the click. */
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+export function Alert({
+  className,
+  variant,
+  title,
+  showIcon = true,
+  dismissible,
+  onDismiss,
+  children,
+  ...props
+}: AlertProps) {
+  const v = variant ?? "info";
+  const Icon = ICON_MAP[v];
+  const iconColor = ICON_COLOR_MAP[v];
+  return (
+    <div
+      role={v === "danger" ? "alert" : "status"}
+      className={cn(alertVariants({ variant: v }), className)}
+      {...props}
+    >
+      <div className="flex items-start gap-2.5">
+        {showIcon && (
+          <Icon
+            className={cn("h-4 w-4 shrink-0 mt-0.5", iconColor)}
+            strokeWidth={2}
+            aria-hidden="true"
+          />
+        )}
+        <div className="flex-1 min-w-0">
+          {title && (
+            <div className="font-medium leading-tight text-sm">{title}</div>
+          )}
+          {children && (
+            <div
+              className={cn(
+                title && "mt-1",
+                "text-xs text-text-muted [&_a]:text-brand-forest [&_a]:underline-offset-2 [&_a]:hover:underline"
+              )}
+            >
+              {children}
+            </div>
+          )}
+        </div>
+        {dismissible && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            aria-label="Dismiss"
+            className="shrink-0 -mr-1 -mt-0.5 h-5 w-5 grid place-items-center rounded-sm text-text-muted hover:bg-bg-subtle hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring relative after:absolute after:-inset-0.5 pointer-coarse:after:-inset-3"
+          >
+            <X className="h-3 w-3" strokeWidth={1.75} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/app-shell.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * AppShell — flex layout for sidebar + main content.
+ * The actual sidebar and content are children; AppShell just provides
+ * the full-height flex frame.
+ *
+ *   <AppShell>
+ *     <Sidebar>…</Sidebar>
+ *     <AppMain>
+ *       <TopBar>…</TopBar>
+ *       <PageContent>…</PageContent>
+ *     </AppMain>
+ *   </AppShell>
+ */
+export const AppShell = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex min-h-screen w-full", className)}
+    {...props}
+  />
+));
+AppShell.displayName = "AppShell";
+
+/**
+ * AppMain — main content area, scrollable, takes remaining width.
+ * Pair with TopBar (sticky) and your page content inside.
+ */
+export const AppMain = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 min-w-0 flex flex-col", className)}
+    {...props}
+  />
+));
+AppMain.displayName = "AppMain";

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+/**
+ * AspectRatio — locks a region to a given ratio without layout shift.
+ *
+ *   <AspectRatio ratio={16 / 9}>
+ *     <iframe src={…} className="h-full w-full" />
+ *   </AspectRatio>
+ *
+ * Common ratios:
+ *   - 16/9   video
+ *   - 4/3    older video / photos
+ *   - 1/1    square
+ *   - 21/9   ultrawide / banner
+ */
+export const AspectRatio = AspectRatioPrimitive.Root;

package/src/components/avatar-group.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * AvatarGroup — stacked overlapping avatars. Shows up to `max` avatars
+ * followed by a "+N" pill for the overflow.
+ *
+ *   <AvatarGroup max={4}>
+ *     <Avatar name="Alex Chen" />
+ *     <Avatar name="Jordan Lee" />
+ *     <Avatar name="Sam Patel" />
+ *     <Avatar name="Maria Garcia" />
+ *     <Avatar name="Danny Tran" />
+ *   </AvatarGroup>
+ *
+ * Use for: roster previews, "8 people booked" inline indicators.
+ */
+const SIZE_CLASSES = {
+  sm: "h-6 w-6 text-[10px]",
+  default: "h-8 w-8 text-xs",
+  lg: "h-10 w-10 text-sm",
+} as const;
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Max avatars shown before collapsing to "+N". */
+  max?: number;
+  /** Size of the overflow pill — should match the avatars inside. */
+  size?: keyof typeof SIZE_CLASSES;
+  /** Accessible label for screen readers (e.g. "8 players booked"). */
+  label?: string;
+}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  (
+    { className, max = 4, size = "default", label, children, ...props },
+    ref
+  ) => {
+    const all = React.Children.toArray(children).filter(Boolean);
+    const visible = all.slice(0, max);
+    const overflow = all.length - visible.length;
+
+    return (
+      <div
+        ref={ref}
+        role={label ? "img" : undefined}
+        aria-label={label}
+        className={cn("inline-flex -space-x-1.5", className)}
+        {...props}
+      >
+        {visible.map((child, i) => (
+          <span
+            key={i}
+            className="ring-2 ring-background rounded-full inline-flex"
+          >
+            {child}
+          </span>
+        ))}
+        {overflow > 0 && (
+          <span
+            aria-hidden={label ? "true" : undefined}
+            className={cn(
+              "ring-2 ring-background rounded-full bg-bg-muted text-text-muted font-medium tabular grid place-items-center",
+              SIZE_CLASSES[size]
+            )}
+          >
+            +{overflow}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";

package/src/components/avatar.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Avatar — per design.md §10
+ * Sizes: sm 24 / default 32 / lg 64
+ * Fallback: brand-forest bg, white initials (first letter of first + last)
+ */
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  src?: string;
+  size?: "sm" | "default" | "lg";
+  /** Optional status dot: lime = checked-in, gray = booked */
+  status?: "checked-in" | "booked";
+}
+
+function initials(name: string) {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+  return (first + last).toUpperCase() || "?";
+}
+
+const sizeMap = {
+  sm: { box: "h-6 w-6", text: "text-[10px]", dot: "h-1.5 w-1.5" },
+  default: { box: "h-8 w-8", text: "text-xs", dot: "h-2 w-2" },
+  lg: { box: "h-16 w-16", text: "text-lg", dot: "h-3 w-3" },
+};
+
+export function Avatar({
+  name,
+  src,
+  size = "default",
+  status,
+  className,
+  ...props
+}: AvatarProps) {
+  const s = sizeMap[size];
+  return (
+    <div
+      role="img"
+      // Descendants of role="img" are presentational, so the status must
+      // live in the container's label — a labelled dot would be ignored.
+      aria-label={
+        status
+          ? `${name} (${status === "checked-in" ? "checked in" : "booked"})`
+          : name
+      }
+      className={cn("relative inline-flex shrink-0", className)}
+      {...props}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt={name}
+          className={cn("rounded-full object-cover", s.box)}
+        />
+      ) : (
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-full bg-brand-forest text-brand-forest-foreground font-semibold tabular",
+            s.box,
+            s.text
+          )}
+        >
+          {initials(name)}
+        </div>
+      )}
+      {status && (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-background",
+            s.dot,
+            status === "checked-in" ? "bg-brand-lime" : "bg-text-subtle"
+          )}
+        />
+      )}
+    </div>
+  );
+}