@ornikar/kitt-universal 31.1.1 → 31.1.2-canary.31eec21cbe0c2b92255fb1fa14d83757a05ea8b0.0

package/dist/index.es.web.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, useCallback, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, forwardRef, useMemo, cloneElement, useState, useRef, useCallback, useLayoutEffect, useEffect, Children, useReducer, Fragment as Fragment$1 } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useBreakpointValue as useBreakpointValue$1, useSx, Text, Input, NativeBaseProvider, extendTheme } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -3665,6 +3665,81 @@ function ButtonContent(_ref2) {
   });
 }
 
+function ButtonGauge(_ref) {
+  var duration = _ref.duration,
+    running = _ref.running,
+    onEnded = _ref.onEnded;
+  var _useState = useState(100),
+    _useState2 = _slicedToArray(_useState, 2),
+    translate = _useState2[0],
+    setTranslate = _useState2[1];
+  var startTimeRef = useRef(0);
+  var pauseTimeRef = useRef(0);
+  var rafRef = useRef(undefined);
+  var distance = 100;
+  var draw = useCallback(function (timestamp) {
+    var timeElapsedSinceStart = timestamp - startTimeRef.current;
+    // Since the time between frame is not reliable and regular, we have to
+    // limit the progress to prevent overflows
+    var safeProgress = Math.min(distance * timeElapsedSinceStart / duration, distance);
+    setTranslate(safeProgress);
+    if (safeProgress < distance) {
+      if (!rafRef) return;
+      rafRef.current = requestAnimationFrame(draw);
+      return;
+    }
+    onEnded();
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  useLayoutEffect(function () {
+    if (running) {
+      // Resuming from pause
+      if (pauseTimeRef.current > 0) {
+        startTimeRef.current += global.performance.now() - pauseTimeRef.current;
+        draw(global.performance.now());
+        return;
+      }
+
+      // First launch
+      startTimeRef.current = global.performance.now();
+      draw(startTimeRef.current);
+    }
+
+    // On pause
+    if (!running && rafRef.current) {
+      pauseTimeRef.current = global.performance.now();
+      cancelAnimationFrame(rafRef.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+  useEffect(function () {
+    return function () {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsx(View, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+    alignItems: "flex-end",
+    borderRadius: "kitt.button.borderRadius",
+    children: /*#__PURE__*/jsx(View, {
+      width: "".concat(translate, "%"),
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding(_ref) {
   var children = _ref.children,
     size = _ref.size,
@@ -3736,6 +3811,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hrefAttrs = _ref.hrefAttrs,
     withBadge = _ref.withBadge,
     badgeCount = _ref.badgeCount,
+    timerAttrs = _ref.timerAttrs,
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     _ref$innerSpacing = _ref.innerSpacing,
@@ -3780,7 +3856,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
-      return /*#__PURE__*/jsx(AnimatedContainer$2, {
+      return /*#__PURE__*/jsxs(AnimatedContainer$2, {
         animatedStyles: animatedStyles,
         type: type,
         isHovered: isHovered || isHoveredInternal,
@@ -3790,7 +3866,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: size,
         isIconOnly: isIconOnly,
         isStretch: stretch,
-        children: /*#__PURE__*/jsxs(ButtonPadding, {
+        children: [timerAttrs ? /*#__PURE__*/jsx(ButtonGauge, _objectSpread({}, timerAttrs)) : null, /*#__PURE__*/jsxs(ButtonPadding, {
           size: size,
           isIconOnly: isIconOnly,
           children: [/*#__PURE__*/jsx(ButtonContent, {
@@ -3812,7 +3888,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isHovered: isHovered,
             isPressed: isPressed
           })]
-        })
+        })]
       });
     }
   });
@@ -13409,14 +13485,14 @@ function TypographyEmoji(_ref3) {
   });
 }
 
-// overrides :global(a) in Link styles.module.css
-var displayUnderline = "kitt-u_displayUnderline_dch42t";
-var displayUnderlineWhenHovered = "kitt-u_displayUnderlineWhenHovered_d80w0t7";
+var styles = {"displayUnderline":"TypographyLinkWebWrapper-module_displayUnderline__KxwMp","kitt-hover":"TypographyLinkWebWrapper-module_kitt-hover__CyENw","displayUnderlineWhenHovered":"TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl"};
+
 function TypographyLinkWebWrapper(_ref) {
   var children = _ref.children,
     hasNoUnderline = _ref.hasNoUnderline;
+  var className = hasNoUnderline ? "".concat(styles.displayUnderline, " ").concat(styles.displayUnderlineWhenHovered) : styles.displayUnderline;
   return /*#__PURE__*/jsx("span", {
-    className: (displayUnderline ) + " " + ((hasNoUnderline ? displayUnderlineWhenHovered : undefined) || ""),
+    className: className,
     children: children
   });
 }