m3-ripple 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -1,4 +1,11 @@
-# 1.1.1 - 30 Dec
+# 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 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,4CAqVb,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

@@ -4,14 +4,14 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
   hoverOpacity: I,
   pressedOpacity: g,
   disabled: a = !1,
-  className: v = "",
+  className: M = "",
   style: U,
   easing: T,
   duration: p = 150,
   minimumPressDuration: P = 225,
   touchDelay: w = 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(
+  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 = f(void 0), A = f(!1);
@@ -21,22 +21,22 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
     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;
+    const e = (n = i.current) == null ? void 0 : n.parentElement;
     if (!e) return;
-    const t = (r, l) => e.addEventListener(r, l, !0);
+    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 = (l, m) => e.removeEventListener(l, m, !0);
+      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 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)
+      (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);
@@ -47,39 +47,40 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
   ), _ = o(
     // @ts-ignore
     ({ x: e, y: t }) => {
-      const n = s.current;
+      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]
+    [i]
   ), z = o(
     (e) => {
-      i(e) && M(!0);
+      u(e) && N(!0);
     },
-    [i]
+    [u]
   ), B = o(() => {
-    const e = s.current;
+    const e = i.current;
     if (!e) return;
-    const { height: t, width: n } = e.getBoundingClientRect(), r = Math.max(t, n), l = Math.max(
+    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, N.current = (K + l) / m + "", h.current = m + "px";
-  }, [s]), L = o(
+    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 n = t.getBoundingClientRect(), r = window.scrollX + n.left, l = window.scrollY + n.top;
+      const n = t.getBoundingClientRect(), r = window.scrollX + n.left, s = window.scrollY + n.top;
       return {
         x: e.pageX - r,
-        y: e.pageY - l
+        y: e.pageY - s
       };
     },
-    [s]
+    [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 n = t.getBoundingClientRect(), r = {
@@ -87,25 +88,26 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
         y: (n.height - C.current) / 2
       };
       return {
-        startPoint: L(e),
+        // If using keyboard, start in the center
+        startPoint: e ? L(e) : r,
         endPoint: r
       };
     },
-    [s, L]
+    [i, 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`;
+      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(${l}) scale(1)`,
-            `translate(${m}) scale(${N.current})`
+            `translate(${s}) scale(1)`,
+            `translate(${m}) scale(${v.current})`
           ]
         },
         {
@@ -117,7 +119,7 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
       );
     },
     [B, p, T, k]
-  ), u = o(() => {
+  ), l = o(() => {
     x.current = void 0, c.current = 0;
     const e = E.current;
     let t = 1 / 0;
@@ -128,12 +130,12 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
     }, P - t);
   }, [P]), G = o(
     (e) => {
-      i(e) && (M(!1), c.current !== 0 && u());
+      u(e) && (N(!1), c.current !== 0 && l());
     },
-    [u, i]
+    [l, u]
   ), F = o(
     (e) => {
-      if (i(e)) {
+      if (u(e)) {
         if (c.current === 2) {
           c.current = 3;
           return;
@@ -144,10 +146,10 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
         }
       }
     },
-    [i, d]
+    [u, d]
   ), X = o(
     async (e) => {
-      if (i(e)) {
+      if (u(e)) {
         if (x.current = e, !R(e)) {
           c.current = 3, d(e);
           return;
@@ -157,28 +159,28 @@ const Q = 0.2, V = 12, W = 75, b = 0.35, ee = "forwards", ne = ({
         }), c.current === 1 && (c.current = 2, d(e)));
       }
     },
-    [i, R, _, d, w]
+    [u, R, _, d, w]
   ), Y = o(() => {
     if (!a) {
       if (c.current === 3) {
-        u();
+        l();
         return;
       }
-      c.current === 0 && (d(), u());
+      c.current === 0 && (d(), l());
     }
-  }, [a, u, d]), O = o(
+  }, [a, l, d]), O = o(
     (e) => {
-      i(e) && u();
+      u(e) && l();
     },
-    [u, i]
+    [l, u]
   ), j = o(() => {
-    a || (A.current = !0, u());
-  }, [a, u]);
+    a || (A.current = !0, l());
+  }, [a, l]);
   return /* @__PURE__ */ q(
     "div",
     {
-      ref: s,
-      className: `salty-ripple${v ? ` ${v}` : ""}`,
+      ref: i,
+      className: `salty-ripple${M ? ` ${M}` : ""}`,
       style: U,
       "aria-hidden": "true",
       children: /* @__PURE__ */ q(

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