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

package/dist/components/SelectButton/SelectButtonItem.js

@@ -0,0 +1,133 @@
+import { memo, useMemo, useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { interpolateColor, runOnJS, useAnimatedReaction, useAnimatedStyle, } from 'react-native-reanimated';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Дочерний элемент компонента SelectButton. Не используется отдельно от SelectButton.
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=481-4393
+ */
+export const SelectButtonItem = memo(({ index, position, onPress, disabled, label, onLayout, size = 'base', showIcon = true, Icon, }) => {
+    const styles = useStyles();
+    const iconSize = useMemo(() => {
+        switch (size) {
+            case 'small':
+                return styles.iconSmall;
+            case 'base':
+                return styles.iconBase;
+            case 'large':
+                return styles.iconLarge;
+            case 'xlarge':
+                return styles.iconXLarge;
+        }
+    }, [
+        size,
+        styles.iconBase,
+        styles.iconLarge,
+        styles.iconSmall,
+        styles.iconXLarge,
+    ]);
+    const labelFontSize = useMemo(() => {
+        switch (size) {
+            case 'small':
+                return styles.labelSmall;
+            case 'base':
+                return styles.labelBase;
+            case 'large':
+                return styles.labelLarge;
+            case 'xlarge':
+                return styles.labelXLarge;
+        }
+    }, [
+        size,
+        styles.labelBase,
+        styles.labelLarge,
+        styles.labelSmall,
+        styles.labelXLarge,
+    ]);
+    const animatedColorStyle = useAnimatedStyle(() => {
+        return {
+            color: interpolateColor(position.value, [index - 1, index, index + 1], [
+                styles.textColor.color,
+                styles.checkedTextColor.color,
+                styles.textColor.color,
+            ]),
+        };
+    });
+    const [isSelected, setIsSelected] = useState(false);
+    useAnimatedReaction(() => position.value, (value, prevValue) => {
+        if (value !== prevValue) {
+            runOnJS(setIsSelected)(value === index);
+        }
+    });
+    return (<TouchableOpacity disabled={disabled} style={[
+            styles.container,
+            styles[size],
+            disabled && styles.disabledContainer,
+        ]} testID='SelectButtonItem_TouchableOpacity' onLayout={onLayout} onPress={onPress}>
+        {Icon && showIcon ? (<SvgUniversal height={iconSize.height} source={Icon} style={[
+                styles.textColor,
+                isSelected && styles.checkedTextColor,
+                disabled && styles.disabledTextColor,
+            ]} testID='SelectButtonItem_Icon' width={iconSize.width}/>) : null}
+        <Animated.Text numberOfLines={1} style={[
+            styles.label,
+            labelFontSize,
+            styles.textColor,
+            disabled ? styles.disabledTextColor : animatedColorStyle,
+        ]} testID='SelectButtonItem_Text'>
+          {label}
+        </Animated.Text>
+      </TouchableOpacity>);
+});
+const useStyles = makeStyles(({ theme, typography, border, spacing, fonts }) => ({
+    container: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.General.inlineSpacing,
+        borderWidth: border.Width.border,
+        borderColor: 'transparent',
+    },
+    small: { height: theme.Button.Common.buttonHeightSM },
+    base: { height: theme.Button.Common.buttonHeight },
+    large: {
+        height: theme.Button.Common.buttonHeightLG,
+        gap: spacing.Gap['gap-3'],
+    },
+    xlarge: {
+        height: theme.Button.Common.buttonHeightXL,
+        gap: spacing.Gap['gap-3'],
+    },
+    disabledContainer: {
+        borderRadius: theme.Form.SelectButton.selectButtonBorderRadius,
+        borderWidth: 1,
+        borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+    },
+    iconSmall: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+    iconBase: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+    },
+    iconLarge: {
+        width: typography.Size['text-2xl'],
+        height: typography.Size['text-2xl'],
+    },
+    iconXLarge: { width: 28, height: 28 },
+    label: { flexShrink: 1, fontWeight: 600, fontFamily: fonts.primary },
+    labelSmall: { fontSize: typography.Size['text-sm'] },
+    labelBase: { fontSize: typography.Size['text-base'] },
+    labelLarge: { fontSize: typography.Size['text-xl'] },
+    labelXLarge: { fontSize: typography.Size['text-2xl'] },
+    textColor: { color: theme.Form.SelectButton.selectButtonTextColor },
+    checkedTextColor: {
+        color: theme.Form.SelectButton.selectButtonIconActiveColor,
+    },
+    disabledTextColor: {
+        color: theme.Button.Disabled.disabledButtonBorderColor,
+    },
+}));

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

