{"version":3,"file":"Image.mjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  polymorphicFactory,\n  PolymorphicFactory,\n  RaikouRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ImageRootStyle } from './Image.css';\n\nexport type ImageStylesNames = 'root';\nexport type ImageCssVariables = {\n  root: '--image-radius' | '--image-object-fit';\n};\n\nexport interface ImageProps extends BoxProps, StylesApiProps<ImageFactory> {\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `0` by default */\n  radius?: RaikouRadius;\n\n  /** Controls `object-fit` style, `'cover'` by default */\n  fit?: React.CSSProperties['objectFit'];\n\n  /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */\n  fallbackSrc?: string;\n\n  /** Image url */\n  src?: any;\n\n  /** Called when image fails to load */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n\nexport type ImageFactory = PolymorphicFactory<{\n  props: ImageProps;\n  defaultRef: HTMLImageElement;\n  defaultComponent: 'img';\n  stylesNames: ImageStylesNames;\n  vars: ImageCssVariables;\n}>;\n\nconst defaultProps: Partial<ImageProps> = {};\n\nconst varsResolver = createVarsResolver<ImageFactory>((_, { radius, fit }) => ({\n  root: {\n    '--image-radius': radius === undefined ? undefined : getRadius(radius),\n    '--image-object-fit': fit,\n  },\n}));\n\nexport const Image = polymorphicFactory<ImageFactory>((_props, ref) => {\n  const props = useProps('Image', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onError,\n    src,\n    radius,\n    fit,\n    fallbackSrc,\n    mod,\n    ...others\n  } = props;\n\n  const [error, setError] = useState(!src);\n\n  useEffect(() => setError(!src), [src]);\n\n  const getStyles = useStyles<ImageFactory>({\n    name: 'Image',\n    classes: {\n      root: ImageRootStyle,\n    },\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  if (error && fallbackSrc) {\n    return (\n      <Box\n        component=\"img\"\n        ref={ref}\n        src={fallbackSrc}\n        {...getStyles('root')}\n        onError={onError}\n        mod={['fallback', mod]}\n        {...others}\n      />\n    );\n  }\n\n  return (\n    <Box\n      component=\"img\"\n      ref={ref}\n      {...getStyles('root')}\n      src={src}\n      onError={(event) => {\n        onError?.(event);\n        setError(true);\n      }}\n      mod={mod}\n      {...others}\n    />\n  );\n});\n\nImage.displayName = '@raikou/core/Image';\n"],"names":[],"mappings":";;;;;;;;;;;;;AA6CA,MAAM,eAAoC,EAAC;AAE3C,MAAM,eAAe,kBAAiC,CAAA,CAAC,GAAG,EAAE,MAAA,EAAQ,KAAW,MAAA;AAAA,EAC7E,IAAM,EAAA;AAAA,IACJ,gBAAkB,EAAA,MAAA,KAAW,KAAY,CAAA,GAAA,KAAA,CAAA,GAAY,UAAU,MAAM,CAAA;AAAA,IACrE,oBAAsB,EAAA;AAAA;AAE1B,CAAE,CAAA,CAAA;AAEK,MAAM,KAAQ,GAAA,kBAAA,CAAiC,CAAC,MAAA,EAAQ,GAAQ,KAAA;AACrE,EAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,OAAS,EAAA,YAAA,EAAc,MAAM,CAAA;AACpD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,CAAC,GAAG,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM,QAAS,CAAA,CAAC,GAAG,CAAG,EAAA,CAAC,GAAG,CAAC,CAAA;AAErC,EAAA,MAAM,YAAY,SAAwB,CAAA;AAAA,IACxC,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACR;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,IAAI,SAAS,WAAa,EAAA;AACxB,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,GAAA;AAAA,QACA,GAAK,EAAA,WAAA;AAAA,QACJ,GAAG,UAAU,MAAM,CAAA;AAAA,QACpB,OAAA;AAAA,QACA,GAAA,EAAK,CAAC,UAAA,EAAY,GAAG,CAAA;AAAA,QACpB,GAAG;AAAA;AAAA,KACN;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,GAAA;AAAA,MACC,GAAG,UAAU,MAAM,CAAA;AAAA,MACpB,GAAA;AAAA,MACA,OAAA,EAAS,CAAC,KAAU,KAAA;AAClB,QAAA,OAAA,GAAU,KAAK,CAAA;AACf,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,OACf;AAAA,MACA,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAED,KAAA,CAAM,WAAc,GAAA,oBAAA;;;;"}