ruler-components 0.1.0

package/components/docs/docs-page.tsx

@@ -0,0 +1,263 @@
+import * as React from "react";
+import { CheckCircle2, type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+export function DocsPage({
+  children,
+  className,
+  wide,
+}: React.HTMLAttributes<HTMLElement> & { wide?: boolean }) {
+  return (
+    <article
+      className={cn(
+        "mx-auto w-full min-w-0 pb-20",
+        wide ? "max-w-5xl xl:max-w-[1600px] 2xl:max-w-[2200px]" : "max-w-5xl",
+        className
+      )}
+    >
+      {children}
+    </article>
+  );
+}
+
+export function DocsPageHeader({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}) {
+  return (
+    <header>
+      <div className="flex items-center gap-4">
+        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-zinc-200 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/[0.06] dark:text-zinc-100">
+          <Icon className="h-6 w-6" />
+        </span>
+        <h1 className="min-w-0 text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl dark:text-white">{title}</h1>
+      </div>
+      <p className="mt-4 max-w-2xl text-base leading-relaxed text-zinc-500 dark:text-zinc-400">
+        {description}
+      </p>
+    </header>
+  );
+}
+
+export function DocsSection({
+  title,
+  description,
+  first,
+  children,
+  className,
+  contentClassName,
+}: {
+  title?: string;
+  description?: string;
+  first?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}) {
+  const hasHeader = title || description;
+
+  return (
+    <section className={cn(first ? "mt-10" : "mt-16", className)}>
+      {title && (
+        <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-white">
+          {title}
+        </h2>
+      )}
+      {description && (
+        <p className="mt-1 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
+          {description}
+        </p>
+      )}
+      <div className={cn(hasHeader && "mt-6", contentClassName)}>{children}</div>
+    </section>
+  );
+}
+
+export function DocsSubsection({
+  title,
+  description,
+  children,
+  className,
+}: {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const hasHeader = title || description;
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {title && (
+        <h3 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-white">
+          {title}
+        </h3>
+      )}
+      {description && (
+        <p className="mt-1 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
+          {description}
+        </p>
+      )}
+      <div className={cn("flex-1", hasHeader && "mt-4")}>{children}</div>
+    </div>
+  );
+}
+
+export function DocsSectionGrid({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("grid gap-6 sm:grid-cols-2", className)}>{children}</div>;
+}
+
+export function DocsApiSection({ children }: { children: React.ReactNode }) {
+  return <section className="mt-16 flex flex-col gap-12">{children}</section>;
+}
+
+export interface DocsApiRow {
+  prop: string;
+  type: string;
+  default: string;
+  description: string;
+}
+
+export function DocsApiTable({ title, rows }: { title: string; rows: DocsApiRow[] }) {
+  return (
+    <div className="w-full">
+      <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-white">{title}</h2>
+      <div className="mt-3 overflow-x-auto rounded-xl 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)]">
+        <table className="w-full text-left text-sm">
+          <thead>
+            <tr className="border-b border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/40">
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Prop</th>
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Type</th>
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Default</th>
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={row.prop}
+                className="border-b border-zinc-200 transition-colors last:border-0 hover:bg-zinc-50/70 dark:border-zinc-800 dark:hover:bg-zinc-900/40"
+              >
+                <td className="px-3 py-2.5 font-mono text-xs text-zinc-900 dark:text-white">
+                  {row.prop}
+                </td>
+                <td className="px-3 py-2.5 font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                  {row.type}
+                </td>
+                <td className="px-3 py-2.5 font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                  {row.default}
+                </td>
+                <td className="px-3 py-2.5 text-zinc-600 dark:text-zinc-300">{row.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export function DocsSimpleTable({
+  title,
+  rows,
+  nameHeader = "Component",
+}: {
+  title: string;
+  rows: { name: string; description: string }[];
+  nameHeader?: string;
+}) {
+  return (
+    <div className="w-full">
+      <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-white">{title}</h2>
+      <div className="mt-3 overflow-x-auto rounded-xl 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)]">
+        <table className="w-full text-left text-sm">
+          <thead>
+            <tr className="border-b border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/40">
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">{nameHeader}</th>
+              <th className="px-3 py-2.5 font-medium text-zinc-500 dark:text-zinc-400">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={row.name}
+                className="border-b border-zinc-200 transition-colors last:border-0 hover:bg-zinc-50/70 dark:border-zinc-800 dark:hover:bg-zinc-900/40"
+              >
+                <td className="px-3 py-2.5 font-mono text-xs text-zinc-900 dark:text-white">
+                  {row.name}
+                </td>
+                <td className="px-3 py-2.5 text-zinc-600 dark:text-zinc-300">{row.description}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export function DocsAccessibility({ items }: { items: string[] }) {
+  return (
+    <div className="w-full">
+      <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-white">
+        Accessibility
+      </h2>
+      <ul className="mt-3 flex flex-col gap-2">
+        {items.map((item) => (
+          <li
+            key={item}
+            className="flex items-start gap-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300"
+          >
+            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function DocsDemoPanel({
+  children,
+  className,
+  dark = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  dark?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-2xl border shadow-[0_2px_8px_rgba(0,0,0,0.04)]",
+        dark
+          ? "border-zinc-800 bg-zinc-950"
+          : "border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/40 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]",
+        className,
+      )}
+    >
+      <div
+        className="pointer-events-none absolute inset-0 opacity-[0.35] dark:opacity-[0.12]"
+        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 flex flex-wrap items-center justify-center gap-3 px-6 py-14">
+        {children}
+      </div>
+    </div>
+  );
+}

package/components/docs/docs-search.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useRouter } from "next/navigation";
+import { Search, X, CornerDownLeft, SearchX } from "lucide-react";
+import { DOCS_NAV, type DocsNavItem } from "@/data/docs-nav";
+import { cn } from "@/lib/cn";
+
+interface FlatItem extends DocsNavItem {
+  group: string;
+  href: string;
+}
+
+const FLAT_ITEMS: FlatItem[] = DOCS_NAV.flatMap((group) =>
+  group.items.map((item) => ({
+    ...item,
+    group: group.title,
+    href: `/docs${item.slug ? `/${item.slug}` : ""}`,
+  }))
+);
+
+function normalize(value: string) {
+  return value.trim().toLowerCase().replace(/s$/, "");
+}
+
+function matchScore(query: string, item: FlatItem) {
+  const title = normalize(item.title);
+  const slug = normalize(item.slug);
+
+  if (title === query) return 100;
+  if (title.startsWith(query)) return 80;
+  if (slug.startsWith(query)) return 70;
+  if (title.includes(query) || query.includes(title)) return 50;
+  if (slug.includes(query) || query.includes(slug)) return 40;
+  return 0;
+}
+
+function HighlightedTitle({ title, query }: { title: string; query: string }) {
+  const q = query.trim();
+  if (!q) return <>{title}</>;
+
+  const idx = title.toLowerCase().indexOf(q.toLowerCase());
+  if (idx === -1) return <>{title}</>;
+
+  return (
+    <>
+      {title.slice(0, idx)}
+      <span className="rounded-[3px] bg-zinc-900/10 dark:bg-white/15">
+        {title.slice(idx, idx + q.length)}
+      </span>
+      {title.slice(idx + q.length)}
+    </>
+  );
+}
+
+export function DocsSearch() {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  useEffect(() => setMounted(true), []);
+
+  const results = useMemo(() => {
+    const q = normalize(query);
+    if (!q) return FLAT_ITEMS;
+
+    return FLAT_ITEMS.map((item) => ({ item, score: matchScore(q, item) }))
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => b.score - a.score)
+      .map(({ item }) => item);
+  }, [query]);
+
+  const groupedResults = useMemo(() => {
+    const groups = new Map<string, { item: FlatItem; index: number }[]>();
+    results.forEach((item, index) => {
+      const bucket = groups.get(item.group) ?? [];
+      bucket.push({ item, index });
+      groups.set(item.group, bucket);
+    });
+    return Array.from(groups.entries());
+  }, [results]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  useEffect(() => {
+    function handleShortcut(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    document.addEventListener("keydown", handleShortcut);
+    return () => document.removeEventListener("keydown", handleShortcut);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      setVisible(false);
+      document.body.style.overflow = "";
+      return;
+    }
+
+    setQuery("");
+    setActiveIndex(0);
+    document.body.style.overflow = "hidden";
+    const frame = requestAnimationFrame(() => setVisible(true));
+    const timer = setTimeout(() => inputRef.current?.focus(), 10);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
+  function go(item: FlatItem) {
+    router.push(item.href);
+    setOpen(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = results[activeIndex];
+      if (item) go(item);
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="flex w-full min-w-0 max-w-md items-center gap-2 rounded-lg border border-zinc-200 bg-zinc-50/80 px-2.5 py-2 text-sm text-zinc-400 shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition-all duration-200 hover:border-zinc-300 hover:bg-white hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)] dark:border-zinc-800 dark:bg-zinc-900/60 dark:text-zinc-500 dark:hover:border-zinc-700 dark:hover:bg-zinc-900 sm:gap-2.5 sm:px-3"
+      >
+        <Search className="h-4 w-4 shrink-0" />
+        <span className="min-w-0 flex-1 truncate text-left">Search documentation...</span>
+        <kbd className="hidden shrink-0 rounded-md border border-zinc-300 bg-white px-1.5 py-0.5 font-mono text-[10px] font-medium text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-500 sm:inline-flex">
+          ⌘K
+        </kbd>
+      </button>
+
+      {mounted && open && createPortal(
+        <div className="fixed inset-0 z-[100] isolate flex items-start justify-center p-4 pt-[12vh]">
+          <div
+            aria-hidden
+            onClick={() => setOpen(false)}
+            className={cn(
+              "absolute inset-0 bg-black/20 transition-opacity duration-200 ease-out dark:bg-black/50",
+              visible ? "opacity-100" : "opacity-0"
+            )}
+          />
+          <div
+            aria-hidden
+            className={cn(
+              "pointer-events-none absolute inset-x-0 top-0 h-16 bg-white/10 backdrop-blur-[2px] backdrop-saturate-150 transition-opacity duration-200 ease-out dark:bg-black/10",
+              visible ? "opacity-100" : "opacity-0"
+            )}
+          />
+
+          <div
+            role="dialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
+            className={cn(
+              "relative z-10 flex w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-zinc-200/90 bg-white shadow-[0_20px_60px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.04)] transition-[opacity,transform] duration-200 ease-out dark:border-zinc-800 dark:bg-zinc-950 dark:shadow-[0_20px_60px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.06)]",
+              visible ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]"
+            )}
+          >
+            <div className="flex items-center gap-3 border-b border-zinc-200 px-4 dark:border-zinc-800">
+              <Search className="h-4 w-4 shrink-0 text-zinc-400 dark:text-zinc-500" />
+              <input
+                ref={inputRef}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Search documentation..."
+                className="h-14 w-full bg-transparent text-base text-zinc-900 outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+              />
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+
+            <div className="docs-scrollbar max-h-[22rem] overflow-y-auto p-2">
+              {results.length === 0 ? (
+                <div className="flex flex-col items-center gap-2 py-12 text-center">
+                  <span className="flex h-11 w-11 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-900">
+                    <SearchX className="h-5 w-5 text-zinc-400 dark:text-zinc-600" />
+                  </span>
+                  <p className="mt-1 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                    No results for &quot;{query}&quot;
+                  </p>
+                  <p className="text-xs text-zinc-400 dark:text-zinc-600">
+                    Try a different name, e.g. Button, Dialog, Stepper.
+                  </p>
+                </div>
+              ) : (
+                groupedResults.map(([groupName, entries]) => (
+                  <div key={groupName} className="mb-1 last:mb-0">
+                    <p className="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-600">
+                      {groupName}
+                    </p>
+                    {entries.map(({ item, index }) => {
+                      const Icon = item.icon;
+                      const active = index === activeIndex;
+                      return (
+                        <button
+                          key={`${item.group}-${item.slug}`}
+                          type="button"
+                          onClick={() => go(item)}
+                          onMouseEnter={() => setActiveIndex(index)}
+                          className={cn(
+                            "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors",
+                            active
+                              ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800/80 dark:text-white"
+                              : "text-zinc-600 dark:text-zinc-400"
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border transition-colors",
+                              active
+                                ? "border-zinc-300 bg-white text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
+                                : "border-zinc-200 bg-zinc-50 text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-500"
+                            )}
+                          >
+                            <Icon className="h-3.5 w-3.5" />
+                          </span>
+                          <span className="flex-1 truncate font-medium">
+                            <HighlightedTitle title={item.title} query={query} />
+                          </span>
+                          {active && (
+                            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-zinc-200/70 text-zinc-500 dark:bg-zinc-700/60 dark:text-zinc-400">
+                              <CornerDownLeft className="h-3 w-3" />
+                            </span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ))
+              )}
+            </div>
+
+            <div className="flex items-center justify-between border-t border-zinc-200 px-4 py-2.5 text-[11px] text-zinc-400 dark:border-zinc-800 dark:text-zinc-600">
+              <span>
+                {results.length} result{results.length === 1 ? "" : "s"}
+              </span>
+              <span className="flex items-center gap-3">
+                <span className="flex items-center gap-1">
+                  <kbd className="rounded border border-zinc-300 px-1 py-0.5 font-mono dark:border-zinc-700">
+                    ↑↓
+                  </kbd>
+                  navigate
+                </span>
+                <span className="flex items-center gap-1">
+                  <kbd className="rounded border border-zinc-300 px-1 py-0.5 font-mono dark:border-zinc-700">
+                    ↵
+                  </kbd>
+                  select
+                </span>
+                <span className="flex items-center gap-1">
+                  <kbd className="rounded border border-zinc-300 px-1 py-0.5 font-mono dark:border-zinc-700">
+                    esc
+                  </kbd>
+                  close
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}