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

package/dist/components/Tag/Tag.js

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { View, Text, } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Используется для маркировки элементов интерфейса
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
+ */
+export const Tag = memo(({ text, rounded, severity = 'basic', showIcon = true, style, Icon, testID, ...rest }) => {
+    const styles = useStyles();
+    return (<View style={style} testID={testID || TagTestId.root} {...rest}>
+        <View style={[
+            styles.container,
+            styles[severity],
+            rounded && styles.roundedContainer,
+        ]} testID={TagTestId.innerContainer}>
+          {showIcon && Icon ? (<SvgUniversal color={styles[`text${severity}`].color} height={styles.icon.height} source={Icon} testID={TagTestId.icon} width={styles.icon.width}/>) : null}
+          <Text numberOfLines={1} style={[styles.text, styles[`text${severity}`]]} testID={TagTestId.text}>
+            {text}
+          </Text>
+        </View>
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border, spacing, typography, fonts }) => ({
+    container: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.Gap['gap-1'],
+        paddingHorizontal: theme.Misc.Tag.tagPadding,
+        height: theme.Misc.Tag.tagHeight,
+        borderRadius: border.Radius['rounded-lg'],
+    },
+    roundedContainer: { borderRadius: border.Radius['rounded-full'] },
+    icon: {
+        width: theme.Misc.Tag.tagFontSize,
+        height: theme.Misc.Tag.tagFontSize,
+        color: theme.Misc.Badge.badgeTextColor,
+    },
+    text: {
+        flexShrink: 1,
+        fontSize: typography.Size['text-xs'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.primary,
+    },
+    textbasic: { color: theme.Misc.Badge.badgeTextColor },
+    textinfo: { color: theme.Misc.Badge.badgeInfoTextColor },
+    textwarning: { color: theme.Misc.Badge.badgeWarningTextColor },
+    textsuccess: { color: theme.Misc.Badge.badgeSuccessTextColor },
+    textdanger: { color: theme.Misc.Badge.badgeDangerTextColor },
+    textsecondary: { color: theme.Misc.Badge.badgeTextColor },
+    basic: { backgroundColor: theme.Misc.Badge.badgeBg },
+    info: { backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg },
+    success: {
+        backgroundColor: theme.Button.Severity.Success.Basic.successButtonBg,
+    },
+    warning: {
+        backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonBg,
+    },
+    danger: {
+        backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg,
+    },
+    secondary: { backgroundColor: theme.Surface['surface-border'] },
+}));
+export const TagTestId = {
+    root: 'Tag',
+    innerContainer: 'Tag.innerContainer',
+    icon: 'Tag.icon',
+    text: 'Tag.text',
+};

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

@@ -0,0 +1 @@
+export { Tag, type TagProps } from './Tag';

package/dist/components/Tag/index.js

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

package/dist/components/Timer/Timer.d.ts

@@ -0,0 +1,18 @@
+interface TimerProps {
+    /**
+     * Время в секундах, которое нужно отсчитать.
+     * Min - 1, Max - 99
+     */
+    countFrom: number;
+    /** Функция, которая будет вызвана по завершению отсчета */
+    onFinish?: () => void;
+}
+/**
+ * Таймер для использования внутри ui kit, не экспортируется для внешнего использования
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=270-1514
+ */
+export declare const Timer: import("react").NamedExoticComponent<TimerProps>;
+export declare enum TestId {
+    Container = "TimerContainer"
+}
+export {};

package/dist/components/Timer/Timer.js

