shapes-ui 0.4.2 → 0.6.0

package/src/components/docs/layout/header.tsx

@@ -1,6 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { MenuIcon, SunMoonIcon } from "lucide-react";
-import { useState } from "react";
+import { SunMoonIcon } from "lucide-react";
 
 import { DocsButton } from "@/components/docs/docs-button";
 import { useTheme } from "@/components/docs/theme-provider";
@@ -9,17 +8,17 @@ import { MobileMenu } from "./mobile-menu";
 
 export function Header() {
   const { toggleTheme, theme } = useTheme();
-  const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   return (
-    <header className=" sticky top-0 z-10 h-12 border-b bg-background">
-      <div className=" container mx-auto  flex h-full items-center justify-between border-x px-4">
-        <Link to="/">
+    <header className=" sticky top-0 z-10 h-12">
+      <div className=" container mx-auto  flex h-full items-center justify-between px-4">
+        <Link to="/" className="flex items-center gap-2 font-medium font-heading tracking-wide">
           <img
             src={theme === "dark" ? "/shps_white.svg" : "/shps_black.svg"}
             alt="Shapes UI Logo"
-            className=" size-6"
+            className=" size-5"
           />
+          shapes ui
         </Link>
 
         <div className=" mx-auto hidden gap-4 lg:flex">
@@ -31,19 +30,8 @@ export function Header() {
         <DocsButton onClick={toggleTheme} variant={"ghost"} className={"hidden lg:inline-flex"}>
           <SunMoonIcon className=" size-4" />
         </DocsButton>
-
-        <DocsButton
-          onClick={() => setShowMobileMenu(!showMobileMenu)}
-          variant={"ghost"}
-          size={"sm"}
-          className={"lg:hidden"}
-        >
-          <MenuIcon data-icon="start" />
-          Navigation
-        </DocsButton>
+        <MobileMenu />
       </div>
-
-      <MobileMenu open={showMobileMenu} onClose={() => setShowMobileMenu(false)} />
     </header>
   );
 }

package/src/components/docs/layout/mobile-menu.tsx

@@ -1,86 +1,34 @@
 import { Link } from "@tanstack/react-router";
-import { clsx } from "clsx";
 import { allComponents } from "content-collections";
-import { Suspense, useEffect, useRef } from "react";
-
+import { Suspense, useState } from "react";
 import { SuspenseFallback } from "./suspense-fallback";
+import { Drawer, DrawerPopup, DrawerTrigger } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+import { MenuIcon } from "lucide-react";
 
-export function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) {
-  const panelRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-
-    if (open) {
-      document.addEventListener("keydown", onKey);
-      document.body.style.overflow = "hidden";
-      // Move focus into the panel for accessibility
-      setTimeout(() => panelRef.current?.focus(), 0);
-    } else {
-      document.body.style.overflow = "";
-    }
-
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = "";
-    };
-  }, [open, onClose]);
+export function MobileMenu() {
 
-  return (
-    <div aria-hidden={!open} className={clsx("fixed inset-0 z-50", !open && "pointer-events-none")}>
-      <div
-        className={clsx(
-          "fixed inset-0 bg-black/40 transition-opacity duration-200",
-          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
-          "motion-reduce:transition-none",
-        )}
-        onClick={onClose}
-        aria-hidden
-      />
+  const [open, setOpen] = useState(false);
 
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal
-        tabIndex={-1}
-        className={clsx(
-          "fixed right-0 bottom-0 left-0 transform border-t bg-popup p-4 transition-transform duration-300 ease-[cubic-bezier(.22,1,.36,1)]",
-          open ? "translate-y-0" : "translate-y-full",
-          "motion-reduce:transform-none motion-reduce:transition-none",
-        )}
-      >
-        <nav className="mt-4 flex flex-col gap-2">
-          <Link to="/components" className="text-sm text-muted-foreground">
-            Components
-          </Link>
-          <Link to="/" className="text-base">
-            Home
-          </Link>
-          <div>
-            <Link to="/components" className="text-base">
-              Components
+  return <Drawer open={open} onOpenChange={setOpen} >
+    <DrawerTrigger className={'flex md:hidden'} render={<Button size={'xs'} variant={'secondary'} >
+      <MenuIcon  />
+    </Button>} />
+    <DrawerPopup position="bottom">
+      <nav className="mt-4 flex flex-col gap-2">
+        <span className="text-sm font-medium text-muted-foreground">Components</span>
+        <Suspense fallback={<SuspenseFallback />}>
+          {allComponents.map((component) => (
+            <Link key={component.slug} to={'/components/$slug'} params={{
+              slug: component.slug
+            }} onClick={() => setOpen(false)}>
+              <Button variant={'link'}>
+                {component.title}
+              </Button>
             </Link>
-            <div className=" ml-4 flex flex-col">
-              <Suspense fallback={<SuspenseFallback />}>
-                {[...allComponents]
-                  .sort((a, b) => a.title.localeCompare(b.title))
-                  .map((component) => (
-                    <Link
-                      key={component.slug}
-                      to="/components/$slug"
-                      params={{ slug: component.slug }}
-                      className="text-base"
-                    >
-                      {component.title}
-                    </Link>
-                  ))}
-              </Suspense>
-            </div>
-          </div>
-        </nav>
-      </div>
-    </div>
-  );
+          ))}
+        </Suspense>
+      </nav>
+    </DrawerPopup>
+  </Drawer>
 }

