@dtsports/design-system 0.2.0

package/src/marketing/logo-cloud.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * LogoCloud — "trusted by" strip. Children are the logos (imgs or SVGs);
+ * give each an accessible name (alt text or aria-label).
+ *
+ *   <LogoCloud label="Trusted by leagues across NYC">
+ *     <img src="/logos/x.svg" alt="X League" className="h-6" />
+ *     …
+ *   </LogoCloud>
+ */
+export interface LogoCloudProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: React.ReactNode;
+}
+
+export function LogoCloud({
+  label,
+  className,
+  children,
+  ...props
+}: LogoCloudProps) {
+  return (
+    <div className={cn("py-10 text-center", className)} {...props}>
+      {label && (
+        <p className="mb-6 text-xs font-semibold uppercase tracking-[0.08em] text-text-subtle">
+          {label}
+        </p>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-70 grayscale">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/marketing/nav.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import { Menu, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * MarketingNav — sticky marketing header: brand left, links center,
+ * CTA right, hamburger disclosure on mobile (44px targets, aria-expanded
+ * wired). Non-modal on purpose — the page stays scrollable behind it.
+ *
+ *   <MarketingNav
+ *     brand={<a href="/" aria-label="DT Sports home"><Logo /></a>}
+ *     links={[
+ *       { label: "Games", href: "/games" },
+ *       { label: "Venues", href: "/venues" },
+ *       { label: "Pricing", href: "/pricing" },
+ *     ]}
+ *     cta={<Button variant="accent">Find a game</Button>}
+ *   />
+ *
+ * Render links as your router's component via `renderLink` when needed
+ * (defaults to a plain <a>).
+ */
+export interface MarketingNavLink {
+  label: string;
+  href: string;
+}
+
+export interface MarketingNavProps extends React.HTMLAttributes<HTMLElement> {
+  brand: React.ReactNode;
+  links: MarketingNavLink[];
+  /** Right-hand CTA (keep to one accent action). */
+  cta?: React.ReactNode;
+  /** Custom link renderer, e.g. Next.js Link. */
+  renderLink?: (link: MarketingNavLink, className: string) => React.ReactNode;
+}
+
+const desktopLinkClass = cn(
+  "text-sm font-medium text-text-muted hover:text-foreground transition-colors rounded-sm px-1",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+);
+
+const mobileLinkClass = cn(
+  "flex items-center min-h-11 px-2 text-md font-medium text-foreground rounded-sm",
+  "hover:bg-bg-subtle transition-colors",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+);
+
+export function MarketingNav({
+  brand,
+  links,
+  cta,
+  renderLink,
+  className,
+  ...props
+}: MarketingNavProps) {
+  const [open, setOpen] = React.useState(false);
+  const panelId = React.useId();
+
+  const link = (l: MarketingNavLink, cls: string) =>
+    renderLink ? (
+      <React.Fragment key={l.href}>{renderLink(l, cls)}</React.Fragment>
+    ) : (
+      <a key={l.href} href={l.href} className={cls}>
+        {l.label}
+      </a>
+    );
+
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-sticky border-b border-border bg-background/90 backdrop-blur",
+        className
+      )}
+      {...props}
+    >
+      <nav
+        aria-label="Main"
+        className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-6 px-6 lg:px-8"
+      >
+        <div className="flex items-center gap-8">
+          {brand}
+          <div className="hidden md:flex items-center gap-6">
+            {links.map((l) => link(l, desktopLinkClass))}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {cta && <div className="hidden md:block">{cta}</div>}
+          <button
+            type="button"
+            aria-expanded={open}
+            aria-controls={panelId}
+            aria-label={open ? "Close menu" : "Open menu"}
+            onClick={() => setOpen((v) => !v)}
+            className={cn(
+              "md:hidden inline-flex h-11 w-11 items-center justify-center rounded-sm text-foreground",
+              "hover:bg-bg-subtle transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )}
+          >
+            {open ? (
+              <X className="h-5 w-5" strokeWidth={1.75} aria-hidden="true" />
+            ) : (
+              <Menu className="h-5 w-5" strokeWidth={1.75} aria-hidden="true" />
+            )}
+          </button>
+        </div>
+      </nav>
+      <div
+        id={panelId}
+        hidden={!open}
+        className="md:hidden border-t border-border bg-background px-4 py-3"
+      >
+        <div className="flex flex-col gap-1">
+          {links.map((l) => link(l, mobileLinkClass))}
+        </div>
+        {cta && <div className="mt-3 border-t border-border pt-3">{cta}</div>}
+      </div>
+    </header>
+  );
+}

package/src/marketing/prose.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Prose — typographic wrapper for long-form marketing/blog/legal content
+ * (rendered markdown, CMS HTML). Styles descendant headings, paragraphs,
+ * lists, links, and code without requiring @tailwindcss/typography.
+ *
+ *   <Prose dangerouslySetInnerHTML={{ __html: post.html }} />
+ *   <Prose>{children}</Prose>
+ */
+export type ProseProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function Prose({ className, ...props }: ProseProps) {
+  return (
+    <div
+      className={cn(
+        "max-w-2xl text-md leading-relaxed text-foreground",
+        // Headings
+        "[&_h1]:text-display-sm [&_h1]:font-bold [&_h1]:mt-10 [&_h1]:mb-4",
+        "[&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:mt-10 [&_h2]:mb-3",
+        "[&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mt-8 [&_h3]:mb-2",
+        "[&_h4]:text-lg [&_h4]:font-semibold [&_h4]:mt-6 [&_h4]:mb-2",
+        // Body
+        "[&_p]:my-4 [&_p]:text-text-muted",
+        "[&_strong]:font-semibold [&_strong]:text-foreground",
+        // Links — underlined (color is not the only signal)
+        "[&_a]:text-brand-forest [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-brand-forest/80",
+        // Lists
+        "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:text-text-muted",
+        "[&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:text-text-muted",
+        "[&_li]:my-1.5",
+        // Quotes, rules, code
+        "[&_blockquote]:my-6 [&_blockquote]:border-l-2 [&_blockquote]:border-brand-forest [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-text-muted",
+        "[&_hr]:my-8 [&_hr]:border-border",
+        "[&_code]:font-mono [&_code]:text-sm [&_code]:bg-bg-muted [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5",
+        "[&_pre]:my-4 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:border [&_pre]:border-border [&_pre]:bg-bg-subtle [&_pre]:p-4 [&_pre_code]:bg-transparent [&_pre_code]:p-0",
+        // Media
+        "[&_img]:my-6 [&_img]:rounded [&_img]:border [&_img]:border-border [&_img]:max-w-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/marketing/section.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Section — a marketing page band with the generous spacing scale.
+ * Provides the id/heading wiring for skip-navigation and deep links.
+ *
+ *   <Section id="how-it-works" eyebrow="How it works"
+ *            title="Three taps to kickoff">
+ *     …cards / feature grid…
+ *   </Section>
+ */
+export interface SectionProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "title"
+> {
+  id: string;
+  eyebrow?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Center the header block (default start-aligned). */
+  centered?: boolean;
+  /** Subtle alternating background. */
+  tone?: "default" | "subtle";
+}
+
+export function Section({
+  id,
+  eyebrow,
+  title,
+  description,
+  centered = false,
+  tone = "default",
+  className,
+  children,
+  ...props
+}: SectionProps) {
+  const headingId = title ? `${id}-title` : undefined;
+  return (
+    <section
+      id={id}
+      aria-labelledby={headingId}
+      className={cn(
+        "px-6 lg:px-8 py-20 md:py-24 scroll-mt-16",
+        tone === "subtle" && "bg-bg-subtle",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto max-w-5xl">
+        {(eyebrow || title || description) && (
+          <div
+            className={cn("mb-12 max-w-2xl", centered && "mx-auto text-center")}
+          >
+            {eyebrow && (
+              <p className="mb-3 text-sm font-semibold uppercase tracking-[0.08em] text-brand-forest">
+                {eyebrow}
+              </p>
+            )}
+            {title && (
+              <h2
+                id={headingId}
+                className="text-display-sm font-bold text-foreground text-balance"
+              >
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="mt-4 text-lg text-text-muted">{description}</p>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/showcase/components/code-block.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Code block with copy-to-clipboard. No syntax highlighting (intentional —
+ * the design system stays decoration-free; we can layer Shiki later if needed).
+ */
+export interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+export function CodeBlock({ code, language, className }: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative rounded border border-border bg-bg-subtle",
+        className
+      )}
+    >
+      {language && (
+        <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
+          <span className="text-[10px] font-medium uppercase tracking-[0.04em] text-text-muted">
+            {language}
+          </span>
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={onCopy}
+        aria-label={copied ? "Copied" : "Copy code"}
+        className={cn(
+          "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-sm text-text-muted",
+          "transition-colors hover:bg-bg-muted hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          language && "top-7"
+        )}
+      >
+        {copied ? (
+          <Check className="h-3.5 w-3.5" strokeWidth={2} />
+        ) : (
+          <Copy className="h-3.5 w-3.5" strokeWidth={1.75} />
+        )}
+      </button>
+      <pre className="overflow-x-auto scrollbar-thin px-3 py-2.5 text-xs leading-relaxed">
+        <code className="font-mono text-foreground">{code}</code>
+      </pre>
+    </div>
+  );
+}

package/src/showcase/components/example.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Example renders a labeled preview + code block side-by-side (or stacked
+ * on narrow screens). Used throughout the design system docs.
+ */
+export function Example({
+  label,
+  children,
+  className,
+}: {
+  label?: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      {label && (
+        <div className="text-xs font-medium uppercase tracking-[0.04em] text-text-muted">
+          {label}
+        </div>
+      )}
+      <div className="rounded border border-border bg-background p-5">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/** Two-column grid: preview on the left, code on the right. */
+export function PreviewCode({
+  preview,
+  code,
+}: {
+  preview: React.ReactNode;
+  code: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-3 md:grid-cols-2">
+      <div className="rounded border border-border bg-background p-5 flex items-center justify-center min-h-[120px]">
+        {preview}
+      </div>
+      <div>{code}</div>
+    </div>
+  );
+}

package/src/showcase/components/section.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * Section wrapper for the design system docs.
+ * Renders an id-anchored heading with description and content body.
+ */
+export interface DocSectionProps {
+  id: string;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DocSection({
+  id,
+  title,
+  description,
+  children,
+  className,
+}: DocSectionProps) {
+  return (
+    <section
+      id={id}
+      aria-labelledby={`${id}-title`}
+      className={cn("scroll-mt-16 py-10 border-t border-border", className)}
+    >
+      <div className="mb-6">
+        <h2
+          id={`${id}-title`}
+          className="text-xl font-semibold tracking-[-0.01em] text-foreground"
+        >
+          <a href={`#${id}`} className="hover:text-brand-forest no-underline">
+            {title}
+          </a>
+        </h2>
+        {description && (
+          <p className="mt-1.5 text-sm text-text-muted max-w-2xl">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="space-y-6">{children}</div>
+    </section>
+  );
+}
+
+/** Subsection within a DocSection. */
+export function DocSubsection({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("", className)}>
+      <h3 className="text-md font-semibold mb-1.5">{title}</h3>
+      {description && (
+        <p className="text-sm text-text-muted mb-3 max-w-2xl">{description}</p>
+      )}
+      {children}
+    </div>
+  );
+}

package/src/showcase/components/swatch.tsx

@@ -0,0 +1,52 @@
+import { cn } from "../../lib/utils";
+
+/**
+ * Color swatch used in the design system docs.
+ * Renders a color tile with token name + value below.
+ */
+export interface SwatchProps {
+  token: string;
+  /** Tailwind class for the background (e.g. "bg-brand-lime") */
+  bg: string;
+  /** Color value to display (e.g. "#B4D334" or "hsl(72 65% 52%)") */
+  value: string;
+  /** Optional: text color sample to show on top of the swatch */
+  textSample?: "white" | "black" | "none";
+  /** Optional: contrast ratio note */
+  contrast?: string;
+}
+
+export function Swatch({
+  token,
+  bg,
+  value,
+  textSample = "none",
+  contrast,
+}: SwatchProps) {
+  return (
+    <div className="flex flex-col">
+      <div
+        className={cn(
+          "h-16 rounded border border-border flex items-center justify-center",
+          bg
+        )}
+      >
+        {textSample !== "none" && (
+          <span
+            className={cn(
+              "text-sm font-medium",
+              textSample === "white" ? "text-white" : "text-black"
+            )}
+          >
+            Aa
+          </span>
+        )}
+      </div>
+      <div className="mt-1.5 text-xs">
+        <div className="font-medium text-foreground">{token}</div>
+        <div className="text-text-muted font-mono tabular">{value}</div>
+        {contrast && <div className="text-text-subtle mt-0.5">{contrast}</div>}
+      </div>
+    </div>
+  );
+}

package/src/showcase/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * Mountable design-system documentation page.
+ *
+ * Default export is the page component itself, so consumers can wire it
+ * up as a Next.js page in one line:
+ *
+ *   // apps/<your-app>/app/design-system/page.tsx
+ *   export { default } from "@dtsports/design-system/showcase";
+ *
+ * Or used as a regular component anywhere:
+ *
+ *   import { DesignSystemPage } from "@dtsports/design-system/showcase";
+ *   <DesignSystemPage />
+ */
+export { default } from "./page";
+export { default as DesignSystemPage } from "./page";