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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 CDEK-IT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,151 @@
+# react-native-ui-kit
+
+Репозиторий UI kit на основе Prime Faces, Prime Flex для React Native
+
+## Installation
+
+```shell
+yarn add --save-exact @cdek-it/react-native-prime-ui-kit
+yarn add react react-native @tabler/icons-react-native react-native-svg react-native-reanimateds
+```
+
+## Шрифты
+
+UI kit использует следующие виды шрифтов.
+
+| Тип шрифта  | Используемые начертания                        | Рекомендуемый шрифт | Рекомендуемый аналог |
+| ----------- | ---------------------------------------------- | ------------------- | -------------------- |
+| `primary`   | – regular<br/>– demibold<br/>– demibold italic | TT Fellows          | PT Sans              |
+| `secondary` | – regular<br/>– bold                           | PT Sans             | —                    |
+
+Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать
+отдельно. После подключения шрифтов в проект, необходимо указать их в
+`ThemeContextProvider`.
+
+```tsx
+<ThemeContextProvider
+  fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
+/>
+```
+
+### Пример подключения шрифтов с помощью expo-fonts через плагин
+
+```ts
+[
+  'expo-font',
+  {
+    android: {
+      fonts: [
+        {
+          fontFamily: 'TT Fellows',
+          fontDefinitions: [
+            {
+              path: './assets/fonts/TTFellows-DemiBoldItalic.ttf',
+              weight: 600,
+              style: 'italic',
+            },
+            {
+              path: './assets/fonts/TTFellows-DemiBold.ttf',
+              weight: 600,
+            },
+            { path: './assets/fonts/TTFellows-Regular.ttf', weight: 400 },
+          ],
+        },
+        {
+          fontFamily: 'PT Sans',
+          fontDefinitions: [
+            { path: './assets/fonts/PTSans-Bold.ttf', weight: 700 },
+            { path: './assets/fonts/PTSans-Regular.ttf', weight: 400 },
+          ],
+        },
+      ],
+    },
+  },
+],
+```
+
+### Ручная установка
+
+#### Android
+
+1. Скопировать нужные шрифты в директорию `android/app/src/main/res/font`
+2. Создать XML-ресурс для каждого шрифта
+
+   ```xml
+    <!-- xml_pt_sans.xml -->
+   <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+     <font app:font="@font/pt_sans_bold" app:fontStyle="normal" app:fontWeight="700"/>
+     <font app:font="@font/pt_sans_regular" app:fontStyle="normal" app:fontWeight="400"/>
+   </font-family>
+   ```
+
+   ```xml
+   <!-- xml_tt_fellows.xml -->
+   <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
+   <font app:font="@font/tt_fellows_demi_bold_italic" app:fontStyle="italic" app:fontWeight="600"/>
+   <font app:font="@font/tt_fellows_demi_bold" app:fontStyle="normal" app:fontWeight="600"/>
+   <font app:font="@font/tt_fellows_regular" app:fontStyle="normal" app:fontWeight="400"/>
+   </font-family>
+   ```
+
+3. Добавить в метод `onCreate()` класса
+   [MainApplication](./android/app/src/main/java/ru/cdek/uikit/prime/MainApplication.kt)
+   следующий код:
+
+   ```kotlin
+    override fun onCreate() {
+      super.onCreate()
+
+      //подключение шрифтов
+      ReactFontManager.getInstance().addCustomFont(this, "TT Fellows", R.font.xml_tt_fellows)
+      ReactFontManager.getInstance().addCustomFont(this, "PT Sans", R.font.xml_pt_sans)
+
+      // остальной код...
+    }
+   ```
+
+#### iOS
+
+1. Добавить шрифты в проект Xcode
+
+   Для этого открыть Xcode вашего проекта, создать новую группу Resources
+   (опционально), перетащить туда файлы с шрифтами.
+
+   Можно выбрать Copy files или Reference files, на ваш выбор
+
+   ![xcode-installation](./xcode-installation.png)
+
+2. Добавить информацию о шрифтах в [Info.plist](./ios/CDEKUI/Info.plist)
+
+   ```xml
+   <key>UIAppFonts</key>
+   <array>
+   <string>TTFellows-DemiBold.ttf</string>
+   <string>TTFellows-DemiBoldItalic.ttf</string>
+   <string>TTFellows-Regular.ttf</string>
+   <string>PTSans-Bold.ttf</string>
+   <string>PTSans-Regular.ttf</string>
+   </array>
+   ```
+
+## Dependencies
+
+Для использования данной библиотеки необходимо:
+
+- react версии - начиная с 18 major версии (от 18.0.0)
+- react-native - любой версии(оптимально - от 0.74)
+- @tabler/icons-react-native - начиная с 3 major версии(от 3.0.0)
+- react-native-svg - начиная с 15 major версии(от 15.0.0)
+- react-native-reanimated - начиная с 3 major версии(от 3.0.0)
+
+## Development
+
+`yarn install` - установка зависимостей `yarn start` - запуск Metro Bundler для
+Storybook `yarn ios` - запуск Storybook на iOS `yarn android` - запуск Storybook
+на Android\
+
+Storybook проект создан с помощью Expo
+
+### Макеты
+
+[https://developer.cdek.ru/design-system](https://developer.cdek.ru/design-system)

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface AccordionProps extends ViewProps {
+    /** Иконка слева от заголовка */
+    readonly Icon?: SvgSource;
+    /** Текст заголовка */
+    readonly title: string;
+    /** Состояние при первом рендере. true - контент раскрыт, false - контент свернут */
+    readonly isInitiallyExpanded?: boolean;
+    /** Наличие разделитель. Когда true, верхняя граница заголовка становится разделителем */
+    readonly withSeparator?: boolean;
+    /** Отключенное состояние. Когда true компонент рендерится в соответствии со значением isInitiallyExpanded и не реагирует на нажатия */
+    readonly disabled?: boolean;
+    /** Дополнительный элемент справа от заголовка */
+    readonly titleExtra?: React.ReactNode;
+    readonly children: React.ReactNode;
+}
+/**
+ * Компонент Гармошка - умеет скрывать и раскрывать контент по нажатию на заголовок
+ * @param title - Текст заголовка
+ * @param Icon - Иконка слева от заголовка
+ * @param isInitiallyExpanded - Состояние при первом рендере. true - контент раскрыт, false - контент свернут
+ * @param extra - Дополнительный элемент справа от заголовка
+ * @param withSeparator - Наличие разделитель. Когда true, верхняя граница заголовка становится разделителем
+ * @param disabled - Отключенное состояние. Когда true компонент рендерится в соответствии со значением isInitiallyExpanded и не реагирует на нажатия
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace--DS-?node-id=1207-1852&m=dev
+ */
+export declare const Accordion: React.FC<AccordionProps>;
+export declare const AccordionTestIds: {
+    component: string;
+    header: string;
+    arrow: string;
+    icon: string;
+    titleExtra: string;
+    content: string;
+    contentWrapper: string;
+    separator: string;
+};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,103 @@
+import { IconChevronRight } from '@tabler/icons-react-native';
+import React, { useCallback, useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Компонент Гармошка - умеет скрывать и раскрывать контент по нажатию на заголовок
+ * @param title - Текст заголовка
+ * @param Icon - Иконка слева от заголовка
+ * @param isInitiallyExpanded - Состояние при первом рендере. true - контент раскрыт, false - контент свернут
+ * @param extra - Дополнительный элемент справа от заголовка
+ * @param withSeparator - Наличие разделитель. Когда true, верхняя граница заголовка становится разделителем
+ * @param disabled - Отключенное состояние. Когда true компонент рендерится в соответствии со значением isInitiallyExpanded и не реагирует на нажатия
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace--DS-?node-id=1207-1852&m=dev
+ */
+export const Accordion = ({ Icon, title, isInitiallyExpanded: initiallyExpanded = false, withSeparator = false, disabled = false, titleExtra, testID, children, ...rest }) => {
+    const styles = useStyles();
+    const contentHeight = useSharedValue(0);
+    const contentOpenFraction = useSharedValue(initiallyExpanded ? 1 : 0);
+    const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+    const onLayout = useCallback((event) => {
+        contentHeight.value = event.nativeEvent.layout.height;
+    }, [contentHeight]);
+    const toggle = useCallback(() => {
+        contentOpenFraction.value = withTiming(contentOpenFraction.value > 0 ? 0 : 1);
+        setIsExpanded((value) => !value);
+    }, [contentOpenFraction]);
+    const arrowAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [
+            {
+                rotate: `${interpolate(contentOpenFraction.value, [0, 1], [0, 90])}deg`,
+            },
+        ],
+    }));
+    const contentAnimatedStyle = useAnimatedStyle(() => ({
+        height: interpolate(contentOpenFraction.value, [0, 1], [0, contentHeight.value]),
+        opacity: contentOpenFraction.value,
+    }));
+    return (<View style={[styles.component, withSeparator ? styles.separator : {}]} testID={testID || AccordionTestIds.component} {...rest}>
+      <Pressable accessible accessibilityLabel={title} accessibilityRole='button' accessibilityState={isExpanded ? { expanded: true } : {}} disabled={disabled} style={[styles.header, disabled ? styles.disabled : {}]} testID={AccordionTestIds.header} onPress={toggle}>
+        <Animated.View style={arrowAnimatedStyle} testID={AccordionTestIds.arrow}>
+          <IconChevronRight {...styles.icon}/>
+        </Animated.View>
+        {Icon ? (<SvgUniversal source={Icon} {...styles.icon} testID={AccordionTestIds.icon}/>) : null}
+        <Text style={styles.title}>{title}</Text>
+        {titleExtra ? (<View testID={AccordionTestIds.titleExtra}>{titleExtra}</View>) : null}
+      </Pressable>
+
+      <Animated.View accessibilityElementsHidden={!isExpanded} importantForAccessibility={isExpanded ? 'yes' : 'no-hide-descendants'} style={[styles.contentAnimated, contentAnimatedStyle]} testID={AccordionTestIds.content}>
+        <View style={styles.contentWrapper} testID={AccordionTestIds.contentWrapper} onLayout={onLayout}>
+          {children}
+        </View>
+      </Animated.View>
+    </View>);
+};
+export const AccordionTestIds = {
+    component: 'Accordion',
+    header: 'Header',
+    arrow: 'Arrow',
+    icon: 'TitleIcon',
+    titleExtra: 'Extra',
+    content: 'Content',
+    contentWrapper: 'ContentWrapper',
+    separator: 'Separator',
+};
+const useStyles = makeStyles(({ theme, fonts }) => ({
+    component: { width: '100%' },
+    header: {
+        paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom,
+        gap: 7,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: theme.Panel.Accordion.accordionHeaderBg,
+    },
+    icon: {
+        width: 17.5,
+        height: 17.5,
+        color: theme.Panel.Accordion.accordionHeaderTextColor,
+    },
+    title: {
+        fontSize: 15.75,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontWeight: 700,
+        color: theme.Panel.Accordion.accordionHeaderTextColor,
+        fontFamily: fonts.secondary,
+    },
+    contentAnimated: { overflow: 'hidden' },
+    contentWrapper: {
+        position: 'absolute',
+        width: '100%',
+        paddingLeft: theme.Panel.Accordion.accordionContentPaddingLeft,
+        paddingTop: theme.Panel.Accordion.accordionContentPaddingTop,
+        paddingRight: theme.Panel.Accordion.accordionContentPaddingRight,
+        paddingBottom: theme.Panel.Accordion.accordionContentPaddingBottom,
+    },
+    separator: {
+        borderTopColor: theme.Panel.Accordion.accordionHeaderBorderColor,
+        borderTopWidth: 1,
+    },
+    disabled: { mixBlendMode: 'luminosity', opacity: 0.6 },
+}));

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

