m3-ripple 0.0.0 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# 1.0.1 - 22 Jun 2025
+Improvement:
+- Export `main`, `module`, and `types` in package.json
+- Exclude `react-jsx-runtime` from `dist`
+
+Fix:
+- remove duplicated CSS
+
+Change:
+- inline class instead of map-filter
+- reduce object destructuring

package/README.md

@@ -57,6 +57,29 @@ function Demo() {
 }
 ```
 
+## CSS Variable
+You can set global CSS variables to customize the ripple opacity for hover and pressed states.
+
+```css
+:root {
+ 	--ripple-hover-opacity: 0.08;
+    --ripple-pressed-opacity: 0.12;
+}
+```
+
+Otherwise, you can set the opacity using the `hoverOpacity` and `pressedOpacity` props.
+
+```jsx
+import { Ripple } from 'm3-ripple'
+import 'm3-ripple/ripple.css'
+
+function Demo() {
+	return (
+		<Ripple hoverOpacity={0.1} pressedOpacity={0.15} />
+	)
+}
+```
+
 ## Props
 Here's a type definition of the props you can use with the `Ripple` component:
 

package/dist/index.cjs.js

@@ -1,22 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react");var V={exports:{}},D={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var Q;function te(){if(Q)return D;Q=1;var b=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function u(S,i,f){var C=null;if(f!==void 0&&(C=""+f),i.key!==void 0&&(C=""+i.key),"key"in i){f={};for(var _ in i)_!=="key"&&(f[_]=i[_])}else f=i;return i=f.ref,{$$typeof:b,type:S,key:C,ref:i!==void 0?i:null,props:f}}return D.Fragment=h,D.jsx=u,D.jsxs=u,D}var F={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var K;function ne(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function b(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===B?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case N:return"Profiler";case U:return"StrictMode";case I:return"Suspense";case g:return"SuspenseList";case H:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case y:return"Portal";case l:return(e.displayName||"Context")+".Provider";case w:return(e._context.displayName||"Context")+".Consumer";case x:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case E:return t=e.displayName||null,t!==null?t:b(e.type)||"Memo";case $:t=e._payload,e=e._init;try{return b(e(t))}catch{}}return null}function h(e){return""+e}function u(e){try{h(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),h(e)}}function S(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===$)return"<...>";try{var t=b(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function i(){var e=O.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function C(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function _(e,t){function r(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function L(){var e=b(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function z(e,t,r,n,c,a,m,R){return r=a.ref,e={$$typeof:p,type:e,key:t,props:a,_owner:c},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:L}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:m}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:R}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,t,r,n,c,a,m,R){var s=t.children;if(s!==void 0)if(n)if(P(s)){for(n=0;n<s.length;n++)j(s[n]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(s);if(M.call(t,"key")){s=b(e);var T=Object.keys(t).filter(function(Z){return Z!=="key"});n=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",X[s+n]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,n,s,T,s),X[s+n]=!0)}if(s=null,r!==void 0&&(u(r),s=""+r),C(t)&&(u(t.key),s=""+t.key),"key"in t){r={};for(var Y in t)Y!=="key"&&(r[Y]=t[Y])}else r=t;return s&&_(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),z(e,s,a,c,i(),r,m,R)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var v=o,p=Symbol.for("react.transitional.element"),y=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),w=Symbol.for("react.consumer"),l=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),I=Symbol.for("react.suspense"),g=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),$=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),B=Symbol.for("react.client.reference"),O=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,P=Array.isArray,d=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var W,q={},G=v["react-stack-bottom-frame"].bind(v,f)(),J=d(S(f)),X={};F.Fragment=k,F.jsx=function(e,t,r,n,c){var a=1e4>O.recentlyCreatedOwnerStacks++;return A(e,t,r,!1,n,c,a?Error("react-stack-top-frame"):G,a?d(S(e)):J)},F.jsxs=function(e,t,r,n,c){var a=1e4>O.recentlyCreatedOwnerStacks++;return A(e,t,r,!0,n,c,a?Error("react-stack-top-frame"):G,a?d(S(e)):J)}}()),F}var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV==="production"?V.exports=te():V.exports=ne()),V.exports}var re=oe();const se=.2,ae=12,ce=75,ue=.35,le="forwards",ie=({hoverOpacity:b,pressedOpacity:h,disabled:u=!1,className:S="",style:i,easing:f,duration:C=150,minimumPressDuration:_=225,touchDelay:L=150})=>{const[z,A]=o.useState(!1),[j,v]=o.useState(!1),p=o.useRef(null),y=o.useRef(null),k=o.useRef(""),U=o.useRef(""),N=o.useRef(0),w=o.useRef(void 0),l=o.useRef(0),x=o.useRef(void 0),I=o.useRef(!1);o.useEffect(()=>{if(!y.current)return;const r=y.current.style;b!==void 0&&r.setProperty("--ripple-hover-opacity",b+""),h!==void 0&&r.setProperty("--ripple-pressed-opacity",h+"")},[b,h]);const g=o.useCallback(({pointerType:r})=>r==="touch",[]),E=o.useCallback(r=>{if(u||!r.isPrimary||x.current&&x.current.pointerId!==r.pointerId)return!1;if(r.type==="pointerenter"||r.type==="pointerleave")return!g(r);const n=r.buttons===1;return g(r)||n},[u,g]),$=o.useCallback(({x:r,y:n})=>{const c=p.current;if(!c)return!1;const{top:a,left:m,bottom:R,right:s}=c.getBoundingClientRect();return r>=m&&r<=s&&n>=a&&n<=R},[p]),H=o.useCallback(r=>{E(r)&&A(!0)},[E]),B=o.useCallback(()=>{const r=p.current;if(!r)return;const{height:n,width:c}=r.getBoundingClientRect(),a=Math.max(n,c),m=Math.max(ue*a,ce),R=Math.floor(a*se),T=Math.sqrt(c**2+n**2)+ae;N.current=R,U.current=`${(T+m)/R}`,k.current=`${R}px`},[p]),O=o.useCallback(r=>{const n=p.current;if(!n)return{x:0,y:0};const{scrollX:c,scrollY:a}=window,{left:m,top:R}=n.getBoundingClientRect(),s=c+m,T=a+R,{pageX:Y,pageY:Z}=r;return{x:Y-s,y:Z-T}},[p]),M=o.useCallback(r=>{const n=p.current.parentElement;if(!n)return{startPoint:{x:0,y:0},endPoint:{x:0,y:0}};const{height:c,width:a}=n.getBoundingClientRect(),m={x:(a-N.current)/2,y:(c-N.current)/2};return{startPoint:O(r),endPoint:m}},[p,O]),P=o.useCallback(r=>{var s;const n=y.current;if(!n)return;v(!0),(s=w.current)==null||s.cancel(),B();const{startPoint:c,endPoint:a}=M(r),m=`${c.x}px, ${c.y}px`,R=`${a.x}px, ${a.y}px`;w.current=n.animate({height:[k.current,k.current],width:[k.current,k.current],transform:[`translate(${m}) scale(1)`,`translate(${R}) scale(${U.current})`]},{pseudoElement:"::after",duration:C,easing:f,fill:le})},[B,C,f,M]),d=o.useCallback(()=>{x.current=void 0,l.current=0;const r=w.current;let n=1/0;if(typeof(r==null?void 0:r.currentTime)=="number"?n=r.currentTime:r!=null&&r.currentTime&&(n=r.currentTime.to("ms").value),n>=_)return void v(!1);setTimeout(()=>{w.current===r&&v(!1)},_-n)},[_]),W=o.useCallback(r=>{E(r)&&(A(!1),l.current!==0&&d())},[d,E]),q=o.useCallback(r=>{if(E(r)){if(l.current===2){l.current=3;return}if(l.current===1){l.current=3,P(x.current);return}}},[E,P]),G=o.useCallback(async r=>{if(E(r)){if(x.current=r,!g(r)){l.current=3,P(r);return}I.current&&!$(r)||(I.current=!1,l.current=1,await new Promise(n=>{setTimeout(n,L)}),l.current===1&&(l.current=2,P(r)))}},[E,g,$,P,L]),J=o.useCallback(()=>{if(!u){if(l.current===3){d();return}l.current===0&&(P(),d())}},[u,d,P]),X=o.useCallback(r=>{E(r)&&d()},[d,E]),e=o.useCallback(()=>{u||(I.current=!0,d())},[u,d]);o.useEffect(()=>{u&&(A(!1),v(!1))},[u]);const t=o.useMemo(()=>["salty-ripple-surface",[z&&"hovered",j&&"pressed"].filter(Boolean).join(" ")].filter(Boolean).join(" "),[z,j]);return re.jsx("div",{ref:p,className:`salty-ripple${S?` ${S}`:""}`,style:i,"aria-hidden":"true",onClick:J,onContextMenu:e,onPointerCancel:X,onPointerDown:G,onPointerEnter:H,onPointerLeave:W,onPointerUp:q,children:re.jsx("div",{ref:y,className:t})})};exports.Ripple=ie;
+"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;

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,465 +1,192 @@
-import se, { useState as K, useRef as x, useEffect as ee, useCallback as c, useMemo as ae } from "react";
-var H = { exports: {} }, F = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var re;
-function ce() {
-  if (re) return F;
-  re = 1;
-  var T = Symbol.for("react.transitional.element"), S = Symbol.for("react.fragment");
-  function u(A, l, f) {
-    var g = null;
-    if (f !== void 0 && (g = "" + f), l.key !== void 0 && (g = "" + l.key), "key" in l) {
-      f = {};
-      for (var v in l)
-        v !== "key" && (f[v] = l[v]);
-    } else f = l;
-    return l = f.ref, {
-      $$typeof: T,
-      type: A,
-      key: g,
-      ref: l !== void 0 ? l : null,
-      props: f
-    };
-  }
-  return F.Fragment = S, F.jsx = u, F.jsxs = u, F;
-}
-var L = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var te;
-function ue() {
-  return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
-    function T(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === W ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case b:
-          return "Fragment";
-        case I:
-          return "Profiler";
-        case B:
-          return "StrictMode";
-        case $:
-          return "Suspense";
-        case y:
-          return "SuspenseList";
-        case Z:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case O:
-            return "Portal";
-          case i:
-            return (e.displayName || "Context") + ".Provider";
-          case C:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case k:
-            var t = e.render;
-            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case R:
-            return t = e.displayName || null, t !== null ? t : T(e.type) || "Memo";
-          case M:
-            t = e._payload, e = e._init;
-            try {
-              return T(e(t));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function S(e) {
-      return "" + e;
-    }
-    function u(e) {
-      try {
-        S(e);
-        var t = !1;
-      } catch {
-        t = !0;
-      }
-      if (t) {
-        t = console;
-        var r = t.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return r.call(
-          t,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          n
-        ), S(e);
-      }
-    }
-    function A(e) {
-      if (e === b) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === M)
-        return "<...>";
-      try {
-        var t = T(e);
-        return t ? "<" + t + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function l() {
-      var e = j.A;
-      return e === null ? null : e.getOwner();
-    }
-    function f() {
-      return Error("react-stack-top-frame");
-    }
-    function g(e) {
-      if (Y.call(e, "key")) {
-        var t = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (t && t.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function v(e, t) {
-      function r() {
-        G || (G = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          t
-        ));
-      }
-      r.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: r,
-        configurable: !0
-      });
-    }
-    function z() {
-      var e = T(this.type);
-      return q[e] || (q[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function U(e, t, r, n, a, s, m, p) {
-      return r = s.ref, e = {
-        $$typeof: E,
-        type: e,
-        key: t,
-        props: s,
-        _owner: a
-      }, (r !== void 0 ? r : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: z
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: m
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: p
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function w(e, t, r, n, a, s, m, p) {
-      var o = t.children;
-      if (o !== void 0)
-        if (n)
-          if (h(o)) {
-            for (n = 0; n < o.length; n++)
-              N(o[n]);
-            Object.freeze && Object.freeze(o);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else N(o);
-      if (Y.call(t, "key")) {
-        o = T(e);
-        var _ = Object.keys(t).filter(function(Q) {
-          return Q !== "key";
-        });
-        n = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", V[o + n] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          n,
-          o,
-          _,
-          o
-        ), V[o + n] = !0);
-      }
-      if (o = null, r !== void 0 && (u(r), o = "" + r), g(t) && (u(t.key), o = "" + t.key), "key" in t) {
-        r = {};
-        for (var D in t)
-          D !== "key" && (r[D] = t[D]);
-      } else r = t;
-      return o && v(
-        r,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), U(
-        e,
-        o,
-        s,
-        a,
-        l(),
-        r,
-        m,
-        p
-      );
-    }
-    function N(e) {
-      typeof e == "object" && e !== null && e.$$typeof === E && e._store && (e._store.validated = 1);
-    }
-    var P = se, E = Symbol.for("react.transitional.element"), O = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), C = Symbol.for("react.consumer"), i = Symbol.for("react.context"), k = Symbol.for("react.forward_ref"), $ = Symbol.for("react.suspense"), y = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), Z = Symbol.for("react.activity"), W = Symbol.for("react.client.reference"), j = P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, h = Array.isArray, d = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    P = {
-      "react-stack-bottom-frame": function(e) {
-        return e();
-      }
-    };
-    var G, q = {}, J = P["react-stack-bottom-frame"].bind(
-      P,
-      f
-    )(), X = d(A(f)), V = {};
-    L.Fragment = b, L.jsx = function(e, t, r, n, a) {
-      var s = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return w(
-        e,
-        t,
-        r,
-        !1,
-        n,
-        a,
-        s ? Error("react-stack-top-frame") : J,
-        s ? d(A(e)) : X
-      );
-    }, L.jsxs = function(e, t, r, n, a) {
-      var s = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return w(
-        e,
-        t,
-        r,
-        !0,
-        n,
-        a,
-        s ? Error("react-stack-top-frame") : J,
-        s ? d(A(e)) : X
-      );
-    };
-  }()), L;
-}
-var ne;
-function ie() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? H.exports = ce() : H.exports = ue()), H.exports;
-}
-var oe = ie();
-const le = 0.2, fe = 12, de = 75, me = 0.35, pe = "forwards", Re = ({
-  hoverOpacity: T,
-  pressedOpacity: S,
-  disabled: u = !1,
+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,
+  disabled: a = !1,
   className: A = "",
-  style: l,
-  easing: f,
-  duration: g = 150,
-  minimumPressDuration: v = 225,
-  touchDelay: z = 150
+  style: G,
+  easing: M,
+  duration: p = 150,
+  minimumPressDuration: C = 225,
+  touchDelay: $ = 150
 }) => {
-  const [U, w] = K(!1), [N, P] = K(!1), E = x(null), O = x(null), b = x(""), B = x(""), I = x(0), C = x(void 0), i = x(
+  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(
     0
     /* INACTIVE */
-  ), k = x(void 0), $ = x(!1);
-  ee(() => {
-    if (!O.current) return;
-    const r = O.current.style;
-    T !== void 0 && r.setProperty("--ripple-hover-opacity", T + ""), S !== void 0 && r.setProperty("--ripple-pressed-opacity", S + "");
-  }, [T, S]);
-  const y = c(({ pointerType: r }) => r === "touch", []), R = c(
-    (r) => {
-      if (u || !r.isPrimary || k.current && k.current.pointerId !== r.pointerId)
+  ), 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",
+    []
+  ), s = r(
+    (t) => {
+      if (a || !t.isPrimary || m.current && m.current.pointerId !== t.pointerId)
         return !1;
-      if (r.type === "pointerenter" || r.type === "pointerleave")
-        return !y(r);
-      const n = r.buttons === 1;
-      return y(r) || n;
+      if (t.type === "pointerenter" || t.type === "pointerleave")
+        return !h(t);
+      const e = t.buttons === 1;
+      return h(t) || e;
     },
-    [u, y]
-  ), M = c(
+    [a, h]
+  ), z = r(
     // @ts-ignore
-    ({ x: r, y: n }) => {
-      const a = E.current;
-      if (!a) return !1;
-      const { top: s, left: m, bottom: p, right: o } = a.getBoundingClientRect();
-      return r >= m && r <= o && n >= s && n <= p;
+    ({ 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;
     },
-    [E]
-  ), Z = c(
-    (r) => {
-      R(r) && w(!0);
+    [i]
+  ), Y = r(
+    (t) => {
+      s(t) && N(!0);
     },
-    [R]
-  ), W = c(() => {
-    const r = E.current;
-    if (!r) return;
-    const { height: n, width: a } = r.getBoundingClientRect(), s = Math.max(n, a), m = Math.max(
-      me * s,
-      de
-    ), p = Math.floor(s * le), _ = Math.sqrt(a ** 2 + n ** 2) + fe;
-    I.current = p, B.current = `${(_ + m) / p}`, b.current = `${p}px`;
-  }, [E]), j = c(
-    (r) => {
-      const n = E.current;
-      if (!n) return { x: 0, y: 0 };
-      const { scrollX: a, scrollY: s } = window, { left: m, top: p } = n.getBoundingClientRect(), o = a + m, _ = s + p, { pageX: D, pageY: Q } = r;
-      return { x: D - o, y: Q - _ };
+    [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;
+      return {
+        x: t.pageX - o,
+        y: t.pageY - P
+      };
     },
-    [E]
-  ), Y = c(
-    (r) => {
-      const n = E.current.parentElement;
-      if (!n)
+    [i]
+  ), L = r(
+    (t) => {
+      const e = i.current.parentElement;
+      if (!e)
         return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } };
-      const { height: a, width: s } = n.getBoundingClientRect(), m = {
-        x: (s - I.current) / 2,
-        y: (a - I.current) / 2
+      const n = e.getBoundingClientRect(), o = {
+        x: (n.width - T.current) / 2,
+        y: (n.height - T.current) / 2
       };
       return {
-        startPoint: j(r),
-        endPoint: m
+        startPoint: v(t),
+        endPoint: o
       };
     },
-    [E, j]
-  ), h = c(
-    (r) => {
-      var o;
-      const n = O.current;
-      if (!n) return;
-      P(!0), (o = C.current) == null || o.cancel(), W();
-      const { startPoint: a, endPoint: s } = Y(r), m = `${a.x}px, ${a.y}px`, p = `${s.x}px, ${s.y}px`;
-      C.current = n.animate(
+    [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(
         {
-          height: [b.current, b.current],
-          width: [b.current, b.current],
+          height: [d.current, d.current],
+          width: [d.current, d.current],
           transform: [
-            `translate(${m}) scale(1)`,
-            `translate(${p}) scale(${B.current})`
+            `translate(${P}) scale(1)`,
+            `translate(${R}) scale(${_.current})`
           ]
         },
         {
           pseudoElement: "::after",
-          duration: g,
-          easing: f,
-          fill: pe
+          duration: p,
+          easing: M,
+          fill: tt
         }
       );
     },
-    [W, g, f, Y]
-  ), d = c(() => {
-    k.current = void 0, i.current = 0;
-    const r = C.current;
-    let n = 1 / 0;
-    if (typeof (r == null ? void 0 : r.currentTime) == "number" ? n = r.currentTime : r != null && r.currentTime && (n = r.currentTime.to(
-      "ms"
-    ).value), n >= v)
-      return void P(!1);
+    [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);
     setTimeout(() => {
-      C.current === r && P(!1);
-    }, v - n);
-  }, [v]), G = c(
-    (r) => {
-      R(r) && (w(!1), i.current !== 0 && d());
+      y.current === t && E(!1);
+    }, C - e);
+  }, [C]), O = r(
+    (t) => {
+      s(t) && (N(!1), c.current !== 0 && u());
     },
-    [d, R]
-  ), q = c(
-    (r) => {
-      if (R(r)) {
-        if (i.current === 2) {
-          i.current = 3;
+    [u, s]
+  ), U = r(
+    (t) => {
+      if (s(t)) {
+        if (c.current === 2) {
+          c.current = 3;
           return;
         }
-        if (i.current === 1) {
-          i.current = 3, h(k.current);
+        if (c.current === 1) {
+          c.current = 3, f(m.current);
           return;
         }
       }
     },
-    [R, h]
-  ), J = c(
-    async (r) => {
-      if (R(r)) {
-        if (k.current = r, !y(r)) {
-          i.current = 3, h(r);
+    [s, f]
+  ), j = r(
+    async (t) => {
+      if (s(t)) {
+        if (m.current = t, !h(t)) {
+          c.current = 3, f(t);
           return;
         }
-        $.current && !M(r) || ($.current = !1, i.current = 1, await new Promise((n) => {
-          setTimeout(n, z);
-        }), i.current === 1 && (i.current = 2, h(r)));
+        S.current && !z(t) || (S.current = !1, c.current = 1, await new Promise((e) => {
+          setTimeout(e, $);
+        }), c.current === 1 && (c.current = 2, f(t)));
       }
     },
-    [R, y, M, h, z]
-  ), X = c(() => {
-    if (!u) {
-      if (i.current === 3) {
-        d();
+    [s, h, z, f, $]
+  ), q = r(() => {
+    if (!a) {
+      if (c.current === 3) {
+        u();
         return;
       }
-      i.current === 0 && (h(), d());
+      c.current === 0 && (f(), u());
     }
-  }, [u, d, h]), V = c(
-    (r) => {
-      R(r) && d();
+  }, [a, u, f]), H = r(
+    (t) => {
+      s(t) && u();
     },
-    [d, R]
-  ), e = c(() => {
-    u || ($.current = !0, d());
-  }, [u, d]);
-  ee(() => {
-    u && (w(!1), P(!1));
-  }, [u]);
-  const t = ae(() => ["salty-ripple-surface", [U && "hovered", N && "pressed"].filter(Boolean).join(" ")].filter(Boolean).join(" "), [U, N]);
-  return /* @__PURE__ */ oe.jsx(
+    [u, s]
+  ), Z = r(() => {
+    a || (S.current = !0, u());
+  }, [a, u]);
+  return /* @__PURE__ */ k(
     "div",
     {
-      ref: E,
+      ref: i,
       className: `salty-ripple${A ? ` ${A}` : ""}`,
-      style: l,
+      style: G,
       "aria-hidden": "true",
-      onClick: X,
-      onContextMenu: e,
-      onPointerCancel: V,
-      onPointerDown: J,
-      onPointerEnter: Z,
-      onPointerLeave: G,
-      onPointerUp: q,
-      children: /* @__PURE__ */ oe.jsx("div", { ref: O, className: t })
+      onClick: q,
+      onContextMenu: Z,
+      onPointerCancel: H,
+      onPointerDown: j,
+      onPointerEnter: Y,
+      onPointerLeave: O,
+      onPointerUp: U,
+      children: /* @__PURE__ */ k(
+        "div",
+        {
+          ref: x,
+          className: `salty-ripple-surface${F ? " --hover" : ""}${X ? " --press" : ""}`
+        }
+      )
     }
   );
 };
 export {
-  Re as Ripple
+  nt as Ripple
 };

package/dist/ripple.css

@@ -1,50 +1,6 @@
-.salty-ripple-surface {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.salty-ripple-surface::before,
-.salty-ripple-surface::after {
-    content: '';
-    opacity: 0;
-    position: absolute;
-}
-
-.salty-ripple-surface::before {
-    background-color: currentColor;
-    inset: 0;
-    transition:
-        opacity 15ms linear,
-        background-color 15ms linear;
-}
-
-.salty-ripple-surface::after {
-    background: radial-gradient(
-        closest-side,
-        currentColor max(100% - 70px, 65%),
-        transparent 100%
-    );
-    transform-origin: center center;
-    transition: opacity 375ms linear;
-}
-
-.hovered::before {
-    background-color: currentColor;
-    opacity: 0.08;
-}
-
-.pressed::after {
-    opacity: 0.12;
-    transition-duration: 75ms;
-}
-
-/* React-specific styles */
 .salty-ripple {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     display: block;
@@ -65,7 +21,7 @@
     inset: 0;
     pointer-events: none;
     overflow: hidden;
-    border-radius: inherit;
+    border-radius: inherit;;
 }
 
 .salty-ripple .salty-ripple-surface::before,
@@ -81,8 +37,8 @@
     background-color: currentColor;
     inset: 0;
     transition:
-        opacity 15ms linear,
-        background-color 15ms linear;
+        opacity var(--ripple-duration, 150ms),
+        background-color var(--ripple-duration, 150ms);
 }
 
 .salty-ripple .salty-ripple-surface::after {
@@ -93,15 +49,15 @@
         transparent 100%
     );
     transform-origin: center center;
-    transition: opacity 375ms linear;
+    transition: opacity 375ms;
 }
 
-.salty-ripple .salty-ripple-surface.hovered::before {
+.salty-ripple .salty-ripple-surface.--hover::before {
     background-color: currentColor;
     opacity: var(--ripple-hover-opacity, 0.08);
 }
 
-.salty-ripple .salty-ripple-surface.pressed::after {
+.salty-ripple .salty-ripple-surface.--press::after {
     opacity: var(--ripple-pressed-opacity, 0.12);
     transition-duration: 75ms;
 }

package/package.json

@@ -1,8 +1,10 @@
 {
     "name": "m3-ripple",
-    "version": "0.0.0",
+    "version": "1.0.1",
     "description": "React TypeScript implementation of Material Design 3 Ripple component",
     "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
     "author": {
         "name": "saltyAom",
         "url": "https://github.com/SaltyAom",
@@ -45,10 +47,10 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/saltyaom/m3-ripple"
+        "url": "https://github.com/SaltyAom/m3-ripple"
     },
-    "bugs": "https://github.com/saltyaom/m3-ripple/issues",
-    "homepage": "https://github.com/saltyaom/m3-ripple",
+    "bugs": "https://github.com/SaltyAom/m3-ripple/issues",
+    "homepage": "https://github.com/SaltyAom/m3-ripple",
     "keywords": [
         "react",
         "ripple",

package/dist/demo.d.ts

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import './ripple.css';
-declare const Demo: () => import("react/jsx-runtime").JSX.Element;
-export default Demo;
-//# sourceMappingURL=demo.d.ts.map

package/dist/demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../src/demo.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,cAAc,CAAA;AA2IrB,QAAA,MAAM,IAAI,+CAsNT,CAAA;AAMD,eAAe,IAAI,CAAA"}