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

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,134 @@
+import { memo, useCallback, useMemo } from 'react';
+import { Pressable, StyleSheet, View, } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { makeStyles } from '../../utils/makeStyles';
+export const RadioButton = memo(({ onPress, checked = false, disabled = false, state = 'default', testID, ...rest }) => {
+    const styles = useStyles();
+    const centerViewBackground = useMemo(() => [styles.defaultView, disabled && !checked && styles.disabledView], [disabled, checked, styles.defaultView, styles.disabledView]);
+    const pressableStyles = useCallback(({ pressed }) => {
+        const result = [styles.container, styles.default];
+        if (checked) {
+            result.push(styles.checked);
+        }
+        if (pressed) {
+            result.push(styles.pressed);
+            if (checked) {
+                result.push(styles.checkedPressed);
+            }
+        }
+        if (state === 'danger') {
+            result.push(styles.danger);
+            if (checked) {
+                result.push(styles.dangerChecked);
+                if (pressed) {
+                    result.push(styles.dangerCheckedPressed);
+                }
+            }
+        }
+        if (disabled) {
+            result.push(styles.disabled);
+            if (checked) {
+                result.push(styles.disabledChecked);
+            }
+        }
+        return StyleSheet.flatten(result);
+    }, [
+        checked,
+        disabled,
+        state,
+        styles.container,
+        styles.default,
+        styles.pressed,
+        styles.checked,
+        styles.checkedPressed,
+        styles.danger,
+        styles.dangerChecked,
+        styles.dangerCheckedPressed,
+        styles.disabled,
+        styles.disabledChecked,
+    ]);
+    return (<View>
+        {!disabled && state === 'danger' && (<Animated.View layout={LinearTransition.duration(100)} style={styles.outline}/>)}
+        <Pressable disabled={disabled} style={pressableStyles} testID={testID || 'RadioButton_Pressable'} onPress={onPress} {...rest}>
+          <View style={[styles.center, centerViewBackground]}/>
+        </Pressable>
+      </View>);
+});
+const useStyles = makeStyles(({ theme }) => ({
+    container: {
+        width: theme.Form.RadioButton.radiobuttonWidth,
+        height: theme.Form.RadioButton.radiobuttonHeight,
+        borderRadius: theme.Form.RadioButton.radiobuttonWidth,
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: theme.General.focusShadowWidth,
+    },
+    center: {
+        width: theme.Form.RadioButton.radiobuttonIconSize,
+        height: theme.Form.RadioButton.radiobuttonIconSize,
+        borderRadius: theme.Form.RadioButton.radiobuttonIconSize,
+    },
+    outline: {
+        position: 'absolute',
+        width: theme.Form.RadioButton.radiobuttonWidth +
+            theme.General.focusShadowWidth * 2,
+        height: theme.Form.RadioButton.radiobuttonHeight +
+            theme.General.focusShadowWidth * 2,
+        borderRadius: theme.Form.RadioButton.radiobuttonHeight +
+            theme.General.focusShadowWidth * 2,
+        backgroundColor: theme.General.focusOutlineErrorColor,
+    },
+    // centerView
+    defaultView: { backgroundColor: theme.Form.InputText.inputBg },
+    disabledView: { backgroundColor: 'transparent' },
+    // container viewState
+    default: {
+        borderColor: theme.Form.InputText.inputBorderColor,
+        borderWidth: 1,
+        backgroundColor: theme.Form.InputText.inputBg,
+    },
+    pressed: {
+        borderColor: theme.Form.InputText.inputHoverBorderColor,
+        backgroundColor: theme.Form.InputText.inputBg,
+        borderWidth: 1,
+    },
+    checked: {
+        borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        borderWidth: 5,
+    },
+    checkedPressed: {
+        borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
+        backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor,
+        borderWidth: 5,
+    },
+    // danger viewState
+    danger: {
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+        backgroundColor: theme.Form.InputText.inputBg,
+        borderWidth: 1,
+    },
+    dangerChecked: {
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        borderWidth: 1,
+    },
+    dangerCheckedPressed: {
+        borderColor: theme.Form.InputText.inputErrorBorderColor,
+        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        borderWidth: 1,
+    },
+    // disabled viewState
+    disabled: {
+        borderColor: theme.Form.InputText.inputBorderColor,
+        backgroundColor: theme.Button.Disabled.disabledButtonBg,
+        opacity: 0.6,
+        borderWidth: 1,
+        mixBlendMode: 'luminosity',
+    },
+    disabledChecked: {
+        borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor,
+        borderWidth: 5,
+    },
+}));

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

