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

package/dist/components/Input/InputGroupAddon.js

@@ -1,23 +1,24 @@
 import { memo } from 'react';
 import { Pressable, Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * Служебный компонент для группировки инпута
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5932&m=dev
  * @see InputGroup
  */
 export const InputGroupAddon = memo(({ content, onPress, position, disabled }) => {
-    const styles = useStyles();
     return (<Pressable collapsable={false} disabled={disabled} style={[
             styles.container,
             styles[position],
             disabled && styles.disabled,
         ]} testID='InputGroupAddon_Pressable' onPress={onPress}>
-        {typeof content === 'string' ? (<Text style={styles.text}>{content}</Text>) : (<SvgUniversal height={styles.icon.height} source={content} style={styles.icon} width={styles.icon.width}/>)}
+        {typeof content === 'string' ? (<Text style={styles.text}>{content}</Text>) : (<SvgUniversal {...styles.icon} source={content} uniProps={({ theme }) => ({
+                color: theme.Form.InputGroup.inputGroupTextColor,
+            })}/>)}
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
     container: {
         paddingVertical: theme.Form.InputText.inputPaddingTopBottom,
         paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
@@ -52,6 +53,5 @@ const useStyles = makeStyles(({ theme, typography, fonts }) => ({
     icon: {
         width: typography.Size['text-base'],
         height: typography.Size['text-base'],
-        color: theme.Form.InputGroup.inputGroupTextColor,
     },
 }));

package/dist/components/Input/InputOtp/InputOtp.js

@@ -1,9 +1,8 @@
 import { memo, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Pressable, View, TextInput, } from 'react-native';
-import { makeStyles } from '../../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputOtpItem } from './InputOtpItem';
 export const InputOtp = memo(({ length, onChange, disabled = false, error = false, testOnly_pressed, inputRef: propsInputRef, testID, value = '', onFocus, onBlur, ...rest }) => {
-    const styles = useStyles();
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     useImperativeHandle(propsInputRef, () => inputRef.current);
@@ -33,7 +32,7 @@ export const InputOtp = memo(({ length, onChange, disabled = false, error = fals
           </>)}
       </Pressable>);
 });
-const useStyles = makeStyles(({ spacing }) => ({
+const styles = StyleSheet.create(({ spacing }) => ({
     container: {},
     content: { flexDirection: 'row', gap: spacing.Gap['gap-2'] },
     input: { position: 'absolute', width: 1, height: 1, opacity: 0 },

package/dist/components/Input/InputOtp/InputOtpItem.js

@@ -1,10 +1,9 @@
 import { memo, useEffect } from 'react';
 import { View, Text } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
-import { makeStyles } from '../../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 const CURSOR_ANIMATION_DURATION = 500;
 export const InputOtpItem = memo(({ value, error, pressed, disabled, focused, testID }) => {
-    const styles = useStyles();
     const opacity = useSharedValue(1);
     useEffect(() => {
         if (focused) {
@@ -32,7 +31,7 @@ export const InputOtpItem = memo(({ value, error, pressed, disabled, focused, te
         </Text>
       </View>);
 });
-const useStyles = makeStyles(({ theme, border, fonts, typography }) => ({
+const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({
     container: {
         minHeight: theme.Button.Common.buttonHeight,
         minWidth: theme.Button.Common.buttonHeight,

package/dist/components/Input/InputSwitch/InputSwitch.js

@@ -3,12 +3,12 @@ import { Pressable } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useHandleStyles, useSliderStyles } from './styles';
 export const InputSwitch = memo(({ checked, onCheckedChange, disabled = false, danger = false, ...props }) => {
-    const { sliderStyle, onPressedChange } = useSliderStyles(checked, disabled, danger);
+    const { containerStyle, sliderStyle, onPressIn, onPressOut } = useSliderStyles(checked, disabled, danger);
     const { handleStyle } = useHandleStyles(checked);
     const handlePress = useCallback(() => {
         onCheckedChange?.(!checked);
     }, [checked, onCheckedChange]);
-    return (<Pressable disabled={disabled} style={onPressedChange} onPress={handlePress} {...props}>
+    return (<Pressable disabled={disabled} style={containerStyle} onPress={handlePress} onPressIn={onPressIn} onPressOut={onPressOut} {...props}>
         <Animated.View style={sliderStyle}>
           <Animated.View style={handleStyle}/>
         </Animated.View>

package/dist/components/Input/InputSwitch/styles/useHandleStyles.js

@@ -1,30 +1,32 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet as RNStyleSheet } from 'react-native';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
-import { makeStyles } from '../../../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 export const useHandleStyles = (checked) => {
-    const styles = useStyles();
-    const calculateHandleLeftPosition = useCallback((checked) => checked ? styles.handleOn.left : styles.handleOff.left, [styles.handleOff.left, styles.handleOn.left]);
+    const styles = handleStyles;
+    const handleOnLeft = styles.handleOn.left;
+    const handleOffLeft = styles.handleOff.left;
+    const calculateHandleLeftPosition = useCallback((checked) => (checked ? handleOnLeft : handleOffLeft), [handleOffLeft, handleOnLeft]);
     const calculateHandleBackground = useCallback((checked) => checked ? styles.handleOn.backgroundColor : styles.handle.backgroundColor, [styles.handle.backgroundColor, styles.handleOn.backgroundColor]);
     const handleLeftPosition = useSharedValue(calculateHandleLeftPosition(checked));
-    const handlerBackgrouind = useSharedValue(calculateHandleBackground(checked));
+    const handleBackground = useSharedValue(calculateHandleBackground(checked));
     useEffect(() => {
         handleLeftPosition.value = withTiming(calculateHandleLeftPosition(checked));
-        handlerBackgrouind.value = withTiming(calculateHandleBackground(checked));
+        handleBackground.value = withTiming(calculateHandleBackground(checked));
     }, [
         calculateHandleBackground,
         calculateHandleLeftPosition,
         checked,
         handleLeftPosition,
-        handlerBackgrouind,
+        handleBackground,
     ]);
-    const handleStyle = useMemo(() => StyleSheet.flatten([
+    const handleStyle = useMemo(() => RNStyleSheet.flatten([
         styles.handle,
-        { left: handleLeftPosition, backgroundColor: handlerBackgrouind },
-    ]), [handleLeftPosition, handlerBackgrouind, styles.handle]);
+        { left: handleLeftPosition, backgroundColor: handleBackground },
+    ]), [handleLeftPosition, handleBackground, styles.handle]);
     return { handleStyle };
 };
-const useStyles = makeStyles(({ theme, border }) => ({
+const handleStyles = StyleSheet.create(({ theme, border }) => ({
     handle: {
         height: theme.Form.inputSwitch.inputSwitchHandleHeight,
         width: theme.Form.inputSwitch.inputSwitchHandleWidth,

package/dist/components/Input/InputSwitch/styles/useSliderStyles.d.ts

@@ -1,5 +1,8 @@
-import { type PressableStateCallbackType } from 'react-native';
 export declare const useSliderStyles: (checked: boolean, disabled: boolean, danger: boolean) => {
+    containerStyle: {
+        height: number;
+        width: number;
+    };
     sliderStyle: {
         padding: number;
         height: number;
@@ -10,8 +13,6 @@ export declare const useSliderStyles: (checked: boolean, disabled: boolean, dang
         backgroundColor: import("react-native-reanimated").SharedValue<string>;
         borderColor: import("react-native-reanimated").SharedValue<string>;
     };
-    onPressedChange: ({ pressed }: PressableStateCallbackType) => {
-        height: number;
-        width: number;
-    };
+    onPressIn: () => void;
+    onPressOut: () => void;
 };

package/dist/components/Input/InputSwitch/styles/useSliderStyles.js

@@ -1,33 +1,40 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet as RNStyleSheet } from 'react-native';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
-import { makeStyles } from '../../../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 export const useSliderStyles = (checked, disabled, danger) => {
-    const styles = useStyles();
+    const styles = switchStyles;
+    const [pressed, setPressed] = useState(false);
+    const sliderDisabledBg = styles.sliderDisabled.backgroundColor;
+    const sliderOffBg = styles.sliderOff.backgroundColor;
+    const sliderOnBg = styles.sliderOn.backgroundColor;
+    const sliderOnDisabledBg = styles.sliderOnDisabled.backgroundColor;
+    const sliderOnPressedBg = styles.sliderOnPressed.backgroundColor;
+    const sliderPressedBg = styles.sliderPressed.backgroundColor;
     const calculateSliderBackground = useCallback((checked, disabled, pressed) => {
         if (disabled) {
             if (checked) {
-                return styles.sliderOnDisabled.backgroundColor;
+                return sliderOnDisabledBg;
             }
-            return styles.sliderDisabled.backgroundColor;
+            return sliderDisabledBg;
         }
         if (pressed) {
             if (checked) {
-                return styles.sliderOnPressed.backgroundColor;
+                return sliderOnPressedBg;
             }
-            return styles.sliderPressed.backgroundColor;
+            return sliderPressedBg;
         }
         if (checked) {
-            return styles.sliderOn.backgroundColor;
+            return sliderOnBg;
         }
-        return styles.sliderOff.backgroundColor;
+        return sliderOffBg;
     }, [
-        styles.sliderDisabled.backgroundColor,
-        styles.sliderOff.backgroundColor,
-        styles.sliderOn.backgroundColor,
-        styles.sliderOnDisabled.backgroundColor,
-        styles.sliderOnPressed.backgroundColor,
-        styles.sliderPressed.backgroundColor,
+        sliderDisabledBg,
+        sliderOffBg,
+        sliderOnBg,
+        sliderOnDisabledBg,
+        sliderOnPressedBg,
+        sliderPressedBg,
     ]);
     const calculateSliderBorderColor = useCallback((danger) => {
         if (danger && !disabled) {
@@ -41,26 +48,26 @@ export const useSliderStyles = (checked, disabled, danger) => {
     ]);
     const sliderBackground = useSharedValue(calculateSliderBackground(checked, disabled, false));
     const sliderBorderColor = useSharedValue(calculateSliderBorderColor(danger));
+    useEffect(() => {
+        sliderBackground.value = withTiming(calculateSliderBackground(checked, disabled, pressed));
+    }, [calculateSliderBackground, checked, disabled, pressed, sliderBackground]);
     useEffect(() => {
         sliderBorderColor.value = withTiming(calculateSliderBorderColor(danger));
     }, [calculateSliderBorderColor, danger, sliderBorderColor]);
-    const sliderStyle = useMemo(() => StyleSheet.flatten([
+    const sliderStyle = useMemo(() => RNStyleSheet.flatten([
         styles.slider,
         { backgroundColor: sliderBackground, borderColor: sliderBorderColor },
     ]), [sliderBackground, sliderBorderColor, styles.slider]);
-    const onPressedChange = useCallback(({ pressed }) => {
-        sliderBackground.value = withTiming(calculateSliderBackground(checked, disabled, pressed));
-        return styles.container;
-    }, [
-        calculateSliderBackground,
-        checked,
-        disabled,
-        sliderBackground,
-        styles.container,
-    ]);
-    return { sliderStyle, onPressedChange };
+    const onPressIn = useCallback(() => setPressed(true), []);
+    const onPressOut = useCallback(() => setPressed(false), []);
+    return {
+        containerStyle: styles.container,
+        sliderStyle,
+        onPressIn,
+        onPressOut,
+    };
 };
-const useStyles = makeStyles(({ theme, border }) => ({
+const switchStyles = StyleSheet.create(({ theme, border }) => ({
     container: {
         height: theme.Form.inputSwitch.inputSwitchHeight,
         width: theme.Form.inputSwitch.inputSwitchWidth,

package/dist/components/Input/InputTextBase/InputTextBase.d.ts

@@ -2,10 +2,5 @@ import type { InputTextBaseProps } from './types';
 interface PrivateInputTextBaseProps {
     loading?: boolean;
 }
-/**
- * Базовое поле
- * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
- * @see InputText
- */
 export declare const InputTextBase: import("react").NamedExoticComponent<InputTextBaseProps & PrivateInputTextBaseProps>;
 export {};

package/dist/components/Input/InputTextBase/InputTextBase.js

@@ -5,36 +5,44 @@ import { TextInput, View, Text, TouchableOpacity, Pressable, } from 'react-nativ
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLoadingRotationAnimation } from '../../../hooks/useLoadingRotationAnimation';
 import { useMakeTestId } from '../../../hooks/useMakeTestId';
+import { SvgUniversal } from '../../../utils/SvgUniversal';
 import { InputTextBaseTestId } from './testIds';
-import { useInputStyle } from './useInputStyles';
+import { inputStyles, useInputContainerMinHeight } from './useInputStyles';
 /**
  * Базовое поле
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
  * @see InputText
  */
+const inputIconUniProps = ({ theme }) => ({
+    color: theme.Form.InputText.inputIconColor,
+});
 export const InputTextBase = memo(
-// eslint-disable-next-line max-lines-per-function
+// eslint-disable-next-line max-lines-per-function, max-statements
 ({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, editable = true, size, ...otherProps
 // TODO: разделить float label и обычный инпут -> добавить во float label поддержку font scale
 // eslint-disable-next-line complexity
  }) => {
-    const styles = useInputStyle(size);
+    const styles = inputStyles;
+    const containerMinHeightStyle = useInputContainerMinHeight(size);
     const inputRef = useRef(null);
     const [valueState, setValueState] = useState('');
     const [isFocused, setIsFocused] = useState(otherProps.autoFocus || false);
     const labelAnimation = useSharedValue(0);
+    const propsOnFocus = otherProps.onFocus;
+    const propsOnBlur = otherProps.onBlur;
+    const propsOnChangeText = otherProps.onChangeText;
     const onFocus = useCallback((e) => {
         setIsFocused(true);
-        otherProps.onFocus?.(e);
-    }, [otherProps]);
+        propsOnFocus?.(e);
+    }, [propsOnFocus]);
     const onBlur = useCallback((e) => {
         setIsFocused(false);
-        otherProps.onBlur?.(e);
-    }, [otherProps]);
+        propsOnBlur?.(e);
+    }, [propsOnBlur]);
     const onChangeText = useCallback((nextValue) => {
-        otherProps.onChangeText?.(nextValue);
+        propsOnChangeText?.(nextValue);
         setValueState(nextValue);
-    }, [otherProps]);
+    }, [propsOnChangeText]);
     const clear = useCallback(() => {
         onChangeText('');
     }, [onChangeText]);
@@ -44,13 +52,21 @@ export const InputTextBase = memo(
         inputRef.current?.focus();
     }, []);
     const loadingAnimatedStyle = useLoadingRotationAnimation(loading);
+    // Extract primitive values before the worklet closure to avoid
+    // capturing the unistyles HostObject (non-serializable) in the worklet.
+    const labelTop = styles.label.top;
+    const labelReducedTop = styles.labelReducedSize.top;
+    const labelPaddingVertical = styles.label.paddingVertical;
+    const labelReducedPaddingVertical = styles.labelReducedSize.paddingVertical;
+    const labelFontSize = styles.label.fontSize;
+    const labelReducedFontSize = styles.labelReducedSize.fontSize;
+    const labelFontFamily = styles.label.fontFamily;
+    const labelReducedFontFamily = styles.labelReducedSize.fontFamily;
     const labelAnimatedStyle = useAnimatedStyle(() => ({
-        top: interpolate(labelAnimation.value, [0, 1], [styles.label.top, styles.labelReducedSize.top]),
-        paddingVertical: interpolate(labelAnimation.value, [0, 1], [styles.label.paddingVertical, styles.labelReducedSize.paddingVertical]),
-        fontSize: interpolate(labelAnimation.value, [0, 1], [styles.label.fontSize, styles.labelReducedSize.fontSize]),
-        fontFamily: labelAnimation.value > 0.5
-            ? styles.labelReducedSize.fontFamily
-            : styles.label.fontFamily,
+        top: interpolate(labelAnimation.value, [0, 1], [labelTop, labelReducedTop]),
+        paddingVertical: interpolate(labelAnimation.value, [0, 1], [labelPaddingVertical, labelReducedPaddingVertical]),
+        fontSize: interpolate(labelAnimation.value, [0, 1], [labelFontSize, labelReducedFontSize]),
+        fontFamily: labelAnimation.value > 0.5 ? labelReducedFontFamily : labelFontFamily,
     }));
     useEffect(() => {
         labelAnimation.value = withTiming(isFocused || value ? 1 : 0, {
@@ -58,9 +74,7 @@ export const InputTextBase = memo(
         });
     }, [isFocused, labelAnimation, value]);
     const iconSize = useMemo(() => (floatLabel ? styles.iconSizeFloatLabel : styles.iconSize), [floatLabel, styles.iconSize, styles.iconSizeFloatLabel]);
-    useImperativeHandle(propsInputRef, () => (inputRef.current
-        ? Object.assign(inputRef.current, { clear })
-        : null), [inputRef, clear]);
+    useImperativeHandle(propsInputRef, () => inputRef.current ? Object.assign(inputRef.current, { clear }) : null, [inputRef, clear]);
     const { makeTestId } = useMakeTestId(otherProps.testID || InputTextBaseTestId.default);
     const [userDefinedSecureTextEntry, setUserDefinedSecureTextEntry] = useState(true);
     const secureTextEntry = useMemo(() => secureTextEntryProp === 'toggleable'
@@ -109,19 +123,20 @@ export const InputTextBase = memo(
         disabled,
         editable,
         secureTextEntry,
-        styles.inputFont,
-        styles.floatLabelInput,
-        styles.input,
-        styles.inputWithRightContent,
         hasRightContent,
         value,
         onBlur,
         onChangeText,
         onFocus,
+        styles.inputFont,
+        styles.floatLabelInput,
+        styles.input,
+        styles.inputWithRightContent,
     ]);
     const input = useMemo(() => renderTextInput ? (renderTextInput(texInputProps)) : (<TextInput {...texInputProps} ref={inputRef}/>), [renderTextInput, texInputProps]);
     return (<Pressable accessible={false} disabled={disabled} style={[
             styles.container,
+            containerMinHeightStyle,
             floatLabel && styles.containerFloatLabel,
             isFocused && styles.containerFocused,
             containerStyle,
@@ -153,18 +168,18 @@ export const InputTextBase = memo(
 
         {hasRightContent ? (<View style={styles.rightContainer}>
             {loading ? (<Animated.View style={[styles.rightButtonContainer, loadingAnimatedStyle]} testID={makeTestId(InputTextBaseTestId.loading)}>
-                <IconLoader2 color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+                <SvgUniversal {...iconSize} source={IconLoader2} uniProps={inputIconUniProps}/>
               </Animated.View>) : null}
 
             {showClearButton ? (<TouchableOpacity accessibilityLabel={clearButtonAccessibilityLabel} hitSlop={rightButtonHitSlop} style={styles.rightButtonContainer} testID={makeTestId(InputTextBaseTestId.clearButton)} onPress={clear}>
-                <IconX color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+                <SvgUniversal {...iconSize} source={IconX} uniProps={inputIconUniProps}/>
               </TouchableOpacity>) : null}
 
             {showSecureToggle ? (<TouchableOpacity hitSlop={rightButtonHitSlop} style={styles.rightButtonContainer} testID={makeTestId(InputTextBaseTestId.secureInputButton)} onPress={toggleUserDefinedSecureTextEntry}>
-                {userDefinedSecureTextEntry ? (<IconEye color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>) : (<IconEyeOff color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>)}
+                <SvgUniversal {...iconSize} source={userDefinedSecureTextEntry ? IconEye : IconEyeOff} uniProps={inputIconUniProps}/>
               </TouchableOpacity>) : null}
 
-            {disabled ? (<IconLock color={styles.rightIcon.color} height={iconSize.height} testID={makeTestId(InputTextBaseTestId.disabledIcon)} width={iconSize.width}/>) : null}
+            {disabled ? (<SvgUniversal {...iconSize} source={IconLock} testID={makeTestId(InputTextBaseTestId.disabledIcon)} uniProps={inputIconUniProps}/>) : null}
           </View>) : null}
       </Pressable>);
 });

package/dist/components/Input/InputTextBase/useInputStyles.d.ts

@@ -1,7 +1,9 @@
 import type { InputTextBaseProps } from './types';
-export declare const useInputStyle: (size?: InputTextBaseProps["size"]) => {
+export declare const useInputContainerMinHeight: (size?: InputTextBaseProps["size"]) => {
+    minHeight: number;
+};
+export declare const inputStyles: {
     container: {
-        minHeight: number;
         flexDirection: "row";
         borderWidth: number;
         borderRadius: number;
@@ -77,9 +79,6 @@ export declare const useInputStyle: (size?: InputTextBaseProps["size"]) => {
     rightButtonContainer: {
         justifyContent: "center";
     };
-    rightIcon: {
-        color: string;
-    };
     iconSize: {
         width: number;
         height: number;
@@ -111,4 +110,6 @@ export declare const useInputStyle: (size?: InputTextBaseProps["size"]) => {
     hidden: {
         opacity: number;
     };
+} & {
+    useVariants: (variants: never) => void;
 };

package/dist/components/Input/InputTextBase/useInputStyles.js

@@ -1,22 +1,20 @@
 import { useMemo } from 'react';
-import { makeStyles } from '../../../utils/makeStyles';
-export const useInputStyle = (size = 'base') => {
-    const styles = useStyles();
-    const containerMinHeight = useContainerMinHeight();
+import { StyleSheet } from 'react-native-unistyles';
+export const useInputContainerMinHeight = (size = 'base') => {
     const minHeight = useMemo(() => {
         if (typeof size === 'number') {
             return Math.max(size, containerMinHeight.base.minHeight);
         }
         return containerMinHeight[size].minHeight;
-    }, [size, containerMinHeight]);
-    return { ...styles, container: { ...styles.container, minHeight } };
+    }, [size]);
+    return { minHeight };
 };
-const useContainerMinHeight = makeStyles(({ theme }) => ({
+const containerMinHeight = StyleSheet.create(({ theme }) => ({
     base: { minHeight: theme.InputSize.base['min-height'] },
     large: { minHeight: theme.InputSize.large['min-height'] },
     xlarge: { minHeight: theme.InputSize.xlarge['min-height'] },
 }));
-const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) => ({
+export const inputStyles = StyleSheet.create(({ theme, border, typography, spacing, fonts }) => ({
     container: {
         flexDirection: 'row',
         borderWidth: border.Width.border,
@@ -85,7 +83,6 @@ const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) =>
         alignItems: 'center',
     },
     rightButtonContainer: { justifyContent: 'center' },
-    rightIcon: { color: theme.Form.InputText.inputIconColor },
     iconSize: {
         width: typography.Size['text-base'],
         height: typography.Size['text-base'],

package/dist/components/Input/index.d.ts

@@ -1,6 +1,5 @@
 export { InputGroup } from './InputGroup';
 export { InputText } from './InputText';
-export { FloatLabel } from './FloatLabel';
 export { InputSwitch } from './InputSwitch';
 export type { InputTextBaseProps } from './InputTextBase/types';
 export { InputOtp } from './InputOtp/InputOtp';

package/dist/components/Input/index.js

@@ -1,5 +1,4 @@
 export { InputGroup } from './InputGroup';
 export { InputText } from './InputText';
-export { FloatLabel } from './FloatLabel';
 export { InputSwitch } from './InputSwitch';
 export { InputOtp } from './InputOtp/InputOtp';

package/dist/components/List/Base/ListBase.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import { View, Pressable, } from 'react-native';
+import { View, Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../../utils/SvgUniversal';
-import { makeStyles } from '../../../utils/makeStyles';
 import { Subtitle, Body, Caption } from '../../Typography';
 /**
  * Базовый элемент списка
@@ -9,13 +9,10 @@ import { Subtitle, Body, Caption } from '../../Typography';
  * Фигма https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=641-2254&m=dev
  */
 export const ListBase = memo(({ iconAlignment = 'top', text: title, title: subtitle, caption, LeftIcon, leftIconColor, RightIcon, rightIconColor, extra, divider, disabled = false, onPress, style, testID, ...rest }) => {
-    const styles = useStyles();
-    const leftIconStyle = useMemo(() => {
-        return {
-            ...styles.leftIcon,
-            alignSelf: iconAlignment === 'top' ? 'flex-start' : undefined,
-        };
-    }, [styles.leftIcon, iconAlignment]);
+    const leftIconStyle = useMemo(() => [
+        styles.leftIcon,
+        iconAlignment === 'top' ? { alignSelf: 'flex-start' } : null,
+    ], [iconAlignment]);
     const fullDivider = divider === 'full' ? styles.divider : {};
     const contentDivider = divider === 'content' ? styles.divider : {};
     const accessibilityLabel = useMemo(() => [subtitle, title].join(' '), [subtitle, title]);
@@ -28,7 +25,7 @@ export const ListBase = memo(({ iconAlignment = 'top', text: title, title: subti
                 pressed && styles.pressed,
             ]} {...rest}>
             {LeftIcon ? (<View style={leftIconStyle}>
-                <SvgUniversal source={LeftIcon} testID={ListBaseTestId.leftIcon} {...styles.icon} color={leftIconColor}/>
+                <SvgUniversal color={leftIconColor} height={styles.icon.height} source={LeftIcon} testID={ListBaseTestId.leftIcon} width={styles.icon.width}/>
               </View>) : null}
             <View style={[styles.content, contentDivider]}>
               <View style={styles.labelContainer}>
@@ -40,7 +37,7 @@ export const ListBase = memo(({ iconAlignment = 'top', text: title, title: subti
               </View>
               <View style={styles.rightSection}>
                 {extra ? (<View style={styles.extraContainer}>{extra}</View>) : null}
-                {RightIcon ? (<SvgUniversal source={RightIcon} testID={ListBaseTestId.rightIcon} {...styles.icon} color={rightIconColor}/>) : null}
+                {RightIcon ? (<SvgUniversal color={rightIconColor} height={styles.icon.height} source={RightIcon} testID={ListBaseTestId.rightIcon} width={styles.icon.width}/>) : null}
               </View>
             </View>
           </View>)}
@@ -52,7 +49,7 @@ const ListBaseTestId = {
     rightIcon: 'RightIcon',
     title: 'Title',
 };
-const useStyles = makeStyles(({ spacing, typography, theme, background }) => ({
+const styles = StyleSheet.create(({ spacing, typography, theme, background }) => ({
     container: {
         flexDirection: 'row',
         paddingLeft: spacing.Padding['p-4'],

package/dist/components/MenuItem/MenuItemAccessory.js

@@ -1,23 +1,23 @@
 import { IconLock } 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';
 /**
  * Аксессуар элемента меню. Выводится в крайней левой или крайней правой позиции пункта меню.
  */
 export const MenuItemAccessory = memo(({ Icon, disabled }) => {
-    const styles = useStyles();
     const IconComponent = useMemo(() => (disabled ? IconLock : Icon), [Icon, disabled]);
     return (<View style={styles.container}>
-        <SvgUniversal source={IconComponent} {...styles.icon}/>
+        <SvgUniversal {...styles.icon} source={IconComponent} uniProps={({ theme }) => ({
+            color: theme.Menu.Item.menuitemIconColor,
+        })}/>
       </View>);
 });
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     container: { justifyContent: 'center' },
     icon: {
         width: theme.Menu.Item.menuitemSubmenuIconFontSize,
         height: theme.Menu.Item.menuitemSubmenuIconFontSize,
-        color: theme.Menu.Item.menuitemIconColor,
     },
 }));

package/dist/components/MenuItem/MenuItemIcon.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, } from 'react-native';
+import { View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 import { Badge } from '../Badge/Badge';
 /**
  * Иконка в составе элемента меню. Состоит из центрирующего враппера, иконки и опционального бейджа (точки)
@@ -10,7 +10,6 @@ import { Badge } from '../Badge/Badge';
  * @param badgeSeverity - Цвет бейджа (undefined если бейдж не нужен)
  */
 export const MenuItemIcon = ({ Icon, style, badgeSeverity, }) => {
-    const styles = useStyles();
     const [badgePosition, setBadgePosition] = useState({ top: 0, right: 0 });
     const onLayout = useCallback((event) => {
         const { width, height } = event.nativeEvent.layout;
@@ -19,7 +18,7 @@ export const MenuItemIcon = ({ Icon, style, badgeSeverity, }) => {
     const badgeStyle = useMemo(() => StyleSheet.flatten([
         styles.badge,
         { top: badgePosition.top, right: badgePosition.right },
-    ]), [badgePosition.right, badgePosition.top, styles.badge]);
+    ]), [badgePosition.right, badgePosition.top]);
     return (<View style={styles.container}>
       <View>
         <SvgUniversal source={Icon} {...style}/>
@@ -27,7 +26,7 @@ export const MenuItemIcon = ({ Icon, style, badgeSeverity, }) => {
       </View>
     </View>);
 };
-const useStyles = makeStyles(() => ({
+const styles = StyleSheet.create(() => ({
     container: { justifyContent: 'center', position: 'relative' },
     badge: { position: 'absolute' },
 }));