package/src/components/docs/layout/nav-list.tsx

@@ -3,11 +3,12 @@ import { allComponents } from "content-collections";
 import { ComponentProps } from "react";
 
 import { DocsButton } from "@/components/docs/docs-button";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 function NavSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex min-h-0 flex-1 flex-col gap-2">
       <h4 className=" pl-2 font-heading text-xs font-medium text-muted-foreground">{title}</h4>
       {children}
     </div>
@@ -16,27 +17,32 @@ function NavSection({ title, children }: { title: string; children: React.ReactN
 
 export function NavSidebar({ className, ...props }: ComponentProps<"nav">) {
   return (
-    <nav className={cn("hidden h-full w-64 flex-col p-4 lg:flex", className)} {...props}>
+    <nav className={cn("hidden h-full min-h-0 w-64 flex-col p-4 bg-card lg:flex", className)} {...props}>
       <NavSection title="Components">
-        <ul>
-          {[...allComponents]
-            .sort((a, b) => a.title.localeCompare(b.title))
-            .map((component) => (
-              <li key={component.slug}>
-                <Link to="/components/$slug" params={{ slug: component.slug }}>
-                  {({ isActive }) => (
-                    <DocsButton
-                      variant={"ghost"}
-                      size={"sm"}
-                      className={cn("w-fit justify-start rounded-none", isActive ? "bg-muted" : "")}
-                    >
-                      {component.title}
-                    </DocsButton>
-                  )}
-                </Link>
-              </li>
-            ))}
-        </ul>
+        <ScrollArea className="h-[98%]">
+          <ul>
+            {[...allComponents]
+              .sort((a, b) => a.title.localeCompare(b.title))
+              .map((component) => (
+                <li key={component.slug}>
+                  <Link to="/components/$slug" params={{ slug: component.slug }}>
+                    {({ isActive }) => (
+                      <DocsButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        className={cn(
+                          "w-fit justify-start rounded-none",
+                          isActive ? "bg-muted" : "",
+                        )}
+                      >
+                        {component.title}
+                      </DocsButton>
+                    )}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </ScrollArea>
       </NavSection>
     </nav>
   );

package/src/components/docs/layout/page-header.tsx

@@ -1,33 +1,78 @@
+import { IconMarkdown } from "@tabler/icons-react";
+import { ChevronDownIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
+import BaseUI from "@/assets/base-ui.svg?url";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group";
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@/components/ui/menu";
 import { cn } from "@/lib/utils";
 
-import CircuitBoard from "./circuit-board";
-
 export function PageHeader({
   title,
   subtitle,
   children,
+  baseUILink,
+  markdownLink,
   className,
   ...props
 }: ComponentProps<"div"> & {
   title: string;
   subtitle?: string;
+  baseUILink?: string;
+  markdownLink?: string;
 }) {
+  const handleOpenMarkdown = () => {
+    if (!markdownLink) {
+      return;
+    }
+
+    window.open(markdownLink, "_blank", "noopener,noreferrer");
+  };
+
   return (
     <div
       className={cn(
-        "flex h-32 items-center overflow-hidden border-b bg-background md:h-60",
+        "flex items-start justify-between overflow-hidden bg-background max-w-7xl mx-auto p-4 lg:px-0  ",
         className,
       )}
       {...props}
     >
-      <div className=" flex flex-col gap-1 p-6">
-        <h1 className="font-heading text-3xl font-bold xl:text-5xl">{title}</h1>
-        {subtitle && <p className="text-xs text-muted-foreground md:text-sm">{subtitle}</p>}
+      <div className=" flex flex-col">
+        <h1 className="font-heading text-2xl font-bold xl:text-3xl">{title}</h1>
+        {subtitle && <p className="text-xs w-2/3 text-muted-foreground md:text-sm">{subtitle}</p>}
         {children}
       </div>
-      <CircuitBoard className="mask-rtl ml-auto h-full max-w-70 text-foreground/40" />
+
+      <div className="flex flex-col">
+        <ButtonGroup>
+          <ButtonGroupText>
+            View
+        </ButtonGroupText>
+          <ButtonGroupSeparator />
+          <Menu>
+            <MenuTrigger
+              render={
+                <Button variant={"secondary"} size={"icon"}>
+                  <ChevronDownIcon />
+                </Button>
+              }
+            />
+            <MenuPopup align="end">
+              <MenuItem onClick={handleOpenMarkdown} disabled={!markdownLink}>
+                <IconMarkdown />
+                Markdown
+              </MenuItem>
+              {baseUILink && (
+                <MenuItem>
+                  <img className="size-4" alt="Base UI" src={BaseUI} />
+                  Base UI
+                </MenuItem>
+              )}
+            </MenuPopup>
+          </Menu>
+        </ButtonGroup>
+      </div>
     </div>
   );
 }

package/src/components/docs/layout/split-layout.tsx

@@ -1,21 +1,23 @@
-import { ComponentProps } from "react";
+import { ComponentProps, useState } from "react";
 
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 import { NavSidebar } from "./nav-list";
+import { TableOfContent } from "./table-of-content";
 
-export function SplitLayout({
-  children,
-  className,
+export function SplitLayout({ children, className, ...props }: ComponentProps<"div">) {
+  const [contentViewport, setContentViewport] = useState<HTMLDivElement | null>(null);
 
-  ...props
-}: ComponentProps<"div">) {
   return (
-    <div className={cn("flex h-full w-full", className)} {...props}>
+    <div className={cn("flex h-full min-h-0 w-full border", className)} {...props}>
       <NavSidebar />
-      <main className="min-w-0 flex-1 overflow-auto">
-        <div className="min-h-full lg:border-l">{children}</div>
+      <main className="min-w-0 flex-1 bg-card ">
+        <ScrollArea viewportRef={setContentViewport} className="h-full">
+          <div className="min-h-full">{children}</div>
+        </ScrollArea>
       </main>
+      <TableOfContent contentViewport={contentViewport} />
     </div>
   );
 }

package/src/components/docs/layout/table-of-content.tsx

@@ -0,0 +1,145 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { allComponents, allDocs } from "content-collections";
+import { useEffect, useMemo, useState } from "react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { TocHeading } from "@/lib/docs-headings";
+import { cn } from "@/lib/utils";
+
+function getRouteContent(pathname: string): TocHeading[] {
+  const [section, slug] = pathname.split("/").filter(Boolean);
+
+  if (!slug) {
+    return [];
+  }
+
+  if (section === "components") {
+    const current = allComponents.find((component) => component.slug === slug) as
+      | { toc?: TocHeading[] }
+      | undefined;
+
+    return current?.toc ?? [];
+  }
+
+  if (section === "docs") {
+    const current = allDocs.find((doc) => doc.slug === slug) as { toc?: TocHeading[] } | undefined;
+
+    return current?.toc ?? [];
+  }
+
+  return [];
+}
+
+type TableOfContentProps = {
+  contentViewport: HTMLDivElement | null;
+};
+
+export const TableOfContent = ({ contentViewport }: TableOfContentProps) => {
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const toc = useMemo(() => getRouteContent(pathname), [pathname]);
+  const [activeId, setActiveId] = useState<string>(toc[0]?.id ?? "");
+
+  useEffect(() => {
+    if (!toc.length) {
+      setActiveId("");
+      return;
+    }
+
+    let frameId = 0;
+    let warmupInterval: number | undefined;
+
+    const computeActiveHeading = () => {
+      const topOffset = contentViewport ? contentViewport.getBoundingClientRect().top + 96 : 120;
+
+      const renderedHeadings = toc
+        .map((heading) => ({
+          id: heading.id,
+          element: document.getElementById(heading.id),
+        }))
+        .filter((item) => item.element);
+
+      if (!renderedHeadings.length) {
+        return;
+      }
+
+      let nextActive = renderedHeadings[0]?.id ?? "";
+
+      for (const item of renderedHeadings) {
+        if ((item.element?.getBoundingClientRect().top ?? Number.POSITIVE_INFINITY) <= topOffset) {
+          nextActive = item.id;
+          continue;
+        }
+
+        break;
+      }
+
+      setActiveId((prev) => (prev === nextActive ? prev : nextActive));
+    };
+
+    const scheduleActiveUpdate = () => {
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+
+      frameId = requestAnimationFrame(() => {
+        computeActiveHeading();
+        frameId = 0;
+      });
+    };
+
+    contentViewport?.addEventListener("scroll", scheduleActiveUpdate, { passive: true });
+    window.addEventListener("resize", scheduleActiveUpdate);
+
+    scheduleActiveUpdate();
+    warmupInterval = window.setInterval(scheduleActiveUpdate, 80);
+    window.setTimeout(() => {
+      if (warmupInterval) {
+        window.clearInterval(warmupInterval);
+      }
+    }, 1500);
+
+    return () => {
+      if (frameId) {
+        cancelAnimationFrame(frameId);
+      }
+
+      if (warmupInterval) {
+        window.clearInterval(warmupInterval);
+      }
+
+      contentViewport?.removeEventListener("scroll", scheduleActiveUpdate);
+      window.removeEventListener("resize", scheduleActiveUpdate);
+    };
+  }, [contentViewport, pathname, toc]);
+
+  return (
+    <aside className="hidden h-full min-h-0 w-64 flex-col p-4 xl:flex">
+      <h4 className="pl-2 font-heading text-xs font-medium text-muted-foreground">On this page</h4>
+      <ScrollArea className="mt-2 h-[98%]">
+        <ul className="space-y-1">
+          {toc.map((heading) => {
+            const isActive = activeId === heading.id;
+
+            return (
+              <li key={heading.id}>
+                <Link
+                  to="."
+                  hash={heading.id}
+                  style={{ paddingLeft: `${(heading.level - 1) * 10}px` }}
+                  className={cn(
+                    "block truncate rounded px-2 py-1.5 text-xs transition-colors",
+                    isActive
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                  )}
+                >
+                  {heading.title}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </ScrollArea>
+    </aside>
+  );
+};