@frontify/fondue
Version:
Design system of Frontify
56 lines (55 loc) • 2.48 kB
JavaScript
import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { IconCross as a } from "@frontify/fondue-icons";
import { useButton as b } from "@react-aria/button";
import { useFocusRing as m } from "@react-aria/focus";
import { mergeProps as x } from "@react-aria/utils";
import { useRef as g } from "react";
import { FOCUS_STYLE as v } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
var S = /* @__PURE__ */ ((e) => (e.Suggested = "Suggested", e.Selected = "Selected", e.SelectedWithFocus = "SelectedWithFocus", e.PreviouslySelected = "PreviouslySelected", e))(S || {}), h = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e))(h || {});
const f = {
Suggested: "tw-border tw-bg-base tw-text-text-weak tw-border-line hover:tw-text-text hover:tw-border-line-strong",
Selected: "tw-bg-box-neutral hover:tw-bg-box-neutral-hover tw-text-text-weak hover:tw-text-box-neutral-inverse-hover",
SelectedWithFocus: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover tw-text-box-selected-strong-inverse",
PreviouslySelected: "tw-bg-base tw-border tw-text-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-neutral hover:tw-text-box-selected-inverse hover:tw-border-box-selected-inverse"
}, F = ({ type: e, label: l, onClick: o, size: n = "Medium", "data-test-id": r = "tag" }) => {
const i = g(null), { isFocusVisible: c, focusProps: d } = m(), t = (e === "Selected" || e === "SelectedWithFocus") && o, { buttonProps: w } = b(
{
onPress: () => t && o()
},
i
);
return /* @__PURE__ */ u(
"button",
{
type: "button",
"data-test-id": r,
className: p([
"tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-transition-colors tw-group tw-outline-none tw-break-word",
n === "Small" ? "tw-px-1.5 tw-py-0.5" : "tw-px-2.5 tw-py-1",
f[e],
t ? "tw-cursor-pointer" : "tw-cursor-default",
c && v
]),
...x(w, d),
children: [
l,
t && /* @__PURE__ */ s(
"span",
{
"data-test-id": `${r}-reject-icon`,
className: "tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1 tw-leading-[0]",
children: /* @__PURE__ */ s(a, { size: 12 })
}
)
]
}
);
};
F.displayName = "FondueTag";
export {
F as Tag,
h as TagSize,
S as TagType
};
//# sourceMappingURL=Tag.es.js.map