m3-ripple 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -1,4 +1,15 @@
-# 1.1.1 - 30 Dec
+# 1.1.3 - 3 Jan 2026
+Fix:
+- remove `overflow-hidden` from ripple to prevent missing ripple effect on Safari
+
+# 1.1.2 - 2 Jan 2026
+Improvement:
+- add `--ripple-color` to set default ripple color
+
+Fix:
+- default ripple to center when using keyboard event
+
+# 1.1.1 - 30 Dec 2025
 Fix:
 - ripple sharing element
 

package/dist/index.cjs.js

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAOA,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,4CAyVb,CAAA"}

package/dist/index.js

@@ -1,196 +1,231 @@
-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: v = "",
-  style: U,
-  easing: T,
-  duration: p = 150,
-  minimumPressDuration: P = 225,
-  touchDelay: w = 150
+import { jsx as U } from "react/jsx-runtime";
+import { useState as V, useRef as a, useEffect as W, useCallback as o } from "react";
+const J = 0.2, Q = 12, b = 75, tt = 0.35, c = {
+  /**
+   * Initial state of the control, no touch in progress.
+   *
+   * Transitions:
+   *   - on touch down: transition to `TOUCH_DELAY`.
+   *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+   */
+  INACTIVE: 0,
+  /**
+   * Touch down has been received, waiting to determine if it's a swipe or
+   * scroll.
+   *
+   * Transitions:
+   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+   *   - on cancel: transition to `INACTIVE`.
+   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+   */
+  TOUCH_DELAY: 1,
+  /**
+   * A touch has been deemed to be a press
+   *
+   * Transitions:
+   *  - on up: transition to `WAITING_FOR_CLICK`.
+   */
+  HOLDING: 2,
+  /**
+   * The user touch has finished, transition into rest state.
+   *
+   * Transitions:
+   *   - on click end press; transition to `INACTIVE`.
+   */
+  WAITING_FOR_CLICK: 3
+}, nt = ({
+  hoverOpacity: _,
+  pressedOpacity: x,
+  disabled: p = !1,
+  className: O = "",
+  style: X,
+  easing: N,
+  duration: d = 150,
+  minimumPressDuration: E = 225,
+  touchDelay: P = 150
 }) => {
-  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 */
-  ), 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(() => {
+  const [j, w] = V(!1), [q, y] = V(!1), u = a(null), R = a(null), C = a(""), G = a(""), L = a(0), A = a(void 0), s = a(c.INACTIVE), h = a(void 0), g = a(!1);
+  W(() => {
+    if (!R.current) return;
+    const t = R.current.style;
+    _ !== void 0 && t.setProperty("--ripple-hover-opacity", _ + ""), x !== void 0 && t.setProperty("--ripple-pressed-opacity", x + ""), d !== void 0 && d !== 150 && t.setProperty("--ripple-duration", d + "ms");
+  }, [_, x, d]), W(() => {
     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);
+    const t = (n = u.current) == null ? void 0 : n.parentElement;
+    if (!t) return;
+    const e = (r, i) => t.addEventListener(r, i, !0);
+    return e("click", Y), e("contextmenu", K), e("pointercancel", k), e("pointerdown", F), e("pointerenter", v), e("pointerleave", z), e("pointerup", B), () => {
+      const r = (i, m) => t.removeEventListener(i, m, !0);
+      r("click", Y), r("contextmenu", K), r("pointercancel", k), r("pointerdown", F), r("pointerenter", v), r("pointerleave", z), r("pointerup", B);
     };
-  }, [a, T, p, P, w]);
-  const R = o(
-    ({ pointerType: e }) => e === "touch",
+  }, [p, N, d, E, P]);
+  const T = o(
+    ({ pointerType: t }) => t === "touch",
     []
-  ), i = o(
-    (e) => {
+  ), l = o(
+    (t) => {
       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)
+      if (p || // @ts-ignore
+      (r = (n = u.current) == null ? void 0 : n.parentElement) != null && r.disabled || !t.isPrimary || h.current && h.current.pointerId !== t.pointerId)
         return !1;
-      if (e.type === "pointerenter" || e.type === "pointerleave")
-        return !R(e);
-      const t = e.buttons === 1;
-      return R(e) || t;
+      if (t.type === "pointerenter" || t.type === "pointerleave")
+        return !T(t);
+      const e = t.buttons === 1;
+      return T(t) || e;
     },
-    [a, R]
-  ), _ = o(
+    [p, T]
+  ), $ = o(
     // @ts-ignore
-    ({ x: e, y: t }) => {
-      const n = s.current;
+    ({ x: t, y: e }) => {
+      const n = u.current;
       if (!n) return !1;
       const r = n.getBoundingClientRect();
-      return e >= r.left && e <= r.right && t >= r.top && t <= r.bottom;
+      return t >= r.left && t <= r.right && e >= r.top && e <= r.bottom;
     },
-    [s]
-  ), z = o(
-    (e) => {
-      i(e) && M(!0);
+    [u]
+  ), v = o(
+    (t) => {
+      l(t) && w(!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
-    ), 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;
+    [l]
+  ), M = o(() => {
+    const t = u.current;
+    if (!t) return;
+    const { height: e, width: n } = t.getBoundingClientRect(), r = Math.max(e, n), i = Math.max(
+      tt * r,
+      b
+    ), m = Math.floor(r * J), Z = Math.sqrt(n ** 2 + e ** 2) + Q;
+    L.current = m, G.current = (Z + i) / m + "", C.current = m + "px";
+  }, [u]), D = o(
+    (t) => {
+      const e = u.current;
+      if (!e) return { x: 0, y: 0 };
+      const n = e.getBoundingClientRect(), r = window.scrollX + n.left, i = window.scrollY + n.top;
       return {
-        x: e.pageX - r,
-        y: e.pageY - l
+        x: t.pageX - r,
+        y: t.pageY - i
       };
     },
-    [s]
-  ), k = o(
-    (e) => {
-      const t = s.current.parentElement;
-      if (!t)
+    [u]
+  ), H = o(
+    (t) => {
+      var i;
+      const e = (i = u.current) == null ? void 0 : i.parentElement;
+      if (!e)
         return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } };
-      const n = t.getBoundingClientRect(), r = {
-        x: (n.width - C.current) / 2,
-        y: (n.height - C.current) / 2
+      const n = e.getBoundingClientRect(), r = {
+        x: (n.width - L.current) / 2,
+        y: (n.height - L.current) / 2
       };
       return {
-        startPoint: L(e),
+        // If using keyboard, start in the center
+        startPoint: t ? D(t) : r,
         endPoint: r
       };
     },
-    [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(
+    [u, D]
+  ), I = o(
+    (t) => {
+      var S;
+      const e = R.current;
+      if (!e) return;
+      y(!0), (S = A.current) == null || S.cancel(), M();
+      const { startPoint: n, endPoint: r } = H(t), i = `${n.x}px,${n.y}px`, m = `${r.x}px,${r.y}px`;
+      A.current = e.animate(
         {
-          height: [h.current, h.current],
-          width: [h.current, h.current],
+          height: [C.current, C.current],
+          width: [C.current, C.current],
           transform: [
-            `translate(${l}) scale(1)`,
-            `translate(${m}) scale(${N.current})`
+            `translate(${i}) scale(1)`,
+            `translate(${m}) scale(${G.current})`
           ]
         },
         {
           pseudoElement: "::after",
-          duration: p,
-          easing: T,
-          fill: ee
+          duration: d,
+          easing: N,
+          fill: "forwards"
         }
       );
     },
-    [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);
+    [M, d, N, H]
+  ), f = o(() => {
+    h.current = void 0, s.current = c.INACTIVE;
+    const t = A.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 >= E)
+      return void y(!1);
     setTimeout(() => {
-      E.current === e && S(!1);
-    }, P - t);
-  }, [P]), G = o(
-    (e) => {
-      i(e) && (M(!1), c.current !== 0 && u());
+      A.current === t && y(!1);
+    }, E - e);
+  }, [E]), z = o(
+    (t) => {
+      l(t) && (w(!1), s.current !== c.INACTIVE && f());
     },
-    [u, i]
-  ), F = o(
-    (e) => {
-      if (i(e)) {
-        if (c.current === 2) {
-          c.current = 3;
+    [f, l]
+  ), B = o(
+    (t) => {
+      if (l(t)) {
+        if (s.current === c.HOLDING) {
+          s.current = c.WAITING_FOR_CLICK;
           return;
         }
-        if (c.current === 1) {
-          c.current = 3, d(x.current);
+        if (s.current === c.TOUCH_DELAY) {
+          s.current = c.WAITING_FOR_CLICK, I(h.current);
           return;
         }
       }
     },
-    [i, d]
-  ), X = o(
-    async (e) => {
-      if (i(e)) {
-        if (x.current = e, !R(e)) {
-          c.current = 3, d(e);
+    [l, I]
+  ), F = o(
+    (t) => {
+      if (l(t)) {
+        if (h.current = t, !T(t)) {
+          s.current = c.WAITING_FOR_CLICK, I(t);
           return;
         }
-        A.current && !_(e) || (A.current = !1, c.current = 1, await new Promise((t) => {
-          setTimeout(t, w);
-        }), c.current === 1 && (c.current = 2, d(e)));
+        g.current && !$(t) || (g.current = !1, s.current = c.TOUCH_DELAY, setTimeout(() => {
+          s.current === c.TOUCH_DELAY && (s.current = c.HOLDING, I(t));
+        }, P));
       }
     },
-    [i, R, _, d, w]
-  ), Y = o(() => {
-    if (!a) {
-      if (c.current === 3) {
-        u();
-        return;
+    [l, T, $, I, P]
+  ), Y = o(
+    (t) => {
+      if (!p) {
+        if (s.current === c.WAITING_FOR_CLICK) {
+          f();
+          return;
+        }
+        s.current === c.INACTIVE && (I(t), f());
       }
-      c.current === 0 && (d(), u());
-    }
-  }, [a, u, d]), O = o(
-    (e) => {
-      i(e) && u();
     },
-    [u, i]
-  ), j = o(() => {
-    a || (A.current = !0, u());
-  }, [a, u]);
-  return /* @__PURE__ */ q(
+    [p, f, I]
+  ), k = o(
+    (t) => {
+      l(t) && f();
+    },
+    [f, l]
+  ), K = o(() => {
+    p || (g.current = !0, f());
+  }, [p, f]);
+  return /* @__PURE__ */ U(
     "div",
     {
-      ref: s,
-      className: `salty-ripple${v ? ` ${v}` : ""}`,
-      style: U,
+      ref: u,
+      className: `salty-ripple${O ? ` ${O}` : ""}`,
+      style: X,
       "aria-hidden": "true",
-      children: /* @__PURE__ */ q(
+      children: /* @__PURE__ */ U(
         "div",
         {
-          ref: y,
-          className: `salty-ripple-surface${Z ? " --hover" : ""}${J ? " --press" : ""}`
+          ref: R,
+          className: `salty-ripple-surface${j ? " --hover" : ""}${q ? " --press" : ""}`
         }
       )
     }
   );
 };
 export {
-  ne as Ripple
+  nt as Ripple
 };

package/dist/ripple.css

@@ -23,7 +23,7 @@
 .salty-ripple .salty-ripple-surface {
     inset: 0;
     pointer-events: none;
-    overflow: hidden;
+    /*overflow: hidden;*/
     border-radius: inherit;
 }
 
@@ -37,7 +37,7 @@
 .salty-ripple .salty-ripple-surface::before {
     width: 100%;
     height: 100%;
-    background-color: currentColor;
+    background-color: var(--ripple-color, currentColor);
     inset: 0;
     transition:
         opacity var(--ripple-duration, 150ms),
@@ -48,7 +48,7 @@
     inset: 0;
     background: radial-gradient(
         closest-side,
-        currentColor max(100% - 70px, 65%),
+        var(--ripple-color, currentColor) max(100% - 70px, 65%),
         transparent 100%
     );
     transform-origin: center center;
@@ -56,7 +56,7 @@
 }
 
 .salty-ripple .salty-ripple-surface.--hover::before {
-    background-color: currentColor;
+    background-color: var(--ripple-color, currentColor);
     opacity: var(--ripple-hover-opacity, 0.08);
 }
 

package/package.json

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