@usecross/docs 0.5.0 → 0.6.0

package/dist/index.js

@@ -119,21 +119,21 @@ function InlineCode({ children }) {
 
 // src/components/DocsLayout.tsx
 import { Head, Link as Link2, usePage } from "@inertiajs/react";
-import { useState as useState2 } from "react";
+import { useState as useState4 } from "react";
 
 // src/components/Sidebar.tsx
 import { Link } from "@inertiajs/react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Sidebar({ nav, currentPath, className }) {
   return /* @__PURE__ */ jsx2("nav", { className: cn("space-y-8", className), children: nav.map((section) => /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("h3", { className: "mb-3 text-xs font-mono uppercase tracking-widest text-gray-500", children: section.title }),
-    /* @__PURE__ */ jsx2("ul", { className: "space-y-1 border-l-2 border-gray-200", children: section.items.map((item) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx2("h3", { className: "mb-3 text-xs font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400", children: section.title }),
+    /* @__PURE__ */ jsx2("ul", { className: "space-y-1 border-l-2 border-gray-200 dark:border-gray-700", children: section.items.map((item) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
       Link,
       {
         href: item.href,
         className: cn(
           "block border-l-2 py-1.5 pl-4 text-sm transition-colors -ml-0.5",
-          currentPath === item.href ? "border-primary-500 text-black font-bold" : "border-transparent text-gray-600 hover:border-black hover:text-black"
+          currentPath === item.href ? "border-primary-500 text-gray-900 dark:text-white font-bold" : "border-transparent text-gray-600 dark:text-gray-300 hover:border-gray-900 dark:hover:border-white hover:text-gray-900 dark:hover:text-white"
         ),
         children: item.title
       }
@@ -141,24 +141,258 @@ function Sidebar({ nav, currentPath, className }) {
   ] }, section.title)) });
 }
 
+// src/components/ThemeToggle.tsx
+import { useState as useState3, useRef, useEffect as useEffect3 } from "react";
+
+// src/components/ThemeProvider.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+var STORAGE_KEY = "cross-docs-theme";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme() {
+  if (typeof window === "undefined") return null;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark" || stored === "system") {
+    return stored;
+  }
+  return null;
+}
+function ThemeProvider({
+  children,
+  defaultTheme: defaultTheme2 = "system",
+  forcedTheme
+}) {
+  const [theme, setThemeState] = useState2(() => {
+    if (typeof window === "undefined") return defaultTheme2;
+    return getStoredTheme() ?? defaultTheme2;
+  });
+  const [resolvedTheme, setResolvedTheme] = useState2(() => {
+    if (forcedTheme) return forcedTheme;
+    if (typeof window === "undefined") return "light";
+    if (theme === "system") return getSystemTheme();
+    return theme;
+  });
+  useEffect2(() => {
+    if (forcedTheme) {
+      setResolvedTheme(forcedTheme);
+      return;
+    }
+    const updateResolvedTheme = () => {
+      if (theme === "system") {
+        setResolvedTheme(getSystemTheme());
+      } else {
+        setResolvedTheme(theme);
+      }
+    };
+    updateResolvedTheme();
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        setResolvedTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, forcedTheme]);
+  useEffect2(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
+  }, [resolvedTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(STORAGE_KEY, newTheme);
+  };
+  return /* @__PURE__ */ jsx3(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var themeInitScript = `
+(function() {
+  try {
+    var stored = localStorage.getItem('${STORAGE_KEY}');
+    var theme = stored === 'light' || stored === 'dark' ? stored :
+                (stored === 'system' || !stored) && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    document.documentElement.classList.add(theme);
+  } catch (e) {}
+})();
+`.trim();
+
+// src/components/ThemeToggle.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SunIcon = ({ className }) => /* @__PURE__ */ jsxs3("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 5V3M12 21v-2M5 12H3m18 0h-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var MoonIcon = ({ className }) => /* @__PURE__ */ jsx4("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4("path", { d: "M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var MonitorIcon = ({ className }) => /* @__PURE__ */ jsxs3("svg", { className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx4("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 21h8m-4-4v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var themeOptions = [
+  { value: "light", label: "Light", icon: SunIcon },
+  { value: "dark", label: "Dark", icon: MoonIcon },
+  { value: "system", label: "System", icon: MonitorIcon }
+];
+function ThemeToggle({ className, size = "md" }) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [isOpen, setIsOpen] = useState3(false);
+  const dropdownRef = useRef(null);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect3(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+  const iconSizes = {
+    sm: "w-[18px] h-[18px]",
+    md: "w-5 h-5",
+    lg: "w-[22px] h-[22px]"
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          "relative inline-flex items-center justify-center",
+          "rounded-full p-4",
+          "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+          "hover:bg-gray-100 dark:hover:bg-white/10",
+          "transition-all duration-200 ease-out",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[#0f0f0f]",
+          iconSizes[size],
+          className
+        ),
+        "aria-label": "Toggle theme",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: [
+          /* @__PURE__ */ jsx4(
+            SunIcon,
+            {
+              className: cn(
+                iconSizes[size],
+                "absolute inset-0 m-auto transition-all duration-300 ease-out",
+                resolvedTheme === "light" ? "rotate-0 scale-100 opacity-100" : "rotate-90 scale-75 opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            MoonIcon,
+            {
+              className: cn(
+                iconSizes[size],
+                "absolute inset-0 m-auto transition-all duration-300 ease-out",
+                resolvedTheme === "dark" ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-75 opacity-0"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: cn(
+          "absolute right-0 mt-2 min-w-[140px]",
+          "p-1",
+          "bg-white dark:bg-[#171717]",
+          "border border-gray-200 dark:border-[#262626]",
+          "rounded-xl",
+          "shadow-lg shadow-black/5 dark:shadow-black/40",
+          "z-50",
+          "transition-all duration-200 ease-out origin-top-right",
+          isOpen ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-1 pointer-events-none"
+        ),
+        role: "listbox",
+        "aria-label": "Select theme",
+        children: themeOptions.map((option, index) => {
+          const Icon = option.icon;
+          const isSelected = theme === option.value;
+          return /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => {
+                setTheme(option.value);
+                setIsOpen(false);
+              },
+              className: cn(
+                "w-full flex items-center gap-2.5 px-3 py-2",
+                "rounded-lg",
+                "text-[13px] font-medium",
+                "transition-all duration-150 ease-out",
+                "focus:outline-none",
+                isSelected ? "text-gray-900 dark:text-white bg-gray-100 dark:bg-[#262626]" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1f1f1f]"
+              ),
+              role: "option",
+              "aria-selected": isSelected,
+              style: {
+                animationDelay: isOpen ? `${index * 25}ms` : "0ms"
+              },
+              children: [
+                /* @__PURE__ */ jsx4(Icon, { className: cn(
+                  "w-4 h-4 flex-shrink-0",
+                  "transition-transform duration-150",
+                  isSelected ? "scale-110" : "scale-100"
+                ) }),
+                /* @__PURE__ */ jsx4("span", { className: "flex-1 text-left", children: option.label }),
+                /* @__PURE__ */ jsx4("div", { className: cn(
+                  "w-1.5 h-1.5 rounded-full",
+                  "transition-all duration-200",
+                  isSelected ? "bg-primary-500 scale-100 opacity-100" : "bg-transparent scale-0 opacity-0"
+                ) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
 // src/components/DocsLayout.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function MobileMenuButton({ onClick, isOpen }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       onClick,
-      className: "inline-flex items-center justify-center p-2 -ml-2 text-black hover:text-primary-500 lg:hidden",
+      className: "inline-flex items-center justify-center p-2 -ml-2 text-gray-700 hover:text-primary-500 dark:text-gray-300 dark:hover:text-primary-400 lg:hidden transition-colors",
       "aria-expanded": isOpen,
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "sr-only", children: isOpen ? "Close menu" : "Open menu" }),
-        isOpen ? /* @__PURE__ */ jsx3("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx3("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
+        /* @__PURE__ */ jsx5("span", { className: "sr-only", children: isOpen ? "Close menu" : "Open menu" }),
+        isOpen ? /* @__PURE__ */ jsx5("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx5("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
       ]
     }
   );
 }
 function GitHubIcon() {
-  return /* @__PURE__ */ jsx3("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(
     "path",
     {
       fillRule: "evenodd",
@@ -181,62 +415,66 @@ function DocsLayout({
 }) {
   const sharedProps = usePage().props;
   const { nav, currentPath } = sharedProps;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState4(false);
+  const { resolvedTheme } = useTheme();
   const logoUrl = propLogoUrl ?? sharedProps.logoUrl;
   const logoInvertedUrl = propLogoInvertedUrl ?? sharedProps.logoInvertedUrl;
   const githubUrl = propGithubUrl ?? sharedProps.githubUrl;
   const navLinks = propNavLinks ?? sharedProps.navLinks ?? [];
-  const headerLogo = logoInverted || logo || (logoInvertedUrl ? /* @__PURE__ */ jsx3("img", { src: logoInvertedUrl, alt: "Logo", className: "h-8" }) : logoUrl ? /* @__PURE__ */ jsx3("img", { src: logoUrl, alt: "Logo", className: "h-8" }) : null);
+  const headerLogo = logoInverted || logo || (logoInvertedUrl ? /* @__PURE__ */ jsx5("img", { src: logoInvertedUrl, alt: "Logo", className: "h-8" }) : logoUrl ? /* @__PURE__ */ jsx5("img", { src: logoUrl, alt: "Logo", className: "h-8" }) : null);
   const footerLogoUrl = sharedProps.footerLogoUrl || logoUrl;
-  const footerLogo = logo || (footerLogoUrl ? /* @__PURE__ */ jsx3("img", { src: footerLogoUrl, alt: "Logo", className: "h-6" }) : null);
-  return /* @__PURE__ */ jsxs3("div", { className: "min-h-screen bg-white flex flex-col", children: [
-    /* @__PURE__ */ jsx3(Head, { title }),
-    /* @__PURE__ */ jsx3("nav", { className: "fixed w-full z-50 bg-white border-b border-gray-200", children: /* @__PURE__ */ jsx3("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs3("div", { className: "flex justify-between h-16 items-center", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx3(MobileMenuButton, { onClick: () => setMobileMenuOpen(!mobileMenuOpen), isOpen: mobileMenuOpen }),
-        headerLogo ? /* @__PURE__ */ jsx3(Link2, { href: "/", className: "flex items-center", children: headerLogo }) : /* @__PURE__ */ jsx3(Link2, { href: "/", className: "font-bold text-lg", children: "Docs" })
+  const footerLogoInvertedUrl = sharedProps.footerLogoInvertedUrl || logoInvertedUrl;
+  const currentFooterLogoUrl = resolvedTheme === "dark" ? footerLogoInvertedUrl || footerLogoUrl : footerLogoUrl;
+  const footerLogo = logo || (currentFooterLogoUrl ? /* @__PURE__ */ jsx5("img", { src: currentFooterLogoUrl, alt: "Logo", className: "h-6" }) : null);
+  return /* @__PURE__ */ jsxs4("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
+    /* @__PURE__ */ jsx5(Head, { title }),
+    /* @__PURE__ */ jsx5("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx5("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between h-16 items-center", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(MobileMenuButton, { onClick: () => setMobileMenuOpen(!mobileMenuOpen), isOpen: mobileMenuOpen }),
+        headerLogo ? /* @__PURE__ */ jsx5(Link2, { href: "/", className: "flex items-center", children: headerLogo }) : /* @__PURE__ */ jsx5(Link2, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: "Docs" })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-8", children: [
-        navLinks.map((link) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-6", children: [
+        /* @__PURE__ */ jsx5("div", { className: "-mr-2", children: /* @__PURE__ */ jsx5(ThemeToggle, { size: "sm" }) }),
+        navLinks.map((link) => /* @__PURE__ */ jsx5(
           Link2,
           {
             href: link.href,
-            className: "text-black font-medium hover:text-primary-500 transition-colors",
+            className: "hidden sm:block text-gray-700 dark:text-gray-300 font-medium hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
             children: link.label
           },
           link.href
         )),
-        githubUrl && /* @__PURE__ */ jsx3(
+        githubUrl && /* @__PURE__ */ jsx5(
           "a",
           {
             href: githubUrl,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-black hover:text-primary-500 transition-colors",
-            children: /* @__PURE__ */ jsx3(GitHubIcon, {})
+            className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
+            children: /* @__PURE__ */ jsx5(GitHubIcon, {})
           }
         )
       ] })
     ] }) }) }),
-    mobileMenuOpen && /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-40 lg:hidden", children: [
-      /* @__PURE__ */ jsx3("div", { className: "fixed inset-0 bg-black/50", onClick: () => setMobileMenuOpen(false) }),
-      /* @__PURE__ */ jsx3("div", { className: "fixed inset-y-0 left-0 w-72 overflow-y-auto bg-white px-4 lg:px-10 py-6 pt-20 border-r border-gray-200", children: /* @__PURE__ */ jsx3(Sidebar, { nav, currentPath }) })
+    mobileMenuOpen && /* @__PURE__ */ jsxs4("div", { className: "fixed inset-0 z-40 lg:hidden", children: [
+      /* @__PURE__ */ jsx5("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/70", onClick: () => setMobileMenuOpen(false) }),
+      /* @__PURE__ */ jsx5("div", { className: "fixed inset-y-0 left-0 w-72 overflow-y-auto bg-white dark:bg-[#0f0f0f] px-4 lg:px-10 py-6 pt-20 border-r border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx5(Sidebar, { nav, currentPath }) })
     ] }),
-    /* @__PURE__ */ jsx3("div", { className: "bg-white pt-16 w-full flex-1", children: /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-12", children: [
-      /* @__PURE__ */ jsx3("aside", { className: "hidden lg:block lg:col-span-3 xl:col-span-2 border-r border-gray-200 min-h-[calc(100vh-4rem)]", children: /* @__PURE__ */ jsx3("nav", { className: "sticky top-16 px-4 lg:px-10 py-6 max-h-[calc(100vh-4rem)] overflow-y-auto", children: /* @__PURE__ */ jsx3(Sidebar, { nav, currentPath }) }) }),
-      /* @__PURE__ */ jsx3("main", { className: "col-span-12 lg:col-span-9 xl:col-span-10 p-4 lg:px-10 lg:py-6", children: /* @__PURE__ */ jsx3("article", { className: "prose prose-lg max-w-3xl prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-3xl prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-10 first:prose-h2:mt-0 prose-h3:text-xl prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none", children }) })
+    /* @__PURE__ */ jsx5("div", { className: "bg-white dark:bg-[#0f0f0f] pt-16 w-full flex-1 transition-colors", children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-12", children: [
+      /* @__PURE__ */ jsx5("aside", { className: "hidden lg:block lg:col-span-3 xl:col-span-2 border-r border-gray-200 dark:border-gray-800 min-h-[calc(100vh-4rem)] transition-colors", children: /* @__PURE__ */ jsx5("nav", { className: "sticky top-16 px-4 lg:px-10 py-6 max-h-[calc(100vh-4rem)] overflow-y-auto", children: /* @__PURE__ */ jsx5(Sidebar, { nav, currentPath }) }) }),
+      /* @__PURE__ */ jsx5("main", { className: "col-span-12 lg:col-span-9 xl:col-span-10 p-4 lg:px-10 lg:py-6", children: /* @__PURE__ */ jsx5("article", { className: "prose prose-lg max-w-3xl prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-3xl prose-h1:mb-4 prose-h2:text-2xl prose-h2:mt-10 first:prose-h2:mt-0 prose-h3:text-xl prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none dark:prose-headings:text-white dark:prose-strong:text-white dark:text-gray-300", children }) })
     ] }) }),
-    footer || /* @__PURE__ */ jsx3("footer", { className: "border-t border-gray-200 py-8", children: /* @__PURE__ */ jsxs3("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
-      footerLogo && /* @__PURE__ */ jsx3(Link2, { href: "/", children: footerLogo }),
-      /* @__PURE__ */ jsxs3("div", { className: "flex gap-8 text-sm text-gray-600", children: [
-        navLinks.map((link) => /* @__PURE__ */ jsx3(Link2, { href: link.href, className: "hover:text-black transition-colors", children: link.label }, link.href)),
-        githubUrl && /* @__PURE__ */ jsx3(
+    footer || /* @__PURE__ */ jsx5("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs4("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
+      footerLogo && /* @__PURE__ */ jsx5(Link2, { href: "/", children: footerLogo }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-400", children: [
+        navLinks.map((link) => /* @__PURE__ */ jsx5(Link2, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
+        githubUrl && /* @__PURE__ */ jsx5(
           "a",
           {
             href: githubUrl,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "hover:text-black transition-colors",
+            className: "hover:text-black dark:hover:text-white transition-colors",
             children: "GitHub"
           }
         )
@@ -249,7 +487,7 @@ function DocsLayout({
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 function Markdown({ content, components }) {
   const lowercaseComponents = components ? Object.entries(components).reduce(
     (acc, [name, Component]) => {
@@ -258,7 +496,7 @@ function Markdown({ content, components }) {
     },
     {}
   ) : {};
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
@@ -267,14 +505,14 @@ function Markdown({ content, components }) {
         ...lowercaseComponents,
         // Override pre to avoid double wrapping with CodeBlock
         pre({ children }) {
-          return /* @__PURE__ */ jsx4(Fragment, { children });
+          return /* @__PURE__ */ jsx6(Fragment, { children });
         },
         // Custom code block rendering with syntax highlighting
         code({ node, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || "");
           const isInline = !match && !className;
           if (isInline) {
-            return /* @__PURE__ */ jsx4(
+            return /* @__PURE__ */ jsx6(
               "code",
               {
                 className: "rounded bg-gray-100 px-1.5 py-0.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200",
@@ -287,7 +525,7 @@ function Markdown({ content, components }) {
           const titleMatch = /title="([^"]+)"/.exec(meta);
           const filename = titleMatch ? titleMatch[1] : void 0;
           const showLineNumbers = meta.includes("showLineNumbers");
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx6(
             CodeBlock,
             {
               code: String(children).replace(/\n$/, ""),
@@ -300,7 +538,7 @@ function Markdown({ content, components }) {
         // Custom link styling
         a({ href, children }) {
           const isExternal = href?.startsWith("http");
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx6(
             "a",
             {
               href,
@@ -312,13 +550,13 @@ function Markdown({ content, components }) {
         },
         // Tables
         table({ children }) {
-          return /* @__PURE__ */ jsx4("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx4("table", { className: "w-full text-left text-sm", children }) });
+          return /* @__PURE__ */ jsx6("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx6("table", { className: "w-full text-left text-sm", children }) });
         },
         th({ children }) {
-          return /* @__PURE__ */ jsx4("th", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2 font-semibold dark:border-gray-700 dark:bg-gray-800", children });
+          return /* @__PURE__ */ jsx6("th", { className: "border-b border-gray-200 bg-gray-50 px-4 py-2 font-semibold dark:border-gray-700 dark:bg-gray-800", children });
         },
         td({ children }) {
-          return /* @__PURE__ */ jsx4("td", { className: "border-b border-gray-200 px-4 py-2 dark:border-gray-700", children });
+          return /* @__PURE__ */ jsx6("td", { className: "border-b border-gray-200 px-4 py-2 dark:border-gray-700", children });
         }
       },
       children: content
@@ -327,32 +565,32 @@ function Markdown({ content, components }) {
 }
 
 // src/context/ComponentsContext.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ComponentsContext = createContext({});
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ComponentsContext = createContext2({});
 function ComponentsProvider({
   children,
   components
 }) {
-  return /* @__PURE__ */ jsx5(ComponentsContext.Provider, { value: { components }, children });
+  return /* @__PURE__ */ jsx7(ComponentsContext.Provider, { value: { components }, children });
 }
 function useComponents() {
-  return useContext(ComponentsContext);
+  return useContext2(ComponentsContext);
 }
 
 // src/components/DocsPage.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function DocsPage({ content, ...layoutProps }) {
   const { components } = useComponents();
-  return /* @__PURE__ */ jsx6(DocsLayout, { title: content?.title ?? "", description: content?.description, ...layoutProps, children: /* @__PURE__ */ jsx6(Markdown, { content: content?.body ?? "", components }) });
+  return /* @__PURE__ */ jsx8(DocsLayout, { title: content?.title ?? "", description: content?.description, ...layoutProps, children: /* @__PURE__ */ jsx8(Markdown, { content: content?.body ?? "", components }) });
 }
 
 // src/components/EmojiConfetti.tsx
-import { useState as useState3, useCallback } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState5, useCallback } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function EmojiConfetti({ children, emoji }) {
-  const [particles, setParticles] = useState3([]);
-  const [isActive, setIsActive] = useState3(false);
+  const [particles, setParticles] = useState5([]);
+  const [isActive, setIsActive] = useState5(false);
   const triggerBurst = useCallback(() => {
     if (isActive) return;
     setIsActive(true);
@@ -379,17 +617,17 @@ function EmojiConfetti({ children, emoji }) {
       setIsActive(false);
     }, 1e3);
   }, [isActive]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "span",
     {
       className: "relative inline-block",
       onMouseEnter: triggerBurst,
       children: [
         children,
-        /* @__PURE__ */ jsx7("span", { className: "absolute inset-0 pointer-events-none overflow-visible", children: particles.map((p) => {
+        /* @__PURE__ */ jsx9("span", { className: "absolute inset-0 pointer-events-none overflow-visible", children: particles.map((p) => {
           const endX = p.x + Math.cos(p.angle) * p.velocity;
           const endY = p.y + Math.sin(p.angle) * p.velocity;
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx9(
             "span",
             {
               className: "absolute",
@@ -415,39 +653,39 @@ function EmojiConfetti({ children, emoji }) {
 
 // src/components/HomePage.tsx
 import { Head as Head2, Link as Link3 } from "@inertiajs/react";
-import { createContext as createContext2, useContext as useContext2, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var HomePageContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3, useState as useState6 } from "react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var HomePageContext = createContext3(null);
 function useHomePage() {
-  const context = useContext2(HomePageContext);
+  const context = useContext3(HomePageContext);
   if (!context) {
     throw new Error("HomePage sub-components must be used within <HomePage>");
   }
   return context;
 }
 function InstallCommand({ command }) {
-  const [copied, setCopied] = useState4(false);
+  const [copied, setCopied] = useState6(false);
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(command);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       onClick: copyToClipboard,
-      className: "group relative flex items-center bg-black border border-black px-4 h-14 font-mono text-sm text-white hover:bg-white hover:text-black transition-colors cursor-pointer",
+      className: "group relative flex items-center bg-gray-900 dark:bg-white border border-gray-900 dark:border-white px-4 h-14 font-mono text-sm text-white dark:text-gray-900 hover:bg-white dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer",
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "text-primary-500 mr-2", children: "$" }),
-        /* @__PURE__ */ jsx8("span", { children: command }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10("span", { className: "text-primary-500 dark:text-primary-600 mr-2", children: "$" }),
+        /* @__PURE__ */ jsx10("span", { children: command }),
+        /* @__PURE__ */ jsx10(
           "svg",
           {
             className: `ml-4 w-4 h-4 transition ${copied ? "text-green-400" : "opacity-50 group-hover:opacity-100"}`,
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx10(
               "path",
               {
                 strokeLinecap: "round",
@@ -458,10 +696,10 @@ function InstallCommand({ command }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           "span",
           {
-            className: `absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-xs py-1 px-2 rounded transition-opacity duration-300 whitespace-nowrap ${copied ? "opacity-100" : "opacity-0"}`,
+            className: `absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-xs py-1 px-2 rounded transition-opacity duration-300 whitespace-nowrap ${copied ? "opacity-100" : "opacity-0"}`,
             children: "Copied!"
           }
         )
@@ -470,7 +708,7 @@ function InstallCommand({ command }) {
   );
 }
 function GitHubIcon2() {
-  return /* @__PURE__ */ jsx8("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(
     "path",
     {
       fillRule: "evenodd",
@@ -482,32 +720,33 @@ function GitHubIcon2() {
 function DefaultLogo() {
   const { title, logoUrl } = useHomePage();
   if (logoUrl) {
-    return /* @__PURE__ */ jsx8(Link3, { href: "/", className: "flex items-center", children: /* @__PURE__ */ jsx8("img", { src: logoUrl, alt: title, className: "h-8" }) });
+    return /* @__PURE__ */ jsx10(Link3, { href: "/", className: "flex items-center", children: /* @__PURE__ */ jsx10("img", { src: logoUrl, alt: title, className: "h-8" }) });
   }
-  return /* @__PURE__ */ jsx8(Link3, { href: "/", className: "font-bold text-lg", children: title });
+  return /* @__PURE__ */ jsx10(Link3, { href: "/", className: "font-bold text-lg text-gray-900 dark:text-white", children: title });
 }
 function HomeHeader({ renderLogo } = {}) {
   const { navLinks, githubUrl } = useHomePage();
-  return /* @__PURE__ */ jsx8("nav", { className: "fixed w-full z-50 bg-white border-b border-gray-200", children: /* @__PURE__ */ jsx8("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs5("div", { className: "flex justify-between h-16 items-center", children: [
-    renderLogo ? renderLogo() : /* @__PURE__ */ jsx8(DefaultLogo, {}),
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center space-x-8", children: [
-      navLinks.map((link) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("nav", { className: "fixed w-full z-50 bg-white/95 dark:bg-[#0f0f0f]/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsx10("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs6("div", { className: "flex justify-between h-16 items-center", children: [
+    renderLogo ? renderLogo() : /* @__PURE__ */ jsx10(DefaultLogo, {}),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx10("div", { className: "-mr-2", children: /* @__PURE__ */ jsx10(ThemeToggle, { size: "sm" }) }),
+      navLinks.map((link) => /* @__PURE__ */ jsx10(
         Link3,
         {
           href: link.href,
-          className: "text-black font-medium hover:text-primary-500 transition-colors",
+          className: "hidden sm:block text-gray-700 dark:text-gray-300 font-medium hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
           children: link.label
         },
         link.href
       )),
-      githubUrl && /* @__PURE__ */ jsx8(
+      githubUrl && /* @__PURE__ */ jsx10(
         "a",
         {
           href: githubUrl,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "text-black hover:text-primary-500 transition-colors",
-          children: /* @__PURE__ */ jsx8(GitHubIcon2, {})
+          className: "text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
+          children: /* @__PURE__ */ jsx10(GitHubIcon2, {})
         }
       )
     ] })
@@ -515,39 +754,39 @@ function HomeHeader({ renderLogo } = {}) {
 }
 function HomeHero() {
   const { title, tagline, description, ctaText, ctaHref, installCommand, heroLogoUrl } = useHomePage();
-  return /* @__PURE__ */ jsx8("section", { className: "pt-16", children: /* @__PURE__ */ jsx8("div", { className: "px-4 lg:px-10 py-16 lg:py-24", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-4xl", children: [
-    /* @__PURE__ */ jsx8("div", { className: "mb-4 text-sm font-mono uppercase tracking-widest text-gray-500", children: tagline }),
-    heroLogoUrl ? /* @__PURE__ */ jsx8("h1", { className: "mb-6 lg:mb-8", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("section", { className: "pt-16", children: /* @__PURE__ */ jsx10("div", { className: "px-4 lg:px-10 py-16 lg:py-24", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl", children: [
+    /* @__PURE__ */ jsx10("div", { className: "mb-4 text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400", children: tagline }),
+    heroLogoUrl ? /* @__PURE__ */ jsx10("h1", { className: "mb-6 lg:mb-8", children: /* @__PURE__ */ jsx10(
       "img",
       {
         src: heroLogoUrl,
         alt: title,
         className: "h-auto w-auto max-w-[580px]"
       }
-    ) }) : /* @__PURE__ */ jsx8("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight mb-6", children: title }),
-    /* @__PURE__ */ jsx8("p", { className: "text-xl lg:text-2xl text-gray-700 max-w-2xl leading-relaxed mb-8", children: description }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col sm:flex-row gap-3", children: [
-      /* @__PURE__ */ jsx8(
+    ) }) : /* @__PURE__ */ jsx10("h1", { className: "text-5xl lg:text-7xl font-bold tracking-tight mb-6 text-gray-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsx10("p", { className: "text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-2xl leading-relaxed mb-8", children: description }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex flex-col sm:flex-row gap-3", children: [
+      /* @__PURE__ */ jsx10(
         Link3,
         {
           href: ctaHref,
-          className: "inline-flex items-center justify-center px-8 h-14 bg-black text-white font-bold text-lg hover:bg-primary-500 transition-colors border border-black",
+          className: "inline-flex items-center justify-center px-8 h-14 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold text-lg hover:bg-primary-500 dark:hover:bg-primary-500 dark:hover:text-white transition-colors border border-gray-900 dark:border-white hover:border-primary-500 dark:hover:border-primary-500",
           children: ctaText
         }
       ),
-      installCommand && /* @__PURE__ */ jsx8(InstallCommand, { command: installCommand })
+      installCommand && /* @__PURE__ */ jsx10(InstallCommand, { command: installCommand })
     ] })
   ] }) }) });
 }
 function HomeFeatureItem({ feature, index, totalFeatures }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: `p-4 lg:p-10 border-b sm:border-b border-gray-200 ${index % 2 === 0 ? "sm:border-r" : ""} ${index >= totalFeatures - 2 ? "sm:border-b-0" : ""} ${index === totalFeatures - 1 && totalFeatures % 2 === 1 ? "border-b-0" : ""}`,
+      className: `p-4 lg:p-10 border-b sm:border-b border-gray-200 dark:border-gray-800 ${index % 2 === 0 ? "sm:border-r" : ""} ${index >= totalFeatures - 2 ? "sm:border-b-0" : ""} ${index === totalFeatures - 1 && totalFeatures % 2 === 1 ? "border-b-0" : ""} transition-colors`,
       children: [
-        /* @__PURE__ */ jsx8("div", { className: "text-5xl font-bold text-primary-500 mb-4", children: String(index + 1).padStart(2, "0") }),
-        /* @__PURE__ */ jsx8("h3", { className: "text-xl font-bold mb-2", children: feature.title }),
-        /* @__PURE__ */ jsx8("p", { className: "text-gray-600", children: feature.description })
+        /* @__PURE__ */ jsx10("div", { className: "text-5xl font-bold text-primary-500 dark:text-primary-400 mb-4", children: String(index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx10("h3", { className: "text-xl font-bold mb-2 text-gray-900 dark:text-white", children: feature.title }),
+        /* @__PURE__ */ jsx10("p", { className: "text-gray-600 dark:text-gray-300", children: feature.description })
       ]
     }
   );
@@ -557,17 +796,17 @@ function HomeFeatures({ renderFeature } = {}) {
   if (features.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("section", { className: "border-t border-gray-200", children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-12", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "col-span-12 lg:col-span-4 p-4 lg:p-10 border-b lg:border-b-0 lg:border-r border-gray-200", children: [
-      /* @__PURE__ */ jsx8("div", { className: "text-sm font-mono uppercase tracking-widest text-gray-500 mb-4", children: "Features" }),
-      /* @__PURE__ */ jsxs5("h2", { className: "text-4xl lg:text-5xl font-bold tracking-tight", children: [
+  return /* @__PURE__ */ jsx10("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-12", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "col-span-12 lg:col-span-4 p-4 lg:p-10 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-800 transition-colors", children: [
+      /* @__PURE__ */ jsx10("div", { className: "text-sm font-mono uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-4", children: "Features" }),
+      /* @__PURE__ */ jsxs6("h2", { className: "text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 dark:text-white", children: [
         "Why ",
         title,
         "?"
       ] })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "col-span-12 lg:col-span-8 grid grid-cols-1 sm:grid-cols-2", children: features.map(
-      (feature, index) => renderFeature ? /* @__PURE__ */ jsx8("div", { children: renderFeature(feature, index, HomeFeatureItem) }, index) : /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10("div", { className: "col-span-12 lg:col-span-8 grid grid-cols-1 sm:grid-cols-2", children: features.map(
+      (feature, index) => renderFeature ? /* @__PURE__ */ jsx10("div", { children: renderFeature(feature, index, HomeFeatureItem) }, index) : /* @__PURE__ */ jsx10(
         HomeFeatureItem,
         {
           feature,
@@ -581,42 +820,44 @@ function HomeFeatures({ renderFeature } = {}) {
 }
 function HomeCTA() {
   const { ctaHref } = useHomePage();
-  return /* @__PURE__ */ jsx8("section", { className: "border-t border-gray-200", children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-12 items-center", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "col-span-12 lg:col-span-8 p-4 lg:p-10", children: [
-      /* @__PURE__ */ jsx8("h2", { className: "text-4xl lg:text-6xl font-bold tracking-tight mb-4", children: "Ready to start?" }),
-      /* @__PURE__ */ jsx8("p", { className: "text-xl text-gray-600 mb-8 max-w-2xl", children: "Get up and running in minutes. Check out our documentation to learn more." }),
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("section", { className: "border-t border-gray-200 dark:border-gray-800 transition-colors", children: /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-12 items-center", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "col-span-12 lg:col-span-8 p-4 lg:p-10", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "text-4xl lg:text-6xl font-bold tracking-tight mb-4 text-gray-900 dark:text-white", children: "Ready to start?" }),
+      /* @__PURE__ */ jsx10("p", { className: "text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl", children: "Get up and running in minutes. Check out our documentation to learn more." }),
+      /* @__PURE__ */ jsx10(
         Link3,
         {
           href: ctaHref,
-          className: "inline-flex items-center justify-center px-8 py-4 bg-primary-500 text-white font-bold text-lg hover:bg-black transition-colors border border-primary-500 hover:border-black",
+          className: "inline-flex items-center justify-center px-8 py-4 bg-primary-500 text-white font-bold text-lg hover:bg-gray-900 dark:hover:bg-white dark:hover:text-gray-900 transition-colors border border-primary-500 hover:border-gray-900 dark:hover:border-white",
           children: "Read the Docs"
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       Link3,
       {
         href: ctaHref,
-        className: "col-span-12 lg:col-span-4 h-full bg-primary-500 hidden lg:flex items-center justify-center p-4 lg:p-10 hover:bg-black transition-colors min-h-[200px]",
-        children: /* @__PURE__ */ jsx8("div", { className: "text-white text-8xl font-bold", children: "\u2192" })
+        className: "col-span-12 lg:col-span-4 h-full bg-primary-500 hidden lg:flex items-center justify-center p-4 lg:p-10 hover:bg-gray-900 dark:hover:bg-white transition-colors min-h-[200px] group",
+        children: /* @__PURE__ */ jsx10("div", { className: "text-white group-hover:text-white dark:group-hover:text-gray-900 text-8xl font-bold transition-colors", children: "\u2192" })
       }
     )
   ] }) });
 }
 function HomeFooter() {
-  const { title, logoUrl, footerLogoUrl, navLinks, githubUrl } = useHomePage();
-  return /* @__PURE__ */ jsx8("footer", { className: "border-t border-gray-200 py-8", children: /* @__PURE__ */ jsxs5("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
-    (footerLogoUrl || logoUrl) && /* @__PURE__ */ jsx8(Link3, { href: "/", children: /* @__PURE__ */ jsx8("img", { src: footerLogoUrl || logoUrl, alt: title, className: "h-6" }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex gap-8 text-sm text-gray-600", children: [
-      navLinks.map((link) => /* @__PURE__ */ jsx8(Link3, { href: link.href, className: "hover:text-black transition-colors", children: link.label }, link.href)),
-      githubUrl && /* @__PURE__ */ jsx8(
+  const { title, logoUrl, footerLogoUrl, footerLogoInvertedUrl, navLinks, githubUrl } = useHomePage();
+  const { resolvedTheme } = useTheme();
+  const currentLogoUrl = resolvedTheme === "dark" ? footerLogoInvertedUrl || footerLogoUrl || logoUrl : footerLogoUrl || logoUrl;
+  return /* @__PURE__ */ jsx10("footer", { className: "border-t border-gray-200 dark:border-gray-800 py-8 bg-white dark:bg-[#0f0f0f] transition-colors", children: /* @__PURE__ */ jsxs6("div", { className: "px-4 lg:px-10 flex flex-col md:flex-row justify-between items-center gap-6", children: [
+    currentLogoUrl && /* @__PURE__ */ jsx10(Link3, { href: "/", children: /* @__PURE__ */ jsx10("img", { src: currentLogoUrl, alt: title, className: "h-6" }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex gap-8 text-sm text-gray-600 dark:text-gray-300", children: [
+      navLinks.map((link) => /* @__PURE__ */ jsx10(Link3, { href: link.href, className: "hover:text-black dark:hover:text-white transition-colors", children: link.label }, link.href)),
+      githubUrl && /* @__PURE__ */ jsx10(
         "a",
         {
           href: githubUrl,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "hover:text-black transition-colors",
+          className: "hover:text-black dark:hover:text-white transition-colors",
           children: "GitHub"
         }
       )
@@ -624,22 +865,32 @@ function HomeFooter() {
   ] }) });
 }
 function HomeSpacer() {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
-      className: "grow",
+      className: "grow dark:hidden",
       style: { backgroundImage: "linear-gradient(rgb(229, 231, 235) 1px, transparent 1px)" }
     }
   );
 }
+function HomeSpacerDark() {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "grow hidden dark:block",
+      style: { backgroundImage: "linear-gradient(rgb(38, 38, 38) 1px, transparent 1px)" }
+    }
+  );
+}
 function DefaultHomeLayout() {
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx8(HomeHeader, {}),
-    /* @__PURE__ */ jsx8(HomeHero, {}),
-    /* @__PURE__ */ jsx8(HomeFeatures, {}),
-    /* @__PURE__ */ jsx8(HomeCTA, {}),
-    /* @__PURE__ */ jsx8(HomeSpacer, {}),
-    /* @__PURE__ */ jsx8(HomeFooter, {})
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(HomeHeader, {}),
+    /* @__PURE__ */ jsx10(HomeHero, {}),
+    /* @__PURE__ */ jsx10(HomeFeatures, {}),
+    /* @__PURE__ */ jsx10(HomeCTA, {}),
+    /* @__PURE__ */ jsx10(HomeSpacer, {}),
+    /* @__PURE__ */ jsx10(HomeSpacerDark, {}),
+    /* @__PURE__ */ jsx10(HomeFooter, {})
   ] });
 }
 function HomePage({
@@ -651,9 +902,9 @@ function HomePage({
     ...props,
     navLinks
   };
-  return /* @__PURE__ */ jsx8(HomePageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs5("div", { className: "min-h-screen bg-white flex flex-col", children: [
-    /* @__PURE__ */ jsx8(Head2, { title: props.title }),
-    children || /* @__PURE__ */ jsx8(DefaultHomeLayout, {})
+  return /* @__PURE__ */ jsx10(HomePageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs6("div", { className: "min-h-screen bg-white dark:bg-[#0f0f0f] flex flex-col transition-colors duration-200", children: [
+    /* @__PURE__ */ jsx10(Head2, { title: props.title }),
+    children || /* @__PURE__ */ jsx10(DefaultHomeLayout, {})
   ] }) });
 }
 HomePage.Header = HomeHeader;
@@ -666,7 +917,7 @@ HomePage.Footer = HomeFooter;
 // src/app.tsx
 import { createInertiaApp } from "@inertiajs/react";
 import { createRoot, hydrateRoot } from "react-dom/client";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function createDocsApp(config) {
   const { pages, title, components } = config;
   if (typeof window !== "undefined") {
@@ -683,7 +934,7 @@ function createDocsApp(config) {
       return page;
     },
     setup({ el, App, props }) {
-      const appElement = /* @__PURE__ */ jsx9(ComponentsProvider, { components, children: /* @__PURE__ */ jsx9(App, { ...props }) });
+      const appElement = /* @__PURE__ */ jsx11(ThemeProvider, { children: /* @__PURE__ */ jsx11(ComponentsProvider, { components, children: /* @__PURE__ */ jsx11(App, { ...props }) }) });
       if (el.hasChildNodes()) {
         hydrateRoot(el, appElement);
       } else {
@@ -707,9 +958,13 @@ export {
   InlineCode,
   Markdown,
   Sidebar,
+  ThemeProvider,
+  ThemeToggle,
   cn,
   configureHighlighter,
   createDocsApp,
-  getHighlighter
+  getHighlighter,
+  themeInitScript,
+  useTheme
 };
 //# sourceMappingURL=index.js.map