@cdek-it/react-native-ui-kit 0.5.0 → 0.6.0-beta.0

package/README.md

@@ -10,7 +10,6 @@
 yarn add \
   react \
   react-native \
-  @tabler/icons-react-native \
   react-native-svg \
   react-native-reanimated
 ```
@@ -25,7 +24,6 @@ yarn add @cdek-it/react-native-ui-kit
 npm i \
   react \
   react-native \
-  @tabler/icons-react-native \
   react-native-svg \
   react-native-reanimated
 ```

package/dist/components/Dialog/Dialog.js

@@ -1,36 +1,38 @@
-import { Portal } from '@gorhom/portal';
-import React, { useCallback, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, Pressable } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring, runOnJS, interpolate, } from 'react-native-reanimated';
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, StyleSheet, Pressable, Modal } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, Easing, } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { DialogComponent } from './DialogComponent';
-const ANIMATION_DURATION = 200;
+const ANIMATION_BACKDROP_DURATION = 200;
+const ANIMATION_CONTENT_DURATION = 500;
 const BACKDROP_OPACITY = 0.5;
-const SCALE_DAMPING = 5;
-const SCALE_STIFFNESS = 50;
 const SCALE_INIT_VALUE = 0.9;
 // eslint-disable-next-line import-x/no-deprecated
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const Dialog = ({ isVisible, onClose, onHideComplete, header, footer, body, testID, }) => {
+    const [showModal, setShowModal] = useState(false);
     const opacity = useSharedValue(0);
     const scale = useSharedValue(SCALE_INIT_VALUE);
     const handleAnimationComplete = useCallback(() => {
         if (onHideComplete) {
             onHideComplete();
         }
+        setShowModal(false);
     }, [onHideComplete]);
     useEffect(() => {
         if (isVisible) {
-            opacity.value = withTiming(1, { duration: ANIMATION_DURATION });
-            scale.value = withSpring(1, {
-                damping: SCALE_DAMPING,
-                stiffness: SCALE_STIFFNESS,
+            setShowModal(true);
+            opacity.value = withTiming(1, { duration: ANIMATION_BACKDROP_DURATION });
+            scale.value = withTiming(1, {
+                duration: ANIMATION_CONTENT_DURATION,
+                easing: Easing.elastic(1.2),
             });
         }
         else {
-            opacity.value = withTiming(0, { duration: ANIMATION_DURATION });
-            scale.value = withTiming(SCALE_INIT_VALUE, { duration: ANIMATION_DURATION }, (finished) => {
+            opacity.value = withTiming(0, { duration: ANIMATION_BACKDROP_DURATION });
+            scale.value = withTiming(SCALE_INIT_VALUE, { duration: ANIMATION_BACKDROP_DURATION }, (finished) => {
                 if (finished) {
-                    runOnJS(handleAnimationComplete)();
+                    scheduleOnRN(handleAnimationComplete);
                 }
             });
         }
@@ -43,51 +45,18 @@ export const Dialog = ({ isVisible, onClose, onHideComplete, header, footer, bod
     const dialogAnimatedStyle = useAnimatedStyle(() => {
         return { opacity: opacity.value, transform: [{ scale: scale.value }] };
     });
-    useEffect(() => {
-        const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
-            if (isVisible) {
-                onClose?.();
-                return true;
-            }
-            return false;
-        });
-        return subscription.remove;
-    }, [isVisible, onClose]);
-    return (<Portal>
-      <View style={[
-            styles.container,
-            !isVisible && styles.containerNoPointerEvents,
-        ]} testID={testID ?? DialogTestId.root}>
+    return (<Modal transparent animationType='none' visible={showModal} onRequestClose={onClose}>
+      <View style={styles.container} testID={testID ?? DialogTestId.root}>
         <AnimatedPressable style={[styles.backdrop, backdropAnimatedStyle]} testID={DialogTestId.backdrop} onPress={onClose}/>
         <Animated.View style={dialogAnimatedStyle} testID={DialogTestId.contentContainer}>
           <DialogComponent body={body} footer={footer} header={header}/>
         </Animated.View>
       </View>
-    </Portal>);
+    </Modal>);
 };
 const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 9999,
-        elevation: 999,
-        pointerEvents: 'auto',
-    },
-    containerNoPointerEvents: { pointerEvents: 'none' },
-    backdrop: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'black',
-    },
+    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+    backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: 'black' },
 });
 export const DialogTestId = {
     root: 'DialogModal',

package/dist/components/SelectButton/SelectButton.js

@@ -1,6 +1,7 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { View, } from 'react-native';
-import Animated, { Easing, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Animated, { Easing, interpolate, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { makeStyles } from '../../utils/makeStyles';
 import { SelectButtonItem, } from './SelectButtonItem';
 const DEFAULT_ANIMATION_DURATION = 200; // ms
@@ -24,7 +25,7 @@ export const SelectButton = memo(({ buttons, disabled, initialIndex: initialInde
     }, [buttons.length, buttonsLayoutList]);
     useAnimatedReaction(() => buttonsLayoutList.value, (layoutList, previous) => {
         if (layoutList !== previous) {
-            runOnJS(setFrameKey)(Date.now());
+            scheduleOnRN(setFrameKey, Date.now());
         }
     });
     const positionInner = useSharedValue(initialIndex);

package/dist/components/SelectButton/SelectButtonItem.js

@@ -1,6 +1,7 @@
 import { memo, useMemo, useState } from 'react';
 import { TouchableOpacity } from 'react-native';
-import Animated, { interpolateColor, runOnJS, useAnimatedReaction, useAnimatedStyle, } from 'react-native-reanimated';
+import Animated, { interpolateColor, useAnimatedReaction, useAnimatedStyle, } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { SvgUniversal } from '../../utils/SvgUniversal';
 import { makeStyles } from '../../utils/makeStyles';
 /**
@@ -57,7 +58,7 @@ export const SelectButtonItem = memo(({ index, position, onPress, disabled, labe
     const [isSelected, setIsSelected] = useState(false);
     useAnimatedReaction(() => position.value, (value, prevValue) => {
         if (value !== prevValue) {
-            runOnJS(setIsSelected)(value === index);
+            scheduleOnRN(setIsSelected, value === index);
         }
     });
     return (<TouchableOpacity disabled={disabled} style={[

package/dist/components/Slider/Slider.js

@@ -1,7 +1,8 @@
 import { memo, useCallback, useMemo, useState } from 'react';
 import { View, } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation, runOnJS, } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation, } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { makeStyles } from '../../utils/makeStyles';
 const MIN_TRACK_SCALE = 0;
 const MAX_TRACK_SCALE = 100;
@@ -58,16 +59,16 @@ export const Slider = memo(
         .minDistance(1)
         .onBegin(() => {
         prevMinPointX.value = minPointX.value;
-        runOnJS(setIsPressed)(true);
+        scheduleOnRN(setIsPressed, true);
     })
         .onUpdate((event) => {
         const maxTranslateX = trackWidth.value - pointerWidth;
         const minPointPosition = clamp(prevMinPointX.value + event.translationX, 0, range ? maxPointX.value - pointerWidth : maxTranslateX);
         minPointX.value = minPointPosition;
-        runOnJS(returnMinVal)(minPointPosition);
+        scheduleOnRN(returnMinVal, minPointPosition);
     })
         .onFinalize(() => {
-        runOnJS(setIsPressed)(false);
+        scheduleOnRN(setIsPressed, false);
     });
     const minPointStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: minPointX.value }],
@@ -76,16 +77,16 @@ export const Slider = memo(
         .minDistance(1)
         .onBegin(() => {
         prevMaxPointX.value = maxPointX.value;
-        runOnJS(setIsPressed)(true);
+        scheduleOnRN(setIsPressed, true);
     })
         .onUpdate((event) => {
         const maxTranslateX = trackWidth.value - pointerWidth;
         const maxPointPosition = clamp(prevMaxPointX.value + event.translationX, minPointX.value + pointerWidth, maxTranslateX);
         maxPointX.value = maxPointPosition;
-        runOnJS(returnMaxVal)(maxPointPosition);
+        scheduleOnRN(returnMaxVal, maxPointPosition);
     })
         .onFinalize(() => {
-        runOnJS(setIsPressed)(false);
+        scheduleOnRN(setIsPressed, false);
     });
     const maxPointStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: maxPointX.value }],

package/dist/components/Timer/TimerFlip.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { makeStyles } from '../../utils/makeStyles';
 import { COUNTER_SIZE } from './constants';
 export const TimerFlip = memo(({ value, duration = 300 }) => {
@@ -29,7 +30,7 @@ export const TimerFlip = memo(({ value, duration = 300 }) => {
         setNextValue(value);
         progress.value = withTiming(1, { duration }, (finished) => {
             if (finished) {
-                runOnJS(setCurrentValue)(value);
+                scheduleOnRN(setCurrentValue, value);
             }
         });
     }, [value, currentValue, duration, progress, nextValue]);

package/dist/theme/assets/InputSize/base.json

@@ -1,3 +1 @@
-{
-    "min-height": 35
-}
+{ "min-height": 35 }

package/dist/theme/assets/InputSize/large.json

@@ -1,3 +1 @@
-{
-    "min-height": 49
-}
+{ "min-height": 49 }

package/dist/theme/assets/InputSize/xlarge.json

@@ -1,3 +1 @@
-{
-    "min-height": 56
-}
+{ "min-height": 56 }

package/dist/theme/assets/ModalSize/lg.json

@@ -1,4 +1 @@
-{
-    "width": 420,
-    "height": 280
-}
+{ "width": 420, "height": 280 }

package/dist/theme/assets/ModalSize/md.json

@@ -1,4 +1 @@
-{
-    "width": 350,
-    "height": 210
-}
+{ "width": 350, "height": 210 }

package/dist/theme/assets/ModalSize/sm.json

@@ -1,4 +1 @@
-{
-    "width": 280,
-    "height": 140
-}
+{ "width": 280, "height": 140 }

package/dist/theme/assets/ModalSize/xl.json

@@ -1,4 +1 @@
-{
-    "width": 630,
-    "height": 350
-}
+{ "width": 630, "height": 350 }

package/dist/theme/assets/themeDark.json

@@ -388,11 +388,7 @@
         }
     },
     "Misc": {
-        "Tag": {
-            "tagHeight": 21,
-            "tagFontSize": 12.25,
-            "tagPadding": 7
-        },
+        "Tag": { "tagHeight": 21, "tagFontSize": 12.25, "tagPadding": 7 },
         "Skeleton": {
             "skeletonBg": "#404348",
             "skeletonAnimationBg": "rgba(255, 255, 255, 0.1)"
@@ -616,9 +612,7 @@
             "ratingStarIconOnColor": "#facb75",
             "ratingStarIconHoverColor": "#f5b83d"
         },
-        "InputOpt": {
-            "inputOptFontSize": 21
-        },
+        "InputOpt": { "inputOptFontSize": 21 },
         "ToggleButton": {
             "toggleButtonBg": "#404348",
             "toggleButtonBorderColor": "rgba(0, 0, 0, 0.0001)",

package/dist/theme/assets/themeLight.json

@@ -388,11 +388,7 @@
         }
     },
     "Misc": {
-        "Tag": {
-            "tagHeight": 21,
-            "tagFontSize": 12.25,
-            "tagPadding": 7
-        },
+        "Tag": { "tagHeight": 21, "tagFontSize": 12.25, "tagPadding": 7 },
         "Skeleton": {
             "skeletonBg": "#e2e2e4",
             "skeletonAnimationBg": "rgba(255, 255, 255, 0.1)"
@@ -616,9 +612,7 @@
             "ratingStarIconOnColor": "#f5b83d",
             "ratingStarIconHoverColor": "#facb75"
         },
-        "InputOpt": {
-            "inputOptFontSize": 21
-        },
+        "InputOpt": { "inputOptFontSize": 21 },
         "ToggleButton": {
             "toggleButtonBg": "#e2e2e4",
             "toggleButtonBorderColor": "rgba(255, 255, 255, 0.0001)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdek-it/react-native-ui-kit",
-  "version": "0.5.0",
+  "version": "0.6.0-beta.0",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",
@@ -41,91 +41,91 @@
     "release": "release-it",
     "pod-install": "bundle exec pod install --project-directory=ios"
   },
+  "dependencies": {
+    "@gorhom/portal": "^1.0.14",
+    "@tabler/icons-react-native": "^3.36.0"
+  },
   "devDependencies": {
-    "@babel/core": "7.28.3",
+    "@babel/core": "7.28.5",
     "@babel/plugin-transform-class-static-block": "7.28.3",
-    "@babel/preset-env": "7.28.3",
+    "@babel/preset-env": "7.28.5",
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-conventional": "19.8.1",
-    "@eslint/compat": "1.2.8",
-    "@expo/metro-runtime": "4.0.1",
-    "@gorhom/bottom-sheet": "5.0.6",
-    "@gorhom/portal": "1.0.14",
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-native-community/slider": "4.5.6",
+    "@eslint/compat": "2.0.0",
+    "@expo/metro-runtime": "6.1.2",
+    "@gorhom/bottom-sheet": "5.2.8",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.5.1",
+    "@react-native-community/slider": "5.1.1",
     "@release-it/conventional-changelog": "10.0.1",
-    "@storybook/addon-actions": "8.3.5",
-    "@storybook/addon-controls": "8.3.5",
-    "@storybook/addon-ondevice-actions": "8.3.5",
-    "@storybook/addon-ondevice-controls": "8.3.5",
-    "@storybook/addon-ondevice-notes": "8.3.5",
-    "@storybook/core": "8.3.5",
-    "@storybook/preview-api": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/react-native": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@stylistic/eslint-plugin": "5.5.0",
-    "@tabler/icons-react-native": "3.31.0",
-    "@testing-library/react-native": "13.3.1",
+    "@storybook/addon-controls": "9.0.8",
+    "@storybook/addon-ondevice-actions": "10.1.1",
+    "@storybook/addon-ondevice-controls": "10.1.1",
+    "@storybook/addon-ondevice-notes": "10.1.1",
+    "@storybook/core": "8.6.14",
+    "@storybook/preview-api": "8.6.14",
+    "@storybook/react-native": "10.1.1",
+    "@stylistic/eslint-plugin": "5.6.1",
+    "@testing-library/react-native": "13.3.3",
     "@types/jest": "29.5.14",
-    "@types/lodash.map": "^4",
-    "@types/react": "19.0.10",
+    "@types/lodash.map": "4.6.13",
+    "@types/react": "19.1.10",
     "babel-loader": "8.2.3",
     "chalk": "4.1.2",
     "commitizen": "4.3.1",
     "cross-env": "7.0.3",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import-x": "4.16.1",
-    "eslint-plugin-jest": "29.1.0",
+    "eslint-plugin-jest": "29.5.0",
     "eslint-plugin-jest-extended": "3.0.1",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-react-native": "5.0.0",
-    "eslint-plugin-testing-library": "7.13.4",
-    "expo": "53.0.24",
-    "expo-application": "6.1.5",
-    "expo-constants": "17.1.7",
-    "expo-doctor": "1.17.0",
-    "expo-status-bar": "2.2.3",
+    "eslint-plugin-testing-library": "7.15.1",
+    "expo": "54.0.30",
+    "expo-application": "7.0.8",
+    "expo-constants": "18.0.12",
+    "expo-doctor": "1.17.14",
+    "expo-status-bar": "3.0.9",
     "inquirer-search-list": "1.2.6",
     "jest": "29.7.0",
-    "jest-expo": "53.0.10",
+    "jest-expo": "54.0.16",
     "jest-extended": "6.0.0",
     "jest-junit": "16.0.0",
     "jiti": "2.5.1",
-    "lefthook": "2.0.4",
+    "lefthook": "2.0.12",
     "lodash.map": "4.6.0",
     "longest": "2.0.1",
-    "npm-check-updates": "18.0.2",
+    "npm-check-updates": "19.2.0",
     "onchange": "7.1.0",
-    "prettier": "3.6.2",
-    "react": "19.0.0",
-    "react-native": "0.79.6",
-    "react-native-advanced-input-mask": "1.4.4",
-    "react-native-gesture-handler": "2.28.0",
-    "react-native-reanimated": "3.19.1",
-    "react-native-safe-area-context": "5.6.1",
-    "react-native-svg": "15.12.1",
-    "release-it": "19.0.6",
+    "prettier": "3.7.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-advanced-input-mask": "1.4.6",
+    "react-native-gesture-handler": "2.29.1",
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.2",
+    "react-native-svg": "15.15.1",
+    "react-native-worklets": "0.5.1",
+    "release-it": "19.1.0",
     "standard-version": "9.5.0",
-    "storybook": "8.3.5",
+    "storybook": "10.1.10",
+    "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.39.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.50.0",
     "word-wrap": "1.2.5"
   },
   "peerDependencies": {
-    "@gorhom/portal": "1.0.14",
-    "@tabler/icons-react-native": ">=3.x",
-    "expo": ">=53.x.x",
-    "react": ">=18.x",
-    "react-native": ">=0.77.x",
-    "react-native-reanimated": ">=3.15.x",
-    "react-native-svg": ">=15.11.x"
+    "expo": ">=54.x.x",
+    "react": ">=19.1",
+    "react-native": ">=0.81.5",
+    "react-native-reanimated": ">=4.1.1",
+    "react-native-svg": ">=15.15.1"
   },
   "peerDependenciesMeta": {
     "expo": {