@nlabs/gothamjs
Version:
Platform
128 lines (127 loc) • 12.2 kB
JavaScript
import { cn } from "@nlabs/utils";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
import { getBackgroundClasses, getBorderClasses, getTextClasses } from "../../utils/colorUtils.js";
import { jsx, jsxs } from "react/jsx-runtime";
const Button = 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,
ref,
type,
...restBtnProps,
children: [
buttonNotification,
buttonIcon,
children ? children : t(label)
]
}
);
});
export {
Button
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giXSwKICAic291cmNlc0NvbnRlbnQiOiBbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5pbXBvcnQge2ZvcndhcmRSZWZ9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7dXNlVHJhbnNsYXRpb259IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuXG5pbXBvcnQge2dldEJhY2tncm91bmRDbGFzc2VzLCBnZXRCb3JkZXJDbGFzc2VzLCBnZXRUZXh0Q2xhc3Nlc30gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmltcG9ydCB0eXBlIHtSZWFjdE5vZGV9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHtHb3RoYW1Db2xvcn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5pbXBvcnQgdHlwZSB7R290aGFtU2l6ZX0gZnJvbSAnLi4vLi4vdXRpbHMvc2l6ZVV0aWxzLmpzJztcblxuZXhwb3J0IHR5cGUgQnV0dG9uVHlwZSA9ICdidXR0b24nIHwgJ3Jlc2V0JyB8ICdzdWJtaXQnO1xuZXhwb3J0IHR5cGUgQnV0dG9uVmFyaWFudCA9ICd0ZXh0JyB8ICdjb250YWluZWQnIHwgJ291dGxpbmVkJztcblxuZXhwb3J0IGludGVyZmFjZSBCdXR0b25Qcm9wcyB7XG5cdHJlYWRvbmx5IGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuXHRyZWFkb25seSBjbGFzc05hbWU/OiBzdHJpbmc7XG5cdHJlYWRvbmx5IGNvbG9yPzogR290aGFtQ29sb3I7XG5cdHJlYWRvbmx5IGRpc2FibGVkPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaGFzTm90aWZpY2F0aW9uPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaGFzU2hhZG93PzogYm9vbGVhbjtcblx0cmVhZG9ubHkgaWNvbj86IFJlYWN0Tm9kZTtcblx0cmVhZG9ubHkgaXNMb2FkaW5nPzogYm9vbGVhbjtcblx0cmVhZG9ubHkgbGFiZWw/OiBzdHJpbmc7XG5cdHJlYWRvbmx5IG9uQ2xpY2s/OiAoZXZlbnQ/OiB1bmtub3duKSA9PiB2b2lkO1xuXHRyZWFkb25seSBzaXplPzogR290aGFtU2l6ZTtcbiAgcmVhZG9ubHkgdGFiSW5kZXg/OiBudW1iZXI7XG4gIHJlYWRvbmx5IHR5cGU/OiBCdXR0b25UeXBlO1xuICByZWFkb25seSB2YXJpYW50PzogQnV0dG9uVmFyaWFudDtcbn1cblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IGZvcndhcmRSZWY8SFRNTEJ1dHRvbkVsZW1lbnQsIEJ1dHRvblByb3BzPigoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgZGlzYWJsZWQsXG4gIGhhc05vdGlmaWNhdGlvbiA9IGZhbHNlLFxuICBoYXNTaGFkb3cgPSBmYWxzZSxcbiAgaWNvbixcbiAgaXNMb2FkaW5nID0gZmFsc2UsXG4gIGxhYmVsID0gJycsXG4gIG9uQ2xpY2sgPSAoKSA9PiB7fSxcbiAgc2l6ZSA9ICdtZCcsXG4gIHR5cGUgPSAnYnV0dG9uJyxcbiAgdmFyaWFudCxcbiAgLi4ucmVzdEJ0blByb3BzXG59LCByZWYpID0+IHtcbiAgY29uc3Qge3R9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgY2xhc3Nlczogc3RyaW5nW10gPSBbXTtcblxuICBpZih2YXJpYW50KSB7XG4gICAgY2xhc3Nlcy5wdXNoKC4uLltcbiAgICAgICdjdXJzb3ItcG9pbnRlcicsXG4gICAgICAnZmxleCcsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lJyxcbiAgICAgICdmb2N1cy12aXNpYmxlOm91dGxpbmUtMicsXG4gICAgICAnZm9jdXMtdmlzaWJsZTpvdXRsaW5lLW9mZnNldC0yJyxcbiAgICAgICdmb2N1cy12aXNpYmxlOm91dGxpbmUtc2Vjb25kYXJ5JyxcbiAgICAgICdpdGVtcy1jZW50ZXInLFxuICAgICAgJ2p1c3RpZnktY2VudGVyJyxcbiAgICAgICdsZWFkaW5nLTYnLFxuICAgICAgJ3JlbGF0aXZlJ1xuICAgIF0pO1xuXG4gICAgc3dpdGNoKHZhcmlhbnQpIHtcbiAgICAgIGNhc2UgJ291dGxpbmVkJzpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgICdiZy10cmFuc3BhcmVudCcsXG4gICAgICAgICAgJ2JvcmRlci0xJyxcbiAgICAgICAgICAnZm9udC1zZW1pYm9sZCcsXG4gICAgICAgICAgZ2V0Qm9yZGVyQ2xhc3Nlcyhjb2xvciwge2hhc0ZvY3VzOiB0cnVlLCBoYXNIb3ZlcjogdHJ1ZX0pLFxuICAgICAgICAgIGdldFRleHRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICd0ZXh0JzpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgICdiZy10cmFuc3BhcmVudCcsXG4gICAgICAgICAgJ2ZvbnQtc2VtaWJvbGQnLFxuICAgICAgICAgIGdldFRleHRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSlcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdjb250YWluZWQnOlxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgY2xhc3Nlcy5wdXNoKFxuICAgICAgICAgIGdldEJhY2tncm91bmRDbGFzc2VzKGNvbG9yLCB7aGFzRm9jdXM6IHRydWUsIGhhc0hvdmVyOiB0cnVlfSksXG4gICAgICAgICAgJ2ZvbnQtbWVkaXVtJyxcbiAgICAgICAgICAndGV4dC13aGl0ZScsXG4gICAgICAgICAgaGFzU2hhZG93ID8gJ3NoYWRvdy1zbScgOiAnJ1xuICAgICAgICApO1xuICAgICAgICBicmVhaztcbiAgICB9XG5cbiAgICBzd2l0Y2goc2l6ZSkge1xuICAgICAgY2FzZSAnc20nOlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTQnLFxuICAgICAgICAgICdweS0wLjUnLFxuICAgICAgICAgICdyb3VuZGVkJyxcbiAgICAgICAgICAndGV4dC1zbSdcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdsZyc6XG4gICAgICAgIGNsYXNzZXMucHVzaChcbiAgICAgICAgICAncHgtOCcsXG4gICAgICAgICAgJ3B5LTQnLFxuICAgICAgICAgICdyb3VuZGVkLWxnJyxcbiAgICAgICAgICAndGV4dC1sZydcbiAgICAgICAgKTtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdtZCc6XG4gICAgICBkZWZhdWx0OlxuICAgICAgICBjbGFzc2VzLnB1c2goXG4gICAgICAgICAgJ3B4LTYnLFxuICAgICAgICAgICdweS0yJyxcbiAgICAgICAgICAncm91bmRlZC1tZCcsXG4gICAgICAgICAgJ3RleHQtbWQnXG4gICAgICAgICk7XG4gICAgfVxuICB9XG5cbiAgbGV0IGJ1dHRvbkljb24gPSBpY29uO1xuXG4gIGlmKGlzTG9hZGluZykge1xuICAgIGJ1dHRvbkljb24gPSAoXG4gICAgICA8c3ZnIGNsYXNzTmFtZT1cIm1yLTMgLW1sLTEgc2l6ZS01IGFuaW1hdGUtc3BpbiB0ZXh0LXdoaXRlXCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIGZpbGw9XCJub25lXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxuICAgICAgICA8Y2lyY2xlIGNsYXNzTmFtZT1cIm9wYWNpdHktMjVcIiBjeD1cIjEyXCIgY3k9XCIxMlwiIHI9XCIxMFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjRcIj48L2NpcmNsZT5cbiAgICAgICAgPHBhdGggY2xhc3NOYW1lPVwib3BhY2l0eS03NVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiBkPVwiTTQgMTJhOCA4IDAgMDE4LThWMEM1LjM3MyAwIDAgNS4zNzMgMCAxMmg0em0yIDUuMjkxQTcuOTYyIDcuOTYyIDAgMDE0IDEySDBjMCAzLjA0MiAxLjEzNSA1LjgyNCAzIDcuOTM4bDMtMi42NDd6XCI+PC9wYXRoPlxuICAgICAgPC9zdmc+XG4gICAgKTtcbiAgfVxuXG4gIGxldCBidXR0b25Ob3RpZmljYXRpb246IFJlYWN0Tm9kZSB8IG51bGwgPSBudWxsO1xuXG4gIGlmKGhhc05vdGlmaWNhdGlvbikge1xuICAgIGJ1dHRvbk5vdGlmaWNhdGlvbiA9IChcbiAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImFic29sdXRlIHRvcC0wIHJpZ2h0LTAgLW10LTEgLW1yLTEgZmxleCBzaXplLTNcIj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwiYWJzb2x1dGUgaW5saW5lLWZsZXggaC1mdWxsIHctZnVsbCBhbmltYXRlLXBpbmcgcm91bmRlZC1mdWxsIGJnLXNreS00MDAgb3BhY2l0eS03NVwiPjwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwicmVsYXRpdmUgaW5saW5lLWZsZXggc2l6ZS0zIHJvdW5kZWQtZnVsbCBiZy1za3ktNTAwXCI+PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzTmFtZT17Y24oLi4uY2xhc3NlcywgY2xhc3NOYW1lKX1cbiAgICAgIGRhdGEtdGVzdGlkPXtgYnV0dG9uLSR7bGFiZWwgfHwgY2hpbGRyZW59YH1cbiAgICAgIGRpc2FibGVkPXtpc0xvYWRpbmcgfHwgZGlzYWJsZWR9XG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB0eXBlPXt0eXBlfVxuICAgICAgey4uLnJlc3RCdG5Qcm9wc31cbiAgICA+XG4gICAgICB7YnV0dG9uTm90aWZpY2F0aW9ufVxuICAgICAge2J1dHRvbkljb259XG4gICAgICB7Y2hpbGRyZW4gPyBjaGlsZHJlbiA6IHQobGFiZWwpfVxuICAgIDwvYnV0dG9uPlxuICApO1xufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiQUFBQSxTQUFRLFVBQVM7QUFDakIsU0FBUSxrQkFBaUI7QUFD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