@windrun-huaiin/third-ui 25.0.0 → 27.0.0

package/src/fuma/base/nav-config.ts

@@ -0,0 +1,81 @@
+import type {
+  CreateSiteNavGroupOptions,
+  CreateSiteNavItemContext,
+  SiteMenuGroupConfig,
+  SiteMenuLeafConfig,
+  SiteNavItemConfig,
+  SiteNavLinkItemConfig,
+} from './site-layout';
+
+export interface LocalizedNavContextOptions {
+  locale: string;
+  localePrefixAsNeeded?: boolean;
+  defaultLocale?: string;
+  localizeHref: (locale: string, path: string, localePrefixAsNeeded: boolean, defaultLocale: string) => string;
+}
+
+export function createLocalizedNavContext(
+  options: LocalizedNavContextOptions,
+): CreateSiteNavItemContext {
+  const {
+    locale,
+    localePrefixAsNeeded = true,
+    defaultLocale = 'en',
+    localizeHref,
+  } = options;
+
+  return {
+    resolveUrl(path: string) {
+      return localizeHref(locale, path, localePrefixAsNeeded, defaultLocale);
+    },
+  };
+}
+
+export function createLocalizedNavLink(
+  item: SiteMenuLeafConfig,
+  context: CreateSiteNavItemContext,
+): SiteNavItemConfig {
+  return {
+    type: 'main',
+    text: item.text,
+    ...(item.description ? { description: item.description } : {}),
+    url: context.resolveUrl(item.path),
+    ...(item.external ? { external: item.external } : {}),
+    ...(item.prefetch !== undefined ? { prefetch: item.prefetch } : {}),
+    ...(item.icon || item.className
+      ? {
+          menu: {
+            ...(item.icon ? { banner: item.icon } : {}),
+            ...(item.className ? { className: item.className } : {}),
+          },
+        }
+      : {}),
+  };
+}
+
+export function createLocalizedNavGroup(
+  item: SiteMenuGroupConfig,
+  context: CreateSiteNavItemContext,
+  options?: CreateSiteNavGroupOptions,
+): SiteNavItemConfig {
+  return {
+    type: 'menu',
+    text: item.text,
+    ...(item.path ? { url: context.resolveUrl(item.path) } : {}),
+    ...(item.prefetch !== undefined ? { prefetch: item.prefetch } : {}),
+    items: [
+      ...(item.landing
+        ? [
+            {
+              ...createLocalizedNavLink(item.landing, context),
+              menu: {
+                ...(options?.featuredBanner ? { banner: options.featuredBanner } : {}),
+                className: options?.featuredClassName ?? 'md:row-span-2',
+              },
+            } as SiteNavLinkItemConfig,
+          ]
+        : []),
+      ...item.items.map((child) => createLocalizedNavLink(child, context)),
+    ],
+  };
+}

package/src/fuma/base/site-layout.tsx