@@ -0,0 +1,74 @@
+import { memo, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { cancelAnimation, Easing, useAnimatedProps, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+import { makeStyles } from '../../utils/makeStyles';
+import { TimerFlip } from './TimerFlip';
+import { COUNTER_SIZE } from './constants';
+// eslint-disable-next-line import-x/no-deprecated
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const BORDER_WIDTH = 2;
+/**
+ * Таймер для использования внутри ui kit, не экспортируется для внешнего использования
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=270-1514
+ */
+export const Timer = memo(({ countFrom, onFinish }) => {
+    const styles = useStyles();
+    const circleAnimation = useSharedValue(0);
+    const [currentTimerValue, setCurrentTimerValue] = useState(countFrom);
+    const circumferenceRadius = COUNTER_SIZE / 2 - BORDER_WIDTH;
+    const circumferenceLength = 2 * Math.PI * circumferenceRadius;
+    const center = COUNTER_SIZE / 2;
+    const circleAnimatedProps = useAnimatedProps(() => ({
+        strokeDashoffset: -circleAnimation.value * circumferenceLength,
+    }));
+    useEffect(() => {
+        setCurrentTimerValue(countFrom);
+        circleAnimation.value = 0;
+        circleAnimation.value = withTiming(1, {
+            duration: countFrom * 1000,
+            easing: Easing.linear,
+        });
+        return () => cancelAnimation(circleAnimation);
+    }, [circleAnimation, countFrom]);
+    useEffect(() => {
+        let timeoutId;
+        if (currentTimerValue > 0) {
+            timeoutId = setTimeout(() => setCurrentTimerValue((prev) => prev - 1), 1000);
+        }
+        return () => clearTimeout(timeoutId);
+    }, [currentTimerValue, onFinish]);
+    useEffect(() => {
+        if (currentTimerValue === 0) {
+            onFinish?.();
+        }
+    }, [currentTimerValue, onFinish]);
+    return (<View style={styles.container} testID={TestId.Container}>
+      <Svg style={styles.svgContainer}>
+        <AnimatedCircle animatedProps={circleAnimatedProps} cx={center} cy={center} fill='none' origin={[center, center]} r={circumferenceRadius} rotation={-90} stroke={styles.circle.color} strokeDasharray={circumferenceLength} strokeLinecap='round' strokeWidth={BORDER_WIDTH}/>
+      </Svg>
+
+      <TimerFlip value={currentTimerValue}/>
+    </View>);
+});
+const useStyles = makeStyles(({ typography }) => ({
+    container: {
+        overflow: 'hidden',
+        width: COUNTER_SIZE,
+        height: COUNTER_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    svgContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: COUNTER_SIZE,
+        height: COUNTER_SIZE,
+    },
+    circle: { color: typography.Color.Surface['text-surface-0'] },
+}));
+export var TestId;
+(function (TestId) {
+    TestId["Container"] = "TimerContainer";
+})(TestId || (TestId = {}));

package/dist/components/Timer/TimerFlip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TimerFlipProps {
+    readonly value: number;
+    readonly duration?: number;
+}
+export declare const TimerFlip: React.NamedExoticComponent<TimerFlipProps>;
+export {};

package/dist/components/Timer/TimerFlip.js

@@ -0,0 +1,69 @@
+import React, { memo, useEffect, useState } from 'react';
+import { View, Text } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, } from 'react-native-reanimated';
+import { makeStyles } from '../../utils/makeStyles';
+import { COUNTER_SIZE } from './constants';
+export const TimerFlip = memo(({ value, duration = 300 }) => {
+    const styles = useStyles();
+    const [currentValue, setCurrentValue] = useState(value);
+    const [nextValue, setNextValue] = useState(value);
+    const progress = useSharedValue(0);
+    const currentStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: progress.value * COUNTER_SIZE }],
+        opacity: 1 - progress.value,
+    }));
+    const nextStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: progress.value * COUNTER_SIZE }],
+        opacity: progress.value,
+        bottom: COUNTER_SIZE,
+    }));
+    useEffect(() => {
+        if (nextValue === currentValue && value !== currentValue) {
+            setNextValue(null);
+            progress.value = 0;
+        }
+    }, [currentValue, nextValue, progress, value]);
+    useEffect(() => {
+        if (value === currentValue || nextValue !== null)
+            return;
+        setNextValue(value);
+        progress.value = withTiming(1, { duration }, (finished) => {
+            if (finished) {
+                runOnJS(setCurrentValue)(value);
+            }
+        });
+    }, [value, currentValue, duration, progress, nextValue]);
+    return (<View style={styles.container}>
+      {nextValue !== null && (<Animated.View style={[styles.textWrapper, nextStyle]}>
+          <Text style={styles.text}>{nextValue}</Text>
+        </Animated.View>)}
+      <Animated.View style={[styles.textWrapper, currentStyle]}>
+        <Text style={styles.text}>{currentValue}</Text>
+      </Animated.View>
+    </View>);
+});
+const useStyles = makeStyles(({ typography, fonts }) => ({
+    container: {
+        overflow: 'hidden',
+        width: COUNTER_SIZE,
+        height: COUNTER_SIZE,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    textWrapper: {
+        height: COUNTER_SIZE,
+        width: COUNTER_SIZE,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+    },
+    text: {
+        fontSize: typography.Size['text-base'],
+        fontWeight: 700,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        color: typography.Color.Surface['text-surface-0'],
+        fontFamily: fonts.secondary,
+    },
+}));

package/dist/components/Timer/constants.d.ts

@@ -0,0 +1 @@
+export declare const COUNTER_SIZE = 28;

package/dist/components/Timer/constants.js

@@ -0,0 +1 @@
+export const COUNTER_SIZE = 28;

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,45 @@
+import { type AccessibilityProps, type ViewProps, type ViewStyle } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface ToggleButtonProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Обработчик нажатия на кнопку */
+    onPress: () => void;
+    /**
+     * true, если необходим компонент в активном состоянии
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Управление доступностью компонента
+     * @default false
+     */
+    disabled?: boolean;
+    /** Отображение только иконки без текста */
+    iconOnly?: boolean;
+    /**
+     * Выбор позиции иконки. 'left' - иконка слева, 'right' - иконка справа, null - иконка скрыта
+     * @default 'left'
+     */
+    iconPos?: 'left' | 'right' | null;
+    /** Текст на кнопке */
+    label?: string;
+    /**
+     * Выбор размера элемента
+     * @default 'base'
+     */
+    size?: 'xlarge' | 'large' | 'base' | 'small';
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: ViewStyle;
+    /** SVG-иконка */
+    Icon?: SvgSource;
+}
+/**
+ * Используется для выбора нескольких значений с помощью кнопки
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4821
+ */
+export declare const ToggleButton: import("react").NamedExoticComponent<ToggleButtonProps>;
+export declare const ToggleButtonTestId: {
+    root: string;
+    container: string;
+    text: string;
+    icon: string;
+};

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,85 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Pressable, Text, View, } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+import { useIconSize } from './hooks/useIconSize';
+import { useLabelSize } from './hooks/useLabelSize';
+import { useStateStyles } from './hooks/useStateStyles';
+/**
+ * Используется для выбора нескольких значений с помощью кнопки
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4821
+ */
+export const ToggleButton = memo(({ onPress, checked, disabled, iconOnly: iconOnlyProp, iconPos = 'left', label, size = 'base', style, Icon, testID, ...rest }) => {
+    const styles = useStyles();
+    const labelSize = useLabelSize(size);
+    const iconSize = useIconSize(size);
+    const [pressed, setPressed] = useState(false);
+    const stateStyles = useStateStyles(checked, disabled, pressed);
+    const iconOnly = useMemo(() => iconOnlyProp || !label, [iconOnlyProp, label]);
+    const icon = useMemo(() => {
+        if (!Icon) {
+            return null;
+        }
+        return (<SvgUniversal height={iconSize.height} source={Icon} style={stateStyles.label} testID={ToggleButtonTestId.icon} width={iconSize.width}/>);
+    }, [Icon, iconSize.height, iconSize.width, stateStyles.label]);
+    const onPressIn = useCallback(() => setPressed(true), []);
+    const onPressOut = useCallback(() => setPressed(false), []);
+    return (<Pressable disabled={disabled} style={[styles.container, style, stateStyles.borderContainer]} testID={testID || ToggleButtonTestId.root} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...rest}>
+        <View style={[
+            styles.contentContainer,
+            styles[size],
+            iconOnly && styles.iconOnly,
+            stateStyles.contentContainer,
+        ]} testID={ToggleButtonTestId.container}>
+          {iconOnly ? (icon) : (<>
+              {iconPos === 'left' && icon}
+              <Text style={[styles.label, labelSize, stateStyles.label]} testID={ToggleButtonTestId.text}>
+                {label}
+              </Text>
+              {Icon && iconPos === 'right' ? icon : null}
+            </>)}
+        </View>
+      </Pressable>);
+});
+const useStyles = makeStyles(({ theme, spacing, border, fonts }) => ({
+    container: {
+        alignSelf: 'flex-start',
+        borderRadius: border.Radius['rounded-full'],
+        borderWidth: border.Width.border,
+        overflow: 'hidden',
+    },
+    contentContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        borderRadius: border.Radius['rounded-full'],
+        paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+        paddingHorizontal: spacing.Padding['p-6'],
+        gap: spacing.Gap['gap-3'],
+    },
+    xlarge: { minHeight: theme.Button.Common.buttonHeightXL },
+    large: { minHeight: theme.Button.Common.buttonHeightLG },
+    base: {
+        minHeight: theme.Button.Common.buttonHeight,
+        paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight,
+        gap: theme.General.inlineSpacing,
+    },
+    small: {
+        minHeight: theme.Button.Common.buttonHeightSM,
+        paddingHorizontal: spacing.Padding['p-3'],
+        gap: theme.General.inlineSpacing,
+    },
+    iconOnly: {
+        aspectRatio: 1,
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+        justifyContent: 'center',
+    },
+    label: { flexShrink: 1, fontFamily: fonts.primary },
+}));
+export const ToggleButtonTestId = {
+    root: 'ToggleButton',
+    container: 'ToggleButton.container',
+    text: 'ToggleButton.text',
+    icon: 'ToggleButton.icon',
+};

