@cdek-it/react-native-ui-kit 0.2.0

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

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { makeStyles } from '../../../../utils/makeStyles';
+export const useSliderStyles = (checked, disabled, danger) => {
+    const styles = useStyles();
+    const calculateSliderBackground = useCallback((checked, disabled, pressed) => {
+        if (disabled) {
+            if (checked) {
+                return styles.sliderOnDisabled.backgroundColor;
+            }
+            return styles.sliderDisabled.backgroundColor;
+        }
+        if (pressed) {
+            if (checked) {
+                return styles.sliderOnPressed.backgroundColor;
+            }
+            return styles.sliderPressed.backgroundColor;
+        }
+        if (checked) {
+            return styles.sliderOn.backgroundColor;
+        }
+        return styles.sliderOff.backgroundColor;
+    }, [
+        styles.sliderDisabled.backgroundColor,
+        styles.sliderOff.backgroundColor,
+        styles.sliderOn.backgroundColor,
+        styles.sliderOnDisabled.backgroundColor,
+        styles.sliderOnPressed.backgroundColor,
+        styles.sliderPressed.backgroundColor,
+    ]);
+    const calculateSliderBorderColor = useCallback((danger) => {
+        if (danger && !disabled) {
+            return styles.sliderDanger.borderColor;
+        }
+        return styles.sliderNoDanger.borderColor;
+    }, [
+        disabled,
+        styles.sliderDanger.borderColor,
+        styles.sliderNoDanger.borderColor,
+    ]);
+    const sliderBackground = useSharedValue(calculateSliderBackground(checked, disabled, false));
+    const sliderBorderColor = useSharedValue(calculateSliderBorderColor(danger));
+    useEffect(() => {
+        sliderBorderColor.value = withTiming(calculateSliderBorderColor(danger));
+    }, [calculateSliderBorderColor, danger, sliderBorderColor]);
+    const sliderStyle = useMemo(() => StyleSheet.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 useStyles = makeStyles(({ theme, border }) => ({
+    container: {
+        height: theme.Form.inputSwitch.inputSwitchHeight,
+        width: theme.Form.inputSwitch.inputSwitchWidth,
+    },
+    slider: {
+        padding: theme.Form.inputSwitch.inputSwitchSliderPadding,
+        height: theme.Form.inputSwitch.inputSwitchHeight,
+        width: theme.Form.inputSwitch.inputSwitchWidth,
+        borderRadius: border.Radius['rounded-full'],
+        borderWidth: border.Width.border,
+    },
+    sliderOff: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffBg },
+    sliderOn: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnBg },
+    sliderPressed: {
+        backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffHoverBg,
+    },
+    sliderOnPressed: {
+        backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnHoverBg,
+    },
+    sliderDisabled: {
+        backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOffDisabledBg,
+    },
+    sliderOnDisabled: {
+        backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOnDisabledBg,
+    },
+    sliderNoDanger: { borderColor: 'transparent' },
+    sliderDanger: {
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+        outlineColor: theme.General.focusOutlineErrorColor,
+        outlineWidth: Math.round(theme.General.focusShadowWidth),
+    },
+}));

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

@@ -0,0 +1,13 @@
+import { type ViewStyle } from 'react-native';
+import type { InputTextBaseProps } from './InputTextBase/types';
+export interface InputTextProps extends InputTextBaseProps {
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: ViewStyle;
+}
+/**
+ * Компонент для ввода текста
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
+ * @see InputTextBase
+ * @see InputTextBaseProps
+ */
+export declare const InputText: import("react").NamedExoticComponent<InputTextProps>;

package/dist/components/Input/InputText.js

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import { InputTextBase } from './InputTextBase/InputTextBase';
+/**
+ * Компонент для ввода текста
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
+ * @see InputTextBase
+ * @see InputTextBaseProps
+ */
+export const InputText = memo(({ style, ...otherProps }) => {
+    return (<View style={style}>
+      <InputTextBase {...otherProps}/>
+    </View>);
+});

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

