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

Yamada UI tag component

{"version":3,"sources":["../src/tag.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { MouseEventHandler, ReactElement } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { ariaAttr, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useRef } from \"react\"\n\ninterface TagOptions {\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Icon to be displayed to the end of the tag.\n   */\n  endIcon?: ReactElement\n  /**\n   * If `true`, the tag is disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * Icon to be displayed to the left of the tag.\n   *\n   * @deprecated Use `startIcon` instead.\n   */\n  leftIcon?: ReactElement\n  /**\n   * Icon to be displayed to the right of the tag.\n   *\n   * @deprecated Use `endIcon` instead.\n   */\n  rightIcon?: ReactElement\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactElement\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nexport interface TagProps\n  extends HTMLUIProps<\"span\">,\n    ThemeProps<\"Tag\">,\n    TagOptions {}\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see Docs https://yamada-ui.com/components/data-display/tag\n */\nexport const Tag = forwardRef<TagProps, \"span\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"Tag\", props)\n  const {\n    className,\n    children,\n    isDisabled,\n    disabled = isDisabled,\n    rightIcon,\n    endIcon = rightIcon,\n    leftIcon,\n    startIcon = leftIcon,\n    closeButtonProps,\n    onClose,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: \"fallback(1, 0.25rem)\",\n    maxW: \"100%\",\n    verticalAlign: \"top\",\n    ...styles.container,\n  }\n\n  return (\n    <ui.span\n      ref={ref}\n      className={cx(\"ui-tag\", className)}\n      aria-disabled={ariaAttr(disabled)}\n      data-disabled={dataAttr(disabled)}\n      __css={css}\n      {...rest}\n    >\n      {startIcon}\n\n      <ui.span lineClamp={1} __css={styles.label}>\n        {children}\n      </ui.span>\n\n      {endIcon}\n\n      {onClose ? (\n        <TagCloseButton\n          disabled={disabled}\n          onClick={onClose}\n          {...closeButtonProps}\n        >\n          <TagCloseIcon />\n        </TagCloseButton>\n      ) : null}\n    </ui.span>\n  )\n})\n\nTag.displayName = \"Tag\"\nTag.__ui__ = \"Tag\"\n\nconst TagCloseIcon: FC = () => {\n  return (\n    <Icon fontSize=\"1.125rem\" verticalAlign=\"inherit\" viewBox=\"0 0 512 512\">\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n\nTagCloseIcon.displayName = \"TagCloseIcon\"\nTagCloseIcon.__ui__ = \"TagCloseIcon\"\n\ninterface TagCloseButtonProps extends HTMLUIProps<\"span\"> {\n  disabled?: boolean\n}\n\nconst TagCloseButton: FC<TagCloseButtonProps> = ({ children, ...props }) => {\n  const [styles] = useComponentMultiStyle(\"Tag\", props)\n  const ref = useRef<HTMLSpanElement>(null)\n\n  const css: CSSUIObject = {\n    alignItems: \"center\",\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    outline: \"0\",\n    ...styles.closeButton,\n  }\n\n  const rest = useClickable<HTMLSpanElement>({ ref, ...props })\n\n  return (\n    <ui.span aria-label=\"Close tag\" __css={css} {...rest}>\n      {children}\n    </ui.span>\n  )\n}\n\nTagCloseButton.displayName = \"TagCloseButton\"\nTagCloseButton.__ui__ = \"TagCloseButton\"\n"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,UAAU,IAAI,gBAAgB;AACvC,SAAS,cAAc;AAmFnB,SAUE,KAVF;AA1BG,IAAM,MAAM,WAA6B,CAAC,OAAO,QAAQ;AAC9D,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,OAAO,KAAK;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,eAAe;AAAA,IACf,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,iBAAe,SAAS,QAAQ;AAAA,MAChC,iBAAe,SAAS,QAAQ;AAAA,MAChC,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA;AAAA,QAED,oBAAC,GAAG,MAAH,EAAQ,WAAW,GAAG,OAAO,OAAO,OAClC,UACH;AAAA,QAEC;AAAA,QAEA,UACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACR,GAAG;AAAA,YAEJ,8BAAC,gBAAa;AAAA;AAAA,QAChB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,IAAI,cAAc;AAClB,IAAI,SAAS;AAEb,IAAM,eAAmB,MAAM;AAC7B,SACE,oBAAC,QAAK,UAAS,YAAW,eAAc,WAAU,SAAQ,eACxD;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;AAMtB,IAAM,iBAA0C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AAC1E,QAAM,CAAC,MAAM,IAAI,uBAAuB,OAAO,KAAK;AACpD,QAAM,MAAM,OAAwB,IAAI;AAExC,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,GAAG,OAAO;AAAA,EACZ;AAEA,QAAM,OAAO,aAA8B,EAAE,KAAK,GAAG,MAAM,CAAC;AAE5D,SACE,oBAAC,GAAG,MAAH,EAAQ,cAAW,aAAY,OAAO,KAAM,GAAG,MAC7C,UACH;AAEJ;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}