@penaprieto/design-system/dist/components/Button/Button.js

Multi-brand React design system with design tokens from Figma

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Button.css");
const Button = ({ variant = 'primary', size = 'medium', shape = 'default', loading = false, iconLeft, iconRight, disabled = false, fullWidth = false, className = '', children, ...rest }) => {
    const isIconOnly = shape === 'icon' && !children;
    const ariaLabel = rest['aria-label'] || (isIconOnly ? 'Button' : undefined);
    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: [
            'ds-btn',
            `ds-btn--${variant}`,
            `ds-btn--${size}`,
            shape !== 'default' ? `ds-btn--${shape}` : '',
            loading ? 'ds-btn--loading' : '',
            fullWidth ? 'ds-btn--fullwidth' : '',
            className
        ].filter(Boolean).join(' '), "aria-label": ariaLabel, disabled: disabled || loading, ...rest, children: [loading && ((0, jsx_runtime_1.jsx)("span", { className: "ds-btn__loading", "aria-label": "Loading", children: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("circle", { cx: "4", cy: "12.2", r: "3", fill: "white", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "r", begin: "0s", dur: "0.7s", values: "2;3;2", calcMode: "linear", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "cy", begin: "0s", dur: "0.7s", values: "10;14;10", calcMode: "linear", repeatCount: "indefinite" })] }), (0, jsx_runtime_1.jsxs)("circle", { cx: "12", cy: "12", r: "3", fill: "white", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "r", begin: "0.1s", dur: "0.7s", values: "2;3;2", calcMode: "linear", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "cy", begin: "0.1s", dur: "0.7s", values: "10;14;10", calcMode: "linear", repeatCount: "indefinite" })] }), (0, jsx_runtime_1.jsxs)("circle", { cx: "20", cy: "12", r: "3", fill: "white", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "r", begin: "0.2s", dur: "0.7s", values: "2;3;2", calcMode: "linear", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "cy", begin: "0.2s", dur: "0.7s", values: "10;14;10", calcMode: "linear", repeatCount: "indefinite" })] })] }) })), iconLeft && (0, jsx_runtime_1.jsx)("span", { className: "ds-btn__icon ds-btn__icon--left", children: iconLeft }), children && (0, jsx_runtime_1.jsx)("span", { className: loading ? 'ds-btn__label ds-btn__label--loading' : 'ds-btn__label', children: children }), iconRight && (0, jsx_runtime_1.jsx)("span", { className: "ds-btn__icon ds-btn__icon--right", children: iconRight })] }));
};
exports.Button = Button;