@yamada-ui/ripple 0.1.6 → 0.1.8

package/dist/chunk-7UEZ3464.mjs

@@ -0,0 +1,42 @@
+// src/use-ripple.ts
+import { createId, handlerAll } from "@yamada-ui/utils";
+import { useCallback, useState } from "react";
+var useRipple = ({
+  disabled,
+  isDisabled,
+  ...rest
+} = {}) => {
+  const [ripples, setRipples] = useState([]);
+  const onPointerDown = useCallback(
+    (ev) => {
+      if (disabled || isDisabled)
+        return setRipples([]);
+      const trigger = ev.currentTarget;
+      const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+      const rect = trigger.getBoundingClientRect();
+      setRipples((prev) => [
+        ...prev,
+        {
+          key: createId(prev.length.toString()),
+          size,
+          x: ev.clientX - rect.x - size / 2,
+          y: ev.clientY - rect.y - size / 2
+        }
+      ]);
+    },
+    [disabled, isDisabled]
+  );
+  const onClear = useCallback((key) => {
+    setRipples((prev) => prev.filter((item) => item.key !== key));
+  }, []);
+  return {
+    ripples,
+    onPointerDown: handlerAll(onPointerDown, rest.onPointerDown),
+    onClear
+  };
+};
+
+export {
+  useRipple
+};
+//# sourceMappingURL=chunk-7UEZ3464.mjs.map

