welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
111 lines (110 loc) • 3.62 kB
JavaScript
"use client";
import './Tag.css';
import { jsxs as b, jsx as e } from "react/jsx-runtime";
import w from "react";
import { Icon as s } from "./Icon.js";
import { c as C } from "./index-B6iGEm-i.js";
import { f as R } from "./forwardRefWithAs-8eP3ZN15.js";
const S = "_root_4kt6z_7", y = "_disabled_4kt6z_51", N = "_ai_4kt6z_68", q = "_removeButton_4kt6z_71", x = "_hasRemoveAction_4kt6z_364", A = "_isSquare_4kt6z_370", T = {
root: S,
disabled: y,
"variant-dash": "_variant-dash_4kt6z_56",
ai: N,
removeButton: q,
"variant-brand": "_variant-brand_4kt6z_74",
"variant-light-brand": "_variant-light-brand_4kt6z_89",
"variant-dark-brand": "_variant-dark-brand_4kt6z_96",
"variant-warm": "_variant-warm_4kt6z_103",
"variant-light-warm": "_variant-light-warm_4kt6z_118",
"variant-dark-warm": "_variant-dark-warm_4kt6z_125",
"variant-red": "_variant-red_4kt6z_132",
"variant-light-red": "_variant-light-red_4kt6z_147",
"variant-dark-red": "_variant-dark-red_4kt6z_154",
"variant-blue": "_variant-blue_4kt6z_161",
"variant-light-blue": "_variant-light-blue_4kt6z_176",
"variant-dark-blue": "_variant-dark-blue_4kt6z_183",
"variant-green": "_variant-green_4kt6z_190",
"variant-light-green": "_variant-light-green_4kt6z_205",
"variant-dark-green": "_variant-dark-green_4kt6z_212",
"variant-orange": "_variant-orange_4kt6z_219",
"variant-light-orange": "_variant-light-orange_4kt6z_234",
"variant-dark-orange": "_variant-dark-orange_4kt6z_241",
"variant-pink": "_variant-pink_4kt6z_248",
"variant-light-pink": "_variant-light-pink_4kt6z_263",
"variant-dark-pink": "_variant-dark-pink_4kt6z_270",
"variant-teal": "_variant-teal_4kt6z_277",
"variant-light-teal": "_variant-light-teal_4kt6z_292",
"variant-dark-teal": "_variant-dark-teal_4kt6z_299",
"variant-violet": "_variant-violet_4kt6z_306",
"variant-light-violet": "_variant-light-violet_4kt6z_321",
"variant-dark-violet": "_variant-dark-violet_4kt6z_328",
"size-md": "_size-md_4kt6z_350",
"size-lg": "_size-lg_4kt6z_357",
hasRemoveAction: x,
isSquare: A
}, k = C(T);
function j(a) {
if (typeof a == "string" || typeof a == "number")
return a.toString().length;
if (w.isValidElement(a) && typeof a.props.children == "string")
return a.props.children.length;
}
const $ = R((a, d) => {
const {
ai: _ = !1,
as: g = "div",
children: o,
className: z,
disabled: i = !1,
icon: m,
onClick: v,
onRemove: r,
removeButtonProps: t,
size: c = "lg",
variant: l = "warm",
...h
} = a, u = j(o) === 1 && !r, p = (n) => {
n.stopPropagation(), !i && (t != null && t.onClick && t.onClick(n), r && r());
}, f = (n) => {
i || v && v(n);
};
return /* @__PURE__ */ b(
g,
{
className: k(
"root",
`variant-${l}`,
`size-${c}`,
!!r && "hasRemoveAction",
u && "isSquare",
_ && "ai",
i && "disabled",
z
),
onClick: f,
ref: d,
...h,
children: [
_ && l !== "dash" ? /* @__PURE__ */ e(s, { name: "sparkles", size: "md" }) : m,
/* @__PURE__ */ e("span", { children: o }),
r ? /* @__PURE__ */ e(
"button",
{
"aria-label": "remove tag",
disabled: i,
type: "button",
...t,
className: k("removeButton", t == null ? void 0 : t.className),
onClick: p,
children: /* @__PURE__ */ e(s, { name: "times", size: "md" })
}
) : null
]
}
);
});
$.displayName = "Tag";
export {
$ as Tag,
T as tagClasses
};