ruler-components 0.1.1 → 0.1.2

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

@@ -1,387 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Check, Copy, GaugeCircle, HardDrive, Sparkles, Upload } from "lucide-react";
-import { Progress, type ProgressProps } from "@/components/ui/progress";
-import { Tooltip } from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "value", type: "number", default: "0", description: "Current progress value" },
-  { prop: "max", type: "number", default: "100", description: "Maximum progress value" },
-  { prop: "variant", type: '"default" | "success" | "warning" | "error"', default: '"default"', description: "Visual variant of the indicator" },
-  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "Height of the progress track" },
-  { prop: "label", type: "string", default: "—", description: "Optional label above the bar" },
-  { prop: "showValue", type: "boolean", default: "false", description: "Shows percentage next to the label" },
-  { prop: "indeterminate", type: "boolean", default: "false", description: "Animated loading state" },
-  { prop: "disabled", type: "boolean", default: "false", description: "Reduces opacity and marks as inactive" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Uses role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax.",
-  "Provide a label when context isn't clear from surrounding content.",
-  "Use indeterminate mode only when completion is unknown.",
-  "Pair color with labels or percentage text.",
-];
-
-type Variant = NonNullable<ProgressProps["variant"]>;
-type Size = NonNullable<ProgressProps["size"]>;
-
-const VARIANTS: { value: Variant; label: string; swatch: string }[] = [
-  { value: "default", label: "Default", swatch: "bg-zinc-900 dark:bg-zinc-100" },
-  { value: "success", label: "Success", swatch: "bg-[#28A745]" },
-  { value: "warning", label: "Warning", swatch: "bg-[#E58E00]" },
-  { value: "error", label: "Error", swatch: "bg-[#D93025]" },
-];
-
-const SIZES: Size[] = ["sm", "md", "lg"];
-
-function codeFor(variant: Variant, size: Size, value: number, showValue: boolean, indeterminate: boolean) {
-  const props = [
-    variant !== "default" && `variant="${variant}"`,
-    size !== "md" && `size="${size}"`,
-    !indeterminate && `value={${value}}`,
-    indeterminate && "indeterminate",
-    showValue && !indeterminate && "showValue",
-    `label="${indeterminate ? "Syncing data..." : "Uploading"}"`,
-  ]
-    .filter(Boolean)
-    .join("\n  ");
-  return `<Progress\n  ${props}\n/>`;
-}
-
-export function ProgressDocPage() {
-  const [uploadProgress, setUploadProgress] = React.useState(42);
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setUploadProgress((prev) => (prev >= 100 ? 42 : prev + 6));
-    }, 500);
-    return () => clearInterval(interval);
-  }, []);
-
-  const [variant, setVariant] = useState<Variant>("default");
-  const [size, setSize] = useState<Size>("md");
-  const [value, setValue] = useState(65);
-  const [showValue, setShowValue] = useState(true);
-  const [indeterminate, setIndeterminate] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(variant, size, value, showValue, indeterminate);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={GaugeCircle}
-        title="Progress"
-        description="Displays completion status for tasks, uploads, and loading states."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a progress bar 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-8 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 className="relative w-full max-w-sm" key={`${variant}-${size}-${indeterminate}`}>
-              <Progress
-                variant={variant}
-                size={size}
-                value={value}
-                showValue={showValue}
-                indeterminate={indeterminate}
-                label={indeterminate ? "Syncing data..." : "Uploading"}
-                className="animate-[pagination-pop_0.25s_ease-out]"
-              />
-            </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">
-                  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">
-                  Value
-                </p>
-                <input
-                  type="range"
-                  min={0}
-                  max={100}
-                  value={value}
-                  disabled={indeterminate}
-                  onChange={(e) => setValue(Number(e.target.value))}
-                  className="h-[2.125rem] w-32 accent-zinc-900 disabled:opacity-40 dark:accent-zinc-100"
-                />
-              </div>
-
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={() => setShowValue((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    showValue
-                      ? "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"
-                  )}
-                >
-                  {showValue ? "Value on" : "Value off"}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setIndeterminate((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    indeterminate
-                      ? "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"
-                  )}
-                >
-                  {indeterminate ? "Indeterminate" : "Determinate"}
-                </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>
-        <DocsSectionGrid>
-          <DocsSubsection
-            title="Default"
-            description="Clean track with smooth fill animation and inline percentage."
-          >
-            <Card className="h-full">
-              <CardHeader>
-                <div className="flex items-center justify-between gap-3">
-                  <div>
-                    <CardTitle>Profile completion</CardTitle>
-                    <CardDescription>Finish setting up your account</CardDescription>
-                  </div>
-                  <Badge variant="info">In progress</Badge>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <Progress value={68} label="Overall progress" showValue />
-              </CardContent>
-            </Card>
-          </DocsSubsection>
-
-          <DocsSubsection
-            title="Basic Usage"
-            description="Common states you'll reach for out of the box."
-          >
-            <div className="grid gap-5">
-              <Progress value={65} />
-              <Progress value={80} variant="success" showValue />
-              <Progress value={45} label="Uploading..." showValue />
-              <Progress indeterminate label="Syncing data..." />
-            </div>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection>
-        <DocsSectionGrid>
-          <DocsSubsection
-            title="Variants"
-            description="Color-coded states for different statuses."
-          >
-            <div className="grid gap-4">
-              <Progress value={60} variant="default" label="Default" showValue />
-              <Progress value={85} variant="success" label="Completed" showValue />
-              <Progress value={55} variant="warning" label="Storage almost full" showValue />
-              <Progress value={22} variant="error" label="Upload failed" showValue />
-            </div>
-          </DocsSubsection>
-
-          <DocsSubsection
-            title="Onboarding Checklist"
-            description="A real-world composition of labeled, color-coded steps."
-          >
-            <Card className="h-full">
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#28A745]/10 text-[#28A745] dark:bg-[#28A745]/20 dark:text-[#5CC975]">
-                    <Sparkles className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <CardTitle>Onboarding</CardTitle>
-                    <CardDescription>Complete setup to unlock features</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <Progress value={100} variant="success" label="Create account" showValue />
-                <Progress value={100} variant="success" label="Verify email" showValue />
-                <Progress value={40} variant="default" label="Set up workspace" showValue />
-                <Progress value={0} variant="default" label="Invite team" showValue />
-              </CardContent>
-            </Card>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection>
-        <DocsSectionGrid>
-          <DocsSubsection title="Sizes">
-            <div className="grid gap-4">
-              <Progress value={70} size="sm" label="Small" showValue />
-              <Progress value={70} size="md" label="Medium" showValue />
-              <Progress value={70} size="lg" label="Large" showValue />
-            </div>
-          </DocsSubsection>
-          <DocsSubsection title="Disabled">
-            <Card className="flex h-full flex-col justify-center">
-              <CardContent className="pt-6">
-                <Progress value={50} label="Paused upload" showValue disabled />
-              </CardContent>
-            </Card>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection>
-        <DocsSectionGrid>
-          <Card>
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
-                  <Upload className="h-5 w-5 text-zinc-600 dark:text-zinc-300" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <CardTitle>File Upload</CardTitle>
-                  <CardDescription className="truncate">design-system-v2.fig · 24.8 MB</CardDescription>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <Progress value={uploadProgress} variant="default" label="Uploading" showValue />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <div className="flex items-start justify-between gap-3">
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#E58E00]/10 text-[#E58E00] dark:bg-[#E58E00]/20 dark:text-[#F5B84A]">
-                    <HardDrive className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <CardTitle>Cloud Storage</CardTitle>
-                    <CardDescription>7.2 GB of 10 GB used</CardDescription>
-                  </div>
-                </div>
-                <Badge variant="warning">72%</Badge>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <Progress value={72} variant="warning" size="lg" />
-            </CardContent>
-          </Card>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference" rows={API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}

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

@@ -1,270 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { Check, CircleDot, Copy } from "lucide-react";
-import { Radio, RadioGroup } from "@/components/ui/radio";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "value", type: "string", default: "—", description: "The value of the radio option" },
-  { prop: "label", type: "string", default: "—", description: "Label text displayed beside the radio" },
-  { prop: "description", type: "string", default: "—", description: "Helper text below the label" },
-  { prop: "variant", type: '"inline" | "card"', default: '"inline"', description: "Layout style — card auto-applies when description is set" },
-  { prop: "disabled", type: "boolean", default: "false", description: "Disables the radio option" },
-  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "The size of the radio button" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const GROUP_API_ROWS = [
-  { prop: "name", type: "string", default: "—", description: "Name attribute shared by all radios in the group" },
-  { prop: "value", type: "string", default: "—", description: "Controlled selected value" },
-  { prop: "defaultValue", type: "string", default: "—", description: "Uncontrolled initial selected value" },
-  { prop: "onValueChange", type: "(value: string) => void", default: "—", description: "Callback when selection changes" },
-  { prop: "variant", type: '"inline" | "card"', default: '"inline"', description: "Layout style for all options in the group" },
-  { prop: "appearance", type: '"default" | "segmented"', default: '"default"', description: "Visual style — segmented for pill-style toggles" },
-  { prop: "orientation", type: '"vertical" | "horizontal"', default: '"vertical"', description: "Layout direction of the group" },
-  { prop: "disabled", type: "boolean", default: "false", description: "Disables all radios in the group" },
-  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "Size applied to all radios in the group" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Group related radio buttons with a shared name attribute.",
-  "Only one option can be selected at a time within a group.",
-  "Provide a visible label for each radio option.",
-  "Use arrow keys to navigate between options in a group.",
-  "Ensure focus states are clearly visible.",
-];
-
-type Size = "sm" | "md" | "lg";
-type Variant = "inline" | "card";
-
-const SIZES: Size[] = ["sm", "md", "lg"];
-
-const VARIANTS: { value: Variant; label: string }[] = [
-  { value: "inline", label: "Inline" },
-  { value: "card", label: "Card" },
-];
-
-function codeFor(variant: Variant, size: Size, disabled: boolean) {
-  const groupProps = [size !== "md" && `size="${size}"`, variant !== "inline" && `variant="${variant}"`]
-    .filter(Boolean)
-    .join(" ");
-  const open = groupProps ? `<RadioGroup name="demo" ${groupProps} defaultValue="option-1">` : `<RadioGroup name="demo" defaultValue="option-1">`;
-  const disabledAttr = disabled ? " disabled" : "";
-  const descriptionLine = variant === "card" ? '\n    description="A helper line of detail."' : "";
-  return `${open}\n  <Radio\n    value="option-1"\n    label="Option 1"${descriptionLine}${disabledAttr}\n  />\n  <Radio value="option-2" label="Option 2" />\n</RadioGroup>`;
-}
-
-export function RadioDocPage() {
-  const [plan, setPlan] = React.useState("pro");
-
-  const [variant, setVariant] = useState<Variant>("inline");
-  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);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={CircleDot}
-        title="Radio"
-        description="Allows users to select a single option from a mutually exclusive set of choices."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a radio group 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-8 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 className="relative w-full max-w-xs" key={`${variant}-${size}-${disabled}`}>
-              <RadioGroup
-                name="playground-demo"
-                variant={variant}
-                size={size}
-                disabled={disabled}
-                defaultValue="option-1"
-                className="animate-[pagination-pop_0.25s_ease-out]"
-              >
-                <Radio
-                  value="option-1"
-                  label="Option 1"
-                  description={variant === "card" ? "A helper line of detail." : undefined}
-                  className="items-center"
-                />
-                <Radio value="option-2" label="Option 2" className="items-center" />
-              </RadioGroup>
-            </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">
-                  State
-                </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"
-                  )}
-                >
-                  <CircleDot className="h-3.5 w-3.5" />
-                  {disabled ? "Disabled" : "Enabled"}
-                </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>
-        <DocsSectionGrid>
-          <DocsSubsection title="Sizes">
-            <RadioGroup name="size-demo" defaultValue="md">
-              <Radio value="sm" label="Small" size="sm" />
-              <Radio value="md" label="Medium" size="md" />
-              <Radio value="lg" label="Large" size="lg" />
-            </RadioGroup>
-          </DocsSubsection>
-          <DocsSubsection title="Disabled">
-            <RadioGroup name="disabled-demo" defaultValue="enabled">
-              <Radio value="enabled" label="Enabled option" />
-              <Radio value="disabled" label="Disabled option" disabled />
-              <Radio value="another" label="Another option" />
-            </RadioGroup>
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection
-        title="Plan Selection"
-        description="Card-style radios are ideal for pricing tiers and feature comparisons."
-      >
-        <div className="flex max-w-md flex-col gap-2.5">
-          <RadioGroup name="plan-demo" variant="card" value={plan} onValueChange={setPlan}>
-            <Radio value="free" label="Free" description="Basic features for personal use." />
-            <Radio value="pro" label="Pro" description="Advanced features for professionals." />
-            <Radio value="enterprise" label="Enterprise" description="Custom solutions for large teams." />
-          </RadioGroup>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="Segmented Control"
-        description="Compact pill-style selector for switching between a few related options."
-      >
-        <RadioGroup
-          name="layout-demo"
-          defaultValue="daily"
-          orientation="horizontal"
-          appearance="segmented"
-        >
-          <Radio value="daily" label="Daily" />
-          <Radio value="weekly" label="Weekly" />
-          <Radio value="monthly" label="Monthly" />
-        </RadioGroup>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference — Radio" rows={API_ROWS} />
-        <DocsApiTable title="API Reference — RadioGroup" rows={GROUP_API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}