ruler-components 0.1.1 → 0.1.2

package/components/docs/tabs-doc-page.tsx

@@ -1,359 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Bell, Check, Columns3, Copy, Home, Settings, Star, TrendingUp, Users } from "lucide-react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const TABS_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "A TabsList and one or more TabsContent panels" },
-  { prop: "defaultValue", type: "string", default: "—", description: "Value of the tab active on mount" },
-  {
-    prop: "variant",
-    type: '"underline" | "pill" | "segmented" | "bordered" | "filled" | "icon" | "vertical" | "floating" | "scrollable" | "card"',
-    default: '"underline"',
-    description: "Visual style shared by the list and its triggers",
-  },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes for the root wrapper" },
-];
-
-const LIST_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "One or more TabsTrigger elements" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const TRIGGER_API_ROWS = [
-  { prop: "value", type: "string", default: "—", description: "Unique identifier matched against a TabsContent value" },
-  { prop: "label", type: "string", default: "—", description: "Text shown on the trigger" },
-  { prop: "icon", type: "LucideIcon", default: "—", description: "Optional leading icon" },
-  { prop: "badge", type: "string | number", default: "—", description: "Optional badge shown after the label" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const CONTENT_API_ROWS = [
-  { prop: "value", type: "string", default: "—", description: "Matches the TabsTrigger value that reveals this panel" },
-  { prop: "children", type: "ReactNode", default: "—", description: "Panel content" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "TabsList carries role=\"tablist\" and each TabsTrigger carries role=\"tab\" with aria-selected reflecting the active tab.",
-  "Only the active trigger is in the tab order (tabIndex 0) — arrive with Tab, then switch panels with a click or Enter/Space.",
-  "Each TabsContent panel carries role=\"tabpanel\" and aria-labelledby, linking it back to its trigger for screen readers.",
-  "Icon-only or badge-heavy triggers should still include a readable label — label is always rendered, just style it visually hidden if needed.",
-  "Prefer the scrollable variant over shrinking text when a tab list won't fit — truncated labels are hard to scan.",
-];
-
-type Variant = "underline" | "pill" | "segmented" | "bordered" | "filled" | "floating";
-
-const VARIANTS: { value: Variant; label: string }[] = [
-  { value: "underline", label: "Underline" },
-  { value: "pill", label: "Pill" },
-  { value: "segmented", label: "Segmented" },
-  { value: "bordered", label: "Bordered" },
-  { value: "filled", label: "Filled" },
-  { value: "floating", label: "Floating" },
-];
-
-function codeFor(variant: Variant) {
-  const props = variant !== "underline" ? ` variant="${variant}"` : "";
-  return `<Tabs defaultValue="overview"${props}>
-  <TabsList>
-    <TabsTrigger value="overview" label="Overview" />
-    <TabsTrigger value="analytics" label="Analytics" />
-    <TabsTrigger value="settings" label="Settings" />
-  </TabsList>
-  <TabsContent value="overview">
-    Snapshot of activity across your workspace.
-  </TabsContent>
-  <TabsContent value="analytics">
-    Traffic, conversion, and retention trends.
-  </TabsContent>
-  <TabsContent value="settings">
-    Manage preferences and integrations.
-  </TabsContent>
-</Tabs>`;
-}
-
-export function TabsDocPage() {
-  const [variant, setVariant] = useState<Variant>("underline");
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(variant);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={Columns3}
-        title="Tabs"
-        description="Organizes related content into switchable panels — from minimal underlines to segmented, floating, and vertical layouts."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Every variant, live — switch tabs, change the style, and copy the exact markup."
-      >
-        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-          <div className="relative flex min-h-[12rem] items-center justify-center overflow-x-auto bg-zinc-50 p-4 dark:bg-zinc-900/40 sm:p-6">
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
-              style={{
-                backgroundImage:
-                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
-                backgroundSize: "24px 24px",
-              }}
-            />
-            <div key={variant} className="relative w-full min-w-0 max-w-md animate-[pagination-pop_0.2s_ease-out]">
-              <Tabs defaultValue="overview" variant={variant}>
-                <TabsList>
-                  <TabsTrigger value="overview" label="Overview" />
-                  <TabsTrigger value="analytics" label="Analytics" />
-                  <TabsTrigger value="settings" label="Settings" />
-                </TabsList>
-                <TabsContent value="overview" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                  Snapshot of activity across your workspace.
-                </TabsContent>
-                <TabsContent value="analytics" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                  Traffic, conversion, and retention trends.
-                </TabsContent>
-                <TabsContent value="settings" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                  Manage preferences and integrations.
-                </TabsContent>
-              </Tabs>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
-            <div className="flex flex-wrap items-start justify-between gap-6">
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Variant
-                </p>
-                <div className="flex flex-wrap gap-1.5">
-                  {VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setVariant(v.value)}
-                      className={cn(
-                        "rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
-                        variant === v.value
-                          ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                          : "border-zinc-200 text-zinc-500 hover:border-zinc-300 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {v.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
-              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
-                <code>{snippet}</code>
-              </pre>
-              <Tooltip content={copied ? "Copied!" : "Copy code"}>
-                <button
-                  type="button"
-                  onClick={copySnippet}
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
-                >
-                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection title="Default" description="Underline tabs switch between panels without leaving the page.">
-        <Card className="max-w-2xl">
-          <CardHeader className="border-b border-zinc-100 dark:border-zinc-800">
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <CardTitle>Project overview</CardTitle>
-                <CardDescription>Track progress, activity, and settings in one place.</CardDescription>
-              </div>
-              <Badge variant="outline">6 members</Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="pt-5">
-            <Tabs defaultValue="overview">
-              <TabsList>
-                <TabsTrigger value="overview" label="Overview" />
-                <TabsTrigger value="activity" label="Activity" badge={3} />
-                <TabsTrigger value="settings" label="Settings" />
-              </TabsList>
-              <TabsContent value="overview" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                12 of 20 tasks complete this sprint. The team is on track to ship by Friday.
-              </TabsContent>
-              <TabsContent value="activity" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                3 new comments and 2 status changes since you last checked in.
-              </TabsContent>
-              <TabsContent value="settings" className="pt-4 text-sm text-zinc-600 dark:text-zinc-300">
-                Manage notifications, integrations, and who can access this project.
-              </TabsContent>
-            </Tabs>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsSection title="Variants" description="Pill and segmented styles suit compact filters and toggles.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Pill</CardTitle>
-              <CardDescription>Rounded, high-contrast triggers for a feed or inbox filter.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="home" variant="pill">
-                <TabsList>
-                  <TabsTrigger value="home" label="Home" />
-                  <TabsTrigger value="following" label="Following" badge={2} />
-                </TabsList>
-              </Tabs>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Segmented</CardTitle>
-              <CardDescription>An iOS-style control for switching between short, related options.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="day" variant="segmented">
-                <TabsList>
-                  <TabsTrigger value="day" label="Day" />
-                  <TabsTrigger value="week" label="Week" />
-                  <TabsTrigger value="month" label="Month" />
-                </TabsList>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Elevated & Bordered" description="A floating surface for prominent placement, or a quiet outline for secondary controls.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Floating</CardTitle>
-              <CardDescription>Sits above the page on its own elevated surface.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="all" variant="floating">
-                <TabsList>
-                  <TabsTrigger value="all" label="All" />
-                  <TabsTrigger value="featured" label="Featured" icon={Star} />
-                </TabsList>
-              </Tabs>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Bordered</CardTitle>
-              <CardDescription>A visible outline for triggers that need clear boundaries.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="a" variant="bordered">
-                <TabsList>
-                  <TabsTrigger value="a" label="Analytical" />
-                  <TabsTrigger value="b" label="Behavioral" />
-                </TabsList>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Layouts" description="Vertical tabs for settings sidebars, icon tabs for compact dashboards.">
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Vertical</CardTitle>
-              <CardDescription>Ideal for a settings page with several sections.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="profile" variant="vertical">
-                <TabsList>
-                  <TabsTrigger value="profile" label="Profile" icon={Home} />
-                  <TabsTrigger value="security" label="Security" icon={Settings} />
-                  <TabsTrigger value="notifications" label="Notifications" icon={Bell} />
-                </TabsList>
-                <TabsContent value="profile" className="text-sm text-zinc-600 dark:text-zinc-300">
-                  Manage your name, photo, and public profile details.
-                </TabsContent>
-                <TabsContent value="security" className="text-sm text-zinc-600 dark:text-zinc-300">
-                  Update your password and two-factor authentication.
-                </TabsContent>
-                <TabsContent value="notifications" className="text-sm text-zinc-600 dark:text-zinc-300">
-                  Choose what you're notified about, and where.
-                </TabsContent>
-              </Tabs>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-base">Icon</CardTitle>
-              <CardDescription>Compact, icon-first triggers for dashboards and bottom navigation.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Tabs defaultValue="feed" variant="icon">
-                <TabsList>
-                  <TabsTrigger value="feed" label="Feed" icon={TrendingUp} />
-                  <TabsTrigger value="friends" label="Friends" icon={Users} badge="!" />
-                  <TabsTrigger value="favs" label="Favs" icon={Star} />
-                </TabsList>
-              </Tabs>
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Scrollable" description="Overflows horizontally instead of wrapping — ideal for narrow or mobile viewports.">
-        <Card className="max-w-md">
-          <CardContent className="pt-6">
-            <Tabs defaultValue="Analytics" variant="scrollable">
-              <TabsList>
-                {["Analytics", "Operations", "Inventory", "Logistics", "Marketing", "Sales"].map((t) => (
-                  <TabsTrigger key={t} value={t} label={t} />
-                ))}
-              </TabsList>
-            </Tabs>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Tabs" rows={TABS_API_ROWS} />
-        <DocsApiTable title="API Reference — TabsList" rows={LIST_API_ROWS} />
-        <DocsApiTable title="API Reference — TabsTrigger" rows={TRIGGER_API_ROWS} />
-        <DocsApiTable title="API Reference — TabsContent" rows={CONTENT_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

package/components/docs/theming-doc-page.tsx

@@ -1,243 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Link from "next/link";
-import { ArrowRight, Check, Copy, Palette } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Tooltip } from "@/components/ui/tooltip";
-import { DocsPage, DocsPageHeader, DocsSection, DocsSectionGrid } from "@/components/docs/docs-page";
-import { COLOR_PALETTE } from "@/data/color-palette";
-import { cn } from "@/lib/cn";
-
-const TOKENS = [
-  { name: "--background", light: "#ffffff", dark: "#09090b", usage: "Page background" },
-  { name: "--foreground", light: "#09090b", dark: "#fafafa", usage: "Default text color" },
-];
-
-const FONTS: { token: string; family: string; sample: string; usage: string; className: string }[] = [
-  { token: "font-sans", family: "Poppins", sample: "The quick brown fox jumps.", usage: "Body copy & UI text", className: "font-sans" },
-  { token: "font-mono", family: "Geist Mono", sample: "const theme = \"dark\";", usage: "Code & data", className: "font-mono" },
-  { token: "font-brand", family: "Orbitron", sample: "ruler.ui", usage: "Wordmark & headings", className: "font-brand" },
-];
-
-const SNIPPET = `:root {
-  --background: #ffffff;
-  --foreground: #09090b;
-}
-
-.dark {
-  --background: #09090b;
-  --foreground: #fafafa;
-}`;
-
-function ThemeSample({ mode }: { mode: "light" | "dark" }) {
-  const isDark = mode === "dark";
-  return (
-    <div
-      className={cn(
-        isDark && "dark",
-        "flex flex-col gap-4 rounded-2xl border p-5",
-        isDark ? "border-zinc-800 bg-zinc-950" : "border-zinc-200 bg-white"
-      )}
-    >
-      <div className="flex items-center justify-between">
-        <span className={cn("text-xs font-semibold uppercase tracking-wide", isDark ? "text-zinc-500" : "text-zinc-400")}>
-          {mode}
-        </span>
-        <Badge variant="success">
-          <Check className="h-3 w-3" />
-          Active
-        </Badge>
-      </div>
-      <div>
-        <p className={cn("text-sm font-semibold", isDark ? "text-white" : "text-zinc-900")}>Workspace settings</p>
-        <p className={cn("mt-1 text-xs leading-relaxed", isDark ? "text-zinc-400" : "text-zinc-500")}>
-          Same components, same markup — only the CSS variables change.
-        </p>
-      </div>
-      <div className="flex items-center gap-2">
-        <Button size="sm">Save changes</Button>
-        <Button variant="outline" size="sm">
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export function ThemingDocPage() {
-  const [copied, setCopied] = useState<string | null>(null);
-
-  function copy(value: string) {
-    navigator.clipboard.writeText(value).catch(() => {});
-    setCopied(value);
-    setTimeout(() => setCopied((prev) => (prev === value ? null : prev)), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={Palette}
-        title="Theming"
-        description="Every component reads from two CSS variables and a single .dark class — no theme provider, no runtime cost."
-      />
-
-      <DocsSection
-        first
-        title="Light & dark, side by side"
-        description="Both panels below render the exact same JSX. The only difference is a .dark class on the wrapper."
-      >
-        <div className="grid gap-4 sm:grid-cols-2">
-          <ThemeSample mode="light" />
-          <ThemeSample mode="dark" />
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Design tokens"
-        description="Two variables drive the entire surface — everything else is computed from them via Tailwind's dark: variant."
-      >
-        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-          <table className="w-full text-left text-sm">
-            <thead>
-              <tr className="border-b border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/40">
-                <th className="px-4 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Token</th>
-                <th className="px-4 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Light</th>
-                <th className="px-4 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Dark</th>
-                <th className="px-4 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Used for</th>
-              </tr>
-            </thead>
-            <tbody>
-              {TOKENS.map((token) => (
-                <tr
-                  key={token.name}
-                  className="border-b border-zinc-200 last:border-0 dark:border-zinc-800"
-                >
-                  <td className="px-4 py-3">
-                    <Tooltip content={copied === token.name ? "Copied!" : "Copy variable name"}>
-                      <button
-                        type="button"
-                        onClick={() => copy(token.name)}
-                        className="group flex items-center gap-2 rounded-md font-mono text-xs text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
-                      >
-                        {token.name}
-                        {copied === token.name ? (
-                          <Check className="h-3 w-3 text-green-500" />
-                        ) : (
-                          <Copy className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100" />
-                        )}
-                      </button>
-                    </Tooltip>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span className="flex items-center gap-2">
-                      <span
-                        className="h-4 w-4 shrink-0 rounded-full border border-black/10"
-                        style={{ backgroundColor: token.light }}
-                      />
-                      <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">{token.light}</span>
-                    </span>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span className="flex items-center gap-2">
-                      <span
-                        className="h-4 w-4 shrink-0 rounded-full border border-white/10"
-                        style={{ backgroundColor: token.dark }}
-                      />
-                      <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">{token.dark}</span>
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 text-zinc-600 dark:text-zinc-300">{token.usage}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </DocsSection>
-
-      <DocsSection title="Typography" description="Three font tokens, each mapped to a Tailwind utility class.">
-        <DocsSectionGrid className="sm:grid-cols-3">
-          {FONTS.map((font) => (
-            <div
-              key={font.token}
-              className="flex flex-col justify-between gap-4 rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950"
-            >
-              <div>
-                <p className="text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  {font.family}
-                </p>
-                <p className={cn("mt-2 text-xl text-zinc-900 dark:text-white", font.className)}>{font.sample}</p>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-xs text-zinc-500 dark:text-zinc-400">{font.usage}</span>
-                <Tooltip content={copied === font.token ? "Copied!" : "Copy class name"}>
-                  <button
-                    type="button"
-                    onClick={() => copy(font.token)}
-                    className="group flex items-center gap-1.5 rounded-md font-mono text-xs text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
-                  >
-                    {font.token}
-                    {copied === font.token ? (
-                      <Check className="h-3 w-3 text-green-500" />
-                    ) : (
-                      <Copy className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100" />
-                    )}
-                  </button>
-                </Tooltip>
-              </div>
-            </div>
-          ))}
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="Color palette" description="Every hue and shade lives on its own page, with contrast built in.">
-        <Link
-          href="/docs/colors"
-          className="group flex items-center justify-between gap-4 overflow-hidden rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition-colors hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700"
-        >
-          <div className="flex items-center gap-4">
-            <div className="flex h-11 -space-x-2">
-              {COLOR_PALETTE.slice(0, 6).map((hue) => (
-                <span
-                  key={hue.name}
-                  className="h-11 w-11 shrink-0 rounded-full ring-2 ring-white dark:ring-zinc-950"
-                  style={{ backgroundColor: hue.shades[5].hex }}
-                />
-              ))}
-            </div>
-            <div>
-              <p className="text-sm font-semibold text-zinc-900 dark:text-white">
-                {COLOR_PALETTE.length} hues · {COLOR_PALETTE.length * 11} shades
-              </p>
-              <p className="text-xs text-zinc-500 dark:text-zinc-400">
-                HEX, RGB, HSL, and CSS — copy any value.
-              </p>
-            </div>
-          </div>
-          <ArrowRight className="h-4 w-4 shrink-0 text-zinc-400 transition-transform group-hover:translate-x-1 dark:text-zinc-500" />
-        </Link>
-      </DocsSection>
-
-      <DocsSection
-        title="Bring your own brand"
-        description="Override the two root variables anywhere above ruler.ui's components and everything repaints — no rebuild, no config."
-      >
-        <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
-          <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
-            <code>{SNIPPET}</code>
-          </pre>
-          <Tooltip content={copied === SNIPPET ? "Copied!" : "Copy CSS"}>
-            <button
-              type="button"
-              onClick={() => copy(SNIPPET)}
-              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
-            >
-              {copied === SNIPPET ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
-            </button>
-          </Tooltip>
-        </div>
-      </DocsSection>
-    </DocsPage>
-  );
-}