@dtsports/design-system 0.2.0

package/dist/showcase/page.js

@@ -0,0 +1,1085 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertTriangle, CalendarDays, CalendarPlus, CheckCircle2, ChevronDown, CircleHelp, Edit, Inbox, Info, LayoutDashboard, MapPin, MoreHorizontal, Repeat, Settings, Trash2, Trophy, Users, XCircle, Zap, } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AspectRatio, Calendar, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, DatePicker, SkeletonList, SkeletonTable, Slider, Toaster, toast, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CapacityBar, Chip, Container, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ConfirmAction, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EmptyState, FormField, Input, Label, LivePill, MetricTile, MoneyBreakdown, NumberInput, Pagination, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarBody, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, Spec, SpecList, Spinner, Stack, StatusPill, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThreeState, Timestamp, Tooltip, TooltipContent, TooltipTrigger, TopBar, } from "../index.js";
+// Showcase-only helpers (live in the app, not the design system).
+import { Footer, Hero, LogoCloud, MarketingNav, Prose } from "../marketing/index.js";
+import { Swatch } from "./components/swatch.js";
+import { DocSection, DocSubsection } from "./components/section.js";
+import { CodeBlock } from "./components/code-block.js";
+import { Example, PreviewCode } from "./components/example.js";
+const NAV_GROUPS = [
+    {
+        id: "group-principles",
+        label: "Principles",
+        items: [
+            { id: "principles-visual", label: "Visual principles" },
+            { id: "principles-ux", label: "UX principles" },
+        ],
+    },
+    {
+        id: "group-foundations",
+        label: "Foundations",
+        items: [
+            { id: "colors", label: "Colors" },
+            { id: "typography", label: "Typography" },
+            { id: "spacing", label: "Spacing" },
+            { id: "radius", label: "Radius" },
+            { id: "elevation", label: "Elevation" },
+            { id: "icons", label: "Iconography" },
+            { id: "motion", label: "Motion" },
+        ],
+    },
+    {
+        id: "group-components",
+        label: "Components",
+        items: [
+            { id: "buttons", label: "Buttons" },
+            { id: "inputs", label: "Inputs" },
+            { id: "checkbox", label: "Checkbox" },
+            { id: "radio", label: "Radio group" },
+            { id: "switch", label: "Switch" },
+            { id: "select", label: "Select" },
+            { id: "combobox", label: "Combobox" },
+            { id: "textarea", label: "Textarea" },
+            { id: "number-input", label: "Number input" },
+            { id: "slider", label: "Slider" },
+            { id: "date-picker", label: "Date picker" },
+            { id: "form-field", label: "Form field" },
+            { id: "alert", label: "Alert" },
+            { id: "badges", label: "Badges" },
+            { id: "chip", label: "Chip" },
+            { id: "status", label: "Status pill" },
+            { id: "cards", label: "Cards" },
+            { id: "metrics", label: "Metric tiles" },
+            { id: "spec", label: "Spec list" },
+            { id: "capacity", label: "Capacity bar" },
+            { id: "tables", label: "Tables" },
+            { id: "pagination", label: "Pagination" },
+            { id: "tabs", label: "Tabs" },
+            { id: "accordion", label: "Accordion" },
+            { id: "collapsible", label: "Collapsible" },
+            { id: "dialog", label: "Dialog" },
+            { id: "drawer", label: "Drawer" },
+            { id: "popover", label: "Popover" },
+            { id: "dropdown", label: "Dropdown menu" },
+            { id: "tooltip", label: "Tooltip" },
+            { id: "separator", label: "Separator" },
+            { id: "toast", label: "Toasts" },
+            { id: "empty", label: "Empty states" },
+            { id: "avatars", label: "Avatars" },
+            { id: "avatar-group", label: "Avatar group" },
+            { id: "skeleton", label: "Skeleton" },
+            { id: "spinner", label: "Spinner" },
+            { id: "progress", label: "Progress" },
+        ],
+    },
+    {
+        id: "group-layout",
+        label: "Layout",
+        items: [
+            { id: "app-shell", label: "App shell" },
+            { id: "sidebar-comp", label: "Sidebar" },
+            { id: "top-bar", label: "Top bar" },
+            { id: "breadcrumb", label: "Breadcrumb" },
+            { id: "container", label: "Container" },
+            { id: "stack", label: "Stack" },
+            { id: "aspect-ratio", label: "Aspect ratio" },
+            { id: "scroll-area", label: "Scroll area" },
+        ],
+    },
+    {
+        id: "group-patterns",
+        label: "Patterns",
+        items: [{ id: "patterns", label: "UX patterns" }],
+    },
+    {
+        id: "group-marketing",
+        label: "Marketing",
+        items: [{ id: "marketing", label: "Marketing tier" }],
+    },
+    {
+        id: "group-reference",
+        label: "Reference",
+        items: [
+            { id: "a11y", label: "Accessibility" },
+            { id: "usage", label: "Using the system" },
+        ],
+    },
+];
+export default function DesignSystemPage() {
+    return (_jsxs("div", { className: "flex min-h-screen", children: [_jsxs("aside", { "aria-label": "Design system contents", className: "hidden lg:flex flex-col w-56 shrink-0 border-r border-border bg-bg-subtle/40 sticky top-0 h-screen", children: [_jsxs("div", { className: "px-5 py-4 border-b border-border", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-[0.04em] text-text-muted", children: "DT Sports" }), _jsx("div", { className: "text-md font-semibold tracking-[-0.01em] mt-0.5", children: "Design System" })] }), _jsx("nav", { className: "flex-1 overflow-y-auto scrollbar-thin py-3 px-2", children: NAV_GROUPS.map((group, gi) => (_jsxs("div", { className: gi === 0 ? "" : "mt-4", children: [_jsx("div", { className: "px-2.5 pb-1 text-[10px] font-semibold uppercase tracking-[0.06em] text-text-subtle", children: group.label }), _jsx("ul", { className: "space-y-0.5", children: group.items.map((item) => (_jsx("li", { children: _jsx("a", { href: `#${item.id}`, className: "block rounded-sm px-2.5 py-1.5 text-sm text-text-muted hover:bg-bg-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: item.label }) }, item.id))) })] }, group.id))) })] }), _jsxs("main", { id: "main", className: "flex-1 min-w-0", children: [_jsx("header", { className: "sticky top-0 z-20 bg-background/95 backdrop-blur border-b border-border", children: _jsxs("div", { className: "flex h-12 items-center justify-between px-6 lg:px-8", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-text-muted", children: [_jsx("span", { children: "Design System" }), _jsx("span", { className: "text-text-subtle", children: "/" }), _jsx("span", { className: "text-foreground font-medium", children: "v0.1" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", asChild: true, children: _jsx("a", { href: "/admin", children: "View admin demo \u2192" }) }), _jsx(Badge, { variant: "forest", size: "sm", children: "Exo 2 \u00B7 14px base" }), _jsx(ThemeToggle, {})] })] }) }), _jsxs("div", { className: "px-6 lg:px-8 pt-10 pb-6 max-w-5xl", children: [_jsx("h1", { className: "text-3xl font-bold tracking-[-0.01em]", children: "DT Sports \u2014 Design System" }), _jsx("p", { className: "mt-2 text-base text-text-muted max-w-2xl", children: "A dense, data-first UI for hosts and players. Sharp corners, small spacing, sports-turf color. Built for tables and dashboards. This page is the living source of truth \u2014 every section below is the real component, rendered live." }), _jsxs("div", { className: "mt-4 flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "lime", size: "sm", className: "rounded", children: "#B4D334" }), _jsx(Badge, { variant: "forest", size: "sm", className: "rounded", children: "#176E3E" }), _jsx(Badge, { variant: "outline", size: "sm", className: "rounded", children: "Exo 2" }), _jsx(Badge, { variant: "outline", size: "sm", className: "rounded", children: "4px base spacing" }), _jsx(Badge, { variant: "outline", size: "sm", className: "rounded", children: "2\u20136px corners" }), _jsx(Badge, { variant: "outline", size: "sm", className: "rounded", children: "WCAG AA" })] })] }), _jsxs("div", { className: "px-6 lg:px-8 max-w-5xl pb-24", children: [_jsx(GroupHeader, { id: "group-principles", label: "Principles", description: "The rules that decide every design call. Visual = what to draw. UX = what to do.", first: true }), _jsx(VisualPrinciplesSection, {}), _jsx(UXPrinciplesSection, {}), _jsx(GroupHeader, { id: "group-foundations", label: "Foundations", description: "Design tokens \u2014 colors, type, spacing, radius, elevation, icons, motion. Everything else composes from these." }), _jsx(ColorsSection, {}), _jsx(TypographySection, {}), _jsx(SpacingSection, {}), _jsx(RadiusSection, {}), _jsx(ElevationSection, {}), _jsx(IconsSection, {}), _jsx(MotionSection, {}), _jsx(GroupHeader, { id: "group-components", label: "Components", description: "The building blocks. Each is variant-driven via cva(), accepts className for composition, and ships with a11y baked in." }), _jsx(ButtonsSection, {}), _jsx(InputsSection, {}), _jsx(CheckboxSection, {}), _jsx(RadioSection, {}), _jsx(SwitchSection, {}), _jsx(SelectSection, {}), _jsx(ComboboxSection, {}), _jsx(TextareaSection, {}), _jsx(NumberInputSection, {}), _jsx(SliderSection, {}), _jsx(DatePickerSection, {}), _jsx(FormFieldSection, {}), _jsx(AlertSection, {}), _jsx(BadgesSection, {}), _jsx(ChipSection, {}), _jsx(StatusSection, {}), _jsx(CardsSection, {}), _jsx(MetricsSection, {}), _jsx(SpecSection, {}), _jsx(CapacitySection, {}), _jsx(TablesSection, {}), _jsx(PaginationSection, {}), _jsx(TabsSection, {}), _jsx(AccordionSection, {}), _jsx(CollapsibleSection, {}), _jsx(DialogSection, {}), _jsx(DrawerSection, {}), _jsx(PopoverSection, {}), _jsx(DropdownSection, {}), _jsx(TooltipSection, {}), _jsx(SeparatorSection, {}), _jsx(ToastSection, {}), _jsx(EmptyStateSection, {}), _jsx(AvatarsSection, {}), _jsx(AvatarGroupSection, {}), _jsx(SkeletonSection, {}), _jsx(SpinnerSection, {}), _jsx(ProgressSection, {}), _jsx(GroupHeader, { id: "group-layout", label: "Layout", description: "Page-level building blocks. AppShell + Sidebar + TopBar compose admin chrome; Container + Stack handle content padding and gaps; AspectRatio + ScrollArea handle bounded regions; Breadcrumb is the standard nav crumb trail." }), _jsx(AppShellSection, {}), _jsx(SidebarComponentSection, {}), _jsx(TopBarSection, {}), _jsx(BreadcrumbSection, {}), _jsx(ContainerSection, {}), _jsx(StackSection, {}), _jsx(AspectRatioSection, {}), _jsx(ScrollAreaSection, {}), _jsx(GroupHeader, { id: "group-patterns", label: "Patterns", description: "Composed UX behaviors. Reach for these to honor the \u00A73 UX principles without thinking about it." }), _jsx(UXPatternsSection, {}), _jsx(GroupHeader, { id: "group-marketing", label: "Marketing", description: "The website tier \u2014 fluid display type, generous spacing, page-level primitives. Import from @dtsports/design-system/marketing." }), _jsx(MarketingTierSection, {}), _jsx(GroupHeader, { id: "group-reference", label: "Reference", description: "How the system is wired up + how to consume it." }), _jsx(AccessibilitySection, {}), _jsx(UsageSection, {})] })] }), _jsx(Toaster, {})] }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Group headers                                                           */
+/* ─────────────────────────────────────────────────────────────────────── */
+function GroupHeader({ id, label, description, first = false, }) {
+    return (_jsxs("section", { id: id, "aria-label": label, className: first ? "scroll-mt-16" : "scroll-mt-16 pt-12", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.08em] text-brand-forest", children: label }), _jsx("div", { className: "flex-1 h-px bg-brand-forest/30", "aria-hidden": "true" })] }), description && (_jsx("p", { className: "mt-2 text-sm text-text-muted max-w-2xl", children: description }))] }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Sections                                                                */
+/* ─────────────────────────────────────────────────────────────────────── */
+function VisualPrinciplesSection() {
+    const principles = [
+        [
+            "Density over decoration",
+            "13–14px body. 4px base. Rows over cards. Show more, click less.",
+        ],
+        [
+            "Borders not shadows",
+            "1px borders separate. Shadows reserved for floating layers.",
+        ],
+        ["Brand as accent", "Lime + forest punctuate. Most chrome stays neutral."],
+        [
+            "One CTA per view",
+            "Lime is the loudest. Use it once for the action that matters.",
+        ],
+        ["Numbers first-class", "Tabular figures, right-aligned, mono for IDs."],
+        [
+            "Status is iconic + colored",
+            "Color never alone. Always pair with text or icon.",
+        ],
+        ["Live > polished", "Skeletons over spinners. Real data fast."],
+        [
+            "Predictable motion",
+            "150ms ease-out, opacity + small translate. No springs.",
+        ],
+    ];
+    return (_jsx(DocSection, { id: "principles-visual", title: "Visual principles", description: "What to draw. The eight rules behind the look + feel.", children: _jsx("ul", { className: "grid gap-3 md:grid-cols-2", children: principles.map(([title, desc]) => (_jsxs("li", { className: "rounded border border-border bg-background p-4", children: [_jsx("div", { className: "text-sm font-semibold", children: title }), _jsx("div", { className: "text-xs text-text-muted mt-1", children: desc })] }, title))) }) }));
+}
+function UXPrinciplesSection() {
+    const principles = [
+        {
+            n: "3.1",
+            title: "Two audiences, two mental models",
+            body: "Player optimizes for speed-to-confidence; operator optimizes for scan + act. Every page can name which audience it serves.",
+        },
+        {
+            n: "3.2",
+            title: "Information hierarchy per surface",
+            body: "Pick 3–4 signals that drive the decision. Demote the rest.",
+            example: "Game card: time · venue · price · spots. Period.",
+        },
+        {
+            n: "3.3",
+            title: "Progressive disclosure",
+            body: "Show the minimum to decide. Reveal details on demand — except at the moment of commitment, where consequences are inline.",
+        },
+        {
+            n: "3.4",
+            title: "Latency budgets",
+            body: "Browse < 300ms. Detail < 500ms. Skeletons over 200ms. Refunds are async with explicit timeline.",
+        },
+        {
+            n: "3.5",
+            title: "Optimistic vs pessimistic UI",
+            body: "Reversible no-money actions go optimistic. Money / emails / audits go pessimistic.",
+        },
+        {
+            n: "3.6",
+            title: "Error recovery",
+            body: "What happened · why in plain English · what to do next. Never 'Something went wrong.'",
+        },
+        {
+            n: "3.7",
+            title: "Forgiveness + undo",
+            body: "5s undo toast for cheap reversals. Confirm dialog with concrete consequences for destructive actions.",
+        },
+        {
+            n: "3.8",
+            title: "Smart defaults",
+            body: "Don't ask for things they almost always want. Skill = Mixed. Confirmation email = on. Credit = auto-apply.",
+        },
+        {
+            n: "3.9",
+            title: "State persistence",
+            body: "Filters in URL params. Drafts auto-save. Tables remember sort and column visibility per user.",
+        },
+        {
+            n: "3.10",
+            title: "Affordance + feedback",
+            body: "Visible hover on every interactive surface. Outcome ≤ 150ms via toast / dialog / inline. No silent success or failure.",
+        },
+        {
+            n: "3.11",
+            title: "Confirmation discipline",
+            body: "Confirm only destructive / irreversible. Show concrete consequences: '8 players will be refunded $14 each.'",
+        },
+        {
+            n: "3.12",
+            title: "Live data discipline",
+            body: "Spots + price poll every 30s. Quote locked for 5 min at checkout. Never yank state mid-action.",
+        },
+        {
+            n: "3.13",
+            title: "Mobile-first interactions",
+            body: "32px+ tap targets. No hover-only reveals. Sticky bottom CTA on narrow screens.",
+        },
+        {
+            n: "3.14",
+            title: "Empty / loading / full",
+            body: "Every list designs all three states (plus error). Skeletons echo the final shape.",
+        },
+        {
+            n: "3.15",
+            title: "Money UX",
+            body: "Mandatory pre-charge breakdown. Receipt verbatim matches. No surprise debits.",
+        },
+        {
+            n: "3.16",
+            title: "Time UX",
+            body: "Future events in venue tz; tooltip reveals user tz. Within 24h, show ticker.",
+        },
+        {
+            n: "3.17",
+            title: "One screen, one job",
+            body: "If a page feels like an admin AND a profile, split it. Drawers for secondary tasks.",
+        },
+        {
+            n: "3.18",
+            title: "Onboarding in the flow",
+            body: "First booking IS the onboarding. No tour modal. Inline tooltips at first touch only.",
+        },
+        {
+            n: "3.19",
+            title: "Voice consistency",
+            body: "UI, toasts, emails, SMS, support all sound like one person. Direct, operational, no hype.",
+        },
+    ];
+    return (_jsxs(DocSection, { id: "principles-ux", title: "UX principles", description: "How the surface behaves. These shape every interaction \u2014 flows, defaults, errors, feedback, money, time.", children: [_jsx("ul", { className: "grid gap-3 md:grid-cols-2", children: principles.map(({ n, title, body, example }) => (_jsxs("li", { className: "rounded border border-border bg-background p-4 flex flex-col", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: "text-[10px] font-mono text-text-subtle tabular", children: ["\u00A7", n] }), _jsx("h4", { className: "text-sm font-semibold", children: title })] }), _jsx("p", { className: "mt-1.5 text-xs text-text-muted", children: body }), example && (_jsxs("p", { className: "mt-2 text-xs text-text-subtle border-t border-border pt-2", children: [_jsx("span", { className: "font-medium text-foreground", children: "Example. " }), example] }))] }, n))) }), _jsxs("p", { className: "text-xs text-text-muted", children: ["See ", _jsx("code", { className: "font-mono", children: "design.md \u00A73" }), " for the full treatment with do/don't tables."] })] }));
+}
+function ColorsSection() {
+    return (_jsxs(DocSection, { id: "colors", title: "Colors", description: "Brand + neutrals + semantic. Verified for WCAG AA contrast. White-on-lime fails AA \u2014 never do it.", children: [_jsx(DocSubsection, { title: "Brand", children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Swatch, { token: "brand-lime", bg: "bg-brand-lime", value: "#B4D334", textSample: "black", contrast: "black 11.2:1 \u2713 AAA" }), _jsx(Swatch, { token: "brand-forest", bg: "bg-brand-forest", value: "#176E3E", textSample: "white", contrast: "white 6.9:1 \u2713 AA" }), _jsx(Swatch, { token: "foreground", bg: "bg-foreground", value: "#0A0A0A", textSample: "white", contrast: "white 19:1 \u2713 AAA" }), _jsx(Swatch, { token: "background", bg: "bg-background border-border-strong", value: "#FFFFFF", textSample: "black", contrast: "black 19:1 \u2713 AAA" })] }) }), _jsx(DocSubsection, { title: "Neutrals", children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Swatch, { token: "bg-subtle", bg: "bg-bg-subtle", value: "hsl(0 0% 98%)" }), _jsx(Swatch, { token: "bg-muted", bg: "bg-bg-muted", value: "hsl(240 5% 96%)" }), _jsx(Swatch, { token: "border", bg: "bg-border", value: "hsl(0 0% 90%)" }), _jsx(Swatch, { token: "border-strong", bg: "bg-border-strong", value: "hsl(0 0% 83%)" }), _jsx(Swatch, { token: "text-muted", bg: "bg-text-muted", value: "hsl(0 0% 32%)", textSample: "white" }), _jsx(Swatch, { token: "text-subtle", bg: "bg-text-subtle", value: "hsl(0 0% 45%)", textSample: "white" })] }) }), _jsx(DocSubsection, { title: "Semantic", description: "Use sparingly \u2014 these signal state, not decoration.", children: _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsx(Swatch, { token: "success", bg: "bg-success", value: "#16A34A", textSample: "white" }), _jsx(Swatch, { token: "warning", bg: "bg-warning", value: "#F59E0B", textSample: "black" }), _jsx(Swatch, { token: "danger", bg: "bg-danger", value: "#DC2626", textSample: "white" }), _jsx(Swatch, { token: "info", bg: "bg-info", value: "#2563EB", textSample: "white" })] }) }), _jsx(DocSubsection, { title: "Critical contrast rules", description: "Use this checklist whenever you place text on a colored background.", children: _jsx("div", { className: "rounded border border-border bg-background overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-bg-subtle border-b border-border", children: _jsxs("tr", { children: [_jsx("th", { className: "text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted", children: "Pair" }), _jsx("th", { className: "text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted", children: "Ratio" }), _jsx("th", { className: "text-left px-3 py-2 text-xs font-medium uppercase tracking-[0.04em] text-text-muted", children: "Verdict" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "px-3 py-2", children: "Foreground on background" }), _jsx("td", { className: "px-3 py-2 tabular", children: "19:1" }), _jsx("td", { className: "px-3 py-2 text-brand-forest font-medium", children: "AAA \u2713" })] }), _jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "px-3 py-2", children: "Brand-forest on white" }), _jsx("td", { className: "px-3 py-2 tabular", children: "6.1:1" }), _jsx("td", { className: "px-3 py-2 text-brand-forest font-medium", children: "AA \u2713" })] }), _jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "px-3 py-2", children: "White on brand-forest" }), _jsx("td", { className: "px-3 py-2 tabular", children: "6.9:1" }), _jsx("td", { className: "px-3 py-2 text-brand-forest font-medium", children: "AA \u2713" })] }), _jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "px-3 py-2", children: "Black on brand-lime" }), _jsx("td", { className: "px-3 py-2 tabular", children: "11.2:1" }), _jsx("td", { className: "px-3 py-2 text-brand-forest font-medium", children: "AAA \u2713" })] }), _jsxs("tr", { children: [_jsx("td", { className: "px-3 py-2 font-medium", children: "White on brand-lime" }), _jsx("td", { className: "px-3 py-2 tabular", children: "1.5:1" }), _jsx("td", { className: "px-3 py-2 text-danger font-medium", children: "FAIL \u2014 never use" })] })] })] }) }) })] }));
+}
+function TypographySection() {
+    const scale = [
+        ["text-xs", "11 / 16", "Table cells (compact), badges, microcopy"],
+        ["text-sm", "13 / 18", "DEFAULT body text, inputs, buttons"],
+        ["text-base", "14 / 20", "Paragraphs, card body"],
+        ["text-md", "15 / 22", "Section headings in cards"],
+        ["text-lg", "17 / 24", "Subsection titles"],
+        ["text-xl", "20 / 28", "Page headings"],
+        ["text-2xl", "24 / 32", "Metric values"],
+        ["text-3xl", "30 / 36", "Hero — rare"],
+    ];
+    return (_jsxs(DocSection, { id: "typography", title: "Typography", description: "Exo 2. Geometric, slightly sporty, dense at small sizes. Mono fallback for IDs and code.", children: [_jsx(DocSubsection, { title: "Scale", children: _jsx("div", { className: "rounded border border-border bg-background divide-y divide-border", children: scale.map(([size, lh, use]) => (_jsxs("div", { className: "flex items-baseline gap-4 px-4 py-3", children: [_jsx("div", { className: "w-28 shrink-0 text-xs font-mono text-text-muted", children: size }), _jsx("div", { className: `${size} font-medium flex-1`, children: "The quick brown fox 0123" }), _jsx("div", { className: "hidden md:block text-xs text-text-subtle tabular w-16 text-right", children: lh }), _jsx("div", { className: "hidden lg:block text-xs text-text-muted w-72", children: use })] }, size))) }) }), _jsx(DocSubsection, { title: "Weights", children: _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-base font-normal", children: "Regular 400 \u2014 body text" }), _jsx("p", { className: "text-base font-medium", children: "Medium 500 \u2014 emphasis" }), _jsx("p", { className: "text-base font-semibold", children: "Semibold 600 \u2014 headings" }), _jsx("p", { className: "text-base font-bold", children: "Bold 700 \u2014 rare, page titles" })] }) }), _jsx(DocSubsection, { title: "Numerals (tabular)", description: "Add the .tabular utility to every cell, price, count, or aligned number.", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-[0.04em] text-text-muted mb-2", children: "Without (default)" }), _jsx("pre", { className: "text-base", children: "100\n111\n222\n330" })] }), _jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-[0.04em] text-text-muted mb-2", children: "With .tabular" }), _jsx("pre", { className: "text-base tabular", children: "100\n111\n222\n330" })] })] }) })] }));
+}
+function SpacingSection() {
+    const tokens = [
+        ["0.5", "2px"],
+        ["1", "4px"],
+        ["1.5", "6px"],
+        ["2", "8px"],
+        ["2.5", "10px"],
+        ["3", "12px"],
+        ["4", "16px"],
+        ["5", "20px"],
+        ["6", "24px"],
+        ["8", "32px"],
+        ["10", "40px"],
+        ["12", "48px"],
+    ];
+    return (_jsx(DocSection, { id: "spacing", title: "Spacing", description: "4px base. Compact. Default gutters 12\u201316px, card padding 16\u201320px, page padding 32px.", children: _jsx("div", { className: "rounded border border-border bg-background p-4 space-y-1.5", children: tokens.map(([token, px]) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-14 text-xs font-mono text-text-muted", children: token }), _jsx("div", { className: "w-14 text-xs font-mono text-text-subtle tabular", children: px }), _jsx("div", { className: "h-3 bg-brand-forest rounded-sm", style: { width: px } })] }, token))) }) }));
+}
+function RadiusSection() {
+    const tokens = [
+        ["none", "0", "rounded-none"],
+        ["sm", "2px", "rounded-sm"],
+        ["DEFAULT", "4px", "rounded"],
+        ["md", "6px", "rounded-md"],
+        ["full", "9999px", "rounded-full"],
+    ];
+    return (_jsx(DocSection, { id: "radius", title: "Corner radius", description: "Minimal \u2014 sharp, modern. No rounded-xl or rounded-2xl anywhere.", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: tokens.map(([name, px, cls]) => (_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx("div", { className: `h-16 w-full bg-brand-forest ${cls}`, "aria-hidden": "true" }), _jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-medium", children: name }), _jsx("div", { className: "text-text-muted font-mono tabular", children: px }), _jsx("div", { className: "text-text-subtle font-mono", children: cls })] })] }, name))) }) }));
+}
+function ElevationSection() {
+    return (_jsx(DocSection, { id: "elevation", title: "Elevation", description: "Borders first. Shadows only for floating layers.", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [_jsx("div", { className: "bg-bg-subtle p-8 rounded", children: _jsx("div", { className: "h-20 rounded border border-border bg-background flex items-center justify-center text-xs text-text-muted", children: "shadow-none (default)" }) }), _jsx("div", { className: "bg-bg-subtle p-8 rounded", children: _jsx("div", { className: "h-20 rounded border border-border bg-background shadow-sm flex items-center justify-center text-xs text-text-muted", children: "shadow-sm (popovers)" }) }), _jsx("div", { className: "bg-bg-subtle p-8 rounded", children: _jsx("div", { className: "h-20 rounded border border-border-strong bg-background shadow-md flex items-center justify-center text-xs text-text-muted", children: "shadow-md (modals)" }) }), _jsx("div", { className: "bg-bg-subtle p-8 rounded", children: _jsx("div", { className: "h-20 rounded border border-border-strong bg-background shadow-lg flex items-center justify-center text-xs text-text-muted", children: "shadow-lg (marketing)" }) })] }) }));
+}
+function IconsSection() {
+    const icons = [
+        { Icon: CalendarPlus, name: "CalendarPlus" },
+        { Icon: MapPin, name: "MapPin" },
+        { Icon: Zap, name: "Zap" },
+        { Icon: CheckCircle2, name: "CheckCircle2" },
+        { Icon: AlertTriangle, name: "AlertTriangle" },
+        { Icon: XCircle, name: "XCircle" },
+        { Icon: Info, name: "Info" },
+        { Icon: CircleHelp, name: "CircleHelp" },
+    ];
+    return (_jsxs(DocSection, { id: "icons", title: "Iconography", description: "Lucide icons, stroke 1.75, currentColor. 14\u201316px inline, 18\u201320px standalone.", children: [_jsx("div", { className: "grid grid-cols-4 md:grid-cols-8 gap-3", children: icons.map(({ Icon, name }) => (_jsxs("div", { className: "flex flex-col items-center gap-1.5 rounded border border-border bg-background py-3", children: [_jsx(Icon, { className: "h-4 w-4", strokeWidth: 1.75 }), _jsx("div", { className: "text-[10px] font-mono text-text-muted", children: name })] }, name))) }), _jsx(CodeBlock, { language: "tsx", code: `import { CalendarPlus } from "lucide-react";\n\n<CalendarPlus className="h-4 w-4" strokeWidth={1.75} />` })] }));
+}
+function ButtonsSection() {
+    return (_jsxs(DocSection, { id: "buttons", title: "Buttons", description: "One accent (lime) per view. Forest is the default primary. 32px tap target on default size.", children: [_jsx(DocSubsection, { title: "Variants", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "accent", children: "Book now" }), _jsx(Button, { variant: "primary", children: "Confirm" }), _jsx(Button, { variant: "secondary", children: "Cancel" }), _jsx(Button, { variant: "ghost", children: "More" }), _jsx(Button, { variant: "destructive", children: "Cancel game" }), _jsx(Button, { variant: "link", children: "View receipt" })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Button variant="accent">Book now</Button>
+<Button variant="primary">Confirm</Button>
+<Button variant="secondary">Cancel</Button>
+<Button variant="ghost">More</Button>
+<Button variant="destructive">Cancel game</Button>
+<Button variant="link">View receipt</Button>` }) }) }), _jsx(DocSubsection, { title: "Sizes", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsx(Button, { size: "xs", children: "XS" }), _jsx(Button, { size: "sm", children: "SM" }), _jsx(Button, { size: "default", children: "Default" }), _jsx(Button, { size: "lg", children: "LG" }), _jsx(Button, { size: "icon", "aria-label": "Delete", children: _jsx(Trash2, { className: "h-4 w-4", strokeWidth: 1.75 }) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Button size="xs">XS</Button>
+<Button size="sm">SM</Button>
+<Button size="default">Default</Button>
+<Button size="lg">LG</Button>
+
+{/* Icon-only buttons MUST have aria-label */}
+<Button size="icon" aria-label="Delete">
+  <Trash2 className="h-4 w-4" />
+</Button>` }) }) }), _jsx(DocSubsection, { title: "With icon + state", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { variant: "accent", children: [_jsx(Zap, { className: "h-4 w-4", strokeWidth: 1.75 }), "Go Live"] }), _jsx(Button, { variant: "primary", disabled: true, children: "Disabled" })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Button variant="accent">
+  <Zap className="h-4 w-4" /> Go Live
+</Button>
+<Button disabled>Disabled</Button>` }) }) })] }));
+}
+function InputsSection() {
+    return (_jsx(DocSection, { id: "inputs", title: "Inputs & Forms", description: "Labels above inputs. Required marker is a danger asterisk. Helper text below input; replaced by error text on validation failure.", children: _jsx(Example, { children: _jsxs("form", { className: "grid gap-4 max-w-md", onSubmit: (e) => {
+                    e.preventDefault();
+                    toast.success("Form submitted (demo).");
+                }, noValidate: true, children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "email", required: true, children: "Email" }), _jsx(Input, { id: "email", type: "email", placeholder: "you@dtsports.tv", autoComplete: "email", required: true, "aria-describedby": "email-helper" }), _jsx("p", { id: "email-helper", className: "text-xs text-text-muted", children: "We'll send booking confirmations here." })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "phone", children: "Mobile" }), _jsx(Input, { id: "phone", type: "tel", placeholder: "+1 555 123 4567", autoComplete: "tel" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "bad", required: true, children: "Card number" }), _jsx(Input, { id: "bad", type: "text", defaultValue: "4242 4242 0000", "aria-invalid": "true", "aria-describedby": "bad-error" }), _jsx("p", { id: "bad-error", className: "text-xs text-danger", children: "Card number is invalid." })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", type: "button", children: "Cancel" }), _jsx(Button, { variant: "accent", type: "submit", children: "Pay $14.00" })] })] }) }) }));
+}
+function BadgesSection() {
+    return (_jsx(DocSection, { id: "badges", title: "Badges", description: "Uppercase pills used as status markers. Always paired with text. Square shape by default; pill shape reserved for game status.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { children: "Neutral" }), _jsx(Badge, { variant: "outline", children: "Outline" }), _jsx(Badge, { variant: "forest", children: "Forest" }), _jsx(Badge, { variant: "lime", children: "Lime" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Badge>Neutral</Badge>
+<Badge variant="outline">Outline</Badge>
+<Badge variant="forest">Forest</Badge>
+<Badge variant="lime">Lime</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="danger">Danger</Badge>
+<Badge variant="info">Info</Badge>` }) }) }));
+}
+function StatusSection() {
+    const statuses = [
+        "draft",
+        "scheduled",
+        "filling",
+        "sold_out",
+        "live",
+        "completed",
+        "cancelled",
+    ];
+    return (_jsx(DocSection, { id: "status", title: "Status pill", description: "One canonical visualization for the game-status vocabulary. The LIVE state is the only continuously animated element.", children: _jsx(PreviewCode, { preview: _jsx("div", { className: "flex flex-wrap gap-2", children: statuses.map((s) => (_jsx(StatusPill, { status: s }, s))) }), code: _jsx(CodeBlock, { language: "tsx", code: `<StatusPill status="draft" />
+<StatusPill status="scheduled" />
+<StatusPill status="filling" />
+<StatusPill status="sold_out" />
+<StatusPill status="live" />
+<StatusPill status="completed" />
+<StatusPill status="cancelled" />` }) }) }));
+}
+function CardsSection() {
+    return (_jsx(DocSection, { id: "cards", title: "Cards", description: "1px border, 4px radius, no shadow at rest. Compose Header / Content / Footer.", children: _jsxs(Card, { className: "max-w-md", children: [_jsxs(CardHeader, { children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Astoria Turf \u00B7 Field A" }), _jsx(CardDescription, { children: "5v5 \u00B7 Saturday, 6:00 pm" })] }), _jsx(StatusPill, { status: "filling" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-3 gap-3 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-[0.04em] text-text-muted", children: "Price" }), _jsx("div", { className: "tabular font-semibold mt-0.5", children: "$14.00" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-[0.04em] text-text-muted", children: "Spots" }), _jsx("div", { className: "tabular font-semibold mt-0.5", children: "8 / 10" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs uppercase tracking-[0.04em] text-text-muted", children: "Skill" }), _jsx("div", { className: "font-semibold mt-0.5", children: "Mixed" })] })] }) }), _jsxs(CardFooter, { children: [_jsx(Button, { variant: "ghost", size: "sm", children: "Details" }), _jsx(Button, { variant: "accent", size: "sm", children: "Book now" })] })] }) }));
+}
+function MetricsSection() {
+    return (_jsxs(DocSection, { id: "metrics", title: "Metric tiles", description: "Three lines exactly: label / value / delta. Use 3\u20134 across in dashboard rows.", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [_jsx(MetricTile, { label: "This week", value: "$1,840", delta: 12 }), _jsx(MetricTile, { label: "Bookings", value: "124", delta: -3 }), _jsx(MetricTile, { label: "Fill rate", value: "73%", delta: 0 }), _jsx(MetricTile, { label: "Refunds", value: "4", delta: 50, invertDelta: true })] }), _jsx(CodeBlock, { language: "tsx", code: `<MetricTile label="This week" value="$1,840" delta={12} />
+<MetricTile label="Bookings"  value="124"    delta={-3} />
+<MetricTile label="Fill rate" value="73%"    delta={0} />
+<MetricTile label="Refunds"   value="4"      delta={50} invertDelta />` })] }));
+}
+function TablesSection() {
+    const rows = [
+        {
+            date: "Sat May 22",
+            time: "6:00 pm",
+            venue: "Astoria Turf · A",
+            format: "5v5",
+            price: 14,
+            filled: 8,
+            capacity: 10,
+            status: "filling",
+        },
+        {
+            date: "Sat May 22",
+            time: "7:00 pm",
+            venue: "McCarren · Court 1",
+            format: "3v3",
+            price: 18,
+            filled: 6,
+            capacity: 6,
+            status: "sold_out",
+        },
+        {
+            date: "Sat May 22",
+            time: "8:00 pm",
+            venue: "Astoria Turf · B",
+            format: "5v5",
+            price: 12,
+            filled: 3,
+            capacity: 10,
+            status: "scheduled",
+        },
+        {
+            date: "Sat May 22",
+            time: "9:00 pm",
+            venue: "Astoria Turf · A",
+            format: "5v5",
+            price: 16,
+            filled: 10,
+            capacity: 10,
+            status: "live",
+        },
+    ];
+    return (_jsx(DocSection, { id: "tables", title: "Tables", description: "The centerpiece. 36px row height, numeric columns right-aligned with tabular figures. Use this shape for every list of structured data.", children: _jsx("div", { className: "rounded border border-border bg-background overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableCaption, { className: "sr-only", children: "Upcoming pickup games for Saturday, May 22." }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Date" }), _jsx(TableHead, { children: "Time" }), _jsx(TableHead, { children: "Venue" }), _jsx(TableHead, { children: "Format" }), _jsx(TableHead, { className: "text-right", children: "Price" }), _jsx(TableHead, { className: "text-right", children: "Spots" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: rows.map((r, i) => (_jsxs(TableRow, { interactive: true, selected: i === 1, children: [_jsx(TableCell, { children: r.date }), _jsx(TableCell, { children: r.time }), _jsx(TableCell, { className: "font-medium", children: r.venue }), _jsx(TableCell, { children: r.format }), _jsxs(TableCell, { className: "text-right tabular", children: ["$", r.price.toFixed(2)] }), _jsxs(TableCell, { className: "text-right tabular", children: [r.filled, " / ", r.capacity] }), _jsx(TableCell, { children: _jsx(StatusPill, { status: r.status }) })] }, i))) })] }) }) }));
+}
+function DialogSection() {
+    return (_jsx(DocSection, { id: "dialog", title: "Dialog", description: "Focus-trapped, escape-to-close, returns focus to trigger. Accent CTA on the right; secondary on the left.", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "destructive", children: "Cancel game\u2026" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Cancel this game?" }), _jsx(DialogDescription, { children: "8 players will be refunded as credit and notified via email." })] }), _jsx(DialogBody, { children: _jsxs("p", { className: "text-sm text-text-muted", children: ["This action is logged and cannot be undone. Players will receive a credit of", " ", _jsx("span", { className: "tabular font-medium text-foreground", children: "$14.00" }), " ", "each, applied automatically to their next booking."] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", children: "Keep game" }), _jsx(Button, { variant: "destructive", children: "Cancel + refund all" })] })] })] }) }));
+}
+function ToastSection() {
+    return (_jsx(DocSection, { id: "toast", title: "Toasts", description: "Top-right, 4s auto-dismiss (persistent for danger). Status communicated via icon + color, never color alone.", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => toast.success("Booking confirmed.", {
+                        description: "Saturday, May 22 · 6:00 pm at Astoria Turf",
+                        icon: (_jsx(CheckCircle2, { className: "h-4 w-4 text-success", strokeWidth: 1.75 })),
+                    }), children: "Show success" }), _jsx(Button, { variant: "secondary", onClick: () => toast.warning("3 spots left.", {
+                        description: "Saturday's 7 pm at McCarren is filling fast.",
+                        icon: (_jsx(AlertTriangle, { className: "h-4 w-4 text-warning", strokeWidth: 1.75 })),
+                    }), children: "Show warning" }), _jsx(Button, { variant: "secondary", onClick: () => toast.error("Payment declined.", {
+                        description: "Try a different card or contact your bank.",
+                        icon: (_jsx(XCircle, { className: "h-4 w-4 text-danger", strokeWidth: 1.75 })),
+                        duration: 10000,
+                    }), children: "Show danger" }), _jsx(Button, { variant: "secondary", onClick: () => toast("Stream goes live at 6:00 pm.", {
+                        description: "Watch on DT Sports TV from any game page.",
+                        icon: _jsx(Info, { className: "h-4 w-4 text-info", strokeWidth: 1.75 }),
+                    }), children: "Show info" })] }) }));
+}
+function EmptyStateSection() {
+    return (_jsx(DocSection, { id: "empty", title: "Empty states", description: "Center-aligned text-sm. No illustrations. Subtle Lucide icon at most.", children: _jsx("div", { className: "rounded border border-border bg-background", children: _jsx(EmptyState, { icon: _jsx(Inbox, { className: "h-6 w-6", strokeWidth: 1.5 }), title: "No upcoming games", description: "Once you book or host a game, it will show up here.", action: _jsx(Button, { size: "sm", variant: "accent", children: "Browse games" }) }) }) }));
+}
+function AvatarsSection() {
+    return (_jsx(DocSection, { id: "avatars", title: "Avatars", description: "Fallback uses forest background with initials. Status dot indicates check-in state.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex items-end gap-3", children: [_jsx(Avatar, { name: "Alex Chen", size: "sm" }), _jsx(Avatar, { name: "Jordan Lee" }), _jsx(Avatar, { name: "Sam Patel", status: "checked-in" }), _jsx(Avatar, { name: "Maria Garcia", status: "booked" }), _jsx(Avatar, { name: "Danny Tran", size: "lg" })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Avatar name="Alex Chen" size="sm" />
+<Avatar name="Jordan Lee" />
+<Avatar name="Sam Patel"   status="checked-in" />
+<Avatar name="Maria Garcia" status="booked" />
+<Avatar name="Danny Tran"  size="lg" />` }) }) }));
+}
+function SkeletonSection() {
+    return (_jsxs(DocSection, { id: "skeleton", title: "Skeleton", description: "Use over spinners. The placeholder echoes the final layout so the transition feels immediate.", children: [_jsxs("div", { className: "rounded border border-border bg-background p-5 max-w-md space-y-3", children: [_jsx(Skeleton, { className: "h-4 w-1/3" }), _jsx(Skeleton, { className: "h-3 w-2/3" }), _jsx(Skeleton, { className: "h-3 w-1/2" }), _jsxs("div", { className: "flex gap-2 pt-2", children: [_jsx(Skeleton, { className: "h-8 w-20" }), _jsx(Skeleton, { className: "h-8 w-20" })] })] }), _jsx(DocSubsection, { title: "Composites", description: "Pre-built placeholders for the two most common list shapes \u2014 match rows/columns to the real data so nothing jumps on load.", children: _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsxs("div", { className: "text-xs font-medium text-text-muted mb-3", children: ["SkeletonList rows=", "{3}"] }), _jsx(SkeletonList, { rows: 3 })] }), _jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsxs("div", { className: "text-xs font-medium text-text-muted mb-3", children: ["SkeletonTable rows=", "{3}", " columns=", "{4}"] }), _jsx(SkeletonTable, { rows: 3, columns: 4 })] })] }) })] }));
+}
+function UXPatternsSection() {
+    return (_jsxs(DocSection, { id: "patterns", title: "UX patterns", description: "The principles above made concrete. These are the components you reach for to honor \u00A73 without thinking about it.", children: [_jsx(ThreeStatePatternDemo, {}), _jsx(MoneyBreakdownDemo, {}), _jsx(TimestampDemo, {}), _jsx(ConfirmActionDemo, {}), _jsx(UndoToastDemo, {})] }));
+}
+function ThreeStatePatternDemo() {
+    const [state, setState] = React.useState({
+        kind: "data",
+        data: ["Game A", "Game B"],
+    });
+    const states = [
+        {
+            label: "Loading",
+            value: { kind: "loading" },
+        },
+        { label: "Empty", value: { kind: "empty" } },
+        {
+            label: "Error",
+            value: {
+                kind: "error",
+                error: new Error("Network unreachable. Check your connection."),
+                retry: () => setState({ kind: "loading" }),
+            },
+        },
+        {
+            label: "Full",
+            value: {
+                kind: "data",
+                data: ["Sat 6pm · Astoria", "Sat 7pm · McCarren"],
+            },
+        },
+    ];
+    return (_jsxs(DocSubsection, { title: "Empty / loading / error / full", description: "Every list view uses this wrapper. Forces all four states to exist before merge. (\u00A73.14)", children: [_jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: states.map(({ label, value }) => (_jsx(Button, { size: "sm", variant: state.kind === value.kind ? "primary" : "secondary", onClick: () => setState(value), "aria-pressed": state.kind === value.kind, children: label }, label))) }), _jsx("div", { className: "rounded border border-border bg-background min-h-[160px]", children: _jsx(ThreeState, { state: state, empty: {
+                        icon: _jsx(Inbox, { className: "h-6 w-6", strokeWidth: 1.5 }),
+                        title: "No games this week",
+                        description: "Once you book or host one, it'll show up here.",
+                        action: (_jsx(Button, { size: "sm", variant: "accent", children: "Browse games" })),
+                    }, children: state.kind === "data" && (_jsx("ul", { className: "divide-y divide-border", children: state.data.map((row) => (_jsxs("li", { className: "flex items-center justify-between px-4 py-2.5 text-sm", children: [_jsx("span", { children: row }), _jsx(StatusPill, { status: "scheduled" })] }, row))) })) }) }), _jsx(CodeBlock, { language: "tsx", code: `<ThreeState
+  state={state}
+  empty={{ title: "No games this week", action: <Button>Browse</Button> }}
+>
+  <RealList items={state.kind === "data" ? state.data : []} />
+</ThreeState>` })] }));
+}
+function MoneyBreakdownDemo() {
+    return (_jsx(DocSubsection, { title: "Money breakdown", description: "Mandatory before any charge. Every line is named, signed, tabular-aligned. Receipt must match this verbatim. (\u00A73.15)", children: _jsx(PreviewCode, { preview: _jsx("div", { className: "w-full", children: _jsx(MoneyBreakdown, { lines: [
+                        { label: "Game fee", cents: 1400 },
+                        {
+                            label: "Credit applied",
+                            cents: -600,
+                            muted: true,
+                            hint: "From cancelled game on May 18",
+                        },
+                        { label: "Sales tax (8.875%)", cents: 71, muted: true },
+                    ], totalLabel: "Charged to card", totalCents: 871 }) }), code: _jsx(CodeBlock, { language: "tsx", code: `<MoneyBreakdown
+  lines={[
+    { label: "Game fee",       cents: 1400 },
+    { label: "Credit applied", cents: -600, muted: true },
+    { label: "Sales tax",      cents: 71,   muted: true },
+  ]}
+  totalLabel="Charged to card"
+  totalCents={871}
+/>` }) }) }));
+}
+function TimestampDemo() {
+    // Demo times are frozen at first render on purpose — recomputing "now"
+    // on every render would make the labels drift mid-session.
+    const [{ inThreeHours, fiveMinAgo, nextSaturday }] = React.useState(() => {
+        const now = Date.now();
+        const d = new Date(now);
+        d.setDate(d.getDate() + ((6 - d.getDay() + 7) % 7 || 7));
+        d.setHours(18, 0, 0, 0);
+        return {
+            inThreeHours: new Date(now + 3 * 3600 * 1000).toISOString(),
+            fiveMinAgo: new Date(now - 5 * 60 * 1000).toISOString(),
+            nextSaturday: d.toISOString(),
+        };
+    });
+    return (_jsx(DocSubsection, { title: "Timestamp", description: "Future events in venue tz with user-tz tooltip; within 24h show a ticker; past events relative within 7d. (\u00A73.16)", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-text-muted text-xs w-32", children: "In 3 hours" }), _jsx(Timestamp, { iso: inThreeHours, venueTz: "America/New_York", relative: true })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-text-muted text-xs w-32", children: "5 min ago" }), _jsx(Timestamp, { iso: fiveMinAgo, relative: true })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-text-muted text-xs w-32", children: "Next Saturday" }), _jsx(Timestamp, { iso: nextSaturday, venueTz: "America/New_York" })] }), _jsx("p", { className: "text-xs text-text-subtle pt-2", children: "Hover the timestamps with a different user TZ \u2192 tooltip reveals \"Your time:\" alongside venue time." })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Timestamp iso="2026-05-22T22:00:00Z" venueTz="America/New_York" relative />
+<Timestamp iso="2026-05-22T17:55:00Z" relative />
+<Timestamp iso="2026-05-29T22:00:00Z" venueTz="America/New_York" />` }) }) }));
+}
+function ConfirmActionDemo() {
+    return (_jsxs(DocSubsection, { title: "ConfirmAction", description: "One helper for every destructive / irreversible action. Requires concrete consequence text \u2014 abstract 'Are you sure?' is rejected by API. (\u00A73.11)", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(ConfirmAction, { title: "Cancel this game?", description: "This action is logged and cannot be undone.", consequence: _jsxs(_Fragment, { children: ["8 players will be refunded", " ", _jsx("span", { className: "tabular font-medium text-foreground", children: "$14.00" }), " ", "each as credit and notified via email."] }), confirmLabel: "Cancel + refund all", confirmVariant: "destructive", onConfirm: async () => {
+                            await new Promise((r) => setTimeout(r, 800));
+                            toast.success("Game cancelled. 8 refunds issued as credit.");
+                        }, children: _jsx(Button, { variant: "destructive", size: "sm", children: "Cancel game\u2026" }) }), _jsx(ConfirmAction, { title: "Refund this booking?", consequence: _jsxs(_Fragment, { children: ["Alex Chen will receive", " ", _jsx("span", { className: "tabular font-medium text-foreground", children: "$14.00" }), " ", "back to their card in 3\u20135 business days."] }), confirmLabel: "Refund $14.00", confirmVariant: "destructive", onConfirm: async () => {
+                            await new Promise((r) => setTimeout(r, 600));
+                            toast.success("Refund initiated.");
+                        }, children: _jsx(Button, { variant: "secondary", size: "sm", children: "Refund booking\u2026" }) })] }), _jsx(CodeBlock, { language: "tsx", code: `<ConfirmAction
+  title="Cancel this game?"
+  consequence="8 players will be refunded $14.00 each as credit and emailed."
+  confirmLabel="Cancel + refund all"
+  confirmVariant="destructive"
+  onConfirm={async () => await cancelGame(id)}
+>
+  <Button variant="destructive">Cancel game…</Button>
+</ConfirmAction>` })] }));
+}
+function UndoToastDemo() {
+    return (_jsxs(DocSubsection, { title: "Undo toast", description: "The right pattern for cheap reversals (delete draft, dismiss notification). 5s window. Money actions don't get undo \u2014 they get ConfirmAction. (\u00A73.7)", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+                            const tid = toast("Draft deleted.", {
+                                description: "Sat May 22 · 6:00 pm",
+                                duration: 5000,
+                                action: {
+                                    label: "Undo",
+                                    onClick: () => {
+                                        toast.success("Draft restored.");
+                                    },
+                                },
+                            });
+                            return tid;
+                        }, children: "Delete draft" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => toast("Notification dismissed.", {
+                            duration: 5000,
+                            action: {
+                                label: "Undo",
+                                onClick: () => toast.success("Notification restored."),
+                            },
+                        }), children: "Dismiss notification" })] }), _jsx(CodeBlock, { language: "tsx", code: `toast("Draft deleted.", {
+  description: "Sat May 22 · 6:00 pm",
+  duration: 5000,
+  action: { label: "Undo", onClick: () => restoreDraft(id) },
+});` })] }));
+}
+function MotionSection() {
+    return (_jsxs(DocSection, { id: "motion", title: "Motion", description: "150ms ease-out. No springs, no scale-on-hover, no parallax. The LIVE dot is the only continuously animated element.", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsx(LivePill, {}), _jsxs("span", { className: "text-sm text-text-muted", children: ["\u2190 Animation respects", " ", _jsx("code", { className: "font-mono", children: "prefers-reduced-motion" })] })] }), _jsx(CodeBlock, { language: "ts", code: `// tailwind.config.ts (excerpt)
+keyframes: {
+  "live-pulse": {
+    "0%, 100%": { opacity: "1" },
+    "50%":      { opacity: "0.4" },
+  },
+},
+animation: {
+  "live-pulse": "live-pulse 1.5s ease-in-out infinite",
+},` })] }));
+}
+function AccessibilitySection() {
+    const checks = [
+        [
+            "Color contrast",
+            "All text ≥ WCAG AA; AAA where possible. White-on-lime is forbidden.",
+        ],
+        [
+            "Focus rings",
+            ":focus-visible across all interactive elements. 2px brand-forest @ 50%, 2px offset.",
+        ],
+        [
+            "Tap targets",
+            "32px+ on default buttons / inputs. Smaller sizes only in dense toolbars.",
+        ],
+        [
+            "Status semantics",
+            "Color never alone — every status badge has text and/or icon.",
+        ],
+        [
+            "Reduced motion",
+            "globals.css disables animations + transitions when prefers-reduced-motion is set.",
+        ],
+        [
+            "Form a11y",
+            "Every input has a Label with htmlFor. Errors use aria-invalid + aria-describedby.",
+        ],
+        [
+            "Dialogs",
+            "Radix handles focus-trap, escape-to-close, focus return. Title + Description wired to aria.",
+        ],
+        [
+            "Tables",
+            "<th scope='col'>. Sortable columns announce sort state via aria-sort.",
+        ],
+        ["Skip link", "First focusable element jumps to <main id='main'>."],
+        [
+            "Icons",
+            "Decorative icons get aria-hidden; meaningful icons get aria-label or accompanying text.",
+        ],
+    ];
+    return (_jsx(DocSection, { id: "a11y", title: "Accessibility", description: "Baked in \u2014 every primitive ships with the rules below. Verify with axe DevTools before merging UI changes.", children: _jsx("ul", { className: "rounded border border-border bg-background divide-y divide-border", children: checks.map(([label, body]) => (_jsxs("li", { className: "flex gap-3 px-4 py-3", children: [_jsx(CheckCircle2, { className: "h-4 w-4 mt-0.5 shrink-0 text-brand-forest", strokeWidth: 2 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium", children: label }), _jsx("div", { className: "text-xs text-text-muted mt-0.5", children: body })] })] }, label))) }) }));
+}
+function UsageSection() {
+    return (_jsxs(DocSection, { id: "usage", title: "Using the system", description: "How to consume the components, extend variants, and respect the rules.", children: [_jsx(DocSubsection, { title: "Import paths", description: "Everything ships from one entry. The package is a workspace dep \u2014 no build step, source TS is consumed directly via Next's transpilePackages.", children: _jsx(CodeBlock, { language: "tsx", code: `import {
+  Button, Input, Label, Badge,
+  Card, CardHeader, CardTitle, CardContent, CardFooter,
+  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter,
+  LivePill, StatusPill, MetricTile, EmptyState, Avatar, Skeleton,
+  Timestamp, MoneyBreakdown, ThreeState, ConfirmAction,
+  ThemeProvider, useTheme, ThemeToggle,
+  cn,
+  type GameStatus, type ListState,
+} from "@dtsports/design-system";
+
+import { toast } from "@dtsports/design-system";` }) }), _jsx(DocSubsection, { title: "Composing classes with cn()", description: "Use cn() to merge Tailwind classes so callers can override variants without duplication.", children: _jsx(CodeBlock, { language: "tsx", code: `import { cn } from "@dtsports/design-system";
+
+export function MyCard({ className, ...props }) {
+  return (
+    <div
+      className={cn("rounded border border-border bg-background p-4", className)}
+      {...props}
+    />
+  );
+}` }) }), _jsx(DocSubsection, { title: "Dark mode", description: "The ThemeProvider toggles a `dark` class on <html>. All design tokens have a dark counterpart in globals.css. Components don't need any dark: classes \u2014 they inherit the variables.", children: _jsxs("div", { className: "flex items-center gap-3 text-sm text-text-muted", children: ["Try the toggle in the topbar (top right). ", _jsx(ThemeToggle, {})] }) }), _jsx(DocSubsection, { title: "Adding a new variant", description: "Edit the variant's cva() call in components/ui/<name>.tsx. Keep new variants minimal \u2014 if a use case fits an existing one, prefer that.", children: _jsx(CodeBlock, { language: "tsx", code: `// components/ui/button.tsx
+const buttonVariants = cva(/* base classes */, {
+  variants: {
+    variant: {
+      // existing variants...
+      success: "bg-success text-white hover:bg-success/90", // new
+    },
+  },
+});` }) }), _jsx(DocSubsection, { title: "Do / don't", description: "Quick reference. If in doubt, default to the left column.", children: _jsxs("div", { className: "grid md:grid-cols-2 gap-3", children: [_jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-[0.04em] text-brand-forest mb-2", children: "Do" }), _jsxs("ul", { className: "text-sm text-foreground space-y-1.5", children: [_jsx("li", { children: "\u00B7 Default to text-sm (13px)" }), _jsx("li", { children: "\u00B7 Tables for any list of 3+ structured rows" }), _jsx("li", { children: "\u00B7 1px borders for separation" }), _jsx("li", { children: "\u00B7 Forest first, lime for the loudest CTA only" }), _jsx("li", { children: "\u00B7 Right-align numbers + add .tabular" }), _jsx("li", { children: "\u00B7 Skeletons over spinners" }), _jsx("li", { children: "\u00B7 Pair status colors with icons or labels" })] })] }), _jsxs("div", { className: "rounded border border-border bg-background p-4", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-[0.04em] text-danger mb-2", children: "Don't" }), _jsxs("ul", { className: "text-sm text-foreground space-y-1.5", children: [_jsx("li", { children: "\u00B7 rounded-xl / rounded-2xl anywhere" }), _jsx("li", { children: "\u00B7 White text on lime" }), _jsx("li", { children: "\u00B7 Multiple accent (lime) buttons on one screen" }), _jsx("li", { children: "\u00B7 Emojis in product UI" }), _jsx("li", { children: "\u00B7 Scale-on-hover or bouncy animations" }), _jsx("li", { children: "\u00B7 Tinted card backgrounds to indicate stacking" }), _jsx("li", { children: "\u00B7 Title Case in UI labels" })] })] })] }) })] }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch A — Forms                                                          */
+/* ─────────────────────────────────────────────────────────────────────── */
+function CheckboxSection() {
+    const [marketing, setMarketing] = React.useState(false);
+    return (_jsx(DocSection, { id: "checkbox", title: "Checkbox", description: "Square 16px control. Brand-forest fill when checked. Supports `indeterminate` (e.g., partial selection in a tree). Always pair with a Label or use FormField.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "ck-waiver", defaultChecked: true }), _jsx(Label, { htmlFor: "ck-waiver", className: "normal-case tracking-normal text-sm font-normal cursor-pointer", children: "I've read and accept the waiver" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "ck-credit" }), _jsx(Label, { htmlFor: "ck-credit", className: "normal-case tracking-normal text-sm font-normal cursor-pointer", children: "Apply $6.00 credit at checkout" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "ck-ind", checked: marketing, onCheckedChange: setMarketing }), _jsx(Label, { htmlFor: "ck-ind", className: "normal-case tracking-normal text-sm font-normal cursor-pointer", children: "Marketing emails (indeterminate when toggled)" }), _jsx(Button, { size: "xs", variant: "ghost", onClick: () => setMarketing(marketing === "indeterminate" ? false : "indeterminate"), children: "toggle" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "ck-disabled", disabled: true, defaultChecked: true }), _jsx(Label, { htmlFor: "ck-disabled", className: "normal-case tracking-normal text-sm font-normal opacity-60", children: "Disabled (locked in)" })] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<div className="flex items-center gap-2">
+  <Checkbox id="ck" defaultChecked />
+  <Label htmlFor="ck">I've read and accept the waiver</Label>
+</div>
+
+{/* Indeterminate state */}
+<Checkbox checked="indeterminate" onCheckedChange={…} />` }) }) }));
+}
+function RadioSection() {
+    const [skill, setSkill] = React.useState("mixed");
+    return (_jsx(DocSection, { id: "radio", title: "Radio group", description: "Pick one from a small set. Keyboard nav (Arrow / Home / End) handled by Radix. For >5 options, prefer Select.", children: _jsx(PreviewCode, { preview: _jsx(RadioGroup, { value: skill, onValueChange: setSkill, children: [
+                    ["beginner", "Beginner", "Learning the basics"],
+                    ["intermediate", "Intermediate", "Comfortable with the rules"],
+                    ["mixed", "Mixed skill", "Open to anyone"],
+                    ["advanced", "Advanced", "Competitive only"],
+                ].map(([value, title, desc]) => (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx(RadioGroupItem, { value: value, id: `rg-${value}`, className: "mt-0.5" }), _jsxs(Label, { htmlFor: `rg-${value}`, className: "normal-case tracking-normal cursor-pointer", children: [_jsx("span", { className: "block text-sm font-medium text-foreground", children: title }), _jsx("span", { className: "block text-xs text-text-muted mt-0.5", children: desc })] })] }, value))) }), code: _jsx(CodeBlock, { language: "tsx", code: `<RadioGroup value={skill} onValueChange={setSkill}>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="beginner" id="b" />
+    <Label htmlFor="b">Beginner</Label>
+  </div>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="advanced" id="a" />
+    <Label htmlFor="a">Advanced</Label>
+  </div>
+</RadioGroup>` }) }) }));
+}
+function SwitchSection() {
+    return (_jsx(DocSection, { id: "switch", title: "Switch", description: "For instantly-applied toggles (notifications, quiet hours, theme). Use Checkbox for form fields that need an explicit Save.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3 max-w-md", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "sw-credits", className: "normal-case tracking-normal text-sm font-normal flex-1 cursor-pointer", children: "Auto-apply credits at checkout" }), _jsx(Switch, { id: "sw-credits", defaultChecked: true })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { htmlFor: "sw-quiet", className: "normal-case tracking-normal text-sm font-normal cursor-pointer", children: "SMS quiet hours" }), _jsx("p", { className: "text-xs text-text-muted mt-0.5", children: "No SMS 9 pm \u2013 8 am local" })] }), _jsx(Switch, { id: "sw-quiet", defaultChecked: true })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "sw-disabled", className: "normal-case tracking-normal text-sm font-normal flex-1 opacity-60", children: "Push notifications (not yet enabled)" }), _jsx(Switch, { id: "sw-disabled", disabled: true })] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<div className="flex items-center justify-between">
+  <Label htmlFor="sw-credits">Auto-apply credits</Label>
+  <Switch id="sw-credits" defaultChecked />
+</div>` }) }) }));
+}
+function SelectSection() {
+    const [venue, setVenue] = React.useState("");
+    return (_jsx(DocSection, { id: "select", title: "Select", description: "Keyboard-accessible dropdown. Use for venue/field/sport pickers and other curated lists. Supports groups, labels, separators.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "max-w-xs", children: [_jsxs(Select, { value: venue, onValueChange: setVenue, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Pick a venue" }) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "NYC" }), _jsx(SelectItem, { value: "astoria", children: "Astoria Turf" }), _jsx(SelectItem, { value: "mccarren", children: "McCarren Park" })] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Coming soon" }), _jsx(SelectItem, { value: "williamsburg", disabled: true, children: "Williamsburg Field" }), _jsx(SelectItem, { value: "bushwick", disabled: true, children: "Bushwick Park" })] })] })] }), venue && (_jsxs("p", { className: "mt-2 text-xs text-text-muted tabular", children: ["Selected: ", _jsx("span", { className: "font-mono", children: venue })] }))] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Select value={venue} onValueChange={setVenue}>
+  <SelectTrigger>
+    <SelectValue placeholder="Pick a venue" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>NYC</SelectLabel>
+      <SelectItem value="astoria">Astoria Turf</SelectItem>
+      <SelectItem value="mccarren">McCarren Park</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>` }) }) }));
+}
+function TextareaSection() {
+    return (_jsx(DocSection, { id: "textarea", title: "Textarea", description: "Multi-line input. Same focus / aria-invalid pattern as Input. Defaults to vertical resize only.", children: _jsx(PreviewCode, { preview: _jsx(Textarea, { defaultValue: `- Turf shoes or flats only — no metal cleats.
+- Bring two shirt colors (dark / light).
+- Arrive 10 minutes before start.`, placeholder: "House rules\u2026", className: "max-w-md", rows: 5 }), code: _jsx(CodeBlock, { language: "tsx", code: `<Textarea
+  placeholder="House rules…"
+  defaultValue="- Turf shoes only…"
+  rows={5}
+/>
+
+{/* Error state */}
+<Textarea aria-invalid="true" />` }) }) }));
+}
+function NumberInputSection() {
+    const [capacity, setCapacity] = React.useState(10);
+    const [price, setPrice] = React.useState(14);
+    return (_jsx(DocSection, { id: "number-input", title: "Number input", description: "Stepper-style numeric input with +/\u2212 buttons. Use for capacity, min-to-run, price, quantity. Always set min/max for safety.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex items-end gap-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "ni-cap", children: "Capacity" }), _jsx(NumberInput, { id: "ni-cap", value: capacity, onChange: setCapacity, min: 2, max: 22, step: 1, className: "mt-1.5" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "ni-price", children: "Base price ($)" }), _jsx(NumberInput, { id: "ni-price", value: price, onChange: setPrice, min: 0, max: 100, step: 1, className: "mt-1.5" })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                            setCapacity(10);
+                            setPrice(14);
+                        }, children: "Reset" })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<NumberInput
+  value={capacity}
+  onChange={setCapacity}
+  min={2}
+  max={22}
+  step={1}
+/>` }) }) }));
+}
+function FormFieldSection() {
+    return (_jsxs(DocSection, { id: "form-field", title: "Form field", description: "Composition wrapper. Auto-generates an id, links the Label, and injects aria-describedby / aria-invalid into the control. Switch between helper and error text via props.", children: [_jsx(Example, { children: _jsxs("form", { className: "grid gap-4 max-w-md", onSubmit: (e) => {
+                        e.preventDefault();
+                        toast.success("Form submitted (demo).");
+                    }, noValidate: true, children: [_jsx(FormField, { label: "Email", required: true, helper: "We'll send booking confirmations here.", children: _jsx(Input, { type: "email", placeholder: "you@dtsports.tv", autoComplete: "email", required: true }) }), _jsx(FormField, { label: "Skill level", helper: "Helps us match you with the right games.", children: _jsxs(Select, { defaultValue: "mixed", children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "beginner", children: "Beginner" }), _jsx(SelectItem, { value: "intermediate", children: "Intermediate" }), _jsx(SelectItem, { value: "mixed", children: "Mixed" }), _jsx(SelectItem, { value: "advanced", children: "Advanced" })] })] }) }), _jsx(FormField, { label: "House rules", helper: "Markdown, one bullet per rule.", children: _jsx(Textarea, { rows: 4, defaultValue: "- Turf shoes only.\\n- Bring two shirt colors." }) }), _jsx(FormField, { label: "Card number", required: true, error: "Card number is too short.", children: _jsx(Input, { defaultValue: "4242 4242" }) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", type: "button", children: "Cancel" }), _jsx(Button, { variant: "accent", type: "submit", children: "Submit" })] })] }) }), _jsx(CodeBlock, { language: "tsx", code: `<FormField
+  label="Email"
+  required
+  helper="We'll send booking confirmations here."
+>
+  <Input type="email" autoComplete="email" />
+</FormField>
+
+{/* Error replaces helper, sets aria-invalid + aria-describedby */}
+<FormField label="Card" required error="Card number is too short.">
+  <Input />
+</FormField>` })] }));
+}
+function AlertSection() {
+    const [dismissed, setDismissed] = React.useState(false);
+    return (_jsxs(DocSection, { id: "alert", title: "Alert", description: "Inline status messages that stay put. Use Toast for transient feedback; use Alert when the message belongs inline. Danger variant uses role='alert' for SR interruption.", children: [_jsxs("div", { className: "space-y-3 max-w-2xl", children: [_jsx(Alert, { variant: "info", title: "DT Sports TV streams on YouTube.", children: "Paste any YouTube URL when creating a game \u2014 we embed it automatically." }), _jsx(Alert, { variant: "warning", title: "1 game below minimum to run", children: "Astoria \u00B7 Field B \u00B7 8 pm has 2/6. Promote from waitlist or cancel + refund before 6 pm." }), _jsx(Alert, { variant: "danger", title: "Payment failed", children: "Your bank declined the charge. Try a different card or contact your bank." }), _jsx(Alert, { variant: "success", title: "Booking confirmed.", children: "Saturday, May 25 at 6:00 pm at Astoria Turf \u00B7 Field A." }), !dismissed && (_jsx(Alert, { variant: "info", title: "Dismissible", dismissible: true, onDismiss: () => setDismissed(true), children: "Set `dismissible` and provide `onDismiss` for a close button." })), dismissed && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setDismissed(false), children: "Restore dismissed alert" }))] }), _jsx(CodeBlock, { language: "tsx", code: `<Alert variant="warning" title="1 game below minimum">
+  Astoria Field B at 8 pm needs 4 more.
+</Alert>
+
+<Alert variant="info" dismissible onDismiss={() => …}>
+  …
+</Alert>` })] }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Mid-page additions                                                       */
+/* ─────────────────────────────────────────────────────────────────────── */
+function CapacitySection() {
+    return (_jsx(DocSection, { id: "capacity", title: "Capacity bar", description: "The spots-filled visualization used everywhere games appear. Three colors: forest (normal), warning (below minToRun), foreground (full). Includes role='progressbar' and a default aria-label.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3 max-w-md", children: [_jsx(CapacityBar, { filled: 3, capacity: 10, minToRun: 6 }), _jsx(CapacityBar, { filled: 5, capacity: 10, minToRun: 6 }), _jsx(CapacityBar, { filled: 8, capacity: 10, minToRun: 6 }), _jsx(CapacityBar, { filled: 10, capacity: 10, minToRun: 6 }), _jsx("div", { className: "pt-2", children: _jsx(CapacityBar, { filled: 4, capacity: 10, minToRun: 6, size: "lg" }) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<CapacityBar filled={8} capacity={10} minToRun={6} />
+
+{/* Hide count */}
+<CapacityBar filled={3} capacity={10} showCount={false} />
+
+{/* Larger */}
+<CapacityBar filled={4} capacity={10} size="lg" />` }) }) }));
+}
+function TabsSection() {
+    return (_jsxs(DocSection, { id: "tabs", title: "Tabs", description: "Underline-style horizontal tabs. Keyboard nav (\u2190/\u2192/Home/End) handled by Radix. Use for time-window filters or status filters in dashboards.", children: [_jsxs(Tabs, { defaultValue: "today", className: "w-full", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "today", children: "Today" }), _jsxs(TabsTrigger, { value: "week", children: ["This week", _jsx(Badge, { variant: "neutral", size: "xs", children: "12" })] }), _jsx(TabsTrigger, { value: "past", children: "Past" }), _jsx(TabsTrigger, { value: "cancelled", disabled: true, children: "Cancelled" })] }), _jsx(TabsContent, { value: "today", children: _jsx("div", { className: "rounded border border-border bg-background p-4 text-sm text-text-muted", children: "6 games scheduled for today." }) }), _jsx(TabsContent, { value: "week", children: _jsx("div", { className: "rounded border border-border bg-background p-4 text-sm text-text-muted", children: "12 games this week across 2 venues." }) }), _jsx(TabsContent, { value: "past", children: _jsx("div", { className: "rounded border border-border bg-background p-4 text-sm text-text-muted", children: "Past games would render here." }) })] }), _jsx(CodeBlock, { language: "tsx", code: `<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>` })] }));
+}
+function AccordionSection() {
+    return (_jsxs(DocSection, { id: "accordion", title: "Accordion", description: "Stacked expandable sections. `type='single' collapsible` for FAQ-style, `type='multiple'` for settings panels. The chevron rotates on open.", children: [_jsxs(Accordion, { type: "single", collapsible: true, className: "max-w-2xl rounded border border-border bg-background px-4", children: [_jsxs(AccordionItem, { value: "rules", children: [_jsx(AccordionTrigger, { children: "House rules \u2014 Astoria Turf" }), _jsx(AccordionContent, { children: _jsxs("ul", { className: "text-sm text-text-muted space-y-1.5", children: [_jsx("li", { children: "\u00B7 Turf shoes or flats only \u2014 no metal cleats." }), _jsx("li", { children: "\u00B7 Bring two shirt colors (dark / light)." }), _jsx("li", { children: "\u00B7 Arrive 10 minutes before start for check-in." }), _jsx("li", { children: "\u00B7 No spectators on the turf \u2014 sideline benches only." })] }) })] }), _jsxs(AccordionItem, { value: "policy", children: [_jsx(AccordionTrigger, { children: "Cancellation policy" }), _jsx(AccordionContent, { children: _jsx("p", { className: "text-sm text-text-muted", children: "Refunds are issued as DT Sports credit (instant). Cancel 24h+ for full credit, less than 2h for none. DT Sports cancellations are always 100%." }) })] }), _jsxs(AccordionItem, { value: "about", children: [_jsx(AccordionTrigger, { children: "About this format" }), _jsx(AccordionContent, { children: _jsx("p", { className: "text-sm text-text-muted", children: "5v5 turf soccer, 90 minutes, two halves. We balance teams on-site after warm-ups." }) })] })] }), _jsx(CodeBlock, { language: "tsx", code: `<Accordion type="single" collapsible>
+  <AccordionItem value="rules">
+    <AccordionTrigger>House rules</AccordionTrigger>
+    <AccordionContent>…</AccordionContent>
+  </AccordionItem>
+</Accordion>` })] }));
+}
+function DrawerSection() {
+    return (_jsxs(DocSection, { id: "drawer", title: "Drawer", description: "Side-pushed panel for secondary tasks. Use instead of nested dialogs (per \u00A73.17). Default side is right; `side='bottom'` for mobile filter sheets.", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Drawer, { children: [_jsx(DrawerTrigger, { asChild: true, children: _jsxs(Button, { variant: "secondary", children: [_jsx(Edit, { className: "h-4 w-4", strokeWidth: 1.75 }), "Edit game (right)"] }) }), _jsxs(DrawerContent, { side: "right", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Edit game" }), _jsx(DrawerDescription, { children: "Astoria Turf \u00B7 Field A \u00B7 Sat May 25, 6:00 pm" })] }), _jsx(DrawerBody, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(FormField, { label: "Capacity", children: _jsx(NumberInput, { defaultValue: 10, min: 2, max: 22 }) }), _jsx(FormField, { label: "Base price", children: _jsx(NumberInput, { defaultValue: 14, min: 0, max: 100 }) }), _jsx(FormField, { label: "Notes", helper: "Visible to players in confirmation email.", children: _jsx(Textarea, { rows: 3, placeholder: "Optional\u2026" }) })] }) }), _jsxs(DrawerFooter, { children: [_jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", children: "Save changes" })] })] })] }), _jsxs(Drawer, { children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Filters (bottom)" }) }), _jsxs(DrawerContent, { side: "bottom", children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: "Filters" }) }), _jsx(DrawerBody, { children: _jsx("p", { className: "text-sm text-text-muted", children: "A bottom drawer is the right pattern for mobile filter sheets." }) })] })] })] }), _jsx(CodeBlock, { language: "tsx", code: `<Drawer>
+  <DrawerTrigger asChild><Button>Edit…</Button></DrawerTrigger>
+  <DrawerContent side="right">
+    <DrawerHeader>
+      <DrawerTitle>Edit game</DrawerTitle>
+      <DrawerDescription>Astoria Turf · Field A</DrawerDescription>
+    </DrawerHeader>
+    <DrawerBody>…</DrawerBody>
+    <DrawerFooter>
+      <Button variant="ghost">Cancel</Button>
+      <Button>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>` })] }));
+}
+function PopoverSection() {
+    return (_jsxs(DocSection, { id: "popover", title: "Popover", description: "Generic click-to-open floating panel. Use for date pickers, mini filter menus, inline 'quick edit' forms. For action menus, use DropdownMenu.", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "secondary", size: "sm", children: [_jsx(Info, { className: "h-4 w-4", strokeWidth: 1.75 }), "Quick add player"] }) }), _jsx(PopoverContent, { children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold", children: "Walk-in player" }), _jsx("p", { className: "text-xs text-text-muted mt-0.5", children: "Add a player who showed up without booking." })] }), _jsx(FormField, { label: "Name", children: _jsx(Input, { placeholder: "Alex Chen" }) }), _jsx(FormField, { label: "Charge", children: _jsx(NumberInput, { defaultValue: 14, min: 0, max: 50 }) }), _jsx(Button, { size: "sm", variant: "accent", className: "w-full", children: "Add & charge" })] }) })] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Popover>
+  <PopoverTrigger asChild><Button>Quick add</Button></PopoverTrigger>
+  <PopoverContent>
+    <h4>Walk-in player</h4>
+    …
+  </PopoverContent>
+</Popover>` })] }));
+}
+function DropdownSection() {
+    const [autoApply, setAutoApply] = React.useState(true);
+    return (_jsxs(DocSection, { id: "dropdown", title: "Dropdown menu", description: "Actions menu (kebab on table rows, user avatar menu). Supports labels, separators, checkbox items, sub-menus, keyboard shortcuts. NOT for selecting a value \u2014 use Select for that.", children: [_jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "More actions", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.75 }) }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(DropdownMenuLabel, { children: "Game \u00B7 Astoria \u00B7 6 pm" }), _jsxs(DropdownMenuItem, { onSelect: () => toast("View roster."), children: [_jsx(Users, { className: "h-3.5 w-3.5", strokeWidth: 1.75 }), "View roster", _jsx(DropdownMenuShortcut, { children: "\u2318R" })] }), _jsxs(DropdownMenuItem, { onSelect: () => toast("Edit game."), children: [_jsx(Edit, { className: "h-3.5 w-3.5", strokeWidth: 1.75 }), "Edit", _jsx(DropdownMenuShortcut, { children: "\u2318E" })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuCheckboxItem, { checked: autoApply, onCheckedChange: (c) => setAutoApply(!!c), children: "Auto-promote waitlist" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-danger focus:text-danger focus:bg-danger/10", onSelect: () => toast.error("Cancel-game flow not built yet."), children: [_jsx(Trash2, { className: "h-3.5 w-3.5", strokeWidth: 1.75 }), "Cancel game\u2026"] })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "secondary", size: "sm", children: [_jsx(Settings, { className: "h-3.5 w-3.5", strokeWidth: 1.75 }), "Settings", _jsx(ChevronDown, { className: "h-3 w-3 opacity-60", strokeWidth: 1.75 })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: "Profile" }), _jsx(DropdownMenuItem, { children: "Edit profile" }), _jsx(DropdownMenuItem, { children: "Notification preferences" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-danger focus:text-danger focus:bg-danger/10", children: ["Sign out", _jsx(DropdownMenuShortcut, { children: "\u2318Q" })] })] })] })] }), _jsx(CodeBlock, { language: "tsx", code: `<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button size="icon"><MoreHorizontal /></Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Game</DropdownMenuLabel>
+    <DropdownMenuItem>View roster</DropdownMenuItem>
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuCheckboxItem checked={auto} onCheckedChange={setAuto}>
+      Auto-promote waitlist
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem className="text-danger">Cancel…</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>` })] }));
+}
+function TooltipSection() {
+    return (_jsxs(DocSection, { id: "tooltip", title: "Tooltip", description: "Keyboard-accessible hover hints. Preferred over native title= (mouse-only). The TooltipProvider is already wired into ThemeProvider \u2014 no extra setup needed in your app.", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "View roster", children: _jsx(Users, { className: "h-4 w-4", strokeWidth: 1.75 }) }) }), _jsx(TooltipContent, { children: "View roster" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Edit game", children: _jsx(Edit, { className: "h-4 w-4", strokeWidth: 1.75 }) }) }), _jsx(TooltipContent, { children: "Edit game \u00B7 \u2318E" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Delete", children: _jsx(Trash2, { className: "h-4 w-4 text-danger", strokeWidth: 1.75 }) }) }), _jsx(TooltipContent, { children: "Delete (no undo)" })] }), _jsx("span", { className: "text-xs text-text-muted ml-3", children: "Tab through them \u2014 tooltips appear on keyboard focus, not just mouse." })] }), _jsx(CodeBlock, { language: "tsx", code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button size="icon" aria-label="View roster">
+      <Users />
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>View roster</TooltipContent>
+</Tooltip>` })] }));
+}
+function SeparatorSection() {
+    return (_jsxs(DocSection, { id: "separator", title: "Separator", description: "Thin divider (<hr> horizontal, vertical bar). Decorative by default; set decorative={false} when it semantically separates groups.", children: [_jsxs("div", { className: "rounded border border-border bg-background p-4 max-w-md", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-sm font-semibold", children: "Saturday's games" }), _jsx("p", { className: "text-xs text-text-muted", children: "3 venues \u00B7 6 games" })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "flex h-5 items-center gap-3 text-sm", children: [_jsx("div", { className: "tabular", children: "6:00 pm" }), _jsx(Separator, { orientation: "vertical" }), _jsx("div", { children: "Astoria \u00B7 Field A" }), _jsx(Separator, { orientation: "vertical" }), _jsx("div", { className: "tabular text-text-muted", children: "8/10" })] })] }), _jsx(CodeBlock, { language: "tsx", code: `<Separator />            {/* horizontal */}
+<Separator orientation="vertical" />` })] }));
+}
+function SpinnerSection() {
+    return (_jsx(DocSection, { id: "spinner", title: "Spinner", description: "Tiny inline loader for buttons and per-row 'working' state. Prefer Skeleton for full-region loading (per \u00A73.14).", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, {}), _jsx(Spinner, { size: "lg" }), _jsxs(Button, { variant: "primary", disabled: true, children: [_jsx(Spinner, { size: "sm" }), " Processing payment\u2026"] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Spinner size="sm" />
+<Spinner />
+<Spinner size="lg" />
+
+{/* In a button */}
+<Button disabled>
+  <Spinner size="sm" /> Processing…
+</Button>` }) }) }));
+}
+function ProgressSection() {
+    const [value, setValue] = React.useState(33);
+    return (_jsx(DocSection, { id: "progress", title: "Progress", description: "For multi-step flows with a known percent (waiver \u2192 emergency contact \u2192 done; file uploads). For spots filled, use CapacityBar. For unknown duration, use Spinner or Skeleton.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-4 max-w-md", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsx("span", { className: "text-xs text-text-muted", children: "Step 1 of 3 \u2014 Profile" }), _jsxs("span", { className: "text-xs tabular font-medium", children: [value, "%"] })] }), _jsx(Progress, { value: value })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setValue(Math.max(0, value - 33)), children: "Back" }), _jsx(Button, { size: "sm", variant: "primary", onClick: () => setValue(Math.min(100, value + 33)), children: "Next" })] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Progress value={66} />
+
+{/* With label + percent */}
+<div className="flex justify-between text-xs">
+  <span>Step 2 of 3</span>
+  <span>66%</span>
+</div>
+<Progress value={66} />` }) }) }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch C — Data + display additions                                       */
+/* ─────────────────────────────────────────────────────────────────────── */
+function ChipSection() {
+    const [filters, setFilters] = React.useState([
+        "Astoria Turf",
+        "Sat 5/24",
+        "5v5",
+    ]);
+    const remove = (label) => setFilters(filters.filter((f) => f !== label));
+    return (_jsx(DocSection, { id: "chip", title: "Chip", description: "Small removable token \u2014 use for active filter indicators, applied tags, selected options in a multi-select summary. Distinct from Badge: Chips are interactive.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-text-muted mr-1", children: "Active filters:" }), filters.length === 0 && (_jsx("span", { className: "text-xs text-text-subtle italic", children: "no filters \u00B7 click below to add some back" })), filters.map((f) => (_jsx(Chip, { onRemove: () => remove(f), children: f }, f)))] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Chip, { variant: "accent", children: "accent" }), _jsx(Chip, { variant: "neutral", children: "neutral" }), _jsx(Chip, { variant: "outline", children: "outline" }), _jsx(Chip, { variant: "accent", onRemove: () => { }, children: "with \u00D7 button" })] }), filters.length < 3 && (_jsx(Button, { size: "xs", variant: "ghost", onClick: () => setFilters(["Astoria Turf", "Sat 5/24", "5v5"]), children: "Reset" }))] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Chip onRemove={() => removeFilter("astoria")}>
+  Astoria Turf
+</Chip>
+
+<Chip variant="neutral">Soccer</Chip>
+<Chip variant="outline">5v5</Chip>` }) }) }));
+}
+function SpecSection() {
+    return (_jsx(DocSection, { id: "spec", title: "Spec list", description: "Semantic key-value display (<dl> / <dt> / <dd>). Use for 'About this game' panels, settings summaries, receipts. Grid columns 1\u20134.", children: _jsx(PreviewCode, { preview: _jsxs(Card, { className: "max-w-2xl", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: "About this game" }) }), _jsx(CardContent, { children: _jsxs(SpecList, { columns: 2, children: [_jsx(Spec, { label: "Sport", children: "Soccer" }), _jsx(Spec, { label: "Format", children: "5v5" }), _jsx(Spec, { label: "Skill level", children: "Mixed" }), _jsx(Spec, { label: "Capacity", children: _jsx("span", { className: "tabular", children: "10 players (6 min to run)" }) }), _jsx(Spec, { label: "Venue", children: "Astoria Turf \u00B7 Field A" }), _jsx(Spec, { label: "Address", children: "19-04 30th Dr, Astoria, NY" })] }) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<SpecList columns={2}>
+  <Spec label="Format">5v5</Spec>
+  <Spec label="Capacity">10 players</Spec>
+  <Spec label="Start"><Timestamp iso={…} /></Spec>
+</SpecList>` }) }) }));
+}
+function PaginationSection() {
+    const [page, setPage] = React.useState(1);
+    return (_jsxs(DocSection, { id: "pagination", title: "Pagination", description: "Use when total > 1. For URL-driven pagination per \u00A73.9, wire onPageChange to router.replace(?page=N) \u2014 that gives you a shareable + back-button-safe URL.", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs text-text-muted tabular", children: ["Page ", page, " of 28"] }), _jsx(Pagination, { currentPage: page, totalPages: 28, onPageChange: setPage })] }), _jsx("div", { className: "text-xs text-text-subtle", children: "Examples below for different total counts:" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Pagination, { currentPage: 1, totalPages: 3, onPageChange: () => { } }), _jsx(Pagination, { currentPage: 1, totalPages: 10, onPageChange: () => { } }), _jsx(Pagination, { currentPage: 50, totalPages: 100, onPageChange: () => { } })] })] }), _jsx(CodeBlock, { language: "tsx", code: `<Pagination
+  currentPage={page}
+  totalPages={totalPages}
+  onPageChange={setPage}
+/>
+
+{/* URL-driven (recommended) */}
+const setPage = (p: number) =>
+  router.replace(\`?page=\${p}\`, { scroll: false });` })] }));
+}
+function AvatarGroupSection() {
+    return (_jsx(DocSection, { id: "avatar-group", title: "Avatar group", description: "Stacked overlapping avatars with a +N overflow pill. Use for roster previews and 'N people booked' indicators.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3", children: [_jsxs(AvatarGroup, { max: 4, label: "8 players booked", children: [_jsx(Avatar, { name: "Alex Chen" }), _jsx(Avatar, { name: "Jordan Lee" }), _jsx(Avatar, { name: "Sam Patel", status: "checked-in" }), _jsx(Avatar, { name: "Maria Garcia" }), _jsx(Avatar, { name: "Danny Tran" }), _jsx(Avatar, { name: "Priya Singh" }), _jsx(Avatar, { name: "Ethan Brooks" }), _jsx(Avatar, { name: "Nina Park" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(AvatarGroup, { max: 3, size: "sm", children: [_jsx(Avatar, { name: "Alex Chen", size: "sm" }), _jsx(Avatar, { name: "Jordan Lee", size: "sm" }), _jsx(Avatar, { name: "Sam Patel", size: "sm" }), _jsx(Avatar, { name: "Maria Garcia", size: "sm" }), _jsx(Avatar, { name: "Danny Tran", size: "sm" })] }), _jsx("span", { className: "text-xs text-text-muted", children: "Compact size for table rows." })] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<AvatarGroup max={4} label="8 players booked">
+  <Avatar name="Alex Chen" />
+  <Avatar name="Jordan Lee" />
+  <Avatar name="Sam Patel" status="checked-in" />
+  …
+</AvatarGroup>` }) }) }));
+}
+/* ─────────────────────────────────────────────────────────────────────── */
+/* Batch C — Layout                                                         */
+/* ─────────────────────────────────────────────────────────────────────── */
+function AppShellSection() {
+    return (_jsxs(DocSection, { id: "app-shell", title: "App shell", description: "The full-height flex frame. AppShell + AppMain compose any sidebar-and-content app. Use sticky TopBar inside AppMain so it pins on scroll. The /admin route uses exactly this pattern.", children: [_jsx(CodeBlock, { language: "tsx", code: `<AppShell>
+  <Sidebar>…</Sidebar>
+  <AppMain>
+    <TopBar>
+      <Breadcrumb>…</Breadcrumb>
+    </TopBar>
+    <main className="flex-1 px-6 py-6">
+      {children}
+    </main>
+  </AppMain>
+</AppShell>` }), _jsxs("p", { className: "text-xs text-text-muted", children: ["Live in ", _jsx("code", { className: "font-mono", children: "/admin" }), " \u2014 the route uses AppShell, Sidebar, and TopBar primitives."] })] }));
+}
+function SidebarComponentSection() {
+    return (_jsxs(DocSection, { id: "sidebar-comp", title: "Sidebar", description: "Composable nav sidebar. Use Sidebar / SidebarHeader / SidebarBody / SidebarFooter for the shell; SidebarSection + SidebarItem for the nav. SidebarItem supports asChild for Next.js Link integration.", children: [_jsx(Example, { label: "Sidebar in a 280px frame", children: _jsxs("div", { className: "border border-border-strong rounded overflow-hidden h-[420px] flex bg-background", children: [_jsxs("div", { className: "w-56 shrink-0 bg-bg-subtle/40 border-r border-border flex flex-col", children: [_jsx(SidebarHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded-sm bg-brand-forest grid place-items-center text-brand-forest-foreground font-bold text-xs tabular", "aria-hidden": "true", children: "DT" }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-text-subtle", children: "DT Sports" }), _jsx("div", { className: "text-sm font-semibold leading-none", children: "Admin" })] })] }) }), _jsxs(SidebarBody, { children: [_jsxs(SidebarSection, { label: "Today", children: [_jsx(SidebarItem, { href: "#today", active: true, icon: _jsx(LayoutDashboard, { className: "h-4 w-4", strokeWidth: 1.75 }), children: "Today" }), _jsx(SidebarItem, { href: "#week", icon: _jsx(CalendarDays, { className: "h-4 w-4", strokeWidth: 1.75 }), children: "This week" })] }), _jsxs(SidebarSection, { label: "Manage", children: [_jsx(SidebarItem, { href: "#games", icon: _jsx(Trophy, { className: "h-4 w-4", strokeWidth: 1.75 }), children: "Games" }), _jsx(SidebarItem, { href: "#series", icon: _jsx(Repeat, { className: "h-4 w-4", strokeWidth: 1.75 }), children: "Series" }), _jsx(SidebarItem, { href: "#players", icon: _jsx(Users, { className: "h-4 w-4", strokeWidth: 1.75 }), badge: _jsx(Badge, { variant: "warning", size: "xs", children: "4" }), children: "Players" })] })] }), _jsx(SidebarFooter, { children: _jsx("div", { className: "text-[10px] text-text-subtle font-mono tabular", children: "v0.1 \u00B7 main" }) })] }), _jsx("div", { className: "flex-1 grid place-items-center text-text-subtle text-xs", children: "(page content)" })] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Sidebar>
+  <SidebarHeader><BrandMark /></SidebarHeader>
+  <SidebarBody>
+    <SidebarSection label="Today">
+      <SidebarItem asChild active>
+        <Link href="/admin">
+          <LayoutDashboard className="h-4 w-4" strokeWidth={1.75} />
+          <span className="flex-1 truncate">Today</span>
+        </Link>
+      </SidebarItem>
+    </SidebarSection>
+  </SidebarBody>
+  <SidebarFooter>v0.1</SidebarFooter>
+</Sidebar>` })] }));
+}
+function TopBarSection() {
+    return (_jsxs(DocSection, { id: "top-bar", title: "Top bar", description: "Sticky 48px header. Renders the chrome; content layout is the consumer's. Common pattern: breadcrumb left, search center, actions right.", children: [_jsx(Example, { children: _jsxs("div", { className: "border border-border-strong rounded overflow-hidden bg-background", children: [_jsxs(TopBar, { className: "static", children: [_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#", children: "Admin" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Today" }) })] }) }), _jsx("div", { className: "flex-1" }), _jsx(Badge, { variant: "forest", size: "sm", children: "v0.1" }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": "Settings", children: _jsx(Settings, { className: "h-4 w-4", strokeWidth: 1.75 }) })] }), _jsx("div", { className: "px-6 py-8 text-text-subtle text-xs", children: "(page content here)" })] }) }), _jsx(CodeBlock, { language: "tsx", code: `<TopBar>
+  <Breadcrumb>…</Breadcrumb>
+  <div className="flex-1" />
+  <ThemeToggle />
+  <Avatar name="Danny Tran" size="sm" />
+</TopBar>` })] }));
+}
+function BreadcrumbSection() {
+    return (_jsx(DocSection, { id: "breadcrumb", title: "Breadcrumb", description: "Semantic <nav aria-label='Breadcrumb'> with ordered list, links, separator, and a non-link page indicator for the current location.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-3", children: [_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#", children: "Admin" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Today" }) })] }) }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#", children: "Admin" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#", children: "Games" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#", children: "Astoria Turf" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Field A \u00B7 Sat 6 pm" }) })] }) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link href="/admin">Admin</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Today</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>` }) }) }));
+}
+function ContainerSection() {
+    return (_jsxs(DocSection, { id: "container", title: "Container", description: "Max-width page wrapper with consistent horizontal padding (24/32px responsive). Sizes: sm (768) \u00B7 default (1024) \u00B7 lg (1280) \u00B7 full.", children: [_jsx("div", { className: "space-y-3", children: ["sm", "default", "lg", "full"].map((size) => (_jsx("div", { className: "border border-border rounded", children: _jsx(Container, { size: size, className: "py-4", children: _jsxs("div", { className: "rounded bg-bg-subtle border border-border px-3 py-2 text-xs tabular text-text-muted", children: ["size=\"", size, "\" \u2014 wraps content at the right width"] }) }) }, size))) }), _jsx(CodeBlock, { language: "tsx", code: `<Container size="lg">
+  <h1>Page heading</h1>
+  …
+</Container>` })] }));
+}
+function StackSection() {
+    return (_jsx(DocSection, { id: "stack", title: "Stack", description: "Flexbox with consistent gap. Documents intent (vs raw `flex flex-col gap-3`) and keeps gap tokens consistent. Both vertical and horizontal.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "space-y-4", children: [_jsxs(Stack, { gap: 2, children: [_jsx("div", { className: "rounded border border-border bg-background px-3 py-2 text-xs", children: "Vertical \u00B7 gap=2" }), _jsx("div", { className: "rounded border border-border bg-background px-3 py-2 text-xs", children: "Vertical \u00B7 gap=2" }), _jsx("div", { className: "rounded border border-border bg-background px-3 py-2 text-xs", children: "Vertical \u00B7 gap=2" })] }), _jsxs(Stack, { direction: "row", gap: 3, align: "center", justify: "between", children: [_jsx("span", { className: "text-sm", children: "Row \u00B7 align=center \u00B7 justify=between" }), _jsx(Button, { size: "sm", variant: "primary", children: "Action" })] }), _jsx(Stack, { direction: "row", gap: 2, wrap: true, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Chip, { variant: "neutral", children: ["Tag ", i + 1] }, i))) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Stack gap={2}>…</Stack>
+
+<Stack direction="row" gap={3} align="center" justify="between">
+  <h2>Heading</h2>
+  <Button>Action</Button>
+</Stack>
+
+<Stack direction="row" gap={2} wrap>
+  {tags.map(t => <Chip key={t}>{t}</Chip>)}
+</Stack>` }) }) }));
+}
+function AspectRatioSection() {
+    return (_jsx(DocSection, { id: "aspect-ratio", title: "Aspect ratio", description: "Locks a region to a given ratio without layout shift. Use for video embeds, image placeholders, banners. Pass `ratio={16 / 9}` etc.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "grid grid-cols-2 gap-3 max-w-md", children: [_jsx("div", { className: "rounded border border-border overflow-hidden", children: _jsx(AspectRatio, { ratio: 16 / 9, children: _jsx("div", { className: "h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted", children: "16:9" }) }) }), _jsx("div", { className: "rounded border border-border overflow-hidden", children: _jsx(AspectRatio, { ratio: 1, children: _jsx("div", { className: "h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted", children: "1:1" }) }) }), _jsx("div", { className: "rounded border border-border overflow-hidden col-span-2", children: _jsx(AspectRatio, { ratio: 21 / 9, children: _jsx("div", { className: "h-full w-full bg-bg-subtle grid place-items-center text-xs text-text-muted", children: "21:9" }) }) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<AspectRatio ratio={16 / 9}>
+  <iframe src={url} className="h-full w-full" />
+</AspectRatio>` }) }) }));
+}
+function ScrollAreaSection() {
+    return (_jsx(DocSection, { id: "scroll-area", title: "Scroll area", description: "Styled, consistent custom scrollbars across browsers. Wraps bounded content that needs to scroll. Don't use for full-page scroll \u2014 that's the browser's job.", children: _jsx(PreviewCode, { preview: _jsxs(ScrollArea, { className: "h-48 w-full max-w-sm rounded border border-border bg-background p-3", children: [_jsx("h4", { className: "text-sm font-semibold mb-2", children: "Roster \u2014 Astoria Turf" }), _jsx("ul", { className: "space-y-1.5 text-sm", children: [
+                            "Alex Chen",
+                            "Jordan Lee",
+                            "Sam Patel",
+                            "Maria Garcia",
+                            "Danny Tran",
+                            "Priya Singh",
+                            "Ethan Brooks",
+                            "Nina Park",
+                            "Oliver Stone",
+                            "Reese Wang",
+                            "Sophia Liu",
+                            "Tomás Vega",
+                            "Uma Patel",
+                            "Vince Holloway",
+                            "Wei Chen",
+                            "Xander Hayes",
+                        ].map((name) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(Avatar, { name: name, size: "sm" }), _jsx("span", { children: name })] }, name))) })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<ScrollArea className="h-48 w-full rounded border">
+  <RosterList players={…} />
+</ScrollArea>` }) }) }));
+}
+function ComboboxSection() {
+    const [venue, setVenue] = React.useState(null);
+    return (_jsx(DocSection, { id: "combobox", title: "Combobox", description: "Searchable single-select. Reach for this over Select once the list is long enough that typing beats scrolling (~10+ options).", children: _jsx(PreviewCode, { preview: _jsx("div", { className: "max-w-xs", children: _jsx(Combobox, { "aria-label": "Venue", placeholder: "Select venue\u2026", options: [
+                        { value: "astoria", label: "Astoria Turf" },
+                        { value: "mccarren", label: "McCarren Park" },
+                        { value: "greenpoint", label: "Greenpoint Dome" },
+                        { value: "redhook", label: "Red Hook Fields" },
+                        { value: "bushwick", label: "Bushwick Park", disabled: true },
+                    ], value: venue, onValueChange: setVenue }) }), code: _jsx(CodeBlock, { language: "tsx", code: `<Combobox
+  aria-label="Venue"
+  placeholder="Select venue…"
+  options={venues.map(v => ({ value: v.id, label: v.name }))}
+  value={venueId}
+  onValueChange={setVenueId}
+/>` }) }) }));
+}
+function SliderSection() {
+    const [price, setPrice] = React.useState([20]);
+    return (_jsx(DocSection, { id: "slider", title: "Slider", description: "Range input for bounded numeric choices (max price, distance radius). Arrow keys step; PageUp/Down big-step; Home/End jump to the ends. 44px thumb targets on touch.", children: _jsx(PreviewCode, { preview: _jsxs("div", { className: "max-w-xs space-y-2", children: [_jsx(Slider, { "aria-label": "Max price", min: 0, max: 50, step: 5, value: price, onValueChange: setPrice }), _jsxs("p", { className: "text-xs text-text-muted tabular", children: ["Max price: $", price[0]] })] }), code: _jsx(CodeBlock, { language: "tsx", code: `<Slider aria-label="Max price" min={0} max={50} step={5}
+        value={price} onValueChange={setPrice} />
+
+{/* Two thumbs = range */}
+<Slider aria-label="Price range" defaultValue={[10, 30]} />` }) }) }));
+}
+function DatePickerSection() {
+    const [date, setDate] = React.useState(undefined);
+    return (_jsxs(DocSection, { id: "date-picker", title: "Date picker", description: "Single-date selection in a popover; closes on pick. The picked Date is midnight LOCAL time \u2014 convert against the venue tz before persisting (\u00A73.16). Compose Calendar directly for inline or range use.", children: [_jsx(PreviewCode, { preview: _jsx("div", { className: "max-w-xs", children: _jsx(DatePicker, { "aria-label": "Game date", value: date, onValueChange: setDate }) }), code: _jsx(CodeBlock, { language: "tsx", code: `<DatePicker
+  aria-label="Game date"
+  value={gameDate}
+  onValueChange={setGameDate}
+  disabledDates={{ before: new Date() }}
+/>
+
+{/* Inline calendar */}
+<Calendar mode="single" selected={date} onSelect={setDate} />` }) }), _jsx(DocSubsection, { title: "Inline calendar", description: "The same Calendar component, embedded (availability views, embedded scheduling).", children: _jsx("div", { className: "rounded border border-border bg-background inline-block", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate }) }) })] }));
+}
+function CollapsibleSection() {
+    return (_jsx(DocSection, { id: "collapsible", title: "Collapsible", description: "One independent disclosure. Accordion is for grouped sections with one-open-at-a-time semantics; Collapsible is a single 'show more'.", children: _jsx(PreviewCode, { preview: _jsx("div", { className: "max-w-md rounded border border-border bg-background p-4", children: _jsxs(Collapsible, { children: [_jsx(CollapsibleTrigger, { children: "Advanced options" }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "space-y-2 text-sm text-text-muted", children: _jsx("p", { children: "Waitlist auto-promotion, visibility, and refund rules." }) }) })] }) }), code: _jsx(CodeBlock, { language: "tsx", code: `<Collapsible>
+  <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
+  <CollapsibleContent>…</CollapsibleContent>
+</Collapsible>` }) }) }));
+}
+function MarketingTierSection() {
+    return (_jsxs(DocSection, { id: "marketing", title: "Marketing tier", description: "Primitives for the marketing site, sharing the same token source as the app tier. Display type is fluid (clamp 32\u219296px); spacing extends to 160px; the brand gradient is bg-gradient-brand.", children: [_jsx(DocSubsection, { title: "Display typography", description: "text-display-sm / text-display / text-display-lg \u2014 fluid between phone and desktop. Resize the window to see them scale.", children: _jsxs("div", { className: "space-y-4 rounded border border-border bg-background p-6 overflow-hidden", children: [_jsx("div", { className: "text-display-lg font-bold", children: "Aa 96" }), _jsx("div", { className: "text-display font-bold", children: "Book a game 64" }), _jsx("div", { className: "text-display-sm font-bold", children: "Three taps to kickoff 44" })] }) }), _jsx(DocSubsection, { title: "Page composition", description: "MarketingNav \u00B7 Hero \u00B7 Section \u00B7 LogoCloud \u00B7 Footer \u2014 a full page in five components. All server-safe except the nav.", children: _jsxs("div", { className: "rounded border border-border overflow-hidden", children: [_jsx(MarketingNav, { brand: _jsxs("a", { href: "#marketing", "aria-label": "DT Sports home", className: "font-bold tracking-[-0.01em]", children: ["DT", _jsx("span", { className: "text-brand-forest", children: "Sports" })] }), links: [
+                                { label: "Games", href: "#marketing" },
+                                { label: "Venues", href: "#marketing" },
+                                { label: "Pricing", href: "#marketing" },
+                            ], cta: _jsx(Button, { variant: "accent", children: "Find a game" }), className: "relative" }), _jsx(Hero, { eyebrow: "Pickup soccer, organized", title: "Book a game in 30 seconds", description: "Real fields, fair teams, instant refunds. Every game money-back if it doesn't run.", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "accent", size: "touch", children: "Find a game" }), _jsx(Button, { variant: "secondary", size: "touch", children: "Host with us" })] }), className: "py-16 md:py-16 lg:py-16" }), _jsxs(LogoCloud, { label: "Trusted by leagues across NYC", children: [_jsx("span", { className: "text-lg font-bold", "aria-label": "Astoria League", children: "ASTORIA" }), _jsx("span", { className: "text-lg font-bold", "aria-label": "McCarren FC", children: "McCARREN FC" }), _jsx("span", { className: "text-lg font-bold", "aria-label": "Greenpoint Dome", children: "GP DOME" })] }), _jsx(Footer, { brand: _jsx("span", { className: "font-bold", children: "DT Sports" }), tagline: "Pickup sports, organized.", columns: [
+                                {
+                                    title: "Product",
+                                    links: [
+                                        { label: "Games", href: "#marketing" },
+                                        { label: "Venues", href: "#marketing" },
+                                    ],
+                                },
+                                {
+                                    title: "Company",
+                                    links: [{ label: "About", href: "#marketing" }],
+                                },
+                            ], legal: "\u00A9 2026 DT Sports" })] }) }), _jsx(DocSubsection, { title: "Prose", description: "Long-form content styling for blog/legal/CMS pages \u2014 no typography plugin needed.", children: _jsx("div", { className: "rounded border border-border bg-background p-6", children: _jsxs(Prose, { children: [_jsx("h2", { children: "Refund policy" }), _jsxs("p", { children: ["Cancel up to 2 hours before kickoff for a", " ", _jsx("a", { href: "#marketing", children: "full credit" }), ". Weather cancellations refund automatically."] }), _jsxs("ul", { children: [_jsx("li", { children: "Host cancellations refund to the original card." }), _jsx("li", { children: "Credits never expire." })] })] }) }) }), _jsx(CodeBlock, { language: "tsx", code: `import {
+  MarketingNav, Hero, Section, Footer, LogoCloud, Prose,
+} from "@dtsports/design-system/marketing";
+
+<Hero
+  eyebrow="Pickup soccer, organized"
+  title="Book a game in 30 seconds"
+  actions={<Button variant="accent" size="touch">Find a game</Button>}
+/>` })] }));
+}
+//# sourceMappingURL=page.js.map