@yamada-ui/react/dist/cjs/components/tag/tag.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"tag.cjs","names":["createSlotComponent","tagStyle","styled","useClickable","useI18n","XIcon"],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n  extends HTMLStyledProps<\"span\">,\n    ThemeProps<TagStyle> {\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?: ReactNode\n  /**\n   * Icon to be displayed to the start of the tag.\n   */\n  startIcon?: ReactNode\n  /**\n   * Props for tag close button element.\n   */\n  closeButtonProps?: TagCloseButtonProps\n  /**\n   * Props for content element.\n   */\n  contentProps?: TagContentProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLStyledProps<\"span\">\n  /**\n   * Function to be executed when the close button is clicked.\n   */\n  onClose?: MouseEventHandler<HTMLElement>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TagPropsContext,\n  useComponentContext,\n  usePropsContext: useTagPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\nexport { TagPropsContext, useTagPropsContext }\n\n/**\n * `Tag` is a component used to categorize or organize items using keywords that describe them.\n *\n * @see https://yamada-ui.com/docs/components/tag\n */\nexport const Tag = withProvider<\"span\", TagProps, \"disabled\">(\n  ({\n    children,\n    disabled,\n    endIcon,\n    startIcon,\n    closeButtonProps,\n    contentProps,\n    iconProps,\n    onClose,\n    ...rest\n  }) => {\n    const context = useMemo(() => ({ disabled }), [disabled])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n          {startIcon ? (\n            <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n          ) : null}\n\n          {children ? (\n            <TagContent {...contentProps}>{children}</TagContent>\n          ) : null}\n\n          {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n          {onClose ? (\n            <TagCloseButton onClick={onClose} {...closeButtonProps} />\n          ) : null}\n        </styled.span>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n  undefined,\n  (props) => {\n    const { disabled } = useComponentContext()\n\n    return { \"data-disabled\": dataAttr(disabled), ...props }\n  },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n  \"icon\",\n  \"start\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n  \"icon\",\n  \"end\",\n])(undefined, (props) => {\n  const { disabled } = useComponentContext()\n\n  return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n  \"icon\",\n  \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n  const ref = useRef<HTMLSpanElement>(null)\n  const { disabled } = useComponentContext()\n  const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n  const { t } = useI18n(\"tag\")\n\n  return {\n    \"aria-label\": t(\"Close tag\"),\n    \"data-disabled\": dataAttr(disabled),\n    children: children || <XIcon />,\n    ...rest,\n  }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;AAkDA,MAAM,EACJ,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,iBACEA,6CAA0D,OAAOC,2BAAS;;;;;;AAS9E,MAAa,MAAM,cAChB,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,QACA,GAAG,WACC;AAGJ,QACE,2CAAC;EAAiB,iCAHW,EAAE,UAAU,GAAG,CAAC,SAAS,CAAC;YAIrD,4CAACC,uBAAO;GAAK,iEAAwB,SAAS;GAAE,GAAI;;IACjD,YACC,2CAAC;KAAa,GAAI;eAAY;MAAyB,GACrD;IAEH,WACC,2CAAC;KAAW,GAAI;KAAe;MAAsB,GACnD;IAEH,UAAU,2CAAC;KAAW,GAAI;eAAY;MAAqB,GAAG;IAE9D,UACC,2CAAC;KAAe,SAAS;KAAS,GAAI;MAAoB,GACxD;;IACQ;GACG;GAGvB,QACA,EAAE,eAAe,CAAC,WAAW,EAAE,CAChC,EAAE;AAIH,MAAM,aAAa,YAAqC,QAAQ,UAAU,CACxE,SACC,UAAU;CACT,MAAM,EAAE,aAAa,qBAAqB;AAE1C,QAAO;EAAE,iEAA0B,SAAS;EAAE,GAAG;EAAO;EAE3D;AAID,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,QACD,CAAC,CAAC,SAAY,UAAU;CACvB,MAAM,EAAE,aAAa,qBAAqB;AAE1C,QAAO;EAAE,iEAA0B,SAAS;EAAE,GAAG;EAAO;EACxD;AAIF,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,MACD,CAAC,CAAC,SAAY,UAAU;CACvB,MAAM,EAAE,aAAa,qBAAqB;AAE1C,QAAO;EAAE,iEAA0B,SAAS;EAAE,GAAG;EAAO;EACxD;AAIF,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,cACD,CAAC,CAAC,SAAY,EAAE,SAAU,GAAG,YAAY;CACxC,MAAM,wBAA8B,KAAK;CACzC,MAAM,EAAE,aAAa,qBAAqB;CAC1C,MAAM,OAAOC,+CAA8B;EAAE;EAAK;EAAU,GAAG;EAAO,CAAC;CACvE,MAAM,EAAE,MAAMC,8BAAQ,MAAM;AAE5B,QAAO;EACL,cAAc,EAAE,YAAY;EAC5B,iEAA0B,SAAS;EACnC,UAAU,YAAY,2CAACC,yBAAQ;EAC/B,GAAG;EACJ;EACD"}