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

package/dist/index-node-22.17.cjs.web.css

@@ -20,5 +20,23 @@
 .kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
 .kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
 .kitt-u_exitActive_e1004d1h{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
-.kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:underline;text-decoration:underline;}.kitt-u_displayUnderline_dch42t > *:hover,.kitt-u_displayUnderline_dch42t > *:active,.kitt-hover .kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:none;text-decoration:none;}
-.kitt-u_displayUnderlineWhenHovered_d80w0t7 > *{-webkit-text-decoration:none;text-decoration:none;}.kitt-u_displayUnderlineWhenHovered_d80w0t7 > *:hover,.kitt-u_displayUnderlineWhenHovered_d80w0t7 > *:active,.kitt-hover .kitt-u_displayUnderlineWhenHovered_d80w0t7 > *{-webkit-text-decoration:underline;text-decoration:underline;}
+/* overrides :global(a) in Link styles.module.css */
+.TypographyLinkWebWrapper-module_displayUnderline__KxwMp > * {
+  text-decoration: underline;
+}
+
+.TypographyLinkWebWrapper-module_displayUnderline__KxwMp > *:hover,
+.TypographyLinkWebWrapper-module_displayUnderline__KxwMp > *:active,
+.TypographyLinkWebWrapper-module_kitt-hover__CyENw .TypographyLinkWebWrapper-module_displayUnderline__KxwMp > * {
+  text-decoration: none;
+}
+
+.TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl > * {
+  text-decoration: none;
+}
+
+.TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl > *:hover,
+.TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl > *:active,
+.TypographyLinkWebWrapper-module_kitt-hover__CyENw .TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl > * {
+  text-decoration: underline;
+}

package/dist/index-node-22.17.cjs.web.js

@@ -3651,6 +3651,79 @@ function ButtonContent({
   });
 }
 
+function ButtonGauge({
+  duration,
+  running,
+  onEnded
+}) {
+  const [translate, setTranslate] = react.useState(100);
+  const startTimeRef = react.useRef(0);
+  const pauseTimeRef = react.useRef(0);
+  const rafRef = react.useRef(undefined);
+  const distance = 100;
+  const draw = react.useCallback(timestamp => {
+    const timeElapsedSinceStart = timestamp - startTimeRef.current;
+    // Since the time between frame is not reliable and regular, we have to
+    // limit the progress to prevent overflows
+    const 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
+  []);
+  react.useLayoutEffect(() => {
+    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]);
+  react.useEffect(() => {
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+    alignItems: "flex-end",
+    borderRadius: "kitt.button.borderRadius",
+    children: /*#__PURE__*/jsxRuntime.jsx(View, {
+      width: `${translate}%`,
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding({
   children,
   size,
@@ -3723,6 +3796,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   hrefAttrs,
   withBadge,
   badgeCount,
+  timerAttrs,
   accessibilityRole = 'button',
   innerSpacing = 'center',
   isHoveredInternal,
@@ -3767,7 +3841,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsxRuntime.jsx(AnimatedContainer$2, {
+    }) => /*#__PURE__*/jsxRuntime.jsxs(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: type,
       isHovered: isHovered || isHoveredInternal,
@@ -3777,7 +3851,9 @@ const Button = /*#__PURE__*/react.forwardRef(({
       size: size,
       isIconOnly: isIconOnly,
       isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
+      children: [timerAttrs ? /*#__PURE__*/jsxRuntime.jsx(ButtonGauge, {
+        ...timerAttrs
+      }) : null, /*#__PURE__*/jsxRuntime.jsxs(ButtonPadding, {
         size: size,
         isIconOnly: isIconOnly,
         children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
@@ -3799,7 +3875,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
           isHovered: isHovered,
           isPressed: isPressed
         })]
-      })
+      })]
     })
   });
 });
@@ -13219,15 +13295,15 @@ function TypographyEmoji({
   });
 }
 
-// overrides :global(a) in Link styles.module.css
-const displayUnderline = "kitt-u_displayUnderline_dch42t";
-const displayUnderlineWhenHovered = "kitt-u_displayUnderlineWhenHovered_d80w0t7";
+const styles = {"displayUnderline":"TypographyLinkWebWrapper-module_displayUnderline__KxwMp","kitt-hover":"TypographyLinkWebWrapper-module_kitt-hover__CyENw","displayUnderlineWhenHovered":"TypographyLinkWebWrapper-module_displayUnderlineWhenHovered__5V5Cl"};
+
 function TypographyLinkWebWrapper({
   children,
   hasNoUnderline
 }) {
+  const className = hasNoUnderline ? `${styles.displayUnderline} ${styles.displayUnderlineWhenHovered}` : styles.displayUnderline;
   return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: (displayUnderline ) + " " + ((hasNoUnderline ? displayUnderlineWhenHovered : undefined) || ""),
+    className: className,
     children: children
   });
 }