@@ -0,0 +1 @@
+export { type AccordionProps, Accordion } from './Accordion';

package/dist/components/Accordion/index.js

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,96 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type AccessibilityProps, type ColorValue, Image, type ImageSourcePropType, type ViewStyle } from 'react-native';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export type AvatarSize = 'xlarge' | 'large' | 'normal';
+interface AvatarBase extends AccessibilityProps {
+    /**
+     * Выбор размера компонента
+     * Можно передать число для кастомного размера аватара
+     * @default 'normal'
+     */
+    size?: AvatarSize | number;
+    /**
+     * Выбор форм-фактора компонента
+     * @default 'circle'
+     */
+    shape?: 'square' | 'circle';
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: ViewStyle;
+    testID?: string;
+    /** Callback функция при ошибке загрузки картинки */
+    onError?: ComponentProps<typeof Image>['onError'];
+}
+interface LabelAvatar extends AvatarBase {
+    /** Тип контента внутри компонента */
+    type: 'label';
+    /** Текст лейбла */
+    children: string;
+    /** Картинка */
+    source?: never;
+    /** SVG-иконка */
+    Icon?: never;
+    iconColor?: never;
+}
+interface IconAvatar extends AvatarBase {
+    /** Тип контента внутри компонента */
+    type: 'icon';
+    /** Текст лейбла */
+    children?: never;
+    /** Картинка */
+    source?: never;
+    /** SVG-иконка */
+    Icon: SvgSource;
+    /** Цвет иконки */
+    iconColor?: ColorValue;
+}
+/**
+ * Свойства компонента с картинкой внутри
+ */
+interface ImageAvatar extends AvatarBase {
+    /** Тип контента внутри компонент */
+    type: 'image';
+    /** Картинка */
+    source?: ImageSourcePropType;
+    /** Текст лейбла */
+    children?: never;
+    /** SVG-иконка */
+    Icon?: never;
+    iconColor?: never;
+}
+interface BadgeAvatar {
+    /** Компонент бейджа **/
+    badge: ReactNode;
+    /** Показывать бейдж или нет */
+    showBadge?: boolean;
+}
+interface NoBadgeAvatar {
+    /** Компонент бейджа **/
+    badge?: never;
+    /** Показывать бейдж или нет */
+    showBadge?: never;
+}
+export type AvatarProps = (LabelAvatar | IconAvatar | ImageAvatar) & (BadgeAvatar | NoBadgeAvatar);
+/**
+ * Компонент Avatar
+ * @param type - Тип контента внутри компонента
+ * @param size - Выбор размера компонента
+ * @param shape - Выбор форм-фактора компонента
+ * @param style - Дополнительная стилизация для контейнера компонента
+ * @param children - Текст лейбла
+ * @param source - Картинка
+ * @param Icon - Иконка из набора Tabler
+ * @param badge - Компонент бейджа
+ * @param showBadge - Показывать бейдж или нет
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4972&m=dev
+ */
+export declare const Avatar: import("react").NamedExoticComponent<AvatarProps>;
+export declare const AvatarTestId: {
+    root: string;
+    icon: string;
+    container: string;
+    text: string;
+    image: string;
+    badgeContainer: string;
+    badgeInnerContainer: string;
+};
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,121 @@
+import { memo, useCallback, useEffect, useMemo, useState, } from 'react';
+import { Image, Text, useWindowDimensions, View, } from 'react-native';
+import { SvgUniversal } from '../../utils/SvgUniversal';
+import { makeStyles } from '../../utils/makeStyles';
+const SizeMap = {
+    normal: 28,
+    large: 35,
+    xlarge: 49,
+};
+const ICON_MULTIPLIER = 0.43;
+/**
+ * Компонент Avatar
+ * @param type - Тип контента внутри компонента
+ * @param size - Выбор размера компонента
+ * @param shape - Выбор форм-фактора компонента
+ * @param style - Дополнительная стилизация для контейнера компонента
+ * @param children - Текст лейбла
+ * @param source - Картинка
+ * @param Icon - Иконка из набора Tabler
+ * @param badge - Компонент бейджа
+ * @param showBadge - Показывать бейдж или нет
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4972&m=dev
+ */
+export const Avatar = memo(({ type, size = 'normal', shape = 'circle', style, children, source, Icon, badge, showBadge = true, testID, onError, iconColor, }) => {
+    const styles = useStyles();
+    const window = useWindowDimensions();
+    const [badgeLayout, setBadgeLayout] = useState();
+    const calculatedSize = useMemo(() => {
+        if (typeof size === 'number') {
+            return size;
+        }
+        return SizeMap[size];
+    }, [size]);
+    const sizeStyle = useMemo(() => ({ width: calculatedSize, height: calculatedSize }), [calculatedSize]);
+    const badgeContainerStyle = useMemo(() => ({
+        left: badgeLayout?.width
+            ? Math.round(calculatedSize - badgeLayout.width / 2)
+            : 0,
+        width: badgeLayout?.width ? badgeLayout.width : window.width,
+        height: badgeLayout?.width ? 'auto' : 0,
+    }), [badgeLayout?.width, calculatedSize, window.width]);
+    const handleBadgeLayout = useCallback((e) => setBadgeLayout(e.nativeEvent.layout), []);
+    const icon = useMemo(() => {
+        if (type !== 'icon') {
+            return null;
+        }
+        let iconSize = styles.icon.width;
+        if (typeof size === 'number' && size > SizeMap.xlarge) {
+            iconSize = Math.round(calculatedSize * ICON_MULTIPLIER);
+        }
+        else if (size === 'xlarge') {
+            iconSize = styles.iconXLarge.width;
+        }
+        return (<SvgUniversal color={iconColor || styles.icon.color} height={iconSize} source={Icon} testID={AvatarTestId.icon} width={iconSize}/>);
+    }, [Icon, calculatedSize, iconColor, size, styles, type]);
+    useEffect(() => {
+        if (badge) {
+            setBadgeLayout(undefined);
+        }
+    }, [badge]);
+    return (<View collapsable={false} testID={testID || AvatarTestId.root}>
+        <View style={[
+            styles.container,
+            sizeStyle,
+            type !== 'image' && styles.backgroundFill,
+            shape === 'circle' && styles.circle,
+            style,
+        ]} testID={AvatarTestId.container}>
+          {type === 'label' && (<Text ellipsizeMode='clip' numberOfLines={1} style={styles.text} testID={AvatarTestId.text}>
+              {children}
+            </Text>)}
+
+          {icon}
+
+          {type === 'image' && (<Image resizeMode='cover' source={source} style={sizeStyle} testID={AvatarTestId.image} onError={onError}/>)}
+        </View>
+
+        {badge && showBadge ? (<View style={[styles.badgeContainer, badgeContainerStyle]} testID={AvatarTestId.badgeContainer}>
+            <View style={styles.badgeMeasureContainer} testID={AvatarTestId.badgeInnerContainer} onLayout={handleBadgeLayout}>
+              {badge}
+            </View>
+          </View>) : null}
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: theme.General.borderRadiusXL,
+        borderWidth: 1,
+        borderColor: theme.Misc.Avatar.avatarBorderColor,
+        backgroundColor: theme.Misc.Avatar.avatarBg,
+        overflow: 'hidden',
+    },
+    backgroundFill: { backgroundColor: theme.Misc.Avatar.avatarBg },
+    circle: { borderRadius: border.Radius['rounded-full'] },
+    text: {
+        fontSize: typography.Size['text-base'],
+        textTransform: 'uppercase',
+        color: theme.Misc.Avatar.avatarTextColor,
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.secondary,
+    },
+    badgeContainer: { position: 'absolute', right: 0, top: -7 },
+    badgeMeasureContainer: { alignSelf: 'flex-start' },
+    icon: {
+        width: typography.Size['text-base'],
+        color: theme.Misc.Avatar.avatarTextColor,
+    },
+    iconXLarge: { width: typography.Size['text-2xl'] },
+}));
+export const AvatarTestId = {
+    root: 'Avatar',
+    icon: 'Avatar.icon',
+    container: 'Avatar.container',
+    text: 'Avatar.text',
+    image: 'Avatar.image',
+    badgeContainer: 'Avatar.badgeContainer',
+    badgeInnerContainer: 'Avatar.badgeInnerContainer',
+};

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

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps } from './Avatar';

