@konstructio/ui/dist/components/Badge/Badge.js

A set of reusable and customizable React components built for konstruct.io

import { t as u } from "../../dist-CMPkuWNy.js";
import { t as c } from "../../utils-COaoD3PI.js";
import { LoaderIcon as g } from "../../assets/icons/components/Loader.js";
import { t as w } from "../../x-DBIZFfaM.js";
import { badgeVariants as x, buttonDismissVariants as V } from "./Badge.variants.js";
import { useCallback as D, useEffect as j, useRef as E, useState as L } from "react";
import { jsx as s, jsxs as p } from "react/jsx-runtime";
var $ = ({ className: b, dismissible: f = !1, isSelectable: h = !0, label: r, leftIcon: i, loading: n = !1, rightIcon: o, size: l, variant: m, onClick: e, onDismiss: d }) => {
  const a = E(null), [v, N] = L("visible"), y = D((t) => {
    t.stopPropagation(), d?.(), N("hidden");
  }, [d]);
  return j(() => {
    const t = new AbortController();
    return a.current?.addEventListener("animationend", () => {
      a.current?.style.setProperty("display", "none"), a.current?.remove();
    }, { signal: t.signal }), () => t.abort();
  }, []), /* @__PURE__ */ p("span", {
    ref: a,
    className: c(x({
      variant: m,
      size: l,
      className: b
    }), {
      "select-none": !h,
      "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": v,
    children: [
      n && /* @__PURE__ */ s(g, {
        size: 12,
        className: "animate-spin animate-duration-time-2"
      }),
      i ? /* @__PURE__ */ s(u, {
        className: "h-3 w-3",
        children: i
      }) : null,
      r,
      f ? /* @__PURE__ */ p("button", {
        type: "button",
        className: c(V({
          size: l,
          variant: m
        })),
        onClick: y,
        "aria-label": "Dismiss",
        children: [/* @__PURE__ */ s(w, { className: "h-full w-full" }), /* @__PURE__ */ s("span", {
          className: "sr-only",
          children: "Dismiss"
        })]
      }) : o ? /* @__PURE__ */ s(u, {
        className: "h-3 w-3",
        children: o
      }) : null
    ]
  });
};
export {
  $ as Badge
};