@@ -0,0 +1 @@
+export { SelectButton, type SelectButtonProps } from './SelectButton';

package/dist/components/SelectButton/index.js

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

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,15 @@
+import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+interface SkeletonProps extends ViewProps {
+}
+export declare const ANIMATION_DURATION = 1200;
+/**
+ * Используется для отображения контента в момент загрузки
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731
+ */
+export declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
+export declare const SkeletonTestId: {
+    root: string;
+    animatedView: string;
+    svg: string;
+};
+export {};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,53 @@
+import { memo, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { makeStyles } from '../../utils/makeStyles';
+export const ANIMATION_DURATION = 1200; // ms
+/**
+ * Используется для отображения контента в момент загрузки
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731
+ */
+export const Skeleton = memo(({ style, testID, ...rest }) => {
+    const styles = useStyles();
+    const animation = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => ({
+        left: `${interpolate(animation.value, [0, 1], [-100, 100])}%`,
+    }));
+    useEffect(() => {
+        animation.value = withRepeat(withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.ease }), -1);
+    }, [animation]);
+    return (<View {...rest} style={[styles.container, style]} testID={testID ?? SkeletonTestId.root}>
+      <Animated.View style={[styles.gradientContainer, animatedStyles]} testID={SkeletonTestId.animatedView}>
+        <Svg testID={SkeletonTestId.svg}>
+          <Defs>
+            <LinearGradient id='gradient' x1='0' x2='1' y1='1' y2='1'>
+              <Stop offset='0' stopColor={styles.container.backgroundColor} stopOpacity='0.4'/>
+              <Stop offset='0.5' stopColor={styles.gradientColor.backgroundColor} stopOpacity='0.4'/>
+              <Stop offset='1' stopColor={styles.container.backgroundColor} stopOpacity='0.4'/>
+            </LinearGradient>
+          </Defs>
+          <Rect fill='url(#gradient)' height='100%' width='100%'/>
+        </Svg>
+      </Animated.View>
+    </View>);
+});
+const useStyles = makeStyles(({ border, theme }) => ({
+    container: {
+        borderRadius: border.Radius['rounded-lg'],
+        overflow: 'hidden',
+        backgroundColor: theme.Misc.Skeleton.skeletonBg,
+    },
+    gradientContainer: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: '-100%',
+    },
+    gradientColor: { backgroundColor: theme.Misc.Skeleton.skeletonAnimationBg },
+}));
+export const SkeletonTestId = {
+    root: 'Skeleton',
+    animatedView: 'Skeleton.animatedView',
+    svg: 'Skeleton.svg',
+};

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

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

