@frontify/fondue
Version:
Design system of Frontify
68 lines (67 loc) • 1.98 kB
JavaScript
import { jsxs as a, jsx as r } from "react/jsx-runtime";
import { useBreadcrumbItem as b } from "@react-aria/breadcrumbs";
import { useFocusRing as y } from "@react-aria/focus";
import { mergeProps as F } from "@react-aria/utils";
import { useRef as I } from "react";
import { getItemElementType as N } from "../../utilities/elements.es.js";
import { FOCUS_STYLE_NO_OFFSET as v } from "../../utilities/focusStyle.es.js";
import { merge as c } from "../../utilities/merge.es.js";
const T = () => /* @__PURE__ */ r(
"svg",
{
"aria-hidden": "true",
width: "13",
height: "17",
viewBox: "0 0 13 17",
fill: "none",
className: "tw-stroke-current tw-text-black-20",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ r("line", { x1: "3.52447", y1: "16.0623", x2: "8.46874", y2: "0.845385" })
}
), B = ({
decorator: p,
label: s,
link: o,
onClick: m,
showSeparator: w,
children: l,
"data-test-id": d = "breadcrumb"
}) => {
const n = I(null), t = N(o, m), e = t !== "span", { itemProps: u } = b(
{
isCurrent: !1,
children: s,
elementType: t
},
n
), { isFocusVisible: x, focusProps: f } = y(), i = {
a: { href: o },
button: { onClick: m, type: "button" },
span: { tabIndex: -1 }
}, h = e ? F(u, f, i[t]) : i[t], g = c([
"tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded",
e && x && v
]);
return /* @__PURE__ */ a(
"li",
{
className: c([
"tw-flex tw-items-center tw-text-text-weak tw-text-xs tw-transition-colors",
e && "hover:tw-text-text"
]),
"data-test-id": `${d}-item`,
children: [
l ?? /* @__PURE__ */ a(t, { ref: n, ...h, className: g, children: [
p,
s
] }),
w && /* @__PURE__ */ r(T, {})
]
}
);
};
B.displayName = "FondueBreadcrumbItem";
export {
B as BreadcrumbItem
};
//# sourceMappingURL=BreadcrumbItem.es.js.map