package/dist/chunk-7UEZ3464.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  disabled?: boolean\n  isDisabled?: boolean\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>({\n  disabled,\n  isDisabled,\n  ...rest\n}: UseRippleProps<T> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback(\n    (ev) => {\n      if (disabled || isDisabled) return setRipples([])\n\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    [disabled, isDisabled],\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, rest.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";AAAA,SAAS,UAAU,kBAAkB;AAGrC,SAAS,aAAa,gBAAgB;AAe/B,IAAM,YAAY,CAA8B;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACL,IAAuB,CAAC,MAAM;AAC5B,QAAM,CAAC,SAAS,UAAU,IAAI,SAA0B,CAAC,CAAC;AAE1D,QAAM,gBAAwC;AAAA,IAC5C,CAAC,OAAO;AACN,UAAI,YAAY;AAAY,eAAO,WAAW,CAAC,CAAC;AAEhD,YAAM,UAAU,GAAG;AAEnB,YAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,YAAM,OAAO,QAAQ,sBAAsB;AAE3C,iBAAW,CAAC,SAAS;AAAA,QACnB,GAAG;AAAA,QACH;AAAA,UACE,KAAK,SAAS,KAAK,OAAO,SAAS,CAAC;AAAA,UACpC;AAAA,UACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,UAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,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,KAAK,aAAa;AAAA,IAC3D;AAAA,EACF;AACF;","names":[]}

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

@@ -15,6 +15,10 @@ var Ripple = ({
 }) => {
   if (isDisabled)
     return null;
+  const css = {
+    rounded: "full",
+    zIndex: "kurillin"
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: ripples.map(({ key, x, y, size }) => {
     const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
     return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
@@ -26,19 +30,18 @@ var Ripple = ({
         animate: { transform: "scale(2)", opacity: 0 },
         exit: { opacity: 0 },
         transition: { duration },
+        bgColor: color,
         style: {
           position: "absolute",
-          backgroundColor: color,
-          borderRadius: "100%",
           transformOrigin: "center",
           pointerEvents: "none",
-          zIndex: 10,
           left: x,
           top: y,
           width: `${size}px`,
           height: `${size}px`,
           ...style
         },
+        __css: css,
         ...rest,
         onAnimationComplete: handlerAll(
           onAnimationComplete,
@@ -52,4 +55,4 @@ var Ripple = ({
 export {
   Ripple
 };
-//# sourceMappingURL=chunk-2NFFJSZI.mjs.map
+//# sourceMappingURL=chunk-Y6YV24HU.mjs.map

package/dist/chunk-Y6YV24HU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { 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  const css: CSSUIObject = {\n    rounded: \"full\",\n    zIndex: \"kurillin\",\n  }\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              bgColor={color}\n              style={{\n                position: \"absolute\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              __css={css}\n              {...rest}\n              onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                onClear(key),\n              )}\n            />\n          </AnimatePresence>\n        )\n      })}\n    </>\n  )\n}\n"],"mappings":";AACA,SAAS,iBAAiB,cAAgC;AAC1D,SAAS,IAAI,kBAAkB;AAoC3B,mBAMQ,WANR;AAhCJ,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,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAEA,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,SAAS;AAAA,QACT,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAxBoB,GAyBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/index.js

@@ -42,6 +42,10 @@ var Ripple = ({
 }) => {
   if (isDisabled)
     return null;
+  const css = {
+    rounded: "full",
+    zIndex: "kurillin"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
     const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -53,19 +57,18 @@ var Ripple = ({
         animate: { transform: "scale(2)", opacity: 0 },
         exit: { opacity: 0 },
         transition: { duration },
+        bgColor: color,
         style: {
           position: "absolute",
-          backgroundColor: color,
-          borderRadius: "100%",
           transformOrigin: "center",
           pointerEvents: "none",
-          zIndex: 10,
           left: x,
           top: y,
           width: `${size}px`,
           height: `${size}px`,
           ...style
         },
+        __css: css,
         ...rest,
         onAnimationComplete: (0, import_utils.handlerAll)(
           onAnimationComplete,
@@ -79,28 +82,37 @@ var Ripple = ({
 // src/use-ripple.ts
 var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
-var useRipple = (props) => {
+var useRipple = ({
+  disabled,
+  isDisabled,
+  ...rest
+} = {}) => {
   const [ripples, setRipples] = (0, import_react.useState)([]);
-  const onPointerDown = (0, import_react.useCallback)((ev) => {
-    const trigger = ev.currentTarget;
-    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
-    const rect = trigger.getBoundingClientRect();
-    setRipples((prev) => [
-      ...prev,
-      {
-        key: (0, import_utils2.createId)(prev.length.toString()),
-        size,
-        x: ev.clientX - rect.x - size / 2,
-        y: ev.clientY - rect.y - size / 2
-      }
-    ]);
-  }, []);
+  const onPointerDown = (0, import_react.useCallback)(
+    (ev) => {
+      if (disabled || isDisabled)
+        return setRipples([]);
+      const trigger = ev.currentTarget;
+      const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+      const rect = trigger.getBoundingClientRect();
+      setRipples((prev) => [
+        ...prev,
+        {
+          key: (0, import_utils2.createId)(prev.length.toString()),
+          size,
+          x: ev.clientX - rect.x - size / 2,
+          y: ev.clientY - rect.y - size / 2
+        }
+      ]);
+    },
+    [disabled, isDisabled]
+  );
   const onClear = (0, import_react.useCallback)((key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key));
   }, []);
   return {
     ripples,
-    onPointerDown: (0, import_utils2.handlerAll)(onPointerDown, props.onPointerDown),
+    onPointerDown: (0, import_utils2.handlerAll)(onPointerDown, rest.onPointerDown),
     onClear
   };
 };

package/dist/index.js.map

@@ -1 +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"]}
+{"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 type { CSSUIObject } from \"@yamada-ui/core\"\nimport { 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  const css: CSSUIObject = {\n    rounded: \"full\",\n    zIndex: \"kurillin\",\n  }\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              bgColor={color}\n              style={{\n                position: \"absolute\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              __css={css}\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  disabled?: boolean\n  isDisabled?: boolean\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>({\n  disabled,\n  isDisabled,\n  ...rest\n}: UseRippleProps<T> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback(\n    (ev) => {\n      if (disabled || isDisabled) return setRipples([])\n\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    [disabled, isDisabled],\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, rest.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAA0D;AAC1D,mBAA+B;AAoC3B;AAhCJ,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,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAEA,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,SAAS;AAAA,QACT,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,yBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAxBoB,GAyBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;;;ACzEA,IAAAA,gBAAqC;AAGrC,mBAAsC;AAe/B,IAAM,YAAY,CAA8B;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACL,IAAuB,CAAC,MAAM;AAC5B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC;AAAA,IAC5C,CAAC,OAAO;AACN,UAAI,YAAY;AAAY,eAAO,WAAW,CAAC,CAAC;AAEhD,YAAM,UAAU,GAAG;AAEnB,YAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,YAAM,OAAO,QAAQ,sBAAsB;AAE3C,iBAAW,CAAC,SAAS;AAAA,QACnB,GAAG;AAAA,QACH;AAAA,UACE,SAAK,wBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,UACpC;AAAA,UACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,UAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,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,KAAK,aAAa;AAAA,IAC3D;AAAA,EACF;AACF;","names":["import_utils"]}

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import {
   Ripple
-} from "./chunk-2NFFJSZI.mjs";
+} from "./chunk-Y6YV24HU.mjs";
 import {
   useRipple
-} from "./chunk-6F4CPIWQ.mjs";
+} from "./chunk-7UEZ3464.mjs";
 export {
   Ripple,
   useRipple

package/dist/ripple.js

@@ -39,6 +39,10 @@ var Ripple = ({
 }) => {
   if (isDisabled)
     return null;
+  const css = {
+    rounded: "full",
+    zIndex: "kurillin"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
     const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -50,19 +54,18 @@ var Ripple = ({
         animate: { transform: "scale(2)", opacity: 0 },
         exit: { opacity: 0 },
         transition: { duration },
+        bgColor: color,
         style: {
           position: "absolute",
-          backgroundColor: color,
-          borderRadius: "100%",
           transformOrigin: "center",
           pointerEvents: "none",
-          zIndex: 10,
           left: x,
           top: y,
           width: `${size}px`,
           height: `${size}px`,
           ...style
         },
+        __css: css,
         ...rest,
         onAnimationComplete: (0, import_utils.handlerAll)(
           onAnimationComplete,

package/dist/ripple.js.map

@@ -1 +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":[]}
+{"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { 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  const css: CSSUIObject = {\n    rounded: \"full\",\n    zIndex: \"kurillin\",\n  }\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              bgColor={color}\n              style={{\n                position: \"absolute\",\n                transformOrigin: \"center\",\n                pointerEvents: \"none\",\n                left: x,\n                top: y,\n                width: `${size}px`,\n                height: `${size}px`,\n                ...style,\n              }}\n              __css={css}\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;AACA,oBAA0D;AAC1D,mBAA+B;AAoC3B;AAhCJ,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,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAEA,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,SAAS;AAAA,QACT,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,yBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAxBoB,GAyBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/ripple.mjs

@@ -1,6 +1,6 @@
 import {
   Ripple
-} from "./chunk-2NFFJSZI.mjs";
+} from "./chunk-Y6YV24HU.mjs";
 export {
   Ripple
 };

package/dist/use-ripple.d.mts

@@ -7,9 +7,11 @@ type RippleOptions = {
     size: number;
 };
 type UseRippleProps<T extends any = HTMLElement> = {
+    disabled?: boolean;
+    isDisabled?: boolean;
     onPointerDown?: PointerEventHandler<T>;
 };
-declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
+declare const useRipple: <T extends unknown = HTMLElement>({ disabled, isDisabled, ...rest }?: UseRippleProps<T>) => {
     ripples: RippleOptions[];
     onPointerDown: (event: React.PointerEvent<T>) => void;
     onClear: (key: Key) => void;

package/dist/use-ripple.d.ts

@@ -7,9 +7,11 @@ type RippleOptions = {
     size: number;
 };
 type UseRippleProps<T extends any = HTMLElement> = {
+    disabled?: boolean;
+    isDisabled?: boolean;
     onPointerDown?: PointerEventHandler<T>;
 };
-declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
+declare const useRipple: <T extends unknown = HTMLElement>({ disabled, isDisabled, ...rest }?: UseRippleProps<T>) => {
     ripples: RippleOptions[];
     onPointerDown: (event: React.PointerEvent<T>) => void;
     onClear: (key: Key) => void;

package/dist/use-ripple.js

@@ -25,28 +25,37 @@ __export(use_ripple_exports, {
 module.exports = __toCommonJS(use_ripple_exports);
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
-var useRipple = (props) => {
+var useRipple = ({
+  disabled,
+  isDisabled,
+  ...rest
+} = {}) => {
   const [ripples, setRipples] = (0, import_react.useState)([]);
-  const onPointerDown = (0, import_react.useCallback)((ev) => {
-    const trigger = ev.currentTarget;
-    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
-    const rect = trigger.getBoundingClientRect();
-    setRipples((prev) => [
-      ...prev,
-      {
-        key: (0, import_utils.createId)(prev.length.toString()),
-        size,
-        x: ev.clientX - rect.x - size / 2,
-        y: ev.clientY - rect.y - size / 2
-      }
-    ]);
-  }, []);
+  const onPointerDown = (0, import_react.useCallback)(
+    (ev) => {
+      if (disabled || isDisabled)
+        return setRipples([]);
+      const trigger = ev.currentTarget;
+      const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+      const rect = trigger.getBoundingClientRect();
+      setRipples((prev) => [
+        ...prev,
+        {
+          key: (0, import_utils.createId)(prev.length.toString()),
+          size,
+          x: ev.clientX - rect.x - size / 2,
+          y: ev.clientY - rect.y - size / 2
+        }
+      ]);
+    },
+    [disabled, isDisabled]
+  );
   const onClear = (0, import_react.useCallback)((key) => {
     setRipples((prev) => prev.filter((item) => item.key !== key));
   }, []);
   return {
     ripples,
-    onPointerDown: (0, import_utils.handlerAll)(onPointerDown, props.onPointerDown),
+    onPointerDown: (0, import_utils.handlerAll)(onPointerDown, rest.onPointerDown),
     onClear
   };
 };

package/dist/use-ripple.js.map

@@ -1 +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":[]}
+{"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  disabled?: boolean\n  isDisabled?: boolean\n  onPointerDown?: PointerEventHandler<T>\n}\n\nexport const useRipple = <T extends any = HTMLElement>({\n  disabled,\n  isDisabled,\n  ...rest\n}: UseRippleProps<T> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onPointerDown: PointerEventHandler<T> = useCallback(\n    (ev) => {\n      if (disabled || isDisabled) return setRipples([])\n\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    [disabled, isDisabled],\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, rest.onPointerDown),\n    onClear,\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAGrC,mBAAsC;AAe/B,IAAM,YAAY,CAA8B;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACL,IAAuB,CAAC,MAAM;AAC5B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA0B,CAAC,CAAC;AAE1D,QAAM,oBAAwC;AAAA,IAC5C,CAAC,OAAO;AACN,UAAI,YAAY;AAAY,eAAO,WAAW,CAAC,CAAC;AAEhD,YAAM,UAAU,GAAG;AAEnB,YAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;AAC/D,YAAM,OAAO,QAAQ,sBAAsB;AAE3C,iBAAW,CAAC,SAAS;AAAA,QACnB,GAAG;AAAA,QACH;AAAA,UACE,SAAK,uBAAS,KAAK,OAAO,SAAS,CAAC;AAAA,UACpC;AAAA,UACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,UAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,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,KAAK,aAAa;AAAA,IAC3D;AAAA,EACF;AACF;","names":[]}

package/dist/use-ripple.mjs

@@ -1,6 +1,6 @@
 import {
   useRipple
-} from "./chunk-6F4CPIWQ.mjs";
+} from "./chunk-7UEZ3464.mjs";
 export {
   useRipple
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/ripple",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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.15.1",
-    "@yamada-ui/utils": "0.5.0",
-    "@yamada-ui/motion": "0.4.26"
+    "@yamada-ui/core": "0.15.2",
+    "@yamada-ui/utils": "0.5.1",
+    "@yamada-ui/motion": "0.4.27"
   },
   "devDependencies": {
     "react": "^18.0.0",

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

@@ -1 +0,0 @@
-{"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-6F4CPIWQ.mjs

@@ -1,33 +0,0 @@
-// src/use-ripple.ts
-import { createId, handlerAll } from "@yamada-ui/utils";
-import { useCallback, useState } from "react";
-var useRipple = (props) => {
-  const [ripples, setRipples] = useState([]);
-  const onPointerDown = useCallback((ev) => {
-    const trigger = ev.currentTarget;
-    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
-    const rect = trigger.getBoundingClientRect();
-    setRipples((prev) => [
-      ...prev,
-      {
-        key: createId(prev.length.toString()),
-        size,
-        x: ev.clientX - rect.x - size / 2,
-        y: ev.clientY - rect.y - size / 2
-      }
-    ]);
-  }, []);
-  const onClear = useCallback((key) => {
-    setRipples((prev) => prev.filter((item) => item.key !== key));
-  }, []);
-  return {
-    ripples,
-    onPointerDown: handlerAll(onPointerDown, props.onPointerDown),
-    onClear
-  };
-};
-
-export {
-  useRipple
-};
-//# sourceMappingURL=chunk-6F4CPIWQ.mjs.map

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

@@ -1 +0,0 @@
-{"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":[]}