package/dist/components/Skeleton/index.js

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

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,36 @@
+import { type AccessibilityProps, type ViewProps } from 'react-native';
+export interface SliderProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /**
+     * Управление доступностью компонента
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Признак наличия диапазона выбираемых значений
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Начальное значение/позиция стартового ползунка
+     * @default 0
+     */
+    minPointerValueInit: number;
+    /**
+     * Конечное значение/позиция конечного ползунка
+     * @default 100
+     */
+    maxPointerValueInit?: number;
+    /**
+     * Значение/позиция возвращаемое стартовым ползунком
+     */
+    onMinPointerValueChange: (value: number) => void;
+    /**
+     * Значение/позиция возвращаемое конечным ползунком
+     */
+    onMaxPointerValueChange: (value: number) => void;
+}
+/**
+ * Используется для указания значения или диапазона значений с помощью ползунка
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-6090&m=dev
+ */
+export declare const Slider: import("react").NamedExoticComponent<SliderProps>;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,153 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { View, } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation, runOnJS, } from 'react-native-reanimated';
+import { makeStyles } from '../../utils/makeStyles';
+const MIN_TRACK_SCALE = 0;
+const MAX_TRACK_SCALE = 100;
+const clamp = (val, min, max) => {
+    'worklet';
+    return Math.min(Math.max(val, min), max);
+};
+/**
+ * Используется для указания значения или диапазона значений с помощью ползунка
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-6090&m=dev
+ */
+export const Slider = memo(
+// TODO: refactor component to fix max-statements
+// eslint-disable-next-line max-statements
+({ disabled = false, range = false, minPointerValueInit = 0, maxPointerValueInit = 100, onMinPointerValueChange, onMaxPointerValueChange, testID, ...rest }) => {
+    const styles = useStyles();
+    const minPointX = useSharedValue(0);
+    const maxPointX = useSharedValue(0);
+    const trackWidth = useSharedValue(0);
+    const pointerWidth = styles.point.width;
+    const [isPressed, setIsPressed] = useState(false);
+    const prevMinPointX = useSharedValue(0);
+    const prevMaxPointX = useSharedValue(0);
+    const pointerStyle = useMemo(() => [styles.point, isPressed && styles.hovered], [styles.point, isPressed, styles.hovered]);
+    const lineStyle = useMemo(() => [styles.line, isPressed && styles.hovered], [styles.line, isPressed, styles.hovered]);
+    const interpolateInitVal = useCallback((value, width) => {
+        return interpolate(value, [MIN_TRACK_SCALE, MAX_TRACK_SCALE], [0, width - pointerWidth], Extrapolation.CLAMP);
+    }, [pointerWidth]);
+    const onContainerLayout = useCallback((event) => {
+        event.target.measure((x, y, width) => {
+            trackWidth.value = width;
+            const min = interpolateInitVal(minPointerValueInit, width);
+            const max = interpolateInitVal(maxPointerValueInit, width);
+            minPointX.value = min;
+            maxPointX.value = max;
+        });
+    }, [
+        minPointerValueInit,
+        maxPointerValueInit,
+        interpolateInitVal,
+        trackWidth,
+        minPointX,
+        maxPointX,
+    ]);
+    const returnMinVal = useCallback((value) => {
+        const min = interpolate(value, [0, trackWidth.value - pointerWidth * 2], [MIN_TRACK_SCALE, MAX_TRACK_SCALE], Extrapolation.CLAMP);
+        onMinPointerValueChange(min);
+    }, [trackWidth, pointerWidth, onMinPointerValueChange]);
+    const returnMaxVal = useCallback((value) => {
+        const min = interpolate(value, [pointerWidth, trackWidth.value - pointerWidth], [MIN_TRACK_SCALE, MAX_TRACK_SCALE], Extrapolation.CLAMP);
+        onMaxPointerValueChange(min);
+    }, [trackWidth, pointerWidth, onMaxPointerValueChange]);
+    const panMinPoint = Gesture.Pan()
+        .minDistance(1)
+        .onBegin(() => {
+        prevMinPointX.value = minPointX.value;
+        runOnJS(setIsPressed)(true);
+    })
+        .onUpdate((event) => {
+        const maxTranslateX = trackWidth.value - pointerWidth;
+        const minPointPosition = clamp(prevMinPointX.value + event.translationX, 0, range ? maxPointX.value - pointerWidth : maxTranslateX);
+        minPointX.value = minPointPosition;
+        runOnJS(returnMinVal)(minPointPosition);
+    })
+        .onFinalize(() => {
+        runOnJS(setIsPressed)(false);
+    });
+    const minPointStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: minPointX.value }],
+    }));
+    const panMaxPoint = Gesture.Pan()
+        .minDistance(1)
+        .onBegin(() => {
+        prevMaxPointX.value = maxPointX.value;
+        runOnJS(setIsPressed)(true);
+    })
+        .onUpdate((event) => {
+        const maxTranslateX = trackWidth.value - pointerWidth;
+        const maxPointPosition = clamp(prevMaxPointX.value + event.translationX, minPointX.value + pointerWidth, maxTranslateX);
+        maxPointX.value = maxPointPosition;
+        runOnJS(returnMaxVal)(maxPointPosition);
+    })
+        .onFinalize(() => {
+        runOnJS(setIsPressed)(false);
+    });
+    const maxPointStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: maxPointX.value }],
+    }));
+    const minLineStyle = useAnimatedStyle(() => ({
+        left: 0,
+        width: minPointX.value + pointerWidth / 2,
+    }));
+    const betweenLineStyle = useAnimatedStyle(() => ({
+        left: minPointX.value + pointerWidth / 2,
+        width: maxPointX.value - minPointX.value,
+    }));
+    return (<View style={[styles.container, disabled && styles.disabled]} testID={testID} onLayout={onContainerLayout} {...rest}>
+        <View style={styles.track}>
+          {range ? null : ( // индикатор старта
+        <Animated.View style={[lineStyle, minLineStyle]}/>)}
+
+          {range ? ( // индикатор между точками
+        <Animated.View style={[lineStyle, betweenLineStyle]}/>) : null}
+
+          <GestureDetector gesture={panMinPoint}>
+            <Animated.View pointerEvents={disabled ? 'none' : 'auto'} style={[pointerStyle, minPointStyle]}/>
+          </GestureDetector>
+
+          {range ? ( // индикатор между точками
+        <GestureDetector gesture={panMaxPoint}>
+              <Animated.View pointerEvents={disabled ? 'none' : 'auto'} style={[pointerStyle, maxPointStyle]}/>
+            </GestureDetector>) : null}
+        </View>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border }) => {
+    return {
+        container: {
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        track: {
+            height: theme.Form.Slider.sliderHorizontalHeight,
+            backgroundColor: theme.Form.Slider.sliderBg,
+            borderRadius: theme.Form.Slider.sliderHandleBorderRadius,
+            position: 'relative',
+            width: '100%',
+            justifyContent: 'center',
+        },
+        line: {
+            height: theme.Form.Slider.sliderHorizontalHeight,
+            borderRadius: theme.Form.Slider.sliderHandleBorderRadius,
+            position: 'absolute',
+            backgroundColor: theme.Form.Slider.sliderRangeBg,
+        },
+        point: {
+            width: theme.Form.Slider.sliderHandleWidth,
+            height: theme.Form.Slider.sliderHandleHeight,
+            borderRadius: theme.Form.Slider.sliderHandleHeight / 2,
+            position: 'absolute',
+            backgroundColor: theme.Form.Slider.sliderHandleBg,
+            borderWidth: border.Width['border-3'],
+            borderColor: theme.Form.Slider.sliderHandleBorder,
+        },
+        disabled: { opacity: 0.6, mixBlendMode: 'luminosity' },
+        hovered: { backgroundColor: theme.Form.Slider.sliderHandleHoverBg },
+    };
+});

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

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './Slider';