@@ -0,0 +1,13 @@
+import { type ViewStyle } from 'react-native';
+import type { InputTextBaseProps } from './types';
+interface PrivateInputTextBaseProps {
+    inputStyle?: ViewStyle;
+    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

@@ -0,0 +1,124 @@
+import { IconEye, IconEyeOff, IconLoader2, IconLock, IconX, } from '@tabler/icons-react-native';
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { TextInput, View, TouchableOpacity, Pressable, } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLoadingRotationAnimation } from '../../../hooks/useLoadingRotationAnimation';
+import { useMakeTestId } from '../../../hooks/useMakeTestId';
+import { InputTextBaseTestId } from './testIds';
+import { useStyles } from './useStyles';
+/**
+ * Базовое поле
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
+ * @see InputText
+ */
+export const InputTextBase = memo(
+// eslint-disable-next-line max-lines-per-function
+({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, inputStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, ...otherProps }) => {
+    const styles = useStyles();
+    const inputRef = useRef(null);
+    const [valueState, setValueState] = useState('');
+    const [isFocused, setIsFocused] = useState(otherProps.autoFocus || false);
+    const labelAnimation = useSharedValue(0);
+    const onFocus = useCallback((e) => {
+        setIsFocused(true);
+        otherProps.onFocus?.(e);
+    }, [otherProps]);
+    const onBlur = useCallback((e) => {
+        setIsFocused(false);
+        otherProps.onBlur?.(e);
+    }, [otherProps]);
+    const onChangeText = useCallback((nextValue) => {
+        otherProps.onChangeText?.(nextValue);
+        setValueState(nextValue);
+    }, [otherProps]);
+    const clear = useCallback(() => {
+        inputRef.current?.clear();
+        onChangeText('');
+    }, [onChangeText]);
+    const value = useMemo(() => otherProps.value ?? valueState, [otherProps.value, valueState]);
+    const showClearButton = useMemo(() => clearable && !!value.length, [clearable, value.length]);
+    const onContainerPress = useCallback(() => {
+        inputRef.current?.focus();
+    }, []);
+    const loadingAnimatedStyle = useLoadingRotationAnimation(loading);
+    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,
+    }));
+    useEffect(() => {
+        labelAnimation.value = withTiming(isFocused || value ? 1 : 0, {
+            duration: 100,
+        });
+    }, [isFocused, labelAnimation, value]);
+    const iconSize = useMemo(() => (floatLabel ? styles.iconSizeFloatLabel : styles.iconSize), [floatLabel, styles.iconSize, styles.iconSizeFloatLabel]);
+    useImperativeHandle(propsInputRef, () => (inputRef.current ? inputRef.current : null), [inputRef]);
+    const { makeTestId } = useMakeTestId(otherProps.testID || InputTextBaseTestId.default);
+    const [userDefinedSecureTextEntry, setUserDefinedSecureTextEntry] = useState(true);
+    const secureTextEntry = useMemo(() => secureTextEntryProp === 'toggleable'
+        ? userDefinedSecureTextEntry
+        : secureTextEntryProp, [secureTextEntryProp, userDefinedSecureTextEntry]);
+    const toggleUserDefinedSecureTextEntry = useCallback(() => setUserDefinedSecureTextEntry((old) => !old), []);
+    const texInputProps = useMemo(() => ({
+        placeholderTextColor: styles.placeholderTextColor.color,
+        ...otherProps,
+        placeholder: floatLabel ? '' : placeholder,
+        testID: makeTestId(),
+        editable: !disabled,
+        secureTextEntry,
+        style: [styles.input, floatLabel && styles.inputFloatLabel, inputStyle],
+        inputRef,
+        value,
+        onBlur,
+        onChangeText,
+        onFocus,
+    }), [
+        styles.placeholderTextColor.color,
+        styles.input,
+        styles.inputFloatLabel,
+        otherProps,
+        floatLabel,
+        placeholder,
+        makeTestId,
+        disabled,
+        secureTextEntry,
+        inputStyle,
+        value,
+        onBlur,
+        onChangeText,
+        onFocus,
+    ]);
+    return (<Pressable accessible={false} disabled={disabled} style={[
+            styles.container,
+            floatLabel && styles.containerFloatLabel,
+            isFocused && styles.containerFocused,
+            containerStyle,
+            state === 'danger' && styles.danger,
+            state === 'danger' && isFocused && styles.dangerFocused,
+            disabled && styles.disabled,
+        ]} testID={makeTestId(InputTextBaseTestId.pressableContainer)} onPress={onContainerPress}>
+        {floatLabel ? (<Animated.Text style={[styles.label, labelAnimatedStyle]} testID={makeTestId(InputTextBaseTestId.floatingPlaceholder)}>
+            {placeholder}
+          </Animated.Text>) : null}
+        {renderTextInput ? (renderTextInput(texInputProps)) : (<TextInput {...texInputProps} ref={inputRef}/>)}
+
+        <View style={styles.rightContainer}>
+          {loading ? (<Animated.View style={loadingAnimatedStyle} testID={makeTestId(InputTextBaseTestId.loading)}>
+              <IconLoader2 color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+            </Animated.View>) : null}
+
+          {showClearButton && !disabled ? (<TouchableOpacity accessibilityLabel={clearButtonAccessibilityLabel} testID={makeTestId(InputTextBaseTestId.clearButton)} onPress={clear}>
+              <IconX color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+            </TouchableOpacity>) : null}
+
+          {secureTextEntryProp === 'toggleable' ? (<TouchableOpacity 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}/>)}
+            </TouchableOpacity>) : null}
+
+          {disabled ? (<IconLock color={styles.rightIcon.color} height={iconSize.height} testID={makeTestId(InputTextBaseTestId.disabledIcon)} width={iconSize.width}/>) : null}
+        </View>
+      </Pressable>);
+});

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

