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

package/dist/components/MenuItem/MenuItemAccessory.js

@@ -0,0 +1,23 @@
+import { IconLock } from '@tabler/icons-react-native';
+import { memo, useMemo } from 'react';
+import { View } from 'react-native';
+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}/>
+      </View>);
+});
+const useStyles = makeStyles(({ 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.d.ts

@@ -0,0 +1,36 @@
+import { type ColorValue } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+import { type BadgeSeverity } from '../Badge/Badge';
+interface MenuItemIconStyle {
+    /** Ширина иконки в поинтах*/
+    width?: number;
+    /** Высота иконки в поинтах*/
+    height?: number;
+    /** Цвет иконки*/
+    color?: ColorValue;
+}
+interface MenuItemIconProps {
+    /**
+     * SVG-иконка
+     * @type {SvgSource}
+     */
+    readonly Icon: SvgSource;
+    /**
+     * Стиль иконки
+     */
+    readonly style: MenuItemIconStyle;
+    /**
+     * Цвет бейджа
+     *
+     * @type {BadgeSeverity}
+     */
+    readonly badgeSeverity?: BadgeSeverity;
+}
+/**
+ * Иконка в составе элемента меню. Состоит из центрирующего враппера, иконки и опционального бейджа (точки)
+ * @param Icon - SVG-иконка
+ * @param style - Стиль иконки
+ * @param badgeSeverity - Цвет бейджа (undefined если бейдж не нужен)
+ */
+export declare const MenuItemIcon: ({ Icon, style, badgeSeverity, }: MenuItemIconProps) => import("react").JSX.Element;
+export {};

package/dist/components/MenuItem/MenuItemIcon.js

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from 'react';
+import { View, StyleSheet, } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+import { Badge } from '../Badge/Badge';
+/**
+ * Иконка в составе элемента меню. Состоит из центрирующего враппера, иконки и опционального бейджа (точки)
+ * @param Icon - SVG-иконка
+ * @param style - Стиль иконки
+ * @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;
+        setBadgePosition({ top: -width / 2, right: -height / 2 });
+    }, []);
+    const badgeStyle = useMemo(() => StyleSheet.flatten([
+        styles.badge,
+        { top: badgePosition.top, right: badgePosition.right },
+    ]), [badgePosition.right, badgePosition.top, styles.badge]);
+    return (<View style={styles.container}>
+      <View>
+        <SvgUniversal source={Icon} {...style}/>
+        {badgeSeverity ? (<Badge dot severity={badgeSeverity} style={badgeStyle} testID='MenuItemIconBadge' onLayout={onLayout}/>) : null}
+      </View>
+    </View>);
+};
+const useStyles = makeStyles(() => ({
+    container: { justifyContent: 'center', position: 'relative' },
+    badge: { position: 'absolute' },
+}));

package/dist/components/MenuItem/Template/MenuItemTemplate.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { type ViewProps, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
+import type { SvgSource } from '../../../utils/SvgUniversal';
+import type { BadgeSeverity } from '../../Badge/Badge';
+export interface MenuItemTemplateProps extends ViewProps {
+    /** Заголовок пункта меню */
+    title: string;
+    /** Подзаголовок пункта меню */
+    caption?: string;
+    /** SVG-иконка слева от заголовка */
+    Icon?: SvgSource;
+    /** Цвет иконки. Если цвет не задан - применяется такой же цвет что и для аксессуаров (prefix, suffix) */
+    iconColor?: ColorValue;
+    /** Цвет бейджа (точки) в правом верхнем углу иконки. Бейдж может выводиться только при наличии иконки. */
+    badgeSeverity?: BadgeSeverity;
+    /** Аксессуар (SVG-иконка) в самой левой части пункта меню */
+    PrefixIcon?: SvgSource;
+    /** Аксессуар (SVG-иконка) в самой правой части пункта меню */
+    SuffixIcon?: SvgSource;
+    /**
+     * Дополнительный контент пункта меню, выводится справа от текста. Может быть любым react компонентом. Важно! Размеры доплолнительного контента не контролируются пунктом меню и могут его растягивать. Использовать с осторожностью.
+     */
+    extra?: ReactNode;
+    /** Неактивное состояние. В неактивном состоянии отключается чувствительность к нажатиям, компонент становится полупрозрачным, а аксессуары заменяются иконкой с замком*/
+    disabled?: boolean;
+    /** Разделитель. Выводится как полоска сверху. Изменяет общую высоту элемента меню.*/
+    separator?: boolean;
+    /** Обработчик нажатия */
+    onPress?: () => void;
+    /**
+     * Кастомные стили
+     * Если нужно изменить отступы, не используйте `padding`.
+     * Допускается использовать `paddingVertical`, `paddingHorizontal`, `paddingStart`, `paddingEnd`, `paddingLeft`, `paddingRight`, `paddingTop`, `paddingBottom`.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Шаблон элемента меню. Содержит максимальное количество компонентов внутри пункта меню и используется как основа для создания пунктов меню любой возможной конфигурации.
+ *
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=937-6724&m=dev
+ */
+export declare const MenuItemTemplate: import("react").NamedExoticComponent<MenuItemTemplateProps>;

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

@@ -0,0 +1,79 @@
+import { memo, useCallback, useMemo } from 'react';
+import { View, Pressable, } from 'react-native';
+import { makeStyles } from '../../../utils/makeStyles';
+import { Body, Caption } from '../../Typography';
+import { MenuItemAccessory } from '../MenuItemAccessory';
+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 pressableStyle = useCallback(({ pressed }) => [
+        styles.container,
+        pressed && styles.containerPressed,
+        style,
+        disabled && styles.containerDisabled,
+    ], [disabled, styles, 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}>
+            {PrefixIcon ? (<MenuItemAccessory Icon={PrefixIcon} disabled={disabled}/>) : null}
+            <View style={styles.templateContainer}>
+              {Icon ? (<MenuItemIcon Icon={Icon} badgeSeverity={badgeSeverity} style={iconStyle}/>) : null}
+              <View style={styles.textContainer}>
+                <Body base>{title}</Body>
+                {caption ? (<Caption color='secondary'>{caption}</Caption>) : null}
+              </View>
+            </View>
+            {extra}
+            {SuffixIcon ? (<MenuItemAccessory Icon={SuffixIcon} disabled={disabled}/>) : null}
+          </View>
+        </Pressable>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
+    container: {
+        borderColor: theme.Menu.Item.menuitemBorderColor,
+        borderWidth: border.Width.border,
+        borderRadius: theme.Menu.Item.menuitemBorderRadius,
+        backgroundColor: theme.Menu.Item.menuitemBg,
+    },
+    containerPressed: { backgroundColor: theme.Menu.Item.menuitemHoverBg },
+    containerDisabled: {
+        borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+        opacity: 0.6,
+    },
+    separator: {
+        borderTopWidth: 1,
+        borderTopColor: theme.Menu.Overlay.overlayMenuBorderColor,
+        paddingTop: theme.Menu.Common.menuSeparatorMarginTopBottom,
+    },
+    contentContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.General.inlineSpacing,
+        paddingHorizontal: theme.Menu.Item.menuitemPaddingLeftRight,
+        paddingVertical: theme.Menu.Item.menuitemPaddingTopBottom,
+    },
+    accessory: {
+        color: theme.Menu.Item.menuitemIconColor,
+        width: theme.Menu.Item.menuitemSubmenuIconFontSize,
+        height: theme.Menu.Item.menuitemSubmenuIconFontSize,
+    },
+    templateContainer: {
+        flexDirection: 'row',
+        gap: spacing.Gap['gap-2'],
+        flexGrow: 1,
+    },
+    icon: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+        color: theme.Menu.Item.menuitemIconColor,
+    },
+    textContainer: { gap: spacing.Gap['gap-1'] },
+}));

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

