ruler-components 0.1.1 → 0.1.2

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

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