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

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

{"version":3,"file":"fade.cjs","names":["fadeVariants: Variants","createTransition","createComponent","fadeStyle","AnimatePresence","motion"],"sources":["../../../../src/components/fade/fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n  HTMLMotionProps,\n  MotionTransitionVariants,\n  WithTransitionProps,\n} from \"../motion\"\nimport type { FadeStyle } from \"./fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeStyle } from \"./fade.style\"\n\nexport const fadeVariants: Variants = {\n  enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n    opacity: 1,\n    transition: createTransition.enter(transition?.enter)(delay, duration),\n    transitionEnd: transitionEnd?.enter,\n    ...enter,\n  }),\n  exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n    opacity: 0,\n    transition: createTransition.exit(transition?.exit)(delay, duration),\n    transitionEnd: transitionEnd?.exit,\n    ...exit,\n  }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeProps\n  extends WithTransitionProps<HTMLMotionProps>,\n    ThemeProps<FadeStyle> {}\n\nconst {\n  PropsContext: FadePropsContext,\n  usePropsContext: useFadePropsContext,\n  withContext,\n} = createComponent<FadeProps, FadeStyle>(\"fade\", fadeStyle)\n\nexport { FadePropsContext, useFadePropsContext }\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see https://yamada-ui.com/docs/components/fade\n */\nexport const Fade = withContext<\"div\", FadeProps>(\n  ({\n    delay,\n    duration,\n    open: openProp,\n    transition,\n    transitionEnd,\n    unmountOnExit,\n    ...rest\n  }) => {\n    const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n    const open = unmountOnExit ? openProp && unmountOnExit : true\n\n    const custom = useMemo(\n      () => ({\n        delay,\n        duration,\n        transition,\n        transitionEnd,\n      }),\n      [delay, duration, transition, transitionEnd],\n    )\n\n    return (\n      <AnimatePresence custom={custom}>\n        {open ? (\n          <motion.div\n            animate={animate}\n            custom={custom}\n            exit=\"exit\"\n            initial=\"exit\"\n            variants={fadeVariants}\n            {...rest}\n          />\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAaA,eAAyB;CACpC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,EAAE,MAAM;EACtE,SAAS;EACT,YAAYC,oCAAiB,MAAM,YAAY,MAAM,CAAC,OAAO,SAAS;EACtE,eAAe,eAAe;EAC9B,GAAG;EACJ;CACD,OAAO,EAAE,OAAO,UAAU,MAAM,YAAY,kBAAkB,EAAE,MAAM;EACpE,SAAS;EACT,YAAYA,oCAAiB,KAAK,YAAY,KAAK,CAAC,OAAO,SAAS;EACpE,eAAe,eAAe;EAC9B,GAAG;EACJ;CACF;AAMD,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEC,yCAAsC,QAAQC,6BAAU;;;;;;AAS5D,MAAa,OAAO,aACjB,EACC,OACA,UACA,MAAM,UACN,YACA,eACA,cACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,mCACG;EACL;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAU;EAAY;EAAc,CAC7C;AAED,QACE,2CAACC;EAAwB;YACtB,OACC,2CAACC,uBAAO;GACG;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;IACJ,GACA;GACY;EAGvB,EAAE"}