@clubmed/trident-ui/ui/Tag.js

Shared ClubMed React UI components

import { jsxs as y, jsx as s } from "react/jsx-runtime";
import { Icon as N } from "@clubmed/trident-icons";
import { c as n } from "../chunks/clsx.js";
import { getBorderColor as j, getBgColor as B, getTextColor as I } from "./helpers/colors/colors.js";
import { twMerge as T } from "./helpers/twMerge.js";
const v = ({
  className: i,
  backgroundColor: l = "saffron",
  border: m = l,
  color: c = "black",
  icon: t,
  label: e = "",
  theme: r = "both",
  iconClassName: d,
  labelClassName: b,
  iconWidth: h,
  ...f
}) => {
  if (!e && !t)
    return null;
  const x = j(m), g = B(l), w = I(c), a = !!t, o = r === "both" && !a ? "label" : r, p = o === "both" || o === "swap" || o === "unfold" || o === "none", u = a && (o === "icon" || p), C = o === "label" || o === "pill" || p;
  return /* @__PURE__ */ y(
    "span",
    {
      role: "note",
      ...f,
      "data-name": "Tag",
      className: T(
        n(
          "box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold",
          {
            "text-b4": o !== "pill",
            "text-b5": o === "pill"
          },
          {
            "p-4": o !== "label" && o !== "both",
            "px-16 py-6": o === "label",
            "py-4 pe-16 ps-12": o === "both",
            "px-8 py-4": o === "pill",
            "sm:px-16": o === "swap",
            "sm:pe-16 sm:ps-12": o === "unfold"
          },
          x,
          g,
          w
        ),
        i
      ),
      title: e,
      children: [
        o === "monogram" && /* @__PURE__ */ s("span", { className: "size-24 text-center leading-[1.5rem]", children: e }),
        u && /* @__PURE__ */ s(
          N,
          {
            width: h ?? "1.5rem",
            name: t,
            className: n({ "sm:hidden": o === "swap" }, d)
          }
        ),
        C && /* @__PURE__ */ s(
          "span",
          {
            className: n(
              {
                "hidden sm:block": o === "swap" || o === "unfold"
              },
              b
            ),
            children: e
          }
        )
      ]
    }
  );
};
export {
  v as Tag
};
//# sourceMappingURL=Tag.js.map