@nlabs/gothamjs
Version:
Platform
112 lines (111 loc) • 13.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '@nlabs/utils';
import { forwardRef } from 'react';
import { useTranslation } from '../../i18n/index.js';
import { getBackgroundClasses, getBorderClasses, getTextClasses } from '../../utils/colorUtils.js';
export const Button = /*#__PURE__*/ forwardRef(({ children, className, color = 'primary', disabled, hasNotification = false, hasShadow = false, icon, isLoading = false, label = '', onClick = ()=>{}, size = 'md', type = 'button', variant, ...restBtnProps }, ref)=>{
const { t } = useTranslation();
const classes = [];
if (variant) {
classes.push(...[
'cursor-pointer',
'flex',
'focus-visible:outline',
'focus-visible:outline-2',
'focus-visible:outline-offset-2',
'focus-visible:outline-secondary',
'items-center',
'justify-center',
'leading-6',
'relative'
]);
switch(variant){
case 'outlined':
classes.push('bg-transparent', 'border-1', 'font-semibold', getBorderClasses(color, {
hasFocus: true,
hasHover: true
}), getTextClasses(color, {
hasFocus: true,
hasHover: true
}));
break;
case 'text':
classes.push('bg-transparent', 'font-semibold', getTextClasses(color, {
hasFocus: true,
hasHover: true
}));
break;
case 'contained':
default:
classes.push(getBackgroundClasses(color, {
hasFocus: true,
hasHover: true
}), 'font-medium', 'text-white', hasShadow ? 'shadow-sm' : '');
break;
}
switch(size){
case 'sm':
classes.push('px-4', 'py-0.5', 'rounded', 'text-sm');
break;
case 'lg':
classes.push('px-8', 'py-4', 'rounded-lg', 'text-lg');
break;
case 'md':
default:
classes.push('px-6', 'py-2', 'rounded-md', 'text-md');
}
}
let buttonIcon = icon;
if (isLoading) {
buttonIcon = /*#__PURE__*/ _jsxs("svg", {
className: "mr-3 -ml-1 size-5 animate-spin text-white",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
children: [
/*#__PURE__*/ _jsx("circle", {
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
"stroke-width": "4"
}),
/*#__PURE__*/ _jsx("path", {
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
})
]
});
}
let buttonNotification = null;
if (hasNotification) {
buttonNotification = /*#__PURE__*/ _jsxs("span", {
className: "absolute top-0 right-0 -mt-1 -mr-1 flex size-3",
children: [
/*#__PURE__*/ _jsx("span", {
className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"
}),
/*#__PURE__*/ _jsx("span", {
className: "relative inline-flex size-3 rounded-full bg-sky-500"
})
]
});
}
return /*#__PURE__*/ _jsxs("button", {
className: cn(...classes, className),
"data-testid": `button-${label || children}`,
disabled: isLoading || disabled,
onClick: onClick,
ref: ref,
type: type,
...restBtnProps,
children: [
buttonNotification,
buttonIcon,
children ? children : t(label)
]
});
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5pbXBvcnQge2ZvcndhcmRSZWZ9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHt1c2VUcmFuc2xhdGlvbn0gZnJvbSAnLi4vLi4vaTE4bi9pbmRleC5qcyc7XG5pbXBvcnQge2dldEJhY2tncm91bmRDbGFzc2VzLCBnZXRCb3JkZXJDbGFzc2VzLCBnZXRUZXh0Q2xhc3Nlc30gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmltcG9ydCB0eXBlIHtSZWFjdE5vZGV9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtHb3RoYW1Db2xvcn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5pbXBvcnQgdHlwZSB7R290aGFtU2l6ZX0gZnJvbSAnLi4vLi4vdXRpbHMvc2l6ZVV0aWxzLmpzJztcblxuZXhwb3J0IHR5cGUgQnV0dG9uVHlwZSA9ICdidXR0b24nIHwgJ3Jlc2V0JyB8ICdzdWJtaXQnO1xuZXhwb3J0IHR5cGUgQnV0dG9uVmFyaWFudCA9ICd0ZXh0JyB8ICdjb250YWluZWQnIHwgJ291dGxpbmVkJztcblxuZXhwb3J0IGludGVyZmFjZSBCdXR0b25Qcm9wcyB7XG5cdHJlYWRvbmx5IGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuXHRyZWFkb25seSBjbGFzc05hbWU/OiBzdHJpbmc7XG5cdHJlYWRvbmx5IGNvbG9yPzogR290aGFtQ29sb3I7XG5cdHJlYWRvbmx5IGRpc2FibGVkPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaGFzTm90aWZpY2F0aW9uPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaGFzU2hhZG93PzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaWNvbj86IFJlYWN0Tm9kZTtcblx0cmVhZG9ubHkgaXNMb2FkaW5nPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgbGFiZWw/OiBzdHJpbmc7XG5cdHJlYWRvbmx5IG9uQ2xpY2s/OiAoZXZlbnQ/OiB1bmtub3duKSA9PiB2b2lkO1xuXHRyZWFkb25seSBzaXplPzogR290aGFtU2l6ZTtcbiAgcmVhZG9ubHkgdGFiSW5kZXg/OiBudW1iZXI7XG4gIHJlYWRvbmx5IHR5cGU/OiBCdXR0b25UeXBlO1xuICByZWFkb25seSB2YXJpYW50PzogQnV0dG9uVmFyaWFudDtcbn1cblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IGZvcndhcmRSZWY8SFRNTEJ1dHRvbkVsZW1lbnQsIEJ1dHRvblByb3BzPigoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgZGlzYWJsZWQsXG4gIGhhc05vdGlmaWNhdGlvbiA9IGZhbHNlLFxuICBoYXNTaGFkb3cgPSBmYWxzZSxcbiAgaWNvbixcbiAgaXNMb2FkaW5nID0gZmFsc2UsXG4gIGxhYmVsID0gJycsXG4gIG9uQ2xpY2sgPSAoKSA9PiB7fSxcbiAgc2l6ZSA9ICdtZCcsXG4gIHR5cGUgPSAnYnV0dG9uJyxcbiAgdmFyaWFudCxcbiAgLi4ucmVzdEJ0blByb3BzXG59LCByZWYpID0+IHtcbiAgY29uc3Qge3R9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgY2xhc3Nlczogc3RyaW5nW10gPSBbXTtcblxuICBpZih2YXJpYW50KSB7XG4gICAgY2xhc3Nlcy5wdXNoKC4uLltcbiAgICAgICdjdXJzb3ItcG9pbnRlcicsXG4gICAgICAnZmxleCcsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lJyxcbiAgICAgICdmb2N1cy12aXNpYmxlOm91dGxpbmUtMicsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lLW9mZnNldC0yJyxcbiAgICAgICdmb2N1cy12aXNpYmxlOm91dGxpbmUtc2Vjb25kYXJ5JyxcbiAgICAgICdpdGVtcy1jZW50ZXInLFxuICAgICAgJ2p1c3RpZnktY2VudGVyJyxcbiAgICAgICdsZWFkaW5nLTYnLFxuICAgICAgJ3JlbGF0aXZlJ1xuICAgIF0pO1xuXG4gICAgc3dpdGNoKHZhcmlhbnQpIHtcbiAgICAgIGNhc2UgJ291dGxpbmVkJzpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgICdiZy10cmFuc3BhcmVudCcsXG4gICAgICAgICAgJ2JvcmRlci0xJyxcbiAgICAgICAgICAnZm9udC1zZW1pYm9sZCcsXG4gICAgICAgICAgZ2V0Qm9yZGVyQ2xhc3Nlcyhjb2xvciwge2hhc0ZvY3VzOiB0cnVlLCBoYXNIb3ZlcjogdHJ1ZX0pLFxuICAgICAgICAgIGdldFRleHRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICd0ZXh0JzpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgICdiZy10cmFuc3BhcmVudCcsXG4gICAgICAgICAgJ2ZvbnQtc2VtaWJvbGQnLFxuICAgICAgICAgIGdldFRleHRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdjb250YWluZWQnOlxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgIGdldEJhY2tncm91bmRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSksXG4gICAgICAgICAgJ2ZvbnQtbWVkaXVtJyxcbiAgICAgICAgICAndGV4dC13aGl0ZScsXG4gICAgICAgICAgaGFzU2hhZG93ID8gJ3NoYWRvdy1zbScgOiAnJ1xuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICB9XG5cbiAgICBzd2l0Y2goc2l6ZSkge1xuICAgICAgY2FzZSAnc20nOlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTQnLFxuICAgICAgICAgICdweS0wLjUnLFxuICAgICAgICAgICdyb3VuZGVkJyxcbiAgICAgICAgICAndGV4dC1zbSdcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdsZyc6XG4gICAgICAgIGNsYXNzZXMucHVzaChcbiAgICAgICAgICAncHgtOCcsXG4gICAgICAgICAgJ3B5LTQnLFxuICAgICAgICAgICdyb3VuZGVkLWxnJyxcbiAgICAgICAgICAndGV4dC1sZydcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdtZCc6XG4gICAgICBkZWZhdWx0OlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTYnLFxuICAgICAgICAgICdweS0yJyxcbiAgICAgICAgICAncm91bmRlZC1tZCcsXG4gICAgICAgICAgJ3RleHQtbWQnXG4gICAgICAgICk7XG4gICAgfVxuICB9XG5cbiAgbGV0IGJ1dHRvbkljb24gPSBpY29uO1xuXG4gIGlmKGlzTG9hZGluZykge1xuICAgIGJ1dHRvbkljb24gPSAoXG4gICAgICA8c3ZnIGNsYXNzTmFtZT1cIm1yLTMgLW1sLTEgc2l6ZS01IGFuaW1hdGUtc3BpbiB0ZXh0LXdoaXRlXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIGZpbGw9XCJub25lXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxuICAgICAgICA8Y2lyY2xlIGNsYXNzTmFtZT1cIm9wYWNpdHktMjVcIiBjeD1cIjEyXCIgY3k9XCIxMlwiIHI9XCIxMFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjRcIj48L2NpcmNsZT5cbiAgICAgICAgPHBhdGggY2xhc3NOYW1lPVwib3BhY2l0eS03NVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiBkPVwiTTQgMTJhOCA4IDAgMDE4LThWMEM1LjM3MyAwIDAgNS4zNzMgMCAxMmg0em0yIDUuMjkxQTcuOTYyIDcuOTYyIDAgMDE0IDEySDBjMCAzLjA0MiAxLjEzNSA1LjgyNCAzIDcuOTM4bDMtMi42NDd6XCI+PC9wYXRoPlxuICAgICAgPC9zdmc+XG4gICAgKTtcbiAgfVxuXG4gIGxldCBidXR0b25Ob3RpZmljYXRpb246IFJlYWN0Tm9kZSB8IG51bGwgPSBudWxsO1xuXG4gIGlmKGhhc05vdGlmaWNhdGlvbikge1xuICAgIGJ1dHRvbk5vdGlmaWNhdGlvbiA9IChcbiAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0wIHJpZ2h0LTAgLW10LTEgLW1yLTEgZmxleCBzaXplLTNcIj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwiYWJzb2x1dGUgaW5saW5lLWZsZXggaC1mdWxsIHctZnVsbCBhbmltYXRlLXBpbmcgcm91bmRlZC1mdWxsIGJnLXNreS00MDAgb3BhY2l0eS03NVwiPjwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwicmVsYXRpdmUgaW5saW5lLWZsZXggc2l6ZS0zIHJvdW5kZWQtZnVsbCBiZy1za3ktNTAwXCI+PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzTmFtZT17Y24oLi4uY2xhc3NlcywgY2xhc3NOYW1lKX1cbiAgICAgIGRhdGEtdGVzdGlkPXtgYnV0dG9uLSR7bGFiZWwgfHwgY2hpbGRyZW59YH1cbiAgICAgIGRpc2FibGVkPXtpc0xvYWRpbmcgfHwgZGlzYWJsZWR9XG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB0eXBlPXt0eXBlfVxuICAgICAgey4uLnJlc3RCdG5Qcm9wc31cbiAgICA+XG4gICAgICB7YnV0dG9uTm90aWZpY2F0aW9ufVxuICAgICAge2J1dHRvbkljb259XG4gICAgICB7Y2hpbGRyZW4gPyBjaGlsZHJlbiA6IHQobGFiZWwpfVxuICAgIDwvYnV0dG9uPlxuICApO1xufSk7XG4iXSwibmFtZXMiOlsiY24iLCJmb3J3YXJkUmVmIiwidXNlVHJhbnNsYXRpb24iLCJnZXRCYWNrZ3JvdW5kQ2xhc3NlcyIsImdldEJvcmRlckNsYXNzZXMiLCJnZXRUZXh0Q2xhc3NlcyIsIkJ1dHRvbiIsImNoaWxkcmVuIiwiY2xhc3NOYW1lIiwiY29sb3IiLCJkaXNhYmxlZCIsImhhc05vdGlmaWNhdGlvbiIsImhhc1NoYWRvdyIsImljb24iLCJpc0xvYWRpbmciLCJsYWJlbCIsIm9uQ2xpY2siLCJzaXplIiwidHlwZSIsInZhcmlhbnQiLCJyZXN0QnRuUHJvcHMiLCJyZWYiLCJ0IiwiY2xhc3NlcyIsInB1c2giLCJoYXNGb2N1cyIsImhhc0hvdmVyIiwiYnV0dG9uSWNvbiIsInN2ZyIsInhtbG5zIiwiZmlsbCIsInZpZXdCb3giLCJjaXJjbGUiLCJjeCIsImN5IiwiciIsInN0cm9rZSIsInN0cm9rZS13aWR0aCIsInBhdGgiLCJkIiwiYnV0dG9uTm90aWZpY2F0aW9uIiwic3BhbiIsImJ1dHRvbiIsImRhdGEtdGVzdGlkIl0sIm1hcHBpbmdzIjoiO0FBQUEsU0FBUUEsRUFBRSxRQUFPLGVBQWU7QUFDaEMsU0FBUUMsVUFBVSxRQUFPLFFBQVE7QUFFakMsU0FBUUMsY0FBYyxRQUFPLHNCQUFzQjtBQUNuRCxTQUFRQyxvQkFBb0IsRUFBRUMsZ0JBQWdCLEVBQUVDLGNBQWMsUUFBTyw0QkFBNEI7QUEwQmpHLE9BQU8sTUFBTUMsdUJBQVNMLFdBQTJDLENBQUMsRUFDaEVNLFFBQVEsRUFDUkMsU0FBUyxFQUNUQyxRQUFRLFNBQVMsRUFDakJDLFFBQVEsRUFDUkMsa0JBQWtCLEtBQUssRUFDdkJDLFlBQVksS0FBSyxFQUNqQkMsSUFBSSxFQUNKQyxZQUFZLEtBQUssRUFDakJDLFFBQVEsRUFBRSxFQUNWQyxVQUFVLEtBQU8sQ0FBQyxFQUNsQkMsT0FBTyxJQUFJLEVBQ1hDLE9BQU8sUUFBUSxFQUNmQyxPQUFPLEVBQ1AsR0FBR0MsY0FDSixFQUFFQztJQUNELE1BQU0sRUFBQ0MsQ0FBQyxFQUFDLEdBQUdwQjtJQUNaLE1BQU1xQixVQUFvQixFQUFFO0lBRTVCLElBQUdKLFNBQVM7UUFDVkksUUFBUUMsSUFBSSxJQUFJO1lBQ2Q7WUFDQTtZQUNBO1lBQ0E7WUFDQTtZQUNBO1lBQ0E7WUFDQTtZQUNBO1lBQ0E7U0FDRDtRQUVELE9BQU9MO1lBQ0wsS0FBSztnQkFDSEksUUFBUUMsSUFBSSxDQUNWLGtCQUNBLFlBQ0EsaUJBQ0FwQixpQkFBaUJLLE9BQU87b0JBQUNnQixVQUFVO29CQUFNQyxVQUFVO2dCQUFJLElBQ3ZEckIsZUFBZUksT0FBTztvQkFBQ2dCLFVBQVU7b0JBQU1DLFVBQVU7Z0JBQUk7Z0JBRXZEO1lBQ0YsS0FBSztnQkFDSEgsUUFBUUMsSUFBSSxDQUNWLGtCQUNBLGlCQUNBbkIsZUFBZUksT0FBTztvQkFBQ2dCLFVBQVU7b0JBQU1DLFVBQVU7Z0JBQUk7Z0JBRXZEO1lBQ0YsS0FBSztZQUNMO2dCQUNFSCxRQUFRQyxJQUFJLENBQ1ZyQixxQkFBcUJNLE9BQU87b0JBQUNnQixVQUFVO29CQUFNQyxVQUFVO2dCQUFJLElBQzNELGVBQ0EsY0FDQWQsWUFBWSxjQUFjO2dCQUU1QjtRQUNKO1FBRUEsT0FBT0s7WUFDTCxLQUFLO2dCQUNITSxRQUFRQyxJQUFJLENBQ1YsUUFDQSxVQUNBLFdBQ0E7Z0JBRUY7WUFDRixLQUFLO2dCQUNIRCxRQUFRQyxJQUFJLENBQ1YsUUFDQSxRQUNBLGNBQ0E7Z0JBRUY7WUFDRixLQUFLO1lBQ0w7Z0JBQ0VELFFBQVFDLElBQUksQ0FDVixRQUNBLFFBQ0EsY0FDQTtRQUVOO0lBQ0Y7SUFFQSxJQUFJRyxhQUFhZDtJQUVqQixJQUFHQyxXQUFXO1FBQ1phLDJCQUNFLE1BQUNDO1lBQUlwQixXQUFVO1lBQTRDcUIsT0FBTTtZQUE2QkMsTUFBSztZQUFPQyxTQUFROzs4QkFDaEgsS0FBQ0M7b0JBQU94QixXQUFVO29CQUFheUIsSUFBRztvQkFBS0MsSUFBRztvQkFBS0MsR0FBRTtvQkFBS0MsUUFBTztvQkFBZUMsZ0JBQWE7OzhCQUN6RixLQUFDQztvQkFBSzlCLFdBQVU7b0JBQWFzQixNQUFLO29CQUFlUyxHQUFFOzs7O0lBR3pEO0lBRUEsSUFBSUMscUJBQXVDO0lBRTNDLElBQUc3QixpQkFBaUI7UUFDbEI2QixtQ0FDRSxNQUFDQztZQUFLakMsV0FBVTs7OEJBQ2QsS0FBQ2lDO29CQUFLakMsV0FBVTs7OEJBQ2hCLEtBQUNpQztvQkFBS2pDLFdBQVU7Ozs7SUFHdEI7SUFFQSxxQkFDRSxNQUFDa0M7UUFDQ2xDLFdBQVdSLE1BQU11QixTQUFTZjtRQUMxQm1DLGVBQWEsQ0FBQyxPQUFPLEVBQUU1QixTQUFTUixVQUFVO1FBQzFDRyxVQUFVSSxhQUFhSjtRQUN2Qk0sU0FBU0E7UUFDVEssS0FBS0E7UUFDTEgsTUFBTUE7UUFDTCxHQUFHRSxZQUFZOztZQUVmb0I7WUFDQWI7WUFDQXBCLFdBQVdBLFdBQVdlLEVBQUVQOzs7QUFHL0IsR0FBRyJ9