@@ -0,0 +1,11 @@
+export declare const InputTextBaseTestId: {
+    default: string;
+    focusOutline: string;
+    dangerOutline: string;
+    loading: string;
+    clearButton: string;
+    secureInputButton: string;
+    disabledIcon: string;
+    floatingPlaceholder: string;
+    pressableContainer: string;
+};

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

@@ -0,0 +1,11 @@
+export const InputTextBaseTestId = {
+    default: 'InputTextBase',
+    focusOutline: 'FocusOutline',
+    dangerOutline: 'DangerOutline',
+    loading: 'Loading',
+    clearButton: 'ClearButton',
+    secureInputButton: 'SecureInputButton',
+    disabledIcon: 'DisabledIcon',
+    floatingPlaceholder: 'FloatingPlaceholder',
+    pressableContainer: 'PressableContainer',
+};

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

@@ -0,0 +1,41 @@
+import type { Ref, ReactNode } from 'react';
+import type { TextInputProps, ViewStyle, TextInput } from 'react-native';
+/** @see TextInputProps */
+export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'editable' | 'secureTextEntry'> {
+    /**
+     * Управление отображения иконки очистки поля
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Управление режимом скрытия текста
+     * - `true` — всегда скрывать (как в TextInput)
+     * - `false` — не скрывать
+     * - `"toggleable"` — скрытие управляется пользователем через кнопку-глаз
+     */
+    secureTextEntry?: boolean | 'toggleable';
+    /** Озвучка для кнопки очистки поля */
+    clearButtonAccessibilityLabel?: string;
+    /** Управление стилем контейнера поля ввода */
+    containerStyle?: ViewStyle;
+    /** Управление доступностью поля */
+    disabled?: boolean;
+    /** Ref для управления полем ввода */
+    inputRef?: Ref<TextInput | null>;
+    /**
+     * Функция для рендера поля ввода.
+     * Используется, когда необходимо использовать отличный от стандартного компонент.
+     * Например, для реализации масок
+     */
+    renderTextInput?: (props: RenderTextInputArgs) => ReactNode;
+    /** Управление состоянием компонента */
+    state?: 'default' | 'danger';
+    /**
+     * Управляет видом плейсхолдера в компоненте
+     * @default false
+     */
+    floatLabel?: boolean;
+}
+export type RenderTextInputArgs = TextInputProps & {
+    inputRef: Ref<TextInput>;
+};

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

