@windrun-huaiin/third-ui 11.0.5 → 11.0.7

package/dist/fuma/mdx/gradient-button.d.ts

@@ -5,10 +5,11 @@ export interface GradientButtonProps {
     align?: 'left' | 'center' | 'right';
     disabled?: boolean;
     className?: string;
+    iconClassName?: string;
     href?: string;
     openInNewTab?: boolean;
     onClick?: () => void | Promise<void>;
     loadingText?: React.ReactNode;
     preventDoubleClick?: boolean;
 }
-export declare function GradientButton({ title, icon, align, disabled, className, href, openInNewTab, onClick, loadingText, preventDoubleClick, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradientButton({ title, icon, align, disabled, className, href, openInNewTab, onClick, loadingText, preventDoubleClick, iconClassName, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/mdx/gradient-button.js

@@ -9,9 +9,11 @@ var server = require('@windrun-huaiin/base-ui/components/server');
 var Link = require('next/link');
 var React = require('react');
 
-function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, onClick, loadingText, preventDoubleClick = true, }) {
+function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, onClick, loadingText, preventDoubleClick = true, iconClassName, }) {
     const [isLoading, setIsLoading] = React.useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
+    const defaultIconClass = "h-4 w-4";
+    const finalIconClass = utils.cn("text-white", iconClassName || defaultIconClass);
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -52,7 +54,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     const iconProvided = icon !== undefined;
     const iconNode = (() => {
         if (isLoading) {
-            return jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "h-4 w-4 text-white animate-spin" });
+            return jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: utils.cn(finalIconClass, 'animate-spin') });
         }
         if (iconProvided) {
             if (icon === null || icon === false) {
@@ -60,12 +62,12 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
             }
             if (React.isValidElement(icon)) {
                 return React.cloneElement(icon, {
-                    className: utils.cn('h-4 w-4 text-white', icon.props.className),
+                    className: utils.cn(finalIconClass, icon.props.className),
                 });
             }
             return icon;
         }
-        return jsxRuntime.jsx(server.globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
+        return jsxRuntime.jsx(server.globalLucideIcons.ArrowRight, { className: utils.cn(finalIconClass) });
     })();
     const shouldRenderIcon = iconNode !== null && iconNode !== undefined;
     const buttonContent = onClick ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldRenderIcon ? jsxRuntime.jsx("span", { children: iconNode }) : null, jsxRuntime.jsx("span", { className: utils.cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: displayTitle }), shouldRenderIcon ? jsxRuntime.jsx("span", { className: "ml-1", children: iconNode }) : null] }));

package/dist/fuma/mdx/gradient-button.mjs

@@ -7,9 +7,11 @@ import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import Link from 'next/link';
 import React, { useState } from 'react';
 
