ruler-components 0.1.0

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

@@ -0,0 +1,230 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check, Copy, Rows3 } from "lucide-react";
+import {
+  AccordionSkeletonPlus,
+  AccordionSkeletonChevron,
+  CardSkeletonGrid,
+  ListSkeleton,
+  TableSkeleton
+} from "@/components/ui/skeleton";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Tooltip } from "@/components/ui/tooltip";
+import {
+  DocsAccessibility,
+  DocsApiSection,
+  DocsPage,
+  DocsPageHeader,
+  DocsSection,
+  DocsSectionGrid,
+  DocsSimpleTable,
+} from "@/components/docs/docs-page";
+import { cn } from "@/lib/cn";
+
+const COMPONENT_ROWS = [
+  { name: "AccordionSkeletonPlus", description: "Rows matching the plus-style accordion — icon circle and title bar. Accepts count (default 3)." },
+  { name: "AccordionSkeletonChevron", description: "Rows matching the chevron-style accordion — title bar and trailing icon. Accepts count (default 3)." },
+  { name: "CardSkeletonGrid", description: "A responsive grid of image, title, and description placeholders. Accepts count (default 3)." },
+  { name: "ListSkeleton", description: "A feed-style card with an avatar and multi-line text placeholders. Accepts count (default 3)." },
+  { name: "TableSkeleton", description: "A structured data table placeholder with headers and multiple rows. Accepts count (default 5)." },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Wrap a skeleton group in a container with aria-busy=\"true\" so assistive tech knows content is still loading.",
+  "Skeletons are decorative — hide them from screen readers with aria-hidden if a loading announcement is provided elsewhere.",
+  "Match each skeleton's shape and dimensions to the real content to prevent layout shift once it loads.",
+  "Swap the skeleton for real content, or an error state, as soon as data resolves — never leave it rendered indefinitely.",
+  "Keep the pulse animation slow and subtle — avoid flashing effects that could trigger photosensitivity.",
+];
+
+type Style = "accordion-plus" | "accordion-chevron" | "card-grid" | "list" | "table";
+
+const STYLES: { value: Style; label: string; component: string }[] = [
+  { value: "accordion-plus", label: "Accordion (plus)", component: "AccordionSkeletonPlus" },
+  { value: "accordion-chevron", label: "Accordion (chevron)", component: "AccordionSkeletonChevron" },
+  { value: "card-grid", label: "Card grid", component: "CardSkeletonGrid" },
+  { value: "list", label: "List", component: "ListSkeleton" },
+  { value: "table", label: "Table", component: "TableSkeleton" },
+];
+
+const COUNTS = [2, 3, 5] as const;
+
+const STYLE_RENDERERS: Record<Style, (count: number) => React.ReactNode> = {
+  "accordion-plus": (count) => <AccordionSkeletonPlus count={count} />,
+  "accordion-chevron": (count) => <AccordionSkeletonChevron count={count} />,
+  "card-grid": (count) => <CardSkeletonGrid count={count} />,
+  list: (count) => <ListSkeleton count={count} />,
+  table: (count) => <TableSkeleton count={count} />,
+};
+
+function codeFor(style: Style, count: number) {
+  const { component } = STYLES.find((s) => s.value === style)!;
+  return `import { ${component} } from "@/components/ui/skeleton"\n\n<${component} count={${count}} />`;
+}
+
+export function SkeletonDocPage() {
+  const [style, setStyle] = useState<Style>("list");
+  const [count, setCount] = useState(3);
+  const [copied, setCopied] = useState(false);
+
+  const snippet = codeFor(style, count);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={Rows3}
+        title="Skeleton"
+        description="Placeholder loading states that mirror the shape of real content — accordions, card grids, and feeds — to reduce layout shift and improve perceived performance."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Pick a layout 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-[12rem] 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={`${style}-${count}`}
+              className="relative w-full max-w-md animate-[pagination-pop_0.2s_ease-out]"
+            >
+              {STYLE_RENDERERS[style](count)}
+            </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">
+                  Style
+                </p>
+                <div className="flex flex-wrap gap-1.5">
+                  {STYLES.map((s) => (
+                    <button
+                      key={s.value}
+                      type="button"
+                      onClick={() => setStyle(s.value)}
+                      className={cn(
+                        "rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                        style === s.value
+                          ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
+                          : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600"
+                      )}
+                    >
+                      {s.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Count
+                </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">
+                  {COUNTS.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      onClick={() => setCount(c)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
+                        count === c
+                          ? "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"
+                      )}
+                    >
+                      {c}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
+              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
+                <code>{snippet}</code>
+              </pre>
+              <Tooltip content={copied ? "Copied!" : "Copy code"}>
+                <button
+                  type="button"
+                  onClick={copySnippet}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
+                >
+                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsSection title="Default" description="Match each skeleton to the component it's standing in for.">
+        <Card className="max-w-md p-4">
+          <AccordionSkeletonPlus />
+        </Card>
+      </DocsSection>
+
+      <DocsSection title="Accordion Variants" description="Skeletons for both accordion trigger styles.">
+        <DocsSectionGrid>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Plus style</CardTitle>
+              <CardDescription>Matches the default accordion trigger.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AccordionSkeletonPlus />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Chevron style</CardTitle>
+              <CardDescription>Matches the chevron accordion trigger.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AccordionSkeletonChevron />
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Card Grid" description="A media-heavy placeholder for image and text cards.">
+        <Card className="p-6">
+          <CardSkeletonGrid count={3} />
+        </Card>
+      </DocsSection>
+
+      <DocsSection title="Feed / List" description="A detailed placeholder with an avatar and multiple text lines.">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <ListSkeleton count={1} />
+          <ListSkeleton count={1} />
+        </div>
+      </DocsSection>
+
+      <DocsSection title="Data Table" description="A comprehensive layout for list-based data views.">
+        <TableSkeleton count={8} />
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsSimpleTable title="Available Skeletons" rows={COMPONENT_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}

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

@@ -0,0 +1,309 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check, ChevronLeft, ChevronRight, Copy, Layers, ShieldCheck, Box, Truck, CheckCircle2 } from "lucide-react";
+import {
+  HorizontalStepper, VerticalStepper, ProgressStepper,
+  DotStepper, SegmentedStepper, BreadcrumbStepper,
+  TimelineStepper, InteractiveStepper, type Step
+} from "@/components/ui/steppers";
+import { Card } from "@/components/ui/card";
+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 DEMO_STEPS: Step[] = [
+  { title: "Verification", description: "Identity and document check", icon: ShieldCheck },
+  { title: "Inventory", description: "Product stock allocation", icon: Box },
+  { title: "Shipping", description: "Logistics and dispatching", icon: Truck },
+  { title: "Delivery", description: "Final destination arrival", icon: CheckCircle2 },
+];
+
+const PLAYGROUND_STEPS: Step[] = [
+  { title: "Account" },
+  { title: "Profile" },
+  { title: "Payment" },
+  { title: "Confirm" },
+];
+
+type StyleKey = "horizontal" | "vertical" | "progress" | "dot" | "segmented";
+
+const STYLES: { value: StyleKey; label: string; component: React.ComponentType<{ steps: Step[]; currentStep: number; className?: string }>; importName: string }[] = [
+  { value: "horizontal", label: "Horizontal", component: HorizontalStepper, importName: "HorizontalStepper" },
+  { value: "vertical", label: "Vertical", component: VerticalStepper, importName: "VerticalStepper" },
+  { value: "progress", label: "Progress", component: ProgressStepper, importName: "ProgressStepper" },
+  { value: "dot", label: "Dot", component: DotStepper, importName: "DotStepper" },
+  { value: "segmented", label: "Segmented", component: SegmentedStepper, importName: "SegmentedStepper" },
+];
+
+function codeFor(importName: string, currentStep: number) {
+  const stepsSrc = PLAYGROUND_STEPS.map((s) => `  { title: "${s.title}" },`).join("\n");
+  return `import { ${importName} } from "@/components/ui/steppers";\n\nconst steps = [\n${stepsSrc}\n];\n\n<${importName} steps={steps} currentStep={${currentStep}} />`;
+}
+
+const API_ROWS = [
+  { prop: "steps", type: "Step[]", default: "—", description: "Ordered list of steps, each with a title, optional description, and icon." },
+  { prop: "currentStep", type: "number", default: "—", description: "Zero-based index of the active step." },
+  { prop: "onStepClick", type: "(step: number) => void", default: "—", description: "Called with the clicked index. Only wired up by InteractiveStepper." },
+  { prop: "className", type: "string", default: "—", description: "Extra classes applied to the stepper's root element." },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Wrap the stepper in a <nav> landmark for assistive technology.",
+  "aria-current=\"step\" is applied to the active indicator automatically.",
+  "Interactive steps have clearly defined focus-visible rings for keyboard users.",
+  "Provide text alternatives for any icons used within the steps.",
+  "Contrast ratios between background and text meet 4.5:1 standards in both themes.",
+];
+
+function useStepper(length: number, initial = 0) {
+  const [step, setStep] = useState(Math.min(initial, length - 1));
+  return {
+    step,
+    setStep,
+    next: () => setStep((s) => Math.min(length - 1, s + 1)),
+    prev: () => setStep((s) => Math.max(0, s - 1)),
+  };
+}
+
+function StepperControls({
+  step,
+  total,
+  onPrev,
+  onNext,
+}: {
+  step: number;
+  total: number;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <div className="mt-6 flex items-center justify-between border-t border-zinc-100 pt-4 dark:border-zinc-800">
+      <button
+        type="button"
+        onClick={onPrev}
+        disabled={step === 0}
+        className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 text-zinc-600 transition-colors hover:bg-zinc-50 disabled:opacity-30 disabled:hover:bg-transparent dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+        aria-label="Previous step"
+      >
+        <ChevronLeft size={16} />
+      </button>
+      <span className="text-[11px] font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+        Step {step + 1} of {total}
+      </span>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={step === total - 1}
+        className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 text-zinc-600 transition-colors hover:bg-zinc-50 disabled:opacity-30 disabled:hover:bg-transparent dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+        aria-label="Next step"
+      >
+        <ChevronRight size={16} />
+      </button>
+    </div>
+  );
+}
+
+export function StepperDocPage() {
+  const horizontal = useStepper(DEMO_STEPS.length, 1);
+  const vertical = useStepper(DEMO_STEPS.length, 2);
+  const progress = useStepper(DEMO_STEPS.length, 1);
+  const breadcrumbSegmented = useStepper(DEMO_STEPS.length, 2);
+  const icon = useStepper(DEMO_STEPS.length, 1);
+  const numberedDot = useStepper(DEMO_STEPS.length, 2);
+  const timeline = useStepper(3, 1);
+  const interactive = useStepper(DEMO_STEPS.length, 1);
+
+  const [style, setStyle] = useState<StyleKey>("horizontal");
+  const [currentStep, setCurrentStep] = useState(1);
+  const [copied, setCopied] = useState(false);
+
+  const active = STYLES.find((s) => s.value === style) ?? STYLES[0];
+  const ActiveStepper = active.component;
+  const snippet = codeFor(active.importName, currentStep);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={Layers}
+        title="Stepper"
+        description="A collection of 10 stepper variants with a minimalist black & white aesthetic, a success-green accent for completed steps, and smooth Framer Motion animations. Each demo below keeps its own state — driving one never affects another."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Switch between stepper styles and step through the flow — 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-[12rem] 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={`${style}-${currentStep}`}
+              className="relative w-full max-w-sm animate-[pagination-pop_0.2s_ease-out]"
+            >
+              <ActiveStepper steps={PLAYGROUND_STEPS} currentStep={currentStep} />
+            </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">
+                  Style
+                </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">
+                  {STYLES.map((s) => (
+                    <button
+                      key={s.value}
+                      type="button"
+                      onClick={() => setStyle(s.value)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
+                        style === s.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"
+                      )}
+                    >
+                      {s.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Current step
+                </p>
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setCurrentStep((s) => Math.max(0, s - 1))}
+                    disabled={currentStep === 0}
+                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 text-zinc-600 transition-colors hover:bg-zinc-50 disabled:opacity-30 disabled:hover:bg-transparent dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                    aria-label="Previous step"
+                  >
+                    <ChevronLeft size={16} />
+                  </button>
+                  <span className="w-20 text-center text-[11px] font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                    {currentStep + 1} of {PLAYGROUND_STEPS.length}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setCurrentStep((s) => Math.min(PLAYGROUND_STEPS.length - 1, s + 1))}
+                    disabled={currentStep === PLAYGROUND_STEPS.length - 1}
+                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 text-zinc-600 transition-colors hover:bg-zinc-50 disabled:opacity-30 disabled:hover:bg-transparent dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                    aria-label="Next step"
+                  >
+                    <ChevronRight size={16} />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
+              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
+                <code>{snippet}</code>
+              </pre>
+              <Tooltip content={copied ? "Copied!" : "Copy code"}>
+                <button
+                  type="button"
+                  onClick={copySnippet}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
+                >
+                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsSection title="Standard Flows" description="Common patterns for linear progression.">
+        <DocsSectionGrid>
+          <DocsSubsection title="Horizontal" description="A classic top-of-form progress rail.">
+            <Card className="flex h-full flex-col justify-between p-8">
+              <div className="flex flex-1 items-center justify-center">
+                <HorizontalStepper steps={DEMO_STEPS} currentStep={horizontal.step} />
+              </div>
+              <StepperControls step={horizontal.step} total={DEMO_STEPS.length} onPrev={horizontal.prev} onNext={horizontal.next} />
+            </Card>
+          </DocsSubsection>
+          <DocsSubsection title="Vertical" description="Best for detailed, multi-line steps.">
+            <Card className="flex h-full flex-col justify-between p-8">
+              <VerticalStepper steps={DEMO_STEPS} currentStep={vertical.step} />
+              <StepperControls step={vertical.step} total={DEMO_STEPS.length} onPrev={vertical.prev} onNext={vertical.next} />
+            </Card>
+          </DocsSubsection>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Metrics & Segments" description="Visualizing data-driven completion states.">
+        <DocsSectionGrid>
+          <DocsSubsection title="Progress" description="Turns green once the flow reaches 100%.">
+            <Card className="flex h-full flex-col justify-between p-8">
+              <div className="flex flex-1 items-center">
+                <ProgressStepper steps={DEMO_STEPS} currentStep={progress.step} />
+              </div>
+              <StepperControls step={progress.step} total={DEMO_STEPS.length} onPrev={progress.prev} onNext={progress.next} />
+            </Card>
+          </DocsSubsection>
+          <DocsSubsection title="Breadcrumb & Segmented" description="Compact bars for dashboards and toolbars.">
+            <Card className="flex h-full flex-col justify-between p-8">
+              <div className="flex flex-1 flex-col justify-center gap-8">
+                <BreadcrumbStepper steps={DEMO_STEPS} currentStep={breadcrumbSegmented.step} />
+                <SegmentedStepper steps={DEMO_STEPS} currentStep={breadcrumbSegmented.step} />
+              </div>
+              <StepperControls step={breadcrumbSegmented.step} total={DEMO_STEPS.length} onPrev={breadcrumbSegmented.prev} onNext={breadcrumbSegmented.next} />
+            </Card>
+          </DocsSubsection>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Deep Navigation" description="Extended history and interactive control styles.">
+        <DocsSectionGrid>
+          <DocsSubsection title="Timeline" description="An activity-log style history view.">
+            <Card className="flex h-full flex-col justify-between p-8">
+              <TimelineStepper steps={DEMO_STEPS.slice(0, 3)} currentStep={timeline.step} />
+              <StepperControls step={timeline.step} total={3} onPrev={timeline.prev} onNext={timeline.next} />
+            </Card>
+          </DocsSubsection>
+          <DocsSubsection title="Interactive" description="Click any card to jump directly to that step.">
+            <Card className="flex h-full items-center justify-center border-dashed border-2 bg-zinc-50/50 p-8 dark:bg-zinc-900/30">
+              <InteractiveStepper steps={DEMO_STEPS} currentStep={interactive.step} onStepClick={interactive.setStep} />
+            </Card>
+          </DocsSubsection>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference" rows={API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}