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

package/dist/components/SelectButton/SelectButtonItem.js

@@ -1,58 +1,29 @@
 import { memo, useMemo, useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 import Animated, { interpolateColor, useAnimatedReaction, useAnimatedStyle, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
 import { scheduleOnRN } from 'react-native-worklets';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * Дочерний элемент компонента SelectButton. Не используется отдельно от SelectButton.
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=481-4393
  */
 export const SelectButtonItem = memo(({ index, position, onPress, disabled, label, onLayout, size = 'base', showIcon = true, Icon, }) => {
-    const styles = useStyles();
-    const iconSize = useMemo(() => {
-        switch (size) {
-            case 'small':
-                return styles.iconSmall;
-            case 'base':
-                return styles.iconBase;
-            case 'large':
-                return styles.iconLarge;
-            case 'xlarge':
-                return styles.iconXLarge;
-        }
-    }, [
-        size,
-        styles.iconBase,
-        styles.iconLarge,
-        styles.iconSmall,
-        styles.iconXLarge,
-    ]);
-    const labelFontSize = useMemo(() => {
-        switch (size) {
-            case 'small':
-                return styles.labelSmall;
-            case 'base':
-                return styles.labelBase;
-            case 'large':
-                return styles.labelLarge;
-            case 'xlarge':
-                return styles.labelXLarge;
-        }
-    }, [
-        size,
-        styles.labelBase,
-        styles.labelLarge,
-        styles.labelSmall,
-        styles.labelXLarge,
-    ]);
+    const sizeMap = useMemo(() => ({
+        small: { icon: styles.iconSmall, label: styles.labelSmall },
+        base: { icon: styles.iconBase, label: styles.labelBase },
+        large: { icon: styles.iconLarge, label: styles.labelLarge },
+        xlarge: { icon: styles.iconXLarge, label: styles.labelXLarge },
+    }), []);
+    const iconSize = sizeMap[size].icon;
+    const labelFontSize = sizeMap[size].label;
+    // Extract primitive color values before the worklet closure to avoid
+    // capturing the unistyles HostObject (non-serializable) in the worklet.
+    const textColor = styles.textColor.color;
+    const checkedTextColor = styles.checkedTextColor.color;
     const animatedColorStyle = useAnimatedStyle(() => {
         return {
-            color: interpolateColor(position.value, [index - 1, index, index + 1], [
-                styles.textColor.color,
-                styles.checkedTextColor.color,
-                styles.textColor.color,
-            ]),
+            color: interpolateColor(position.value, [index - 1, index, index + 1], [textColor, checkedTextColor, textColor]),
         };
     });
     const [isSelected, setIsSelected] = useState(false);
@@ -66,11 +37,13 @@ export const SelectButtonItem = memo(({ index, position, onPress, disabled, labe
             styles[size],
             disabled && styles.disabledContainer,
         ]} testID='SelectButtonItem_TouchableOpacity' onLayout={onLayout} onPress={onPress}>
-        {Icon && showIcon ? (<SvgUniversal height={iconSize.height} source={Icon} style={[
-                styles.textColor,
-                isSelected && styles.checkedTextColor,
-                disabled && styles.disabledTextColor,
-            ]} testID='SelectButtonItem_Icon' width={iconSize.width}/>) : null}
+        {Icon && showIcon ? (<SvgUniversal {...iconSize} source={Icon} testID='SelectButtonItem_Icon' uniProps={({ theme }) => ({
+                color: disabled
+                    ? theme.Button.Disabled.disabledButtonBorderColor
+                    : isSelected
+                        ? theme.Form.SelectButton.selectButtonIconActiveColor
+                        : theme.Form.SelectButton.selectButtonTextColor,
+            })}/>) : null}
         <Animated.Text numberOfLines={1} style={[
             styles.label,
             labelFontSize,
@@ -81,7 +54,7 @@ export const SelectButtonItem = memo(({ index, position, onPress, disabled, labe
         </Animated.Text>
       </TouchableOpacity>);
 });
-const useStyles = makeStyles(({ theme, typography, border, spacing, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, border, spacing, fonts }) => ({
     container: {
         flex: 1,
         flexDirection: 'row',

package/dist/components/Skeleton/Skeleton.js

@@ -2,14 +2,13 @@ import { memo, useCallback, useContext, useEffect, useRef } from 'react';
 import { View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
 import { SkeletonContext } from '../../utils/SkeletonContext';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * Используется для отображения контента в момент загрузки
  * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731
  */
 export const Skeleton = memo(({ style, testID, ...rest }) => {
-    const styles = useStyles();
     const { globalTranslateX, registerSkeleton, unregisterSkeleton, skeletonWidth, } = useContext(SkeletonContext);
     const skeletonRef = useRef(null);
     const skeletonX = useSharedValue(0);
@@ -44,7 +43,7 @@ export const Skeleton = memo(({ style, testID, ...rest }) => {
       </Animated.View>
     </View>);
 });
-const useStyles = makeStyles(({ border, theme }) => ({
+const styles = StyleSheet.create(({ border, theme }) => ({
     container: {
         borderRadius: border.Radius['rounded-lg'],
         overflow: 'hidden',

package/dist/components/Slider/Slider.js

@@ -2,8 +2,8 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { View, } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
 import { scheduleOnRN } from 'react-native-worklets';
-import { makeStyles } from '../../utils/makeStyles';
 const MIN_TRACK_SCALE = 0;
 const MAX_TRACK_SCALE = 100;
 const clamp = (val, min, max) => {
@@ -16,9 +16,7 @@ const clamp = (val, min, max) => {
  */
 export const Slider = memo(
 // TODO: refactor component to fix max-statements
-// eslint-disable-next-line max-statements
 ({ disabled = false, range = false, minPointerValueInit = 0, maxPointerValueInit = 100, onMinPointerValueChange, onMaxPointerValueChange, testID, ...rest }) => {
-    const styles = useStyles();
     const minPointX = useSharedValue(0);
     const maxPointX = useSharedValue(0);
     const trackWidth = useSharedValue(0);
@@ -26,8 +24,8 @@ export const Slider = memo(
     const [isPressed, setIsPressed] = useState(false);
     const prevMinPointX = useSharedValue(0);
     const prevMaxPointX = useSharedValue(0);
-    const pointerStyle = useMemo(() => [styles.point, isPressed && styles.hovered], [styles.point, isPressed, styles.hovered]);
-    const lineStyle = useMemo(() => [styles.line, isPressed && styles.hovered], [styles.line, isPressed, styles.hovered]);
+    const pointerStyle = useMemo(() => [styles.point, isPressed && styles.hovered], [isPressed]);
+    const lineStyle = useMemo(() => [styles.line, isPressed && styles.hovered], [isPressed]);
     const interpolateInitVal = useCallback((value, width) => {
         return interpolate(value, [MIN_TRACK_SCALE, MAX_TRACK_SCALE], [0, width - pointerWidth], Extrapolation.CLAMP);
     }, [pointerWidth]);
@@ -118,7 +116,7 @@ export const Slider = memo(
         </View>
       </View>);
 });
-const useStyles = makeStyles(({ theme, border }) => {
+const styles = StyleSheet.create(({ theme, border }) => {
     return {
         container: {
             width: '100%',

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

@@ -1,24 +1,11 @@
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { Text, Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../../utils/SvgUniversal';
-import { makeStyles } from '../../../utils/makeStyles';
 // Часть навигационного компонента Tabs
 // @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=888-13076&t=hIQjdrqPKK8BWYev-4
 //
 export const TabItem = memo(({ Icon, label, badge, index, onPress, disabled, active, onLayout }) => {
-    const styles = useStyles();
-    const getIconColor = useCallback((pressed) => {
-        if (disabled) {
-            return styles.disabledIcon.color;
-        }
-        if (pressed) {
-            return styles.pressedIcon.color;
-        }
-        if (active) {
-            return styles.activeIcon.color;
-        }
-        return styles.icon.color;
-    }, [disabled, active, styles]);
     return (<Pressable accessibilityRole='button' disabled={disabled} testID={TestId.Container + index} onLayout={onLayout} onPress={() => onPress(index)}>
         {({ pressed }) => (<View style={[
                 styles.container,
@@ -26,7 +13,15 @@ export const TabItem = memo(({ Icon, label, badge, index, onPress, disabled, act
                 active && styles.activeContainer,
                 disabled && styles.disabledContainer,
             ]}>
-            {Icon ? (<SvgUniversal color={getIconColor(pressed)} height={styles.icon.height} source={Icon} width={styles.icon.width}/>) : null}
+            {Icon ? (<SvgUniversal {...styles.icon} source={Icon} uniProps={({ theme }) => ({
+                    color: disabled
+                        ? theme.Button.Disabled.disabledButtonTextColor
+                        : pressed
+                            ? theme.Panel.TabView.tabviewHeaderHoverTextColor
+                            : active
+                                ? theme.Panel.TabView.tabviewHeaderActiveTextColor
+                                : theme.Panel.TabView.tabviewHeaderTextColor,
+                })}/>) : null}
             <Text numberOfLines={1} style={[
                 styles.text,
                 active && styles.activeText,
@@ -39,7 +34,7 @@ export const TabItem = memo(({ Icon, label, badge, index, onPress, disabled, act
           </View>)}
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
     container: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -60,11 +55,7 @@ const useStyles = makeStyles(({ theme, typography, fonts }) => ({
     icon: {
         width: theme.Menu.Item.menuitemSubmenuIconFontSize,
         height: theme.Menu.Item.menuitemSubmenuIconFontSize,
-        color: theme.Panel.TabView.tabviewHeaderTextColor,
     },
-    pressedIcon: { color: theme.Panel.TabView.tabviewHeaderHoverTextColor },
-    activeIcon: { color: theme.Panel.TabView.tabviewHeaderActiveTextColor },
-    disabledIcon: { color: theme.Button.Disabled.disabledButtonTextColor },
     text: {
         fontFamily: fonts.primary,
         fontSize: typography.Size['text-base'],

package/dist/components/Tabs/Tabs.js

@@ -1,13 +1,12 @@
 import { memo, useEffect, useState } from 'react';
 import { View, } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { TabItem } from './TabItem/TabItem';
 // Навигационный компонент Tabs
 // @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=888-13076&t=hIQjdrqPKK8BWYev-4
 //
 export const Tabs = memo(({ items, disabled = false, activeIndex, onChange, testID, ...rest }) => {
-    const styles = useStyles();
     const [tabsLayouts, setTabsLayouts] = useState({});
     const lineSharedValue = useSharedValue(activeIndex);
     const animatedStyles = useAnimatedStyle(() => {
@@ -32,7 +31,7 @@ export const Tabs = memo(({ items, disabled = false, activeIndex, onChange, test
         <Animated.View style={[styles.line, animatedStyles]}/>
       </View>);
 });
-const useStyles = makeStyles(({ theme, border }) => ({
+const styles = StyleSheet.create(({ theme, border }) => ({
     container: {
         flexDirection: 'row',
         gap: theme.Panel.TabView.tabviewHeaderSpacing,

package/dist/components/Tag/Tag.js

@@ -1,27 +1,33 @@
 import { memo } from 'react';
 import { View, Text, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
+const tagIconColor = {
+    basic: (t) => t.Misc.Badge.badgeTextColor,
+    info: (t) => t.Misc.Badge.badgeInfoTextColor,
+    success: (t) => t.Misc.Badge.badgeSuccessTextColor,
+    warning: (t) => t.Misc.Badge.badgeWarningTextColor,
+    danger: (t) => t.Misc.Badge.badgeDangerTextColor,
+    secondary: (t) => t.Misc.Badge.badgeTextColor,
+};
 /**
  * Используется для маркировки элементов интерфейса
  * @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();
+    tagStyles.useVariants({ severity });
     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}>
+        <View style={[tagStyles.container, rounded && tagStyles.roundedContainer]} testID={TagTestId.innerContainer}>
+          {showIcon && Icon ? (<SvgUniversal {...tagStyles.icon} source={Icon} testID={TagTestId.icon} uniProps={({ theme }) => ({
+                color: tagIconColor[severity](theme),
+            })}/>) : null}
+          <Text numberOfLines={1} style={tagStyles.text} testID={TagTestId.text}>
             {text}
           </Text>
         </View>
       </View>);
 });
-const useStyles = makeStyles(({ theme, border, spacing, typography, fonts }) => ({
+const tagStyles = StyleSheet.create(({ theme, border, spacing, typography, fonts }) => ({
     container: {
         alignSelf: 'flex-start',
         flexDirection: 'row',
@@ -30,12 +36,29 @@ const useStyles = makeStyles(({ theme, border, spacing, typography, fonts }) =>
         paddingHorizontal: theme.Misc.Tag.tagPadding,
         height: theme.Misc.Tag.tagHeight,
         borderRadius: border.Radius['rounded-lg'],
+        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,
+                },
+                secondary: { backgroundColor: theme.Surface['surface-border'] },
+            },
+        },
     },
     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,
@@ -43,25 +66,17 @@ const useStyles = makeStyles(({ theme, border, spacing, typography, fonts }) =>
         includeFontPadding: false,
         verticalAlign: 'middle',
         fontFamily: fonts.primary,
+        variants: {
+            severity: {
+                basic: { color: theme.Misc.Badge.badgeTextColor },
+                info: { color: theme.Misc.Badge.badgeInfoTextColor },
+                success: { color: theme.Misc.Badge.badgeSuccessTextColor },
+                warning: { color: theme.Misc.Badge.badgeWarningTextColor },
+                danger: { color: theme.Misc.Badge.badgeDangerTextColor },
+                secondary: { color: theme.Misc.Badge.badgeTextColor },
+            },
+        },
     },
-    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',

package/dist/components/Timer/Timer.js

@@ -2,7 +2,7 @@ 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 { StyleSheet } from 'react-native-unistyles';
 import { TimerFlip } from './TimerFlip';
 import { COUNTER_SIZE } from './constants';
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -12,7 +12,6 @@ const BORDER_WIDTH = 2;
  * @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;
@@ -52,7 +51,7 @@ export const Timer = memo(({ countFrom, onFinish }) => {
       <TimerFlip value={currentTimerValue}/>
     </View>);
 });
-const useStyles = makeStyles(({ typography }) => ({
+const styles = StyleSheet.create(({ typography }) => ({
     container: {
         overflow: 'hidden',
         width: COUNTER_SIZE,

package/dist/components/Timer/TimerFlip.js

@@ -1,11 +1,10 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, Text } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
 import { scheduleOnRN } from 'react-native-worklets';
-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);
@@ -43,7 +42,7 @@ export const TimerFlip = memo(({ value, duration = 300 }) => {
       </Animated.View>
     </View>);
 });
-const useStyles = makeStyles(({ typography, fonts }) => ({
+const styles = StyleSheet.create(({ typography, fonts }) => ({
     container: {
         overflow: 'hidden',
         width: COUNTER_SIZE,

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,39 +1,26 @@
 import { memo, useCallback, useMemo, useState } from 'react';
 import { Pressable, Text, View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 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);
+export const ToggleButton = memo(({ onPress, checked = false, disabled = false, iconOnly: iconOnlyProp, iconPos = 'left', label, size = 'base', style, Icon, testID, ...rest }) => {
     const [pressed, setPressed] = useState(false);
-    const stateStyles = useStateStyles(checked, disabled, pressed);
+    toggleStyles.useVariants({ size, checked, pressed, disabled });
     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 icon = Icon ? (<SvgUniversal {...toggleStyles.icon} source={Icon} testID={ToggleButtonTestId.icon}/>) : null;
     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}>
+    return (<Pressable disabled={disabled} style={[toggleStyles.container, style]} testID={testID || ToggleButtonTestId.root} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut} {...rest}>
         <View style={[
-            styles.contentContainer,
-            styles[size],
-            iconOnly && styles.iconOnly,
-            stateStyles.contentContainer,
+            toggleStyles.contentContainer,
+            iconOnly && toggleStyles.iconOnly,
         ]} testID={ToggleButtonTestId.container}>
           {iconOnly ? (icon) : (<>
               {iconPos === 'left' && icon}
-              <Text style={[styles.label, labelSize, stateStyles.label]} testID={ToggleButtonTestId.text}>
+              <Text style={toggleStyles.label} testID={ToggleButtonTestId.text}>
                 {label}
               </Text>
               {Icon && iconPos === 'right' ? icon : null}
@@ -41,12 +28,42 @@ export const ToggleButton = memo(({ onPress, checked, disabled, iconOnly: iconOn
         </View>
       </Pressable>);
 });
-const useStyles = makeStyles(({ theme, spacing, border, fonts }) => ({
+const toggleStyles = StyleSheet.create(({ theme, spacing, border, fonts, typography }) => ({
     container: {
         alignSelf: 'flex-start',
         borderRadius: border.Radius['rounded-full'],
         borderWidth: border.Width.border,
         overflow: 'hidden',
+        variants: {
+            checked: {
+                true: {
+                    borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor,
+                },
+                false: {
+                    borderColor: theme.Form.ToggleButton.toggleButtonBorderColor,
+                },
+            },
+            pressed: {
+                true: { borderColor: theme.Form.ToggleButton.toggleButtonHoverBg },
+                false: {},
+            },
+            disabled: {
+                true: {
+                    borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+                    opacity: 0.6,
+                },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                checked: 'true',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor,
+                },
+            },
+        ],
     },
     contentContainer: {
         flexDirection: 'row',
@@ -56,18 +73,47 @@ const useStyles = makeStyles(({ theme, spacing, border, fonts }) => ({
         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,
+        variants: {
+            size: {
+                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,
+                },
+            },
+            checked: {
+                true: {
+                    backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg,
+                },
+                false: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg },
+            },
+            pressed: {
+                true: {
+                    backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg,
+                },
+                false: {},
+            },
+            disabled: {
+                true: { backgroundColor: theme.Button.Disabled.disabledButtonBg },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                checked: 'true',
+                pressed: 'true',
+                styles: {
+                    backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg,
+                },
+            },
+        ],
     },
     iconOnly: {
         aspectRatio: 1,
@@ -75,7 +121,85 @@ const useStyles = makeStyles(({ theme, spacing, border, fonts }) => ({
         paddingVertical: 0,
         justifyContent: 'center',
     },
-    label: { flexShrink: 1, fontFamily: fonts.primary },
+    icon: {
+        variants: {
+            size: {
+                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'],
+                },
+            },
+            checked: {
+                true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor },
+                false: { color: theme.Form.ToggleButton.toggleButtonTextColor },
+            },
+            pressed: {
+                true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor },
+                false: {},
+            },
+            disabled: {
+                true: { color: theme.Button.Disabled.disabledButtonTextColor },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                checked: 'true',
+                pressed: 'true',
+                styles: {
+                    color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor,
+                },
+            },
+        ],
+    },
+    label: {
+        flexShrink: 1,
+        fontFamily: fonts.primary,
+        fontWeight: '600',
+        includeFontPadding: false,
+        verticalAlign: 'middle',
+        variants: {
+            size: {
+                xlarge: { fontSize: typography.Size['text-2xl'] },
+                large: { fontSize: typography.Size['text-xl'] },
+                base: { fontSize: typography.Size['text-base'] },
+                small: { fontSize: typography.Size['text-sm'] },
+            },
+            checked: {
+                true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor },
+                false: { color: theme.Form.ToggleButton.toggleButtonTextColor },
+            },
+            pressed: {
+                true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor },
+                false: {},
+            },
+            disabled: {
+                true: { color: theme.Button.Disabled.disabledButtonTextColor },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                checked: 'true',
+                pressed: 'true',
+                styles: {
+                    color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor,
+                },
+            },
+        ],
+    },
 }));
 export const ToggleButtonTestId = {
     root: 'ToggleButton',