@@ -0,0 +1,86 @@
+export declare const useStyles: () => {
+    container: {
+        minHeight: number;
+        flexDirection: "row";
+        borderWidth: number;
+        borderRadius: number;
+        borderColor: string;
+        backgroundColor: string;
+        justifyContent: "center";
+    };
+    containerFocused: {
+        outlineColor: string;
+        outlineWidth: number;
+    };
+    containerFloatLabel: {
+        minHeight: number;
+        maxHeight: number;
+        height: number;
+    };
+    danger: {
+        borderColor: string;
+    };
+    dangerFocused: {
+        outlineColor: string;
+    };
+    disabled: {
+        opacity: number;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    input: {
+        flex: number;
+        paddingHorizontal: number;
+        fontSize: number;
+        borderRadius: number;
+        color: string;
+        overflow: "hidden";
+        includeFontPadding: false;
+        verticalAlign: "middle";
+        fontFamily: string;
+    };
+    inputFloatLabel: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    placeholderTextColor: {
+        color: string;
+    };
+    rightContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingRight: number;
+        gap: number;
+        overflow: "hidden";
+    };
+    rightIcon: {
+        color: string;
+    };
+    iconSize: {
+        width: number;
+        height: number;
+    };
+    iconSizeFloatLabel: {
+        width: number;
+        height: number;
+    };
+    label: {
+        position: "absolute";
+        left: number;
+        top: number;
+        paddingVertical: number;
+        paddingLeft: number;
+        paddingRight: number;
+        color: string;
+        includeFontPadding: false;
+        verticalAlign: "middle";
+        fontSize: number;
+        fontFamily: string;
+    };
+    labelReducedSize: {
+        fontSize: number;
+        paddingVertical: number;
+        top: number;
+        fontFamily: string;
+    };
+};

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

@@ -0,0 +1,78 @@
+import { makeStyles } from '../../../utils/makeStyles';
+export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) => ({
+    container: {
+        minHeight: theme.Button.Common.buttonHeight,
+        flexDirection: 'row',
+        borderWidth: border.Width.border,
+        borderRadius: border.Radius['rounded-xl'],
+        borderColor: theme.Form.InputText.inputBorderColor,
+        backgroundColor: theme.Form.InputText.inputBg,
+        justifyContent: 'center',
+    },
+    containerFocused: {
+        outlineColor: theme.General.focusOutlineColor,
+        outlineWidth: Math.round(theme.General.focusShadowWidth),
+    },
+    containerFloatLabel: {
+        minHeight: theme.Button.Common.buttonHeightXL,
+        maxHeight: theme.Button.Common.buttonHeightXL,
+        height: theme.Button.Common.buttonHeightXL,
+    },
+    danger: { borderColor: theme.Form.InputText.inputErrorBorderColor },
+    dangerFocused: { outlineColor: theme.General.focusOutlineErrorColor },
+    disabled: {
+        opacity: 0.6,
+        borderColor: theme.Form.InputText.inputBorderColor,
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+    },
+    input: {
+        flex: 1,
+        paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
+        fontSize: typography.Size['text-base'],
+        borderRadius: border.Radius['rounded-xl'],
+        color: theme.Form.InputText.inputTextColor,
+        overflow: 'hidden',
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.secondary,
+    },
+    inputFloatLabel: { paddingTop: 26, paddingBottom: 12 },
+    placeholderTextColor: {
+        color: theme.Form.InputText.inputPlaceholderTextColor,
+    },
+    rightContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingRight: theme.Form.InputText.inputPaddingLeftRight,
+        gap: theme.Form.InputText.inputPaddingLeftRight,
+        overflow: 'hidden',
+    },
+    rightIcon: { color: theme.Form.InputText.inputIconColor },
+    iconSize: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+    iconSizeFloatLabel: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+    },
+    label: {
+        position: 'absolute',
+        left: 7,
+        top: 19,
+        paddingVertical: 0,
+        paddingLeft: spacing.Padding['p-1'],
+        paddingRight: spacing.Padding['p-2'],
+        color: typography.Color.Common['text-color-secondary'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontSize: typography.Size['text-base'],
+        fontFamily: fonts.secondary,
+    },
+    labelReducedSize: {
+        fontSize: typography.Size['text-sm'],
+        paddingVertical: spacing.Padding['p-1'],
+        top: 7,
+        fontFamily: fonts.primary,
+    },
+}));

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

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

package/dist/components/Input/index.js

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

package/dist/components/List/Base/ListBase.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type ViewProps, type ColorValue } from 'react-native';
+import { type SvgSource } from '../../../utils/SvgUniversal';
+/** Свойства ListBase */
+export interface ListBaseProps extends ViewProps {
+    /** Положение левой иконки - вверху или по центру. Правая иконка всегда по центру. */
+    iconAlignment?: 'top' | 'center';
+    /** Основной текст */
+    text: string;
+    /** Заголовок */
+    title?: string;
+    /** Пояснение */
+    caption?: string;
+    /** Левая иконка (SVG) */
+    LeftIcon?: SvgSource;
+    leftIconColor?: ColorValue;
+    /** Правая иконка (SVG) */
+    RightIcon?: SvgSource;
+    rightIconColor?: ColorValue;
+    /** Дополнительный контент. Выводится между названием и правой иконкой */
+    extra?: React.ReactNode;
+    /** Разделитель - наверху только контента, не захватывая левую иконку, либо наверху всего компонента*/
+    divider?: 'content' | 'full';
+    disabled?: boolean;
+    onPress?: () => void;
+}
+/**
+ * Базовый элемент списка
+ *
+ * Фигма https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=641-2254&m=dev
+ */
+export declare const ListBase: React.NamedExoticComponent<ListBaseProps>;

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

