import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.0.2_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef } from 'react';
import { Spinner } from '../spinner/spinner.js';
import styles from './button.module.css.js';

const button = cva(styles['button'], {
    variants: {
        variant: {
            solid: styles["button-solid"],
            outline: styles["button-outline"],
            ghost: styles["button-ghost"],
            text: styles["button-text"]
        },
        size: {
            small: styles["button-small"],
            normal: styles["button-normal"],
        },
        disabled: {
            true: styles["button-disabled"],
        },
        loading: {
            true: styles["button-loading"],
        },
        color: {
            accent: styles["button-color-accent"],
            danger: styles["button-color-danger"],
            neutral: styles["button-color-neutral"],
            success: styles["button-color-success"],
        }
    },
    compoundVariants: [
        { variant: 'solid', color: 'accent', className: styles['button-solid-accent'] },
        { variant: 'solid', color: 'danger', className: styles['button-solid-danger'] },
        { variant: 'solid', color: 'neutral', className: styles['button-solid-neutral'] },
        { variant: 'solid', color: 'success', className: styles['button-solid-success'] },
        { variant: 'outline', color: 'accent', className: styles['button-outline-accent'] },
        { variant: 'outline', color: 'danger', className: styles['button-outline-danger'] },
        { variant: 'outline', color: 'neutral', className: styles['button-outline-neutral'] },
        { variant: 'outline', color: 'success', className: styles['button-outline-success'] },
    ],
    defaultVariants: {
        variant: 'solid',
        size: 'normal',
        color: 'accent'
    }
});
const getLoaderOnlyClass = (size) => size === 'small' ? styles['loader-only-button-small'] : styles['loader-only-button-normal'];
const Button = forwardRef(({ className, variant = 'solid', color = 'accent', size = 'normal', asChild = false, disabled, loading, loaderText, leadingIcon, trailingIcon, maxWidth, width, style = {}, children, ...props }, ref) => {
    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "button";
    const isLoaderOnly = loading && !loaderText;
    const widthStyle = { maxWidth, width };
    const buttonStyle = { ...widthStyle, ...style };
    const spinnerColor = variant === 'solid' ? 'inverted' : 'default';
    return (jsxRuntimeExports.jsx(Comp, { className: `${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`, ref: ref, disabled: disabled, style: buttonStyle, ...props, children: loading ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Spinner, { size: 1, color: spinnerColor }), loaderText && jsxRuntimeExports.jsx("span", { className: styles['loader-text'], children: loaderText })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [leadingIcon && jsxRuntimeExports.jsx("span", { className: `${styles['icon']} ${styles['icon-leading']}`, children: leadingIcon }), children, trailingIcon && jsxRuntimeExports.jsx("span", { className: `${styles['icon']} ${styles['icon-trailing']}`, children: trailingIcon })] })) }));
});
Button.displayName = "Button";

export { Button };
//# sourceMappingURL=button.js.map
