m3-ripple 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 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
+
 # 1.1.0 - 30 Dec 2025
 Improvement:
 - add `pointer-events: none` to ripple element to prevent blocking pointer events on parent elements

package/dist/index.cjs.js

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

package/dist/index.js

@@ -1,41 +1,42 @@
-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,
+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: N = "",
-  style: J,
-  easing: S,
-  duration: f = 150,
-  minimumPressDuration: E = 225,
-  touchDelay: C = 150
+  className: M = "",
+  style: U,
+  easing: T,
+  duration: p = 150,
+  minimumPressDuration: P = 225,
+  touchDelay: w = 150
 }) => {
-  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(
+  const [Z, N] = D(!1), [J, S] = D(!1), i = f(null), y = f(null), h = f(""), v = f(""), C = f(0), E = f(void 0), c = f(
     0
     /* INACTIVE */
-  ), 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]);
+  ), 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 = i.current) == null ? void 0 : n.parentElement;
+    if (!e) return;
+    const t = (r, s) => e.addEventListener(r, s, !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 = (s, m) => e.removeEventListener(s, 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",
     []
-  ), i = o(
+  ), u = o(
     (e) => {
-      var r, n;
+      var n, r;
       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)
+      (r = (n = i.current) == null ? void 0 : n.parentElement) != null && r.disabled || !e.isPrimary || x.current && x.current.pointerId !== e.pointerId)
         return !1;
       if (e.type === "pointerenter" || e.type === "pointerleave")
         return !R(e);
@@ -43,153 +44,155 @@ const W = 0.2, b = 12, ee = 75, te = 0.35, re = "forwards", ce = ({
       return R(e) || t;
     },
     [a, R]
-  ), B = o(
+  ), _ = o(
     // @ts-ignore
     ({ 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;
+      const n = i.current;
+      if (!n) return !1;
+      const r = n.getBoundingClientRect();
+      return e >= r.left && e <= r.right && t >= r.top && t <= r.bottom;
     },
-    [s]
-  ), L = o(
+    [i]
+  ), z = o(
     (e) => {
-      i(e) && _(!0);
+      u(e) && N(!0);
     },
-    [i]
-  ), k = o(() => {
-    const e = s.current;
+    [u]
+  ), B = o(() => {
+    const e = i.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(
+    const { height: t, width: n } = e.getBoundingClientRect(), r = Math.max(t, n), s = Math.max(
+      b * r,
+      W
+    ), m = Math.floor(r * Q), K = Math.sqrt(n ** 2 + t ** 2) + V;
+    C.current = m, v.current = (K + s) / m + "", h.current = m + "px";
+  }, [i]), L = o(
     (e) => {
-      const t = s.current;
+      const t = i.current;
       if (!t) return { x: 0, y: 0 };
-      const r = t.getBoundingClientRect(), n = window.scrollX + r.left, P = window.scrollY + r.top;
+      const n = t.getBoundingClientRect(), r = window.scrollX + n.left, s = window.scrollY + n.top;
       return {
-        x: e.pageX - n,
-        y: e.pageY - P
+        x: e.pageX - r,
+        y: e.pageY - s
       };
     },
-    [s]
-  ), F = o(
+    [i]
+  ), k = o(
     (e) => {
-      const t = s.current.parentElement;
+      var s;
+      const t = (s = i.current) == null ? void 0 : s.parentElement;
       if (!t)
         return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } };
-      const r = t.getBoundingClientRect(), n = {
-        x: (r.width - $.current) / 2,
-        y: (r.height - $.current) / 2
+      const n = t.getBoundingClientRect(), r = {
+        x: (n.width - C.current) / 2,
+        y: (n.height - C.current) / 2
       };
       return {
-        startPoint: G(e),
-        endPoint: n
+        // If using keyboard, start in the center
+        startPoint: e ? L(e) : r,
+        endPoint: r
       };
     },
-    [s, G]
-  ), m = o(
+    [i, L]
+  ), d = o(
     (e) => {
-      var M;
-      const t = I.current;
+      var $;
+      const t = y.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(
+      S(!0), ($ = E.current) == null || $.cancel(), B();
+      const { startPoint: n, endPoint: r } = k(e), s = `${n.x}px, ${n.y}px`, m = `${r.x}px, ${r.y}px`;
+      E.current = t.animate(
         {
           height: [h.current, h.current],
           width: [h.current, h.current],
           transform: [
-            `translate(${P}) scale(1)`,
-            `translate(${y}) scale(${z.current})`
+            `translate(${s}) scale(1)`,
+            `translate(${m}) scale(${v.current})`
           ]
         },
         {
           pseudoElement: "::after",
-          duration: f,
-          easing: S,
-          fill: re
+          duration: p,
+          easing: T,
+          fill: ee
         }
       );
     },
-    [k, f, S, F]
-  ), u = o(() => {
+    [B, p, T, k]
+  ), l = o(() => {
     x.current = void 0, c.current = 0;
-    const e = g.current;
+    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 >= E)
-      return void A(!1);
+    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(() => {
-      g.current === e && A(!1);
-    }, E - t);
-  }, [E]), X = o(
+      E.current === e && S(!1);
+    }, P - t);
+  }, [P]), G = o(
     (e) => {
-      i(e) && (_(!1), c.current !== 0 && u());
+      u(e) && (N(!1), c.current !== 0 && l());
     },
-    [u, i]
-  ), Y = o(
+    [l, u]
+  ), F = o(
     (e) => {
-      if (i(e)) {
+      if (u(e)) {
         if (c.current === 2) {
           c.current = 3;
           return;
         }
         if (c.current === 1) {
-          c.current = 3, m(x.current);
+          c.current = 3, d(x.current);
           return;
         }
       }
     },
-    [i, m]
-  ), O = o(
+    [u, d]
+  ), X = o(
     async (e) => {
-      if (i(e)) {
+      if (u(e)) {
         if (x.current = e, !R(e)) {
-          c.current = 3, m(e);
+          c.current = 3, d(e);
           return;
         }
-        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)));
+        A.current && !_(e) || (A.current = !1, c.current = 1, await new Promise((t) => {
+          setTimeout(t, w);
+        }), c.current === 1 && (c.current = 2, d(e)));
       }
     },
-    [i, R, B, m, C]
-  ), j = o(() => {
+    [u, R, _, d, w]
+  ), Y = o(() => {
     if (!a) {
       if (c.current === 3) {
-        u();
+        l();
         return;
       }
-      c.current === 0 && (m(), u());
+      c.current === 0 && (d(), l());
     }
-  }, [a, u, m]), q = o(
+  }, [a, l, d]), O = o(
     (e) => {
-      i(e) && u();
+      u(e) && l();
     },
-    [u, i]
-  ), D = o(() => {
-    a || (v.current = !0, u());
-  }, [a, u]);
-  return /* @__PURE__ */ H(
+    [l, u]
+  ), j = o(() => {
+    a || (A.current = !0, l());
+  }, [a, l]);
+  return /* @__PURE__ */ q(
     "div",
     {
-      ref: s,
-      className: `salty-ripple${N ? ` ${N}` : ""}`,
-      style: J,
+      ref: i,
+      className: `salty-ripple${M ? ` ${M}` : ""}`,
+      style: U,
       "aria-hidden": "true",
-      children: /* @__PURE__ */ H(
+      children: /* @__PURE__ */ q(
         "div",
         {
-          ref: I,
-          className: `salty-ripple-surface${K ? " --hover" : ""}${Q ? " --press" : ""}`
+          ref: y,
+          className: `salty-ripple-surface${Z ? " --hover" : ""}${J ? " --press" : ""}`
         }
       )
     }
   );
 };
 export {
-  ce as Ripple
+  ne as Ripple
 };

package/dist/ripple.css

@@ -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.0",
+    "version": "1.1.2",
     "description": "React TypeScript implementation of Material Design 3 Ripple component",
     "type": "module",
     "main": "./dist/index.cjs",