ruler-components 0.1.1 → 0.1.3

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

@@ -1,430 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import { motion } from "framer-motion";
-import { Check, Copy, Palette } from "lucide-react";
-import { DocsPage, DocsPageHeader, DocsSection } from "@/components/docs/docs-page";
-import { Tooltip } from "@/components/ui/tooltip";
-import { COLOR_PALETTE } from "@/data/color-palette";
-import {
-  contrastLabel,
-  formatColor,
-  getContrastRatio,
-  readableTextColor,
-  type ColorFormat,
-} from "@/lib/color";
-import { cn } from "@/lib/cn";
-
-const FORMATS: { label: string; value: ColorFormat }[] = [
-  { label: "HEX", value: "hex" },
-  { label: "RGB", value: "rgb" },
-  { label: "HSL", value: "hsl" },
-  { label: "CSS", value: "css" },
-];
-
-export function ColorsDocPage() {
-  const [selected, setSelected] = useState(
-    COLOR_PALETTE.find((h) => h.name === "Blue")?.name ?? COLOR_PALETTE[0].name
-  );
-  const [activeStep, setActiveStep] = useState(500);
-  const [format, setFormat] = useState<ColorFormat>("hex");
-  const [copied, setCopied] = useState<string | null>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
-  const activeHue = COLOR_PALETTE.find((h) => h.name === selected) ?? COLOR_PALETTE[0];
-  const activeShade =
-    activeHue.shades.find((s) => s.step === activeStep) ?? activeHue.shades[5];
-
-  const activeValue = formatColor(activeShade.hex, format);
-  const textColor = readableTextColor(activeShade.hex);
-  const isDarkOverlay = textColor === "#000000";
-  const overlaySoft = isDarkOverlay ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.16)";
-  const overlayStrong = isDarkOverlay ? "rgba(0,0,0,0.14)" : "rgba(255,255,255,0.28)";
-
-  function copy(value: string) {
-    navigator.clipboard.writeText(value).catch(() => {});
-    setCopied(value);
-    setTimeout(() => setCopied((prev) => (prev === value ? null : prev)), 1200);
-  }
-
-  function pickHue(name: string) {
-    setSelected(name);
-    setActiveStep(500);
-  }
-
-  return (
-    <DocsPage wide className="relative z-10 min-w-0">
-      {mounted &&
-        createPortal(
-          <div
-            aria-hidden
-            className="pointer-events-none fixed left-0 right-0 top-0 z-0 h-80 max-w-full lg:left-64"
-            style={{
-              background: `radial-gradient(ellipse 70% 90% at 80% 0%, ${activeShade.hex}42, transparent 70%)`,
-            }}
-          />,
-          document.getElementById("docs-shell") ?? document.body
-        )}
-
-      <DocsPageHeader
-        icon={Palette}
-        title="Colors"
-        description="The full color palette available across ruler.ui — every hue and shade used throughout components, ready to copy in HEX, RGB, HSL, or CSS."
-      />
-
-      <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-zinc-500 dark:text-zinc-400">
-        <span>
-          <strong className="font-semibold text-zinc-900 dark:text-white">
-            {COLOR_PALETTE.length}
-          </strong>{" "}
-          hues
-        </span>
-        <span className="h-1 w-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-        <span>
-          <strong className="font-semibold text-zinc-900 dark:text-white">
-            {COLOR_PALETTE.length * 11}
-          </strong>{" "}
-          shades
-        </span>
-        <span className="h-1 w-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
-        <span>WCAG contrast built in</span>
-      </div>
-
-      <DocsSection first title="Explore" description="Every hue as a full-tone paint strip. Click one to spotlight it below.">
-            <div className="-mx-1 flex min-w-0 gap-3 overflow-x-auto px-1 py-2 [-ms-overflow-style:none] [scrollbar-width:none] sm:gap-5 [&::-webkit-scrollbar]:hidden">
-              {COLOR_PALETTE.map((hue) => {
-                const isSelected = hue.name === selected;
-                const gradient = `linear-gradient(to bottom, ${hue.shades.map((s) => s.hex).join(", ")})`;
-                return (
-                  <button
-                    key={hue.name}
-                    type="button"
-                    onClick={() => pickHue(hue.name)}
-                    style={{ backgroundImage: gradient }}
-                    className={cn(
-                      "relative h-52 w-32 shrink-0 origin-bottom cursor-pointer overflow-hidden rounded-2xl shadow-[0_6px_16px_-10px_rgba(0,0,0,0.2)] ring-2 ring-offset-2 ring-offset-white transition-[transform,box-shadow] duration-300 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.03] focus:outline-none focus-visible:ring-zinc-900 dark:ring-offset-zinc-950 dark:focus-visible:ring-white",
-                      isSelected ? "scale-[1.02] ring-zinc-900 dark:ring-white" : "scale-100 ring-transparent"
-                    )}
-                  >
-                    <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-black/30 px-3 py-2.5 backdrop-blur-md">
-                      <span className="text-sm font-semibold text-white">{hue.name}</span>
-                      {isSelected && (
-                        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-white text-zinc-900">
-                          <Check className="h-2.5 w-2.5" strokeWidth={3} />
-                        </span>
-                      )}
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </DocsSection>
-
-      <motion.div
-        key={activeHue.name}
-        initial={{ opacity: 0, y: 6 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.2, ease: "easeOut" }}
-      >
-        <DocsSection
-          title={`${activeHue.name} ${activeShade.step}`}
-          description="The selected shade, spotlighted — drag through the ramp to compare weights."
-        >
-          <div
-            className="relative flex min-h-[18rem] flex-col justify-between overflow-hidden rounded-[1.5rem] p-5 shadow-[0_24px_60px_-18px_rgba(0,0,0,0.3)] transition-colors duration-500 sm:min-h-[22rem] sm:rounded-[2rem] sm:p-10"
-            style={{ backgroundColor: activeShade.hex }}
-          >
-            <span
-              aria-hidden
-              className="pointer-events-none absolute -right-4 -top-8 select-none font-mono text-[8.5rem] font-bold leading-none sm:text-[10.5rem]"
-              style={{ color: textColor, opacity: 0.09 }}
-            >
-              {activeShade.hex.replace("#", "").toUpperCase()}
-            </span>
-
-            <div className="relative flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between" style={{ color: textColor }}>
-              <div className="min-w-0">
-                <p className="text-xs font-semibold uppercase tracking-[0.2em] opacity-60">
-                  Palette / {activeHue.name}
-                </p>
-                <h3 className="mt-2 text-3xl font-bold tracking-tight sm:mt-3 sm:text-6xl">
-                  {activeHue.name} {activeShade.step}
-                </h3>
-              </div>
-              <div
-                className="flex w-fit max-w-full shrink-0 items-center gap-0.5 self-start rounded-full p-1 backdrop-blur-md sm:gap-1"
-                style={{ backgroundColor: overlaySoft }}
-              >
-                {FORMATS.map((f) => (
-                  <button
-                    key={f.value}
-                    type="button"
-                    onClick={() => setFormat(f.value)}
-                    className="relative rounded-full px-3 py-1.5 text-xs font-medium transition-colors"
-                    style={{ color: textColor }}
-                  >
-                    {format === f.value && (
-                      <motion.span
-                        layoutId="hero-format-pill"
-                        className="absolute inset-0 rounded-full backdrop-blur-md"
-                        style={{ backgroundColor: overlayStrong }}
-                        transition={{ type: "spring", stiffness: 500, damping: 35 }}
-                      />
-                    )}
-                    <span className="relative">{f.label}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="relative mt-8">
-              <div className="flex items-end justify-between gap-6" style={{ color: textColor }}>
-                <div>
-                  <p className="break-all font-mono text-xl font-semibold sm:text-3xl">{activeValue}</p>
-                  <p className="mt-1 text-xs font-medium opacity-70">
-                    {contrastLabel(getContrastRatio(activeShade.hex, "#ffffff"))} on white ·{" "}
-                    {contrastLabel(getContrastRatio(activeShade.hex, "#000000"))} on black
-                  </p>
-                </div>
-                <Tooltip content={copied === activeValue ? "Copied!" : "Copy value"}>
-                  <button
-                    type="button"
-                    onClick={() => copy(activeValue)}
-                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full backdrop-blur-md transition-transform hover:scale-105"
-                    style={{ backgroundColor: overlaySoft, color: textColor }}
-                  >
-                    {copied === activeValue ? (
-                      <Check className="h-4 w-4" />
-                    ) : (
-                      <Copy className="h-4 w-4" />
-                    )}
-                  </button>
-                </Tooltip>
-              </div>
-
-              <div className="mt-6 flex h-10 gap-1">
-                {activeHue.shades.map((shade) => {
-                  const isActiveShade = shade.step === activeStep;
-                  return (
-                    <div key={shade.step} className="relative h-full flex-1">
-                      <Tooltip
-                        content={
-                          <span className="flex items-center gap-1.5">
-                            <span className="font-semibold">{shade.step}</span>
-                            <span className="opacity-60">{shade.hex.toUpperCase()}</span>
-                          </span>
-                        }
-                      >
-                        <button
-                          type="button"
-                          onClick={() => setActiveStep(shade.step)}
-                          className={cn(
-                            "absolute inset-0 rounded-md transition-all duration-150 hover:-translate-y-1 focus:outline-none",
-                            isActiveShade && "-translate-y-1.5"
-                          )}
-                          style={{
-                            backgroundColor: shade.hex,
-                            boxShadow: isActiveShade
-                              ? `0 8px 18px -6px ${shade.hex}, 0 0 0 2px ${overlayStrong}`
-                              : undefined,
-                          }}
-                        />
-                      </Tooltip>
-                      {isActiveShade && (
-                        <motion.span
-                          layoutId="ramp-active-dot"
-                          className="absolute -bottom-3 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full"
-                          style={{ backgroundColor: textColor }}
-                        />
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </DocsSection>
-
-        <DocsSection
-          title="Readable on any surface"
-          description="How this shade reads as text, side by side against pure white and pure black."
-        >
-          <div className="grid gap-4 sm:grid-cols-2">
-            <ContrastPreviewCard hex={activeShade.hex} surface="light" />
-            <ContrastPreviewCard hex={activeShade.hex} surface="dark" />
-          </div>
-        </DocsSection>
-
-        <DocsSection
-          title={`Every shade in ${activeHue.name}`}
-          description="Formatted, ready to copy, in whichever format you're working with."
-        >
-          <div className="overflow-x-auto 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="min-w-[32rem]">
-            <div className="flex items-center gap-4 border-b border-zinc-200 bg-zinc-50/70 px-4 py-2.5 text-xs font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-400">
-              <span className="w-9" />
-              <span className="flex-1">Name</span>
-              <span className="w-36 shrink-0 sm:w-52">Value</span>
-              <span className="w-20 text-right sm:w-24">Contrast</span>
-            </div>
-            <div className="divide-y divide-zinc-200 dark:divide-zinc-800">
-              {activeHue.shades.map((shade) => {
-                const value = formatColor(shade.hex, format);
-                const isCopied = copied === value;
-                const isRowActive = shade.step === activeStep;
-                return (
-                  <div
-                    key={shade.step}
-                    onClick={() => setActiveStep(shade.step)}
-                    className={cn(
-                      "group relative flex cursor-pointer items-center gap-4 pl-4 pr-4 py-3 transition-colors",
-                      isRowActive ? "bg-zinc-50 dark:bg-zinc-900/60" : "hover:bg-zinc-50/70 dark:hover:bg-zinc-900/40"
-                    )}
-                  >
-                    <span
-                      aria-hidden
-                      className={cn(
-                        "absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-full transition-opacity duration-200",
-                        isRowActive ? "opacity-100" : "opacity-0"
-                      )}
-                      style={{ backgroundColor: shade.hex }}
-                    />
-                    <span
-                      className="h-9 w-9 shrink-0 rounded-xl border border-black/5 shadow-sm transition-transform duration-200 group-hover:scale-105 dark:border-white/10"
-                      style={{ backgroundColor: shade.hex }}
-                    />
-                    <span className="flex-1 text-sm font-medium text-zinc-900 dark:text-white">
-                      {activeHue.name}{" "}
-                      <span className="text-zinc-400 dark:text-zinc-500">{shade.step}</span>
-                    </span>
-                    <div className="w-36 shrink-0 sm:w-52">
-                      <Tooltip content={isCopied ? "Copied!" : "Copy to clipboard"}>
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            copy(value);
-                          }}
-                          className="group/copy flex w-full items-center gap-2 whitespace-nowrap rounded-md font-mono text-xs text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-                        >
-                          <span className="min-w-0 flex-1 truncate text-left">{value}</span>
-                          {isCopied ? (
-                            <Check className="h-3 w-3 shrink-0 text-green-500" />
-                          ) : (
-                            <Copy className="h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover/copy:opacity-100" />
-                          )}
-                        </button>
-                      </Tooltip>
-                    </div>
-                    <div
-                      className="flex w-20 items-center justify-end gap-1.5 sm:w-24"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <ContrastBadge hex={shade.hex} against="#ffffff" />
-                      <ContrastBadge hex={shade.hex} against="#000000" />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-            </div>
-          </div>
-        </DocsSection>
-      </motion.div>
-    </DocsPage>
-  );
-}
-
-function ContrastPreviewCard({ hex, surface }: { hex: string; surface: "light" | "dark" }) {
-  const isLight = surface === "light";
-  const bg = isLight ? "#ffffff" : "#09090b";
-  const ratio = getContrastRatio(hex, bg);
-  const label = contrastLabel(ratio);
-  const pct = Math.min(100, (ratio / 21) * 100);
-
-  const labelColor = isLight
-    ? label === "Fail"
-      ? "text-red-600"
-      : label === "AA"
-        ? "text-yellow-600"
-        : "text-green-600"
-    : label === "Fail"
-      ? "text-red-400"
-      : label === "AA"
-        ? "text-yellow-400"
-        : "text-green-400";
-
-  return (
-    <div
-      className={cn(
-        "rounded-2xl border p-6",
-        isLight ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-950"
-      )}
-    >
-      <p
-        className={cn(
-          "text-xs font-medium uppercase tracking-wide",
-          isLight ? "text-zinc-400" : "text-zinc-500"
-        )}
-      >
-        On {isLight ? "light" : "dark"} surface
-      </p>
-      <p className="mt-3 font-mono text-3xl font-bold" style={{ color: hex }}>
-        Aa Bb Cc
-      </p>
-      <p className="mt-1 text-lg font-semibold" style={{ color: hex }}>
-        The quick brown fox jumps.
-      </p>
-
-      <div className="mt-5">
-        <div
-          className={cn(
-            "relative h-1.5 w-full overflow-hidden rounded-full",
-            isLight ? "bg-zinc-100" : "bg-zinc-800"
-          )}
-        >
-          <div
-            className={cn(
-              "h-full rounded-full transition-all duration-300",
-              label === "Fail" ? "bg-red-500" : label === "AA" ? "bg-yellow-500" : "bg-green-500"
-            )}
-            style={{ width: `${pct}%` }}
-          />
-        </div>
-        <div
-          className={cn(
-            "mt-1.5 flex items-center justify-between text-xs",
-            isLight ? "text-zinc-500" : "text-zinc-400"
-          )}
-        >
-          <span className="font-mono">{ratio.toFixed(2)}:1</span>
-          <span className={cn("font-semibold", labelColor)}>{label}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ContrastBadge({ hex, against }: { hex: string; against: "#ffffff" | "#000000" }) {
-  const ratio = getContrastRatio(hex, against);
-  const label = contrastLabel(ratio);
-  const passes = label !== "Fail";
-  const surface = against === "#ffffff" ? "white" : "black";
-
-  return (
-    <Tooltip content={`${ratio.toFixed(2)}:1 · ${label} on ${surface}`}>
-      <span
-        className={cn(
-          "flex h-6 w-9 items-center justify-center rounded-md text-[11px] font-semibold ring-1 ring-inset",
-          passes ? "ring-green-500/30" : "ring-red-500/30"
-        )}
-        style={{ backgroundColor: against, color: hex }}
-      >
-        Aa
-      </span>
-    </Tooltip>
-  );
-}