package/dist/components/ToggleButton/hooks/useIconSize.d.ts

@@ -0,0 +1,14 @@
+import type { ToggleButtonProps } from '../ToggleButton';
+export declare const useIconSize: (size?: ToggleButtonProps["size"]) => {
+    width: number;
+    height: number;
+} | {
+    width: number;
+    height: number;
+} | {
+    width: number;
+    height: number;
+} | {
+    width: number;
+    height: number;
+};

package/dist/components/ToggleButton/hooks/useIconSize.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { makeStyles } from '../../../utils/makeStyles';
+export const useIconSize = (size = 'base') => {
+    const styles = useStyles();
+    return useMemo(() => {
+        return styles[size];
+    }, [size, styles]);
+};
+const useStyles = makeStyles(({ typography }) => ({
+    xlarge: {
+        width: typography.Size['text-4xl'],
+        height: typography.Size['text-4xl'],
+    },
+    large: {
+        width: typography.Size['text-2xl'],
+        height: typography.Size['text-2xl'],
+    },
+    base: {
+        width: typography.Size['text-xl'],
+        height: typography.Size['text-xl'],
+    },
+    small: {
+        width: typography.Size['text-base'],
+        height: typography.Size['text-base'],
+    },
+}));

package/dist/components/ToggleButton/hooks/useLabelSize.d.ts