-function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, onClick, loadingText, preventDoubleClick = true, }) {
+function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, onClick, loadingText, preventDoubleClick = true, iconClassName, }) {
     const [isLoading, setIsLoading] = useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
+    const defaultIconClass = "h-4 w-4";
+    const finalIconClass = cn("text-white", iconClassName || defaultIconClass);
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -50,7 +52,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     const iconProvided = icon !== undefined;
     const iconNode = (() => {
         if (isLoading) {
-            return jsx(globalLucideIcons.Loader2, { className: "h-4 w-4 text-white animate-spin" });
+            return jsx(globalLucideIcons.Loader2, { className: cn(finalIconClass, 'animate-spin') });
         }
         if (iconProvided) {
             if (icon === null || icon === false) {
@@ -58,12 +60,12 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
             }
             if (React.isValidElement(icon)) {
                 return React.cloneElement(icon, {
-                    className: cn('h-4 w-4 text-white', icon.props.className),
+                    className: cn(finalIconClass, icon.props.className),
                 });
             }
             return icon;
         }
-        return jsx(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
+        return jsx(globalLucideIcons.ArrowRight, { className: cn(finalIconClass) });
     })();
     const shouldRenderIcon = iconNode !== null && iconNode !== undefined;
     const buttonContent = onClick ? (jsxs(Fragment, { children: [shouldRenderIcon ? jsx("span", { children: iconNode }) : null, jsx("span", { className: cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxs(Fragment, { children: [jsx("span", { children: displayTitle }), shouldRenderIcon ? jsx("span", { className: "ml-1", children: iconNode }) : null] }));

package/dist/main/x-button.d.ts

@@ -18,6 +18,7 @@ interface SingleButtonProps {
     loadingText?: string;
     minWidth?: string;
     className?: string;
+    iconClassName?: string;
 }
 interface SplitButtonProps {
     type: 'split';
@@ -28,6 +29,7 @@ interface SplitButtonProps {
     className?: string;
     mainButtonClassName?: string;
     dropdownButtonClassName?: string;
+    iconClassName?: string;
 }
 type xButtonProps = SingleButtonProps | SplitButtonProps;
 export declare function XButton(props: xButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/x-button.js

@@ -12,6 +12,19 @@ function XButton(props) {
     const [isLoading, setIsLoading] = React.useState(false);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const menuRef = React.useRef(null);
+    const { iconClassName } = props;
+    const defaultIconClass = "w-5 h-5";
+    const finalIconClass = iconClassName || defaultIconClass;
+    const loadingIconClass = utils.cn(finalIconClass, "mr-1 animate-spin");
+    const chevronIconClass = "w-6 h-6";
+    const renderIcon = (icon) => {
+        if (React.isValidElement(icon)) {
+            return React.cloneElement(icon, {
+                className: utils.cn(finalIconClass, icon.props.className),
+            });
+        }
+        return icon;
+    };
     // click outside to close menu
     React.useEffect(() => {
         if (props.type === 'split') {
@@ -51,7 +64,7 @@ function XButton(props) {
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
         const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
-        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [button.icon, jsxRuntime.jsx("span", { children: button.text })] })) }));
+        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
@@ -59,7 +72,7 @@ function XButton(props) {
     // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
     const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
     return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-full gap-2 sm:gap-0", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mainButton.icon, jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsxRuntime.jsx("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`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
+                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsxRuntime.jsx("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`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { 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 : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxRuntime.jsxs("span", { className: "flex items-center", children: [item.icon, jsxRuntime.jsx("span", { children: item.text })] }), item.tag && (jsxRuntime.jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

package/dist/main/x-button.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 
@@ -10,6 +10,19 @@ function XButton(props) {
     const [isLoading, setIsLoading] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
+    const { iconClassName } = props;
+    const defaultIconClass = "w-5 h-5";
+    const finalIconClass = iconClassName || defaultIconClass;
+    const loadingIconClass = cn(finalIconClass, "mr-1 animate-spin");
+    const chevronIconClass = "w-6 h-6";
+    const renderIcon = (icon) => {
+        if (React.isValidElement(icon)) {
+            return React.cloneElement(icon, {
+                className: cn(finalIconClass, icon.props.className),
+            });
+        }
+        return icon;
+    };
     // click outside to close menu
     useEffect(() => {
         if (props.type === 'split') {
@@ -49,7 +62,7 @@ function XButton(props) {
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
         const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
-        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [button.icon, jsx("span", { children: button.text })] })) }));
+        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
@@ -57,7 +70,7 @@ function XButton(props) {
     // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
     const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
     return (jsxs("div", { className: cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-full gap-2 sm:gap-0", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [mainButton.icon, jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsx("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`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
+                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsx("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`, children: menuItems.map((item, index) => (jsxs("button", { 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 : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxs("span", { className: "flex items-center", children: [item.icon, jsx("span", { children: item.text })] }), item.tag && (jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "11.0.5",
+  "version": "11.0.7",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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

@@ -12,6 +12,7 @@ export interface GradientButtonProps {
   align?: 'left' | 'center' | 'right';
   disabled?: boolean;
   className?: string;
+  iconClassName?: string;
   // for Link
   href?: string;
   openInNewTab?: boolean;
@@ -33,10 +34,14 @@ export function GradientButton({
   onClick,
   loadingText,
   preventDoubleClick = true,
+  iconClassName,
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
 
+  const defaultIconClass = "h-4 w-4";
+  const finalIconClass = cn("text-white", iconClassName || defaultIconClass);
+
   // set justify class according to alignment
   const getAlignmentClass = () => {
     switch (align) {
@@ -83,7 +88,7 @@ export function GradientButton({
 
   const iconNode = (() => {
     if (isLoading) {
-      return <icons.Loader2 className="h-4 w-4 text-white animate-spin" />;
+      return <icons.Loader2 className={cn(finalIconClass, 'animate-spin')} />;
     }
 
     if (iconProvided) {
@@ -93,14 +98,14 @@ export function GradientButton({
 
       if (React.isValidElement<{ className?: string }>(icon)) {
         return React.cloneElement(icon, {
-          className: cn('h-4 w-4 text-white', icon.props.className),
+          className: cn(finalIconClass, icon.props.className),
         });
       }
 
       return icon;
     }
 
-    return <icons.ArrowRight className="h-4 w-4 text-white" />;
+    return <icons.ArrowRight className={cn(finalIconClass)} />;
   })();
 
   const shouldRenderIcon = iconNode !== null && iconNode !== undefined;

package/src/main/x-button.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect, ReactNode } from 'react'
+import React, { useState, useRef, useEffect, ReactNode } from 'react'
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server'
 import { cn } from '@windrun-huaiin/lib/utils'
 
@@ -28,6 +28,7 @@ interface SingleButtonProps {
   loadingText?: string
   minWidth?: string
   className?: string
+  iconClassName?: string
 }
 
 // split button config
@@ -40,6 +41,7 @@ interface SplitButtonProps {
   className?: string
   mainButtonClassName?: string
   dropdownButtonClassName?: string
+  iconClassName?: string
 }
 
 type xButtonProps = SingleButtonProps | SplitButtonProps
@@ -49,6 +51,23 @@ export function XButton(props: xButtonProps) {
   const [menuOpen, setMenuOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
+  const { iconClassName } = props
+  const defaultIconClass = "w-5 h-5"
+  const finalIconClass = iconClassName || defaultIconClass
+
+  const loadingIconClass = cn(finalIconClass, "mr-1 animate-spin")
+
+  const chevronIconClass = "w-6 h-6"
+
+  const renderIcon = (icon: ReactNode) => {
+    if (React.isValidElement<{ className?: string }>(icon)) {
+      return React.cloneElement(icon, {
+        className: cn(finalIconClass, icon.props.className),
+      });
+    }
+    return icon;
+  };
+
   // click outside to close menu
   useEffect(() => {
     if (props.type === 'split') {
@@ -108,12 +127,12 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <icons.Loader2 className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
           <>
-            {button.icon}
+            {renderIcon(button.icon)}
             <span>{button.text}</span>
           </>
         )}
@@ -147,12 +166,12 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <icons.Loader2 className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
           <>
-            {mainButton.icon}
+            {renderIcon(mainButton.icon)}
             <span>{mainButton.text}</span>
           </>
         )}
@@ -169,7 +188,7 @@ export function XButton(props: xButtonProps) {
         aria-label="More actions"
         aria-expanded={menuOpen}
       >
-        <icons.ChevronDown className="w-6 h-6" />
+        <icons.ChevronDown className={chevronIconClass} />
       </button>
 
       {/* dropdown menu */}