m3-ripple 1.0.1 → 1.1.0

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.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
+
 # 1.0.1 - 22 Jun 2025
 Improvement:
 - Export `main`, `module`, and `types` in package.json

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

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,4CAoVb,CAAA"}

package/dist/index.js

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

package/package.json

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