@geneui/components/Button/index.js

The Gene UI components library designed for BI tools

import { _ as __rest } from '../tslib.es6-f211516f.js';
import React__default, { forwardRef } from 'react';
import { c as classnames } from '../index-031ff73c.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import 'prop-types';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .btn{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));color:inherit;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);justify-content:center;min-height:var(--button-external-size,var(--size));min-width:var(--button-external-size,var(--size));position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .btn:focus-visible{border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.16.5\"] .btn:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .btn.s-medium{--size:3.2rem;font-size:1.2rem}[data-gene-ui-version=\"2.16.5\"] .btn.s-big{--size:4.2rem}[data-gene-ui-version=\"2.16.5\"] .btn.cr-smooth{border-radius:var(--button-external-border-radius,.4rem)}[data-gene-ui-version=\"2.16.5\"] .btn>*+*{margin:0 0 0 .4rem}html[dir=rtl] .btn>*+*{margin:0 .4rem 0 0}[data-gene-ui-version=\"2.16.5\"] .btn.id-end{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.5\"] .btn.id-end>*+*{margin:0 .7rem 0 0}html[dir=rtl] .btn.id-end>*+*{margin:0 0 0 .7rem}[data-gene-ui-version=\"2.16.5\"] .btn:not(.c-icon){padding:0 2rem}[data-gene-ui-version=\"2.16.5\"] .btn:not(.c-icon).f-content-size{padding:0 1.3rem}[data-gene-ui-version=\"2.16.5\"] .btn:not(.c-icon).f-default{min-width:10rem}[data-gene-ui-version=\"2.16.5\"] .btn:not(.c-icon).f-full-width{width:100%}[data-gene-ui-version=\"2.16.5\"] .btn:not(.c-icon).loading-padding{padding:0 .6rem}[data-gene-ui-version=\"2.16.5\"] .btn.c-confirm{--hero:var(--confirm);--hero-sc:var(--confirm-sc);--hero-hover:var(--confirm-hover)}[data-gene-ui-version=\"2.16.5\"] .btn.c-danger{--hero:var(--danger);--hero-sc:var(--danger-sc);--hero-hover:var(--danger-hover)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-outline{border-color:var(--hero);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-outline:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-outline:active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-minimal:not(.c-default){color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-minimal:hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-minimal.active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-grayscale:not(:disabled){background:rgba(var(--background-sc-rgb),.01)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-grayscale:not(:disabled):hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-grayscale:not(:disabled).active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-grayscale:not(.c-default){color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-clean:not(.c-default){color:rgba(var(--background-sc-rgb),.6)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-clean:not(:disabled){background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-clean:not(:disabled):hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .btn:not(.active).a-clean:not(:disabled).active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .btn:not(.a-grayscale).with-shadow{box-shadow:0 .2rem .4rem 0 #0000001a}[data-gene-ui-version=\"2.16.5\"] .btn.a-grayscale:not(:disabled){box-shadow:0 1px 0 0 #00000029}[data-gene-ui-version=\"2.16.5\"] .btn.a-default,[data-gene-ui-version=\"2.16.5\"] .btn.active{background:var(--hero);color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .btn.a-default:hover,[data-gene-ui-version=\"2.16.5\"] .btn.active:hover{background:var(--hero-hover)}}[data-gene-ui-version=\"2.16.5\"] .btn.loading-state>:not(.btn-loader-holder){color:#0000!important}[data-gene-ui-version=\"2.16.5\"] .btn .btn-loader-holder{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}";
styleInject(css_248z);

const Button = forwardRef((_a, ref) => {
    var { children, appearance = 'default', size = 'default', flexibility = 'default', color = 'primary', cornerRadius = 'round', itemsDirection = 'start', icon, active, className, withShadow, loading, ariaLabel } = _a, restProps = __rest(_a, ["children", "appearance", "size", "flexibility", "color", "cornerRadius", "itemsDirection", "icon", "active", "className", "withShadow", "loading", "ariaLabel"]);
    const noChildren = !children && children !== 0;
    return (React__default.createElement("button", Object.assign({ className: classnames('btn', className, `a-${appearance}`, `s-${size}`, `f-${flexibility}`, `c-${color}`, `id-${itemsDirection}`, `cr-${cornerRadius}`, {
            active,
            'c-icon': !!icon && noChildren,
            'with-shadow': withShadow,
            'loading-padding': !noChildren && !icon && loading
        }), ref: ref }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), restProps),
        icon && (loading ? React__default.createElement(Icon, { type: "bc-icon-loader" }) : React__default.createElement(Icon, { type: icon })),
        !noChildren &&
            (!icon && loading ? (React__default.createElement(React__default.Fragment, null,
                React__default.createElement(Icon, { type: "bc-icon-loader" }),
                React__default.createElement("span", null, children))) : (React__default.createElement("span", { className: "ellipsis-text" }, children))),
        loading && noChildren && (React__default.createElement("div", { className: "btn-loader-holder" },
            React__default.createElement(Icon, { type: "bc-icon-loader" })))));
});

export { Button as default };