ruler-components 0.1.0 → 0.1.2

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

@@ -1,230 +0,0 @@
-"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

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