@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
76 lines (75 loc) • 2.17 kB
JavaScript
import { jsxs as c, jsx as t } from "react/jsx-runtime";
import { useRef as v, useState as y, useCallback as g, useEffect as N } from "react";
import { S as x } from "../../loader-juvMSJ9L.js";
import { cn as d } from "../../utils/index.js";
import { buttonDismissVariants as S, badgeVariants as w } from "./Badge.variants.js";
import { S as V } from "../../index-BtQfgaSF.js";
import { c as D } from "../../createLucideIcon-D4r5Phnh.js";
const L = [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
], j = D("x", L), B = ({
className: u,
dismissible: p = !1,
label: r,
leftIcon: o,
loading: i = !1,
size: n,
variant: l,
onClick: e,
onDismiss: m
}) => {
const s = v(null), [b, f] = y("visible"), h = g(
(a) => {
a.stopPropagation(), m?.(), f("hidden");
},
[m]
);
return N(() => {
const a = new AbortController();
return s.current?.addEventListener(
"animationend",
() => {
s.current?.style.setProperty("display", "none"), s.current?.remove();
},
{ signal: a.signal }
), () => a.abort();
}, []), /* @__PURE__ */ c(
"span",
{
ref: s,
className: d(
w({ variant: l, size: n, className: u }),
e && "cursor-pointer"
),
role: e ? "button" : void 0,
onClick: e,
tabIndex: e ? 0 : void 0,
"aria-label": e ? `${r} badge` : void 0,
"aria-busy": i,
"aria-live": "polite",
"data-state": b,
children: [
i && /* @__PURE__ */ t(x, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
o ? /* @__PURE__ */ t(V, { className: "h-3 w-3", children: o }) : null,
r,
p && /* @__PURE__ */ c(
"button",
{
type: "button",
className: d(S({ size: n, variant: l })),
onClick: h,
"aria-label": "Dismiss",
children: [
/* @__PURE__ */ t(j, { className: "h-full w-full" }),
/* @__PURE__ */ t("span", { className: "sr-only", children: "Dismiss" })
]
}
)
]
}
);
};
export {
B as Badge
};