@@ -0,0 +1 @@
+export { RadioButton, type RadioButtonProps } from './RadioButton';

package/dist/components/RadioButton/index.js

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

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,48 @@
+import { type AccessibilityProps, type ViewProps } from 'react-native';
+/**
+ * Свойства компонента рейтинга
+ * @see Rating - компонент рейтинга
+ */
+export interface RatingProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /**
+     * Управление состоянием включённости компонента для нажатий пользователем
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Отображение элемента с паддингами
+     * @default false
+     */
+    paddings?: boolean;
+    /**
+     * Максимальный рейтинг(количество звёздочек)
+     * @default 5
+     */
+    maxRating?: number;
+    /**
+     * Текущий рейтинг
+     */
+    rating: number;
+    /**
+     * Обработчик изменения рейтинга
+     * @param rating - новый рейтинг
+     */
+    onChange: (rating: number) => void;
+    /**
+     * Обработчик очистки рейтинга
+     */
+    onClear: () => void;
+}
+/**
+ * Компонент рейтинга
+ * @param disabled - управление состоянием включённости компонента для нажатий пользователем
+ * @param paddings - отображение элемента с паддингами
+ * @param maxRating - максимальный рейтинг(количество звёздочек)
+ * @param rating - текущий рейтинг
+ * @param onChange - обработчик изменения рейтинга
+ * @param onClear - обработчик изменения рейтинга
+ * @see RatingProps - тип свойств компонента рейтинга
+ * @see RatingItem - элемент рейтинга с иконкой звёздочки
+ * @see RatingClear - элемент рейтинга для очистки
+ */
+export declare const Rating: import("react").NamedExoticComponent<RatingProps>;

package/dist/components/Rating/Rating.js

@@ -0,0 +1,37 @@
+import { memo, useCallback } from 'react';
+import { View } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+import { RatingClear } from './RatingClear';
+import { RatingItem } from './RatingItem';
+/**
+ * Компонент рейтинга
+ * @param disabled - управление состоянием включённости компонента для нажатий пользователем
+ * @param paddings - отображение элемента с паддингами
+ * @param maxRating - максимальный рейтинг(количество звёздочек)
+ * @param rating - текущий рейтинг
+ * @param onChange - обработчик изменения рейтинга
+ * @param onClear - обработчик изменения рейтинга
+ * @see RatingProps - тип свойств компонента рейтинга
+ * @see RatingItem - элемент рейтинга с иконкой звёздочки
+ * @see RatingClear - элемент рейтинга для очистки
+ */
+export const Rating = memo(({ disabled = false, paddings = false, maxRating = 5, rating, onChange, onClear, testID, ...rest }) => {
+    const styles = useStyles();
+    const handleItemPress = useCallback((index) => () => {
+        onChange(index + 1);
+    }, [onChange]);
+    return (<View style={styles.container}>
+        <RatingClear disabled={disabled} paddings={paddings} testID={testID || 'RatingClear'} onPress={onClear} {...rest}/>
+        {new Array(maxRating).fill(null).map((_, index) => (<RatingItem checked={index < rating} 
+        // Использовать индекс массива в качестве ключа - единственно возможное и правильное решение
+        // eslint-disable-next-line react/no-array-index-key
+        key={`RatingItem-${index}`} paddings={paddings} testID={`RatingItem-${index + 1}`} onPress={handleItemPress(index)}/>))}
+      </View>);
+});
+const useStyles = makeStyles(({ theme }) => ({
+    container: {
+        flexDirection: 'row',
+        gap: theme.General.inlineSpacing,
+        alignItems: 'center',
+    },
+}));

