ruler-components 0.1.0 → 0.1.2

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

@@ -1,406 +0,0 @@
-"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>
-  );
-}