@yamada-ui/ripple 1.0.39 → 1.0.40-dev-20240929142808

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/{chunk-2JIZYPK4.mjs → chunk-N2WO662B.mjs} +3 -1
  2. package/dist/{chunk-2JIZYPK4.mjs.map → chunk-N2WO662B.mjs.map} +1 -1
  3. package/dist/index.d.mts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +2 -0
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/ripple.d.mts +2 -1
  9. package/dist/ripple.d.ts +2 -1
  10. package/dist/ripple.js +2 -0
  11. package/dist/ripple.js.map +1 -1
  12. package/dist/ripple.mjs +1 -1
  13. package/package.json +1 -1
package/dist/{chunk-2JIZYPK4.mjs → chunk-N2WO662B.mjs} RENAMED
@@ -51,8 +51,10 @@ var Ripple = ({
51
51
  ) }, key);
52
52
  }) });
53
53
  };
54
+ Ripple.displayName = "Ripple";
55
+ Ripple.__ui__ = "Ripple";
54
56
 
55
57
  export {
56
58
  Ripple
57
59
  };
58
- //# sourceMappingURL=chunk-2JIZYPK4.mjs.map
60
+ //# sourceMappingURL=chunk-N2WO662B.mjs.map
package/dist/{chunk-2JIZYPK4.mjs.map → chunk-N2WO662B.mjs.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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,cAAc;AAExC,SAAS,IAAI,kBAAkB;AAyC3B,mBAMQ,WANR;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,OAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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\nRipple.displayName = \"Ripple\"\nRipple.__ui__ = \"Ripple\"\n"],"mappings":";;;AACA,SAAS,iBAAiB,cAAc;AAExC,SAAS,IAAI,kBAAkB;AAyC3B,mBAMQ,WANR;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,OAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Ripple, RippleProps } from './ripple.mjs';
2
2
  export { RippleOptions, UseRippleProps, UseRippleReturn, useRipple } from './use-ripple.mjs';
3
+ import '@yamada-ui/core';
3
4
  import '@yamada-ui/motion';
4
5
  import 'react';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Ripple, RippleProps } from './ripple.js';
2
2
  export { RippleOptions, UseRippleProps, UseRippleReturn, useRipple } from './use-ripple.js';
3
+ import '@yamada-ui/core';
3
4
  import '@yamada-ui/motion';
4
5
  import 'react';
package/dist/index.js CHANGED
@@ -77,6 +77,8 @@ var Ripple = ({
77
77
  ) }, key);
78
78
  }) });
79
79
  };
80
+ Ripple.displayName = "Ripple";
81
+ Ripple.__ui__ = "Ripple";
80
82
 
81
83
  // src/use-ripple.ts
82
84
  var import_utils2 = require("@yamada-ui/utils");
package/dist/index.js.map CHANGED
@@ -1 +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 type { CSSUIObject } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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 interface RippleOptions {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport interface 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,oBAAwC;AAExC,mBAA+B;AAyC3B;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,qBAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;;;AC9EA,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,WAAY,QAAO,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"]}
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 type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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\nRipple.displayName = \"Ripple\"\nRipple.__ui__ = \"Ripple\"\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 interface RippleOptions {\n key: React.Key\n x: number\n y: number\n size: number\n}\n\nexport interface 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,oBAAwC;AAExC,mBAA+B;AAyC3B;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,qBAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;;;ACjFhB,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,WAAY,QAAO,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 CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Ripple
4
- } from "./chunk-2JIZYPK4.mjs";
4
+ } from "./chunk-N2WO662B.mjs";
5
5
  import {
6
6
  useRipple
7
7
  } from "./chunk-QSFNYWP4.mjs";
package/dist/ripple.d.mts CHANGED
@@ -1,5 +1,6 @@
1
+ import { FC } from '@yamada-ui/core';
1
2
  import { MotionProps } from '@yamada-ui/motion';
2
- import { Key, FC } from 'react';
3
+ import { Key } from 'react';
3
4
  import { RippleOptions } from './use-ripple.mjs';
4
5
 
5
6
  interface RippleProps extends MotionProps<"span"> {
package/dist/ripple.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import { FC } from '@yamada-ui/core';
1
2
  import { MotionProps } from '@yamada-ui/motion';
2
- import { Key, FC } from 'react';
3
+ import { Key } from 'react';
3
4
  import { RippleOptions } from './use-ripple.js';
4
5
 
5
6
  interface RippleProps extends MotionProps<"span"> {
package/dist/ripple.js CHANGED
@@ -74,6 +74,8 @@ var Ripple = ({
74
74
  ) }, key);
75
75
  }) });
76
76
  };
77
+ Ripple.displayName = "Ripple";
78
+ Ripple.__ui__ = "Ripple";
77
79
  // Annotate the CommonJS export names for ESM import in node:
78
80
  0 && (module.exports = {
79
81
  Ripple
package/dist/ripple.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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,oBAAwC;AAExC,mBAA+B;AAyC3B;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,qBAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion } from \"@yamada-ui/motion\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { 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 interface RippleProps extends 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\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see Docs https://yamada-ui.com/components/other/ripple\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: \"fallback(full, 9999px)\",\n zIndex: \"fallback(kurillin, 9)\",\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.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\nRipple.displayName = \"Ripple\"\nRipple.__ui__ = \"Ripple\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAwC;AAExC,mBAA+B;AAyC3B;AArCJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAkB7B,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,WAAY,QAAO;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,qBAAO;AAAA,MAAP;AAAA,QACC,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,KAvBoB,GAwBtB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}
package/dist/ripple.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Ripple
4
- } from "./chunk-2JIZYPK4.mjs";
4
+ } from "./chunk-N2WO662B.mjs";
5
5
  export {
6
6
  Ripple
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/ripple",
3
- "version": "1.0.39",
3
+ "version": "1.0.40-dev-20240929142808",
4
4
  "description": "Yamada UI ripple component",
5
5
  "keywords": [],
6
6
  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",