package/dist/components/Avatar/index.js

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

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,35 @@
+import { type AccessibilityProps, type ViewStyle } from 'react-native';
+import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+export type BadgeSeverity = 'basic' | 'info' | 'success' | 'warning' | 'danger';
+export interface BadgeBase extends AccessibilityProps, Pick<ViewProps, 'onLayout' | 'testID'> {
+    /**
+     * Выбор варианта стиля компонента
+     * @default 'basic'
+     */
+    severity?: BadgeSeverity;
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: ViewStyle;
+}
+interface BadgeText extends BadgeBase {
+    /** Текст внутри бейджа **/
+    children: string;
+    /** Отображать бейдж в форме точки **/
+    dot?: false;
+}
+interface BadgeDot extends BadgeBase {
+    /** Отображать бейдж в форме точки **/
+    dot: true;
+    /** Текст внутри бейджа **/
+    children?: never;
+}
+export type BadgeProps = BadgeText | BadgeDot;
+/**
+ * Компонент Badge
+ * @param children - Текст внутри бейджа
+ * @param dot - Отображать бейдж в форме точки
+ * @param severiy - Выбор варианта стиля компонента
+ * @param style - Дополнительная стилизация для контейнера компонента
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4871&m=dev
+ */
+export declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+export {};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,74 @@
+import { memo, useCallback, useState } from 'react';
+import { Dimensions, Text, View, } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Компонент Badge
+ * @param children - Текст внутри бейджа
+ * @param dot - Отображать бейдж в форме точки
+ * @param severiy - Выбор варианта стиля компонента
+ * @param style - Дополнительная стилизация для контейнера компонента
+ * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4871&m=dev
+ */
+export const Badge = memo(({ children, dot, severity = 'basic', style, testID, ...rest }) => {
+    const styles = useStyles();
+    const [textLayout, setTextLayout] = useState();
+    const onTextLayout = useCallback((e) => {
+        setTextLayout(e.nativeEvent.layout);
+    }, []);
+    return (<View style={[styles.container, style]} {...rest}>
+        {dot ? (<View style={[styles.dot, styles[severity]]} testID={testID}/>) : (<>
+            <View style={[styles.textBadgeContainer, styles[severity]]} testID={testID}>
+              <Text numberOfLines={1} style={[styles.textBadge, { minWidth: textLayout?.width }]}>
+                {children}
+              </Text>
+            </View>
+
+            {/* скрытый элемент для подсчета ширины текста в 1 строку */}
+            <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants' style={styles.hiddenContainer}>
+              <View collapsable={false}>
+                <Text numberOfLines={1} style={styles.textBadge} onLayout={onTextLayout}>
+                  {children}
+                </Text>
+              </View>
+            </View>
+          </>)}
+      </View>);
+});
+const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
+    container: { alignItems: 'flex-start' },
+    dot: {
+        width: theme.Misc.Badge.badgeDotSize,
+        height: theme.Misc.Badge.badgeDotSize,
+        borderRadius: border.Radius['rounded-full'],
+    },
+    textBadgeContainer: {
+        height: theme.Misc.Badge.badgeHeight,
+        paddingHorizontal: theme.Misc.Tag.tagPadding,
+        justifyContent: 'center',
+        borderRadius: border.Radius['rounded-full'],
+    },
+    textBadge: {
+        color: theme.Misc.Badge.badgeTextColor,
+        fontSize: typography.Size['text-xs'],
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        fontFamily: fonts.primary,
+    },
+    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,
+    },
+    hiddenContainer: {
+        width: Dimensions.get('window').width,
+        height: 0,
+        flexDirection: 'row',
+        position: 'absolute',
+    },
+}));

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

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from './Badge';

package/dist/components/Badge/index.js

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

package/dist/components/Button/BaseButton.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps, ButtonVariant, VariantStyles } from './types';
+export type BaseButtonComponentProps<Variant extends ButtonVariant> = Omit<ButtonProps<Variant>, 'variant'> & {
+    readonly variant: Variant;
+} & VariantStyles<Variant>;
+export declare const BaseButton: <Variant extends ButtonVariant>({ size, shape, loading, variant, disabled, iconOnly, iconPosition, Icon, label, style, containerVariantStyles, labelVariantStyles, pressedVariantStyles, iconVariantStyles, pressedLabelVariantStyles, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }: BaseButtonComponentProps<Variant>) => import("react").JSX.Element;