package/dist/components/Rating/RatingClear.d.ts

@@ -0,0 +1,14 @@
+import { type RatingItemContainerProps } from './RatingItemContainer';
+/**
+ * Свойства компонента элемента рейтинга для очистки рейтинга
+ * @see RatingItemContainerProps - тип свойств компонента контейнера элемента от которого наследуется данный тип свойств
+ * @see RatingClear = компонент элемента рейтинга для очистки рейтинга
+ */
+export interface RatingClearProps extends Omit<RatingItemContainerProps, 'children'> {
+}
+/**
+ * Компонент элемента рейтинга для очистки рейтинга
+ * @see RatingClearProps - cвойства компонента элемента рейтинга для очистки рейтинга
+ * @see RatingItemContainer - компонент контейнер для элемента
+ */
+export declare const RatingClear: import("react").NamedExoticComponent<RatingClearProps>;

package/dist/components/Rating/RatingClear.js

@@ -0,0 +1,28 @@
+import { IconBan } from '@tabler/icons-react-native';
+import { memo } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { RatingItemContainer, } from './RatingItemContainer';
+/**
+ * Компонент элемента рейтинга для очистки рейтинга
+ * @see RatingClearProps - cвойства компонента элемента рейтинга для очистки рейтинга
+ * @see RatingItemContainer - компонент контейнер для элемента
+ */
+export const RatingClear = memo(({ ...rest }) => {
+    const styles = useStyles();
+    return (<RatingItemContainer {...rest}>
+      {({ disabled, pressed }) => (<IconBan color={disabled
+                ? styles.iconDisabled.color
+                : pressed
+                    ? styles.iconPressed.color
+                    : styles.icon.color} height={styles.icon.height} width={styles.icon.width}/>)}
+    </RatingItemContainer>);
+});
+const useStyles = makeStyles(({ theme }) => ({
+    icon: {
+        height: theme.Form.Rating.ratingIconFontSize,
+        width: theme.Form.Rating.ratingIconFontSize,
+        color: theme.Form.Rating.ratingCancelIconColor,
+    },
+    iconPressed: { color: theme.Form.Rating.ratingCancelIconHoverColor },
+    iconDisabled: { color: theme.custom.rating.ratingCancelIconDisabledColor },
+}));

package/dist/components/Rating/RatingItem.d.ts

@@ -0,0 +1,19 @@
+import { type RatingItemContainerProps } from './RatingItemContainer';
+/**
+ * Свойства компонента элемента рейтинга с иконкой звёздочки
+ * @see RatingItemContainerProps - тип свойств компонента контейнера элемента от которого наследуется данный тип свойств
+ * @see RatingItem - компонент элемента рейтинга с иконкой звёздочки
+ */
+export interface RatingItemProps extends Omit<RatingItemContainerProps, 'children'> {
+    /**
+     * Управление состоянием активности элемента
+     */
+    checked: boolean;
+}
+/**
+ * Компонент элемента рейтинга с иконкой звёздочки
+ * @param checked - Управление состоянием активности элемента
+ * @see RatingItemProps - тип свойств компонента
+ * @see RatingItemContainer - компонент контейнер для элемента
+ */
+export declare const RatingItem: import("react").NamedExoticComponent<RatingItemProps>;

package/dist/components/Rating/RatingItem.js

