@geenius/docs 0.8.10 → 0.9.0

package/packages/react/dist/index.js

@@ -1,15 +1,21 @@
 import React, { useState, useId, useRef, useEffect, useCallback, useMemo, Children } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { AnimatePresence, motion } from '@geenius/motion/react';
 
 // src/components/Breadcrumbs.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 function Breadcrumbs({
-  items
+  items,
+  className
 }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1.5 text-sm", "aria-label": "Breadcrumb", children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-1.5 text-sm", className), "aria-label": "Breadcrumb", children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     idx > 0 && /* @__PURE__ */ jsx(
       "svg",
       {
@@ -31,7 +37,7 @@ function Breadcrumbs({
   ] }, `${item.href}-${item.title}`)) });
 }
 
-// ../shared/dist/chunk-BR2XBF64.js
+// ../shared/dist/chunk-QKKVTCRJ.js
 function toTocLevel(level) {
   if (level === 2 || level === 3 || level === 4) {
     return level;
@@ -188,11 +194,11 @@ function createHeading(Tag, className) {
   return ({ children }) => {
     const text = getNodeText(children);
     const id = slugify(text);
-    return /* @__PURE__ */ jsx(Tag, { id, className: `${className} scroll-mt-20`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: "transition-colors hover:text-primary", children }) });
+    return /* @__PURE__ */ jsx(Tag, { id, className: cn(className, "scroll-mt-20"), children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: "transition-colors hover:text-primary", children }) });
   };
 }
 function DocPage(props) {
-  return /* @__PURE__ */ jsx("article", { className: "prose-custom max-w-none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("article", { className: cn("prose-custom max-w-none", props.className), children: /* @__PURE__ */ jsx(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -236,7 +242,8 @@ function DocSearch({
   onQuery,
   onSelect,
   isOpen,
-  onClose
+  onClose,
+  className
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const dialogId = useId();
@@ -297,7 +304,7 @@ function DocSearch({
     },
     [results, activeIndex, onSelect, onClose]
   );
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", children: [
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-50 flex items-start justify-center pt-[15vh]", className), children: [
     /* @__PURE__ */ jsx(
       motion.button,
       {
@@ -443,7 +450,8 @@ function DocSearch({
 function DocSidebar({
   sections,
   currentPageId,
-  onNavigate
+  onNavigate,
+  className
 }) {
   const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
   const toggle = useCallback((id) => {
@@ -514,7 +522,7 @@ function DocSidebar({
       ) })
     ] }, section.id);
   };
-  return /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1 py-4", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: cn("flex flex-col gap-1 py-4", className), children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 pb-3 text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Documentation" }),
     topLevel.map((s) => renderSection(s, 0))
   ] });
