@windrun-huaiin/third-ui 3.2.0

package/dist/third-ui.css

@@ -0,0 +1,44 @@
+@import '@windrun-huaiin/base-ui/styles/base-ui.css';
+@import './fuma.css';
+@import './cta.css';
+
+/* Loading Animation Keyframes */
+@keyframes loading-dot-pulse {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+  25% { /* Peak of the pulse, more prominent */
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  50% { /* Start to fade and shrink */
+      transform: scale(0.8);
+      opacity: 0.7;
+  }
+  100% { /* Fully faded and shrunk back */
+    transform: scale(0.2);
+    opacity: 0;
+  }
+}
+
+/* NProgress progress bar style */
+#nprogress .bar {
+  background: #AC62FD !important; /* purple */
+  height: 1px !important;
+}
+
+/* Icon stroke colors for light/dark themes */
+:root {
+  --clerk-icon-stroke-color: #616161; /* Light theme */
+}
+
+.dark {
+  --clerk-icon-stroke-color: #616161; /* Dark theme */
+}
+
+/* English and numeric characters use Montserrat font, Chinese use STKaiti */
+body {
+  font-family: 'Montserrat', "STKaiti", "STKaiti", "Kaiti SC", "KaiTi", "楷体", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMvdGhpcmQtdWkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InRoaXJkLXVpLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgJ0B3aW5kcnVuLWh1YWlpbi9iYXNlLXVpL3N0eWxlcy9iYXNlLXVpLmNzcyc7XG5AaW1wb3J0ICcuL2Z1bWEuY3NzJztcbkBpbXBvcnQgJy4vY3RhLmNzcyc7XG5cbi8qIExvYWRpbmcgQW5pbWF0aW9uIEtleWZyYW1lcyAqL1xuQGtleWZyYW1lcyBsb2FkaW5nLWRvdC1wdWxzZSB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuMik7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAyNSUgeyAvKiBQZWFrIG9mIHRoZSBwdWxzZSwgbW9yZSBwcm9taW5lbnQgKi9cbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMik7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuICA1MCUgeyAvKiBTdGFydCB0byBmYWRlIGFuZCBzaHJpbmsgKi9cbiAgICAgIHRyYW5zZm9ybTogc2NhbGUoMC44KTtcbiAgICAgIG9wYWNpdHk6IDAuNztcbiAgfVxuICAxMDAlIHsgLyogRnVsbHkgZmFkZWQgYW5kIHNocnVuayBiYWNrICovXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgwLjIpO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cbn1cblxuLyogTlByb2dyZXNzIHByb2dyZXNzIGJhciBzdHlsZSAqL1xuI25wcm9ncmVzcyAuYmFyIHtcbiAgYmFja2dyb3VuZDogI0FDNjJGRCAhaW1wb3J0YW50OyAvKiBwdXJwbGUgKi9cbiAgaGVpZ2h0OiAxcHggIWltcG9ydGFudDtcbn1cblxuLyogSWNvbiBzdHJva2UgY29sb3JzIGZvciBsaWdodC9kYXJrIHRoZW1lcyAqL1xuOnJvb3Qge1xuICAtLWNsZXJrLWljb24tc3Ryb2tlLWNvbG9yOiAjNjE2MTYxOyAvKiBMaWdodCB0aGVtZSAqL1xufVxuXG4uZGFyayB7XG4gIC0tY2xlcmstaWNvbi1zdHJva2UtY29sb3I6ICM2MTYxNjE7IC8qIERhcmsgdGhlbWUgKi9cbn1cblxuLyogRW5nbGlzaCBhbmQgbnVtZXJpYyBjaGFyYWN0ZXJzIHVzZSBNb250c2VycmF0IGZvbnQsIENoaW5lc2UgdXNlIFNUS2FpdGkgKi9cbmJvZHkge1xuICBmb250LWZhbWlseTogJ01vbnRzZXJyYXQnLCBcIlNUS2FpdGlcIiwgXCJTVEthaXRpXCIsIFwiS2FpdGkgU0NcIiwgXCJLYWlUaVwiLCBcIualt+S9k1wiLCBcIlBpbmdGYW5nIFNDXCIsIFwiTWljcm9zb2Z0IFlhSGVpXCIsIEFyaWFsLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7XG59Il19 */

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@windrun-huaiin/third-ui",
+  "version": "3.2.0",
+  "description": "Third-party integrated UI components for windrun-huaiin projects",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./clerk": {
+      "types": "./dist/clerk/index.d.ts",
+      "import": "./dist/clerk/index.mjs",
+      "require": "./dist/clerk/index.js"
+    },
+    "./main": {
+      "types": "./dist/main/index.d.ts",
+      "import": "./dist/main/index.mjs",
+      "require": "./dist/main/index.js"
+    },
+    "./fuma": {
+      "types": "./dist/fuma/index.d.ts",
+      "import": "./dist/fuma/index.mjs",
+      "require": "./dist/fuma/index.js"
+    },
+    "./fuma/mdx": {
+      "types": "./dist/fuma/mdx/index.d.ts",
+      "import": "./dist/fuma/mdx/index.mjs",
+      "require": "./dist/fuma/mdx/index.js"
+    },
+    "./lib": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.mjs",
+      "require": "./dist/lib/index.js"
+    },
+    "./styles/third-ui.css": "./dist/third-ui.css",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "src",
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build:css": "postcss src/styles/third-ui.css -o dist/third-ui.css",
+    "build": "tsup && pnpm build:css",
+    "build:prod": "tsup && pnpm build:css",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@clerk/localizations": "^3.16.0",
+    "@clerk/types": "^4.59.0",
+    "@windrun-huaiin/base-ui": "workspace:*",
+    "@windrun-huaiin/lib": "workspace:*",
+    "fumadocs-core": "15.3.3",
+    "fumadocs-mdx": "11.6.3",
+    "fumadocs-typescript": "4.0.4",
+    "fumadocs-ui": "15.3.3",
+    "mermaid": "^11.6.0",
+    "react-medium-image-zoom": "^5.2.14",
+    "@clerk/nextjs": "^6.19.4",
+    "zod": "^3.22.4"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "next": "^15.3.2",
+    "next-intl": "^3.26.5",
+    "next-themes": "^0.4.6",
+    "tailwindcss": "^4.0.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^3.0.0",
+    "nprogress": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/mdx": "^2.0.13",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.3",
+    "tailwindcss": "^4.1.7",
+    "@types/node": "^22.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.8.3",
+    "@types/nprogress": "^0.2.3"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "react",
+    "nextjs",
+    "clerk",
+    "fumadocs",
+    "tailwindcss"
+  ],
+  "author": "windrun-huaiin",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/clerk/clerk-organization.tsx

