@yamada-ui/ripple 1.0.28 → 1.0.29-dev-20240614141936
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-HLIPTG3N.mjs → chunk-OXCWUOIP.mjs} +2 -3
- package/dist/{chunk-HLIPTG3N.mjs.map → chunk-OXCWUOIP.mjs.map} +1 -1
- package/dist/{chunk-MPGECCBI.mjs → chunk-Y7JVYJGR.mjs} +2 -3
- package/dist/{chunk-MPGECCBI.mjs.map → chunk-Y7JVYJGR.mjs.map} +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/ripple.js +1 -2
- package/dist/ripple.js.map +1 -1
- package/dist/ripple.mjs +1 -1
- package/dist/use-ripple.js +1 -2
- package/dist/use-ripple.js.map +1 -1
- package/dist/use-ripple.mjs +1 -1
- package/package.json +3 -3
|
@@ -15,8 +15,7 @@ var Ripple = ({
|
|
|
15
15
|
isDisabled,
|
|
16
16
|
...rest
|
|
17
17
|
}) => {
|
|
18
|
-
if (isDisabled)
|
|
19
|
-
return null;
|
|
18
|
+
if (isDisabled) return null;
|
|
20
19
|
const css = {
|
|
21
20
|
rounded: "fallback(full, 9999px)",
|
|
22
21
|
zIndex: "fallback(kurillin, 9)"
|
|
@@ -57,4 +56,4 @@ var Ripple = ({
|
|
|
57
56
|
export {
|
|
58
57
|
Ripple
|
|
59
58
|
};
|
|
60
|
-
//# sourceMappingURL=chunk-
|
|
59
|
+
//# sourceMappingURL=chunk-OXCWUOIP.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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\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\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;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
|
|
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\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\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;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;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":[]}
|
|
@@ -11,8 +11,7 @@ var useRipple = ({
|
|
|
11
11
|
const [ripples, setRipples] = useState([]);
|
|
12
12
|
const onPointerDown = useCallback(
|
|
13
13
|
(ev) => {
|
|
14
|
-
if (disabled || isDisabled)
|
|
15
|
-
return setRipples([]);
|
|
14
|
+
if (disabled || isDisabled) return setRipples([]);
|
|
16
15
|
const trigger = ev.currentTarget;
|
|
17
16
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
18
17
|
const rect = trigger.getBoundingClientRect();
|
|
@@ -41,4 +40,4 @@ var useRipple = ({
|
|
|
41
40
|
export {
|
|
42
41
|
useRipple
|
|
43
42
|
};
|
|
44
|
-
//# sourceMappingURL=chunk-
|
|
43
|
+
//# sourceMappingURL=chunk-Y7JVYJGR.mjs.map
|
|
@@ -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 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
|
|
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":[]}
|
package/dist/index.js
CHANGED
|
@@ -41,8 +41,7 @@ var Ripple = ({
|
|
|
41
41
|
isDisabled,
|
|
42
42
|
...rest
|
|
43
43
|
}) => {
|
|
44
|
-
if (isDisabled)
|
|
45
|
-
return null;
|
|
44
|
+
if (isDisabled) return null;
|
|
46
45
|
const css = {
|
|
47
46
|
rounded: "fallback(full, 9999px)",
|
|
48
47
|
zIndex: "fallback(kurillin, 9)"
|
|
@@ -91,8 +90,7 @@ var useRipple = ({
|
|
|
91
90
|
const [ripples, setRipples] = (0, import_react.useState)([]);
|
|
92
91
|
const onPointerDown = (0, import_react.useCallback)(
|
|
93
92
|
(ev) => {
|
|
94
|
-
if (disabled || isDisabled)
|
|
95
|
-
return setRipples([]);
|
|
93
|
+
if (disabled || isDisabled) return setRipples([]);
|
|
96
94
|
const trigger = ev.currentTarget;
|
|
97
95
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
98
96
|
const rect = trigger.getBoundingClientRect();
|
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, 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\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;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
|
|
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, 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\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;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;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;;;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.js
CHANGED
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, 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\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;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
|
|
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\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\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;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;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
CHANGED
package/dist/use-ripple.js
CHANGED
|
@@ -34,8 +34,7 @@ var useRipple = ({
|
|
|
34
34
|
const [ripples, setRipples] = (0, import_react.useState)([]);
|
|
35
35
|
const onPointerDown = (0, import_react.useCallback)(
|
|
36
36
|
(ev) => {
|
|
37
|
-
if (disabled || isDisabled)
|
|
38
|
-
return setRipples([]);
|
|
37
|
+
if (disabled || isDisabled) return setRipples([]);
|
|
39
38
|
const trigger = ev.currentTarget;
|
|
40
39
|
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
41
40
|
const rect = trigger.getBoundingClientRect();
|
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 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
|
|
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;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.29-dev-20240614141936",
|
|
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.7.
|
|
26
|
+
"@yamada-ui/core": "1.7.2-dev-20240614141936",
|
|
27
27
|
"@yamada-ui/utils": "1.2.1",
|
|
28
|
-
"@yamada-ui/motion": "1.0.
|
|
28
|
+
"@yamada-ui/motion": "1.0.29-dev-20240614141936"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"react": "^18.0.0",
|