ruler-components 0.1.0 → 0.1.2

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

@@ -1,364 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import {
-  ArrowRight,
-  Check,
-  CheckCircle2,
-  Copy,
-  LayoutTemplate,
-  Sparkles,
-  TrendingUp,
-  Users,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  type CardProps,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSimpleTable,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "variant", type: '"default" | "outline" | "elevated" | "interactive"', default: '"default"', description: "The visual style of the card" },
-  { prop: "children", type: "ReactNode", default: "—", description: "Card content" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const SUBCOMPONENT_ROWS = [
-  { name: "CardHeader", description: "Top section for title and description" },
-  { name: "CardTitle", description: "Primary heading inside the card" },
-  { name: "CardDescription", description: "Supporting text below the title" },
-  { name: "CardContent", description: "Main body content area" },
-  { name: "CardFooter", description: "Bottom section for actions" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Use semantic headings inside cards for proper document structure.",
-  "Ensure interactive elements in card footers have accessible labels.",
-  "Don't rely on card borders alone to convey grouping — use headings.",
-  "Maintain sufficient contrast between card background and page background.",
-  "Keep card content concise and scannable.",
-];
-
-type Variant = NonNullable<CardProps["variant"]>;
-
-const VARIANTS: { value: Variant; label: string }[] = [
-  { value: "default", label: "Default" },
-  { value: "outline", label: "Outline" },
-  { value: "elevated", label: "Elevated" },
-  { value: "interactive", label: "Interactive" },
-];
-
-function codeFor(variant: Variant, withFooter: boolean) {
-  const openProps = variant !== "default" ? ` variant="${variant}"` : "";
-  const footer = withFooter
-    ? `\n  <CardFooter>\n    <Button size="sm">View report</Button>\n  </CardFooter>`
-    : "";
-  return `<Card${openProps}>\n  <CardHeader>\n    <CardTitle>Weekly Performance</CardTitle>\n    <CardDescription>Your team velocity compared to last week.</CardDescription>\n  </CardHeader>\n  <CardContent>...</CardContent>${footer}\n</Card>`;
-}
-
-export function CardDocPage() {
-  const [variant, setVariant] = useState<Variant>("default");
-  const [withFooter, setWithFooter] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(variant, withFooter);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={LayoutTemplate}
-        title="Card"
-        description="Groups related content into a clear, scannable surface — ideal for dashboards, settings, and summaries."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a card and copy the exact markup — every variant, live."
-      >
-        <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-[14rem] items-center justify-center overflow-hidden bg-zinc-50 p-6 dark:bg-zinc-900/40">
-            <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}-${withFooter}`}
-              className="relative w-full max-w-sm animate-[pagination-pop_0.2s_ease-out]"
-            >
-              <Card variant={variant}>
-                <CardHeader>
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
-                      <TrendingUp className="h-5 w-5" />
-                    </div>
-                    <Badge variant="success">+12%</Badge>
-                  </div>
-                  <CardTitle className="mt-3">Weekly Performance</CardTitle>
-                  <CardDescription>Your team velocity compared to last week.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <p className="text-xs text-zinc-500 dark:text-zinc-400">Tasks done</p>
-                      <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-white">24</p>
-                    </div>
-                    <div>
-                      <p className="text-xs text-zinc-500 dark:text-zinc-400">In progress</p>
-                      <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-white">6</p>
-                    </div>
-                  </div>
-                </CardContent>
-                {withFooter && (
-                  <CardFooter>
-                    <Button size="sm">View report</Button>
-                  </CardFooter>
-                )}
-              </Card>
-            </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 items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setVariant(v.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                        variant === v.value
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {v.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Footer
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithFooter((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withFooter
-                      ? "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 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  {withFooter ? "On" : "Off"}
-                </button>
-              </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="A balanced card with header, body, and a soft footer action area."
-      >
-        <div className="max-w-md">
-          <Card>
-            <CardHeader>
-              <div className="flex items-start justify-between gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
-                  <TrendingUp className="h-5 w-5" />
-                </div>
-                <Badge variant="success">+12%</Badge>
-              </div>
-              <CardTitle className="mt-3">Weekly Performance</CardTitle>
-              <CardDescription>Your team velocity compared to last week.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <p className="text-xs text-zinc-500 dark:text-zinc-400">Tasks done</p>
-                  <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-white">24</p>
-                </div>
-                <div>
-                  <p className="text-xs text-zinc-500 dark:text-zinc-400">In progress</p>
-                  <p className="mt-1 text-2xl font-semibold text-zinc-900 dark:text-white">6</p>
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button size="sm">View report</Button>
-              <Button variant="ghost" size="sm">Share</Button>
-            </CardFooter>
-          </Card>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Variants"
-        description="Pick the right surface weight for your layout hierarchy."
-        contentClassName="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"
-      >
-        <Card variant="default">
-          <CardHeader>
-            <CardTitle>Default</CardTitle>
-            <CardDescription>Soft shadow for everyday content.</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card variant="outline">
-          <CardHeader>
-            <CardTitle>Outline</CardTitle>
-            <CardDescription>Clean border, no elevation.</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card variant="elevated">
-          <CardHeader>
-            <CardTitle>Elevated</CardTitle>
-            <CardDescription>Stronger depth for emphasis.</CardDescription>
-          </CardHeader>
-        </Card>
-        <Card variant="interactive">
-          <CardHeader>
-            <CardTitle className="flex items-center justify-between">
-              Interactive
-              <ArrowRight className="h-4 w-4 text-zinc-400" />
-            </CardTitle>
-            <CardDescription>Hover to lift — great for links.</CardDescription>
-          </CardHeader>
-        </Card>
-      </DocsSection>
-
-      <DocsSection>
-        <DocsSectionGrid className="lg:grid-cols-2">
-          <DocsSubsection title="Pricing Card">
-            <Card className="flex h-full max-w-sm flex-col">
-              <CardHeader>
-                <div className="flex items-center gap-2">
-                  <Sparkles className="h-4 w-4 text-zinc-500" />
-                  <Badge variant="info">Popular</Badge>
-                </div>
-                <CardTitle className="mt-2">Pro Plan</CardTitle>
-                <CardDescription>Everything you need to ship faster.</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-end gap-1">
-                  <span className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-white">$29</span>
-                  <span className="mb-1 text-sm text-zinc-500 dark:text-zinc-400">/month</span>
-                </div>
-                <ul className="mt-5 space-y-2.5 text-sm text-zinc-600 dark:text-zinc-300">
-                  <li className="flex items-center gap-2">
-                    <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
-                    Unlimited projects
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
-                    Priority support
-                  </li>
-                  <li className="flex items-center gap-2">
-                    <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
-                    Advanced analytics
-                  </li>
-                </ul>
-              </CardContent>
-              <CardFooter className="mt-auto">
-                <Button size="sm" className="w-full">Get started</Button>
-              </CardFooter>
-            </Card>
-          </DocsSubsection>
-
-          <DocsSubsection title="Team Card">
-            <Card className="flex h-full max-w-sm flex-col">
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900">
-                    <Users className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <CardTitle>Design Team</CardTitle>
-                    <CardDescription>5 members · 3 active now</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="flex -space-x-2">
-                  {["ZK", "AM", "JR", "LS", "PN"].map((initials) => (
-                    <div
-                      key={initials}
-                      className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-zinc-200 text-[10px] font-semibold text-zinc-700 dark:border-zinc-900 dark:bg-zinc-700 dark:text-zinc-200"
-                    >
-                      {initials}
-                    </div>
-                  ))}
-                </div>
-                <p className="mt-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
-                  Collaborate on UI components, design tokens, and documentation.
-                </p>
-              </CardContent>
-              <CardFooter className="mt-auto">
-                <Button variant="ghost" size="sm">Manage team</Button>
-              </CardFooter>
-            </Card>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Card" rows={API_ROWS} />
-        <DocsSimpleTable title="Subcomponents" rows={SUBCOMPONENT_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

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

@@ -1,277 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Check, Copy, SquareCheck } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "checked", type: "boolean", default: "false", description: "Controlled checked state" },
-  { prop: "defaultChecked", type: "boolean", default: "false", description: "Uncontrolled initial checked state" },
-  { prop: "onChange", type: "(event) => void", default: "—", description: "Change event handler" },
-  { prop: "disabled", type: "boolean", default: "false", description: "Disables the checkbox" },
-  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "The size of the checkbox" },
-  { prop: "variant", type: '"inline" | "card"', default: '"inline"', description: "Layout style — card auto-applies when description is set" },
-  { prop: "label", type: "string", default: "—", description: "Label text displayed beside the checkbox" },
-  { prop: "description", type: "string", default: "—", description: "Helper text below the label" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Always pair checkboxes with a visible label.",
-  "Use fieldset and legend for groups of related checkboxes.",
-  "Ensure focus states are clearly visible.",
-  "Don't rely on color alone to indicate checked state.",
-  "Support keyboard interaction with Space to toggle.",
-];
-
-type Size = "sm" | "md" | "lg";
-type Variant = "inline" | "card";
-
-const SIZES: Size[] = ["sm", "md", "lg"];
-
-const VARIANTS: { value: Variant; label: string }[] = [
-  { value: "inline", label: "Inline" },
-  { value: "card", label: "Card" },
-];
-
-function codeFor(variant: Variant, size: Size, disabled: boolean, checked: boolean) {
-  const props = [
-    size !== "md" && `size="${size}"`,
-    variant !== "inline" && `variant="${variant}"`,
-    checked && "defaultChecked",
-    disabled && "disabled",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  const descriptionLine = variant === "card" ? '\n  description="A helper line of detail."' : "";
-  const labelLine = `\n  label="Accept terms"`;
-  return `<Checkbox${labelLine}${descriptionLine}${props ? `\n  ${props}` : ""}\n/>`;
-}
-
-export function CheckboxDocPage() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    sms: false,
-    push: true,
-  });
-
-  const [variant, setVariant] = useState<Variant>("inline");
-  const [size, setSize] = useState<Size>("md");
-  const [disabled, setDisabled] = useState(false);
-  const [checked, setChecked] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(variant, size, disabled, checked);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={SquareCheck}
-        title="Checkbox"
-        description="Allows users to select one or more options from a set of choices."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a checkbox and copy the exact markup — every combination, live."
-      >
-        <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-[11rem] items-center justify-center overflow-hidden bg-zinc-50 p-8 dark:bg-zinc-900/40">
-            <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 className="relative w-full max-w-xs" key={`${variant}-${size}-${disabled}-${checked}`}>
-              <Checkbox
-                variant={variant}
-                size={size}
-                disabled={disabled}
-                checked={checked}
-                onChange={(e) => setChecked(e.target.checked)}
-                label="Accept terms"
-                description={variant === "card" ? "A helper line of detail." : undefined}
-                className="items-center animate-[pagination-pop_0.25s_ease-out]"
-              />
-            </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 items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setVariant(v.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                        variant === v.value
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {v.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Size
-                </p>
-                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {SIZES.map((s) => (
-                    <button
-                      key={s}
-                      type="button"
-                      onClick={() => setSize(s)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        size === s
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {s}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  State
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setDisabled((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    disabled
-                      ? "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 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  <SquareCheck className="h-3.5 w-3.5" />
-                  {disabled ? "Disabled" : "Enabled"}
-                </button>
-              </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>
-        <DocsSectionGrid>
-          <DocsSubsection title="Sizes">
-            <div className="flex flex-col gap-2.5">
-              <Checkbox size="sm" label="Small" defaultChecked />
-              <Checkbox size="md" label="Medium" defaultChecked />
-              <Checkbox size="lg" label="Large" defaultChecked />
-            </div>
-          </DocsSubsection>
-          <DocsSubsection title="Disabled">
-            <div className="flex flex-col gap-2.5">
-              <Checkbox label="Disabled unchecked" disabled />
-              <Checkbox label="Disabled checked" defaultChecked disabled />
-            </div>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection
-        title="With Description"
-        description="Card layout automatically applies for options with helper text."
-      >
-        <Checkbox
-          label="Accept terms and conditions"
-          description="You agree to our Terms of Service and Privacy Policy."
-        />
-      </DocsSection>
-
-      <DocsSection
-        title="Notification Preferences"
-        description="Card-style checkboxes make multi-option settings easy to scan and tap."
-      >
-        <div className="flex max-w-md flex-col gap-2.5">
-          <Checkbox
-            variant="card"
-            label="Email notifications"
-            description="Receive updates and alerts in your inbox."
-            checked={notifications.email}
-            onChange={(e) =>
-              setNotifications((prev) => ({ ...prev, email: e.target.checked }))
-            }
-          />
-          <Checkbox
-            variant="card"
-            label="SMS notifications"
-            description="Get text messages for urgent updates."
-            checked={notifications.sms}
-            onChange={(e) =>
-              setNotifications((prev) => ({ ...prev, sms: e.target.checked }))
-            }
-          />
-          <Checkbox
-            variant="card"
-            label="Push notifications"
-            description="Instant alerts delivered to your device."
-            checked={notifications.push}
-            onChange={(e) =>
-              setNotifications((prev) => ({ ...prev, push: e.target.checked }))
-            }
-          />
-        </div>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference" rows={API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}