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

package/dist/components/Button/utils/ButtonLabel.js

@@ -1,13 +1,148 @@
+import { useContext } from 'react';
 import { Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { genericMemo } from '../../../utils/genericMemo';
-import { useButtonLabelStyle } from './useButtonLabelStyle';
-export const ButtonLabelComponent = ({ label, iconOnly, size, disabled, loading, variant, labelVariantStyles, }) => {
-    const labelStyle = useButtonLabelStyle(size, variant, disabled, loading, labelVariantStyles);
+import { ButtonPressedContext } from './ButtonPressedContext';
+import { ButtonVariantContext } from './ButtonVariantContext';
+const ButtonLabelComponent = ({ label, iconOnly, size, disabled, loading, }) => {
+    const pressed = useContext(ButtonPressedContext);
+    const { variant, severity } = useContext(ButtonVariantContext);
+    buttonLabelStyles.useVariants({
+        size,
+        variant,
+        severity,
+        pressed: pressed ? 'true' : 'false',
+        disabled: disabled || loading ? 'true' : 'false',
+    });
     if (iconOnly) {
         return null;
     }
-    return (<Text style={labelStyle} testID='Button_Text'>
+    return (<Text style={buttonLabelStyles.label} testID='Button_Text'>
       {label}
     </Text>);
 };
 export const ButtonLabel = genericMemo(ButtonLabelComponent);
+const buttonLabelStyles = StyleSheet.create(({ theme, typography, fonts }) => ({
+    label: {
+        fontWeight: 600,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.primary,
+        variants: {
+            size: {
+                xlarge: { fontSize: typography.Size['text-xl'] },
+                large: { fontSize: typography.Size['text-xl'] },
+                base: { fontSize: typography.Size['text-base'] },
+                small: { fontSize: typography.Size['text-sm'] },
+            },
+            variant: {
+                primary: { color: theme.Button.Brand.buttonTextColor },
+                secondary: { color: theme.Button.Primary.secondaryButtonTextColor },
+                tertiary: { color: theme.Button.Secondary.helpButtonTextColor },
+                text: { color: theme.Button.Text.textButtonTextColor },
+                link: { color: theme.Button.Text.textButtonTextColor },
+                basic: { color: theme.Button.Brand.buttonTextColor },
+                outlined: { color: theme.Button.Brand.buttonTextColor },
+            },
+            severity: { info: {}, success: {}, warning: {}, danger: {} },
+            pressed: { true: {}, false: {} },
+            disabled: {
+                true: { color: theme.Button.Disabled.disabledButtonTextColor },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            // link pressed color change
+            {
+                variant: 'link',
+                pressed: 'true',
+                styles: { color: typography.Color.Common['text-color-secondary'] },
+            },
+            // severity label colors
+            {
+                variant: 'basic',
+                severity: 'info',
+                styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor },
+            },
+            {
+                variant: 'outlined',
+                severity: 'info',
+                styles: {
+                    color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'info',
+                styles: {
+                    color: theme.Button.Severity.Info.Text.infoTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Basic.successButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Outlined
+                        .successOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Text.successTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Basic.warningButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Outlined
+                        .warningOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor,
+                },
+            },
+        ],
+    },
+}));

package/dist/components/Button/utils/ButtonLeftArea.d.ts

@@ -1,4 +1,9 @@
-import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types';
-export type ButtonLeftAreaComponentProps<Variant extends ButtonVariant> = Pick<BaseButtonProps<Variant>, 'iconPosition' | 'Icon'> & Pick<Required<BaseButtonProps<Variant>>, 'size' | 'variant' | 'loading' | 'disabled'> & Pick<VariantStyles<Variant>, 'iconVariantStyles'>;
-export declare const ButtonLeftAreaComponent: <Variant extends ButtonVariant>({ size, iconPosition, variant, Icon, loading, disabled, iconVariantStyles, }: ButtonLeftAreaComponentProps<Variant>) => import("react").JSX.Element | null;
-export declare const ButtonLeftArea: <Variant extends ButtonVariant>({ size, iconPosition, variant, Icon, loading, disabled, iconVariantStyles, }: ButtonLeftAreaComponentProps<Variant>) => import("react").JSX.Element | null;
+import type { BaseButtonProps, ButtonSize } from '../types';
+export interface ButtonLeftAreaProps {
+    readonly size: ButtonSize;
+    readonly iconPosition?: BaseButtonProps<never>['iconPosition'];
+    readonly loading: boolean;
+    readonly disabled: boolean;
+    readonly Icon?: BaseButtonProps<never>['Icon'];
+}
+export declare const ButtonLeftArea: ({ size, iconPosition, Icon, loading, disabled, }: ButtonLeftAreaProps) => import("react").JSX.Element | null;

package/dist/components/Button/utils/ButtonLeftArea.js

@@ -1,12 +1,12 @@
 import { genericMemo } from '../../../utils/genericMemo';
 import { ButtonActivityIndicator } from './ButtonActivityIndicator';
 import { ButtonIcon } from './ButtonIcon';
-export const ButtonLeftAreaComponent = ({ size, iconPosition, variant, Icon, loading, disabled, iconVariantStyles, }) => {
-    if (iconPosition === 'left' || iconPosition === 'prefix') {
+const ButtonLeftAreaComponent = ({ size, iconPosition, Icon, loading, disabled, }) => {
+    if (iconPosition === 'prefix') {
         if (loading && !disabled) {
             return <ButtonActivityIndicator size={size}/>;
         }
-        return (<ButtonIcon {...{ size, variant, disabled, loading, Icon, iconVariantStyles }}/>);
+        return <ButtonIcon {...{ size, disabled, loading, Icon }}/>;
     }
     return null;
 };

package/dist/components/Button/utils/ButtonPressedContext.d.ts

@@ -0,0 +1 @@
+export declare const ButtonPressedContext: import("react").Context<boolean>;

package/dist/components/Button/utils/ButtonPressedContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ButtonPressedContext = createContext(false);

package/dist/components/Button/utils/ButtonRightArea.d.ts

@@ -1,3 +1,9 @@
-import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types';
-export type ButtonRightAreaComponentProps<Variant extends ButtonVariant> = Pick<BaseButtonProps<Variant>, 'iconPosition' | 'Icon'> & Pick<Required<BaseButtonProps<Variant>>, 'size' | 'variant' | 'loading' | 'disabled'> & Pick<VariantStyles<Variant>, 'iconVariantStyles'>;
-export declare const ButtonRightArea: <Variant extends ButtonVariant>({ size, iconPosition, variant, Icon, loading, disabled, iconVariantStyles, }: ButtonRightAreaComponentProps<Variant>) => import("react").JSX.Element | null;
+import type { BaseButtonProps, ButtonSize } from '../types';
+export interface ButtonRightAreaProps {
+    readonly size: ButtonSize;
+    readonly iconPosition?: BaseButtonProps<never>['iconPosition'];
+    readonly loading: boolean;
+    readonly disabled: boolean;
+    readonly Icon?: BaseButtonProps<never>['Icon'];
+}
+export declare const ButtonRightArea: ({ size, iconPosition, Icon, loading, disabled, }: ButtonRightAreaProps) => import("react").JSX.Element | null;

package/dist/components/Button/utils/ButtonRightArea.js

@@ -1,12 +1,12 @@
 import { genericMemo } from '../../../utils/genericMemo';
 import { ButtonActivityIndicator } from './ButtonActivityIndicator';
 import { ButtonIcon } from './ButtonIcon';
-const ButtonRightAreaComponent = ({ size, iconPosition, variant, Icon, loading, disabled, iconVariantStyles, }) => {
-    if (iconPosition === 'right' || iconPosition === 'postfix') {
+const ButtonRightAreaComponent = ({ size, iconPosition, Icon, loading, disabled, }) => {
+    if (iconPosition === 'postfix') {
         if (loading && !disabled) {
             return <ButtonActivityIndicator size={size}/>;
         }
-        return (<ButtonIcon {...{ size, variant, disabled, loading, Icon, iconVariantStyles }}/>);
+        return <ButtonIcon {...{ size, disabled, loading, Icon }}/>;
     }
     return null;
 };

package/dist/components/Button/utils/ButtonVariantContext.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonSeverity, ButtonVariant } from '../types';
+export interface ButtonVariantContextValue {
+    variant: ButtonVariant;
+    severity?: ButtonSeverity;
+}
+export declare const ButtonVariantContext: import("react").Context<ButtonVariantContextValue>;

package/dist/components/Button/utils/ButtonVariantContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const ButtonVariantContext = createContext({
+    variant: 'primary',
+});

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,31 +1,30 @@
-import React from 'react';
 import { type AccessibilityProps } from 'react-native';
 import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
 type CheckboxState = 'default' | 'danger';
 export interface CheckboxProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
     /** Обработчик нажатия на чекбокс */
-    readonly onPress: () => void;
+    onPress: () => void;
     /**
      * true, если необходим компонент в активном состоянии
      * @default false
      */
-    readonly checked?: boolean;
+    checked?: boolean;
     /**
      * true, если необходим компонент в неопределенном состоянии
      * @default false
      */
-    readonly indeterminate?: boolean;
+    indeterminate?: boolean;
     /**
      * Управление доступностью компонента
      * @default false
      */
-    readonly disabled?: boolean;
+    disabled?: boolean;
     /** Выбор состояния компонента */
-    readonly state: CheckboxState;
+    state: CheckboxState;
 }
 /**
  * Используется для множественного выбора элементов
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5316
  */
-export declare const Checkbox: React.NamedExoticComponent<CheckboxProps>;
+export declare const Checkbox: import("react").NamedExoticComponent<CheckboxProps>;
 export {};

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,21 @@
 import { IconCheck, IconMinus } from '@tabler/icons-react-native';
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import { Pressable, StyleSheet, View, } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
-import { usePressableStyles } from './hooks/usePressableStyles';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet as RNStyleSheet, Pressable, View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { SvgUniversal } from '../../utils';
 /**
  * Используется для множественного выбора элементов
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5316
  */
 export const Checkbox = memo(({ onPress, checked = false, disabled = false, indeterminate = false, testID, state, }) => {
     const [isPressed, setIsPressed] = useState(false);
+    const filled = checked || indeterminate;
+    styles.useVariants({
+        filled: filled ? 'true' : 'false',
+        pressed: isPressed ? 'true' : 'false',
+        state: state === 'danger' ? 'danger' : undefined,
+        disabled: disabled ? 'true' : 'false',
+    });
     const Icon = useMemo(() => {
         if (indeterminate) {
             return IconMinus;
@@ -18,38 +25,83 @@ export const Checkbox = memo(({ onPress, checked = false, disabled = false, inde
         }
         return null;
     }, [indeterminate, checked]);
-    const getPressableStyles = usePressableStyles({
-        checked,
-        indeterminate,
-        disabled,
-        state,
-    });
-    const styles = useStyles();
     const onPressIn = useCallback(() => {
         setIsPressed(true);
     }, []);
     const onPressOut = useCallback(() => {
         setIsPressed(false);
     }, []);
-    const pressableStyles = useMemo(() => {
-        return getPressableStyles(isPressed);
-    }, [getPressableStyles, isPressed]);
     return (<Pressable accessibilityRole='button' disabled={disabled} hitSlop={10} style={styles.container} testID={testID || 'CheckboxButton_Pressable'} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
-        <View style={[styles.background, pressableStyles]}/>
-        {Icon ? (<Icon height={styles.icon.height} style={styles.icon} width={styles.icon.width}/>) : null}
+        <View style={[styles.background, styles.backgroundState]}/>
+        {Icon ? (<SvgUniversal {...styles.icon} source={Icon} uniProps={({ theme }) => ({
+                color: theme.Form.Checkbox.checkboxIconActiveColor,
+            })}/>) : null}
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, sizing }) => ({
+const styles = StyleSheet.create(({ theme, border, sizing }) => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
         width: theme.Form.Checkbox.checkboxWidth,
         height: theme.Form.Checkbox.checkboxHeight,
     },
-    background: { ...StyleSheet.absoluteFillObject },
-    icon: {
-        height: sizing.Height['h-1'],
-        width: sizing.Width['w-1'],
-        color: theme.Form.Checkbox.checkboxIconActiveColor,
+    background: { ...RNStyleSheet.absoluteFillObject },
+    backgroundState: {
+        borderRadius: border.Radius['rounded-lg'],
+        borderWidth: border.Width.border,
+        variants: {
+            filled: {
+                true: {
+                    backgroundColor: theme.Form.Checkbox.checkboxActiveBg,
+                    borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
+                },
+                false: {
+                    backgroundColor: theme.Form.InputText.inputBg,
+                    borderColor: theme.Form.InputText.inputBorderColor,
+                },
+            },
+            pressed: {
+                true: { borderColor: theme.Form.InputText.inputHoverBorderColor },
+                false: {},
+            },
+            state: {
+                danger: {
+                    borderColor: theme.Form.InputText.inputErrorBorderColor,
+                    outlineStyle: 'solid',
+                    outlineColor: theme.General.focusOutlineErrorColor,
+                    outlineWidth: Math.round(theme.General.focusShadowWidth),
+                },
+            },
+            disabled: { true: { outlineWidth: 0 }, false: {} },
+        },
+        compoundVariants: [
+            {
+                filled: 'true',
+                pressed: 'true',
+                styles: {
+                    backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg,
+                    borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor,
+                },
+            },
+            {
+                filled: 'false',
+                disabled: 'true',
+                styles: {
+                    backgroundColor: theme.Button.Disabled.disabledButtonBg,
+                    borderColor: theme.Form.InputText.inputBorderColor,
+                    mixBlendMode: 'luminosity',
+                },
+            },
+            {
+                filled: 'true',
+                disabled: 'true',
+                styles: {
+                    borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
+                    opacity: 0.2,
+                    mixBlendMode: 'luminosity',
+                },
+            },
+        ],
     },
+    icon: { height: sizing.Height['h-1'], width: sizing.Width['w-1'] },
 }));

package/dist/components/Chip/Chip.js

@@ -1,28 +1,36 @@
 import { IconX } from '@tabler/icons-react-native';
 import { memo } from 'react';
 import { Text, Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * Компонет Нажимабельного тега с возможностью закрытия
  * Используется для представления массива данных в виде меток
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5126&t=jMMaE0JO924pG1ga-4
  */
 export const Chip = memo(({ Icon, label, disabled, testID, onClose, showClose = !!onClose, showIcon = true, ...rest }) => {
-    const styles = useStyles();
+    const iconUniProps = ({ theme }) => ({
+        color: disabled
+            ? theme.Button.Disabled.disabledButtonTextColor
+            : theme.Misc.Chip.chipTextColor,
+    });
     return (<Pressable {...rest} disabled={disabled} style={[styles.chip, disabled && styles.disabledChip]} testID={testID || TestId.Container}>
-        {showIcon && Icon ? (<SvgUniversal color={disabled ? styles.disabledIcon.color : styles.icon.color} height={styles.icon.height} source={Icon} width={styles.icon.width}/>) : null}
+        {showIcon && Icon ? (<SvgUniversal {...styles.icon} source={Icon} uniProps={iconUniProps}/>) : null}
 
         <Text numberOfLines={1} style={[styles.text, disabled && styles.disabledText]}>
           {label}
         </Text>
 
         {showClose ? (<Pressable disabled={disabled} testID={TestId.RemoveButton} onPress={onClose}>
-            {({ pressed }) => (<IconX color={disabled ? styles.disabledIcon.color : styles.icon.color} height={styles.icon.height} style={pressed ? styles.pressedClose : null} width={styles.icon.width}/>)}
+            {({ pressed }) => (<SvgUniversal {...styles.icon} source={IconX} style={pressed ? styles.pressedClose : null} uniProps={({ theme }) => ({
+                    color: disabled
+                        ? theme.Button.Disabled.disabledButtonTextColor
+                        : theme.Misc.Chip.chipTextColor,
+                })}/>)}
           </Pressable>) : null}
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({
     chip: {
         height: theme.Misc.Chip.chipHeight,
         alignSelf: 'flex-start',
@@ -46,9 +54,7 @@ const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({
     icon: {
         width: typography.Size['text-base'],
         height: typography.Size['text-base'],
-        color: theme.Misc.Chip.chipTextColor,
     },
-    disabledIcon: { color: theme.Button.Disabled.disabledButtonTextColor },
     text: {
         fontSize: typography.Size['text-base'],
         verticalAlign: 'middle',

package/dist/components/Dialog/DialogComponent.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { View, useWindowDimensions } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 export const DialogComponent = ({ body: Body, footer: Footer, header = null, }) => {
-    const styles = useStyles();
     const { width, height } = useWindowDimensions();
     const maxSize = { maxWidth: width - 40, maxHeight: height - 100 };
     return (<View style={[styles.root, maxSize]}>
@@ -17,7 +16,7 @@ export const DialogComponent = ({ body: Body, footer: Footer, header = null, })
         </View>) : null}
     </View>);
 };
-const useStyles = makeStyles(({ theme }) => ({
+const styles = StyleSheet.create(({ theme }) => ({
     root: {
         backgroundColor: theme.Overlay.Dialog.Header.dialogHeaderBg,
         borderColor: theme.Overlay.Overlay.overlayContentBorderColor,

package/dist/components/Dialog/DialogHeader.js

@@ -1,7 +1,8 @@
 import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconHelpCircle, IconInfoCircle, IconX, } from '@tabler/icons-react-native';
 import { useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
+import { SvgUniversal } from '../../utils';
 import { Title } from '../Typography';
 const iconsMap = {
     danger: IconCircleX,
@@ -11,14 +12,21 @@ const iconsMap = {
     help: IconHelpCircle,
 };
 export const DialogHeader = ({ title, onClose, severity, }) => {
-    const styles = useStyles();
     const tids = DialogHeaderTestId;
     const icon = useMemo(() => {
         if (!severity)
             return null;
-        const Icon = iconsMap[severity];
-        return <Icon {...styles.severityIcon} {...styles[severity]}/>;
-    }, [severity, styles]);
+        const source = iconsMap[severity];
+        return (<SvgUniversal {...styles.severityIcon} source={source} uniProps={({ typography: t }) => ({
+                color: {
+                    danger: t.Color.Service['text-danger'],
+                    warning: t.Color.Service['text-warning'],
+                    info: t.Color.Service['text-info'],
+                    success: t.Color.Service['text-success'],
+                    help: t.Color.Service['text-help'],
+                }[severity],
+            })}/>);
+    }, [severity]);
     return (<>
       <View style={styles.header}>
         {icon}
@@ -26,14 +34,16 @@ export const DialogHeader = ({ title, onClose, severity, }) => {
           {title}
         </Title>
         {onClose ? (<TouchableOpacity style={styles.closeTouchable} testID={tids.closeButton} onPress={onClose}>
-            <IconX {...styles.closeIcon}/>
+            <SvgUniversal {...styles.closeIcon} source={IconX} uniProps={({ theme }) => ({
+                color: theme.General.actionIconColor,
+            })}/>
           </TouchableOpacity>) : null}
       </View>
 
       <View style={styles.separator}/>
     </>);
 };
-const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
+const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({
     text: { flex: 1 },
     header: {
         flexDirection: 'row',
@@ -50,17 +60,11 @@ const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
     closeIcon: {
         width: typography.Size['text-base'],
         height: typography.Size['text-base'],
-        color: theme.General.actionIconColor,
     },
     severityIcon: {
         width: typography.Size['text-2xl'],
         height: typography.Size['text-2xl'],
     },
-    danger: { color: typography.Color.Service['text-danger'] },
-    warning: { color: typography.Color.Service['text-warning'] },
-    info: { color: typography.Color.Service['text-info'] },
-    success: { color: typography.Color.Service['text-success'] },
-    help: { color: typography.Color.Service['text-help'] },
 }));
 export const DialogHeaderTestId = {
     title: 'DialogTitle',

package/dist/components/Divider/Divider.js

@@ -1,18 +1,17 @@
 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 { Subtitle } from '../Typography';
 /**
  * Используется для визуального разделения контента
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5178
  */
 export const Divider = memo(({ align = 'center', layout = 'horizontal', showContent: showContentProp = true, showIcon: showIconProp = true, text, type = 'solid', style, Icon, }) => {
-    const styles = useStyles();
     const isVertical = useMemo(() => layout === 'vertical', [layout]);
     const showIcon = useMemo(() => !!(showIconProp && Icon), [Icon, showIconProp]);
     const showContent = useMemo(() => !!(showContentProp && (showIcon || text)), [showContentProp, showIcon, text]);
-    const lineStyle = useMemo(() => [styles.line, type === 'dash' && styles.lineDash], [styles.line, styles.lineDash, type]);
+    const lineStyle = useMemo(() => [styles.line, type === 'dash' && styles.lineDash], [type]);
     return (<View style={[
             styles.container,
             isVertical && styles.containerVertical,
@@ -32,7 +31,9 @@ export const Divider = memo(({ align = 'center', layout = 'horizontal', showCont
             </View>
 
             <View style={[styles.content, isVertical && styles.contentVertical]}>
-              {showIcon && Icon ? (<SvgUniversal height={styles.icon.height} source={Icon} style={styles.icon} width={styles.icon.width}/>) : null}
+              {showIcon && Icon ? (<SvgUniversal {...styles.icon} source={Icon} uniProps={({ theme }) => ({
+                    color: theme.General.textSecondaryColor,
+                })}/>) : null}
               {text ? (<Subtitle color='secondary' style={styles.text}>
                   {text}
                 </Subtitle>) : null}
@@ -44,7 +45,7 @@ export const Divider = memo(({ align = 'center', layout = 'horizontal', showCont
         </View>
       </View>);
 });
-const useStyles = makeStyles(({ spacing, theme, sizing, typography }) => ({
+const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({
     container: {
         minHeight: sizing.Height['h-2'],
         flexDirection: 'row',
@@ -89,7 +90,6 @@ const useStyles = makeStyles(({ spacing, theme, sizing, typography }) => ({
     icon: {
         width: typography.Size['text-base'],
         height: typography.Size['text-base'],
-        color: theme.General.textSecondaryColor,
     },
     text: { flexShrink: 1 },
 }));

package/dist/components/Input/InputGroup.js

@@ -1,6 +1,6 @@
 import { memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { View, StyleSheet, } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { View, StyleSheet as RNStyleSheet, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputGroupAddon } from './InputGroupAddon';
 import { InputTextBase } from './InputTextBase/InputTextBase';
 /**
@@ -10,23 +10,16 @@ import { InputTextBase } from './InputTextBase/InputTextBase';
  * @see InputGroupAddon
  */
 export const InputGroup = memo(({ left, right, style, disabled, inputRef: propsInputRef, ...otherProps }) => {
-    const styles = useStyles();
     const inputRef = useRef(null);
     const focus = useCallback(() => inputRef.current?.focus(), [inputRef]);
-    useImperativeHandle(propsInputRef, () => (inputRef.current ? inputRef.current : null), [inputRef]);
+    useImperativeHandle(propsInputRef, () => inputRef.current, [inputRef]);
     const containerStyle = useMemo(() => {
-        return StyleSheet.flatten([
+        return RNStyleSheet.flatten([
             styles.inputContainer,
             !!left && styles.inputContainerForLeftAddon,
             !!right && styles.inputContainerForRightAddon,
         ]);
-    }, [
-        left,
-        right,
-        styles.inputContainer,
-        styles.inputContainerForLeftAddon,
-        styles.inputContainerForRightAddon,
-    ]);
+    }, [left, right]);
     return (<View style={[styles.container, style]}>
         {left ? (<InputGroupAddon content={left} disabled={disabled} position='left' onPress={focus}/>) : null}
 
@@ -37,7 +30,7 @@ export const InputGroup = memo(({ left, right, style, disabled, inputRef: propsI
         {right ? (<InputGroupAddon content={right} disabled={disabled} position='right' onPress={focus}/>) : null}
       </View>);
 });
-const useStyles = makeStyles(() => ({
+const styles = StyleSheet.create(() => ({
     container: { flexDirection: 'row' },
     inputWrapper: { flexGrow: 1, zIndex: 10 },
     inputContainer: { flexGrow: 1 },