@@ -0,0 +1 @@
+export { MenuItemTemplate, type MenuItemTemplateProps, } from './Template/MenuItemTemplate';

package/dist/components/MenuItem/index.js

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

package/dist/components/Message/Message.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode } from 'react';
+import { type AccessibilityProps, type ViewProps, type ViewStyle } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface MessageProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Текст заголовка */
+    title: string;
+    /** Тело сообщения */
+    body?: ReactNode;
+    /** Текст подписи */
+    caption?: string;
+    /** Футер сообщения */
+    footer?: ReactNode;
+    /**
+     * Обработчик нажатия на кнопку закрытия.
+     * Кнопка не отображается, если обработчик не передан.
+     */
+    onClose?: () => void;
+    /**
+     * Текст на кнопке закрытия тоста
+     * Если не указан, в кнопке отображается иконка "крестик"
+     * Это свойство игнорируется если onClose = undefined
+     */
+    closeLabel?: string;
+    /** Срабатывает при истечении таймера */
+    onTimerFinish?: () => void;
+    /**
+     * Выбор варианта стиля компонента
+     * @default 'info'
+     */
+    severity?: 'info' | 'success' | 'warning' | 'danger';
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: ViewStyle;
+    /** Значение таймера, если нужно отображать таймер вместо иконки */
+    timerValue?: number;
+    /**
+     * SVG-иконка.
+     * Дефолтные значения:
+     * <pre>
+     * IconInfoCircle для severity='info'
+     * IconCircleCheck для severity='success'
+     * IconAlertTriangle для severity='warning'
+     * IconCircleX для severity='danger'
+     * </pre>
+     */
+    Icon?: SvgSource;
+    /**
+     * Скрыть иконку.
+     * Позволяет скрывать установленные или дефолтные иконки
+     * Дефолтное значение: false
+     */
+    hiddenIcon?: boolean;
+}
+/**
+ * Унифицированный компонент, который используется для отображения информационных сообщений
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=562-2947
+ */
+export declare const Message: import("react").NamedExoticComponent<MessageProps>;
+export declare enum TestId {
+    Container = "MessageContainer",
+    CloseButton = "CloseButton",
+    Title = "Title",
+    Caption = "Caption",
+    Body = "Body",
+    Icon = "Icon"
+}

