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

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

{"version":3,"file":"ripple.cjs","names":["createComponent","rippleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">,\n    ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nconst {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/docs/components/ripple\n */\nexport const Ripple = withContext<\"span\", RippleProps>(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;AAqBrC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yCAA0C,UAAUC,iCAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,QACA,GAAG,WACC;AACJ,KAAI,SAAU,QAAO;AAErB,QACE,mFACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,GAAI;AAEjE,SACE,2CAACC;GAA0B,MAAK;aAC9B,2CAACC,uBAAO;IACN,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;KACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;KAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,GAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;KAAY;IACjD,YAAY,EAAE,UAAU;IACxB,GAAI;IACJ,uEAAgC,2BAC9B,QAAQ,IAAI,CACb;KACD;KArBkB,IAsBJ;GAEpB,GACD;EAGR,EAAE"}