@@ -526,7 +534,10 @@ function TocLink({ item, activeId, depth = 0 }) {
       motion.a,
       {
         href: `#${item.id}`,
-        className: `block truncate border-l-2 py-1 text-[13px] transition-all relative ${isActive ? "border-primary text-primary font-medium" : "border-transparent text-white/40 hover:text-white/80 hover:border-white/20"}`,
+        className: cn(
+          "block truncate border-l-2 py-1 text-[13px] transition-all relative",
+          isActive ? "border-primary text-primary font-medium" : "border-transparent text-white/40 hover:text-white/80 hover:border-white/20"
+        ),
         style: { paddingLeft: 12 + depth * 12 },
         whileHover: { x: 2 },
         whileTap: { scale: 0.98 },
@@ -539,10 +550,11 @@ function TocLink({ item, activeId, depth = 0 }) {
 }
 function TableOfContents({
   toc,
-  activeId
+  activeId,
+  className
 }) {
   if (toc.length === 0) return null;
-  return /* @__PURE__ */ jsxs("nav", { className: "sticky top-24", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: cn("sticky top-24", className), children: [
     /* @__PURE__ */ jsx("h4", { className: "mb-3 text-xs font-semibold uppercase tracking-widest text-white/40", children: "On this page" }),
     /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col relative", layoutRoot: true, children: /* @__PURE__ */ jsx(AnimatePresence, { children: toc.map((item) => /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, children: /* @__PURE__ */ jsx(TocLink, { item, activeId }) }, item.id)) }) })
   ] });
@@ -554,9 +566,10 @@ function DocsLayout({
   breadcrumbs,
   currentPageId,
   onNavigate,
-  children
+  children,
+  className
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen bg-[#090a0f] text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen bg-[#090a0f] text-white", className), children: [
     /* @__PURE__ */ jsx("aside", { className: "sticky top-0 hidden h-screen w-[260px] shrink-0 overflow-y-auto border-r border-white/5 bg-[#0b0c12] lg:block", children: /* @__PURE__ */ jsx(
       DocSidebar,
       {
@@ -604,7 +617,8 @@ function DocsLayout({
 }
 function EditButton({
   pageSlug,
-  editUrl
+  editUrl,
+  className
 }) {
   if (!editUrl) return null;
   const href = `${editUrl.replace(/\/$/, "")}/${pageSlug}.mdx`;
@@ -614,7 +628,10 @@ function EditButton({
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-white/40 transition-colors hover:border-white/20 hover:text-white/60",
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-white/40 transition-colors hover:border-white/20 hover:text-white/60",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "h-3.5 w-3.5", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M11.5 1.5l3 3-9 9H2.5v-3l9-9z", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
         "Edit this page"
@@ -624,10 +641,11 @@ function EditButton({
 }
 function PageNavigation({
   prev,
-  next
+  next,
+  className
 }) {
   if (!prev && !next) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex items-stretch gap-4 border-t border-white/10 pt-8", className), children: [
     prev ? /* @__PURE__ */ jsxs(
       "a",
       {
@@ -655,7 +673,8 @@ function PageNavigation({
 function VersionSelector({
   versions,
   current,
-  onSelect
+  onSelect,
+  className
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
@@ -669,7 +688,7 @@ function VersionSelector({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   if (versions.length <= 1) return null;
-  return /* @__PURE__ */ jsxs("div", { ref, className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -898,7 +917,8 @@ function useTableOfContents(mdxContent) {
 }
 function DocSearchPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const sections = useMemo(() => tree ?? [], [tree]);
   const flatPages = useMemo(() => sections.flatMap((s) => s.pages ?? []), [sections]);
@@ -911,12 +931,12 @@ function DocSearchPage({
   );
   const { results, isSearching, query, setQuery } = useDocSearch(searchFn);
   if (tree === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-[#090a0f] px-6 py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 animate-pulse rounded-xl bg-white/5" }),
       /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }, (_, index) => `doc-search-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-xl bg-white/5" }, key)) })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl px-6 py-16", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-[#090a0f] text-white", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl px-6 py-16", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-8 text-2xl font-bold", children: "Search Documentation" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mb-8", children: [
       /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-white/30", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", clipRule: "evenodd" }) }),
@@ -997,7 +1017,8 @@ function initialPageForm() {
 function DocsAdminPage({
   tree,
   allPages,
-  admin
+  admin,
+  className
 }) {
   const sections = useMemo(() => tree ?? [], [tree]);
   const [selectedSectionId, setSelectedSectionId] = useState(null);
@@ -1014,7 +1035,7 @@ function DocsAdminPage({
   const canCreateSection = sectionForm.title.trim().length > 0 && sectionForm.slug.trim().length > 0;
   const canCreatePage = pageForm.title.trim().length > 0 && pageForm.slug.trim().length > 0 && pageForm.content.trim().length > 0;
   if (tree === void 0) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-[#090a0f] px-6 py-12", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8 h-10 w-48 animate-pulse rounded bg-white/5" }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
         /* @__PURE__ */ jsx("div", { className: "h-96 animate-pulse rounded-xl bg-white/5" }),
@@ -1022,7 +1043,7 @@ function DocsAdminPage({
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] text-white", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6 py-12", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-[#090a0f] text-white", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6 py-12", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-8 text-2xl font-bold", children: "Docs Admin" }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-white/8 bg-white/[0.02] p-5", children: [
@@ -1394,7 +1415,8 @@ function DocsAdminPage({
 }
 function DocsIndexPage({
   tree,
-  onSelectPage
+  onSelectPage,
+  className
 }) {
   const docs = useDocs(tree);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -1417,20 +1439,29 @@ function DocsIndexPage({
     return () => document.removeEventListener("keydown", handler);
   }, []);
   if (docs.isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#090a0f] px-6 py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("min-h-screen bg-[#090a0f] px-6 py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-10 h-10 w-64 animate-pulse rounded-lg bg-white/5" }),
       /* @__PURE__ */ jsx("div", { className: "mb-8 h-12 w-full max-w-xl animate-pulse rounded-xl bg-white/5" }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => `docs-index-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-36 animate-pulse rounded-xl bg-white/5" }, key)) })
     ] }) });
   }
   if (docs.sections.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
-      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "No documentation yet" }),
-      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-white/40", children: "Create your first section and pages to get started with your documentation." })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F4DA}" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "No documentation yet" }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-white/40", children: "Create your first section and pages to get started with your documentation." })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[#090a0f] text-white", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen bg-[#090a0f] text-white", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6 py-16", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-2 text-4xl font-bold tracking-tight", children: "Documentation" }),
       /* @__PURE__ */ jsx("p", { className: "mb-10 text-lg text-white/50", children: "Browse guides, API references, and tutorials." }),
@@ -1518,7 +1549,8 @@ function DocViewPage({
   page,
   editPageUrl,
   onNavigate,
-  onIncrementView
+  onIncrementView,
+  className
 }) {
   const docs = useDocs(tree);
   const { toc, activeId } = useTableOfContents(page?.content);
@@ -1542,7 +1574,7 @@ function DocViewPage({
     };
   }, [page, docs.flatPages, docs.sections]);
   if (docs.isLoading || page === void 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen bg-[#090a0f]", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-screen bg-[#090a0f]", className), children: [
       /* @__PURE__ */ jsx("div", { className: "hidden w-[260px] shrink-0 border-r border-white/5 bg-[#0b0c12] lg:block", children: /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 8 }, (_, index) => `doc-view-sidebar-skeleton-${index}`).map((key) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded-lg bg-white/5" }, key)) }) }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 px-10 py-8", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-4", children: [
         /* @__PURE__ */ jsx("div", { className: "h-5 w-48 animate-pulse rounded bg-white/5" }),
@@ -1552,11 +1584,20 @@ function DocViewPage({
     ] });
   }
   if (!page) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
-      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "Page not found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40", children: "The documentation page you're looking for doesn't exist." })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-screen flex-col items-center justify-center bg-[#090a0f] text-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 text-6xl opacity-30", children: "\u{1F50D}" }),
+          /* @__PURE__ */ jsx("h2", { className: "mb-2 text-xl font-semibold text-white/80", children: "Page not found" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40", children: "The documentation page you're looking for doesn't exist." })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     DocsLayout,
@@ -1568,6 +1609,7 @@ function DocViewPage({
       breadcrumbs,
       currentPageId: page.id,
       onNavigate,
+      className,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-3 text-3xl font-bold tracking-tight", children: page.title }),