@payfit/unity-components
Version:
83 lines (82 loc) • 2.06 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import t from "../../hooks/use-id.js";
import { Spinner as n } from "../spinner/Spinner.js";
import { Tooltip as r } from "../tooltip/Tooltip.js";
import { iconButtonFilled as i, iconButtonGhost as a, iconButtonOutlined as o } from "./IconButton.variants.js";
import { forwardRef as s, useMemo as c } from "react";
import { cn as l, useUnityTheme as u, uyMerge as d } from "@payfit/unity-themes";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
import { Button as m } from "react-aria-components/Button";
//#region src/components/icon-button/IconButton.tsx
var h = s(({ variant: s, color: h = "primary", icon: g, iconRole: _, label: v, isDisabled: y = !1, isLoading: b = !1, onClick: x, onPress: S, className: C, ...w }, T) => {
let E = t(), { theme: D } = u(), O = `icon-button-label-${E}`, k = c(() => {
let e = {
isDisabled: y,
isLoading: b
};
switch (s) {
case "primary": return d(i({
...e,
color: h
}));
case "secondary":
if (D === "rebrand") {
let t = h === "inverted" ? "inverted.low" : "neutral";
return d(i({
...e,
color: t
}));
}
return d(o({
...e,
color: h
}));
case "ghost": return d(a({
...e,
color: h
}));
case "outlined": return d(o({
...e,
color: h
}));
}
}, [
s,
h,
y,
b,
D
]), A = { ...b && { "data-loading": b } };
return /* @__PURE__ */ f(r, {
title: v,
children: /* @__PURE__ */ p(m, {
ref: T,
"data-dd-privacy": "allow",
...w,
className: l(k, C),
onPress: S ?? x,
isDisabled: y || b,
isPending: b,
"aria-label": v,
...A,
children: [b ? /* @__PURE__ */ f(n, {
size: "small",
label: "Loading",
color: "inherit"
}) : /* @__PURE__ */ f(e, {
role: _,
src: g,
size: 20,
color: "inherit",
"aria-labelledby": O
}), /* @__PURE__ */ f("span", {
id: O,
className: "uy:sr-only",
children: v
})]
})
});
});
h.displayName = "IconButton";
//#endregion
export { h as IconButton };