react-layout-timbel/dist/components/Button/index.js

모던한 React 컴포넌트 라이브러리입니다. Layout, Card, Button 컴포넌트를 포함합니다.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
/** 사용자 상호작용을 위한 주요 UI 컴포넌트 */
export const Button = ({ children, primary = false, size = 'medium', theme = 'light', disabled = false, type = 'button', onClick, icon, iconPosition = 'left', fullWidth = false, loading = false, ...props }) => {
    const handleClick = (e) => {
        if (!disabled && !loading && onClick) {
            onClick();
        }
    };
    const buttonClasses = [
        'button',
        `button--${size}`,
        `button--${theme}`,
        primary ? 'button--primary' : 'button--secondary',
        disabled ? 'button--disabled' : '',
        loading ? 'button--loading' : '',
        fullWidth ? 'button--full-width' : '',
        icon ? `button--with-icon button--icon-${iconPosition}` : ''
    ].filter(Boolean).join(' ');
    return (_jsxs("button", { type: type, className: buttonClasses, disabled: disabled || loading, onClick: handleClick, ...props, children: [loading && (_jsx("span", { className: "button-loader", children: _jsx("svg", { className: "button-loader-spinner", viewBox: "0 0 24 24", children: _jsxs("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "31.416", children: [_jsx("animate", { attributeName: "stroke-dasharray", dur: "2s", values: "0 31.416;15.708 15.708;0 31.416", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "stroke-dashoffset", dur: "2s", values: "0;-15.708;-31.416", repeatCount: "indefinite" })] }) }) })), !loading && icon && iconPosition === 'left' && (_jsx("span", { className: "button-icon button-icon--left", children: icon })), _jsx("span", { className: "button-text", children: children }), !loading && icon && iconPosition === 'right' && (_jsx("span", { className: "button-icon button-icon--right", children: icon }))] }));
};
//# sourceMappingURL=index.js.map