@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.3

package/build/esm/Ripple/constants.js

@@ -1,9 +1,9 @@
 import hash from '@emotion/hash';
-export const RIPPLE_BACKGROUND_COLOR = "--css-".concat(hash('basic-ui-ripple-fg-bg-color'));
-export const RIPPLE_TRANSLATE_START = "--css-".concat(hash('basic-ui-ripple-fg-translate-start'));
-export const RIPPLE_TRANSLATE_END = "--css-".concat(hash('basic-ui-ripple-fg-translate-end'));
-export const RIPPLE_SCALE_END = "--css-".concat(hash('basic-ui-ripple-fg-scale'));
-export const RIPPLE_OPACITY_END = "--css-".concat(hash('basic-ui-ripple-fg-opacity'));
-export const RIPPLE_SIZE = "--css-".concat(hash('basic-ui-ripple-fg-size'));
-export const RIPPLE_POSITION = "--css-".concat(hash('basic-ui-ripple-fg-position'));
+export var RIPPLE_BACKGROUND_COLOR = "--css-".concat(hash('basic-ui-ripple-fg-bg-color'));
+export var RIPPLE_TRANSLATE_START = "--css-".concat(hash('basic-ui-ripple-fg-translate-start'));
+export var RIPPLE_TRANSLATE_END = "--css-".concat(hash('basic-ui-ripple-fg-translate-end'));
+export var RIPPLE_SCALE_END = "--css-".concat(hash('basic-ui-ripple-fg-scale'));
+export var RIPPLE_OPACITY_END = "--css-".concat(hash('basic-ui-ripple-fg-opacity'));
+export var RIPPLE_SIZE = "--css-".concat(hash('basic-ui-ripple-fg-size'));
+export var RIPPLE_POSITION = "--css-".concat(hash('basic-ui-ripple-fg-position'));
 //# sourceMappingURL=constants.js.map