@@ -0,0 +1,47 @@
+import { OrganizationSwitcher } from '@clerk/nextjs';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon'; 
+interface ClerkOrganizationProps {
+  className?: string;
+  locale: string;
+}
+
+export default function ClerkOrganization({
+  locale,
+  className = '',
+}: ClerkOrganizationProps) {
+  return (
+    <div className={` ms-3 me-2 flex items-center h-10 rounded-full border shadow-lg ${className}`}>
+      <div className="flex items-center gap-x-4 w-full min-w-40">
+        <OrganizationSwitcher
+          appearance={{
+            elements: {
+              organizationSwitcherTrigger:
+                "w-40 h-10 border !rounded-full bg-transparent flex items-center justify-between box-border",
+              organizationSwitcherTriggerIcon: "",
+              userButtonAvatarBox: "w-8 h-8 border rounded-full",
+            },
+          }}
+        >
+          <OrganizationSwitcher.OrganizationProfilePage
+            label="Homepage"
+            url="/"
+            labelIcon={<icons.D8 />}
+          />
+          <OrganizationSwitcher.OrganizationProfilePage 
+            labelIcon={<icons.ReceiptText />}
+            label="服务"
+            url={`/${locale}/legal/terms`}
+          >
+          </OrganizationSwitcher.OrganizationProfilePage>
+
+          <OrganizationSwitcher.OrganizationProfilePage
+            labelIcon={<icons.ShieldUser />}
+            label="隐私"
+            url={`/${locale}/legal/privacy`}
+          >
+          </OrganizationSwitcher.OrganizationProfilePage> 
+        </OrganizationSwitcher>
+      </div>
+    </div>
+  );
+} 

package/src/clerk/clerk-page-generator.tsx

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * MIT License
+ * Copyright (c) 2025 D8ger
+ * 
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use client';
+
+import { SignIn, SignUp, Waitlist } from '@clerk/nextjs';
+
+export function createSignInPage() {
+  return function SignInPage() {
+    return (
+      <div className="flex-1 flex justify-center mb-64">
+        <SignIn />
+      </div>
+    );
+  };
+}
+
+export function createSignUpPage() {
+  return function SignUpPage() {
+    return (
+      <div className="flex-1 flex justify-center mt-0 mb-32">
+        <SignUp />
+      </div>
+    );
+  };
+}
+
+export function createWaitlistPage() {
+  return function WaitlistPage() {
+    return (
+      <div className="flex-1 flex justify-center mt-10">
+        <Waitlist />
+      </div>
+    );
+  };
+} 

