@yamada-ui/ripple 0.1.2 → 0.1.4

package/dist/{chunk-AY3JROH4.mjs → chunk-2NFFJSZI.mjs}

@@ -52,3 +52,4 @@ var Ripple = ({
 export {
   Ripple
 };
+//# sourceMappingURL=chunk-2NFFJSZI.mjs.map

package/dist/chunk-2NFFJSZI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  ripples: RippleOptions[]\n  onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n  className,\n  ripples,\n  onAnimationComplete,\n  onClear,\n  color = \"currentColor\",\n  style,\n  isDisabled,\n  ...rest\n}) => {\n  if (isDisabled) return null\n\n  return (\n    <>\n      {ripples.map(({ key, x, y, size }) => {\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\n              as=\"span\"\n              className={cx(\"ui-ripple\", className)}\n              initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n              animate={{ transform: \"scale(2)\", opacity: 0 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration }}\n              style={{\n                position: \"absolute\",\n                backgroundColor: color,\n                borderRadius: \"100%\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                zIndex: 10,\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              {...rest}\n              onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                onClear(key),\n              )}\n            />\n          </AnimatePresence>\n        )\n      })}\n    </>\n  )\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,cAAgC;AAC1D,SAAS,IAAI,kBAAkB;AA+B3B,mBAMQ,WANR;AA3BJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAa7B,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI;AAAY,WAAO;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,MAAM;AACpC,UAAM,WAAW,MAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,GAAG;AAEhE,WACE,oBAAC,mBAA0B,MAAK,aAC9B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAW,GAAG,aAAa,SAAS;AAAA,QACpC,SAAS,EAAE,WAAW,YAAY,SAAS,KAAK;AAAA,QAChD,SAAS,EAAE,WAAW,YAAY,SAAS,EAAE;AAAA,QAC7C,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,SAAS;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,qBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAzBoB,GA0BtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/{chunk-V3W3PQD3.mjs → chunk-6F4CPIWQ.mjs}

@@ -3,7 +3,7 @@ import { createId, handlerAll } from "@yamada-ui/utils";
 import { useCallback, useState } from "react";
 var useRipple = (props) => {
   const [ripples, setRipples] = useState([]);
-  const onClick = useCallback((ev) => {
+  const onPointerDown = useCallback((ev) => {
     const trigger = ev.currentTarget;
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     const rect = trigger.getBoundingClientRect();
@@ -20,9 +20,14 @@ var useRipple = (props) => {
   const onClear = useCallback((key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key));
   }, []);
-  return { ripples, onClick: handlerAll(onClick, props.onClick), onClear };
+  return {
+    ripples,
+    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),
+    onClear
+  };
 };
 
 export {
   useRipple
 };
+//# sourceMappingURL=chunk-6F4CPIWQ.mjs.map

package/dist/chunk-6F4CPIWQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n  key: React.Key\n  x: number\n  y: number\n  size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n  props: UseRippleProps<T>,\n) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n    const trigger = ev.currentTarget as unknown as Element\n\n    const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n    const rect = trigger.getBoundingClientRect()\n\n    setRipples((prev) => [\n      ...prev,\n      {\n        key: createId(prev.length.toString()),\n        size,\n        x: ev.clientX - rect.x - size / 2,\n        y: ev.clientY - rect.y - size / 2,\n      },\n    ])\n  }, [])\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AAGrC,SAAS,aAAa,gBAAgB;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,IAAI,SAA0B,CAAC,CAAC;AAE1D,QAAM,gBAAwC,YAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,KAAK,SAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,eAAe,WAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}

package/dist/index.js