package/dist/components/Slider/index.js

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

package/dist/components/Tabs/TabItem/TabItem.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type SvgSource } from '../../../utils/SvgUniversal';
+export interface TabItemProps {
+    /** SVG-иконка */
+    Icon?: SvgSource;
+    /** Текст для отображения */
+    label: string;
+    /** Компонент бейджа **/
+    badge?: ReactNode;
+    /** Индекс этой табы **/
+    index: number;
+    /** Обработчик нажатия на кнопку */
+    onPress: (index: number) => void;
+    /** Признак доступности компонента */
+    disabled?: boolean;
+    /** Признак активен ли компонент */
+    active?: boolean;
+    onLayout?: ViewProps['onLayout'];
+}
+export declare const TabItem: import("react").NamedExoticComponent<TabItemProps>;
+export declare enum TestId {
+    Container = "TabItem_Container"
+}

package/dist/components/Tabs/TabItem/TabItem.js

@@ -0,0 +1,82 @@
+import { memo, useCallback } from 'react';
+import { Text, Pressable, View } from 'react-native';
+import { SvgUniversal } from '../../../utils/SvgUniversal';
+import { makeStyles } from '../../../utils/makeStyles';
+// Часть навигационного компонента Tabs
+// @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=888-13076&t=hIQjdrqPKK8BWYev-4
+//
+export const TabItem = memo(({ Icon, label, badge, index, onPress, disabled, active, onLayout }) => {
+    const styles = useStyles();
+    const getIconColor = useCallback((pressed) => {
+        if (disabled) {
+            return styles.disabledIcon.color;
+        }
+        if (pressed) {
+            return styles.pressedIcon.color;
+        }
+        if (active) {
+            return styles.activeIcon.color;
+        }
+        return styles.icon.color;
+    }, [disabled, active, styles]);
+    return (<Pressable accessibilityRole='button' disabled={disabled} testID={TestId.Container + index} onLayout={onLayout} onPress={() => onPress(index)}>
+        {({ pressed }) => (<View style={[
+                styles.container,
+                pressed && styles.pressedContainer,
+                active && styles.activeContainer,
+                disabled && styles.disabledContainer,
+            ]}>
+            {Icon ? (<SvgUniversal color={getIconColor(pressed)} height={styles.icon.height} source={Icon} width={styles.icon.width}/>) : null}
+            <Text numberOfLines={1} style={[
+                styles.text,
+                active && styles.activeText,
+                pressed && styles.pressedText,
+                disabled && styles.disabledText,
+            ]}>
+              {label}
+            </Text>
+            {badge}
+          </View>)}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+    container: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: theme.Misc.Badge.badgeHeight +
+            theme.Panel.TabView.tabviewHeaderPaddingTopBottom * 2,
+        gap: theme.General.inlineSpacing,
+        paddingHorizontal: theme.Panel.TabView.tabviewHeaderPaddingLeftRight,
+        paddingVertical: theme.Panel.TabView.tabviewHeaderPaddingTopBottom,
+        backgroundColor: theme.Panel.TabView.tabviewHeaderBg,
+    },
+    pressedContainer: {
+        backgroundColor: theme.Panel.TabView.tabviewHeaderHoverBg,
+    },
+    activeContainer: {
+        backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBg,
+    },
+    disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' },
+    icon: {
+        width: theme.Menu.Item.menuitemSubmenuIconFontSize,
+        height: theme.Menu.Item.menuitemSubmenuIconFontSize,
+        color: theme.Panel.TabView.tabviewHeaderTextColor,
+    },
+    pressedIcon: { color: theme.Panel.TabView.tabviewHeaderHoverTextColor },
+    activeIcon: { color: theme.Panel.TabView.tabviewHeaderActiveTextColor },
+    disabledIcon: { color: theme.Button.Disabled.disabledButtonTextColor },
+    text: {
+        fontFamily: fonts.primary,
+        fontSize: typography.Size['text-base'],
+        verticalAlign: 'middle',
+        includeFontPadding: false,
+        color: theme.Panel.TabView.tabviewHeaderTextColor,
+    },
+    pressedText: { color: theme.Panel.TabView.tabviewHeaderHoverTextColor },
+    activeText: { color: theme.Panel.TabView.tabviewHeaderActiveTextColor },
+    disabledText: { color: theme.Button.Disabled.disabledButtonTextColor },
+}));
+export var TestId;
+(function (TestId) {
+    TestId["Container"] = "TabItem_Container";
+})(TestId || (TestId = {}));