@@ -0,0 +1,88 @@
+import React, { memo, useMemo } from 'react';
+import { View, Pressable, } from 'react-native';
+import { SvgUniversal } from '../../../utils/SvgUniversal';
+import { makeStyles } from '../../../utils/makeStyles';
+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 fullDivider = divider === 'full' ? styles.divider : {};
+    const contentDivider = divider === 'content' ? styles.divider : {};
+    const accessibilityLabel = useMemo(() => [subtitle, title].join(' '), [subtitle, title]);
+    return (<Pressable accessibilityLabel={accessibilityLabel} accessibilityRole='button' accessibilityValue={{ text: caption }} disabled={disabled} testID={testID || 'ListBase'} onPress={onPress} {...rest}>
+        {({ pressed }) => (<View style={[
+                style,
+                styles.container,
+                fullDivider,
+                disabled && styles.disabled,
+                pressed && styles.pressed,
+            ]} {...rest}>
+            {LeftIcon ? (<View style={leftIconStyle}>
+                <SvgUniversal source={LeftIcon} {...styles.icon} color={leftIconColor}/>
+              </View>) : null}
+            <View style={[styles.content, contentDivider]}>
+              <View style={styles.labelContainer}>
+                {subtitle ? (<Subtitle color='primary'>{subtitle}</Subtitle>) : null}
+                <View style={styles.titleContainer}>
+                  <Body>{title}</Body>
+                  {caption ? (<Caption color='secondary'>{caption}</Caption>) : null}
+                </View>
+              </View>
+              <View style={styles.rightSection}>
+                {extra ? (<View style={styles.extraContainer}>{extra}</View>) : null}
+                {RightIcon ? (<SvgUniversal source={RightIcon} {...styles.icon} color={rightIconColor}/>) : null}
+              </View>
+            </View>
+          </View>)}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ spacing, typography, theme, background }) => ({
+    container: {
+        flexDirection: 'row',
+        paddingLeft: spacing.Padding['p-4'],
+        gap: spacing.Padding['p-4'],
+        alignItems: 'center',
+    },
+    pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] },
+    disabled: { opacity: 0.6 },
+    leftIcon: { paddingVertical: spacing.Padding['p-4'] },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: spacing.Padding['p-2'],
+        paddingEnd: spacing.Padding['p-4'],
+        gap: spacing.Gap['gap-4'],
+    },
+    labelContainer: {
+        paddingVertical: spacing.Padding['p-2'],
+        gap: spacing.Gap['gap-2'],
+        flex: 1,
+    },
+    titleContainer: { gap: spacing.Gap['gap-1'] },
+    extraContainer: { paddingVertical: spacing.Padding['p-2'] },
+    icon: {
+        width: typography.Size['text-2xl'],
+        height: typography.Size['text-2xl'],
+    },
+    rightSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: spacing.Padding['p-2'],
+        gap: spacing.Gap['gap-4'],
+    },
+    divider: {
+        borderTopColor: theme.Surface['surface-border'],
+        borderTopWidth: 1,
+    },
+}));

package/dist/components/List/Base/index.d.ts

@@ -0,0 +1 @@
+export { ListBase, type ListBaseProps as ListItemBaseProps } from './ListBase';

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

@@ -0,0 +1 @@
+export { ListBase } from './ListBase';

package/dist/components/MenuItem/MenuItemAccessory.d.ts

@@ -0,0 +1,11 @@
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface MenuItemAccessoryProps {
+    /** SVG-иконка */
+    readonly Icon: SvgSource;
+    /** Неактивное состояние. Если true, заменяет Icon на иконку замка. */
+    readonly disabled?: boolean;
+}
+/**
+ * Аксессуар элемента меню. Выводится в крайней левой или крайней правой позиции пункта меню.
+ */
+export declare const MenuItemAccessory: import("react").NamedExoticComponent<MenuItemAccessoryProps>;