package/build/esm/Ripple/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/constants.ts"],"names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,MAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,MAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,MAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,MAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,MAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,MAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,MAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB","sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"file":"constants.js"}
+{"version":3,"sources":["../../../src/Ripple/constants.ts"],"names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,IAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,IAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,IAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,IAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,IAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,IAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,IAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB","sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"file":"constants.js"}

package/build/esm/Ripple/keyframes.d.ts

@@ -1,4 +1,4 @@
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
 export declare const radiusIn: Keyframes;
 export declare const opacityIn: Keyframes;
 export declare const opacityOut: Keyframes;

package/build/esm/Ripple/keyframes.js

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react';
 import { RIPPLE_TRANSLATE_START, RIPPLE_TRANSLATE_END, RIPPLE_OPACITY_END, RIPPLE_SCALE_END } from './constants';
-export const radiusIn = keyframes({
+export var radiusIn = keyframes({
   from: {
     transform: "translate(var(".concat(RIPPLE_TRANSLATE_START, ", 0)) scale(1)")
   },
@@ -8,7 +8,7 @@ export const radiusIn = keyframes({
     transform: "translate(var(".concat(RIPPLE_TRANSLATE_END, ", 0)) scale(var(").concat(RIPPLE_SCALE_END, ", 1))")
   }
 });
-export const opacityIn = keyframes({
+export var opacityIn = keyframes({
   from: {
     opacity: '0'
   },
@@ -16,7 +16,7 @@ export const opacityIn = keyframes({
     opacity: "var(".concat(RIPPLE_OPACITY_END, ")")
   }
 });
-export const opacityOut = keyframes({
+export var opacityOut = keyframes({
   from: {
     opacity: "var(".concat(RIPPLE_OPACITY_END, ")")
   },

package/build/esm/Ripple/keyframes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/keyframes.ts"],"names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAEA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,MAAMC,QAAmB,GAAGL,SAAS,CAAC;AAC3CM,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,0BAAmBN,sBAAnB;AADL,GADqC;AAI3CO,EAAAA,EAAE,EAAE;AACFD,IAAAA,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;AADP;AAJuC,CAAD,CAArC;AASP,OAAO,MAAMK,SAAoB,GAAGT,SAAS,CAAC;AAC5CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,EAAE;AADL,GADsC;AAI5CF,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,gBAASP,kBAAT;AADL;AAJwC,CAAD,CAAtC;AASP,OAAO,MAAMQ,UAAqB,GAAGX,SAAS,CAAC;AAC7CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,gBAASP,kBAAT;AADH,GADuC;AAI7CK,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,EAAE;AADP;AAJyC,CAAD,CAAvC","sourcesContent":["import { keyframes } from '@emotion/react';\nimport { Keyframes } from '@emotion/serialize';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"file":"keyframes.js"}
+{"version":3,"sources":["../../../src/Ripple/keyframes.ts"],"names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAGA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,IAAMC,QAAmB,GAAGL,SAAS,CAAC;AAC3CM,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,0BAAmBN,sBAAnB;AADL,GADqC;AAI3CO,EAAAA,EAAE,EAAE;AACFD,IAAAA,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;AADP;AAJuC,CAAD,CAArC;AASP,OAAO,IAAMK,SAAoB,GAAGT,SAAS,CAAC;AAC5CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,EAAE;AADL,GADsC;AAI5CF,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,gBAASP,kBAAT;AADL;AAJwC,CAAD,CAAtC;AASP,OAAO,IAAMQ,UAAqB,GAAGX,SAAS,CAAC;AAC7CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,gBAASP,kBAAT;AADH,GADuC;AAI7CK,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,EAAE;AADP;AAJyC,CAAD,CAAvC","sourcesContent":["import { keyframes } from '@emotion/react';\nimport type { Keyframes } from '@emotion/serialize';\n\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"file":"keyframes.js"}

package/build/esm/Ripple/useRipple.js

@@ -1,8 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import { useState, useRef, useEffect } from 'react';
 import { radiusIn, opacityIn, opacityOut } from './keyframes';
 import { RIPPLE_TRANSLATE_START, RIPPLE_TRANSLATE_END, RIPPLE_OPACITY_END, RIPPLE_SCALE_END, RIPPLE_SIZE, RIPPLE_BACKGROUND_COLOR, RIPPLE_POSITION } from './constants';
-const defaultRipple = {
+var defaultRipple = {
   x: 0,
   y: 0,
   size: 0,
@@ -16,18 +18,18 @@ const defaultRipple = {
 // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
 // `overflow: hidden`.
 
-const getBoundedRadius = (rect, padding) => {
-  const hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
+var getBoundedRadius = function getBoundedRadius(rect, padding) {
+  var hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
   return hypotenuse + padding;
 };
 
 function getScale(rect) {
-  const maxDim = Math.max(rect.height, rect.width);
-  const padding = 10;
-  const initialOriginScale = 0.6;
-  const maxRadius = getBoundedRadius(rect, padding); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+  var maxDim = Math.max(rect.height, rect.width);
+  var padding = 10;
+  var initialOriginScale = 0.6;
+  var maxRadius = getBoundedRadius(rect, padding); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
 
-  const initialSize = Math.floor(maxDim * initialOriginScale);
+  var initialSize = Math.floor(maxDim * initialOriginScale);
   return {
     size: initialSize,
     scale: maxRadius / initialSize,
@@ -36,8 +38,9 @@ function getScale(rect) {
   };
 }
 
-function calculateRipplePosition(rect, clientX, clientY, center = false) {
-  const rippleStart = center ? {
+function calculateRipplePosition(rect, clientX, clientY) {
+  var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var rippleStart = center ? {
     x: rect.width / 2,
     y: rect.height / 2
   } : {
@@ -49,53 +52,64 @@ function calculateRipplePosition(rect, clientX, clientY, center = false) {
   }, rippleStart, getScale(rect));
 }
 
-export const useRipple = opts => {
-  const {
-    opacity,
-    backgroundColor,
-    enterDuration = 225,
-    leaveDuration = 150
-  } = opts; // rippleState must be a ref, because it accesses the current value
+export var useRipple = function useRipple(opts) {
+  var _style;
+
+  var opacity = opts.opacity,
+      backgroundColor = opts.backgroundColor,
+      _opts$enterDuration = opts.enterDuration,
+      enterDuration = _opts$enterDuration === void 0 ? 225 : _opts$enterDuration,
+      _opts$leaveDuration = opts.leaveDuration,
+      leaveDuration = _opts$leaveDuration === void 0 ? 150 : _opts$leaveDuration; // rippleState must be a ref, because it accesses the current value
   // inside closures... if we use state, it's gonna recapture
   // the state variable and won't work correctly
 
-  const rippleState = useRef('left');
-  const [ripple, setRipple] = useState(defaultRipple);
-  const leavingTimeout = useRef();
-  const enteringTimeout = useRef();
-  const restartTimeout = useRef();
-  const shouldLeave = useRef(false); // clear timeouts to avoid setting state on unmounted component
+  var rippleState = useRef('left');
+
+  var _useState = useState(defaultRipple),
+      _useState2 = _slicedToArray(_useState, 2),
+      ripple = _useState2[0],
+      setRipple = _useState2[1];
+
+  var leavingTimeout = useRef();
+  var enteringTimeout = useRef();
+  var restartTimeout = useRef();
+  var shouldLeave = useRef(false); // clear timeouts to avoid setting state on unmounted component
 
-  useEffect(() => {
-    return () => {
+  useEffect(function () {
+    return function () {
       restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
   }, []); // State handling
 
-  const setLeft = () => {
+  var setLeft = function setLeft() {
     rippleState.current = 'left';
     setRipple(_extends({}, defaultRipple));
   };
 
-  const setLeaving = () => {
+  var setLeaving = function setLeaving() {
     clearTimeout(enteringTimeout.current);
     rippleState.current = 'leaving';
-    setRipple(ripple => _extends({}, ripple));
+    setRipple(function (ripple) {
+      return _extends({}, ripple);
+    });
     leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
   };
 
-  const setEntered = () => {
+  var setEntered = function setEntered() {
     rippleState.current = 'entered';
-    setRipple(ripple => _extends({}, ripple));
+    setRipple(function (ripple) {
+      return _extends({}, ripple);
+    });
 
     if (shouldLeave.current) {
       setLeaving();
     }
   };
 
-  const deactivate = () => {
+  var deactivate = function deactivate() {
     shouldLeave.current = true;
 
     if (rippleState.current === 'entered') {
@@ -103,13 +117,14 @@ export const useRipple = opts => {
     }
   };
 
-  const activate = (rect, clientX, clientY, center = false) => {
+  var activate = function activate(rect, clientX, clientY) {
+    var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     clearTimeout(leavingTimeout.current);
     clearTimeout(enteringTimeout.current);
     shouldLeave.current = false;
     rippleState.current = 'restart';
     setRipple(_extends({}, defaultRipple));
-    restartTimeout.current = requestAnimationFrame(() => {
+    restartTimeout.current = requestAnimationFrame(function () {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
       enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
@@ -117,7 +132,7 @@ export const useRipple = opts => {
   }; // Styling
 
 
-  let animation = undefined;
+  var animation = undefined;
 
   switch (rippleState.current) {
     case 'entering':
@@ -130,29 +145,21 @@ export const useRipple = opts => {
       break;
   }
 
-  let style = {};
+  var style = {};
 
   switch (rippleState.current) {
     case 'entering':
     case 'entered':
     case 'leaving':
-      style = {
-        [RIPPLE_SIZE]: "".concat(ripple.size, "px"),
-        [RIPPLE_POSITION]: "".concat(-ripple.size / 2, "px"),
-        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,
-        [RIPPLE_TRANSLATE_START]: "".concat(ripple.x, "px, ").concat(ripple.y, "px"),
-        [RIPPLE_TRANSLATE_END]: "".concat(ripple.centerX, "px, ").concat(ripple.centerY, "px"),
-        [RIPPLE_OPACITY_END]: opacity,
-        [RIPPLE_SCALE_END]: "".concat(ripple.scale)
-      };
+      style = (_style = {}, _defineProperty(_style, RIPPLE_SIZE, "".concat(ripple.size, "px")), _defineProperty(_style, RIPPLE_POSITION, "".concat(-ripple.size / 2, "px")), _defineProperty(_style, RIPPLE_BACKGROUND_COLOR, backgroundColor), _defineProperty(_style, RIPPLE_TRANSLATE_START, "".concat(ripple.x, "px, ").concat(ripple.y, "px")), _defineProperty(_style, RIPPLE_TRANSLATE_END, "".concat(ripple.centerX, "px, ").concat(ripple.centerY, "px")), _defineProperty(_style, RIPPLE_OPACITY_END, opacity), _defineProperty(_style, RIPPLE_SCALE_END, "".concat(ripple.scale)), _style);
       break;
   }
 
   return {
-    activate,
-    deactivate,
-    style,
-    animation // key: counter,
+    activate: activate,
+    deactivate: deactivate,
+    style: style,
+    animation: animation // key: counter,
 
   };
 };

package/build/esm/Ripple/useRipple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRipple.ts"],"names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","undefined","style"],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n  RIPPLE_SIZE,\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_POSITION,\n} from './constants';\n\nconst defaultRipple = {\n  x: 0,\n  y: 0,\n  size: 0,\n  scale: 0,\n  centerX: 0,\n  centerY: 0,\n};\n\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\n// `overflow: hidden`.\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\n  const hypotenuse = Math.sqrt(\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\n  );\n  return hypotenuse + padding;\n};\n\nfunction getScale(rect: ClientRect) {\n  const maxDim = Math.max(rect.height, rect.width);\n  const padding = 10;\n  const initialOriginScale = 0.6;\n  const maxRadius = getBoundedRadius(rect, padding);\n\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\n  const initialSize = Math.floor(maxDim * initialOriginScale);\n\n  return {\n    size: initialSize,\n    scale: maxRadius / initialSize,\n    centerX: rect.width / 2,\n    centerY: rect.height / 2,\n  };\n}\n\nfunction calculateRipplePosition(\n  rect: ClientRect,\n  clientX: number,\n  clientY: number,\n  center = false\n) {\n  const rippleStart = center\n    ? {\n        x: rect.width / 2,\n        y: rect.height / 2,\n      }\n    : {\n        x: clientX - rect.left,\n        y: clientY - rect.top,\n      };\n\n  return {\n    state: 'entering' as const,\n    ...rippleStart,\n    ...getScale(rect),\n  };\n}\n\nexport interface RippleOptions {\n  opacity: number;\n  backgroundColor: string;\n  enterDuration?: number;\n  leaveDuration?: number;\n  center?: boolean;\n  disabled?: boolean;\n}\n\nexport const useRipple = (opts: RippleOptions) => {\n  const {\n    opacity,\n    backgroundColor,\n    enterDuration = 225,\n    leaveDuration = 150,\n  } = opts;\n\n  // rippleState must be a ref, because it accesses the current value\n  // inside closures... if we use state, it's gonna recapture\n  // the state variable and won't work correctly\n  const rippleState = useRef(\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\n  );\n  const [ripple, setRipple] = useState(defaultRipple);\n  const leavingTimeout = useRef<number>();\n  const enteringTimeout = useRef<number>();\n  const restartTimeout = useRef<number>();\n\n  const shouldLeave = useRef(false);\n\n  // clear timeouts to avoid setting state on unmounted component\n  useEffect(() => {\n    return () => {\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\n      clearTimeout(enteringTimeout.current);\n      clearTimeout(leavingTimeout.current);\n    };\n  }, []);\n\n  // State handling\n  const setLeft = () => {\n    rippleState.current = 'left';\n    setRipple({ ...defaultRipple });\n  };\n\n  const setLeaving = () => {\n    clearTimeout(enteringTimeout.current);\n    rippleState.current = 'leaving';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\n  };\n\n  const setEntered = () => {\n    rippleState.current = 'entered';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    if (shouldLeave.current) {\n      setLeaving();\n    }\n  };\n\n  const deactivate = () => {\n    shouldLeave.current = true;\n    if (rippleState.current === 'entered') {\n      setLeaving();\n    }\n  };\n\n  const activate = (\n    rect: ClientRect,\n    clientX: number,\n    clientY: number,\n    center = false\n  ) => {\n    clearTimeout(leavingTimeout.current);\n    clearTimeout(enteringTimeout.current);\n    shouldLeave.current = false;\n\n    rippleState.current = 'restart';\n    setRipple({ ...defaultRipple });\n    restartTimeout.current = requestAnimationFrame(() => {\n      rippleState.current = 'entering';\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\n\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\n    });\n  };\n\n  // Styling\n  let animation: string | undefined = undefined;\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\n      break;\n    case 'leaving':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityOut} ${leaveDuration}ms forwards`;\n      break;\n  }\n\n  let style = {};\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n    case 'leaving':\n      style = {\n        [RIPPLE_SIZE]: `${ripple.size}px`,\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\n        [RIPPLE_OPACITY_END]: opacity,\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\n      };\n      break;\n  }\n\n  return {\n    activate,\n    deactivate,\n    style,\n    animation,\n    // key: counter,\n  };\n};\n"],"file":"useRipple.js"}
+{"version":3,"sources":["../../../src/Ripple/useRipple.ts"],"names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","undefined","style"],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\n\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n  RIPPLE_SIZE,\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_POSITION,\n} from './constants';\n\nconst defaultRipple = {\n  x: 0,\n  y: 0,\n  size: 0,\n  scale: 0,\n  centerX: 0,\n  centerY: 0,\n};\n\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\n// `overflow: hidden`.\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\n  const hypotenuse = Math.sqrt(\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\n  );\n  return hypotenuse + padding;\n};\n\nfunction getScale(rect: ClientRect) {\n  const maxDim = Math.max(rect.height, rect.width);\n  const padding = 10;\n  const initialOriginScale = 0.6;\n  const maxRadius = getBoundedRadius(rect, padding);\n\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\n  const initialSize = Math.floor(maxDim * initialOriginScale);\n\n  return {\n    size: initialSize,\n    scale: maxRadius / initialSize,\n    centerX: rect.width / 2,\n    centerY: rect.height / 2,\n  };\n}\n\nfunction calculateRipplePosition(\n  rect: ClientRect,\n  clientX: number,\n  clientY: number,\n  center = false\n) {\n  const rippleStart = center\n    ? {\n        x: rect.width / 2,\n        y: rect.height / 2,\n      }\n    : {\n        x: clientX - rect.left,\n        y: clientY - rect.top,\n      };\n\n  return {\n    state: 'entering' as const,\n    ...rippleStart,\n    ...getScale(rect),\n  };\n}\n\nexport interface RippleOptions {\n  opacity: number;\n  backgroundColor: string;\n  enterDuration?: number;\n  leaveDuration?: number;\n  center?: boolean;\n  disabled?: boolean;\n}\n\nexport const useRipple = (opts: RippleOptions) => {\n  const {\n    opacity,\n    backgroundColor,\n    enterDuration = 225,\n    leaveDuration = 150,\n  } = opts;\n\n  // rippleState must be a ref, because it accesses the current value\n  // inside closures... if we use state, it's gonna recapture\n  // the state variable and won't work correctly\n  const rippleState = useRef(\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\n  );\n  const [ripple, setRipple] = useState(defaultRipple);\n  const leavingTimeout = useRef<number>();\n  const enteringTimeout = useRef<number>();\n  const restartTimeout = useRef<number>();\n\n  const shouldLeave = useRef(false);\n\n  // clear timeouts to avoid setting state on unmounted component\n  useEffect(() => {\n    return () => {\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\n      clearTimeout(enteringTimeout.current);\n      clearTimeout(leavingTimeout.current);\n    };\n  }, []);\n\n  // State handling\n  const setLeft = () => {\n    rippleState.current = 'left';\n    setRipple({ ...defaultRipple });\n  };\n\n  const setLeaving = () => {\n    clearTimeout(enteringTimeout.current);\n    rippleState.current = 'leaving';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\n  };\n\n  const setEntered = () => {\n    rippleState.current = 'entered';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    if (shouldLeave.current) {\n      setLeaving();\n    }\n  };\n\n  const deactivate = () => {\n    shouldLeave.current = true;\n    if (rippleState.current === 'entered') {\n      setLeaving();\n    }\n  };\n\n  const activate = (\n    rect: ClientRect,\n    clientX: number,\n    clientY: number,\n    center = false\n  ) => {\n    clearTimeout(leavingTimeout.current);\n    clearTimeout(enteringTimeout.current);\n    shouldLeave.current = false;\n\n    rippleState.current = 'restart';\n    setRipple({ ...defaultRipple });\n    restartTimeout.current = requestAnimationFrame(() => {\n      rippleState.current = 'entering';\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\n\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\n    });\n  };\n\n  // Styling\n  let animation: string | undefined = undefined;\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\n      break;\n    case 'leaving':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityOut} ${leaveDuration}ms forwards`;\n      break;\n  }\n\n  let style = {};\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n    case 'leaving':\n      style = {\n        [RIPPLE_SIZE]: `${ripple.size}px`,\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\n        [RIPPLE_OPACITY_END]: opacity,\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\n      };\n      break;\n  }\n\n  return {\n    activate,\n    deactivate,\n    style,\n    animation,\n    // key: counter,\n  };\n};\n"],"file":"useRipple.js"}

package/build/esm/Ripple/useRippleHandlers.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { RippleOptions } from './useRipple';
+import type { RippleOptions } from './useRipple';
 export declare function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions): {
     style: {};
     animation: string | undefined;

package/build/esm/Ripple/useRippleHandlers.js

@@ -1,38 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { useRef } from 'react';
 import { useRipple } from './useRipple';
 
-const disabledHandler = () => {
+var disabledHandler = function disabledHandler() {
   /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
 };
 
 export function useRippleHandlers(opts) {
-  const _useRipple = useRipple(opts),
-        {
-    activate,
-    deactivate
-  } = _useRipple,
-        rest = _objectWithoutPropertiesLoose(_useRipple, ["activate", "deactivate"]); // Pointer activation
+  var _useRipple = useRipple(opts),
+      activate = _useRipple.activate,
+      deactivate = _useRipple.deactivate,
+      rest = _objectWithoutProperties(_useRipple, ["activate", "deactivate"]); // Pointer activation
 
 
-  const handlePointerUp = () => {
+  var handlePointerUp = function handlePointerUp() {
     window.removeEventListener('pointerup', handlePointerUp);
     window.removeEventListener('pointercancel', handlePointerUp);
     deactivate();
   };
 
-  const handlePointerDown = e => {
-    const rect = e.currentTarget.getBoundingClientRect();
+  var handlePointerDown = function handlePointerDown(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
     window.addEventListener('pointercancel', handlePointerUp);
   }; // Keyboard activation
 
 
-  const keyReleased = useRef(true);
+  var keyReleased = useRef(true);
 
-  const handleKeyUp = e => {
+  var handleKeyUp = function handleKeyUp(e) {
     if (e.key !== ' ') {
       return;
     }
@@ -42,12 +40,12 @@ export function useRippleHandlers(opts) {
     deactivate();
   };
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }
 
-    const rect = e.currentTarget.getBoundingClientRect();
+    var rect = e.currentTarget.getBoundingClientRect();
     keyReleased.current = false;
     activate(rect, 0, 0, true);
     window.addEventListener('keyup', handleKeyUp);

package/build/esm/Ripple/useRippleHandlers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleHandlers.ts"],"names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AAEA,SAAwBC,SAAxB,QAAyC,aAAzC;;AAEA,MAAMC,eAAe,GAAG,MAAM;AAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;AAC5E,qBAA0CH,SAAS,CAACG,IAAD,CAAnD;AAAA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAN;AAAA,QAAiCC,IAAjC,yEAD4E,CAG5E;;;AACA,QAAMC,eAAe,GAAG,MAAM;AAC5BC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;AACAC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;AACAF,IAAAA,UAAU;AACX,GAJD;;AAMA,QAAMK,iBAAiB,GAAIC,CAAD,IAA8B;AACtD,UAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAV,IAAAA,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;AACAT,IAAAA,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;AACAC,IAAAA,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;AACD,GALD,CAV4E,CAiB5E;;;AACA,QAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;AACA,QAAMqB,WAAW,GAAIT,CAAD,IAAsB;AACxC,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;AACjB;AACD;;AACDb,IAAAA,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;AACAD,IAAAA,WAAW,CAACG,OAAZ,GAAsB,IAAtB;AACAjB,IAAAA,UAAU;AACX,GAPD;;AASA,QAAMkB,aAAa,GAAIZ,CAAD,IAA+B;AACnD,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;AACzC;AACD;;AACD,UAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAK,IAAAA,WAAW,CAACG,OAAZ,GAAsB,KAAtB;AACAlB,IAAAA,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;AACAJ,IAAAA,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;AACD,GARD;;AAUA;AACEG,IAAAA,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;AAEEb,IAAAA,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;AAFvD,KAGKJ,IAHL;AAKD","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\nimport { RippleOptions, useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"file":"useRippleHandlers.js"}
+{"version":3,"sources":["../../../src/Ripple/useRippleHandlers.ts"],"names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AAIA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;AAAA,mBAClCH,SAAS,CAACG,IAAD,CADyB;AAAA,MACpEC,QADoE,cACpEA,QADoE;AAAA,MAC1DC,UAD0D,cAC1DA,UAD0D;AAAA,MAC3CC,IAD2C,qEAG5E;;;AACA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5BC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;AACAC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;AACAF,IAAAA,UAAU;AACX,GAJD;;AAMA,MAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA8B;AACtD,QAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAV,IAAAA,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;AACAT,IAAAA,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;AACAC,IAAAA,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;AACD,GALD,CAV4E,CAiB5E;;;AACA,MAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;AACA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;AACxC,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;AACjB;AACD;;AACDb,IAAAA,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;AACAD,IAAAA,WAAW,CAACG,OAAZ,GAAsB,IAAtB;AACAjB,IAAAA,UAAU;AACX,GAPD;;AASA,MAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA+B;AACnD,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;AACzC;AACD;;AACD,QAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAK,IAAAA,WAAW,CAACG,OAAZ,GAAsB,KAAtB;AACAlB,IAAAA,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;AACAJ,IAAAA,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;AACD,GARD;;AAUA;AACEG,IAAAA,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;AAEEb,IAAAA,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;AAFvD,KAGKJ,IAHL;AAKD","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"file":"useRippleHandlers.js"}

package/build/esm/Ripple/useRippleSurface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     baseOpacity?: number;
     hoverOpacity?: number;

package/build/esm/Ripple/useRippleSurface.js

@@ -1,30 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import { useTheme } from '../theme';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { get } from '@styled-system/css';
+import { wrapEvent } from '@basic-ui/core';
+import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-import { wrapEvent } from '@basic-ui/core';
 export function useRippleSurface(opts) {
-  let {
-    // eslint-disable-next-line prefer-const
-    baseOpacity = 0,
-    hoverOpacity = 0.04,
-    focusOpacity = 0.12,
-    pressedOpacity = 0.12,
-    rippleColor = 'on.surface'
-  } = opts;
+  var _extends2;
 
-  const {
-    onKeyDown,
-    onPointerDown,
-    style = {},
-    disabled,
-    rippleEnabled = true
-  } = opts,
-        rippleProps = _objectWithoutPropertiesLoose(opts, ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"]);
+  var _opts$baseOpacity = opts.baseOpacity,
+      baseOpacity = _opts$baseOpacity === void 0 ? 0 : _opts$baseOpacity,
+      _opts$hoverOpacity = opts.hoverOpacity,
+      hoverOpacity = _opts$hoverOpacity === void 0 ? 0.04 : _opts$hoverOpacity,
+      _opts$focusOpacity = opts.focusOpacity,
+      focusOpacity = _opts$focusOpacity === void 0 ? 0.12 : _opts$focusOpacity,
+      _opts$pressedOpacity = opts.pressedOpacity,
+      pressedOpacity = _opts$pressedOpacity === void 0 ? 0.12 : _opts$pressedOpacity,
+      _opts$rippleColor = opts.rippleColor,
+      rippleColor = _opts$rippleColor === void 0 ? 'on.surface' : _opts$rippleColor;
 
-  const theme = useTheme();
+  var onKeyDown = opts.onKeyDown,
+      onPointerDown = opts.onPointerDown,
+      _opts$style = opts.style,
+      style = _opts$style === void 0 ? {} : _opts$style,
+      disabled = opts.disabled,
+      _opts$rippleEnabled = opts.rippleEnabled,
+      rippleEnabled = _opts$rippleEnabled === void 0 ? true : _opts$rippleEnabled,
+      rippleProps = _objectWithoutProperties(opts, ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"]);
+
+  var theme = useTheme();
   rippleColor = get(theme, "colors.".concat(rippleColor)) || rippleColor;
 
   if (disabled) {
@@ -33,18 +38,17 @@ export function useRippleSurface(opts) {
     pressedOpacity = baseOpacity;
   }
 
-  const {
-    handleKeyDown,
-    handlePointerDown,
-    style: animationStyle,
-    animation
-  } = useRippleHandlers(_extends({
+  var _useRippleHandlers = useRippleHandlers(_extends({
     opacity: Number(pressedOpacity),
     backgroundColor: rippleColor,
-    disabled
-  }, rippleProps));
+    disabled: disabled
+  }, rippleProps)),
+      handleKeyDown = _useRippleHandlers.handleKeyDown,
+      handlePointerDown = _useRippleHandlers.handlePointerDown,
+      animationStyle = _useRippleHandlers.style,
+      animation = _useRippleHandlers.animation;
 
-  const css = _extends({
+  var css = _extends({
     overflow: 'hidden',
     position: 'relative',
     cursor: 'pointer',
@@ -90,16 +94,13 @@ export function useRippleSurface(opts) {
     '&[aria-pressed="true"]:active::before': {
       opacity: pressedOpacity + pressedOpacity
     }
-  }, {
-    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']: {
-      opacity: 0
-    },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default'
-    }
-  }, rippleEnabled && {
+  }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
+    opacity: 0
+  }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
+    cursor: 'default'
+  }), _extends2), rippleEnabled && {
     '&::after': _extends({}, rippleStyle({
-      animation
+      animation: animation
     }))
   });
 

package/build/esm/Ripple/useRippleSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["useTheme","get","rippleStyle","useRippleHandlers","wrapEvent","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","handleKeyDown","handlePointerDown","animationStyle","animation","opacity","Number","backgroundColor","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import { CSSProperties } from 'react';\nimport { useTheme } from '../theme';\nimport { get } from '@styled-system/css';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport { wrapEvent } from '@basic-ui/core';\nimport { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T>\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = {\n    overflow: 'hidden',\n    position: 'relative',\n    cursor: 'pointer',\n    // fix overflow: hidden + borderRadius in Safari\n    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n    willChange: 'transform,opacity',\n    WebkitTapHighlightColor: 'transparent',\n    // ripple overlay\n    '&::before': {\n      backgroundColor: rippleColor,\n      boxSizing: 'content-box',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: baseOpacity,\n      pointerEvents: 'none',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      transition: 'opacity 75ms linear',\n    },\n    '&:hover::before': {\n      opacity: hoverOpacity,\n    },\n    '&:focus-visible::before': {\n      opacity: focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&:active::before': {\n        opacity: pressedOpacity,\n      },\n    }),\n    '&[aria-pressed=\"true\"]::before': {\n      opacity: baseOpacity + pressedOpacity,\n    },\n    '&[aria-pressed=\"true\"]:hover::before': {\n      opacity: pressedOpacity + hoverOpacity,\n    },\n    '&[aria-pressed=\"true\"]:focus-visible::before': {\n      opacity: pressedOpacity + focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&[aria-pressed=\"true\"]:active::before': {\n        opacity: pressedOpacity + pressedOpacity,\n      },\n    }),\n    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n    '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']: {\n      opacity: 0,\n    },\n    '&:disabled,&[data-disabled]': {\n      cursor: 'default',\n    },\n    // ripple\n    ...(rippleEnabled && {\n      '&::after': { ...rippleStyle({ animation }) },\n    }),\n  };\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}
+{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":";;;AACA,SAASA,GAAT,QAAoB,oBAApB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AAEA,SAASC,QAAT,QAAyB,UAAzB;AACA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AAiBA,OAAO,SAASC,gBAAT,CACLC,IADK,EAEL;AAAA;;AAAA,0BAQIA,IARJ,CAGEC,WAHF;AAAA,MAGEA,WAHF,kCAGgB,CAHhB;AAAA,2BAQID,IARJ,CAIEE,YAJF;AAAA,MAIEA,YAJF,mCAIiB,IAJjB;AAAA,2BAQIF,IARJ,CAKEG,YALF;AAAA,MAKEA,YALF,mCAKiB,IALjB;AAAA,6BAQIH,IARJ,CAMEI,cANF;AAAA,MAMEA,cANF,qCAMmB,IANnB;AAAA,0BAQIJ,IARJ,CAOEK,WAPF;AAAA,MAOEA,WAPF,kCAOgB,YAPhB;;AAAA,MAUEC,SAVF,GAgBIN,IAhBJ,CAUEM,SAVF;AAAA,MAWEC,aAXF,GAgBIP,IAhBJ,CAWEO,aAXF;AAAA,oBAgBIP,IAhBJ,CAYEQ,KAZF;AAAA,MAYEA,KAZF,4BAYU,EAZV;AAAA,MAaEC,QAbF,GAgBIT,IAhBJ,CAaES,QAbF;AAAA,4BAgBIT,IAhBJ,CAcEU,aAdF;AAAA,MAcEA,aAdF,oCAckB,IAdlB;AAAA,MAeKC,WAfL,4BAgBIX,IAhBJ;;AAkBA,MAAMY,KAAK,GAAGhB,QAAQ,EAAtB;AACAS,EAAAA,WAAW,GAAGX,GAAG,CAACkB,KAAD,mBAAkBP,WAAlB,EAAH,IAAuCA,WAArD;;AAEA,MAAII,QAAJ,EAAc;AACZP,IAAAA,YAAY,GAAGD,WAAf;AACAE,IAAAA,YAAY,GAAGF,WAAf;AACAG,IAAAA,cAAc,GAAGH,WAAjB;AACD;;AAzBD,2BAgCIH,iBAAiB;AACnBe,IAAAA,OAAO,EAAEC,MAAM,CAACV,cAAD,CADI;AAEnBW,IAAAA,eAAe,EAAEV,WAFE;AAGnBI,IAAAA,QAAQ,EAARA;AAHmB,KAIhBE,WAJgB,EAhCrB;AAAA,MA4BEK,aA5BF,sBA4BEA,aA5BF;AAAA,MA6BEC,iBA7BF,sBA6BEA,iBA7BF;AAAA,MA8BSC,cA9BT,sBA8BEV,KA9BF;AAAA,MA+BEW,SA/BF,sBA+BEA,SA/BF;;AAuCA,MAAMC,GAAgB;AACpBC,IAAAA,QAAQ,EAAE,QADU;AAEpBC,IAAAA,QAAQ,EAAE,UAFU;AAGpBC,IAAAA,MAAM,EAAE,SAHY;AAIpB;AACA;AACAC,IAAAA,UAAU,EAAE,mBANQ;AAOpBC,IAAAA,uBAAuB,EAAE,aAPL;AAQpB;AACA,iBAAa;AACXV,MAAAA,eAAe,EAAEV,WADN;AAEXqB,MAAAA,SAAS,EAAE,aAFA;AAGXJ,MAAAA,QAAQ,EAAE,UAHC;AAIXK,MAAAA,OAAO,EAAE,IAJE;AAKXd,MAAAA,OAAO,EAAEZ,WALE;AAMX2B,MAAAA,aAAa,EAAE,MANJ;AAOXC,MAAAA,GAAG,EAAE,GAPM;AAQXC,MAAAA,IAAI,EAAE,GARK;AASXC,MAAAA,KAAK,EAAE,MATI;AAUXC,MAAAA,MAAM,EAAE,MAVG;AAWXC,MAAAA,UAAU,EAAE;AAXD,KATO;AAsBpB,uBAAmB;AACjBpB,MAAAA,OAAO,EAAEX;AADQ,KAtBC;AAyBpB,+BAA2B;AACzBW,MAAAA,OAAO,EAAEV;AADgB;AAzBP,KA4BhB,CAACO,aAAD,IAAkB;AACpB,wBAAoB;AAClBG,MAAAA,OAAO,EAAET;AADS;AADA,GA5BF;AAiCpB,sCAAkC;AAChCS,MAAAA,OAAO,EAAEZ,WAAW,GAAGG;AADS,KAjCd;AAoCpB,4CAAwC;AACtCS,MAAAA,OAAO,EAAET,cAAc,GAAGF;AADY,KApCpB;AAuCpB,oDAAgD;AAC9CW,MAAAA,OAAO,EAAET,cAAc,GAAGD;AADoB;AAvC5B,KA0ChB,CAACO,aAAD,IAAkB;AACpB,6CAAyC;AACvCG,MAAAA,OAAO,EAAET,cAAc,GAAGA;AADa;AADrB,GA1CF,8CA+CnB,oGACD,yFADC,GAED,yEAjDoB,EAkDlB;AACES,IAAAA,OAAO,EAAE;AADX,GAlDkB,8BAqDpB,6BArDoB,EAqDW;AAC7BU,IAAAA,MAAM,EAAE;AADqB,GArDX,eAyDhBb,aAAa,IAAI;AACnB,6BAAiBb,WAAW,CAAC;AAAEsB,MAAAA,SAAS,EAATA;AAAF,KAAD,CAA5B;AADmB,GAzDD,CAAtB;;AA8DA,SAAO;AACLX,IAAAA,KAAK,eAAOU,cAAP,EAA0BV,KAA1B,CADA;AAELF,IAAAA,SAAS,EAAEX,SAAS,CAACW,SAAD,EAAYU,aAAZ,CAFf;AAGLT,IAAAA,aAAa,EAAEZ,SAAS,CAACY,aAAD,EAAgBU,iBAAhB,CAHnB;AAILiB,IAAAA,KAAK,EAAEd;AAJF,GAAP;AAMD","sourcesContent":["import type { CSSProperties } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T>\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = {\n    overflow: 'hidden',\n    position: 'relative',\n    cursor: 'pointer',\n    // fix overflow: hidden + borderRadius in Safari\n    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n    willChange: 'transform,opacity',\n    WebkitTapHighlightColor: 'transparent',\n    // ripple overlay\n    '&::before': {\n      backgroundColor: rippleColor,\n      boxSizing: 'content-box',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: baseOpacity,\n      pointerEvents: 'none',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      transition: 'opacity 75ms linear',\n    },\n    '&:hover::before': {\n      opacity: hoverOpacity,\n    },\n    '&:focus-visible::before': {\n      opacity: focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&:active::before': {\n        opacity: pressedOpacity,\n      },\n    }),\n    '&[aria-pressed=\"true\"]::before': {\n      opacity: baseOpacity + pressedOpacity,\n    },\n    '&[aria-pressed=\"true\"]:hover::before': {\n      opacity: pressedOpacity + hoverOpacity,\n    },\n    '&[aria-pressed=\"true\"]:focus-visible::before': {\n      opacity: pressedOpacity + focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&[aria-pressed=\"true\"]:active::before': {\n        opacity: pressedOpacity + pressedOpacity,\n      },\n    }),\n    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n    '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n      {\n        opacity: 0,\n      },\n    '&:disabled,&[data-disabled]': {\n      cursor: 'default',\n    },\n    // ripple\n    ...(rippleEnabled && {\n      '&::after': { ...rippleStyle({ animation }) },\n    }),\n  };\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}