@yamada-ui/tag/dist/chunk-JUERTPNB.mjs

Yamada UI tag component

"use client"

// src/tag.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { Icon } from "@yamada-ui/icon";
import { useClickable } from "@yamada-ui/use-clickable";
import { ariaAttr, cx, dataAttr } from "@yamada-ui/utils";
import { useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Tag = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("Tag", props);
  const {
    className,
    children,
    isDisabled,
    disabled = isDisabled,
    rightIcon,
    endIcon = rightIcon,
    leftIcon,
    startIcon = leftIcon,
    closeButtonProps,
    onClose,
    ...rest
  } = omitThemeProps(mergedProps);
  const css = {
    alignItems: "center",
    display: "inline-flex",
    gap: "fallback(1, 0.25rem)",
    maxW: "100%",
    verticalAlign: "top",
    ...styles.container
  };
  return /* @__PURE__ */ jsxs(
    ui.span,
    {
      ref,
      className: cx("ui-tag", className),
      "aria-disabled": ariaAttr(disabled),
      "data-disabled": dataAttr(disabled),
      __css: css,
      ...rest,
      children: [
        startIcon,
        /* @__PURE__ */ jsx(ui.span, { lineClamp: 1, __css: styles.label, children }),
        endIcon,
        onClose ? /* @__PURE__ */ jsx(
          TagCloseButton,
          {
            disabled,
            onClick: onClose,
            ...closeButtonProps,
            children: /* @__PURE__ */ jsx(TagCloseIcon, {})
          }
        ) : null
      ]
    }
  );
});
Tag.displayName = "Tag";
Tag.__ui__ = "Tag";
var TagCloseIcon = () => {
  return /* @__PURE__ */ jsx(Icon, { fontSize: "1.125rem", verticalAlign: "inherit", viewBox: "0 0 512 512", children: /* @__PURE__ */ jsx(
    "path",
    {
      d: "M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z",
      fill: "currentColor"
    }
  ) });
};
TagCloseIcon.displayName = "TagCloseIcon";
TagCloseIcon.__ui__ = "TagCloseIcon";
var TagCloseButton = ({ children, ...props }) => {
  const [styles] = useComponentMultiStyle("Tag", props);
  const ref = useRef(null);
  const css = {
    alignItems: "center",
    cursor: "pointer",
    display: "inline-flex",
    justifyContent: "center",
    outline: "0",
    ...styles.closeButton
  };
  const rest = useClickable({ ref, ...props });
  return /* @__PURE__ */ jsx(ui.span, { "aria-label": "Close tag", __css: css, ...rest, children });
};
TagCloseButton.displayName = "TagCloseButton";
TagCloseButton.__ui__ = "TagCloseButton";

export {
  Tag
};
//# sourceMappingURL=chunk-JUERTPNB.mjs.map