@yamada-ui/ripple 0.1.7 → 0.1.8
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-2NFFJSZI.mjs → chunk-Y6YV24HU.mjs} +7 -4
- package/dist/chunk-Y6YV24HU.mjs.map +1 -0
- package/dist/index.js +6 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/ripple.js +6 -3
- package/dist/ripple.js.map +1 -1
- package/dist/ripple.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-2NFFJSZI.mjs.map +0 -1
|
@@ -15,6 +15,10 @@ var Ripple = ({
|
|
|
15
15
|
}) => {
|
|
16
16
|
if (isDisabled)
|
|
17
17
|
return null;
|
|
18
|
+
const css = {
|
|
19
|
+
rounded: "full",
|
|
20
|
+
zIndex: "kurillin"
|
|
21
|
+
};
|
|
18
22
|
return /* @__PURE__ */ jsx(Fragment, { children: ripples.map(({ key, x, y, size }) => {
|
|
19
23
|
const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
|
|
20
24
|
return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
|
|
@@ -26,19 +30,18 @@ var Ripple = ({
|
|
|
26
30
|
animate: { transform: "scale(2)", opacity: 0 },
|
|
27
31
|
exit: { opacity: 0 },
|
|
28
32
|
transition: { duration },
|
|
33
|
+
bgColor: color,
|
|
29
34
|
style: {
|
|
30
35
|
position: "absolute",
|
|
31
|
-
backgroundColor: color,
|
|
32
|
-
borderRadius: "100%",
|
|
33
36
|
transformOrigin: "center",
|
|
34
37
|
pointerEvents: "none",
|
|
35
|
-
zIndex: 10,
|
|
36
38
|
left: x,
|
|
37
39
|
top: y,
|
|
38
40
|
width: `${size}px`,
|
|
39
41
|
height: `${size}px`,
|
|
40
42
|
...style
|
|
41
43
|
},
|
|
44
|
+
__css: css,
|
|
42
45
|
...rest,
|
|
43
46
|
onAnimationComplete: handlerAll(
|
|
44
47
|
onAnimationComplete,
|
|
@@ -52,4 +55,4 @@ var Ripple = ({
|
|
|
52
55
|
export {
|
|
53
56
|
Ripple
|
|
54
57
|
};
|
|
55
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-Y6YV24HU.mjs.map
|
|
@@ -0,0 +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\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
CHANGED
|
@@ -42,6 +42,10 @@ var Ripple = ({
|
|
|
42
42
|
}) => {
|
|
43
43
|
if (isDisabled)
|
|
44
44
|
return null;
|
|
45
|
+
const css = {
|
|
46
|
+
rounded: "full",
|
|
47
|
+
zIndex: "kurillin"
|
|
48
|
+
};
|
|
45
49
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
|
|
46
50
|
const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
|
|
47
51
|
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 = ({
|
|
|
53
57
|
animate: { transform: "scale(2)", opacity: 0 },
|
|
54
58
|
exit: { opacity: 0 },
|
|
55
59
|
transition: { duration },
|
|
60
|
+
bgColor: color,
|
|
56
61
|
style: {
|
|
57
62
|
position: "absolute",
|
|
58
|
-
backgroundColor: color,
|
|
59
|
-
borderRadius: "100%",
|
|
60
63
|
transformOrigin: "center",
|
|
61
64
|
pointerEvents: "none",
|
|
62
|
-
zIndex: 10,
|
|
63
65
|
left: x,
|
|
64
66
|
top: y,
|
|
65
67
|
width: `${size}px`,
|
|
66
68
|
height: `${size}px`,
|
|
67
69
|
...style
|
|
68
70
|
},
|
|
71
|
+
__css: css,
|
|
69
72
|
...rest,
|
|
70
73
|
onAnimationComplete: (0, import_utils.handlerAll)(
|
|
71
74
|
onAnimationComplete,
|
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 { 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
|
|
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\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
CHANGED
package/dist/ripple.js
CHANGED
|
@@ -39,6 +39,10 @@ var Ripple = ({
|
|
|
39
39
|
}) => {
|
|
40
40
|
if (isDisabled)
|
|
41
41
|
return null;
|
|
42
|
+
const css = {
|
|
43
|
+
rounded: "full",
|
|
44
|
+
zIndex: "kurillin"
|
|
45
|
+
};
|
|
42
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
|
|
43
47
|
const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
|
|
44
48
|
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 = ({
|
|
|
50
54
|
animate: { transform: "scale(2)", opacity: 0 },
|
|
51
55
|
exit: { opacity: 0 },
|
|
52
56
|
transition: { duration },
|
|
57
|
+
bgColor: color,
|
|
53
58
|
style: {
|
|
54
59
|
position: "absolute",
|
|
55
|
-
backgroundColor: color,
|
|
56
|
-
borderRadius: "100%",
|
|
57
60
|
transformOrigin: "center",
|
|
58
61
|
pointerEvents: "none",
|
|
59
|
-
zIndex: 10,
|
|
60
62
|
left: x,
|
|
61
63
|
top: y,
|
|
62
64
|
width: `${size}px`,
|
|
63
65
|
height: `${size}px`,
|
|
64
66
|
...style
|
|
65
67
|
},
|
|
68
|
+
__css: css,
|
|
66
69
|
...rest,
|
|
67
70
|
onAnimationComplete: (0, import_utils.handlerAll)(
|
|
68
71
|
onAnimationComplete,
|
package/dist/ripple.js.map
CHANGED
|
@@ -1 +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
|
|
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":";;;;;;;;;;;;;;;;;;;;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
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/ripple",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "Yamada UI ripple component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@yamada-ui/core": "0.15.
|
|
26
|
-
"@yamada-ui/
|
|
27
|
-
"@yamada-ui/
|
|
25
|
+
"@yamada-ui/core": "0.15.2",
|
|
26
|
+
"@yamada-ui/utils": "0.5.1",
|
|
27
|
+
"@yamada-ui/motion": "0.4.27"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"react": "^18.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ripple.tsx"],"sourcesContent":["import { AnimatePresence, Motion, type MotionProps } from \"@yamada-ui/motion\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { FC, Key } from \"react\"\nimport type { RippleOptions } from \"./use-ripple\"\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nexport type RippleProps = MotionProps<\"span\"> & {\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n isDisabled?: boolean\n ripples: RippleOptions[]\n onClear: (key: Key) => void\n}\n\nexport const Ripple: FC<RippleProps> = ({\n className,\n ripples,\n onAnimationComplete,\n onClear,\n color = \"currentColor\",\n style,\n isDisabled,\n ...rest\n}) => {\n if (isDisabled) return null\n\n return (\n <>\n {ripples.map(({ key, x, y, size }) => {\n const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n return (\n <AnimatePresence key={key} mode=\"popLayout\">\n <Motion\n as=\"span\"\n className={cx(\"ui-ripple\", className)}\n initial={{ transform: \"scale(0)\", opacity: 0.35 }}\n animate={{ transform: \"scale(2)\", opacity: 0 }}\n exit={{ opacity: 0 }}\n transition={{ duration }}\n style={{\n position: \"absolute\",\n backgroundColor: color,\n borderRadius: \"100%\",\n transformOrigin: \"center\",\n pointerEvents: \"none\",\n zIndex: 10,\n left: x,\n top: y,\n width: `${size}px`,\n height: `${size}px`,\n ...style,\n }}\n {...rest}\n onAnimationComplete={handlerAll(onAnimationComplete, () =>\n onClear(key),\n )}\n />\n </AnimatePresence>\n )\n })}\n </>\n )\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,cAAgC;AAC1D,SAAS,IAAI,kBAAkB;AA+B3B,mBAMQ,WANR;AA3BJ,IAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAa7B,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI;AAAY,WAAO;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,EAAE,KAAK,GAAG,GAAG,KAAK,MAAM;AACpC,UAAM,WAAW,MAAM,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,GAAG;AAEhE,WACE,oBAAC,mBAA0B,MAAK,aAC9B;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAW,GAAG,aAAa,SAAS;AAAA,QACpC,SAAS,EAAE,WAAW,YAAY,SAAS,KAAK;AAAA,QAChD,SAAS,EAAE,WAAW,YAAY,SAAS,EAAE;AAAA,QAC7C,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,SAAS;AAAA,QACvB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO,GAAG,IAAI;AAAA,UACd,QAAQ,GAAG,IAAI;AAAA,UACf,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,qBAAqB;AAAA,UAAW;AAAA,UAAqB,MACnD,QAAQ,GAAG;AAAA,QACb;AAAA;AAAA,IACF,KAzBoB,GA0BtB;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
|