welcome-ui/dist/Tag.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as d } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { StyledIcon as j } from "./Icon.mjs";
import { C } from "./index-KxL21VJb.mjs";
import { forwardRef as w } from "./System.mjs";
import { w as S } from "./wrap-children-CRHMWYug.mjs";
import p, { th as o, system as b, css as n } from "@xstyled/styled-components";
import { g } from "./get-max-width-height-DoUro2T7.mjs";
import { o as h } from "./overflow-ellipsis-DGV5Kgt-.mjs";
const I = (i, t, e) => n`
  ${o(`tags.shape.${i}`)}
  padding: 0;
  ${(t || e) && n`
    width: ${g(t || "0", e)};
    height: ${g(t || "0", e)};
  `}
`, m = p.div.withConfig({
  shouldForwardProp: (i) => !["hasClickAction", "hasLink", "hasRemoveAction"].includes(i)
})(
  ({ h: i, hasClickAction: t, hasLink: e, hasRemoveAction: r, length: a, size: s, variant: c, w: l }) => n`
    ${o("tags.default")};
    ${o(`tags.variants.${c}`)};
    ${o(`tags.sizes.${s}`)}
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: initial; /* avoid cropped font */
    transition: medium;
    max-width: 100%;
    ${h}
    ${b}
    ${a !== 1 && n`
      span,
      p {
        ${h}
      }
    `}
    ${a === 1 && !r && n`
      justify-content: center;
      ${I(s, l, i)};
    `};

    ${(e || t) && n`
      cursor: pointer;
      text-decoration: none;

      &:hover,
      &:focus {
        ${o(`tags.hover.${c}`)};
      }
    `};

    ${r && n`
      padding-right: xl;
    `}

    > *:not(:last-child) {
      margin-right: xxs;
    }

    & > svg {
      width: ${o(`tags.icon.${s}`)};
      height: ${o(`tags.icon.${s}`)};
    }

    > *:not(:only-child) {
      ${/* sc-selector */
  j}:last-child {
        opacity: 1;
        transition: opacity ${o.transition("medium")};
        cursor: pointer;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  `
), k = p.divBox(
  ({ size: i }) => n`
    position: absolute;
    ${o(`tags.sizes.${i}`)};
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  `
), A = p.buttonBox`
  all: unset;
  display: flex;
`, T = w(
  ({
    as: i,
    children: t,
    dataTestId: e,
    href: r,
    onClick: a,
    onRemove: s,
    size: c = "md",
    to: l,
    variant: $ = "default",
    ...f
  }, u) => {
    const x = S(t), y = !!(t || t === 0) && ["number", "string"].includes(typeof t) ? t.toString().length : void 0, v = !!r || !!l;
    return /* @__PURE__ */ d.jsxs(
      m,
      {
        as: i,
        "data-testid": e,
        hasClickAction: !!a,
        hasLink: v,
        hasRemoveAction: !!s,
        href: r,
        length: y,
        onClick: a,
        ref: u,
        size: c,
        to: l,
        variant: $,
        ...f,
        children: [
          x,
          !!s && /* @__PURE__ */ d.jsx(k, { size: c, children: /* @__PURE__ */ d.jsx(A, { onClick: s, title: "Remove", type: "button", children: /* @__PURE__ */ d.jsx(C, { size: "xs", title: "Remove" }) }) })
        ]
      }
    );
  }
);
T.displayName = "Tag";
const q = m;
export {
  q as StyledTag,
  T as Tag
};