@@ -0,0 +1,8 @@
+import type { ToggleButtonProps } from '../ToggleButton';
+export declare const useLabelSize: (size?: ToggleButtonProps["size"]) => ({
+    fontWeight: "600";
+    includeFontPadding: false;
+    verticalAlign: "middle";
+} | {
+    fontSize: number;
+})[];

package/dist/components/ToggleButton/hooks/useLabelSize.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { makeStyles } from '../../../utils/makeStyles';
+export const useLabelSize = (size = 'base') => {
+    const styles = useStyles();
+    return useMemo(() => {
+        return [styles.common, styles[size]];
+    }, [size, styles]);
+};
+const useStyles = makeStyles(({ typography }) => ({
+    common: {
+        fontWeight: '600',
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+    },
+    xlarge: { fontSize: typography.Size['text-2xl'] },
+    large: { fontSize: typography.Size['text-xl'] },
+    base: { fontSize: typography.Size['text-base'] },
+    small: { fontSize: typography.Size['text-sm'] },
+}));

package/dist/components/ToggleButton/hooks/useStateStyles.d.ts

@@ -0,0 +1,11 @@
+export declare const useStateStyles: (checked?: boolean, disabled?: boolean, pressed?: boolean) => {
+    borderContainer: (false | {
+        borderColor: string;
+    })[];
+    contentContainer: (false | {
+        backgroundColor: string;
+    })[];
+    label: (false | {
+        color: string;
+    })[];
+};

