@yamada-ui/ripple 1.0.37 → 1.0.38-dev-20240917033401
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.
- package/dist/{chunk-THIPZXWS.mjs → chunk-2JIZYPK4.mjs} +1 -1
- package/dist/chunk-2JIZYPK4.mjs.map +1 -0
- package/dist/{chunk-Y7JVYJGR.mjs → chunk-QSFNYWP4.mjs} +1 -1
- package/dist/chunk-QSFNYWP4.mjs.map +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/ripple.d.mts +2 -2
- package/dist/ripple.d.ts +2 -2
- package/dist/ripple.js.map +1 -1
- package/dist/ripple.mjs +1 -1
- package/dist/use-ripple.d.mts +4 -4
- package/dist/use-ripple.d.ts +4 -4
- package/dist/use-ripple.js.map +1 -1
- package/dist/use-ripple.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-THIPZXWS.mjs.map +0 -1
- package/dist/chunk-Y7JVYJGR.mjs.map +0 -1
|
@@ -0,0 +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":[]}
|
|
@@ -0,0 +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 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,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,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,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/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
|
|
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"]}
|
package/dist/index.mjs
CHANGED
package/dist/ripple.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import { MotionProps } from '@yamada-ui/motion';
|
|
|
2
2
|
import { Key, FC } from 'react';
|
|
3
3
|
import { RippleOptions } from './use-ripple.mjs';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
interface RippleProps extends MotionProps<"span"> {
|
|
6
6
|
/**
|
|
7
7
|
* If `true`, disable ripple effects when pressing a element.
|
|
8
8
|
*
|
|
@@ -11,7 +11,7 @@ type RippleProps = MotionProps<"span"> & {
|
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
ripples: RippleOptions[];
|
|
13
13
|
onClear: (key: Key) => void;
|
|
14
|
-
}
|
|
14
|
+
}
|
|
15
15
|
/**
|
|
16
16
|
* `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
|
|
17
17
|
*
|
package/dist/ripple.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { MotionProps } from '@yamada-ui/motion';
|
|
|
2
2
|
import { Key, FC } from 'react';
|
|
3
3
|
import { RippleOptions } from './use-ripple.js';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
interface RippleProps extends MotionProps<"span"> {
|
|
6
6
|
/**
|
|
7
7
|
* If `true`, disable ripple effects when pressing a element.
|
|
8
8
|
*
|
|
@@ -11,7 +11,7 @@ type RippleProps = MotionProps<"span"> & {
|
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
ripples: RippleOptions[];
|
|
13
13
|
onClear: (key: Key) => void;
|
|
14
|
-
}
|
|
14
|
+
}
|
|
15
15
|
/**
|
|
16
16
|
* `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
|
|
17
17
|
*
|
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
|
|
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":[]}
|
package/dist/ripple.mjs
CHANGED
package/dist/use-ripple.d.mts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React, { PointerEventHandler, Key } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface RippleOptions {
|
|
4
4
|
key: React.Key;
|
|
5
5
|
x: number;
|
|
6
6
|
y: number;
|
|
7
7
|
size: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
8
|
+
}
|
|
9
|
+
interface UseRippleProps<T extends any = HTMLElement> {
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
onPointerDown?: PointerEventHandler<T>;
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
declare const useRipple: <T extends unknown = HTMLElement>({ disabled, isDisabled, ...rest }?: UseRippleProps<T>) => {
|
|
15
15
|
ripples: RippleOptions[];
|
|
16
16
|
onPointerDown: (event: React.PointerEvent<T>) => void;
|
package/dist/use-ripple.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React, { PointerEventHandler, Key } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
interface RippleOptions {
|
|
4
4
|
key: React.Key;
|
|
5
5
|
x: number;
|
|
6
6
|
y: number;
|
|
7
7
|
size: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
8
|
+
}
|
|
9
|
+
interface UseRippleProps<T extends any = HTMLElement> {
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
onPointerDown?: PointerEventHandler<T>;
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
14
|
declare const useRipple: <T extends unknown = HTMLElement>({ disabled, isDisabled, ...rest }?: UseRippleProps<T>) => {
|
|
15
15
|
ripples: RippleOptions[];
|
|
16
16
|
onPointerDown: (event: React.PointerEvent<T>) => void;
|
package/dist/use-ripple.js.map
CHANGED
|
@@ -1 +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
|
|
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 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,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,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,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
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/ripple",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.38-dev-20240917033401",
|
|
4
4
|
"description": "Yamada UI ripple component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@yamada-ui/core": "1.14.
|
|
27
|
-
"@yamada-ui/motion": "2.2.
|
|
28
|
-
"@yamada-ui/utils": "1.5.
|
|
26
|
+
"@yamada-ui/core": "1.14.1-dev-20240917033401",
|
|
27
|
+
"@yamada-ui/motion": "2.2.2-dev-20240917033401",
|
|
28
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917033401"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
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 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\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 +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,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,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":[]}
|