@@ -81,7 +81,7 @@ var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
 var useRipple = (props) => {
   const [ripples, setRipples] = (0, import_react.useState)([]);
-  const onClick = (0, import_react.useCallback)((ev) => {
+  const onPointerDown = (0, import_react.useCallback)((ev) => {
     const trigger = ev.currentTarget;
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     const rect = trigger.getBoundingClientRect();
@@ -98,10 +98,15 @@ var useRipple = (props) => {
   const onClear = (0, import_react.useCallback)((key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key));
   }, []);
-  return { ripples, onClick: (0, import_utils2.handlerAll)(onClick, props.onClick), onClear };
+  return {
+    ripples,
+    onPointerDown: (0, import_utils2.handlerAll)(onPointerDown, props.onPointerDown),
+    onClear
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Ripple,
   useRipple
 });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ripple.tsx","../src/use-ripple.ts"],"sourcesContent":["export { Ripple } from \"./ripple\"\nexport type { RippleProps } from \"./ripple\"\nexport { useRipple } from \"./use-ripple\"\nexport type {\n  RippleOptions,\n  UseRippleProps,\n  UseRippleReturn,\n} from \"./use-ripple\"\n","import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  ripples: RippleOptions[]\n  onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n  className,\n  ripples,\n  onAnimationComplete,\n  onClear,\n  color = \"currentColor\",\n  style,\n  isDisabled,\n  ...rest\n}) => {\n  if (isDisabled) return null\n\n  return (\n    <>\n      {ripples.map(({ key, x, y, size }) => {\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\n              as=\"span\"\n              className={cx(\"ui-ripple\", className)}\n              initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n              animate={{ transform: \"scale(2)\", opacity: 0 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration }}\n              style={{\n                position: \"absolute\",\n                backgroundColor: color,\n                borderRadius: \"100%\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                zIndex: 10,\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              {...rest}\n              onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                onClear(key),\n              )}\n            />\n          </AnimatePresence>\n        )\n      })}\n    </>\n  )\n}\n","import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n  key: React.Key\n  x: number\n  y: number\n  size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n  props: UseRippleProps<T>,\n) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n    const trigger = ev.currentTarget as unknown as Element\n\n    const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n    const rect = trigger.getBoundingClientRect()\n\n    setRipples((prev) => [\n      ...prev,\n      {\n        key: createId(prev.length.toString()),\n        size,\n        x: ev.clientX - rect.x - size / 2,\n        y: ev.clientY - rect.y - size / 2,\n      },\n    ])\n  }, [])\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA0D;AAC1D,mBAA+B;AA+B3B;AA3BJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAa7B,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI;AAAY,WAAO;AAEvB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,MAAM;AACpC,UAAM,WAAW,MAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,GAAG;AAEhE,WACE,4CAAC,iCAA0B,MAAK,aAC9B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,eAAW,iBAAG,aAAa,SAAS;AAAA,QACpC,SAAS,EAAE,WAAW,YAAY,SAAS,KAAK;AAAA,QAChD,SAAS,EAAE,WAAW,YAAY,SAAS,EAAE;AAAA,QAC7C,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,SAAS;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,yBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAzBoB,GA0BtB;AAAA,EAEJ,CAAC,GACH;AAEJ;;;ACpEA,IAAAA,gBAAqC;AAGrC,mBAAsC;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC,0BAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,SAAK,wBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,0BAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,mBAAe,0BAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":["import_utils"]}

package/dist/index.mjs

@@ -1,10 +1,11 @@
 import {
   Ripple
-} from "./chunk-AY3JROH4.mjs";
+} from "./chunk-2NFFJSZI.mjs";
 import {
   useRipple
-} from "./chunk-V3W3PQD3.mjs";
+} from "./chunk-6F4CPIWQ.mjs";
 export {
   Ripple,
   useRipple
 };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/ripple.js

@@ -76,3 +76,4 @@ var Ripple = ({
 0 && (module.exports = {
   Ripple
 });
+//# sourceMappingURL=ripple.js.map

package/dist/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  ripples: RippleOptions[]\n  onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n  className,\n  ripples,\n  onAnimationComplete,\n  onClear,\n  color = \"currentColor\",\n  style,\n  isDisabled,\n  ...rest\n}) => {\n  if (isDisabled) return null\n\n  return (\n    <>\n      {ripples.map(({ key, x, y, size }) => {\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\n              as=\"span\"\n              className={cx(\"ui-ripple\", className)}\n              initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n              animate={{ transform: \"scale(2)\", opacity: 0 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration }}\n              style={{\n                position: \"absolute\",\n                backgroundColor: color,\n                borderRadius: \"100%\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                zIndex: 10,\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              {...rest}\n              onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                onClear(key),\n              )}\n            />\n          </AnimatePresence>\n        )\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA0D;AAC1D,mBAA+B;AA+B3B;AA3BJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAa7B,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI;AAAY,WAAO;AAEvB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,MAAM;AACpC,UAAM,WAAW,MAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,GAAG;AAEhE,WACE,4CAAC,iCAA0B,MAAK,aAC9B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,eAAW,iBAAG,aAAa,SAAS;AAAA,QACpC,SAAS,EAAE,WAAW,YAAY,SAAS,KAAK;AAAA,QAChD,SAAS,EAAE,WAAW,YAAY,SAAS,EAAE;AAAA,QAC7C,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,SAAS;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,yBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAzBoB,GA0BtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/ripple.mjs

@@ -1,6 +1,7 @@
 import {
   Ripple
-} from "./chunk-AY3JROH4.mjs";
+} from "./chunk-2NFFJSZI.mjs";
 export {
   Ripple
 };
+//# sourceMappingURL=ripple.mjs.map

package/dist/ripple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/use-ripple.d.mts

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, Key } from 'react';
+import React, { PointerEventHandler, Key } from 'react';
 
 type RippleOptions = {
     key: React.Key;
@@ -7,11 +7,11 @@ type RippleOptions = {
     size: number;
 };
 type UseRippleProps<T extends any = HTMLElement> = {
-    onClick?: MouseEventHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
 };
 declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
     ripples: RippleOptions[];
-    onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
+    onPointerDown: (event: React.PointerEvent<T>) => void;
     onClear: (key: Key) => void;
 };
 type UseRippleReturn = ReturnType<typeof useRipple>;

