ruler-components 0.1.0

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

@@ -0,0 +1,264 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check, Copy, ToggleLeft } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+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";
+
+type Size = "sm" | "md" | "lg";
+
+const SIZES: Size[] = ["sm", "md", "lg"];
+
+function codeFor(size: Size, disabled: boolean, withDescription: boolean, checked: boolean) {
+  const props = [
+    size !== "md" && `size="${size}"`,
+    checked && "defaultChecked",
+    disabled && "disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const descriptionLine = withDescription
+    ? '\n  description="Receive alerts on your device."'
+    : "";
+  const labelLine = `\n  label="Enable notifications"`;
+  return `<Switch${labelLine}${descriptionLine}${props ? `\n  ${props}` : ""}\n/>`;
+}
+
+const API_ROWS = [
+  { prop: "checked", type: "boolean", default: "—", description: "Controlled checked state" },
+  { prop: "defaultChecked", type: "boolean", default: "false", description: "Initial checked state (uncontrolled)" },
+  { prop: "onCheckedChange", type: "(checked: boolean) => void", default: "—", description: "Called when the switch is toggled" },
+  { prop: "disabled", type: "boolean", default: "false", description: "Disables interaction" },
+  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "Size of the switch track and thumb" },
+  { prop: "label", type: "string", default: "—", description: "Label text beside the switch" },
+  { prop: "description", type: "string", default: "—", description: "Supporting text below the label" },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Uses role=\"switch\" with aria-checked for screen readers.",
+  "Supports keyboard interaction with Space to toggle.",
+  "Provides a visible focus ring for keyboard users.",
+  "Pair with a label for all settings controls.",
+  "Use disabled state when a setting cannot be changed.",
+];
+
+export function SwitchDocPage() {
+  const [notifications, setNotifications] = React.useState(true);
+  const [marketing, setMarketing] = React.useState(false);
+
+  const [size, setSize] = useState<Size>("md");
+  const [disabled, setDisabled] = useState(false);
+  const [withDescription, setWithDescription] = useState(false);
+  const [checked, setChecked] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const snippet = codeFor(size, disabled, withDescription, checked);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={ToggleLeft}
+        title="Switch"
+        description="A toggle control for binary on/off settings — ideal for preferences and feature flags."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Build a switch 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 animate-[pagination-pop_0.25s_ease-out]"
+              key={`${size}-${disabled}-${withDescription}-${checked}`}
+            >
+              <Switch
+                size={size}
+                disabled={disabled}
+                checked={checked}
+                onCheckedChange={setChecked}
+                label="Enable notifications"
+                description={withDescription ? "Receive alerts on your device." : undefined}
+              />
+            </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">
+                  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">
+                  Description
+                </p>
+                <button
+                  type="button"
+                  onClick={() => setWithDescription((v) => !v)}
+                  className={cn(
+                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
+                    withDescription
+                      ? "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"
+                  )}
+                >
+                  <ToggleLeft className="h-3.5 w-3.5" />
+                  {withDescription ? "Shown" : "Hidden"}
+                </button>
+              </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"
+                  )}
+                >
+                  <ToggleLeft 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
+        title="Basic Usage"
+        contentClassName="flex flex-wrap items-center gap-8"
+      >
+        <Switch />
+        <Switch defaultChecked />
+      </DocsSection>
+
+      <DocsSection title="With Label">
+        <div className="max-w-sm">
+          <Switch label="Notifications" defaultChecked />
+        </div>
+      </DocsSection>
+
+      <DocsSection title="With Description">
+        <div className="max-w-md">
+          <Switch
+            label="Dark mode"
+            description="Use the dark appearance throughout the application."
+          />
+        </div>
+      </DocsSection>
+
+      <DocsSection>
+        <DocsSectionGrid>
+          <DocsSubsection title="Sizes">
+            <div className="flex flex-col gap-4">
+              <Switch size="sm" label="Small" defaultChecked />
+              <Switch size="md" label="Medium" defaultChecked />
+              <Switch size="lg" label="Large" defaultChecked />
+            </div>
+          </DocsSubsection>
+          <DocsSubsection title="Disabled">
+            <div className="flex flex-col gap-4">
+              <Switch label="Disabled off" disabled />
+              <Switch label="Disabled on" defaultChecked disabled />
+            </div>
+          </DocsSubsection>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection
+        title="Notification Settings"
+        description="Interactive example with controlled state."
+      >
+        <div className="max-w-md rounded-xl border border-zinc-200 p-5 dark:border-zinc-800">
+          <div className="flex flex-col gap-5">
+            <Switch
+              label="Push notifications"
+              description="Receive alerts on your device."
+              checked={notifications}
+              onCheckedChange={setNotifications}
+            />
+            <Switch
+              label="Marketing emails"
+              description="Get product updates and announcements."
+              checked={marketing}
+              onCheckedChange={setMarketing}
+            />
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference" rows={API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}