m3-ripple 1.0.2 → 1.1.1

package/.github/workflows/publish.yml

@@ -29,9 +29,9 @@ jobs:
           bun-version: latest
           registry-url: "https://registry.npmjs.org"
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install packages
@@ -41,7 +41,5 @@ jobs:
         run: bun run build
 
       - name: 'Publish'
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm publish --provenance --access=public
+          NPM_AUTH_TOKEN="" npm publish --provenance --access=public

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 1.1.1 - 30 Dec
+Fix:
+- ripple sharing element
+
+# 1.1.0 - 30 Dec 2025
+Improvement:
+- add `pointer-events: none` to ripple element to prevent blocking pointer events on parent elements
+- automatic disable ripple effect based on parent element
+- add `overflow: hidden`, `border-radius: inherit` to ripple container
+
 # 1.0.2 - 22 Jun 2025
 Fix:
 - Unexpected semi-colon in CSS

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react/jsx-runtime"),t=require("react"),H=.2,Z=12,J=75,K=.35,Q="forwards",V=({hoverOpacity:y,pressedOpacity:x,disabled:a=!1,className:T="",style:B,easing:b,duration:f=150,minimumPressDuration:g=225,touchDelay:w=150})=>{const[L,A]=t.useState(!1),[j,k]=t.useState(!1),u=t.useRef(null),m=t.useRef(null),p=t.useRef(""),M=t.useRef(""),I=t.useRef(0),P=t.useRef(void 0),c=t.useRef(0),d=t.useRef(void 0),S=t.useRef(!1);t.useEffect(()=>{if(!m.current)return;const e=m.current.style;y!==void 0&&e.setProperty("--ripple-hover-opacity",y+""),x!==void 0&&e.setProperty("--ripple-pressed-opacity",x+""),f!==void 0&&f!==150&&e.setProperty("--ripple-duration",f+"ms")},[y,x,f]);const R=t.useCallback(({pointerType:e})=>e==="touch",[]),o=t.useCallback(e=>{if(a||!e.isPrimary||d.current&&d.current.pointerId!==e.pointerId)return!1;if(e.type==="pointerenter"||e.type==="pointerleave")return!R(e);const r=e.buttons===1;return R(e)||r},[a,R]),$=t.useCallback(({x:e,y:r})=>{const n=u.current;if(!n)return!1;const s=n.getBoundingClientRect();return e>=s.left&&e<=s.right&&r>=s.top&&r<=s.bottom},[u]),D=t.useCallback(e=>{o(e)&&A(!0)},[o]),N=t.useCallback(()=>{const e=u.current;if(!e)return;const{height:r,width:n}=e.getBoundingClientRect(),s=Math.max(r,n),C=Math.max(K*s,J),h=Math.floor(s*H),U=Math.sqrt(n**2+r**2)+Z;I.current=h,M.current=(U+C)/h+"",p.current=h+"px"},[u]),_=t.useCallback(e=>{const r=u.current;if(!r)return{x:0,y:0};const n=r.getBoundingClientRect(),s=window.scrollX+n.left,C=window.scrollY+n.top;return{x:e.pageX-s,y:e.pageY-C}},[u]),v=t.useCallback(e=>{const r=u.current.parentElement;if(!r)return{startPoint:{x:0,y:0},endPoint:{x:0,y:0}};const n=r.getBoundingClientRect(),s={x:(n.width-I.current)/2,y:(n.height-I.current)/2};return{startPoint:_(e),endPoint:s}},[u,_]),l=t.useCallback(e=>{var E;const r=m.current;if(!r)return;k(!0),(E=P.current)==null||E.cancel(),N();const{startPoint:n,endPoint:s}=v(e),C=`${n.x}px, ${n.y}px`,h=`${s.x}px, ${s.y}px`;P.current=r.animate({height:[p.current,p.current],width:[p.current,p.current],transform:[`translate(${C}) scale(1)`,`translate(${h}) scale(${M.current})`]},{pseudoElement:"::after",duration:f,easing:b,fill:Q})},[N,f,b,v]),i=t.useCallback(()=>{d.current=void 0,c.current=0;const e=P.current;let r=1/0;if(typeof(e==null?void 0:e.currentTime)=="number"?r=e.currentTime:e!=null&&e.currentTime&&(r=e.currentTime.to("ms").value),r>=g)return void k(!1);setTimeout(()=>{P.current===e&&k(!1)},g-r)},[g]),G=t.useCallback(e=>{o(e)&&(A(!1),c.current!==0&&i())},[i,o]),q=t.useCallback(e=>{if(o(e)){if(c.current===2){c.current=3;return}if(c.current===1){c.current=3,l(d.current);return}}},[o,l]),F=t.useCallback(async e=>{if(o(e)){if(d.current=e,!R(e)){c.current=3,l(e);return}S.current&&!$(e)||(S.current=!1,c.current=1,await new Promise(r=>{setTimeout(r,w)}),c.current===1&&(c.current=2,l(e)))}},[o,R,$,l,w]),O=t.useCallback(()=>{if(!a){if(c.current===3){i();return}c.current===0&&(l(),i())}},[a,i,l]),X=t.useCallback(e=>{o(e)&&i()},[i,o]),Y=t.useCallback(()=>{a||(S.current=!0,i())},[a,i]);return z.jsx("div",{ref:u,className:`salty-ripple${T?` ${T}`:""}`,style:B,"aria-hidden":"true",onClick:O,onContextMenu:Y,onPointerCancel:X,onPointerDown:F,onPointerEnter:D,onPointerLeave:G,onPointerUp:q,children:z.jsx("div",{ref:m,className:`salty-ripple-surface${L?" --hover":""}${j?" --press":""}`})})};exports.Ripple=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),r=require("react"),U=.2,Z=12,J=75,K=.35,Q="forwards",V=({hoverOpacity:P,pressedOpacity:E,disabled:a=!1,className:w="",style:X,easing:k,duration:f=150,minimumPressDuration:C=225,touchDelay:g=150})=>{const[Y,A]=r.useState(!1),[D,I]=r.useState(!1),o=r.useRef(null),x=r.useRef(null),m=r.useRef(""),v=r.useRef(""),S=r.useRef(0),y=r.useRef(void 0),s=r.useRef(0),R=r.useRef(void 0),T=r.useRef(!1);r.useEffect(()=>{if(!x.current)return;const e=x.current.style;P!==void 0&&e.setProperty("--ripple-hover-opacity",P+""),E!==void 0&&e.setProperty("--ripple-pressed-opacity",E+""),f!==void 0&&f!==150&&e.setProperty("--ripple-duration",f+"ms")},[P,E,f]),r.useEffect(()=>{var c;const e=(c=o.current)==null?void 0:c.parentElement;if(!e)return;const t=(n,l)=>e.addEventListener(n,l,!0);return t("click",G),t("contextmenu",F),t("pointercancel",q),t("pointerdown",j),t("pointerenter",$),t("pointerleave",B),t("pointerup",L),()=>{const n=(l,d)=>e.removeEventListener(l,d,!0);n("click",G),n("contextmenu",F),n("pointercancel",q),n("pointerdown",j),n("pointerenter",$),n("pointerleave",B),n("pointerup",L)}},[a,k,f,C,g]);const h=r.useCallback(({pointerType:e})=>e==="touch",[]),u=r.useCallback(e=>{var c,n;if(a||(n=(c=o.current)==null?void 0:c.parentElement)!=null&&n.disabled||!e.isPrimary||R.current&&R.current.pointerId!==e.pointerId)return!1;if(e.type==="pointerenter"||e.type==="pointerleave")return!h(e);const t=e.buttons===1;return h(e)||t},[a,h]),M=r.useCallback(({x:e,y:t})=>{const c=o.current;if(!c)return!1;const n=c.getBoundingClientRect();return e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom},[o]),$=r.useCallback(e=>{u(e)&&A(!0)},[u]),N=r.useCallback(()=>{const e=o.current;if(!e)return;const{height:t,width:c}=e.getBoundingClientRect(),n=Math.max(t,c),l=Math.max(K*n,J),d=Math.floor(n*U),H=Math.sqrt(c**2+t**2)+Z;S.current=d,v.current=(H+l)/d+"",m.current=d+"px"},[o]),_=r.useCallback(e=>{const t=o.current;if(!t)return{x:0,y:0};const c=t.getBoundingClientRect(),n=window.scrollX+c.left,l=window.scrollY+c.top;return{x:e.pageX-n,y:e.pageY-l}},[o]),z=r.useCallback(e=>{const t=o.current.parentElement;if(!t)return{startPoint:{x:0,y:0},endPoint:{x:0,y:0}};const c=t.getBoundingClientRect(),n={x:(c.width-S.current)/2,y:(c.height-S.current)/2};return{startPoint:_(e),endPoint:n}},[o,_]),p=r.useCallback(e=>{var b;const t=x.current;if(!t)return;I(!0),(b=y.current)==null||b.cancel(),N();const{startPoint:c,endPoint:n}=z(e),l=`${c.x}px, ${c.y}px`,d=`${n.x}px, ${n.y}px`;y.current=t.animate({height:[m.current,m.current],width:[m.current,m.current],transform:[`translate(${l}) scale(1)`,`translate(${d}) scale(${v.current})`]},{pseudoElement:"::after",duration:f,easing:k,fill:Q})},[N,f,k,z]),i=r.useCallback(()=>{R.current=void 0,s.current=0;const e=y.current;let t=1/0;if(typeof(e==null?void 0:e.currentTime)=="number"?t=e.currentTime:e!=null&&e.currentTime&&(t=e.currentTime.to("ms").value),t>=C)return void I(!1);setTimeout(()=>{y.current===e&&I(!1)},C-t)},[C]),B=r.useCallback(e=>{u(e)&&(A(!1),s.current!==0&&i())},[i,u]),L=r.useCallback(e=>{if(u(e)){if(s.current===2){s.current=3;return}if(s.current===1){s.current=3,p(R.current);return}}},[u,p]),j=r.useCallback(async e=>{if(u(e)){if(R.current=e,!h(e)){s.current=3,p(e);return}T.current&&!M(e)||(T.current=!1,s.current=1,await new Promise(t=>{setTimeout(t,g)}),s.current===1&&(s.current=2,p(e)))}},[u,h,M,p,g]),G=r.useCallback(()=>{if(!a){if(s.current===3){i();return}s.current===0&&(p(),i())}},[a,i,p]),q=r.useCallback(e=>{u(e)&&i()},[i,u]),F=r.useCallback(()=>{a||(T.current=!0,i())},[a,i]);return O.jsx("div",{ref:o,className:`salty-ripple${w?` ${w}`:""}`,style:X,"aria-hidden":"true",children:O.jsx("div",{ref:x,className:`salty-ripple-surface${Y?" --hover":""}${D?" --press":""}`})})};exports.Ripple=V;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAA;IAErC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA+CD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,kHAUpB,WAAW,4CAsTb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,4BAA4B,CAAA;IAErC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA+CD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,kHAUpB,WAAW,4CAqVb,CAAA"}

