@ornikar/kitt-universal 31.1.1 → 31.2.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [31.2.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@31.1.1...@ornikar/kitt-universal@31.2.0) (2025-11-26)
+
+
+### Features
+
+* **kitt-universal/Button:** add timer gauge option OSE-21414 ([#2771](https://github.com/ornikar/kitt/issues/2771)) ([c1f1e27](https://github.com/ornikar/kitt/commit/c1f1e27fe5dd78718338bab01178bca075c4ae07))
+* upgrade RTL [OSE-18110] ([#2769](https://github.com/ornikar/kitt/issues/2769)) ([56bcbe4](https://github.com/ornikar/kitt/commit/56bcbe4d1933bb4ae099f85b546790ba537d18f7))
+
+
+### Bug Fixes
+
+* **card-modal:** revert remove linaria from card modal OSE-21655 ([#2774](https://github.com/ornikar/kitt/issues/2774)) ([de7c058](https://github.com/ornikar/kitt/commit/de7c058a9b5e228f39de923d7d28e48deb0bb466))
+
+
+
 ## [31.1.1](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@31.1.0...@ornikar/kitt-universal@31.1.1) (2025-11-24)
 
 

package/dist/definitions/Button/Button.d.ts

@@ -14,6 +14,11 @@ export interface ButtonProps extends Pick<PressableProps, 'onPress' | 'onFocus'
     iconPosition?: IconPosition;
     withBadge?: boolean;
     badgeCount?: number;
+    timerAttrs?: {
+        duration: number;
+        running: boolean;
+        onEnded: () => void;
+    };
     testID?: PressableProps['testID'];
     href?: PressableProps['href'];
     hrefAttrs?: PressableProps['hrefAttrs'];

package/dist/definitions/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAQ5G,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IACxD,YAAY,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,uOAkGlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAS5G,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACzE,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IACxD,YAAY,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,uOAoGlB,CAAC"}

package/dist/definitions/Button/ButtonGauge.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+interface ButtonGaugeProps {
+    duration: number;
+    running: boolean;
+    onEnded: () => void;
+}
+export declare function ButtonGauge({ duration, running, onEnded }: ButtonGaugeProps): ReactNode;
+export {};
+//# sourceMappingURL=ButtonGauge.d.ts.map

package/dist/definitions/Button/ButtonGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGauge.d.ts","sourceRoot":"","sources":["../../../src/Button/ButtonGauge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,SAAS,CAgFvF"}

package/dist/definitions/CardModal/CardModalAnimation/CardModalAnimation.web.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import type { CardModalAnimationProps } from './CardModalAnimation';
+export declare function CardModalAnimation({ children, appear, visible, unmountOnExit, isAnimationEnabled, onEnter, onEntered, onExit, onExited, onClose, ...props }: CardModalAnimationProps): ReactNode;
+//# sourceMappingURL=CardModalAnimation.web.d.ts.map

package/dist/definitions/CardModal/CardModalAnimation/CardModalAnimation.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardModalAnimation.web.d.ts","sourceRoot":"","sources":["../../../../src/CardModal/CardModalAnimation/CardModalAnimation.web.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAW/C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAiEpE,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,MAAa,EACb,OAAO,EACP,aAAoB,EACpB,kBAAyB,EACzB,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,SAAS,CA0CrC"}

package/dist/definitions/CardModal/CardModalAnimation/NativeRotationAnimation.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { CardModalAnimationProps } from './CardModalAnimation';
 export interface NativeRotationAnimationProps {
     children: ReactNode;
+    topInset?: number;
     visible?: CardModalAnimationProps['visible'];
     onEntered?: CardModalAnimationProps['onEntered'];
     onExited: () => void;

package/dist/definitions/CardModal/CardModalAnimation/NativeRotationAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeRotationAnimation.d.ts","sourceRoot":"","sources":["../../../../src/CardModal/CardModalAnimation/NativeRotationAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,4BAA4B,GAAG,SAAS,CAsC1C"}
+{"version":3,"file":"NativeRotationAnimation.d.ts","sourceRoot":"","sources":["../../../../src/CardModal/CardModalAnimation/NativeRotationAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,4BAA4B,GAAG,SAAS,CAsC1C"}

package/dist/index-metro.es.android.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, createContext, forwardRef, useMemo, cloneElement, useRef, useEffect, useState, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
+import React, { 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, useMediaQuery } from 'native-base';
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -3634,6 +3634,79 @@ function ButtonContent(_ref) {
   });
 }
 
+function ButtonGauge({
+  duration,
+  running,
+  onEnded
+}) {
+  const [translate, setTranslate] = useState(100);
+  const startTimeRef = useRef(0);
+  const pauseTimeRef = useRef(0);
+  const rafRef = useRef(undefined);
+  const distance = 100;
+  const draw = 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
+  []);
+  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]);
+  useEffect(() => {
+    return () => {
+      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: `${translate}%`,
+      height: "100%",
+      backgroundColor: "kitt.palettes.deepPurple['white-alpha.20']"
+    })
+  });
+}
+
 function ButtonPadding({
   children,
   size,
@@ -3724,6 +3797,7 @@ const Button = /*#__PURE__*/forwardRef(({
   hrefAttrs,
   withBadge,
   badgeCount,
+  timerAttrs,
   accessibilityRole: _accessibilityRole = 'button',
   innerSpacing: _innerSpacing = 'center',
   isHoveredInternal,
@@ -3771,7 +3845,7 @@ const Button = /*#__PURE__*/forwardRef(({
       isHovered,
       isPressed,
       isFocused
-    }) => /*#__PURE__*/jsx(AnimatedContainer$2, {
+    }) => /*#__PURE__*/jsxs(AnimatedContainer$2, {
       animatedStyles: animatedStyles,
       type: _type,
       isHovered: isHovered || isHoveredInternal,
@@ -3781,7 +3855,7 @@ const Button = /*#__PURE__*/forwardRef(({
       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, {
@@ -3803,7 +3877,7 @@ const Button = /*#__PURE__*/forwardRef(({
           isHovered: isHovered,
           isPressed: isPressed
         })]
-      })
+      })]
     })
   });
 });
@@ -4317,7 +4391,7 @@ function NativeOpacityAnimation$2({
         runOnJS(handleAnimationFinished)();
       })
     };
-  }, [visible]);
+  });
   return /*#__PURE__*/jsx(Animated.View, {
     style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
@@ -4372,11 +4446,9 @@ function NativeRotationAnimation$1({
         rotateZ: `${rotation.value}deg`
       }]
     };
-  }, [rotation, visible]);
+  });
   return /*#__PURE__*/jsx(Animated.View, {
-    style: [{
-      flexShrink: 1
-    }, animatedStyle],
+    style: [animatedStyle],
     children: children
   });
 }