{"version":3,"sources":["../src/fade.tsx"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type {\n  MotionProps,\n  MotionTransitionVariants,\n  MotionVariants,\n  WithTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { omitThemeProps, useComponentStyle } from \"@yamada-ui/core\"\nimport {\n  AnimatePresence,\n  motion,\n  motionForwardRef,\n  transitionEnter,\n  transitionExit,\n} from \"@yamada-ui/motion\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst variants: MotionVariants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    transition: transitionEnter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n    opacity: 0,\n    transition: transitionExit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport const fadeProps = {\n  animate: \"enter\",\n  exit: \"exit\",\n  initial: \"exit\",\n  variants,\n}\n\nexport interface FadeProps\n  extends WithTransitionProps<MotionProps>,\n    ThemeProps<\"Fade\"> {}\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see Docs https://yamada-ui.com/components/transitions/fade\n */\nexport const Fade = motionForwardRef<FadeProps, \"div\">((props, ref) => {\n  const [style, mergedProps] = useComponentStyle(\"Fade\", props)\n  const {\n    className,\n    delay,\n    duration,\n    isOpen,\n    open = isOpen,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const animate = open || unmountOnExit ? \"enter\" : \"exit\"\n  const custom = { delay, duration, transition, transitionEnd }\n  const resolvedOpen = unmountOnExit ? open && unmountOnExit : true\n\n  return (\n    <AnimatePresence custom={custom}>\n      {resolvedOpen ? (\n        <motion.div\n          ref={ref}\n          className={cx(\"ui-fade\", className)}\n          custom={custom}\n          {...fadeProps}\n          animate={animate}\n          __css={style}\n          {...rest}\n        />\n      ) : null}\n    </AnimatePresence>\n  )\n})\n\nFade.displayName = \"Fade\"\nFade.__ui__ = \"Fade\"\n"],"mappings":";;;AAOA,SAAS,gBAAgB,yBAAyB;AAClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAqDX;AAnDR,IAAM,WAA2B;AAAA,EAC/B,OAAO,CAAC,EAAE,OAAO,UAAU,OAAO,YAAY,cAAc,IAAI,CAAC,OAAO;AAAA,IACtE,SAAS;AAAA,IACT,YAAY,gBAAgB,yCAAY,KAAK,EAAE,OAAO,QAAQ;AAAA,IAC9D,eAAe,+CAAe;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,MAAM,CAAC,EAAE,OAAO,UAAU,MAAM,YAAY,cAAc,IAAI,CAAC,OAAO;AAAA,IACpE,SAAS;AAAA,IACT,YAAY,eAAe,yCAAY,IAAI,EAAE,OAAO,QAAQ;AAAA,IAC5D,eAAe,+CAAe;AAAA,IAC9B,GAAG;AAAA,EACL;AACF;AAEO,IAAM,YAAY;AAAA,EACvB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT;AACF;AAWO,IAAM,OAAO,iBAAmC,CAAC,OAAO,QAAQ;AACrE,QAAM,CAAC,OAAO,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAC9B,QAAM,UAAU,QAAQ,gBAAgB,UAAU;AAClD,QAAM,SAAS,EAAE,OAAO,UAAU,YAAY,cAAc;AAC5D,QAAM,eAAe,gBAAgB,QAAQ,gBAAgB;AAE7D,SACE,oBAAC,mBAAgB,QACd,yBACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN,IACE,MACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":[]}