@muskanmeet/invoicing-design-system 0.1.0

package/app/design-system/page.tsx

@@ -0,0 +1,802 @@
+"use client";
+
+import * as React from "react";
+import { tokens } from "@ds/tokens/tokens";
+import { Button } from "@ds/components/button";
+import { Input } from "@ds/components/input";
+import { Textarea } from "@ds/components/textarea";
+import { Label } from "@ds/components/label";
+import { Badge } from "@ds/components/badge";
+import {
+  Card,
+  CardContent,
+} from "@ds/components/card";
+import { Checkbox } from "@ds/components/checkbox";
+import { RadioGroup, RadioGroupItem } from "@ds/components/radio-group";
+import { Switch } from "@ds/components/switch";
+import { Avatar, AvatarFallback } from "@ds/components/avatar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ds/components/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ds/components/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ds/components/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ds/components/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ds/components/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@ds/components/tooltip";
+import { Separator } from "@ds/components/separator";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ds/components/breadcrumb";
+import { Calendar } from "@ds/components/calendar";
+import { DatePicker, DateRangePicker } from "@ds/components/date-picker";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
+  FormMessage,
+} from "@ds/components/form-field";
+import { toast } from "@ds/hooks/use-toast";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+function Section({
+  id,
+  title,
+  description,
+  children,
+}: {
+  id: string;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section id={id} className="scroll-mt-24 space-y-4">
+      <div>
+        <h2 className="text-heading-xl">{title}</h2>
+        {description && (
+          <p className="mt-1 text-body-md text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <Card>
+        <CardContent className="space-y-6 pt-6">{children}</CardContent>
+      </Card>
+    </section>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid gap-2 sm:grid-cols-[160px_1fr] sm:items-center">
+      <div className="text-overline text-muted-foreground">{label}</div>
+      <div className="flex flex-wrap items-center gap-3">{children}</div>
+    </div>
+  );
+}
+
+function Swatch({
+  name,
+  token,
+  hex,
+  hasBorder = false,
+}: {
+  name: string;
+  token: string;
+  hex: string;
+  hasBorder?: boolean;
+}) {
+  return (
+    <div>
+      <div
+        className={`h-24 w-full rounded-md ${hasBorder ? "border border-border" : ""}`}
+        style={{ background: hex }}
+      />
+      <div className="mt-3">
+        <div className="text-body-md-em">{name}</div>
+        <div className="mt-0.5 text-caption text-muted-foreground">
+          <span className="font-mono">{token}</span> · {hex}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const primaryNavy: Array<{ name: string; token: string; hex: string }> = [
+  { name: "Navy 900", token: "--navy-900", hex: tokens.palette.navy900.normal },
+  { name: "Navy 800", token: "--navy-800", hex: tokens.palette.navy800 },
+  { name: "Navy 600", token: "--navy-600", hex: tokens.palette.navy600 },
+  { name: "Navy 200", token: "--navy-200", hex: tokens.palette.navy200 },
+  { name: "Navy 50",  token: "--navy-50",  hex: tokens.palette.navy50 },
+];
+
+const accentOrange: Array<{ name: string; token: string; hex: string }> = [
+  { name: "Orange 500", token: "--orange-500", hex: tokens.palette.orange500.normal },
+  { name: "Orange 600", token: "--orange-600", hex: tokens.palette.orange600 },
+  { name: "Orange 700", token: "--orange-700", hex: tokens.palette.orange700 },
+  { name: "Orange 300", token: "--orange-300", hex: tokens.palette.orange300 },
+  { name: "Orange 100", token: "--orange-100", hex: tokens.palette.orange100 },
+  { name: "Orange 50",  token: "--orange-50",  hex: tokens.palette.orange50 },
+];
+
+const neutrals: Array<{ name: string; token: string; hex: string; hasBorder?: boolean }> = [
+  { name: "White",   token: "--white",    hex: tokens.palette.white,   hasBorder: true },
+  { name: "Gray 50", token: "--gray-50",  hex: tokens.palette.gray50,  hasBorder: true },
+  { name: "Gray 100", token: "--gray-100", hex: tokens.palette.gray100, hasBorder: true },
+  { name: "Gray 200", token: "--gray-200", hex: tokens.palette.gray200 },
+  { name: "Gray 300", token: "--gray-300", hex: tokens.palette.gray300 },
+];
+
+const semanticSwatches: Array<{ name: string; token: string; hex: string; hasBorder?: boolean }> = [
+  { name: "brand-primary", token: "--color-brand-primary", hex: tokens.palette.orange500.normal },
+  { name: "brand-hover",   token: "--color-brand-hover",   hex: tokens.palette.orange600 },
+  { name: "text-primary",  token: "--color-text-primary",  hex: tokens.palette.navy900.normal },
+  { name: "surface",       token: "--color-surface",       hex: tokens.palette.white, hasBorder: true },
+  { name: "bg-dark",       token: "--color-bg-dark",       hex: tokens.palette.navy900.normal },
+  { name: "success",       token: "--color-success",       hex: "#22C55E" },
+  { name: "error",         token: "--color-error",         hex: "#EF4444" },
+  { name: "info",          token: "--color-info",          hex: tokens.palette.navy600 },
+];
+
+export default function DesignSystemPage() {
+  return (
+    <main className="mx-auto max-w-6xl px-6 py-12">
+      <header className="mb-10">
+        <Badge variant="secondary" className="mb-3">
+          Living styleguide
+        </Badge>
+        <h1 className="text-display-lg">Design System</h1>
+        <p className="mt-2 max-w-2xl text-body-lg text-muted-foreground">
+          Tokens, breakpoints, and every component with their variants and states.
+          The single source of truth for the Invoicing System — Navy 900 + Orange 500
+          on Cream 50, set in Poppins.
+        </p>
+      </header>
+
+      <nav className="mb-10 flex flex-wrap gap-2">
+        {[
+          ["palette", "Palette"],
+          ["colors", "Semantic roles"],
+          ["typography", "Typography"],
+          ["spacing", "Spacing"],
+          ["radii", "Radii"],
+          ["shadows", "Shadows"],
+          ["breakpoints", "Breakpoints"],
+          ["buttons", "Buttons"],
+          ["inputs", "Inputs"],
+          ["selection", "Selection"],
+          ["badges", "Badges"],
+          ["overlays", "Overlays"],
+          ["breadcrumbs", "Breadcrumbs"],
+          ["calendar", "Calendar"],
+          ["tabs", "Tabs"],
+          ["table", "Table"],
+          ["forms", "Form fields"],
+          ["toasts", "Toasts"],
+        ].map(([id, label]) => (
+          <a
+            key={id}
+            href={`#${id}`}
+            className="rounded-full border bg-card px-3 py-1 text-body-sm text-muted-foreground hover:border-primary/30 hover:text-foreground"
+          >
+            {label}
+          </a>
+        ))}
+      </nav>
+
+      <div className="space-y-12">
+        <section id="palette" className="scroll-mt-24 space-y-10">
+          <div>
+            <p className="text-overline text-primary">01 · COLOR</p>
+            <h2 className="mt-2 text-display-lg">Tier 1 — Primitive palette</h2>
+            <p className="mt-2 text-body-md text-muted-foreground">
+              Raw scale values. Never reference these directly in components —
+              always alias through a Tier 2 semantic token first.
+            </p>
+            <Separator className="mt-6" />
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-heading-md">Primary navy</h3>
+            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5">
+              {primaryNavy.map((s) => (
+                <Swatch key={s.token} {...s} />
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-heading-md">Accent orange</h3>
+            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5">
+              {accentOrange.map((s) => (
+                <Swatch key={s.token} {...s} />
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-heading-md">Neutrals</h3>
+            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5">
+              {neutrals.map((s) => (
+                <Swatch key={s.token} {...s} />
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section id="colors" className="scroll-mt-24 space-y-6">
+          <div>
+            <h2 className="text-display-lg">Tier 2 — Semantic color roles</h2>
+            <p className="mt-2 text-body-md text-muted-foreground">
+              These are the tokens you reference when building new components.
+            </p>
+            <Separator className="mt-6" />
+          </div>
+          <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5">
+            {semanticSwatches.map((s) => (
+              <Swatch key={s.token} {...s} />
+            ))}
+          </div>
+        </section>
+
+        <Section
+          id="typography"
+          title="Typography"
+          description="Poppins for UI, JetBrains Mono for code. Sizes scale responsively at md (768px) and lg (1024px)."
+        >
+          <div className="divide-y divide-border">
+            {(
+              [
+                ["text-display-hero", "Smarter Accounting", "display/hero", "53 / 72 · Bold · −0.5", "Website hero"],
+                ["text-display-lg", "Why businesses trust us", "display/lg", "32 / 44 · SemiBold · −0.3", "Website sections"],
+                ["text-heading-xl", "Client overview", "heading/xl", "24 / 34 · SemiBold", "Page titles"],
+                ["text-heading-lg", "Outstanding invoices", "heading/lg", "20 / 30 · Medium", "Card headers, modals"],
+                ["text-heading-md", "Tax registration info", "heading/md", "16 / 24 · Medium", "Subsections, groups"],
+                ["text-body-lg", "We handle the complexity of UAE compliance so you can focus on growth.", "body/lg", "16 / 26 · Regular", "Website body"],
+                ["text-body-md", "Bank reconciliation completed for Aurora Global Holdings. 47 transactions matched.", "body/md", "14 / 22 · Regular", "Portal + PMS default"],
+                ["text-body-md-em", "AED 142,500.00", "body/md-emphasis", "14 / 22 · Medium", "Active states, key values"],
+                ["text-body-sm", "Last updated 2 hours ago · Modified by Munees", "body/sm", "13 / 20 · Regular", "Timestamps, metadata"],
+                ["text-caption", "VAT filed · CT pending · AML compliant", "caption", "12 / 18 · Regular", "Tags, badges, footnotes"],
+                ["text-overline", "Client name · Status · Due date · Amount", "overline", "11 / 16 · SemiBold · +0.5 · UPPER", "Table headers, form labels"],
+                ["text-metric-lg", "97.3%", "metric/lg", "28 / 38 · SemiBold", "Hero numbers, KPIs"],
+              ] as const
+            ).map(([cls, sample, name, specs, usage]) => (
+              <div
+                key={name}
+                className="grid grid-cols-1 items-center gap-4 py-5 md:grid-cols-[180px_1fr_220px]"
+              >
+                <div>
+                  <p className="text-body-md-em">{name}</p>
+                  <p className="text-caption text-muted-foreground">{usage}</p>
+                </div>
+                <p className={cls}>{sample}</p>
+                <p className="text-caption text-muted-foreground md:text-right">{specs}</p>
+              </div>
+            ))}
+            <div className="grid grid-cols-1 items-center gap-4 py-5 md:grid-cols-[180px_1fr_220px]">
+              <div>
+                <p className="text-body-md-em">mono</p>
+                <p className="text-caption text-muted-foreground">Code, IDs</p>
+              </div>
+              <p className="font-mono text-body-md">{`const mono = "JetBrains Mono"`}</p>
+              <p className="text-caption text-muted-foreground md:text-right">JetBrains Mono</p>
+            </div>
+          </div>
+        </Section>
+
+        <Section id="spacing" title="Spacing" description="Base scale used across layouts.">
+          <div className="flex flex-wrap items-end gap-6">
+            {Object.entries(tokens.spacing).map(([k, v]) => (
+              <div key={k} className="text-center">
+                <div
+                  className="rounded border border-primary/30 bg-primary/20"
+                  style={{ width: v, height: v, minWidth: 4, minHeight: 4 }}
+                />
+                <div className="mt-2 text-caption text-muted-foreground">
+                  {k} · {v}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section id="radii" title="Radii">
+          <div className="flex flex-wrap gap-4">
+            {["rounded-sm", "rounded-md", "rounded-lg", "rounded-full"].map((cls) => (
+              <div key={cls} className="text-center">
+                <div className={`h-16 w-16 border border-primary/30 bg-primary/15 ${cls}`} />
+                <div className="mt-2 text-caption text-muted-foreground">{cls}</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section id="shadows" title="Shadows">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {(["sm", "md", "lg", "xl"] as const).map((s) => (
+              <div
+                key={s}
+                className={`flex h-24 items-center justify-center rounded-lg border bg-card text-body-sm text-muted-foreground shadow-ds-${s}`}
+              >
+                shadow-ds-{s}
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section id="breakpoints" title="Breakpoints" description="Tailwind screens consumed across the app.">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Token</TableHead>
+                <TableHead>Min width</TableHead>
+                <TableHead>Use for</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Object.entries(tokens.breakpoints).map(([k, v]) => (
+                <TableRow key={k}>
+                  <TableCell className="font-mono">{k}</TableCell>
+                  <TableCell>{v}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {k === "sm" && "Large phones"}
+                    {k === "md" && "Tablets"}
+                    {k === "lg" && "Small laptops"}
+                    {k === "xl" && "Desktops"}
+                    {k === "2xl" && "Wide displays"}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Section>
+
+        <Section id="buttons" title="Buttons">
+          <Row label="Variant">
+            <Button>Default</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
+            <Button variant="destructive">Destructive</Button>
+          </Row>
+          <Row label="Size">
+            <Button size="sm">Small</Button>
+            <Button>Default</Button>
+            <Button size="lg">Large</Button>
+            <Button size="icon" aria-label="more">
+              <MoreHorizontal />
+            </Button>
+          </Row>
+          <Row label="State">
+            <Button disabled>Disabled</Button>
+            <Button>
+              <ChevronDown />
+              With icon
+            </Button>
+          </Row>
+        </Section>
+
+        <Section id="inputs" title="Inputs">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="you@company.com" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="company">Company</Label>
+              <Input id="company" placeholder="Acme Inc." />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="disabled">Disabled</Label>
+              <Input id="disabled" disabled value="locked" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="plan">Plan</Label>
+              <Select>
+                <SelectTrigger id="plan">
+                  <SelectValue placeholder="Select a plan" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="starter">Starter</SelectItem>
+                  <SelectItem value="growth">Growth</SelectItem>
+                  <SelectItem value="scale">Scale</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2 sm:col-span-2">
+              <Label htmlFor="notes">Notes</Label>
+              <Textarea id="notes" placeholder="Add a note for the invoice…" />
+            </div>
+          </div>
+        </Section>
+
+        <Section id="selection" title="Selection controls">
+          <Row label="Checkbox">
+            <div className="flex items-center gap-2">
+              <Checkbox id="c1" defaultChecked /> <Label htmlFor="c1">Checked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="c2" /> <Label htmlFor="c2">Unchecked</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="c3" disabled /> <Label htmlFor="c3">Disabled</Label>
+            </div>
+          </Row>
+          <Row label="Radio">
+            <RadioGroup defaultValue="monthly" className="flex gap-4">
+              <div className="flex items-center gap-2">
+                <RadioGroupItem id="r1" value="monthly" />
+                <Label htmlFor="r1">Monthly</Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <RadioGroupItem id="r2" value="yearly" />
+                <Label htmlFor="r2">Yearly</Label>
+              </div>
+            </RadioGroup>
+          </Row>
+          <Row label="Switch">
+            <div className="flex items-center gap-2">
+              <Switch id="s1" defaultChecked />
+              <Label htmlFor="s1">Notifications</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Switch id="s2" />
+              <Label htmlFor="s2">Beta features</Label>
+            </div>
+          </Row>
+          <Row label="Avatar">
+            <Avatar>
+              <AvatarFallback>SA</AvatarFallback>
+            </Avatar>
+            <Avatar className="h-12 w-12">
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+          </Row>
+        </Section>
+
+        <Section id="badges" title="Badges">
+          <div className="flex flex-wrap gap-2">
+            <Badge>Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="success">Paid</Badge>
+            <Badge variant="warning">Pending</Badge>
+            <Badge variant="destructive">Overdue</Badge>
+            <Badge variant="info">Draft</Badge>
+            <Badge variant="outline">Outline</Badge>
+          </div>
+        </Section>
+
+        <Section id="overlays" title="Overlays">
+          <Row label="Dialog">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="outline">Open dialog</Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Send invoice</DialogTitle>
+                  <DialogDescription>
+                    A confirmation email will be sent to the client.
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                  <Button variant="outline">Cancel</Button>
+                  <Button>Send</Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </Row>
+          <Row label="Dropdown">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline">
+                  Actions
+                  <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuLabel>Invoice</DropdownMenuLabel>
+                <DropdownMenuItem>View</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </Row>
+          <Row label="Tooltip">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost">Hover me</Button>
+              </TooltipTrigger>
+              <TooltipContent>Shows context</TooltipContent>
+            </Tooltip>
+          </Row>
+        </Section>
+
+        <Section
+          id="breadcrumbs"
+          title="Breadcrumbs"
+          description="Show the user's location in the navigation hierarchy. Place above the page title."
+        >
+          <Row label="Default">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Invoices</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>INV-1042</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </Row>
+          <Row label="Dot separator">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator>·</BreadcrumbSeparator>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Clients</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator>·</BreadcrumbSeparator>
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Acme Inc.</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </Row>
+          <Row label="Truncated">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbEllipsis />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Invoices</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>INV-1042</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </Row>
+          <Row label="With dropdown">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger className="inline-flex items-center gap-1 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+                      Invoices
+                      <ChevronDown className="h-3.5 w-3.5" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      <DropdownMenuItem>All invoices</DropdownMenuItem>
+                      <DropdownMenuItem>Drafts</DropdownMenuItem>
+                      <DropdownMenuItem>Overdue</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>INV-1042</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </Row>
+        </Section>
+
+        <Section
+          id="calendar"
+          title="Calendar"
+          description="Date and date-range pickers built on react-day-picker. Themed from semantic tokens — flips automatically for dark mode."
+        >
+          <Row label="Inline · single">
+            <div className="rounded-md border bg-card">
+              <Calendar mode="single" />
+            </div>
+          </Row>
+          <Row label="Inline · range">
+            <div className="rounded-md border bg-card">
+              <Calendar mode="range" numberOfMonths={2} />
+            </div>
+          </Row>
+          <Row label="Trigger · single">
+            <DatePicker placeholder="Issue date" />
+            <p className="text-body-sm text-muted-foreground">
+              Click to open. Closes on selection.
+            </p>
+          </Row>
+          <Row label="Trigger · range">
+            <DateRangePicker placeholder="Filter by date range" />
+            <p className="text-body-sm text-muted-foreground">
+              Closes once both ends are chosen.
+            </p>
+          </Row>
+        </Section>
+
+        <Section id="tabs" title="Tabs">
+          <Tabs defaultValue="overview" className="w-full">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="activity">Activity</TabsTrigger>
+              <TabsTrigger value="settings">Settings</TabsTrigger>
+            </TabsList>
+            <TabsContent value="overview">
+              <p className="text-body-md text-muted-foreground">Overview content.</p>
+            </TabsContent>
+            <TabsContent value="activity">
+              <p className="text-body-md text-muted-foreground">Activity content.</p>
+            </TabsContent>
+            <TabsContent value="settings">
+              <p className="text-body-md text-muted-foreground">Settings content.</p>
+            </TabsContent>
+          </Tabs>
+        </Section>
+
+        <Section id="table" title="Table">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Client</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Total</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-mono">INV-0001</TableCell>
+                <TableCell>Acme Inc.</TableCell>
+                <TableCell><Badge variant="success">Paid</Badge></TableCell>
+                <TableCell className="text-right">$1,240.00</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-mono">INV-0002</TableCell>
+                <TableCell>Globex</TableCell>
+                <TableCell><Badge variant="warning">Pending</Badge></TableCell>
+                <TableCell className="text-right">$580.00</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-mono">INV-0003</TableCell>
+                <TableCell>Initech</TableCell>
+                <TableCell><Badge variant="destructive">Overdue</Badge></TableCell>
+                <TableCell className="text-right">$3,120.00</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </Section>
+
+        <Section
+          id="forms"
+          title="Form fields"
+          description="A consistent wrapper that pairs a label, control, helper, and error message."
+        >
+          <div className="grid gap-6 sm:grid-cols-2">
+            <FormField>
+              <FormLabel htmlFor="ff-email" required>
+                Work email
+              </FormLabel>
+              <FormControl>
+                <Input id="ff-email" type="email" placeholder="you@company.com" />
+              </FormControl>
+              <FormDescription>We&apos;ll use this to send invoice receipts.</FormDescription>
+            </FormField>
+
+            <FormField>
+              <FormLabel htmlFor="ff-tax" required>
+                Tax ID
+              </FormLabel>
+              <FormControl>
+                <Input id="ff-tax" defaultValue="12-345" aria-invalid />
+              </FormControl>
+              <FormMessage>Tax ID must be 9 digits.</FormMessage>
+            </FormField>
+          </div>
+        </Section>
+
+        <Section
+          id="toasts"
+          title="Toasts"
+          description="Non-blocking notifications. Trigger with `toast({...})`."
+        >
+          <Row label="Variants">
+            <Button
+              variant="outline"
+              onClick={() =>
+                toast({
+                  title: "Invoice saved",
+                  description: "Draft INV-1043 is in your invoices list.",
+                })
+              }
+            >
+              Default
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() =>
+                toast({
+                  variant: "success",
+                  title: "Payment received",
+                  description: "$1,200 from Hooli has been recorded.",
+                })
+              }
+            >
+              Success
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() =>
+                toast({
+                  variant: "destructive",
+                  title: "Send failed",
+                  description: "We couldn't reach the recipient. Try again.",
+                })
+              }
+            >
+              Destructive
+            </Button>
+          </Row>
+        </Section>
+
+        <Separator />
+        <p className="pb-12 text-center text-caption text-muted-foreground">
+          End of styleguide · {Object.keys(tokens.breakpoints).length} breakpoints ·{" "}
+          {semanticSwatches.length} semantic roles
+        </p>
+      </div>
+    </main>
+  );
+}