@@ -0,0 +1,44 @@
+import { IconStar, IconStarFilled } from '@tabler/icons-react-native';
+import { memo, useMemo } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { RatingItemContainer, } from './RatingItemContainer';
+/**
+ * Компонент элемента рейтинга с иконкой звёздочки
+ * @param checked - Управление состоянием активности элемента
+ * @see RatingItemProps - тип свойств компонента
+ * @see RatingItemContainer - компонент контейнер для элемента
+ */
+export const RatingItem = memo(({ checked, ...rest }) => {
+    const styles = useStyles();
+    const Icon = useMemo(() => (checked ? IconStarFilled : IconStar), [checked]);
+    return (<RatingItemContainer {...rest}>
+      {({ pressed, disabled }) => (<Icon color={disabled
+                ? checked
+                    ? styles.iconCheckedDisabled.color
+                    : styles.iconDisabled.color
+                : pressed
+                    ? styles.iconPressed.color
+                    : checked
+                        ? styles.iconChecked.color
+                        : styles.icon.color} fill={checked
+                ? disabled
+                    ? styles.iconCheckedDisabled.color
+                    : pressed
+                        ? styles.iconPressed.color
+                        : styles.iconChecked.color
+                : undefined} fillOpacity={checked ? 1 : 0} height={styles.icon.height} width={styles.icon.width}/>)}
+    </RatingItemContainer>);
+});
+const useStyles = makeStyles(({ theme }) => ({
+    icon: {
+        height: theme.Form.Rating.ratingIconFontSize,
+        width: theme.Form.Rating.ratingIconFontSize,
+        color: theme.Form.Rating.ratingStarIconOffColor,
+    },
+    iconPressed: { color: theme.Form.Rating.ratingStarIconHoverColor },
+    iconChecked: { color: theme.Form.Rating.ratingStarIconOnColor },
+    iconDisabled: { color: theme.custom.rating.ratingStarIconOffDisabledColor },
+    iconCheckedDisabled: {
+        color: theme.custom.rating.ratingStarIconOnDisabledColor,
+    },
+}));

package/dist/components/Rating/RatingItemContainer.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type PressableProps } from 'react-native';
+/**
+ * Свойста компонента контейнера для элемента в компоненте рейтинга
+ * @see RatingItemContainer
+ */
+export interface RatingItemContainerProps extends Omit<PressableProps, 'style' | 'onPress' | 'children'> {
+    /**
+     * Отображение элемента с паддингами
+     * @default false
+     */
+    paddings?: boolean;
+    /**
+     * Обработчик нажатия элемента
+     * @default undefined
+     */
+    onPress?: () => void;
+    /**
+     * Функция отображения дочернего компонента в контейнере
+     * @param renderProps - свойства состояния контейнера для изменения отображения дочернего компонента
+     * @returns отрендеренный компонент
+     */
+    children: (renderProps: {
+        disabled: boolean | null;
+        pressed: boolean;
+    }) => ReactNode;
+}
+/**
+ * Компонент контейнера для элемента в компоненте рейтинга
+ * @param disabled - управление состоянием включённости компонента для нажатий пользователем
+ * @param paddings - отображение элемента с паддингами
+ * @param children - функция отображения дочернего компонента в контейнере
+ * @see RatingItemContainerProps - тип свойств компонента
+ * @see RatingItem - вариация компонента элемента рейтинга с иконкой звёздочки
+ * @see RatingClear - вариация компонента элемента рейтинга с иконкой очистки
+ */
+export declare const RatingItemContainer: import("react").NamedExoticComponent<RatingItemContainerProps>;

package/dist/components/Rating/RatingItemContainer.js

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+import { Pressable } from 'react-native';
+import { makeStyles } from '../../utils/makeStyles';
+/**
+ * Компонент контейнера для элемента в компоненте рейтинга
+ * @param disabled - управление состоянием включённости компонента для нажатий пользователем
+ * @param paddings - отображение элемента с паддингами
+ * @param children - функция отображения дочернего компонента в контейнере
+ * @see RatingItemContainerProps - тип свойств компонента
+ * @see RatingItem - вариация компонента элемента рейтинга с иконкой звёздочки
+ * @see RatingClear - вариация компонента элемента рейтинга с иконкой очистки
+ */
+export const RatingItemContainer = memo(({ disabled = false, paddings = false, children, ...rest }) => {
+    const styles = useStyles();
+    return (<Pressable disabled={disabled} style={[styles.container, paddings && styles.containerWithPaddings]} {...rest}>
+        {({ pressed }) => children({ disabled, pressed })}
+      </Pressable>);
+});
+const useStyles = makeStyles(({ theme, sizing }) => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: theme.Form.Rating.ratingIconFontSize,
+        height: theme.Form.Rating.ratingIconFontSize,
+    },
+    containerWithPaddings: {
+        width: sizing.Width['w-3'],
+        height: sizing.Height['h-3'],
+    },
+}));

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

