@frontify/fondue
Version:
Design system of Frontify
40 lines (39 loc) • 1.25 kB
JavaScript
import { jsxs as m, jsx as r } from "react/jsx-runtime";
import { useFocusRing as c } from "@react-aria/focus";
import { cloneElement as n } from "react";
import { IconSize as d } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as p } from "../../utilities/focusStyle.es.js";
import { merge as w } from "../../utilities/merge.es.js";
const u = ({
label: o,
active: i,
icon: t,
onClick: e,
"data-test-id": s = "radio-pill"
}) => {
const { isFocusVisible: a, focusProps: l } = c();
return /* @__PURE__ */ m(
"button",
{
"data-test-id": s,
type: "button",
className: w([
"tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-px-2 tw-py-1",
i ? "dark:tw-bg-black-5 dark:tw-text-black-100 tw-bg-black-100 tw-text-white" : "tw-text-black-80 dark:tw-text-black-40",
a && p,
e ? "tw-cursor-pointer" : "tw-cursor-auto"
]),
onClick: e,
...l,
children: [
t && /* @__PURE__ */ r("span", { className: "tw-mr-1", children: n(t, { size: d.Size16 }) }),
/* @__PURE__ */ r("span", { children: o })
]
}
);
};
u.displayName = "FondueRadioPill";
export {
u as RadioPill
};
//# sourceMappingURL=RadioPill.es.js.map