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