package/src/clerk/clerk-provider-client.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { clerkIntl } from '@third-ui/lib/clerk-intl';
+import { ClerkProvider } from '@clerk/nextjs';
+import React from 'react';
+
+interface ClerkProviderClientProps {
+  children: React.ReactNode;
+  locale: string;
+  signInUrl?: string;
+  signUpUrl?: string;
+  fallbackSignInUrl?: string;
+  fallbackSignUpUrl?: string;
+  waitlistUrl?: string;
+}
+
+export function ClerkProviderClient({
+  children,
+  locale,
+  signInUrl,
+  signUpUrl,
+  fallbackSignInUrl,
+  fallbackSignUpUrl,
+  waitlistUrl,
+}: ClerkProviderClientProps) {
+  const currentLocalization = clerkIntl[locale as keyof typeof clerkIntl];
+
+  // build the ClerkProvider props, only add when the parameter is not empty
+  const clerkProviderProps: Record<string, any> = {
+    localization: currentLocalization,
+  };
+
+  // 只有传入参数非空时才拼接 URL 并添加对应的属性
+  if (signInUrl) {
+    clerkProviderProps.signInUrl = `/${locale}${signInUrl}`;
+  }
+  if (signUpUrl) {
+    clerkProviderProps.signUpUrl = `/${locale}${signUpUrl}`;
+  }
+  if (fallbackSignInUrl) {
+    clerkProviderProps.signInFallbackRedirectUrl = `/${locale}${fallbackSignInUrl}`;
+  }
+  if (fallbackSignUpUrl) {
+    clerkProviderProps.signUpFallbackRedirectUrl = `/${locale}${fallbackSignUpUrl}`;
+  }
+  if (waitlistUrl) {
+    clerkProviderProps.waitlistUrl = `/${locale}${waitlistUrl}`;
+  }
+
+  // console.log('ClerkProviderClient props:', clerkProviderProps);
+
+  return (
+    <ClerkProvider {...clerkProviderProps}>
+      {children}
+    </ClerkProvider>
+  );
+} 