package/dist/components/ToggleButton/hooks/useStateStyles.js

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { makeStyles } from '../../../utils/makeStyles';
+export const useStateStyles = (checked = false, disabled = false, pressed = false) => {
+    const styles = useStyles();
+    const borderContainer = useMemo(() => [
+        styles.borderContainer,
+        pressed && styles.pressedBorderContainer,
+        checked && styles.checkedBorderContainer,
+        checked && pressed && styles.checkedPressedBorderContainer,
+        disabled && styles.disabledBorderContainer,
+    ], [
+        checked,
+        disabled,
+        pressed,
+        styles.borderContainer,
+        styles.checkedBorderContainer,
+        styles.checkedPressedBorderContainer,
+        styles.disabledBorderContainer,
+        styles.pressedBorderContainer,
+    ]);
+    const contentContainer = useMemo(() => [
+        styles.contentContainer,
+        pressed && styles.pressedContentContainer,
+        checked && styles.checkedContentContainer,
+        checked && pressed && styles.checkedPressedContentContainer,
+        disabled && styles.disabledContentContainer,
+    ], [
+        checked,
+        disabled,
+        pressed,
+        styles.checkedContentContainer,
+        styles.checkedPressedContentContainer,
+        styles.contentContainer,
+        styles.disabledContentContainer,
+        styles.pressedContentContainer,
+    ]);
+    const label = useMemo(() => [
+        styles.label,
+        pressed && styles.pressedLabel,
+        checked && styles.checkedLabel,
+        checked && pressed && styles.checkedPressedLabel,
+        disabled && styles.disabledLabel,
+    ], [
+        checked,
+        disabled,
+        pressed,
+        styles.checkedLabel,
+        styles.checkedPressedLabel,
+        styles.disabledLabel,
+        styles.label,
+        styles.pressedLabel,
+    ]);
+    return useMemo(() => ({ borderContainer, contentContainer, label }), [borderContainer, contentContainer, label]);
+};
+const useStyles = makeStyles(({ theme }) => ({
+    borderContainer: {
+        borderColor: theme.Form.ToggleButton.toggleButtonBorderColor,
+    },
+    pressedBorderContainer: {
+        borderColor: theme.Form.ToggleButton.toggleButtonHoverBg,
+    },
+    checkedBorderContainer: {
+        borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor,
+    },
+    checkedPressedBorderContainer: {
+        borderColor: theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor,
+    },
+    disabledBorderContainer: {
+        borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+        opacity: 0.6,
+    },
+    contentContainer: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg },
+    pressedContentContainer: {
+        backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg,
+    },
+    checkedContentContainer: {
+        backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg,
+    },
+    checkedPressedContentContainer: {
+        backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg,
+    },
+    disabledContentContainer: {
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+    },
+    label: { color: theme.Form.ToggleButton.toggleButtonTextColor },
+    pressedLabel: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor },
+    checkedLabel: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor },
+    checkedPressedLabel: {
+        color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor,
+    },
+    disabledLabel: { color: theme.Button.Disabled.disabledButtonTextColor },
+}));

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

@@ -0,0 +1 @@
+export { ToggleButton, type ToggleButtonProps } from './ToggleButton';

package/dist/components/ToggleButton/index.js

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

package/dist/components/Typography/Anchor.d.ts

@@ -0,0 +1,31 @@
+import { type StyleProp, type TextProps, type TextStyle } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface AnchorProps extends Omit<TextProps, 'onPressIn' | 'onPressOut'> {
+    readonly onPress: () => void;
+    /** true, если необходим базовый размер текста ссылки, равный 14 */
+    readonly base?: boolean;
+    /** true, если необходимо состояние посещенной ссылки. Меняет цвет */
+    readonly visited?: boolean;
+    /**
+     * Используется для рендера ссылки в составе другого текста.
+     * Если true, компонент оборачивается во фрагмент вместо обычного View
+     */
+    readonly noWrapper?: boolean;
+    /** Кастомные стили, применяемые к тексту */
+    readonly style?: StyleProp<TextStyle>;
+    readonly LeftIcon?: SvgSource;
+    readonly RightIcon?: SvgSource;
+}
+/**
+ * Используется для ссылок и якорей
+ * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS--DS-?node-id=1-271
+ */
+export declare const Anchor: import("react").MemoExoticComponent<({ onPress, base, visited, children, noWrapper, LeftIcon, RightIcon, testID, style, ...other }: AnchorProps) => import("react").JSX.Element>;
+export declare const AnchorTestId: {
+    root: string;
+    leftPressable: string;
+    rightPressable: string;
+    leftIcon: string;
+    rightIcon: string;
+    text: string;
+};