@cdek-it/react-native-ui-kit 0.6.9 → 1.0.0-beta.0

package/dist/components/MenuItem/Template/MenuItemTemplate.js

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { View, Pressable, } from 'react-native';
-import { makeStyles } from '../../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Body, Caption } from '../../Typography';
 import { MenuItemAccessory } from '../MenuItemAccessory';
 import { MenuItemIcon } from '../MenuItemIcon';
@@ -10,14 +10,17 @@ import { MenuItemIcon } from '../MenuItemIcon';
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=937-6724&m=dev
  */
 export const MenuItemTemplate = memo(({ title, caption, Icon, iconColor, badgeSeverity, PrefixIcon, SuffixIcon, extra, separator, testID, onPress, disabled, style, ...rest }) => {
-    const styles = useStyles();
-    const iconStyle = useMemo(() => ({ ...styles.icon, color: iconColor || styles.icon.color }), [iconColor, styles.icon]);
+    const iconStyle = useMemo(() => ({
+        width: styles.icon.width,
+        height: styles.icon.height,
+        color: iconColor || styles.icon.color,
+    }), [iconColor]);
     const pressableStyle = useCallback(({ pressed }) => [
         styles.container,
         pressed && styles.containerPressed,
         style,
         disabled && styles.containerDisabled,
-    ], [disabled, styles, style]);
+    ], [disabled, style]);
     return (<View style={separator ? styles.separator : null}>
         <Pressable accessibilityLabel={title} accessibilityRole='button' accessibilityValue={{ text: caption }} disabled={disabled} style={pressableStyle} testID={testID || 'menuItemButton'} onPress={onPress} {...rest}>
           <View style={styles.contentContainer}>
@@ -35,7 +38,7 @@ export const MenuItemTemplate = memo(({ title, caption, Icon, iconColor, badgeSe
         </Pressable>
       </View>);
 });
-const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
+const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({
     container: {
         borderColor: theme.Menu.Item.menuitemBorderColor,
         borderWidth: border.Width.border,

package/dist/components/Message/Message.js

@@ -1,17 +1,23 @@
 import { IconAlertCircle, IconAlertTriangle, IconCircleCheck, IconInfoCircle, IconX, } from '@tabler/icons-react-native';
 import { memo, useMemo } from 'react';
 import { View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 import { ButtonSeverity } from '../Button/ButtonSeverity';
 import { Timer } from '../Timer/Timer';
 import { Body, Caption } from '../Typography';
+const messageIconColor = {
+    info: (t) => t.Message.Severities.Info.infoMessageIconColor,
+    success: (t) => t.Message.Severities.Success.successMessageIconColor,
+    warning: (t) => t.Message.Severities.Warning.warningMessageIconColor,
+    danger: (t) => t.Message.Severities.Danger.dangerMessageIconColor,
+};
 /**
  * Унифицированный компонент, который используется для отображения информационных сообщений
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=562-2947
  */
 export const Message = memo(({ title, body, caption, footer, onClose, closeLabel, onTimerFinish, severity = 'info', hiddenIcon = false, style, testID, timerValue, Icon: IconProp, ...rest }) => {
-    const styles = useStyles();
+    messageStyles.useVariants({ severity });
     const Icon = useMemo(() => {
         if (IconProp) {
             return IconProp;
@@ -36,21 +42,23 @@ export const Message = memo(({ title, body, caption, footer, onClose, closeLabel
             return (<ButtonSeverity label={closeLabel} {...buttonCommonProps} testID={TestId.CloseButton}/>);
         }
         return (<ButtonSeverity iconOnly Icon={IconX} {...buttonCommonProps} testID={TestId.CloseButton}/>);
-    }, [closeLabel, severity, onClose]);
+    }, [closeLabel, onClose, severity]);
     const LeftContent = useMemo(() => {
         if (timerValue) {
             return <Timer countFrom={timerValue} onFinish={onTimerFinish}/>;
         }
         if (!hiddenIcon) {
-            return (<SvgUniversal color={styles[`content${severity}`].borderColor} height={styles.iconSize.height} source={Icon} testID={TestId.Icon} width={styles.iconSize.width}/>);
+            return (<SvgUniversal {...messageStyles.iconSize} source={Icon} testID={TestId.Icon} uniProps={({ theme }) => ({
+                    color: messageIconColor[severity](theme),
+                })}/>);
         }
         return undefined;
-    }, [timerValue, hiddenIcon, onTimerFinish, Icon, styles, severity]);
-    return (<View accessible style={[styles.container, styles[severity], style]} testID={testID || TestId.Container} {...rest}>
-        <View style={[styles.content, styles[`content${severity}`]]}>
-          <View style={styles.titleRow}>
+    }, [hiddenIcon, Icon, onTimerFinish, severity, timerValue]);
+    return (<View accessible style={[messageStyles.container, style]} testID={testID || TestId.Container} {...rest}>
+        <View style={messageStyles.content}>
+          <View style={messageStyles.titleRow}>
             {LeftContent}
-            <View style={styles.titleTextContainer}>
+            <View style={messageStyles.titleTextContainer}>
               <Body base testID={TestId.Title} weight='bold'>
                 {title}
               </Body>
@@ -63,11 +71,31 @@ export const Message = memo(({ title, body, caption, footer, onClose, closeLabel
         </View>
       </View>);
 });
-const useStyles = makeStyles(({ theme, typography, spacing, border }) => ({
+const messageStyles = StyleSheet.create(({ theme, typography, spacing, border }) => ({
     container: {
         borderRadius: theme.General.borderRadiusXL,
         borderWidth: border.Width.border,
         overflow: 'hidden',
+        variants: {
+            severity: {
+                info: {
+                    borderColor: theme.Message.Severities.Info.infoMessageBorderColor,
+                    backgroundColor: theme.Message.Severities.Info.infoMessageBg,
+                },
+                success: {
+                    borderColor: theme.Message.Severities.Success.successMessageBorderColor,
+                    backgroundColor: theme.Message.Severities.Success.successMessageBg,
+                },
+                warning: {
+                    borderColor: theme.Message.Severities.Warning.warningMessageBorderColor,
+                    backgroundColor: theme.Message.Severities.Warning.warningMessageBg,
+                },
+                danger: {
+                    borderColor: theme.Message.Severities.Danger.dangerMessageBorderColor,
+                    backgroundColor: theme.Message.Severities.Danger.dangerMessageBg,
+                },
+            },
+        },
     },
     content: {
         flexGrow: 1,
@@ -75,34 +103,22 @@ const useStyles = makeStyles(({ theme, typography, spacing, border }) => ({
         padding: spacing.Padding['p-4'],
         paddingLeft: spacing.Padding['p-5'],
         gap: spacing.Gap['gap-4'],
-    },
-    info: {
-        borderColor: theme.Message.Severities.Info.infoMessageBorderColor,
-        backgroundColor: theme.Message.Severities.Info.infoMessageBg,
-    },
-    contentinfo: {
-        borderColor: theme.Message.Severities.Info.infoMessageIconColor,
-    },
-    success: {
-        borderColor: theme.Message.Severities.Success.successMessageBorderColor,
-        backgroundColor: theme.Message.Severities.Success.successMessageBg,
-    },
-    contentsuccess: {
-        borderColor: theme.Message.Severities.Success.successMessageIconColor,
-    },
-    warning: {
-        borderColor: theme.Message.Severities.Warning.warningMessageBorderColor,
-        backgroundColor: theme.Message.Severities.Warning.warningMessageBg,
-    },
-    contentwarning: {
-        borderColor: theme.Message.Severities.Warning.warningMessageIconColor,
-    },
-    danger: {
-        borderColor: theme.Message.Severities.Danger.dangerMessageBorderColor,
-        backgroundColor: theme.Message.Severities.Danger.dangerMessageBg,
-    },
-    contentdanger: {
-        borderColor: theme.Message.Severities.Danger.dangerMessageIconColor,
+        variants: {
+            severity: {
+                info: {
+                    borderColor: theme.Message.Severities.Info.infoMessageIconColor,
+                },
+                success: {
+                    borderColor: theme.Message.Severities.Success.successMessageIconColor,
+                },
+                warning: {
+                    borderColor: theme.Message.Severities.Warning.warningMessageIconColor,
+                },
+                danger: {
+                    borderColor: theme.Message.Severities.Danger.dangerMessageIconColor,
+                },
+            },
+        },
     },
     titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] },
     titleTextContainer: {

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { View, Text, } from 'react-native';
 import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 /**
  * Компонент ProgressBar
  * @param value - значение прогресса от 0 до 100
@@ -11,7 +11,6 @@ import { makeStyles } from '../../utils/makeStyles';
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5024&m=dev
  */
 export const ProgressBar = memo(({ value: propsValue, showValue = false, style }) => {
-    const styles = useStyles();
     const [containerWidth, setContainerWidth] = useState(0);
     const indicatorWidth = useSharedValue(0);
     const onLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => {
@@ -39,7 +38,7 @@ export const ProgressBar = memo(({ value: propsValue, showValue = false, style }
         </Animated.View>
       </View>);
 });
-const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({
     container: {
         borderRadius: border.Radius['rounded-full'],
         backgroundColor: theme.Misc.ProgressBar.progressBarBg,

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -1,7 +1,7 @@
 import { memo, useEffect, useMemo } from 'react';
 import Animated, { Easing, interpolate, useAnimatedProps, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const STROKE_WIDTH = 2;
@@ -10,7 +10,6 @@ const STROKE_WIDTH = 2;
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=1219-3086
  */
 export const ProgressSpinner = memo(({ size = 'md', fill = 'primary' }) => {
-    const styles = useStyles();
     const circleAnimation = useSharedValue(0);
     const containerAnimation = useSharedValue(0);
     const sizeInDp = useMemo(() => {
@@ -32,7 +31,7 @@ export const ProgressSpinner = memo(({ size = 'md', fill = 'primary' }) => {
             case 'white':
                 return styles.white.color;
         }
-    }, [fill, styles.primary.color, styles.white.color]);
+    }, [fill]);
     const center = useMemo(() => sizeInDp / 2, [sizeInDp]);
     const radius = useMemo(() => center - STROKE_WIDTH / 2, [center]);
     const circleLength = useMemo(() => 2 * Math.PI * radius, [radius]);
@@ -56,7 +55,7 @@ export const ProgressSpinner = memo(({ size = 'md', fill = 'primary' }) => {
         <AnimatedCircle animatedProps={circleAnimatedProps} cx={center} cy={center} fill='none' r={radius} stroke={color} strokeLinecap='round' strokeWidth={STROKE_WIDTH}/>
       </AnimatedSvg>);
 });
-const useStyles = makeStyles(({ theme, global }) => ({
+const styles = StyleSheet.create(({ theme, global }) => ({
     primary: { color: theme.General.primaryColor },
     white: { color: global.Neutrals.White['white-100'] },
 }));

package/dist/components/RadioButton/RadioButton.js

@@ -1,60 +1,25 @@
-import { memo, useCallback, useMemo } from 'react';
-import { Pressable, StyleSheet, View, } from 'react-native';
+import { memo, useCallback, useState } from 'react';
+import { Pressable, View, } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 export const RadioButton = memo(({ onPress, checked = false, disabled = false, state = 'default', testID, ...rest }) => {
-    const styles = useStyles();
-    const centerViewBackground = useMemo(() => [styles.defaultView, disabled && !checked && styles.disabledView], [disabled, checked, styles.defaultView, styles.disabledView]);
-    const pressableStyles = useCallback(({ pressed }) => {
-        const result = [styles.container, styles.default];
-        if (checked) {
-            result.push(styles.checked);
-        }
-        if (pressed) {
-            result.push(styles.pressed);
-            if (checked) {
-                result.push(styles.checkedPressed);
-            }
-        }
-        if (state === 'danger') {
-            result.push(styles.danger);
-            if (checked) {
-                result.push(styles.dangerChecked);
-                if (pressed) {
-                    result.push(styles.dangerCheckedPressed);
-                }
-            }
-        }
-        if (disabled) {
-            result.push(styles.disabled);
-            if (checked) {
-                result.push(styles.disabledChecked);
-            }
-        }
-        return StyleSheet.flatten(result);
-    }, [
-        checked,
-        disabled,
-        state,
-        styles.container,
-        styles.default,
-        styles.pressed,
-        styles.checked,
-        styles.checkedPressed,
-        styles.danger,
-        styles.dangerChecked,
-        styles.dangerCheckedPressed,
-        styles.disabled,
-        styles.disabledChecked,
-    ]);
+    const [pressed, setPressed] = useState(false);
+    radioStyles.useVariants({
+        checked: checked ? 'true' : 'false',
+        pressed: pressed ? 'true' : 'false',
+        state: state === 'danger' ? 'danger' : undefined,
+        disabled: disabled ? 'true' : 'false',
+    });
+    const onPressIn = useCallback(() => setPressed(true), []);
+    const onPressOut = useCallback(() => setPressed(false), []);
     return (<View>
-        {!disabled && state === 'danger' && (<Animated.View layout={LinearTransition.duration(100)} style={styles.outline}/>)}
-        <Pressable disabled={disabled} style={pressableStyles} testID={testID || 'RadioButton_Pressable'} onPress={onPress} {...rest}>
-          <View style={[styles.center, centerViewBackground]}/>
+        {!disabled && state === 'danger' && (<Animated.View layout={LinearTransition.duration(100)} style={radioStyles.outline}/>)}
+        <Pressable disabled={disabled} style={radioStyles.container} testID={testID || 'RadioButton_Pressable'} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...rest}>
+          <View style={radioStyles.center}/>
         </Pressable>
       </View>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const radioStyles = StyleSheet.create(({ theme }) => ({
     container: {
         width: theme.Form.RadioButton.radiobuttonWidth,
         height: theme.Form.RadioButton.radiobuttonHeight,
@@ -62,11 +27,82 @@ const useStyles = makeStyles(({ theme }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         margin: theme.General.focusShadowWidth,
+        variants: {
+            checked: {
+                true: {
+                    borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+                    borderWidth: 5,
+                },
+                false: {
+                    borderColor: theme.Form.InputText.inputBorderColor,
+                    borderWidth: 1,
+                    backgroundColor: theme.Form.InputText.inputBg,
+                },
+            },
+            pressed: {
+                true: { borderColor: theme.Form.InputText.inputHoverBorderColor },
+                false: {},
+            },
+            state: {
+                danger: { borderColor: theme.Form.InputText.inputErrorBorderColor },
+            },
+            disabled: {
+                true: {
+                    borderColor: theme.Form.InputText.inputBorderColor,
+                    backgroundColor: theme.Button.Disabled.disabledButtonBg,
+                    opacity: 0.6,
+                    borderWidth: 1,
+                },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                checked: 'true',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
+                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
+                    borderWidth: 5,
+                },
+            },
+            {
+                state: 'danger',
+                checked: 'true',
+                styles: {
+                    borderColor: theme.Form.InputText.inputErrorBorderColor,
+                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+                    borderWidth: 1,
+                },
+            },
+            {
+                checked: 'true',
+                disabled: 'true',
+                styles: {
+                    borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+                    backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+                    borderWidth: 5,
+                },
+            },
+        ],
     },
     center: {
         width: theme.Form.RadioButton.radiobuttonIconSize,
         height: theme.Form.RadioButton.radiobuttonIconSize,
         borderRadius: theme.Form.RadioButton.radiobuttonIconSize,
+        backgroundColor: theme.Form.InputText.inputBg,
+        variants: {
+            checked: { true: {}, false: {} },
+            disabled: { true: {}, false: {} },
+        },
+        compoundVariants: [
+            {
+                disabled: 'true',
+                checked: 'false',
+                styles: { backgroundColor: 'transparent' },
+            },
+        ],
     },
     outline: {
         position: 'absolute',
@@ -78,57 +114,4 @@ const useStyles = makeStyles(({ theme }) => ({
             theme.General.focusShadowWidth * 2,
         backgroundColor: theme.General.focusOutlineErrorColor,
     },
-    // centerView
-    defaultView: { backgroundColor: theme.Form.InputText.inputBg },
-    disabledView: { backgroundColor: 'transparent' },
-    // container viewState
-    default: {
-        borderColor: theme.Form.InputText.inputBorderColor,
-        borderWidth: 1,
-        backgroundColor: theme.Form.InputText.inputBg,
-    },
-    pressed: {
-        borderColor: theme.Form.InputText.inputHoverBorderColor,
-        backgroundColor: theme.Form.InputText.inputBg,
-        borderWidth: 1,
-    },
-    checked: {
-        borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        borderWidth: 5,
-    },
-    checkedPressed: {
-        borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-        backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
-        borderWidth: 5,
-    },
-    // danger viewState
-    danger: {
-        borderColor: theme.Form.InputText.inputErrorBorderColor,
-        backgroundColor: theme.Form.InputText.inputBg,
-        borderWidth: 1,
-    },
-    dangerChecked: {
-        borderColor: theme.Form.InputText.inputErrorBorderColor,
-        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        borderWidth: 1,
-    },
-    dangerCheckedPressed: {
-        borderColor: theme.Form.InputText.inputErrorBorderColor,
-        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        borderWidth: 1,
-    },
-    // disabled viewState
-    disabled: {
-        borderColor: theme.Form.InputText.inputBorderColor,
-        backgroundColor: theme.Button.Disabled.disabledButtonBg,
-        opacity: 0.6,
-        borderWidth: 1,
-        mixBlendMode: 'luminosity',
-    },
-    disabledChecked: {
-        borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
-        borderWidth: 5,
-    },
 }));

package/dist/components/Rating/Rating.js

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { RatingClear } from './RatingClear';
 import { RatingItem } from './RatingItem';
 /**
@@ -16,7 +16,6 @@ import { RatingItem } from './RatingItem';
  * @see RatingClear - элемент рейтинга для очистки
  */
 export const Rating = memo(({ disabled = false, paddings = false, maxRating = 5, rating, onChange, onClear, testID, ...rest }) => {
-    const styles = useStyles();
     const handleItemPress = useCallback((index) => () => {
         onChange(index + 1);
     }, [onChange]);
@@ -26,7 +25,7 @@ export const Rating = memo(({ disabled = false, paddings = false, maxRating = 5,
         {renderArray.map((key, index) => (<RatingItem checked={index < rating} key={key} paddings={paddings} testID={`RatingItem-${index + 1}`} onPress={handleItemPress(index)}/>))}
       </View>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     container: {
         flexDirection: 'row',
         gap: theme.General.inlineSpacing,

package/dist/components/Rating/RatingClear.js

@@ -1,6 +1,7 @@
 import { IconBan } from '@tabler/icons-react-native';
 import { memo } from 'react';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
+import { SvgUniversal } from '../../utils';
 import { RatingItemContainer, } from './RatingItemContainer';
 /**
  * Компонент элемента рейтинга для очистки рейтинга
@@ -8,21 +9,19 @@ import { RatingItemContainer, } from './RatingItemContainer';
  * @see RatingItemContainer - компонент контейнер для элемента
  */
 export const RatingClear = memo(({ ...rest }) => {
-    const styles = useStyles();
     return (<RatingItemContainer {...rest}>
-      {({ disabled, pressed }) => (<IconBan color={disabled
-                ? styles.iconDisabled.color
-                : pressed
-                    ? styles.iconPressed.color
-                    : styles.icon.color} height={styles.icon.height} width={styles.icon.width}/>)}
+      {({ disabled, pressed }) => (<SvgUniversal {...styles.icon} source={IconBan} uniProps={({ theme }) => ({
+                color: disabled
+                    ? theme.custom.rating.ratingCancelIconDisabledColor
+                    : pressed
+                        ? theme.Form.Rating.ratingCancelIconHoverColor
+                        : theme.Form.Rating.ratingCancelIconColor,
+            })}/>)}
     </RatingItemContainer>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     icon: {
         height: theme.Form.Rating.ratingIconFontSize,
         width: theme.Form.Rating.ratingIconFontSize,
-        color: theme.Form.Rating.ratingCancelIconColor,
     },
-    iconPressed: { color: theme.Form.Rating.ratingCancelIconHoverColor },
-    iconDisabled: { color: theme.custom.rating.ratingCancelIconDisabledColor },
 }));

package/dist/components/Rating/RatingItem.js

@@ -1,6 +1,7 @@
 import { IconStar, IconStarFilled } from '@tabler/icons-react-native';
 import { memo, useMemo } from 'react';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
+import { SvgUniversal } from '../../utils';
 import { RatingItemContainer, } from './RatingItemContainer';
 /**
  * Компонент элемента рейтинга с иконкой звёздочки
@@ -9,36 +10,34 @@ import { RatingItemContainer, } from './RatingItemContainer';
  * @see RatingItemContainer - компонент контейнер для элемента
  */
 export const RatingItem = memo(({ checked, ...rest }) => {
-    const styles = useStyles();
     const Icon = useMemo(() => (checked ? IconStarFilled : IconStar), [checked]);
     return (<RatingItemContainer {...rest}>
-      {({ pressed, disabled }) => (<Icon color={disabled
-                ? checked
-                    ? styles.iconCheckedDisabled.color
-                    : styles.iconDisabled.color
-                : pressed
-                    ? styles.iconPressed.color
-                    : checked
-                        ? styles.iconChecked.color
-                        : styles.icon.color} fill={checked
-                ? disabled
-                    ? styles.iconCheckedDisabled.color
+      {({ pressed, disabled }) => (<SvgUniversal {...styles.icon} fillOpacity={checked ? 1 : 0} source={Icon} uniProps={({ theme }) => {
+                const color = disabled
+                    ? checked
+                        ? theme.custom.rating.ratingStarIconOnDisabledColor
+                        : theme.custom.rating.ratingStarIconOffDisabledColor
                     : pressed
-                        ? styles.iconPressed.color
-                        : styles.iconChecked.color
-                : undefined} fillOpacity={checked ? 1 : 0} height={styles.icon.height} width={styles.icon.width}/>)}
+                        ? theme.Form.Rating.ratingStarIconHoverColor
+                        : checked
+                            ? theme.Form.Rating.ratingStarIconOnColor
+                            : theme.Form.Rating.ratingStarIconOffColor;
+                return {
+                    color,
+                    fill: checked
+                        ? disabled
+                            ? theme.custom.rating.ratingStarIconOnDisabledColor
+                            : pressed
+                                ? theme.Form.Rating.ratingStarIconHoverColor
+                                : theme.Form.Rating.ratingStarIconOnColor
+                        : undefined,
+                };
+            }}/>)}
     </RatingItemContainer>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     icon: {
         height: theme.Form.Rating.ratingIconFontSize,
         width: theme.Form.Rating.ratingIconFontSize,
-        color: theme.Form.Rating.ratingStarIconOffColor,
-    },
-    iconPressed: { color: theme.Form.Rating.ratingStarIconHoverColor },
-    iconChecked: { color: theme.Form.Rating.ratingStarIconOnColor },
-    iconDisabled: { color: theme.custom.rating.ratingStarIconOffDisabledColor },
-    iconCheckedDisabled: {
-        color: theme.custom.rating.ratingStarIconOnDisabledColor,
     },
 }));

package/dist/components/Rating/RatingItemContainer.js

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Pressable } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 /**
  * Компонент контейнера для элемента в компоненте рейтинга
  * @param disabled - управление состоянием включённости компонента для нажатий пользователем
@@ -11,12 +11,11 @@ import { makeStyles } from '../../utils/makeStyles';
  * @see RatingClear - вариация компонента элемента рейтинга с иконкой очистки
  */
 export const RatingItemContainer = memo(({ disabled = false, paddings = false, children, ...rest }) => {
-    const styles = useStyles();
     return (<Pressable disabled={disabled} style={[styles.container, paddings && styles.containerWithPaddings]} {...rest}>
         {({ pressed }) => children({ disabled, pressed })}
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, sizing }) => ({
+const styles = StyleSheet.create(({ theme, sizing }) => ({
     container: {
         alignItems: 'center',
         justifyContent: 'center',

package/dist/components/SelectButton/SelectButton.js

@@ -1,8 +1,8 @@
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { View, } from 'react-native';
 import Animated, { Easing, interpolate, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
 import { scheduleOnRN } from 'react-native-worklets';
-import { makeStyles } from '../../utils/makeStyles';
 import { SelectButtonItem, } from './SelectButtonItem';
 const DEFAULT_ANIMATION_DURATION = 200; // ms
 /**
@@ -10,7 +10,6 @@ const DEFAULT_ANIMATION_DURATION = 200; // ms
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
  */
 export const SelectButton = memo(({ buttons, disabled, initialIndex: initialIndexProp, onPress: onPressProp, size, style, testID, position: positionProp, ...rest }) => {
-    const styles = useStyles();
     const buttonsLayoutListRef = useRef([]);
     const buttonsLayoutList = useSharedValue([]);
     const [frameKey, setFrameKey] = useState(Date.now());
@@ -52,7 +51,7 @@ export const SelectButton = memo(({ buttons, disabled, initialIndex: initialInde
         {!disabled && (<Animated.View key={frameKey} style={[styles.frame, framePositionStyle]} testID='SelectButton_AnimatedFrame'/>)}
       </View>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     container: {
         flexDirection: 'row',
         padding: theme.Form.SelectButton.selectButtonGroupPadding,