@yamada-ui/tag/dist/index.js

Yamada UI tag component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Tag: () => Tag
});
module.exports = __toCommonJS(index_exports);

// src/tag.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_use_clickable = require("@yamada-ui/use-clickable");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Tag = (0, import_core.forwardRef)((props, ref) => {
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Tag", props);
  const {
    className,
    children,
    isDisabled,
    disabled = isDisabled,
    rightIcon,
    endIcon = rightIcon,
    leftIcon,
    startIcon = leftIcon,
    closeButtonProps,
    onClose,
    ...rest
  } = (0, import_core.omitThemeProps)(mergedProps);
  const css = {
    alignItems: "center",
    display: "inline-flex",
    gap: "fallback(1, 0.25rem)",
    maxW: "100%",
    verticalAlign: "top",
    ...styles.container
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_core.ui.span,
    {
      ref,
      className: (0, import_utils.cx)("ui-tag", className),
      "aria-disabled": (0, import_utils.ariaAttr)(disabled),
      "data-disabled": (0, import_utils.dataAttr)(disabled),
      __css: css,
      ...rest,
      children: [
        startIcon,
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { lineClamp: 1, __css: styles.label, children }),
        endIcon,
        onClose ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          TagCloseButton,
          {
            disabled,
            onClick: onClose,
            ...closeButtonProps,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagCloseIcon, {})
          }
        ) : null
      ]
    }
  );
});
Tag.displayName = "Tag";
Tag.__ui__ = "Tag";
var TagCloseIcon = () => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { fontSize: "1.125rem", verticalAlign: "inherit", viewBox: "0 0 512 512", children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_core.useComponentMultiStyle)("Tag", props);
  const ref = (0, import_react.useRef)(null);
  const css = {
    alignItems: "center",
    cursor: "pointer",
    display: "inline-flex",
    justifyContent: "center",
    outline: "0",
    ...styles.closeButton
  };
  const rest = (0, import_use_clickable.useClickable)({ ref, ...props });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { "aria-label": "Close tag", __css: css, ...rest, children });
};
TagCloseButton.displayName = "TagCloseButton";
TagCloseButton.__ui__ = "TagCloseButton";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Tag
});
//# sourceMappingURL=index.js.map