ruler-components 0.1.0 → 0.1.2

package/components/docs/docs-sidebar.tsx

@@ -1,165 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { createPortal } from "react-dom";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { ChevronDown, X } from "lucide-react";
-import { cn } from "@/lib/cn";
-import { DOCS_NAV } from "@/data/docs-nav";
-import { useDocsMobileNav } from "@/components/docs/docs-mobile-nav-context";
-
-function DocsNavContent({ onNavigate }: { onNavigate?: () => void }) {
-  const pathname = usePathname();
-
-  return (
-    <>
-      <nav className="flex flex-col gap-10">
-        {DOCS_NAV.map((group) => {
-          const GroupIcon = group.items[0]?.icon;
-
-          return (
-            <div key={group.title} className="relative">
-              <div className="relative z-10 mb-2 flex items-center gap-3 px-1">
-                <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-black dark:bg-white border border-zinc-200 dark:border-zinc-800 text-white dark:text-black shadow-[0_2px_4px_rgba(0,0,0,0.02)]">
-                  {GroupIcon && <GroupIcon size={14} />}
-                </div>
-                <p className="text-[11px] font-bold tracking-[0.15em] text-zinc-400 dark:text-zinc-500 uppercase">
-                  {group.title}
-                </p>
-              </div>
-              <div className="ml-5 flex flex-col  border-l border-zinc-200 dark:border-zinc-800 pl-4 relative -mt-4 pt-4">
-                {group.items.map((item) => {
-                  const href = `/docs${item.slug ? `/${item.slug}` : ""}`;
-                  const active = pathname === href;
-
-                  return (
-                    <Link
-                      key={item.title}
-                      href={href}
-                      onClick={onNavigate}
-                      className={cn(
-                        "group relative flex items-center py-2 text-[14px] transition-all duration-500 ease-out",
-                        active
-                          ? "font-bold text-zinc-900 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          "absolute -left-[17.5px] top-1/2 w-[3px] -translate-y-1/2 rounded-full transition-all duration-500 ease-in-out z-20",
-                          active
-                            ? "h-6 bg-zinc-900 dark:bg-white opacity-100 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
-                            : "h-0 bg-zinc-400 dark:bg-zinc-600 opacity-0 group-hover:h-3 group-hover:opacity-100"
-                        )}
-                      />
-                      {item.title}
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </nav>
-
-      <div className="mt-10 pt-6 border-t border-zinc-100 dark:border-zinc-900">
-        <button
-          type="button"
-          className="group flex w-full items-center justify-between rounded-xl border border-zinc-200 bg-zinc-50/50 px-4 py-2.5 text-xs font-semibold text-zinc-600 transition-all duration-300 hover:bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-400 dark:hover:bg-zinc-800"
-        >
-          <span className="flex items-center gap-2">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-            </span>
-            v1.0.0
-          </span>
-          <ChevronDown size={14} className="opacity-40" />
-        </button>
-      </div>
-    </>
-  );
-}
-
-function MobileDocsDrawer() {
-  const { open, setOpen } = useDocsMobileNav();
-  const [mounted, setMounted] = React.useState(false);
-  const [visible, setVisible] = React.useState(false);
-
-  React.useEffect(() => setMounted(true), []);
-
-  React.useEffect(() => {
-    if (!open) {
-      setVisible(false);
-      document.body.style.overflow = "";
-      return;
-    }
-    document.body.style.overflow = "hidden";
-    const frame = requestAnimationFrame(() => setVisible(true));
-    return () => {
-      cancelAnimationFrame(frame);
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-
-  React.useEffect(() => {
-    if (!open) return;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [open, setOpen]);
-
-  if (!mounted || !open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[100] lg:hidden">
-      <div
-        aria-hidden
-        onClick={() => setOpen(false)}
-        className={cn(
-          "absolute inset-0 bg-zinc-900/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out dark:bg-black/65",
-          visible ? "opacity-100" : "opacity-0",
-        )}
-      />
-      <aside
-        role="dialog"
-        aria-modal="true"
-        aria-label="Component navigation"
-        className={cn(
-          "absolute inset-y-0 left-0 flex w-72 max-w-[85vw] flex-col bg-white shadow-2xl transition-transform duration-200 ease-out dark:bg-black",
-          visible ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        <div className="flex shrink-0 items-center justify-between px-6 pb-4 pt-6">
-          <p className="text-sm font-bold text-zinc-900 dark:text-white">Components</p>
-          <button
-            type="button"
-            onClick={() => setOpen(false)}
-            aria-label="Close navigation menu"
-            className="flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-        <div className="docs-scrollbar min-h-0 flex-1 overflow-y-auto px-6 pb-6">
-          <DocsNavContent onNavigate={() => setOpen(false)} />
-        </div>
-      </aside>
-    </div>,
-    document.body,
-  );
-}
-
-export function DocsSidebar() {
-  return (
-    <>
-      <aside className="docs-scrollbar sticky top-16 z-10 hidden h-[calc(100vh-4rem)] w-64 shrink-0 overflow-y-auto border-r border-zinc-200 bg-white px-6 py-8 dark:border-zinc-800 dark:bg-black lg:block">
-        <DocsNavContent />
-      </aside>
-      <MobileDocsDrawer />
-    </>
-  );
-}

package/components/docs/docs-topbar.tsx

@@ -1,32 +0,0 @@
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/github";
-import { ThemeToggle } from "@/components/ui/theme-toggle";
-import { DocsSearch } from "@/components/docs/docs-search";
-
-export function DocsTopbar() {
-  return (
-    <header className="sticky top-0 z-40 border-b border-zinc-200 bg-white/80 shadow-[0_1px_0_rgba(0,0,0,0.02)] backdrop-blur-md dark:border-zinc-800 dark:bg-zinc-950/80">
-      <div className="grid h-16 min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 px-3 sm:grid-cols-[1fr_auto_1fr] sm:gap-4 sm:px-6">
-        <Link href="/" className="flex min-w-0 items-center gap-2.5 justify-self-start">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/light1.png" alt="ruler.ui" className="h-7 w-auto max-w-[7.5rem] object-contain dark:hidden sm:h-8 sm:max-w-none" />
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/dark2.png" alt="ruler.ui" className="hidden h-7 w-auto max-w-[7.5rem] object-contain dark:block sm:h-8 sm:max-w-none" />
-        </Link>
-
-        <DocsSearch />
-
-        <div className="flex shrink-0 items-center justify-end gap-2 justify-self-end">
-          <Link
-            href="#"
-            className="hidden items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100 sm:flex"
-          >
-            <GithubIcon className="h-4 w-4" />
-            GitHub
-          </Link>
-          <ThemeToggle />
-        </div>
-      </div>
-    </header>
-  );
-}