@windrun-huaiin/third-ui 11.0.4 → 11.0.6

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

@@ -5,10 +5,11 @@ export interface GradientButtonProps {
     align?: 'left' | 'center' | 'right';
     disabled?: boolean;
     className?: string;
+    iconSizeValue?: number;
     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, iconSizeValue, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,9 +9,12 @@ 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, iconSizeValue, }) {
     const [isLoading, setIsLoading] = React.useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
+    const iconSizeClass = (iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0)
+        ? `h-${iconSizeValue} w-${iconSizeValue}`
+        : 'h-4 w-4';
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -52,7 +55,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(iconSizeClass, 'text-white animate-spin') });
         }
         if (iconProvided) {
             if (icon === null || icon === false) {
@@ -60,12 +63,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(iconSizeClass, 'text-white', 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(iconSizeClass, 'text-white') });
     })();
     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,12 @@ 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, iconSizeValue, }) {
     const [isLoading, setIsLoading] = useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
+    const iconSizeClass = (iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0)
+        ? `h-${iconSizeValue} w-${iconSizeValue}`
+        : 'h-4 w-4';
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -50,7 +53,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(iconSizeClass, 'text-white animate-spin') });
         }
         if (iconProvided) {
             if (icon === null || icon === false) {
@@ -58,12 +61,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(iconSizeClass, 'text-white', icon.props.className),
                 });
             }
             return icon;
         }
-        return jsx(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
+        return jsx(globalLucideIcons.ArrowRight, { className: cn(iconSizeClass, 'text-white') });
     })();
     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;
+    iconSizeValue?: number;
 }
 interface SplitButtonProps {
     type: 'split';
@@ -28,6 +29,7 @@ interface SplitButtonProps {
     className?: string;
     mainButtonClassName?: string;
     dropdownButtonClassName?: string;
+    iconSizeValue?: number;
 }
 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,14 @@ function XButton(props) {
     const [isLoading, setIsLoading] = React.useState(false);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const menuRef = React.useRef(null);
+    const { iconSizeValue } = props;
+    const isCustomSize = iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0;
+    const loadingIconClass = isCustomSize
+        ? `w-${iconSizeValue} h-${iconSizeValue} mr-1 animate-spin`
+        : "w-5 h-5 mr-1 animate-spin";
+    const chevronIconClass = isCustomSize
+        ? `w-${iconSizeValue + 1} h-${iconSizeValue + 1}`
+        : "w-6 h-6";
     // click outside to close menu
     React.useEffect(() => {
         if (props.type === 'split') {
@@ -51,15 +59,15 @@ 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: [button.icon, jsxRuntime.jsx("span", { children: button.text })] })) }));
     }
     // 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 || ((_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-2xl sm: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-2 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 left-0 top-full sm:left-auto sm:right-0 ${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: () => {
+    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: loadingIconClass }), 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: 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

@@ -10,6 +10,14 @@ function XButton(props) {
     const [isLoading, setIsLoading] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
+    const { iconSizeValue } = props;
+    const isCustomSize = iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0;
+    const loadingIconClass = isCustomSize
+        ? `w-${iconSizeValue} h-${iconSizeValue} mr-1 animate-spin`
+        : "w-5 h-5 mr-1 animate-spin";
+    const chevronIconClass = isCustomSize
+        ? `w-${iconSizeValue + 1} h-${iconSizeValue + 1}`
+        : "w-6 h-6";
     // click outside to close menu
     useEffect(() => {
         if (props.type === 'split') {
@@ -49,15 +57,15 @@ 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: [button.icon, jsx("span", { children: button.text })] })) }));
     }
     // 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 || ((_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-2xl sm: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-2 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 left-0 top-full sm:left-auto sm:right-0 ${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: () => {
+    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: loadingIconClass }), 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: 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.4",
+  "version": "11.0.6",
   "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;
+  iconSizeValue?: number;
   // for Link
   href?: string;
   openInNewTab?: boolean;
@@ -33,10 +34,15 @@ export function GradientButton({
   onClick,
   loadingText,
   preventDoubleClick = true,
+  iconSizeValue,
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...'
 
+  const iconSizeClass = (iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0)
+    ? `h-${iconSizeValue} w-${iconSizeValue}`
+    : 'h-4 w-4';
+
   // set justify class according to alignment
   const getAlignmentClass = () => {
     switch (align) {
@@ -83,7 +89,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(iconSizeClass, 'text-white animate-spin')} />;
     }
 
     if (iconProvided) {
@@ -93,14 +99,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(iconSizeClass, 'text-white', icon.props.className),
         });
       }
 
       return icon;
     }
 
-    return <icons.ArrowRight className="h-4 w-4 text-white" />;
+    return <icons.ArrowRight className={cn(iconSizeClass, 'text-white')} />;
   })();
 
   const shouldRenderIcon = iconNode !== null && iconNode !== undefined;

package/src/main/x-button.tsx

@@ -28,6 +28,7 @@ interface SingleButtonProps {
   loadingText?: string
   minWidth?: string
   className?: string
+  iconSizeValue?: number
 }
 
 // split button config
@@ -40,6 +41,7 @@ interface SplitButtonProps {
   className?: string
   mainButtonClassName?: string
   dropdownButtonClassName?: string
+  iconSizeValue?: number
 }
 
 type xButtonProps = SingleButtonProps | SplitButtonProps
@@ -49,6 +51,17 @@ export function XButton(props: xButtonProps) {
   const [menuOpen, setMenuOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
+  const { iconSizeValue } = props
+  const isCustomSize = iconSizeValue && Number.isInteger(iconSizeValue) && iconSizeValue > 0
+
+  const loadingIconClass = isCustomSize 
+    ? `w-${iconSizeValue} h-${iconSizeValue} mr-1 animate-spin`
+    : "w-5 h-5 mr-1 animate-spin"
+
+  const chevronIconClass = isCustomSize
+    ? `w-${iconSizeValue + 1} h-${iconSizeValue + 1}`
+    : "w-6 h-6"
+
   // click outside to close menu
   useEffect(() => {
     if (props.type === 'split') {
@@ -108,7 +121,7 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <icons.Loader2 className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
@@ -129,7 +142,7 @@ export function XButton(props: xButtonProps) {
 
   return (
     <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-2xl sm:rounded-full gap-2 sm:gap-0",
+      "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
     )}>
       {/* left main button */}
@@ -147,7 +160,7 @@ export function XButton(props: xButtonProps) {
       >
         {isLoading ? (
           <>
-            <icons.Loader2 className="w-5 h-5 mr-1 animate-spin" />
+            <icons.Loader2 className={loadingIconClass} />
             <span>{actualLoadingText}</span>
           </>
         ) : (
@@ -162,21 +175,21 @@ export function XButton(props: xButtonProps) {
       <button
         type="button"
         className={cn(
-          "flex items-center justify-center w-full sm:w-10 py-2 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",
+          "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}
       >
-        <icons.ChevronDown className="w-6 h-6" />
+        <icons.ChevronDown className={chevronIconClass} />
       </button>
 
       {/* dropdown menu */}
       {menuOpen && (
         <div
           ref={menuRef}
-          className={`absolute left-0 top-full sm:left-auto sm:right-0 ${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`}
+          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