package/dist/index.js

@@ -1,192 +1,196 @@
-import { jsx as k } from "react/jsx-runtime";
-import { useState as D, useRef as l, useEffect as K, useCallback as r } from "react";
-const Q = 0.2, V = 12, W = 75, b = 0.35, tt = "forwards", nt = ({
-  hoverOpacity: g,
-  pressedOpacity: I,
+import { jsx as q } from "react/jsx-runtime";
+import { useState as D, useRef as f, useEffect as H, useCallback as o } from "react";
+const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
+  hoverOpacity: I,
+  pressedOpacity: g,
   disabled: a = !1,
-  className: A = "",
-  style: G,
-  easing: M,
+  className: v = "",
+  style: U,
+  easing: T,
   duration: p = 150,
-  minimumPressDuration: C = 225,
-  touchDelay: $ = 150
+  minimumPressDuration: P = 225,
+  touchDelay: w = 150
 }) => {
-  const [F, N] = D(!1), [X, E] = D(!1), i = l(null), x = l(null), d = l(""), _ = l(""), T = l(0), y = l(void 0), c = l(
+  const [Z, M] = D(!1), [J, S] = D(!1), s = f(null), y = f(null), h = f(""), N = f(""), C = f(0), E = f(void 0), c = f(
     0
     /* INACTIVE */
-  ), m = l(void 0), S = l(!1);
-  K(() => {
-    if (!x.current) return;
-    const t = x.current.style;
-    g !== void 0 && t.setProperty("--ripple-hover-opacity", g + ""), I !== void 0 && t.setProperty("--ripple-pressed-opacity", I + ""), p !== void 0 && p !== 150 && t.setProperty("--ripple-duration", p + "ms");
-  }, [g, I, p]);
-  const h = r(
-    ({ pointerType: t }) => t === "touch",
+  ), x = f(void 0), A = f(!1);
+  H(() => {
+    if (!y.current) return;
+    const e = y.current.style;
+    I !== void 0 && e.setProperty("--ripple-hover-opacity", I + ""), g !== void 0 && e.setProperty("--ripple-pressed-opacity", g + ""), p !== void 0 && p !== 150 && e.setProperty("--ripple-duration", p + "ms");
+  }, [I, g, p]), H(() => {
+    var n;
+    const e = (n = s.current) == null ? void 0 : n.parentElement;
+    if (!e) return;
+    const t = (r, l) => e.addEventListener(r, l, !0);
+    return t("click", Y), t("contextmenu", j), t("pointercancel", O), t("pointerdown", X), t("pointerenter", z), t("pointerleave", G), t("pointerup", F), () => {
+      const r = (l, m) => e.removeEventListener(l, m, !0);
+      r("click", Y), r("contextmenu", j), r("pointercancel", O), r("pointerdown", X), r("pointerenter", z), r("pointerleave", G), r("pointerup", F);
+    };
+  }, [a, T, p, P, w]);
+  const R = o(
+    ({ pointerType: e }) => e === "touch",
     []
-  ), s = r(
-    (t) => {
-      if (a || !t.isPrimary || m.current && m.current.pointerId !== t.pointerId)
+  ), i = o(
+    (e) => {
+      var n, r;
+      if (a || // @ts-ignore
+      (r = (n = s.current) == null ? void 0 : n.parentElement) != null && r.disabled || !e.isPrimary || x.current && x.current.pointerId !== e.pointerId)
         return !1;
-      if (t.type === "pointerenter" || t.type === "pointerleave")
-        return !h(t);
-      const e = t.buttons === 1;
-      return h(t) || e;
+      if (e.type === "pointerenter" || e.type === "pointerleave")
+        return !R(e);
+      const t = e.buttons === 1;
+      return R(e) || t;
     },
-    [a, h]
-  ), z = r(
+    [a, R]
+  ), _ = o(
     // @ts-ignore
-    ({ x: t, y: e }) => {
-      const n = i.current;
+    ({ x: e, y: t }) => {
+      const n = s.current;
       if (!n) return !1;
-      const o = n.getBoundingClientRect();
-      return t >= o.left && t <= o.right && e >= o.top && e <= o.bottom;
-    },
-    [i]
-  ), Y = r(
-    (t) => {
-      s(t) && N(!0);
+      const r = n.getBoundingClientRect();
+      return e >= r.left && e <= r.right && t >= r.top && t <= r.bottom;
     },
     [s]
-  ), B = r(() => {
-    const t = i.current;
-    if (!t) return;
-    const { height: e, width: n } = t.getBoundingClientRect(), o = Math.max(e, n), P = Math.max(
-      b * o,
+  ), z = o(
+    (e) => {
+      i(e) && M(!0);
+    },
+    [i]
+  ), B = o(() => {
+    const e = s.current;
+    if (!e) return;
+    const { height: t, width: n } = e.getBoundingClientRect(), r = Math.max(t, n), l = Math.max(
+      b * r,
       W
-    ), R = Math.floor(o * Q), J = Math.sqrt(n ** 2 + e ** 2) + V;
-    T.current = R, _.current = (J + P) / R + "", d.current = R + "px";
-  }, [i]), v = r(
-    (t) => {
-      const e = i.current;
-      if (!e) return { x: 0, y: 0 };
-      const n = e.getBoundingClientRect(), o = window.scrollX + n.left, P = window.scrollY + n.top;
+    ), m = Math.floor(r * Q), K = Math.sqrt(n ** 2 + t ** 2) + V;
+    C.current = m, N.current = (K + l) / m + "", h.current = m + "px";
+  }, [s]), L = o(
+    (e) => {
+      const t = s.current;
+      if (!t) return { x: 0, y: 0 };
+      const n = t.getBoundingClientRect(), r = window.scrollX + n.left, l = window.scrollY + n.top;
       return {
-        x: t.pageX - o,
-        y: t.pageY - P
+        x: e.pageX - r,
+        y: e.pageY - l
       };
     },
-    [i]
-  ), L = r(
-    (t) => {
-      const e = i.current.parentElement;
-      if (!e)
+    [s]
+  ), k = o(
+    (e) => {
+      const t = s.current.parentElement;
+      if (!t)
         return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } };
-      const n = e.getBoundingClientRect(), o = {
-        x: (n.width - T.current) / 2,
-        y: (n.height - T.current) / 2
+      const n = t.getBoundingClientRect(), r = {
+        x: (n.width - C.current) / 2,
+        y: (n.height - C.current) / 2
       };
       return {
-        startPoint: v(t),
-        endPoint: o
+        startPoint: L(e),
+        endPoint: r
       };
     },
-    [i, v]
-  ), f = r(
-    (t) => {
-      var w;
-      const e = x.current;
-      if (!e) return;
-      E(!0), (w = y.current) == null || w.cancel(), B();
-      const { startPoint: n, endPoint: o } = L(t), P = `${n.x}px, ${n.y}px`, R = `${o.x}px, ${o.y}px`;
-      y.current = e.animate(
+    [s, L]
+  ), d = o(
+    (e) => {
+      var $;
+      const t = y.current;
+      if (!t) return;
+      S(!0), ($ = E.current) == null || $.cancel(), B();
+      const { startPoint: n, endPoint: r } = k(e), l = `${n.x}px, ${n.y}px`, m = `${r.x}px, ${r.y}px`;
+      E.current = t.animate(
         {
-          height: [d.current, d.current],
-          width: [d.current, d.current],
+          height: [h.current, h.current],
+          width: [h.current, h.current],
           transform: [
-            `translate(${P}) scale(1)`,
-            `translate(${R}) scale(${_.current})`
+            `translate(${l}) scale(1)`,
+            `translate(${m}) scale(${N.current})`
           ]
         },
         {
           pseudoElement: "::after",
           duration: p,
-          easing: M,
-          fill: tt
+          easing: T,
+          fill: ee
         }
       );
     },
-    [B, p, M, L]
-  ), u = r(() => {
-    m.current = void 0, c.current = 0;
-    const t = y.current;
-    let e = 1 / 0;
-    if (typeof (t == null ? void 0 : t.currentTime) == "number" ? e = t.currentTime : t != null && t.currentTime && (e = t.currentTime.to("ms").value), e >= C)
-      return void E(!1);
+    [B, p, T, k]
+  ), u = o(() => {
+    x.current = void 0, c.current = 0;
+    const e = E.current;
+    let t = 1 / 0;
+    if (typeof (e == null ? void 0 : e.currentTime) == "number" ? t = e.currentTime : e != null && e.currentTime && (t = e.currentTime.to("ms").value), t >= P)
+      return void S(!1);
     setTimeout(() => {
-      y.current === t && E(!1);
-    }, C - e);
-  }, [C]), O = r(
-    (t) => {
-      s(t) && (N(!1), c.current !== 0 && u());
+      E.current === e && S(!1);
+    }, P - t);
+  }, [P]), G = o(
+    (e) => {
+      i(e) && (M(!1), c.current !== 0 && u());
     },
-    [u, s]
-  ), U = r(
-    (t) => {
-      if (s(t)) {
+    [u, i]
+  ), F = o(
+    (e) => {
+      if (i(e)) {
         if (c.current === 2) {
           c.current = 3;
           return;
         }
         if (c.current === 1) {
-          c.current = 3, f(m.current);
+          c.current = 3, d(x.current);
           return;
         }
       }
     },
-    [s, f]
-  ), j = r(
-    async (t) => {
-      if (s(t)) {
-        if (m.current = t, !h(t)) {
-          c.current = 3, f(t);
+    [i, d]
+  ), X = o(
+    async (e) => {
+      if (i(e)) {
+        if (x.current = e, !R(e)) {
+          c.current = 3, d(e);
           return;
         }
-        S.current && !z(t) || (S.current = !1, c.current = 1, await new Promise((e) => {
-          setTimeout(e, $);
-        }), c.current === 1 && (c.current = 2, f(t)));
+        A.current && !_(e) || (A.current = !1, c.current = 1, await new Promise((t) => {
+          setTimeout(t, w);
+        }), c.current === 1 && (c.current = 2, d(e)));
       }
     },
-    [s, h, z, f, $]
-  ), q = r(() => {
+    [i, R, _, d, w]
+  ), Y = o(() => {
     if (!a) {
       if (c.current === 3) {
         u();
         return;
       }
-      c.current === 0 && (f(), u());
+      c.current === 0 && (d(), u());
     }
-  }, [a, u, f]), H = r(
-    (t) => {
-      s(t) && u();
+  }, [a, u, d]), O = o(
+    (e) => {
+      i(e) && u();
     },
-    [u, s]
-  ), Z = r(() => {
-    a || (S.current = !0, u());
+    [u, i]
+  ), j = o(() => {
+    a || (A.current = !0, u());
   }, [a, u]);
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ q(
     "div",
     {
-      ref: i,
-      className: `salty-ripple${A ? ` ${A}` : ""}`,
-      style: G,
+      ref: s,
+      className: `salty-ripple${v ? ` ${v}` : ""}`,
+      style: U,
       "aria-hidden": "true",
-      onClick: q,
-      onContextMenu: Z,
-      onPointerCancel: H,
-      onPointerDown: j,
-      onPointerEnter: Y,
-      onPointerLeave: O,
-      onPointerUp: U,
-      children: /* @__PURE__ */ k(
+      children: /* @__PURE__ */ q(
         "div",
         {
-          ref: x,
-          className: `salty-ripple-surface${F ? " --hover" : ""}${X ? " --press" : ""}`
+          ref: y,
+          className: `salty-ripple-surface${Z ? " --hover" : ""}${J ? " --press" : ""}`
         }
       )
     }
   );
 };
 export {
-  nt as Ripple
+  ne as Ripple
 };

package/dist/ripple.css

@@ -5,6 +5,9 @@
     height: 100%;
     display: block;
     margin: auto;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: inherit;
 }
 
 .salty-ripple[aria-disabled='true'] {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "m3-ripple",
-    "version": "1.0.2",
+    "version": "1.1.1",
     "description": "React TypeScript implementation of Material Design 3 Ripple component",
     "type": "module",
     "main": "./dist/index.cjs",