package/dist/components/Message/Message.js

@@ -0,0 +1,126 @@
+import { IconAlertCircle, IconAlertTriangle, IconCircleCheck, IconInfoCircle, IconX, } from '@tabler/icons-react-native';
+import { memo, useMemo } from 'react';
+import { View, } from 'react-native';
+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';
+/**
+ * Унифицированный компонент, который используется для отображения информационных сообщений
+ * @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();
+    const Icon = useMemo(() => {
+        if (IconProp) {
+            return IconProp;
+        }
+        switch (severity) {
+            case 'info':
+                return IconInfoCircle;
+            case 'success':
+                return IconCircleCheck;
+            case 'warning':
+                return IconAlertTriangle;
+            case 'danger':
+                return IconAlertCircle;
+        }
+    }, [IconProp, severity]);
+    const button = useMemo(() => {
+        if (!onClose) {
+            return null;
+        }
+        const buttonCommonProps = { severity, size: 'small', variant: 'outlined', onPress: onClose };
+        if (closeLabel) {
+            return (<ButtonSeverity label={closeLabel} {...buttonCommonProps} testID={TestId.CloseButton}/>);
+        }
+        return (<ButtonSeverity iconOnly Icon={IconX} {...buttonCommonProps} testID={TestId.CloseButton}/>);
+    }, [closeLabel, severity, onClose]);
+    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 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}>
+            {LeftContent}
+            <View style={styles.titleTextContainer}>
+              <Body base testID={TestId.Title} weight='bold'>
+                {title}
+              </Body>
+              {caption ? (<Caption testID={TestId.Caption}>{caption}</Caption>) : null}
+            </View>
+            {button}
+          </View>
+          {body ? <View testID={TestId.Body}>{body}</View> : null}
+          {footer}
+        </View>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, typography, spacing, border }) => ({
+    container: {
+        borderRadius: theme.General.borderRadiusXL,
+        borderWidth: border.Width.border,
+        overflow: 'hidden',
+    },
+    content: {
+        flexGrow: 1,
+        borderLeftWidth: border.Width['border-3'] - border.Width.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,
+    },
+    titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] },
+    titleTextContainer: {
+        flex: 1,
+        alignSelf: 'center',
+        gap: spacing.Gap['gap-1'],
+    },
+    iconSize: {
+        width: typography.Size['text-4xl'],
+        height: typography.Size['text-4xl'],
+    },
+}));
+export var TestId;
+(function (TestId) {
+    TestId["Container"] = "MessageContainer";
+    TestId["CloseButton"] = "CloseButton";
+    TestId["Title"] = "Title";
+    TestId["Caption"] = "Caption";
+    TestId["Body"] = "Body";
+    TestId["Icon"] = "Icon";
+})(TestId || (TestId = {}));

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

@@ -0,0 +1 @@
+export { Message, type MessageProps } from './Message';

package/dist/components/Message/index.js

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

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,33 @@
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Тип свойств компонента ProgressBar
+ * @see ProgressBar
+ */
+export interface ProgressBarProps extends Pick<ViewProps, 'testID'> {
+    /**
+     * Значение прогресса от 0 до 100
+     */
+    value: number;
+    /**
+     * Отображение значения прогресса
+     */
+    showValue?: boolean;
+    /**
+     * Стилизация компонента ProgressBar
+     */
+    style?: StyleProp<ProgressBarStyle>;
+}
+/**
+ * Компонент ProgressBar
+ * @param value - значение прогресса от 0 до 100
+ * @param showValue - отображение значения прогресса
+ * @param style - стилизация компонента ProgressBar
+ * @see ProgressBarProps
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5024&m=dev
+ */
+export declare const ProgressBar: import("react").NamedExoticComponent<ProgressBarProps>;
+/**
+ * Стиль компонента ProgressBar
+ * @see ProgressBar
+ */
+export type ProgressBarStyle = Pick<ViewStyle, 'height' | 'width' | 'maxWidth' | 'minWidth' | 'maxHeight' | 'minHeight' | 'flex' | 'alignSelf' | 'position' | 'top' | 'right' | 'left' | 'bottom' | 'margin' | 'marginBottom' | 'marginEnd' | 'marginHorizontal' | 'marginLeft' | 'marginRight' | 'marginStart' | 'marginTop' | 'marginVertical'>;

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,62 @@
+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';
+/**
+ * Компонент ProgressBar
+ * @param value - значение прогресса от 0 до 100
+ * @param showValue - отображение значения прогресса
+ * @param style - стилизация компонента ProgressBar
+ * @see ProgressBarProps
+ * @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 }, }, }) => {
+        setContainerWidth(width);
+    }, []);
+    const value = useMemo(() => {
+        if (propsValue > 100) {
+            return 100;
+        }
+        if (propsValue < 0) {
+            return 0;
+        }
+        return propsValue;
+    }, [propsValue]);
+    useEffect(() => {
+        indicatorWidth.value = withTiming(containerWidth * (value / 100));
+    }, [containerWidth, indicatorWidth, value]);
+    return (<View style={[
+            styles.container,
+            style,
+            showValue && styles.containerShowValue,
+        ]} onLayout={onLayout}>
+        <Animated.View style={[styles.indicator, { width: indicatorWidth }]}>
+          {showValue ? (<Text style={styles.indicatorText}>{value} %</Text>) : null}
+        </Animated.View>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({
+    container: {
+        borderRadius: border.Radius['rounded-full'],
+        backgroundColor: theme.Misc.ProgressBar.progressBarBg,
+        overflow: 'hidden',
+    },
+    indicator: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.Misc.ProgressBar.progressBarValueBg,
+        height: '100%',
+        overflow: 'hidden',
+    },
+    containerShowValue: { height: theme.Misc.ProgressBar.progressBarHeight },
+    indicatorText: {
+        fontSize: typography.Size['text-xs'],
+        textAlign: 'center',
+        color: theme.Misc.ProgressBar.progressBarValueTextColor,
+        fontFamily: fonts.primary,
+    },
+}));

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

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './ProgressBar';

package/dist/components/ProgressBar/index.js

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

package/dist/components/ProgressSpinner/ProgressSpinner.d.ts

@@ -0,0 +1,17 @@
+export interface ProgressSpinnerProps {
+    /**
+     * Выбор размера компонента
+     * @default 'md'
+     */
+    size?: 'xl' | 'lg' | 'md' | 'sm';
+    /**
+     * Выбор цвета компонента
+     * @default 'primary'
+     */
+    fill?: 'primary' | 'white';
+}
+/**
+ * Используется для отображения состояний ожидания в интерфейсе
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=1219-3086
+ */
+export declare const ProgressSpinner: import("react").NamedExoticComponent<ProgressSpinnerProps>;

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,68 @@
+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';
+// eslint-disable-next-line import-x/no-deprecated
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+// eslint-disable-next-line import-x/no-deprecated
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+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(() => {
+        switch (size) {
+            case 'xl':
+                return 56;
+            case 'lg':
+                return 42;
+            case 'md':
+                return 28;
+            case 'sm':
+                return 14;
+        }
+    }, [size]);
+    const color = useMemo(() => {
+        switch (fill) {
+            case 'primary':
+                return styles.primary.color;
+            case 'white':
+                return styles.white.color;
+        }
+    }, [fill, styles.primary.color, styles.white.color]);
+    const center = useMemo(() => sizeInDp / 2, [sizeInDp]);
+    const radius = useMemo(() => center - STROKE_WIDTH / 2, [center]);
+    const circleLength = useMemo(() => 2 * Math.PI * radius, [radius]);
+    const containerAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${containerAnimation.value * 360}deg` }],
+    }));
+    const circleAnimatedProps = useAnimatedProps(() => ({
+        strokeDasharray: [
+            interpolate(circleAnimation.value, [0, 0.5, 1], [1, 0.7 * circleLength, circleLength]),
+            circleLength,
+        ],
+        strokeDashoffset: interpolate(circleAnimation.value, [0, 0.5, 1], [0, -(0.3 * circleLength), -circleLength + 2]),
+    }));
+    useEffect(() => {
+        circleAnimation.value = withRepeat(withTiming(1, { duration: 1500, easing: Easing.inOut(Easing.ease) }), -1, false);
+    }, [circleAnimation]);
+    useEffect(() => {
+        containerAnimation.value = withRepeat(withTiming(1, { duration: 2000, easing: Easing.linear }), -1);
+    }, [containerAnimation]);
+    return (<AnimatedSvg style={[containerAnimatedStyle, { width: sizeInDp, height: sizeInDp }]} testID={TestId.ProgressSpinner}>
+        <AnimatedCircle animatedProps={circleAnimatedProps} cx={center} cy={center} fill='none' r={radius} stroke={color} strokeLinecap='round' strokeWidth={STROKE_WIDTH}/>
+      </AnimatedSvg>);
+});
+const useStyles = makeStyles(({ theme, global }) => ({
+    primary: { color: theme.General.primaryColor },
+    white: { color: global.Neutrals.White['white-100'] },
+}));
+var TestId;
+(function (TestId) {
+    TestId["ProgressSpinner"] = "ProgressSpinner";
+})(TestId || (TestId = {}));

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

@@ -0,0 +1 @@
+export { ProgressSpinner, type ProgressSpinnerProps } from './ProgressSpinner';

package/dist/components/ProgressSpinner/index.js

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

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,18 @@
+import { type AccessibilityProps, type ViewProps } from 'react-native';
+export interface RadioButtonProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Обработчик нажатия на кнопку */
+    onPress: () => void;
+    /**
+     * true, если необходим компонент в активном состоянии
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Управление доступностью компонента
+     * @default false
+     */
+    disabled?: boolean;
+    /** Выбор состояния компонента */
+    state?: 'default' | 'danger';
+}
+export declare const RadioButton: import("react").NamedExoticComponent<RadioButtonProps>;