@frontify/fondue
Version:
Design system of Frontify
46 lines (45 loc) • 1.43 kB
JavaScript
import { jsx as m } from "react/jsx-runtime";
import { useButton as d } from "@react-aria/button";
import { useFocusRing as p } from "@react-aria/focus";
import { mergeProps as c } from "@react-aria/utils";
import { useRef as g, useState as x } from "react";
import { FOCUS_STYLE as v } from "../../utilities/focusStyle.es.js";
import { merge as P } from "../../utilities/merge.es.js";
const b = ({
hoverable: r = !1,
children: s,
onClick: t,
"data-test-id": n = "card"
}) => {
const o = g(null), [i, u] = x(!1), { buttonProps: w } = d(
{
elementType: "div",
onPress: (e) => t == null ? void 0 : t(e),
onPressChange: (e) => {
u(e);
}
},
o
), { isFocusVisible: f, focusProps: l } = p(), a = t ? c(w, l) : {};
return /* @__PURE__ */ m(
"div",
{
...a,
"data-test-id": n,
ref: o,
className: P([
"tw-w-full tw-bg-white tw-outline tw-outline-1 tw-outline-line tw-outline-offset--1 tw-rounded tw-overflow-hidden",
(r || t) && "hover:tw-outline-line-xx-strong",
t ? "active:tw-outline-line-xx-strong active:tw-outline-2 active:tw-outline-offset--2 tw-cursor-pointer" : "tw-cursor-default",
f && v,
i && t ? "tw-outline-line-xx-strong tw-outline-2 tw-outline-offset--2" : ""
]),
children: s
}
);
};
b.displayName = "FondueCard";
export {
b as Card
};
//# sourceMappingURL=Card.es.js.map