@@ -0,0 +1 @@
+export { Rating, type RatingProps } from './Rating';

package/dist/components/Rating/index.js

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

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

@@ -0,0 +1,32 @@
+import { type AccessibilityProps, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { type SharedValue } from 'react-native-reanimated';
+import { type SelectButtonItemProps } from './SelectButtonItem';
+export interface SelectButtonProps extends AccessibilityProps, Pick<ViewProps, 'testID'> {
+    /** Массив кнопок. Должен содержать как минимум 2 кнопки. */
+    buttons: Array<Pick<SelectButtonItemProps, 'label' | 'showIcon' | 'Icon'> & {
+        key: string;
+    }>;
+    /** true - если кнопки недоступны для нажатия */
+    disabled?: boolean;
+    /** Индекс выбранной кнопки при первом рендере */
+    initialIndex?: number;
+    /** Вызывается при нажатии на кнопку */
+    onPress?: (index: number) => void;
+    /**
+     * Анимированное значение 0...n-1, где n - это количество кнопок.
+     * Используется для контроля элемента извне. Если передано, то компонент становится управляемым.
+     */
+    position?: SharedValue<number>;
+    /**
+     * Выбор размера элемента
+     * @default 'base'
+     */
+    size?: 'small' | 'base' | 'large' | 'xlarge';
+    /** Дополнительная стилизация для контейнера компонента */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Используется для маркировки элементов интерфейса
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
+ */
+export declare const SelectButton: import("react").NamedExoticComponent<SelectButtonProps>;

package/dist/components/SelectButton/SelectButton.js

@@ -0,0 +1,75 @@
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { View, } from 'react-native';
+import Animated, { Easing, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { makeStyles } from '../../utils/makeStyles';
+import { SelectButtonItem, } from './SelectButtonItem';
+const DEFAULT_ANIMATION_DURATION = 200; // ms
+/**
+ * Используется для маркировки элементов интерфейса
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
+ */
+export const SelectButton = memo(({ buttons, disabled, initialIndex: initialIndexProp, onPress: onPressProp, size, style, testID, position: positionProp, ...rest }) => {
+    const styles = useStyles();
+    const buttonsLayoutListRef = useRef([]);
+    const buttonsLayoutList = useSharedValue([]);
+    const [frameKey, setFrameKey] = useState(Date.now());
+    const initialIndex = useMemo(() => initialIndexProp && initialIndexProp < buttons.length
+        ? initialIndexProp
+        : 0, [buttons.length, initialIndexProp]);
+    const onButtonLayout = useCallback((index, event) => {
+        buttonsLayoutListRef.current[index] = event.nativeEvent.layout;
+        if (buttonsLayoutListRef.current.length === buttons.length) {
+            buttonsLayoutList.value = [...buttonsLayoutListRef.current];
+        }
+    }, [buttons.length, buttonsLayoutList]);
+    useAnimatedReaction(() => buttonsLayoutList.value, (layoutList, previous) => {
+        if (layoutList !== previous) {
+            runOnJS(setFrameKey)(Date.now());
+        }
+    });
+    const positionInner = useSharedValue(initialIndex);
+    const position = useMemo(() => positionProp || positionInner, [positionInner, positionProp]);
+    const animationInputRange = useMemo(() => buttons.map((_, index) => index), [buttons]);
+    const framePositionStyle = useAnimatedStyle(() => {
+        const left = interpolate(position.value, animationInputRange, animationInputRange.map((index) => buttonsLayoutList.value[index]?.x ?? 0));
+        const width = interpolate(position.value, animationInputRange, animationInputRange.map((index) => buttonsLayoutList.value[index]?.width ?? 0));
+        return { left, width };
+    });
+    const isUncontrolledComponent = useMemo(() => !positionProp, [positionProp]);
+    const onPress = useCallback((index) => {
+        if (isUncontrolledComponent) {
+            positionInner.value = withTiming(index, {
+                duration: DEFAULT_ANIMATION_DURATION,
+                easing: Easing.linear,
+            });
+        }
+        onPressProp?.(index);
+    }, [isUncontrolledComponent, onPressProp, positionInner]);
+    return (<View collapsable={false} style={[styles.container, style]} testID={testID} {...rest}>
+        {buttons.map(({ label, Icon, key, showIcon }, index) => (<SelectButtonItem Icon={Icon} disabled={disabled} index={index} key={key} label={label} position={position} showIcon={showIcon} size={size} testID={`SelectButton_SelectButtonItem_${index}`} onLayout={(event) => onButtonLayout(index, event)} onPress={() => onPress(index)}/>))}
+
+        {!disabled && (<Animated.View key={frameKey} style={[styles.frame, framePositionStyle]} testID='SelectButton_AnimatedFrame'/>)}
+      </View>);
+});
+const useStyles = makeStyles(({ theme }) => ({
+    container: {
+        flexDirection: 'row',
+        padding: theme.Form.SelectButton.selectButtonGroupPadding,
+        gap: theme.Form.SelectButton.selectButtonGroupPadding,
+        borderRadius: theme.General.borderRadiusXL,
+        backgroundColor: theme.Form.SelectButton.selectButtonGroupBg,
+    },
+    frame: {
+        position: 'absolute',
+        top: theme.Form.SelectButton.selectButtonGroupPadding,
+        bottom: theme.Form.SelectButton.selectButtonGroupPadding,
+        left: theme.Form.SelectButton.selectButtonGroupPadding,
+        borderRadius: theme.Form.SelectButton.selectButtonBorderRadius,
+        backgroundColor: theme.Form.SelectButton.selectButtonActiveBg,
+        zIndex: -1,
+    },
+    textColor: { color: theme.Form.SelectButton.selectButtonTextColor },
+    checkedTextColor: {
+        color: theme.Form.SelectButton.selectButtonIconActiveColor,
+    },
+}));

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

@@ -0,0 +1,35 @@
+import { type ViewProps } from 'react-native';
+import { type SharedValue } from 'react-native-reanimated';
+import { type SvgSource } from '../../utils/SvgUniversal';
+export interface SelectButtonItemProps extends Pick<ViewProps, 'onLayout' | 'testID'> {
+    /** Индекс кнопки */
+    index: number;
+    /** Обработчик нажатия на кнопку */
+    onPress: () => void;
+    /**
+     * Анимированное значение 0...n-1, где n - это количество кнопок.
+     * Кнопка считается выбранной, если значение position равно индексу кнопки.
+     */
+    position: SharedValue<number>;
+    /** true - если кнопка недоступна для нажатия */
+    disabled?: boolean;
+    /** Текст на кнопке */
+    label?: string;
+    /**
+     * Выбор размера элемента
+     * @default 'base'
+     */
+    size?: 'small' | 'base' | 'large' | 'xlarge';
+    /**
+     * Показать или скрыть иконку внутри компонента
+     * @default true
+     */
+    showIcon?: boolean;
+    /** SVG-иконка */
+    Icon?: SvgSource;
+}
+/**
+ * Дочерний элемент компонента SelectButton. Не используется отдельно от SelectButton.
+ * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=481-4393
+ */
+export declare const SelectButtonItem: import("react").NamedExoticComponent<SelectButtonItemProps>;