@frontify/fondue
Version:
Design system of Frontify
57 lines (56 loc) • 2.56 kB
JavaScript
import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { useButton as a } from "@react-aria/button";
import { useFocusRing as b } from "@react-aria/focus";
import { mergeProps as m } from "@react-aria/utils";
import { useRef as x } from "react";
import g from "../../foundation/Icon/Generated/IconCross.es.js";
import { IconSize as v } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as S } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
var h = /* @__PURE__ */ ((e) => (e.Suggested = "Suggested", e.Selected = "Selected", e.SelectedWithFocus = "SelectedWithFocus", e.PreviouslySelected = "PreviouslySelected", e))(h || {}), f = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Medium = "Medium", e))(f || {});
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"
}, P = ({ type: e, label: i, onClick: o, size: l = "Medium", "data-test-id": r = "tag" }) => {
const n = x(null), { isFocusVisible: c, focusProps: d } = b(), t = (e === "Selected" || e === "SelectedWithFocus") && o, { buttonProps: w } = a(
{
onPress: () => t && o()
},
n
);
return /* @__PURE__ */ u(
"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",
l === "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 && S
]),
...m(w, d),
children: [
i,
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(g, { size: v.Size12 })
}
)
]
}
);
};
P.displayName = "FondueTag";
export {
P as Tag,
f as TagSize,
h as TagType,
F as tagStyles
};
//# sourceMappingURL=Tag.es.js.map