ruler-components 0.1.1 → 0.1.2

package/components/docs/docs-page.tsx

@@ -1,263 +0,0 @@
-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

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