@payfit/unity-components
Version:
119 lines (118 loc) • 3.71 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 { forwardRef as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { Button as c } from "react-aria-components/Button";
import { Pressable as l } from "react-aria-components/Pressable";
//#region src/components/icon-button/CircularIconButton.tsx
var u = a({
base: [
"uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled uy:disabled:data-[hovered=\"true\"]:bg-transparent",
"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
"uy:aria-busy:text-content-neutral-disabled uy:aria-busy:cursor-progress"
],
variants: {
size: {
default: "uy:w-300 uy:h-300",
large: "uy:w-400 uy:h-400"
},
color: {
"content.neutral": [
"uy:text-content-neutral-low",
"uy:data-[hovered=\"true\"]:bg-surface-neutral-hover",
"uy:active:bg-surface-neutral-active",
"uy:data-[pressed=true]:bg-surface-neutral-active"
],
"content.neutral.low": [
"uy:text-content-neutral-low",
"uy:data-[hovered=\"true\"]:bg-surface-neutral-low-hover",
"uy:active:bg-surface-neutral-low-active",
"uy:data-[pressed=true]:bg-surface-neutral-low-active",
"uy:focus-visible:bg-surface-neutral-low-focus",
"uy:disabled:bg-surface-neutral-low-disabled"
],
"content.neutral.lowest": [
"uy:text-content-neutral-low",
"uy:data-[hovered=\"true\"]:bg-surface-neutral-lowest-hover",
"uy:active:bg-surface-neutral-lowest-active",
"uy:data-[pressed=true]:bg-surface-neutral-lowest-active",
"uy:focus-visible:bg-surface-neutral-lowest-focus",
"uy:disabled:bg-surface-neutral-lowest-disabled"
]
}
},
defaultVariants: {
size: "default",
color: "content.neutral.low"
}
}), d = i((i, a) => {
let d = t(), { type: f, onPress: p, icon: m, color: h, size: g, isLoading: _, title: v, isDisabled: y, asElement: b = "default", className: x, "aria-labelledby": S, ...C } = i, w = `icon-button-label-${d}`, T = u({
class: x,
color: h,
size: g
});
return b === "button" ? /* @__PURE__ */ o(r, {
title: v,
children: /* @__PURE__ */ s(c, {
ref: a,
"data-dd-privacy": "allow",
...C,
type: f,
onPress: p,
isDisabled: y || _,
"aria-labelledby": S ?? w,
"aria-busy": _,
className: T,
children: [_ ? /* @__PURE__ */ o(n, {
size: "small",
label: "Loading",
color: "inherit"
}) : /* @__PURE__ */ o(e, {
src: m,
size: g === "large" ? 24 : 20,
color: "inherit",
role: "presentation"
}), /* @__PURE__ */ o("span", {
id: w,
className: "uy:sr-only",
children: v
})]
})
}) : /* @__PURE__ */ o(r, {
title: v,
children: /* @__PURE__ */ o(l, {
ref: a,
"data-dd-privacy": "allow",
...C,
onPress: p,
isDisabled: y || _,
"aria-labelledby": w,
"aria-busy": _,
children: /* @__PURE__ */ s("div", {
role: "button",
className: T,
children: [_ ? /* @__PURE__ */ o(n, {
size: "small",
label: "Loading",
color: "inherit"
}) : /* @__PURE__ */ o(e, {
src: m,
size: g === "large" ? 24 : 20,
color: "inherit",
role: "presentation"
}), /* @__PURE__ */ o("span", {
id: w,
className: "uy:sr-only",
children: v
})]
})
})
});
});
d.displayName = "CircularIconButton";
//#endregion
export { d as CircularIconButton, u as circularIconButton };