ruler-components 0.1.0 → 0.1.2

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

@@ -1,352 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Check, ChevronsUpDown, Copy, HelpCircle, PanelLeft, Truck } from "lucide-react";
-import { Accordion, AccordionItem, AccordionNested, AccordionLink } from "@/components/ui/accordion";
-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,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const ACCORDION_API_ROWS = [
-  { prop: "children", type: "ReactNode", default: "—", description: "One or more AccordionItem elements" },
-  { prop: "defaultValue", type: "string | null", default: "null", description: "Value of the item expanded on mount" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes for the wrapper" },
-];
-
-const ITEM_API_ROWS = [
-  { prop: "value", type: "string", default: "—", description: "Unique identifier used to track open state" },
-  { prop: "title", type: "string", default: "—", description: "Text shown in the trigger row" },
-  { prop: "children", type: "ReactNode", default: "—", description: "Panel content revealed when open" },
-  { prop: "variant", type: '"plus" | "chevron"', default: '"plus"', description: "Icon and trigger style" },
-];
-
-const NESTED_API_ROWS = [
-  { prop: "title", type: "string", default: "—", description: "Label for the branch node" },
-  { prop: "children", type: "ReactNode", default: "—", description: "Nested AccordionNested / AccordionLink items" },
-  { prop: "level", type: "number", default: "0", description: "Indentation depth — increment for each nested level" },
-];
-
-const LINK_API_ROWS = [
-  { prop: "title", type: "string", default: "—", description: "Label for the leaf navigation item" },
-  { prop: "level", type: "number", default: "0", description: "Indentation depth — match the parent's level + 1" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Every trigger renders as a native <button>, so it's reachable and activatable via keyboard by default.",
-  "aria-expanded reflects open state and aria-controls links each trigger to its panel for screen readers.",
-  "Panels animate by measuring scrollHeight rather than toggling display, so content never clips mid-transition.",
-  "Only one item stays open at a time within an Accordion — keeps focus narrow for FAQ-style content.",
-  "Nested menus support arbitrary depth via the level prop and indent children automatically.",
-];
-
-const FAQ = [
-  {
-    value: "1",
-    title: "Can I change my plan later?",
-    answer: "Yes — upgrade or downgrade at any time from your billing settings. Changes are prorated automatically.",
-  },
-  {
-    value: "2",
-    title: "Do you offer a free trial?",
-    answer: "Every plan includes a 14-day trial with full feature access, no credit card required.",
-  },
-  {
-    value: "3",
-    title: "Is my data encrypted?",
-    answer: "All data is encrypted in transit with TLS 1.3 and at rest with AES-256, on every plan.",
-  },
-  {
-    value: "4",
-    title: "What happens if I cancel?",
-    answer: "Your workspace stays active until the end of the current billing period, then moves to the free tier automatically.",
-  },
-];
-
-type PlaygroundVariant = "plus" | "chevron";
-
-const PLAYGROUND_VARIANTS: { value: PlaygroundVariant; label: string }[] = [
-  { value: "plus", label: "Plus" },
-  { value: "chevron", label: "Chevron" },
-];
-
-const ITEM_COUNTS = [2, 3] as const;
-
-function codeFor(variant: PlaygroundVariant, itemCount: (typeof ITEM_COUNTS)[number], defaultOpen: boolean) {
-  const items = FAQ.slice(0, itemCount);
-  const props = [variant !== "plus" && `variant="${variant}"`].filter(Boolean).join(" ");
-  const openProp = defaultOpen ? ` defaultValue="${items[0].value}"` : "";
-  const children = items
-    .map((item) => {
-      const itemProps = [`value="${item.value}"`, `title="${item.title}"`, props].filter(Boolean).join(" ");
-      return `  <AccordionItem ${itemProps}>\n    ${item.answer}\n  </AccordionItem>`;
-    })
-    .join("\n");
-  return `<Accordion${openProp}>\n${children}\n</Accordion>`;
-}
-
-export function AccordionDocPage() {
-  const [variant, setVariant] = useState<"plus" | "chevron">("plus");
-  const [playgroundVariant, setPlaygroundVariant] = useState<PlaygroundVariant>("plus");
-  const [itemCount, setItemCount] = useState<(typeof ITEM_COUNTS)[number]>(3);
-  const [defaultOpen, setDefaultOpen] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(playgroundVariant, itemCount, defaultOpen);
-  const playgroundItems = FAQ.slice(0, itemCount);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={ChevronsUpDown}
-        title="Accordion"
-        description="A vertically stacked list of items that can be expanded or collapsed to reveal more content."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Pick a trigger style and item count, then copy the exact markup — 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-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={`${playgroundVariant}-${itemCount}-${defaultOpen}`}
-              className="relative w-full max-w-md animate-[pagination-pop_0.2s_ease-out] rounded-xl border border-zinc-200 bg-white px-5 dark:border-zinc-800 dark:bg-zinc-950"
-            >
-              <Accordion defaultValue={defaultOpen ? playgroundItems[0].value : null}>
-                {playgroundItems.map((item) => (
-                  <AccordionItem key={item.value} value={item.value} title={item.title} variant={playgroundVariant}>
-                    {item.answer}
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            </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">
-                  {PLAYGROUND_VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setPlaygroundVariant(v.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                        playgroundVariant === 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">
-                  Items
-                </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">
-                  {ITEM_COUNTS.map((count) => (
-                    <button
-                      key={count}
-                      type="button"
-                      onClick={() => setItemCount(count)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                        itemCount === count
-                          ? "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"
-                      )}
-                    >
-                      {count}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Default open
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setDefaultOpen((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    defaultOpen
-                      ? "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"
-                  )}
-                >
-                  {defaultOpen ? "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="Try it"
-        description="One trigger style, swapped live — pick whichever matches your layout's density."
-      >
-        <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="flex flex-wrap items-center justify-between gap-4 border-b border-zinc-200 bg-zinc-50/70 px-5 py-4 dark:border-zinc-800 dark:bg-zinc-900/40">
-            <div className="flex items-center gap-3">
-              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
-                <HelpCircle className="h-4 w-4" />
-              </span>
-              <div>
-                <p className="text-sm font-semibold text-zinc-900 dark:text-white">Frequently asked questions</p>
-                <p className="text-xs text-zinc-500 dark:text-zinc-400">Billing and account basics.</p>
-              </div>
-            </div>
-
-            <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-white p-1 dark:border-zinc-700 dark:bg-zinc-950">
-              {(["plus", "chevron"] as const).map((v) => (
-                <button
-                  key={v}
-                  type="button"
-                  onClick={() => setVariant(v)}
-                  className={cn(
-                    "rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-colors",
-                    variant === v
-                      ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
-                      : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                  )}
-                >
-                  {v}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="bg-white px-5 dark:bg-zinc-950">
-            <Accordion defaultValue="1">
-              {FAQ.map((item) => (
-                <AccordionItem key={item.value} value={item.value} title={item.title} variant={variant}>
-                  {item.answer}
-                </AccordionItem>
-              ))}
-            </Accordion>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Hierarchical / Nested"
-        description="A menu-like tree with unlimited depth — ideal for sidebar and docs navigation."
-      >
-        <Card className="max-w-md overflow-hidden p-0">
-          <div className="flex items-center gap-2 border-b border-zinc-100 bg-zinc-50/80 px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900/40">
-            <PanelLeft className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500" />
-            <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Documentation</span>
-          </div>
-          <div className="p-3">
-            <AccordionNested title="Getting Started">
-              <AccordionLink title="Introduction" level={1} />
-              <AccordionLink title="Installation" level={1} />
-            </AccordionNested>
-            <AccordionNested title="Components">
-              <AccordionLink title="Button" level={1} />
-              <AccordionNested title="Overlays" level={1}>
-                <AccordionLink title="Dialog" level={2} />
-                <AccordionLink title="Modal" level={2} />
-              </AccordionNested>
-            </AccordionNested>
-            <AccordionLink title="Theming" />
-          </div>
-        </Card>
-      </DocsSection>
-
-      <DocsSection
-        title="In context"
-        description="A shipping & returns block, the way it'd actually ship on a product page."
-      >
-        <Card className="max-w-2xl overflow-hidden p-0">
-          <CardHeader className="flex-row items-center gap-3 border-b border-zinc-100 dark:border-zinc-800">
-            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
-              <Truck className="h-4 w-4" />
-            </span>
-            <div>
-              <CardTitle className="text-base">Shipping &amp; Returns</CardTitle>
-              <CardDescription>Everything covered under our standard policy.</CardDescription>
-            </div>
-            <Badge variant="outline" className="ml-auto">
-              Policy v2
-            </Badge>
-          </CardHeader>
-          <CardContent className="pt-2">
-            <Accordion defaultValue="ship">
-              <AccordionItem value="ship" title="How long does shipping take?">
-                Orders ship within 1 business day and arrive in 3–5 business days domestically, or 7–14 days
-                internationally.
-              </AccordionItem>
-              <AccordionItem value="return" title="What's your return policy?">
-                Unused items in original packaging can be returned within 30 days for a full refund — no restocking
-                fee.
-              </AccordionItem>
-              <AccordionItem value="warranty" title="Is there a warranty?">
-                Every order includes a 1-year limited warranty covering manufacturing defects.
-              </AccordionItem>
-            </Accordion>
-          </CardContent>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Accordion" rows={ACCORDION_API_ROWS} />
-        <DocsApiTable title="API Reference — AccordionItem" rows={ITEM_API_ROWS} />
-        <DocsApiTable title="API Reference — AccordionNested" rows={NESTED_API_ROWS} />
-        <DocsApiTable title="API Reference — AccordionLink" rows={LINK_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

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

@@ -1,293 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Check, Copy, RotateCcw, TriangleAlert } from "lucide-react";
-import { Alert } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-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 API_ROWS = [
-  { prop: "variant", type: '"info" | "success" | "warning" | "error"', default: '"info"', description: "The style variant" },
-  { prop: "title", type: "string", default: "—", description: "The title text" },
-  { prop: "description", type: "string", default: "—", description: "The description text" },
-  { prop: "dismissible", type: "boolean", default: "false", description: "Shows close button" },
-  { prop: "onDismiss", type: "() => void", default: "—", description: "Dismiss callback" },
-  { prop: "action", type: "ReactNode", default: "—", description: "Trailing action, e.g. a button" },
-  { prop: "children", type: "ReactNode", default: "—", description: "Custom content" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Use appropriate semantic markup.",
-  "Important alerts should use an appropriate ARIA role.",
-  "Don't rely on color alone to communicate status.",
-  "Provide meaningful text for screen readers.",
-  "Dismiss buttons should have an accessible label.",
-];
-
-type Variant = "info" | "success" | "warning" | "error";
-
-const VARIANTS: { value: Variant; label: string; swatch: string }[] = [
-  { value: "info", label: "Info", swatch: "bg-[#0070BA]" },
-  { value: "success", label: "Success", swatch: "bg-[#28A745]" },
-  { value: "warning", label: "Warning", swatch: "bg-[#E58E00]" },
-  { value: "error", label: "Error", swatch: "bg-[#D93025]" },
-];
-
-const COPY: Record<Variant, { title: string; description: string }> = {
-  info: { title: "Information", description: "This is an informational message for the user." },
-  success: { title: "Success", description: "Your changes have been saved successfully." },
-  warning: { title: "Warning", description: "This action may affect your existing data." },
-  error: { title: "Error", description: "Something went wrong. Please try again." },
-};
-
-function codeFor(variant: Variant, dismissible: boolean, withAction: boolean) {
-  const { title, description } = COPY[variant];
-  const lines = [
-    variant !== "info" ? `variant="${variant}"` : null,
-    `title="${title}"`,
-    `description="${description}"`,
-    dismissible ? "dismissible" : null,
-    withAction ? "action={<Button size=\"sm\">Action</Button>}" : null,
-  ].filter(Boolean);
-  return `<Alert\n  ${lines.join("\n  ")}\n/>`;
-}
-
-const ACTION_BUTTON_CLASS =
-  "h-7 cursor-pointer whitespace-nowrap border border-zinc-300 px-2 text-[10px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-white";
-
-const NOTIFICATIONS = [
-  { id: 1, variant: "info" as const, title: "Scheduled maintenance", description: "Search will be briefly unavailable tonight at 2 AM UTC." },
-  { id: 2, variant: "success" as const, title: "Payment received", description: "Your invoice #4471 has been paid in full." },
-  { id: 3, variant: "warning" as const, title: "Storage almost full", description: "You've used 92% of your workspace storage." },
-  { id: 4, variant: "error" as const, title: "Sync failed", description: "3 files couldn't be uploaded. Check your connection." },
-];
-
-export function AlertDocPage() {
-  const [variant, setVariant] = useState<Variant>("warning");
-  const [dismissible, setDismissible] = useState(false);
-  const [withAction, setWithAction] = useState(true);
-  const [dismissed, setDismissed] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [dismissedIds, setDismissedIds] = useState<number[]>([]);
-
-  const snippet = codeFor(variant, dismissible, withAction);
-  const visibleNotifications = NOTIFICATIONS.filter((n) => !dismissedIds.includes(n.id));
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={TriangleAlert}
-        title="Alert"
-        description="Displays a prominent message to inform users about important changes, warnings, or system status."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Every variant, with or without a dismiss button and action — live, with the exact markup to match."
-      >
-        <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-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",
-              }}
-            />
-            {dismissed ? (
-              <button
-                type="button"
-                onClick={() => setDismissed(false)}
-                className="relative flex items-center gap-2 rounded-lg border border-dashed border-zinc-300 px-4 py-2.5 text-sm font-medium text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-700 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-200"
-              >
-                <RotateCcw className="h-3.5 w-3.5" />
-                Dismissed — show it again
-              </button>
-            ) : (
-              <div
-                key={`${variant}-${dismissible}-${withAction}`}
-                className="relative w-full max-w-md animate-[pagination-pop_0.2s_ease-out]"
-              >
-                <Alert
-                  variant={variant}
-                  title={COPY[variant].title}
-                  description={COPY[variant].description}
-                  dismissible={dismissible}
-                  onDismiss={dismissible ? () => setDismissed(true) : undefined}
-                  action={withAction ? <Button variant="outline" size="sm" className={ACTION_BUTTON_CLASS}>Action</Button> : undefined}
-                />
-              </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) => (
-                    <Tooltip key={v.value} content={v.label}>
-                      <button
-                        type="button"
-                        onClick={() => setVariant(v.value)}
-                        aria-label={v.label}
-                        className={cn(
-                          "flex h-8 w-8 items-center justify-center rounded-lg border transition-all",
-                          variant === v.value
-                            ? "border-zinc-900 ring-2 ring-zinc-900 ring-offset-2 ring-offset-zinc-50 dark:border-white dark:ring-white dark:ring-offset-zinc-900"
-                            : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:border-zinc-600"
-                        )}
-                      >
-                        <span className={cn("h-3.5 w-3.5 rounded-full", v.swatch)} />
-                      </button>
-                    </Tooltip>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Dismissible
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setDismissible((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    dismissible
-                      ? "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"
-                  )}
-                >
-                  {dismissible ? "On" : "Off"}
-                </button>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Action
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithAction((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withAction
-                      ? "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"
-                  )}
-                >
-                  {withAction ? "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="In context"
-        description="Alerts rarely stand alone — here's how they read inside real UI."
-      >
-        <DocsSectionGrid className="lg:grid-cols-[1.2fr_1fr]">
-          <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="flex items-center justify-between border-b border-zinc-200 bg-zinc-50/70 px-4 py-2.5 dark:border-zinc-800 dark:bg-zinc-900/40">
-              <p className="text-sm font-semibold text-zinc-900 dark:text-white">Notification center</p>
-              {dismissedIds.length > 0 && (
-                <button
-                  type="button"
-                  onClick={() => setDismissedIds([])}
-                  className="flex items-center gap-1 text-xs font-medium text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
-                >
-                  <RotateCcw className="h-3 w-3" />
-                  Restore all
-                </button>
-              )}
-            </div>
-            <div className="flex flex-col gap-3 p-4">
-              {visibleNotifications.length === 0 ? (
-                <p className="py-8 text-center text-sm text-zinc-400 dark:text-zinc-600">
-                  All caught up — nothing left to review.
-                </p>
-              ) : (
-                visibleNotifications.map((n) => (
-                  <Alert
-                    key={n.id}
-                    variant={n.variant}
-                    title={n.title}
-                    description={n.description}
-                    dismissible
-                    onDismiss={() => setDismissedIds((ids) => [...ids, n.id])}
-                  />
-                ))
-              )}
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <div className="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">
-              <p className="text-sm font-semibold text-zinc-900 dark:text-white">Invite teammates</p>
-              <label className="mt-3 block text-xs font-medium text-zinc-500 dark:text-zinc-400">
-                Email address
-              </label>
-              <input
-                readOnly
-                value="not-an-email"
-                className="mt-1.5 w-full rounded-lg border border-red-300 bg-red-50/50 px-3 py-2 text-sm text-zinc-700 outline-none dark:border-red-900/60 dark:bg-red-950/20 dark:text-zinc-200"
-              />
-              <div className="mt-2">
-                <Alert variant="error" description="Enter a valid email address to continue." />
-              </div>
-            </div>
-
-            <div className="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">
-              <p className="mb-3 text-sm font-semibold text-zinc-900 dark:text-white">Plain, no title</p>
-              <Alert variant="info" description="This is a simple informational alert without a title." />
-            </div>
-          </div>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference" rows={API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}