package/dist/use-ripple.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, Key } from 'react';
+import React, { PointerEventHandler, Key } from 'react';
 
 type RippleOptions = {
     key: React.Key;
@@ -7,11 +7,11 @@ type RippleOptions = {
     size: number;
 };
 type UseRippleProps<T extends any = HTMLElement> = {
-    onClick?: MouseEventHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
 };
 declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
     ripples: RippleOptions[];
-    onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
+    onPointerDown: (event: React.PointerEvent<T>) => void;
     onClear: (key: Key) => void;
 };
 type UseRippleReturn = ReturnType<typeof useRipple>;

package/dist/use-ripple.js

@@ -27,7 +27,7 @@ var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
 var useRipple = (props) => {
   const [ripples, setRipples] = (0, import_react.useState)([]);
-  const onClick = (0, import_react.useCallback)((ev) => {
+  const onPointerDown = (0, import_react.useCallback)((ev) => {
     const trigger = ev.currentTarget;
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     const rect = trigger.getBoundingClientRect();
@@ -44,9 +44,14 @@ var useRipple = (props) => {
   const onClear = (0, import_react.useCallback)((key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key));
   }, []);
-  return { ripples, onClick: (0, import_utils.handlerAll)(onClick, props.onClick), onClear };
+  return {
+    ripples,
+    onPointerDown: (0, import_utils.handlerAll)(onPointerDown, props.onPointerDown),
+    onClear
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useRipple
 });
+//# sourceMappingURL=use-ripple.js.map

package/dist/use-ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-ripple.ts"],"sourcesContent":["import { createId, handlerAll } from \"@yamada-ui/utils\"\nimport type React from \"react\"\nimport type { Key, PointerEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\n\nexport type RippleOptions = {\n  key: React.Key\n  x: number\n  y: number\n  size: number\n}\n\nexport type UseRippleProps<T extends any = HTMLElement> = {\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>(\n  props: UseRippleProps<T>,\n) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback((ev) => {\n    const trigger = ev.currentTarget as unknown as Element\n\n    const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n    const rect = trigger.getBoundingClientRect()\n\n    setRipples((prev) => [\n      ...prev,\n      {\n        key: createId(prev.length.toString()),\n        size,\n        x: ev.clientX - rect.x - size / 2,\n        y: ev.clientY - rect.y - size / 2,\n      },\n    ])\n  }, [])\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAGrC,mBAAsC;AAa/B,IAAM,YAAY,CACvB,UACG;AACH,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC,0BAAY,CAAC,OAAO;AAChE,UAAM,UAAU,GAAG;AAEnB,UAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,UAAM,OAAO,QAAQ,sBAAsB;AAE3C,eAAW,CAAC,SAAS;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,QACE,SAAK,uBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,QACpC;AAAA,QACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,0BAAY,CAAC,QAAa;AACxC,eAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA,mBAAe,yBAAW,eAAe,MAAM,aAAa;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}

package/dist/use-ripple.mjs

@@ -1,6 +1,7 @@
 import {
   useRipple
-} from "./chunk-V3W3PQD3.mjs";
+} from "./chunk-6F4CPIWQ.mjs";
 export {
   useRipple
 };
+//# sourceMappingURL=use-ripple.mjs.map

package/dist/use-ripple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/ripple",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Yamada UI ripple component",
   "keywords": [],
   "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
@@ -22,9 +22,9 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.14.0",
-    "@yamada-ui/utils": "0.4.1",
-    "@yamada-ui/motion": "0.4.22"
+    "@yamada-ui/core": "0.14.2",
+    "@yamada-ui/motion": "0.4.24",
+    "@yamada-ui/utils": "0.5.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -40,7 +40,8 @@
     "format": [
       "cjs",
       "esm"
-    ]
+    ],
+    "sourcemap": true
   },
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",