package/src/clerk/clerk-user.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { ClerkLoaded, ClerkLoading, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
+import { useTranslations } from 'next-intl';
+import { type JSX } from 'react';
+
+interface ClerkUserProps {
+  locale: string;
+  clerkAuthInModal?: boolean;
+}
+
+export function ClerkUser({ 
+  locale, 
+  clerkAuthInModal = false 
+}: ClerkUserProps): JSX.Element {
+  const t = useTranslations('clerk');
+  const t2 = useTranslations('footer');
+  return (
+    <div className="ms-1.5 flex items-center gap-2 h-10 me-3">
+      <ClerkLoading>
+          <div className="w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm"></div>
+      </ClerkLoading>
+      <ClerkLoaded>
+        <SignedOut>
+          <SignInButton mode={clerkAuthInModal ? 'modal' : 'redirect'}>
+            <button className="w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm">
+              {t('signIn')}
+            </button>
+          </SignInButton>
+        </SignedOut>
+        <SignedIn>
+          <UserButton
+            appearance={{
+              elements: {
+                userButtonAvatarBox: "w-8 h-8 border",
+              }
+            }}
+          >
+            <UserButton.MenuItems>
+              <UserButton.Action label="manageAccount" />
+              {<UserButton.Link
+                labelIcon={<icons.ReceiptText className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
+                label={t2('terms')}
+                href={`/${locale}/legal/terms`}>
+              </UserButton.Link>}
+              {<UserButton.Link
+                labelIcon={<icons.ShieldUser className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
+                label={t2('privacy')}
+                href={`/${locale}/legal/privacy`}>
+              </UserButton.Link>}
+              <UserButton.Action label="signOut" />
+            </UserButton.MenuItems>
+          </UserButton>
+        </SignedIn>
+      </ClerkLoaded>
+    </div>
+  );
+}

package/src/clerk/index.ts

@@ -0,0 +1,5 @@
+// Clerk related components
+export * from './clerk-organization';
+export * from './clerk-provider-client';
+export * from './clerk-user';
+export * from './clerk-page-generator'; 

package/src/fuma/fuma-banner-suit.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { Banner } from 'fumadocs-ui/components/banner';
+import { useTranslations } from 'next-intl';
+
+export function FumaBannerSuit({ showText }: { showText: boolean }) {
+  const t = useTranslations('home');
+  return (
+    showText ?
+      (<Banner variant="rainbow" changeLayout={true}>
+        <p className="text-xl">{t('banner')}</p>
+      </Banner>)
+      : (<Banner variant="normal" changeLayout={true} className="bg-white dark:bg-[rgb(10,10,10)]"/>)
+  );
+}
+

package/src/fuma/fuma-github-info.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+
+interface FumaGithubInfoProps {
+  owner: string;
+  repo: string;
+  token?: string;
+  className?: string;
+}
+
+interface GitHubRepoData {
+  stargazers_count: number;
+  forks_count: number;
+}
+
+// Loading state component
+function GitHubInfoSkeleton({ owner, repo, className }: Pick<FumaGithubInfoProps, 'owner' | 'repo' | 'className'>) {
+  return (
+    <div className={`flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 lg:flex-row lg:items-center animate-pulse ${className}`}>
+      <div className="flex items-center gap-2">
+        <div className="size-3.5 bg-fd-muted rounded"></div>
+        <div className="h-4 bg-fd-muted rounded w-20"></div>
+      </div>
+      <div className="h-3 bg-fd-muted rounded w-8"></div>
+    </div>
+  );
+}
+
+// Error state component - graceful fallback
+function GitHubInfoFallback({ owner, repo, className }: Pick<FumaGithubInfoProps, 'owner' | 'repo' | 'className'>) {
+  return (
+    <a
+      href={`https://github.com/${owner}/${repo}`}
+      rel="noreferrer noopener"
+      target="_blank"
+      className={`flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent ${className}`}
+    >
+      <p className="flex items-center gap-2 truncate">
+        <svg fill="currentColor" viewBox="0 0 24 24" className="size-3.5">
+          <title>GitHub</title>
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+        {owner}/{repo}
+      </p>
+      <p className="flex text-xs items-center gap-1 text-fd-muted-foreground">
+        <icons.ExternalLink className="size-3" />
+        GitHub
+      </p>
+    </a>
+  );
+}
+
+// Success state component
+function GitHubInfoSuccess({ 
+  owner, 
+  repo, 
+  stars, 
+  className 
+}: Pick<FumaGithubInfoProps, 'owner' | 'repo' | 'className'> & { stars: number }) {
+  const humanizedStars = humanizeNumber(stars);
+
+  return (
+    <a
+      href={`https://github.com/${owner}/${repo}`}
+      rel="noreferrer noopener"
+      target="_blank"
+      className={`flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent ${className}`}
+    >
+      <p className="flex items-center gap-2 truncate">
+        <svg fill="currentColor" viewBox="0 0 24 24" className="size-3.5">
+          <title>GitHub</title>
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+        {owner}/{repo}
+      </p>
+      <p className="flex text-xs items-center gap-1 text-fd-muted-foreground">
+        <icons.Star className="size-3" />
+        {humanizedStars}
+      </p>
+    </a>
+  );
+}
+
+/**
+ * Humanize number display
+ */
+function humanizeNumber(num: number): string {
+  if (num < 1000) {
+    return num.toString();
+  }
+
+  if (num < 100000) {
+    const value = (num / 1000).toFixed(1);
+    const formattedValue = value.endsWith('.0') ? value.slice(0, -2) : value;
+    return `${formattedValue}K`;
+  }
+
+  if (num < 1000000) {
+    return `${Math.floor(num / 1000)}K`;
+  }
+
+  return num.toString();
+}
+
+/**
+ * GitHub repository information component with graceful fallback
+ * 
+ * Features:
+ * - 🛡️ Client-side rendering, avoiding server-side network issues
+ * - ⏱️ 5 second timeout control
+ * - 🎯 Graceful fallback: display basic link when network fails
+ * - 🎨 Three states: loading, success, error
+ * - 💯 Not affected by network issues causing page crashes
+ */
+export function FumaGithubInfo({ owner, repo, token, className }: FumaGithubInfoProps) {
+  const [data, setData] = useState<GitHubRepoData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRepoData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Add timeout control
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+        const headers = new Headers({
+          'Accept': 'application/vnd.github.v3+json',
+        });
+
+        if (token) {
+          headers.set('Authorization', `Bearer ${token}`);
+        }
+
+        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
+          signal: controller.signal,
+          headers,
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+          throw new Error(`GitHub API response error: ${response.status}`);
+        }
+
+        const repoData = await response.json();
+        setData({
+          stargazers_count: repoData.stargazers_count,
+          forks_count: repoData.forks_count,
+        });
+      } catch (err) {
+        console.warn('GitHub API call failed:', err);
+        if (err instanceof Error) {
+          if (err.name === 'AbortError') {
+            setError('Request timeout');
+          } else {
+            setError('Failed to get repository information');
+          }
+        } else {
+          setError('Unknown error');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRepoData();
+  }, [owner, repo, token]);
+
+  // Loading state
+  if (loading) {
+    return <GitHubInfoSkeleton owner={owner} repo={repo} className={className} />;
+  }
+
+  // Error state - graceful fallback
+  if (error || !data) {
+    return <GitHubInfoFallback owner={owner} repo={repo} className={className} />;
+  }
+
+  // Success state
+  return (
+    <GitHubInfoSuccess 
+      owner={owner} 
+      repo={repo} 
+      stars={data.stargazers_count} 
+      className={className} 
+    />
+  );
+} 

package/src/fuma/fuma-page-genarator.tsx

@@ -0,0 +1,94 @@
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
+import { NotFoundPage } from '@base-ui/components/404-page';
+import { TocFooter } from '@third-ui/fuma/mdx/toc';
+
+interface FumaPageParams {
+  /* 
+   * The source of the mdx content
+   */
+  mdxContentSource: any;
+  /* 
+   * The  mdx components handler, refer to fumadocs 
+   */
+  getMDXComponents: () => any;
+  /* 
+   * The source directory of the mdx content, used to generate the edit path
+   */
+  mdxSourceDir: string;
+  /* 
+   * The github base url, used to generate the edit path, if not provided, the edit path will not be shown
+   */
+  githubBaseUrl?: string;
+  /* 
+   * Whether to show the copy button, default is true
+   */
+  showCopy?: boolean;
+}
+
+export function createFumaPage({
+  mdxContentSource,
+  getMDXComponents,
+  mdxSourceDir,
+  githubBaseUrl,
+  showCopy = true,
+}: FumaPageParams) {
+  const Page = async function Page({ params }: { params: Promise<{ locale: string; slug?: string[] }> }) {
+    const { slug, locale } = await params;
+    const page = mdxContentSource.getPage(slug, locale);
+    if (!page) {
+      return <NotFoundPage />;
+    }
+
+    const path = githubBaseUrl ? `${mdxSourceDir}/${page.file.path}` : undefined;
+    const tocFooterElement = (
+      <TocFooter
+        lastModified={page.data.date}
+        showCopy={showCopy}
+        editPath={path}
+        githubBaseUrl={githubBaseUrl}
+      />
+    );
+
+    const MDX = page.data.body;
+    return (
+      <DocsPage
+        tableOfContent={{ style: 'clerk', single: false, footer: tocFooterElement }}
+        tableOfContentPopover={{ footer: tocFooterElement }}
+        toc={page.data.toc}
+        full={page.data.full}
+        article={{ className: 'max-sm:pb-16' }}
+      >
+        <DocsTitle>{page.data.title}</DocsTitle>
+        <DocsDescription className="mb-2">{page.data.description}</DocsDescription>
+        <DocsBody className="text-fd-foreground/80">
+          <MDX components={getMDXComponents()} />
+        </DocsBody>
+      </DocsPage>
+    );
+  };
+
+  function generateStaticParams() {
+    return mdxContentSource.generateParams('slug', 'locale');
+  }
+
+  async function generateMetadata(props: { params: Promise<{ slug?: string[]; locale?: string }> }) {
+    const params = await props.params;
+    const page = mdxContentSource.getPage(params.slug, params.locale);
+    if (!page) {
+      return {
+        title: '404 - Page Not Found',
+        description: 'This page could not be found.',
+      };
+    }
+    return {
+      title: page.data.title,
+      description: page.data.description,
+    };
+  }
+
+  return {
+    Page,
+    generateStaticParams,
+    generateMetadata,
+  };
+} 

package/src/fuma/index.ts

@@ -0,0 +1,4 @@
+// Fumadocs related components
+export * from './fuma-banner-suit';
+export * from './fuma-page-genarator';
+export * from './fuma-github-info';