@windrun-huaiin/third-ui 5.9.5 → 5.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.9.5",
+  "version": "5.9.7",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -53,7 +53,7 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/base-ui": "^5.3.3"
+    "@windrun-huaiin/base-ui": "^5.3.4"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/fuma/mdx/gradient-button.tsx

@@ -11,15 +11,12 @@ export interface GradientButtonProps {
   align?: 'left' | 'center' | 'right';
   disabled?: boolean;
   className?: string;
-  
-  // 跳转模式
+  // for Link
   href?: string;
   openInNewTab?: boolean;
   
-  // 点击模式  
+  // for click
   onClick?: () => void | Promise<void>;
-  
-  // 加载状态配置
   loadingText?: React.ReactNode;
   preventDoubleClick?: boolean;
 }
@@ -33,10 +30,11 @@ export function GradientButton({
   href,
   openInNewTab = true,
   onClick,
-  loadingText = "Loading...",
+  loadingText,
   preventDoubleClick = true,
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
 
   // set justify class according to alignment
   const getAlignmentClass = () => {
@@ -50,7 +48,6 @@ export function GradientButton({
     }
   };
 
-  // 处理点击事件
   const handleClick = async (e: React.MouseEvent) => {
     if (disabled || isLoading) {
       e.preventDefault();
@@ -76,13 +73,11 @@ export function GradientButton({
     }
   };
 
-  // 按钮是否处于禁用状态
   const isDisabled = disabled || isLoading;
 
-  // 显示的标题内容
-  const displayTitle = isLoading ? loadingText : title;
+  const displayTitle = isLoading ? actualLoadingText : title;
 
-  // 显示的图标
+  // icon
   const displayIcon = isLoading ? (
     <icons.Loader2 className="h-4 w-4 text-white animate-spin" />
   ) : icon ? (
@@ -93,7 +88,12 @@ export function GradientButton({
     <icons.ArrowRight className="h-4 w-4 text-white" />
   );
 
-  const buttonContent = (
+  const buttonContent = onClick ? (
+    <>
+      <span>{displayIcon}</span>
+      <span className="ml-1">{displayTitle}</span>
+    </>
+  ) : (
     <>
       <span>{displayTitle}</span>
       <span className="ml-1">{displayIcon}</span>
@@ -116,7 +116,7 @@ export function GradientButton({
   return (
     <div className={`flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`}>
       {onClick ? (
-        // 点击模式
+        // for click
         <Button
           size="lg"
           className={buttonClassName}
@@ -126,7 +126,7 @@ export function GradientButton({
           {buttonContent}
         </Button>
       ) : (
-        // 跳转模式
+        // for Link
         <Button
           asChild
           size="lg"

package/src/main/index.ts

@@ -13,4 +13,5 @@ export * from './go-to-top';
 export * from './loading';
 export * from './nprogress-bar';
 export * from './price-plan';
-export * from './ads-alert-dialog';
+export * from './ads-alert-dialog';
+export * from './x-button'

package/src/main/x-button.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import { useState, useRef, useEffect, ReactNode } from 'react'
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon'
+
+// base button config
+interface BaseButtonConfig {
+  icon: ReactNode
+  text: string
+  onClick: () => void | Promise<void>
+  disabled?: boolean
+}
+
+// menu item config
+interface MenuItemConfig extends BaseButtonConfig {
+  tag?: {
+    text: string
+    color?: string
+  }
+}
+
+// single button config
+interface SingleButtonProps {
+  type: 'single'
+  button: BaseButtonConfig
+  loadingText?: string
+  minWidth?: string
+  className?: string
+}
+
+// split button config
+interface SplitButtonProps {
+  type: 'split'
+  mainButton: BaseButtonConfig
+  menuItems: MenuItemConfig[]
+  loadingText?: string
+  menuWidth?: string
+  className?: string
+  mainButtonClassName?: string
+  dropdownButtonClassName?: string
+}
+
+type xButtonProps = SingleButtonProps | SplitButtonProps
+
+export const XButtonIcons = {
+  copy: <icons.Copy className="w-5 h-5 mr-1" />,
+  checkCheck: <icons.CheckCheck className="w-5 h-5 mr-1" />,
+  globe: <icons.Languages className="w-5 h-5 mr-1" />,
+  loader: <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />,
+  download: <icons.Download className="w-5 h-5 mr-1" />,
+  upload: <icons.ImageUp className="w-5 h-5 mr-1" />,
+  share: <icons.Share className="w-5 h-5 mr-1" />,
+  edit: <icons.Pencil className="w-5 h-5 mr-1" />,
+}
+
+export function XButton(props: xButtonProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // click outside to close menu
+  useEffect(() => {
+    if (props.type === 'split') {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+          setMenuOpen(false)
+        }
+      }
+
+      if (menuOpen) {
+        document.addEventListener('mousedown', handleClickOutside)
+      }
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [menuOpen, props.type])
+
+  // handle button click
+  const handleButtonClick = async (onClick: () => void | Promise<void>) => {
+    if (isLoading) return
+
+    setIsLoading(true)
+    try {
+      await onClick()
+    } catch (error) {
+      console.error('Button click error:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // base style class
+  const baseButtonClass = "flex items-center justify-center px-4 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white text-sm font-semibold transition-colors hover:bg-neutral-300 dark:hover:bg-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 (
+      <button
+        onClick={() => handleButtonClick(button.onClick)}
+        disabled={isDisabled}
+        className={`${minWidth} ${baseButtonClass} rounded-full ${isDisabled ? disabledClass : ''} ${className}`}
+        title={button.text}
+      >
+        {isLoading ? (
+          <>
+            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <span>{actualLoadingText}</span>
+          </>
+        ) : (
+          <>
+            {button.icon}
+            <span>{button.text}</span>
+          </>
+        )}
+      </button>
+    )
+  }
+
+  // Split button
+  const { mainButton, menuItems, loadingText, menuWidth = 'w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
+  const isMainDisabled = mainButton.disabled || isLoading
+  // loadingText 优先级：props.loadingText > mainButton.text > 'Loading...'
+  const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
+
+  return (
+    <div className={`relative flex bg-neutral-200 dark:bg-neutral-800 rounded-full ${className}`}>
+      {/* left main button */}
+      <button
+        onClick={() => handleButtonClick(mainButton.onClick)}
+        disabled={isMainDisabled}
+        className={`flex-1 ${baseButtonClass} rounded-l-full ${isMainDisabled ? disabledClass : ''} ${mainButtonClassName}`}
+        onMouseDown={e => { if (e.button === 2) e.preventDefault() }}
+        style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+      >
+        {isLoading ? (
+          <>
+            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <span>{actualLoadingText}</span>
+          </>
+        ) : (
+          <>
+            {mainButton.icon}
+            <span>{mainButton.text}</span>
+          </>
+        )}
+      </button>
+
+      {/* right dropdown button */}
+      <span
+        className={`flex items-center justify-center w-10 py-2 cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-r-full ${dropdownButtonClassName}`}
+        onClick={e => { e.stopPropagation(); setMenuOpen(v => !v) }}
+        tabIndex={0}
+        style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+      >
+        <icons.ChevronDown className="w-6 h-6" />
+      </span>
+
+      {/* 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-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`}
+        >
+          {menuItems.map((item, index) => (
+            <button
+              key={index}
+              onClick={() => {
+                handleButtonClick(item.onClick)
+                setMenuOpen(false)
+              }}
+              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 : ''}`}
+            >
+              <span className="flex items-center">
+                {item.icon}
+                <span>{item.text}</span>
+              </span>
+              {item.tag && (
+                <span
+                  className="absolute right-3 top-1 text-[10px] font-semibold"
+                  style={{ color: item.tag.color || '#A855F7', pointerEvents: 'none' }}
+                >
+                  {item.tag.text}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}