@cdek-it/react-native-ui-kit 0.6.9 → 1.0.0-beta.1

package/README.md

@@ -51,6 +51,15 @@ UI kit использует следующие виды шрифтов.
 />
 ```
 
+После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в
+`StyleSheet.create(({ fonts }) => ...)`.
+
+`ThemeContextProvider` только настраивает темы и шрифты для `unistyles`.
+`ThemeContext` остается пустым и всегда имеет значение `null`.
+
+Провайдер также принимает `lightTheme` и `darkTheme`, если нужно переопределить
+темы целиком.
+
 ### Пример подключения шрифтов с помощью expo-fonts через плагин
 
 ```ts

package/dist/components/Accordion/Accordion.js

@@ -2,8 +2,8 @@ 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 { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * Компонент Гармошка - умеет скрывать и раскрывать контент по нажатию на заголовок
  * @param title - Текст заголовка
@@ -15,7 +15,6 @@ import { makeStyles } from '../../utils/makeStyles';
  * @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);
@@ -40,9 +39,13 @@ export const Accordion = ({ Icon, title, isInitiallyExpanded: initiallyExpanded
     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}/>
+          <SvgUniversal {...styles.icon} source={IconChevronRight} uniProps={({ theme }) => ({
+            color: theme.Panel.Accordion.accordionHeaderTextColor,
+        })}/>
         </Animated.View>
-        {Icon ? (<SvgUniversal source={Icon} {...styles.icon} testID={AccordionTestIds.icon}/>) : null}
+        {Icon ? (<SvgUniversal {...styles.icon} source={Icon} testID={AccordionTestIds.icon} uniProps={({ theme }) => ({
+                color: theme.Panel.Accordion.accordionHeaderTextColor,
+            })}/>) : null}
         <Text style={styles.title}>{title}</Text>
         {titleExtra ? (<View testID={AccordionTestIds.titleExtra}>{titleExtra}</View>) : null}
       </Pressable>
@@ -64,7 +67,7 @@ export const AccordionTestIds = {
     contentWrapper: 'ContentWrapper',
     separator: 'Separator',
 };
-const useStyles = makeStyles(({ theme, fonts }) => ({
+const styles = StyleSheet.create(({ theme, fonts }) => ({
     component: { width: '100%' },
     header: {
         paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom,
@@ -73,11 +76,7 @@ const useStyles = makeStyles(({ theme, fonts }) => ({
         alignItems: 'center',
         backgroundColor: theme.Panel.Accordion.accordionHeaderBg,
     },
-    icon: {
-        width: 17.5,
-        height: 17.5,
-        color: theme.Panel.Accordion.accordionHeaderTextColor,
-    },
+    icon: { width: 17.5, height: 17.5 },
     title: {
         fontSize: 15.75,
         includeFontPadding: false,

package/dist/components/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useState, } from 'react';
 import { Image, Text, useWindowDimensions, View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 const SizeMap = {
     normal: 28,
     large: 35,
@@ -22,7 +22,6 @@ const ICON_MULTIPLIER = 0.43;
  * @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(() => {
@@ -51,8 +50,10 @@ export const Avatar = memo(({ type, size = 'normal', shape = 'circle', style, ch
         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]);
+        return (<SvgUniversal height={iconSize} source={Icon} testID={AvatarTestId.icon} uniProps={({ theme }) => ({
+                color: iconColor ?? theme.Misc.Avatar.avatarTextColor,
+            })} width={iconSize}/>);
+    }, [Icon, calculatedSize, iconColor, size, type]);
     useEffect(() => {
         if (badge) {
             setBadgeLayout(undefined);
@@ -82,7 +83,7 @@ export const Avatar = memo(({ type, size = 'normal', shape = 'circle', style, ch
           </View>) : null}
       </View>);
 });
-const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
+const styles = StyleSheet.create(({ theme, border, typography, fonts }) => ({
     container: {
         justifyContent: 'center',
         alignItems: 'center',
@@ -104,10 +105,7 @@ const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
     },
     badgeContainer: { position: 'absolute', right: 0, top: -7 },
     badgeMeasureContainer: { alignSelf: 'flex-start' },
-    icon: {
-        width: typography.Size['text-base'],
-        color: theme.Misc.Avatar.avatarTextColor,
-    },
+    icon: { width: typography.Size['text-base'] },
     iconXLarge: { width: typography.Size['text-2xl'] },
 }));
 export const AvatarTestId = {

package/dist/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { memo, useCallback, useState } from 'react';
 import { Dimensions, Text, View, } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 /**
  * Компонент Badge
  * @param children - Текст внутри бейджа
@@ -10,23 +10,23 @@ import { makeStyles } from '../../utils/makeStyles';
  * @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();
+    badgeStyles.useVariants({ severity });
     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 }]}>
+    return (<View style={[badgeStyles.container, style]} {...rest}>
+        {dot ? (<View style={[badgeStyles.dot, badgeStyles.dotShape]} testID={testID}/>) : (<>
+            <View style={[badgeStyles.dot, badgeStyles.textBadgeContainer]} testID={testID}>
+              <Text numberOfLines={1} style={[badgeStyles.textBadge, { minWidth: textLayout?.width }]}>
                 {children}
               </Text>
             </View>
 
             {/* скрытый элемент для подсчета ширины текста в 1 строку */}
-            <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants' style={styles.hiddenContainer}>
+            <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants' style={badgeStyles.hiddenContainer}>
               <View collapsable={false}>
-                <Text numberOfLines={1} style={styles.textBadge} onLayout={onTextLayout}>
+                <Text numberOfLines={1} style={badgeStyles.textBadge} onLayout={onTextLayout}>
                   {children}
                 </Text>
               </View>
@@ -34,9 +34,28 @@ export const Badge = memo(({ children, dot, severity = 'basic', style, testID, .
           </>)}
       </View>);
 });
-const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
+const badgeStyles = StyleSheet.create(({ theme, border, typography, fonts }) => ({
     container: { alignItems: 'flex-start' },
     dot: {
+        variants: {
+            severity: {
+                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,
+                },
+            },
+        },
+    },
+    dotShape: {
         width: theme.Misc.Badge.badgeDotSize,
         height: theme.Misc.Badge.badgeDotSize,
         borderRadius: border.Radius['rounded-full'],
@@ -54,17 +73,6 @@ const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({
         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,

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

@@ -1,5 +1,5 @@
-import type { ButtonProps, ButtonVariant, VariantStyles } from './types';
+import type { ButtonProps, ButtonVariant } 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;
+};
+export declare const BaseButton: <Variant extends ButtonVariant>({ size, shape, loading, variant, disabled, iconOnly, iconPosition, Icon, label, style, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }: BaseButtonComponentProps<Variant>) => import("react").JSX.Element;

package/dist/components/Button/BaseButton.js

@@ -1,7 +1,9 @@
 import { useCallback, useState } from 'react';
 import { genericMemo } from '../../utils/genericMemo';
 import { ButtonLeftArea, ButtonRightArea, ButtonLabel, ButtonContainer, } from './utils';
-const BaseButtonComponent = ({ size = 'base', shape = 'square', loading = false, variant, disabled = false, iconOnly, iconPosition = 'prefix', Icon, label, style, containerVariantStyles, labelVariantStyles, pressedVariantStyles, iconVariantStyles, pressedLabelVariantStyles, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }) => {
+import { ButtonPressedContext } from './utils/ButtonPressedContext';
+const BaseButtonComponent = ({ size = 'base', shape = 'square', loading = false, variant, disabled = false, iconOnly, iconPosition = 'prefix', Icon, label, style, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }) => {
+    const isDisabled = !!disabled;
     const [pressed, setPressed] = useState(false);
     const onPressIn = useCallback((event) => {
         onPressInProp?.(event);
@@ -11,52 +13,21 @@ const BaseButtonComponent = ({ size = 'base', shape = 'square', loading = false,
         onPressOutProp?.(event);
         setPressed(false);
     }, [onPressOutProp]);
-    return (<ButtonContainer {...{
+    return (<ButtonPressedContext.Provider value={pressed}>
+      <ButtonContainer {...{
         size,
-        variant,
         shape,
-        disabled,
+        disabled: isDisabled,
         loading,
-        iconOnly,
+        isIconOnly: !!iconOnly,
         style,
-        containerVariantStyles,
-        pressedVariantStyles,
         onPressIn,
         onPressOut,
     }} {...props}>
-      <ButtonLeftArea {...{
-        size,
-        variant,
-        loading,
-        disabled,
-        Icon,
-        iconPosition,
-        iconVariantStyles: pressed
-            ? pressedLabelVariantStyles
-            : iconVariantStyles,
-    }}/>
-      <ButtonLabel {...{
-        size,
-        variant,
-        loading,
-        disabled,
-        iconOnly,
-        label,
-        labelVariantStyles: pressed
-            ? pressedLabelVariantStyles
-            : labelVariantStyles,
-    }}/>
-      <ButtonRightArea {...{
-        size,
-        variant,
-        loading,
-        disabled,
-        Icon,
-        iconPosition,
-        iconVariantStyles: pressed
-            ? pressedLabelVariantStyles
-            : iconVariantStyles,
-    }}/>
-    </ButtonContainer>);
+        <ButtonLeftArea {...{ size, loading, disabled: isDisabled, Icon, iconPosition }}/>
+        <ButtonLabel {...{ size, loading, disabled: isDisabled, iconOnly, label }}/>
+        <ButtonRightArea {...{ size, loading, disabled: isDisabled, Icon, iconPosition }}/>
+      </ButtonContainer>
+    </ButtonPressedContext.Provider>);
 };
 export const BaseButton = genericMemo(BaseButtonComponent);

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { BaseButton } from './BaseButton';
-import { useBasicButtonStyles } from './styles';
+import { ButtonVariantContext } from './utils/ButtonVariantContext';
 /**
  * Button component
  * @param size - button size
@@ -16,6 +16,8 @@ import { useBasicButtonStyles } from './styles';
  * @see BaseButton
  */
 export const Button = memo(({ variant = 'primary', ...props }) => {
-    const buttonStyles = useBasicButtonStyles();
-    return <BaseButton variant={variant} {...props} {...buttonStyles}/>;
+    const variantContextValue = useMemo(() => ({ variant }), [variant]);
+    return (<ButtonVariantContext.Provider value={variantContextValue}>
+        <BaseButton variant={variant} {...props}/>
+      </ButtonVariantContext.Provider>);
 });

package/dist/components/Button/ButtonBadge.js

@@ -1,9 +1,9 @@
 import { memo, useCallback, useMemo, useState } from 'react';
 import { View, } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Badge } from '../Badge';
 import { BaseButton } from './BaseButton';
-import { useBasicButtonStyles } from './styles';
+import { ButtonVariantContext } from './utils/ButtonVariantContext';
 /**
  * Button component with badge
  * @param size - button size
@@ -21,9 +21,8 @@ import { useBasicButtonStyles } from './styles';
  * @see BaseButton
  */
 export const ButtonBadge = memo(({ badgeLabel, badgeSeverity, variant = 'primary', ...props }) => {
-    const buttonStyles = useBasicButtonStyles();
-    const styles = useStyles();
     const [badgeLayout, setBadgeLayout] = useState();
+    const variantContextValue = useMemo(() => ({ variant }), [variant]);
     const badgeContainerStyle = useMemo(() => ({
         position: 'absolute',
         top: badgeLayout ? -Math.round(badgeLayout.height / 2) : 0,
@@ -31,20 +30,22 @@ export const ButtonBadge = memo(({ badgeLabel, badgeSeverity, variant = 'primary
     }), [badgeLayout]);
     const onLayout = useCallback((e) => setBadgeLayout(e.nativeEvent.layout), []);
     const badgeCommonProps = useMemo(() => ({ severity: badgeSeverity, testID: ButtonBadgeTestId.badge }), [badgeSeverity]);
-    return (<View style={styles.root}>
-      <View style={[
+    return (<ButtonVariantContext.Provider value={variantContextValue}>
+      <View style={styles.root}>
+        <View style={[
             styles.contentContainer,
             props.iconOnly && styles.iconOnlyContainer,
         ]}>
-        <BaseButton variant={variant} {...props} {...buttonStyles}/>
+          <BaseButton variant={variant} {...props}/>
 
-        {badgeLabel ? (<Badge {...badgeCommonProps} style={badgeContainerStyle} onLayout={onLayout}>
-            {badgeLabel}
-          </Badge>) : (<Badge {...badgeCommonProps} dot style={styles.badgeDot}/>)}
+          {badgeLabel ? (<Badge {...badgeCommonProps} style={badgeContainerStyle} onLayout={onLayout}>
+              {badgeLabel}
+            </Badge>) : (<Badge {...badgeCommonProps} dot style={styles.badgeDot}/>)}
+        </View>
       </View>
-    </View>);
+    </ButtonVariantContext.Provider>);
 });
-const useStyles = makeStyles(() => ({
+const styles = StyleSheet.create(() => ({
     root: { flexDirection: 'row' },
     contentContainer: { flex: 1 },
     iconOnlyContainer: { flex: 0 },

package/dist/components/Button/ButtonSeverity.js

@@ -1,6 +1,6 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { BaseButton } from './BaseButton';
-import { useSeverityButtonStyles } from './styles';
+import { ButtonVariantContext } from './utils/ButtonVariantContext';
 /**
  * Button component
  * @param size - button size
@@ -17,6 +17,8 @@ import { useSeverityButtonStyles } from './styles';
  * @see BaseButton
  */
 export const ButtonSeverity = memo(({ severity, variant = 'basic', ...props }) => {
-    const buttonStyles = useSeverityButtonStyles(severity);
-    return <BaseButton variant={variant} {...props} {...buttonStyles}/>;
+    const variantContextValue = useMemo(() => ({ variant, severity }), [severity, variant]);
+    return (<ButtonVariantContext.Provider value={variantContextValue}>
+      <BaseButton variant={variant} {...props}/>
+    </ButtonVariantContext.Provider>);
 });

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

@@ -1,4 +1,4 @@
 export { Button } from './Button';
 export { ButtonBadge } from './ButtonBadge';
 export { ButtonSeverity } from './ButtonSeverity';
-export type { ButtonProps, ButtonBadgeProps, ButtonSeverityProps, VariantStyles, } from './types';
+export type { ButtonProps, ButtonBadgeProps, ButtonSeverityProps, } from './types';

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

@@ -1,5 +1,5 @@
 import type { Ref } from 'react';
-import type { ColorValue, PressableProps, TextStyle, View, ViewStyle } from 'react-native';
+import type { PressableProps, View } from 'react-native';
 import type { SvgSource } from '../../utils/SvgUniversal';
 import type { BadgeSeverity } from '../Badge/Badge';
 export type ButtonBaseVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
@@ -7,11 +7,7 @@ export type ButtonSeverityVariant = 'basic' | 'outlined' | 'text';
 export type ButtonVariant = ButtonBaseVariant | ButtonSeverityVariant;
 export type ButtonSize = 'xlarge' | 'large' | 'base' | 'small';
 export type ButtonShape = 'square' | 'circle';
-export type ButtonIconPosition = 
-/** @deprecated */
-'left'
-/** @deprecated */
- | 'right' | 'prefix' | 'postfix';
+export type ButtonIconPosition = 'prefix' | 'postfix';
 export interface BaseButtonProps<Variant extends ButtonVariant> extends PressableProps {
     /**
      * Controls button size
@@ -34,9 +30,6 @@ export interface BaseButtonProps<Variant extends ButtonVariant> extends Pressabl
     variant?: Variant;
     /**
      * Icon position
-     *
-     * Важно: значения left и right - deprecated!!! Используйте prefix и postfix
-     *
      * @default 'prefix'
      */
     iconPosition?: ButtonIconPosition;
@@ -69,22 +62,6 @@ export interface IconOnlyButtonProps<Variant extends ButtonVariant> extends Base
     label?: never;
 }
 export type ButtonProps<Variant extends ButtonVariant> = IconTextButton<Variant> | IconOnlyButtonProps<Variant>;
-export type LabelVariantStyles<Variant extends ButtonVariant> = Record<Required<BaseButtonProps<Variant>>['variant'], TextStyle>;
-export type PressedVariantStyles<Variant extends ButtonVariant> = Record<Required<BaseButtonProps<Variant>>['variant'], ViewStyle>;
-export type ContainerVariantStyles<Variant extends ButtonVariant> = Record<Required<BaseButtonProps<Variant>>['variant'], ViewStyle>;
-export type IconVariantStyles<Variant extends ButtonVariant> = Record<Required<BaseButtonProps<Variant>>['variant'], {
-    color: ColorValue;
-}>;
-export type PressedLabelVariantStyles<Variant extends ButtonVariant> = Record<Required<BaseButtonProps<Variant>>['variant'], {
-    color: ColorValue;
-}>;
-export interface VariantStyles<Variant extends ButtonVariant> {
-    containerVariantStyles: ContainerVariantStyles<Variant>;
-    pressedVariantStyles: PressedVariantStyles<Variant>;
-    labelVariantStyles: LabelVariantStyles<Variant>;
-    iconVariantStyles: IconVariantStyles<Variant>;
-    pressedLabelVariantStyles: PressedLabelVariantStyles<Variant>;
-}
 export type ButtonSeverity = 'info' | 'success' | 'warning' | 'danger';
 export interface ButtonSeverityProps {
     /**

package/dist/components/Button/utils/ButtonActivityIndicator.d.ts

@@ -1,3 +1,3 @@
-import type { BaseButtonProps, ButtonVariant } from '../types';
-export type ButtonActivityIndicatorProps<Variant extends ButtonVariant> = Pick<Required<BaseButtonProps<Variant>>, 'size'>;
-export declare const ButtonActivityIndicator: <Variant extends ButtonVariant>({ size, }: ButtonActivityIndicatorProps<Variant>) => import("react").JSX.Element;
+import type { BaseButtonProps } from '../types';
+export type ButtonActivityIndicatorProps = Pick<Required<BaseButtonProps<never>>, 'size'>;
+export declare const ButtonActivityIndicator: ({ size, }: ButtonActivityIndicatorProps) => import("react").JSX.Element;

package/dist/components/Button/utils/ButtonActivityIndicator.js

@@ -1,17 +1,21 @@
 import { ActivityIndicator } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { genericMemo } from '../../../utils/genericMemo';
-import { makeStyles } from '../../../utils/makeStyles';
-import { useTypeBasedStyle } from './useTypeBasedStyle';
 const ButtonActivityIndicatorComponent = ({ size, }) => {
-    const styles = useStyles();
-    const sizeBasedStyle = useTypeBasedStyle(size, styles);
-    return (<ActivityIndicator color={styles.activityIndicator.color} size={sizeBasedStyle.height ?? 'small'} testID='Button_ActivityIndicator'/>);
+    buttonActivityIndicatorStyles.useVariants({ size });
+    return (<ActivityIndicator color={buttonActivityIndicatorStyles.indicator.color} size={buttonActivityIndicatorStyles.indicator.height} testID='Button_ActivityIndicator'/>);
 };
-const useStyles = makeStyles(({ theme }) => ({
-    xlarge: { height: 21 },
-    large: { height: 21 },
-    base: { height: 17.5 },
-    small: { height: 14 },
-    activityIndicator: { color: theme.Button.Disabled.disabledButtonTextColor },
-}));
 export const ButtonActivityIndicator = genericMemo(ButtonActivityIndicatorComponent);
+const buttonActivityIndicatorStyles = StyleSheet.create(({ theme }) => ({
+    indicator: {
+        color: theme.Button.Disabled.disabledButtonTextColor,
+        variants: {
+            size: {
+                xlarge: { height: 21 },
+                large: { height: 21 },
+                base: { height: 17.5 },
+                small: { height: 14 },
+            },
+        },
+    },
+}));

package/dist/components/Button/utils/ButtonContainer.d.ts

@@ -1,7 +1,16 @@
-import type { ReactNode } from 'react';
-import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types';
-export type ButtonContainerComponentProps<Variant extends ButtonVariant> = Omit<BaseButtonProps<Variant>, 'size' | 'variant' | 'disabled' | 'loading' | 'shape' | 'Icon' | 'iconPosition' | 'label'> & Pick<Required<BaseButtonProps<Variant>>, 'size' | 'variant' | 'disabled' | 'loading' | 'shape'> & {
+import { type ReactNode } from 'react';
+import type { BaseButtonProps, ButtonShape, ButtonSize } from '../types';
+export interface ButtonContainerComponentProps {
+    readonly size: ButtonSize;
+    readonly shape: ButtonShape;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly isIconOnly: boolean;
+    readonly style?: BaseButtonProps<never>['style'];
+    readonly pressableRef?: BaseButtonProps<never>['pressableRef'];
     readonly children: ReactNode;
-} & Pick<VariantStyles<Variant>, 'containerVariantStyles' | 'pressedVariantStyles'>;
-export declare const ButtonContainerComponent: <Variant extends ButtonVariant>({ style, size, disabled, loading, variant, shape, iconOnly, children, containerVariantStyles, pressedVariantStyles, pressableRef, ...props }: ButtonContainerComponentProps<Variant>) => import("react").JSX.Element;
-export declare const ButtonContainer: <Variant extends ButtonVariant>({ style, size, disabled, loading, variant, shape, iconOnly, children, containerVariantStyles, pressedVariantStyles, pressableRef, ...props }: ButtonContainerComponentProps<Variant>) => import("react").JSX.Element;
+    readonly onPressIn?: BaseButtonProps<never>['onPressIn'];
+    readonly onPressOut?: BaseButtonProps<never>['onPressOut'];
+    [key: string]: unknown;
+}
+export declare const ButtonContainer: ({ style, size, disabled, loading, shape, isIconOnly, children, pressableRef, onPressIn, onPressOut, ...props }: ButtonContainerComponentProps) => import("react").JSX.Element;