package/dist/components/Tabs/TabItem/index.d.ts

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

package/dist/components/Tabs/TabItem/index.js

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

package/dist/components/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface TabPanelProps {
+    /** Текущий активный индекс */
+    activeIndex: number;
+    /** Индекс этой панели **/
+    index: number;
+    children?: ReactNode;
+}
+export declare const TabPanel: import("react").NamedExoticComponent<TabPanelProps>;

package/dist/components/Tabs/TabPanel/TabPanel.js

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+// Часть навигационного компонента Tabs
+// Для упрощения связанного с табами контекста в верстке
+//
+export const TabPanel = memo(({ activeIndex, index, children, ...rest }) => {
+    if (activeIndex !== index) {
+        return null;
+    }
+    return <View {...rest}>{children}</View>;
+});

package/dist/components/Tabs/TabPanel/index.d.ts

@@ -0,0 +1 @@
+export { TabPanel, type TabPanelProps } from './TabPanel';

package/dist/components/Tabs/TabPanel/index.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { type AccessibilityProps, type ViewProps } from 'react-native';
+import { type TabItemProps } from './TabItem/TabItem';
+export interface TabsProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Список табов см. компонент TabItem */
+    items: Array<Pick<TabItemProps, 'Icon' | 'label' | 'badge'> & {
+        key: string;
+    }>;
+    /** Текущий активный индекс */
+    activeIndex: number;
+    /** Функция вызывается при нажатии на таб, при этом сам таб не переключается */
+    onChange: (index: number) => void;
+    /** Признак доступности компонента */
+    disabled?: boolean;
+}
+export declare const Tabs: import("react").NamedExoticComponent<TabsProps>;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,48 @@
+import { memo, useEffect, useState } from 'react';
+import { View, } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { makeStyles } from '../../utils/makeStyles';
+import { TabItem } from './TabItem/TabItem';
+// Навигационный компонент Tabs
+// @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=888-13076&t=hIQjdrqPKK8BWYev-4
+//
+export const Tabs = memo(({ items, disabled = false, activeIndex, onChange, testID, ...rest }) => {
+    const styles = useStyles();
+    const [tabsLayouts, setTabsLayouts] = useState({});
+    const lineSharedValue = useSharedValue(activeIndex);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            width: interpolate(lineSharedValue.value, items.map((_, index) => index), items.map(({ key }) => tabsLayouts[key]?.width ?? 0)),
+            left: interpolate(lineSharedValue.value, items.map((_, index) => index), items.map(({ key }) => tabsLayouts[key]?.x ?? 0)),
+        };
+    });
+    useEffect(() => {
+        lineSharedValue.value = withTiming(activeIndex);
+    }, [activeIndex, tabsLayouts, lineSharedValue, items]);
+    const handleTabLayout = (e, key) => {
+        e.persist();
+        setTabsLayouts((prevTabsLayouts) => {
+            return { ...prevTabsLayouts, [key]: e.nativeEvent.layout };
+        });
+    };
+    return (<View {...rest} style={styles.container} testID={testID}>
+        {items.map((prop, index) => {
+            return (<TabItem {...prop} active={activeIndex === index} disabled={disabled} index={index} key={prop.key} onLayout={(e) => handleTabLayout(e, prop.key)} onPress={onChange}/>);
+        })}
+        <Animated.View style={[styles.line, animatedStyles]}/>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border }) => ({
+    container: {
+        flexDirection: 'row',
+        gap: theme.Panel.TabView.tabviewHeaderSpacing,
+        borderBottomWidth: border.Width.border,
+        borderColor: theme.Panel.TabView.tabviewNavBorderColor,
+    },
+    line: {
+        position: 'absolute',
+        bottom: 0,
+        height: border.Width['border-2'],
+        backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBorderColor,
+    },
+}));

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

@@ -0,0 +1,2 @@
+export { TabPanel, type TabPanelProps } from './TabPanel';
+export { Tabs, type TabsProps } from './Tabs';

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,33 @@
+import { type ViewStyle, type StyleProp, type AccessibilityProps, type ViewProps } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface TagProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Текст */
+    text: string;
+    /** true, если необходимо полное скругление углов компонента */
+    rounded?: boolean;
+    /**
+     *  Выбор варианта стиля компонента
+     *  @default 'basic'
+     */
+    severity?: 'basic' | 'info' | 'success' | 'warning' | 'danger' | 'secondary';
+    /**
+     * Показать или скрыть иконку внутри компонента
+     * @default true
+     */
+    showIcon?: boolean;
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: StyleProp<ViewStyle>;
+    /** SVG-иконка */
+    Icon?: SvgSource;
+}
+/**
+ * Используется для маркировки элементов интерфейса
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
+ */
+export declare const Tag: import("react").NamedExoticComponent<TagProps>;
+export declare const TagTestId: {
+    root: string;
+    innerContainer: string;
+    icon: string;
+    text: string;
+};