@@ -25,6 +25,7 @@ export interface SiteNavLinkItemConfig extends SiteNavSharedFields {
   text: ReactNode;
   url: string;
   external?: boolean;
+  prefetch?: boolean;
   icon?: ReactNode;
   description?: ReactNode;
   menu?: SiteMenuConfig;
@@ -37,6 +38,7 @@ export interface SiteNavMenuItemConfig extends SiteNavSharedFields {
   text: ReactNode;
   url?: string;
   external?: boolean;
+  prefetch?: boolean;
   icon?: ReactNode;
   description?: ReactNode;
   items: SiteNavItemConfig[];
@@ -92,11 +94,13 @@ export interface SiteMenuLeafConfig {
   icon?: ReactNode;
   className?: string;
   external?: boolean;
+  prefetch?: boolean;
 }
 
 export interface SiteMenuGroupConfig {
   text: ReactNode;
   path?: string;
+  prefetch?: boolean;
   landing?: SiteMenuLeafConfig;
   items: SiteMenuLeafConfig[];
 }
@@ -147,6 +151,7 @@ export function createSiteNavLink(
     ...(item.description ? { description: item.description } : {}),
     url: context.resolveUrl(item.path),
     ...(item.external ? { external: item.external } : {}),
+    ...(item.prefetch !== undefined ? { prefetch: item.prefetch } : {}),
     ...(item.icon || item.className
       ? {
           menu: {
@@ -167,6 +172,7 @@ export function createSiteNavGroup(
     type: 'menu',
     text: item.text,
     ...(item.path ? { url: context.resolveUrl(item.path) } : {}),
+    ...(item.prefetch !== undefined ? { prefetch: item.prefetch } : {}),
     items: [
       ...(item.landing
         ? [

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

@@ -1,5 +1,5 @@
 import { getTranslations } from 'next-intl/server';
-import { Banner } from '@third-ui/fuma/mdx/banner';
+import { Banner } from './mdx/banner';
 
 export async function FumaBannerSuit({
   locale,

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

@@ -1,9 +1,9 @@
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
 import { ReactNode, ReactElement, cloneElement, type CSSProperties } from 'react';
-import { TocFooterWrapper } from '@third-ui/fuma/mdx/toc-footer-wrapper';
-import type { LLMCopyButtonProps, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
+import { TocFooterWrapper } from './mdx/toc-footer-wrapper';
+import type { LLMCopyButtonProps, LLMCopyButton } from './mdx/toc-base';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
-import { PortableClerkTOC, PortableClerkTOCTitle } from '@third-ui/fuma/mdx/toc-clerk-portable';
+import { PortableClerkTOC, PortableClerkTOCTitle } from './mdx/toc-clerk-portable';
 import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
 export type FumaPageTocRenderMode =
@@ -99,6 +99,14 @@ export function createFumaPage({
   localePrefixAsNeeded = true,
   defaultLocale = 'en',
 }: FumaPageParams) {
+  const isLocalMdDebugEnabled = process.env.LOCAL_MD_DEBUG?.toLowerCase() === 'true';
+  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
+  const durationMs = (startedAt: number) => Number((now() - startedAt).toFixed(1));
+  const logFumaPageDebug = (message: string, details?: Record<string, unknown>) => {
+    if (!isLocalMdDebugEnabled) return;
+    console.log(`[fuma-page] ${message}`, details ?? {});
+  };
+
   const getSource = async () => {
     if (typeof mdxContentSource === 'function') {
       return await mdxContentSource();
@@ -108,11 +116,28 @@ export function createFumaPage({
   };
 
   const Page = async function Page({ params }: { params: Promise<{ locale: string; slug?: string[] }> }) {
+    const pageStartedAt = now();
     const { slug, locale } = await params;
+    const sourceStartedAt = now();
     const source = await getSource();
+    logFumaPageDebug('page:source-ready', {
+      sourceKey,
+      locale,
+      slug,
+      durationMs: durationMs(sourceStartedAt),
+    });
+
+    const getPageStartedAt = now();
     const page = source.getPage(slug, locale);
+    logFumaPageDebug('page:get-page', {
+      sourceKey,
+      locale,
+      slug,
+      found: Boolean(page),
+      durationMs: durationMs(getPageStartedAt),
+      totalElapsedMs: durationMs(pageStartedAt),
+    });
     if (!page) {
-      console.log('[FumaPage] missing page', { slug, locale, available: source.pageTree?.[locale]?.children?.map((c: any) => c.url) });
       return (
         <DocsPage
           full
@@ -143,7 +168,19 @@ export function createFumaPage({
 
     const content =
       typeof page.data.load === 'function'
-        ? await page.data.load(getMDXComponents())
+        ? await (async () => {
+            const loadStartedAt = now();
+            const result = await page.data.load(getMDXComponents());
+            logFumaPageDebug('page:load', {
+              sourceKey,
+              locale,
+              slug,
+              pagePath: page.path,
+              durationMs: durationMs(loadStartedAt),
+              totalElapsedMs: durationMs(pageStartedAt),
+            });
+            return result;
+          })()
         : {
             body: await page.data.body({ components: getMDXComponents() }),
             toc: page.data.toc ?? [],
@@ -174,14 +211,30 @@ export function createFumaPage({
     );
   };
 
-  function generateStaticParams() {
-    return getSource().then((source) => source.generateParams('slug', 'locale'));
+  async function generateStaticParams() {
+    const startedAt = now();
+    const source = await getSource();
+    const params = source.generateParams('slug', 'locale');
+    logFumaPageDebug('generateStaticParams', {
+      sourceKey,
+      count: Array.isArray(params) ? params.length : undefined,
+      durationMs: durationMs(startedAt),
+    });
+    return params;
   }
 
   async function generateMetadata(props: { params: Promise<{ slug?: string[]; locale?: string }> }) {
+    const startedAt = now();
     const { slug, locale } = await props.params;
     const source = await getSource();
     const page = source.getPage(slug, locale);
+    logFumaPageDebug('generateMetadata:get-page', {
+      sourceKey,
+      locale,
+      slug,
+      found: Boolean(page),
+      durationMs: durationMs(startedAt),
+    });
     if (!page) {
       return {
         title: '404 - Page Not Found',

package/src/fuma/llm-copy-handler.ts

@@ -21,17 +21,10 @@ export type LLMCopyHandlerOptions = {
  */
 export async function LLMCopyHandler(options: LLMCopyHandlerOptions): Promise<{ text?: string; error?: string; status: number }> {
   const { sourceDir, dataSource, requestedPath, locale } = options;
-
-  // log received parameters
-  console.log(`[LLMCopy] Received, locale=${locale}, path=${requestedPath}`);
-
   const slug = requestedPath?.split('/') || [];
 
   try {
-    console.log('[LLMCopy] Attempting to call getPage()');
     const page = dataSource.getPage(slug, locale);
-    // console.log(page);
-    console.log('[LLMCopy] Call to getPage() completed.');
 
     if (!page) {
       console.error(`[LLMCopy] Page or page data not found for locale=${locale}, path=${requestedPath}`);
@@ -46,19 +39,15 @@ export async function LLMCopyHandler(options: LLMCopyHandlerOptions): Promise<{
     const description = page.data?.description ?? page.description;
     const relativeMdxFilePath = page.path;
     const absoluteFilePath = nodePath.join(process.cwd(), sourceDir, relativeMdxFilePath);
-    console.log(`[LLMCopy] Attempting to read MDX content from: ${absoluteFilePath}`);
 
     let mdxContent: string;
     try {
       mdxContent = fs.readFileSync(absoluteFilePath, 'utf-8');
-      console.log(`[LLMCopy] Successfully read MDX content from: ${absoluteFilePath}`);
     } catch (readError: any) {
       console.error(`[LLMCopy] Failed to read file at: ${absoluteFilePath}. Error: ${readError.message}`);
       console.error('[LLMCopy] Read Error object details:', JSON.stringify(readError, Object.getOwnPropertyNames(readError), 2));
       // directory traversal debug logs
       try {
-        console.log(`[LLMCopy] Current CWD: ${process.cwd()}`);
-        console.log(`[LLMCopy] CWD contents: ${fs.readdirSync(process.cwd()).join(', ')}`);
         const srcPath = nodePath.join(process.cwd(), 'src');
         if (fs.existsSync(srcPath)) {
           console.log(`[LLMCopy] src dir contents: ${fs.readdirSync(srcPath).join(', ')}`);

package/src/fuma/mdx/index.ts

@@ -2,7 +2,6 @@
 
 export * from './trophy-card';
 export * from './zia-card';
-export * from './gradient-button';
 export * from './toc-base';
 export * from './fuma-github-info';
 export * from './zia-file';

package/src/fuma/mdx/suno-embed.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { themeBgColor, themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 import { SnakeLoadingFrame } from '../../main/snake-loading-frame';
-import { GradientButton } from './gradient-button';
+import { GradientButton } from '../../main/buttons';
 
 interface SunoEmbedProps {
   src: string;

package/src/fuma/mdx/toc-base.tsx

@@ -32,7 +32,6 @@ export function LLMCopyButton({ llmApiUrl, sourceKey }: LLMCopyButtonProps = {})
     if (sourceKey) {
       apiUrl += `&sourceKey=${encodeURIComponent(sourceKey)}`;
     }
-    console.log('Fetching LLM content from:', apiUrl);
 
     let content: string;
     try {

package/src/fuma/mdx/toc-footer-wrapper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { EditOnGitHub, LastUpdatedDate } from '@third-ui/fuma/mdx/toc-base';
+import { EditOnGitHub, LastUpdatedDate } from './toc-base';
 import React from 'react';
 
 interface TocFooterProps {
@@ -19,4 +19,4 @@ export function TocFooterWrapper({ lastModified, editPath, githubBaseUrl, copyBu
       {showEdit && <EditOnGitHub url={`${githubBaseUrl}${editPath}`} />}
     </div>
   );
-} 
+} 

package/src/fuma/server/features/widgets.tsx

@@ -2,7 +2,7 @@ import type { MDXComponents } from 'mdx/types';
 import { lazy } from 'react';
 import { TrophyCard } from '../../mdx/trophy-card';
 import { ZiaCard } from '../../mdx/zia-card';
-import { GradientButton } from '../../mdx/gradient-button';
+import { GradientButton } from '../../../main/buttons';
 import { ZiaFile, ZiaFolder } from '../../mdx/zia-file';
 import { SunoEmbed } from '../../mdx/suno-embed';
 

package/src/lib/server.ts

@@ -3,4 +3,4 @@
 export * from './clerk-intl';
 export * from './fuma-schema-check-util';
 export * from './seo-util';
-export * from './t-intl';
+export * from './t-intl';

package/src/{fuma/mdx → main/buttons}/gradient-button.tsx

@@ -23,12 +23,9 @@ export interface GradientButtonProps {
   disabled?: boolean;
   className?: string;
   iconClassName?: string;
-  // for Link
   href?: string;
   openInNewTab?: boolean;
   preserveReferrer?: boolean;
-  
-  // for click
   onClick?: () => void | Promise<void>;
   loadingText?: React.ReactNode;
   preventDoubleClick?: boolean;
@@ -52,7 +49,7 @@ export function GradientButton({
   variant = 'default',
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
-  const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
+  const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...';
 
   const defaultIconClass = "h-4 w-4";
   const finalIconClass = cn(
@@ -60,14 +57,13 @@ export function GradientButton({
     iconClassName || defaultIconClass
   );
 
-  // set justify class according to alignment
   const getAlignmentClass = () => {
     switch (align) {
       case 'center':
         return 'justify-center';
       case 'right':
         return 'justify-end';
-      default: // 'left'
+      default:
         return 'justify-start';
     }
   };
@@ -80,11 +76,11 @@ export function GradientButton({
 
     if (onClick) {
       e.preventDefault();
-      
+
       if (preventDoubleClick) {
         setIsLoading(true);
       }
-      
+
       try {
         await onClick();
       } catch (error) {
@@ -98,10 +94,7 @@ export function GradientButton({
   };
 
   const isDisabled = disabled || isLoading;
-
   const displayTitle = isLoading ? actualLoadingText : title;
-
-  // icon
   const iconProvided = icon !== undefined;
 
   const iconNode = (() => {
@@ -147,8 +140,6 @@ export function GradientButton({
       ? 'justify-center'
       : 'justify-start';
 
-  // Base styles extracted from Button component + size="lg" (h-11 px-8)
-  // Removed [&_svg] constraints
   const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
   const variantClassName = variant === 'soft'
     ? cn(
@@ -163,11 +154,11 @@ export function GradientButton({
           themeIconColor,
           'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800'
         )
-    : cn(
-        themeButtonGradientClass,
-        themeButtonGradientHoverClass,
-        'text-white shadow-lg hover:shadow-xl'
-      );
+      : cn(
+          themeButtonGradientClass,
+          themeButtonGradientHoverClass,
+          'text-white shadow-lg hover:shadow-xl'
+        );
 
   const buttonClassName = cn(
     baseButtonStyles,
@@ -181,7 +172,6 @@ export function GradientButton({
   return (
     <div className={`flex flex-row gap-3 ${getAlignmentClass()}`}>
       {onClick ? (
-        // for click
         <button
           type="button"
           className={buttonClassName}
@@ -191,7 +181,6 @@ export function GradientButton({
           {buttonContent}
         </button>
       ) : (
-        // for Link
         <Link
           href={href || "#"}
           className={cn(buttonClassName, "no-underline hover:no-underline")}
@@ -204,4 +193,4 @@ export function GradientButton({
       )}
     </div>
   );
-} 
+}

package/src/main/buttons/index.ts

@@ -0,0 +1,5 @@
+'use client';
+
+export * from './gradient-button';
+export * from './x-button';
+export * from './x-toggle-button';

package/src/main/{x-button.tsx → buttons/x-button.tsx}

@@ -7,7 +7,6 @@ import { cn } from '@windrun-huaiin/lib/utils'
 
 type XButtonVariant = 'default' | 'soft' | 'subtle'
 
-// base button config
 interface BaseButtonConfig {
   icon: ReactNode
   text: string
@@ -15,7 +14,6 @@ interface BaseButtonConfig {
   disabled?: boolean
 }
 
-// menu item config
 interface MenuItemConfig extends BaseButtonConfig {
   tag?: {
     text: string
@@ -24,7 +22,6 @@ interface MenuItemConfig extends BaseButtonConfig {
   splitTopBorder?: boolean
 }
 
-// single button config
 interface SingleButtonProps {
   type: 'single'
   button: BaseButtonConfig
@@ -35,7 +32,6 @@ interface SingleButtonProps {
   variant?: XButtonVariant
 }
 
-// split button config
 interface SplitButtonProps {
   type: 'split'
   mainButton: BaseButtonConfig
@@ -77,7 +73,6 @@ export function XButton(props: xButtonProps) {
     return icon;
   };
 
-  // click outside to close menu
   useEffect(() => {
     if (props.type === 'split') {
       const handleClickOutside = (event: MouseEvent) => {
@@ -96,7 +91,6 @@ export function XButton(props: xButtonProps) {
     }
   }, [menuOpen, props.type])
 
-  // handle button click
   const handleButtonClick = async (onClick: () => void | Promise<void>) => {
     if (isLoading) return
 
@@ -110,7 +104,6 @@ export function XButton(props: xButtonProps) {
     }
   }
 
-  // base style class
   const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors"
   const singleButtonVariantClass = variant === 'soft'
     ? cn(
@@ -125,7 +118,7 @@ export function XButton(props: xButtonProps) {
           themeIconColor,
           "border border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800"
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
   const splitMainButtonVariantClass = variant === 'soft'
     ? cn(
         "bg-transparent hover:bg-black/5 dark:hover:bg-white/5",
@@ -136,7 +129,7 @@ export function XButton(props: xButtonProps) {
           "bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800",
           themeIconColor
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700"
   const splitDropdownVariantClass = variant === 'soft'
     ? cn(
         "bg-transparent hover:bg-black/5 dark:hover:bg-white/5 sm:border-l",
@@ -149,13 +142,12 @@ export function XButton(props: xButtonProps) {
           themeIconColor,
           "border-neutral-200 dark:border-neutral-800"
         )
-    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
   const disabledClass = "opacity-60 cursor-not-allowed"
 
   if (props.type === 'single') {
     const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props
     const isDisabled = button.disabled || isLoading
-    // loadingText: props.loadingText > button.text > 'Loading...'
     const actualLoadingText = loadingText || button.text?.trim() || 'Loading...'
 
     return (
@@ -188,36 +180,28 @@ export function XButton(props: xButtonProps) {
     )
   }
 
-  // Split button
   const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
   const isMainDisabled = mainButton.disabled || isLoading
-  // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
   const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
 
   return (
     <div className={cn(
       "relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0",
       menuOpen && "z-90",
-      variant === 'soft'
-        ? cn(themeBgColor, themeBorderColor, "border")
-        : variant === 'subtle'
-          ? cn(themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
-          : "bg-neutral-200 dark:bg-neutral-800",
       className
     )}>
-      {/* left main button */}
       <button
         onClick={() => handleButtonClick(mainButton.onClick)}
         disabled={isMainDisabled}
         className={cn(
-          "min-w-0 flex-1",
+          "flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full",
           baseButtonClass,
           splitMainButtonVariantClass,
-          "rounded-l-full rounded-r-none",
           isMainDisabled && disabledClass,
           mainButtonClassName
         )}
         onMouseDown={e => { if (e.button === 2) e.preventDefault() }}
+        title={mainButton.text}
       >
         {isLoading ? (
           <>
@@ -227,52 +211,54 @@ export function XButton(props: xButtonProps) {
         ) : (
           <>
             {renderIcon(mainButton.icon)}
-            <span className="min-w-0 truncate">{mainButton.text}</span>
+            <span>{mainButton.text}</span>
           </>
         )}
       </button>
 
-      {/* right dropdown button */}
       <button
         type="button"
+        onClick={() => setMenuOpen(!menuOpen)}
+        disabled={isLoading}
         className={cn(
-          "flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10",
+          "w-12 rounded-r-full",
+          baseButtonClass,
           splitDropdownVariantClass,
+          isLoading && disabledClass,
           dropdownButtonClassName
         )}
-        onClick={e => { e.stopPropagation(); setMenuOpen(v => !v) }}
-        aria-label="More actions"
-        aria-expanded={menuOpen}
+        aria-label="Open menu"
       >
-        <ChevronDownIcon className={chevronIconClass} />
+        <ChevronDownIcon className={cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform")} />
       </button>
 
-      {/* dropdown menu */}
       {menuOpen && (
         <div
           ref={menuRef}
-          className={`absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-100 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`}
+          className={cn(
+            "absolute top-full right-0 mt-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-50 overflow-hidden",
+            menuWidth
+          )}
         >
           {menuItems.map((item, index) => (
             <button
               key={index}
+              type="button"
               onClick={() => {
-                handleButtonClick(item.onClick)
                 setMenuOpen(false)
+                handleButtonClick(item.onClick)
               }}
-              disabled={item.disabled}
-              className={`flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`}
-              style={item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined}
+              disabled={item.disabled || isLoading}
+              className={cn(
+                "w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors",
+                item.disabled && disabledClass,
+                item.splitTopBorder && "border-t border-neutral-200 dark:border-neutral-700"
+              )}
             >
-              <span className="flex items-center">
-                {item.icon}
-                <span>{item.text}</span>
-              </span>
+              {renderIcon(item.icon)}
+              <span className="flex-1">{item.text}</span>
               {item.tag && (
-                <span
-                  className="absolute right-3 top-1 text-[10px] font-semibold"
-                  style={{ color: item.tag.color || '#A855F7', pointerEvents: 'none' }}
-                >
+                <span className={cn("px-1.5 py-0.5 text-xs rounded", item.tag.color || "bg-blue-100 text-blue-800")}>
                   {item.tag.text}
                 </span>
               )}

package/src/main/credit/credit-overview-client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useClerk } from '@clerk/nextjs';
-import { GradientButton } from '@third-ui/fuma/mdx/gradient-button';
+import { GradientButton } from '../buttons';
 import {
   BellIcon,
   ChevronDownIcon,