ruler-components 0.1.0

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

@@ -0,0 +1,406 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ArrowRight,
+  Check,
+  CheckCircle2,
+  Copy,
+  Download,
+  Loader2,
+  Mail,
+  MousePointerClick,
+  Plus,
+  Sparkles,
+  Trash2,
+} from "lucide-react";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  DocsAccessibility,
+  DocsApiSection,
+  DocsApiTable,
+  DocsDemoPanel,
+  DocsPage,
+  DocsPageHeader,
+  DocsSection,
+  DocsSectionGrid,
+} from "@/components/docs/docs-page";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/lib/cn";
+
+type Variant = NonNullable<ButtonProps["variant"]>;
+type Size = NonNullable<ButtonProps["size"]>;
+
+const VARIANTS: { value: Variant; label: string }[] = [
+  { value: "primary", label: "Primary" },
+  { value: "white", label: "White" },
+  { value: "outline", label: "Outline" },
+  { value: "ghost", label: "Ghost" },
+];
+
+const SIZES: Size[] = ["sm", "md", "lg"];
+
+function codeFor(variant: Variant, size: Size, disabled: boolean) {
+  const props = [
+    variant !== "primary" && `variant="${variant}"`,
+    size !== "md" && `size="${size}"`,
+    disabled && "disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const open = props ? `<Button ${props}>` : "<Button>";
+  return `${open}Button</Button>`;
+}
+
+const API_ROWS = [
+  { prop: "variant", type: '"primary" | "white" | "outline" | "ghost"', default: '"primary"', description: "The visual style variant" },
+  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "The size of the button" },
+  { prop: "disabled", type: "boolean", default: "false", description: "Disables the button" },
+  { prop: "children", type: "ReactNode", default: "—", description: "Button label or content" },
+  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Use native button elements for actions — not divs or spans.",
+  "Provide visible focus states for keyboard users.",
+  "Icon-only buttons must include an accessible label.",
+  "Disabled buttons should not be the only way to convey unavailable actions.",
+  "Loading states should preserve button dimensions and announce status.",
+];
+
+export function ButtonDocPage() {
+  const [loading, setLoading] = React.useState(false);
+  const [variant, setVariant] = useState<Variant>("primary");
+  const [size, setSize] = useState<Size>("md");
+  const [disabled, setDisabled] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const snippet = codeFor(variant, size, disabled);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  const handleLoadingDemo = () => {
+    setLoading(true);
+    window.setTimeout(() => setLoading(false), 1800);
+  };
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={MousePointerClick}
+        title="Button"
+        description="Triggers actions and navigation — from primary CTAs to quiet ghost controls in toolbars and forms."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Build a button 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-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}-${size}-${disabled}`}
+              className="relative animate-[pagination-pop_0.2s_ease-out]"
+            >
+              <Button variant={variant} size={size} disabled={disabled}>
+                Button
+              </Button>
+            </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">
+                  Disabled
+                </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"
+                  )}
+                >
+                  {disabled ? "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="Variants"
+        description="Four weights for different emphasis levels in your interface."
+      >
+        <DocsDemoPanel>
+          <Button variant="primary">Primary</Button>
+          <Button variant="white">White</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Ghost</Button>
+        </DocsDemoPanel>
+      </DocsSection>
+
+      <DocsSection
+        title="Sizes"
+        description="Three sizes to match density — from compact toolbars to hero CTAs."
+        contentClassName="flex flex-wrap items-end gap-4"
+      >
+        <div className="flex flex-col items-center gap-2">
+          <Button size="sm">Small</Button>
+          <span className="text-xs text-zinc-400">sm</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Button size="md">Medium</Button>
+          <span className="text-xs text-zinc-400">md</span>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Button size="lg">Large</Button>
+          <span className="text-xs text-zinc-400">lg</span>
+        </div>
+      </DocsSection>
+
+      <DocsSection>
+        <DocsSectionGrid className="lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">With Icons</CardTitle>
+              <CardDescription>Leading icons add clarity without extra words.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Button>
+                <Mail className="h-4 w-4" />
+                Send email
+              </Button>
+              <Button variant="ghost">
+                <Download className="h-4 w-4" />
+                Download
+              </Button>
+              <Button variant="ghost" size="sm" aria-label="Add item" className="h-8 w-8 p-0">
+                <Plus className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                aria-label="Delete"
+                className="h-8 w-8 p-0 text-red-500 hover:text-red-600 dark:text-red-400"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Loading State</CardTitle>
+              <CardDescription>Preserve layout while an async action runs.</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap items-center gap-3">
+              <Button onClick={handleLoadingDemo} disabled={loading}>
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Saving…
+                  </>
+                ) : (
+                  "Save changes"
+                )}
+              </Button>
+              <Button variant="ghost" disabled={loading}>Cancel</Button>
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection
+        title="On Dark Surfaces"
+        description="White and outline variants are designed for dark backgrounds and media overlays."
+      >
+        <DocsDemoPanel dark>
+          <Button variant="white">Get started</Button>
+          <Button
+            variant="outline"
+            className="border-white/20 bg-white/5 text-white shadow-none hover:border-white/35 hover:bg-white/10 hover:text-white"
+          >
+            Learn more
+          </Button>
+          <Button
+            variant="ghost"
+            className="text-zinc-300 hover:bg-white/10 hover:text-white"
+          >
+            <Sparkles className="h-4 w-4" />
+            Upgrade
+          </Button>
+        </DocsDemoPanel>
+      </DocsSection>
+
+      <DocsSection>
+        <DocsSectionGrid className="lg:grid-cols-2">
+          <Card className="overflow-hidden">
+            <CardHeader className="border-b border-zinc-100 dark:border-zinc-800">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <CardTitle>Upgrade to Pro</CardTitle>
+                  <CardDescription>Unlock advanced features for your team.</CardDescription>
+                </div>
+                <Badge variant="info">New</Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="pt-6">
+              <ul className="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>
+              <div className="mt-6 flex flex-wrap gap-2">
+                <Button size="sm" className="flex-1 sm:flex-none">
+                  Start free trial
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+                <Button variant="ghost" size="sm">Compare plans</Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Button Group</CardTitle>
+              <CardDescription>Pair primary and secondary actions with clear hierarchy.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/50">
+                <p className="text-sm font-medium text-zinc-800 dark:text-zinc-100">
+                  Delete this project?
+                </p>
+                <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+                  This action cannot be undone. All data will be permanently removed.
+                </p>
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <Button size="sm" variant="ghost">Cancel</Button>
+                  <Button
+                    size="sm"
+                    className="bg-red-600 text-white shadow-[0_1px_2px_rgba(220,38,38,0.3),0_4px_12px_rgba(220,38,38,0.2)] hover:bg-red-500 hover:-translate-y-0.5 hover:shadow-[0_4px_16px_rgba(220,38,38,0.35)] dark:bg-red-600 dark:hover:bg-red-500"
+                  >
+                    Delete project
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Disabled">
+        <Card className="max-w-md">
+          <CardContent className="flex flex-wrap items-center gap-3 pt-6">
+            <Button disabled>Primary</Button>
+            <Button variant="ghost" disabled>Ghost</Button>
+            <Button variant="outline" disabled className="border-zinc-300 text-zinc-400 dark:border-zinc-700">
+              Outline
+            </Button>
+          </CardContent>
+        </Card>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference" rows={API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}