@itcase/ui-react-native 1.10.86 → 1.10.87

package/src/components/Input/Input.interface.ts

@@ -40,17 +40,6 @@ interface InputAppearanceProps {
   width?: WidthProps
 }
 
-type InputAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
-type InputConfig = AppearanceConfig<AppearanceKeysState, InputAppearanceProps>
-type InputAppearance = InputConfig['appearance']
-type InputAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  InputAppearanceProps,
-  'borderColor' | 'fill'
->
-type InputAppearanceShape = Partial<
-  Record<AppearanceShapeKey, Partial<Pick<InputAppearanceProps, 'shape'>>>
->
 type InputAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   InputAppearanceProps,
@@ -66,8 +55,7 @@ interface InputProps extends InputAppearanceProps {
   onFocus?: (event: TextInputFocusEvent) => void
   onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void
   after?: ReactNode
-  appearance?: InputAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   before?: ReactNode
   maxLength?: number
   placeholder?: string
@@ -75,6 +63,18 @@ interface InputProps extends InputAppearanceProps {
   value?: string
 }
 
+type InputConfig = AppearanceConfig<AppearanceKeysState, InputAppearanceProps>
+type InputAppearance = InputConfig['appearance']
+type InputAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  InputAppearanceProps,
+  'borderColor' | 'fill'
+>
+type InputAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<InputAppearanceProps, 'shape'>>>
+>
+type InputAppearanceKey = NonNullable<InputProps['appearance']>
+
 type InputGalleryStory = ComponentGalleryArgs &
   Pick<InputProps, 'isDisabled' | 'placeholder' | 'value'>
 

package/src/components/Input/Input.tsx

@@ -26,7 +26,6 @@ function Input(props: InputProps) {
   const {
     appearance = 'defaultPrimary sizeXL solid rounded',
     maxLength,
-    appearanceStyle,
     placeholder,
     style,
     value,
@@ -42,19 +41,12 @@ function Input(props: InputProps) {
   } = props
 
   const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    let result = isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-
     if (isError) {
-      result = mergeAppearanceKeys(result, 'errorPrimary')
+      return mergeAppearanceKeys(appearance, 'errorPrimary')
     }
 
-    return result
-  }, [appearance, appearanceStyle, isError])
+    return appearance
+  }, [appearance, isError])
 
   const appearanceConfig = useAppearanceConfig(
     resolvedAppearance,

package/src/components/InputNumber/InputNumber.interface.ts

@@ -16,7 +16,7 @@ import type {
 
 import type { ComponentGalleryArgs } from '../../storybook'
 import type { buttonSizePropsType } from '../Button/styles/buttonSize'
-import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { iconSizePropsType } from '../Icon/styles/iconSize'
 import type { inputNumberShapePropsType } from './styles/inputNumberShape'
 import type { inputNumberSizePropsType } from './styles/inputNumberSize'
@@ -26,7 +26,7 @@ interface InputNumberAppearanceProps {
   buttonFill?: FillProps
   buttonSize?: buttonSizePropsType
   fill?: FillProps
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   iconFill?: FillProps
   iconFillIcon?: ItemFillActiveProps
   iconMinus?: SvgIconComponent
@@ -40,30 +40,13 @@ interface InputNumberAppearanceProps {
   width?: WidthProps
 }
 
-type InputNumberAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
-type InputNumberConfig = AppearanceConfig<
-  AppearanceKeysState,
-  InputNumberAppearanceProps
->
-type InputNumberAppearance = InputNumberConfig['appearance']
-
-type InputNumberType = 'custom' | 'native'
-
-interface OnChangeValueParams {
-  mode?: 'button' | 'input'
-  operation?: 'minus' | 'plus'
-  text?: string
-}
-
 interface InputNumberProps extends InputNumberAppearanceProps {
   isDisabled?: boolean
   isError?: boolean
   onBlur?: (event: TextInputFocusEvent) => void
   onChange?: (value: number) => void
   onFocus?: (event: TextInputFocusEvent) => void
-  appearance?: InputNumberAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   max?: number
   min?: number
   step?: number
@@ -72,6 +55,21 @@ interface InputNumberProps extends InputNumberAppearanceProps {
   value?: number
 }
 
+type InputNumberConfig = AppearanceConfig<
+  AppearanceKeysState,
+  InputNumberAppearanceProps
+>
+type InputNumberAppearance = InputNumberConfig['appearance']
+type InputNumberAppearanceKey = NonNullable<InputNumberProps['appearance']>
+
+type InputNumberType = 'custom' | 'native'
+
+interface OnChangeValueParams {
+  mode?: 'button' | 'input'
+  operation?: 'minus' | 'plus'
+  text?: string
+}
+
 type InputNumberGalleryStory = ComponentGalleryArgs &
   Pick<InputNumberProps, 'type' | 'value'>
 

package/src/components/InputNumber/InputNumber.tsx

@@ -38,7 +38,6 @@ function InputNumber(props: InputNumberProps) {
     type = 'custom',
     min = 0,
     max = Number.MAX_SAFE_INTEGER,
-    appearanceStyle,
     step = 1,
     style,
     value = 0,
@@ -101,19 +100,12 @@ function InputNumber(props: InputNumberProps) {
   }, [onChangeValue])
 
   const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    let result = isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-
     if (isError) {
-      result = mergeAppearanceKeys(result, 'errorPrimary')
+      return mergeAppearanceKeys(appearance, 'errorPrimary')
     }
 
-    return result
-  }, [appearance, appearanceStyle, isError])
+    return appearance
+  }, [appearance, isError])
 
   const appearanceConfig = useAppearanceConfig(
     resolvedAppearance,

package/src/components/InputPassword/InputPassword.interface.ts

@@ -19,7 +19,7 @@ import type {
 } from '@itcase/types-ui'
 
 import type { ComponentGalleryArgs } from '../../storybook'
-import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { iconSizePropsType } from '../Icon/styles/iconSize'
 import type { inputPasswordShapePropsType } from './styles/inputPasswordShape'
 import type { inputPasswordSizePropsType } from './styles/inputPasswordSize'
@@ -28,7 +28,7 @@ interface InputPasswordAppearanceProps {
   borderColor?: BorderColorProps
   caret?: ItemFillActiveProps
   fill?: FillProps
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   iconFill?: ItemFillActiveProps
   iconRevealableHide?: SvgIconComponent
   iconRevealableShow?: SvgIconComponent
@@ -42,24 +42,6 @@ interface InputPasswordAppearanceProps {
   width?: WidthProps
 }
 
-type InputPasswordAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
-type InputPasswordConfig = AppearanceConfig<
-  AppearanceKeysState,
-  InputPasswordAppearanceProps
->
-type InputPasswordAppearance = InputPasswordConfig['appearance']
-type InputPasswordAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  InputPasswordAppearanceProps,
-  'borderColor' | 'fill'
->
-type InputPasswordAppearanceShape = Partial<
-  Record<
-    AppearanceShapeKey,
-    Partial<Pick<InputPasswordAppearanceProps, 'shape'>>
-  >
->
 type InputPasswordAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   InputPasswordAppearanceProps,
@@ -74,14 +56,31 @@ interface InputPasswordProps extends InputPasswordAppearanceProps {
   onBlur?: (event: TextInputFocusEvent) => void
   onChangeText?: (text: string) => void
   onFocus?: (event: TextInputFocusEvent) => void
-  appearance?: InputPasswordAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   maxLength?: number
   placeholder?: string
   style?: StyleProp<ViewStyle>
   value?: string
 }
 
+type InputPasswordConfig = AppearanceConfig<
+  AppearanceKeysState,
+  InputPasswordAppearanceProps
+>
+type InputPasswordAppearance = InputPasswordConfig['appearance']
+type InputPasswordAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  InputPasswordAppearanceProps,
+  'borderColor' | 'fill'
+>
+type InputPasswordAppearanceShape = Partial<
+  Record<
+    AppearanceShapeKey,
+    Partial<Pick<InputPasswordAppearanceProps, 'shape'>>
+  >
+>
+type InputPasswordAppearanceKey = NonNullable<InputPasswordProps['appearance']>
+
 type InputPasswordGalleryStory = ComponentGalleryArgs &
   Pick<
     InputPasswordProps,

package/src/components/InputPassword/InputPassword.tsx

@@ -36,7 +36,6 @@ function InputPassword(props: InputPasswordProps) {
   const {
     appearance = 'defaultPrimary sizeXL solid rounded',
     maxLength,
-    appearanceStyle,
     placeholder,
     style,
     value,
@@ -58,19 +57,12 @@ function InputPassword(props: InputPasswordProps) {
   }, [])
 
   const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    let result = isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-
     if (isError) {
-      result = mergeAppearanceKeys(result, 'errorPrimary')
+      return mergeAppearanceKeys(appearance, 'errorPrimary')
     }
 
-    return result
-  }, [appearance, appearanceStyle, isError])
+    return appearance
+  }, [appearance, isError])
 
   const appearanceConfig = useAppearanceConfig(
     resolvedAppearance,

package/src/components/Label/Label.interface.ts

@@ -2,7 +2,6 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
 import type {
   AppearanceConfig,
-  AppearanceKeys,
   AppearanceKeysDefault,
   AppearancePartialRecord,
   AppearanceRecord,
@@ -48,7 +47,6 @@ interface LabelAppearanceProps {
   width?: WidthProps
 }
 
-type LabelAppearanceKey = AppearanceKeys | CompositeAppearanceKeys
 type LabelConfig = AppearanceConfig<AppearanceKeysDefault, LabelAppearanceProps>
 type LabelAppearance = LabelConfig['appearance']
 type LabelAppearanceStyle = AppearanceRecord<
@@ -76,7 +74,7 @@ type LabelAppearanceSize = AppearancePartialRecord<
 interface LabelProps extends LabelAppearanceProps {
   isDisabled?: boolean
   isSkeleton?: boolean
-  appearance?: LabelAppearanceKey
+  appearance?: CompositeAppearanceKeys
   dataTestId?: string
   iconAfter?: SvgIconComponent
   iconBefore?: SvgIconComponent
@@ -84,6 +82,8 @@ interface LabelProps extends LabelAppearanceProps {
   text?: string
 }
 
+type LabelAppearanceKey = NonNullable<LabelProps['appearance']>
+
 type LabelGalleryStory = ComponentGalleryArgs &
   Pick<LabelProps, 'isDisabled' | 'isSkeleton' | 'text'> & {
     iconAfter?: boolean

package/src/components/Label/Label.tsx

@@ -77,7 +77,6 @@ function Label(props: LabelProps) {
   const isWhiteText =
     !textColor &&
     (hasGradient ||
-      appearance === 'surfaceQuaternary' ||
       appearance?.includes('surfaceQuaternary') ||
       appearance?.includes('gradientPrimary'))
 

package/src/components/Link/Link.interface.ts

@@ -6,6 +6,7 @@ import type {
   AppearanceKeysDefault,
   AppearanceRecord,
   AppearanceStyleKey,
+  CompositeAppearanceKeys,
   FillProps,
   TextColorProps,
   TextSizeProps,
@@ -20,9 +21,6 @@ interface LinkAppearanceProps {
   textWeight?: TextWeightProps
 }
 
-type LinkAppearanceKey = AppearanceKeysDefault
-type LinkConfig = AppearanceConfig<AppearanceKeysDefault, LinkAppearanceProps>
-type LinkAppearance = LinkConfig['appearance']
 type LinkAppearanceStyle = AppearanceRecord<
   AppearanceStyleKey,
   LinkAppearanceProps,
@@ -33,8 +31,7 @@ interface LinkProps extends LinkAppearanceProps {
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: LinkAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceKeys
   before?: ReactNode
   children?: ReactNode
   href?: string
@@ -44,6 +41,10 @@ interface LinkProps extends LinkAppearanceProps {
   underline?: boolean
 }
 
+type LinkConfig = AppearanceConfig<AppearanceKeysDefault, LinkAppearanceProps>
+type LinkAppearance = LinkConfig['appearance']
+type LinkAppearanceKey = NonNullable<LinkProps['appearance']>
+
 type LinkStoryArgs = Omit<LinkProps, 'appearance'> & {
   appearanceStyle: string
   appearanceType: string

package/src/components/Link/Link.tsx

@@ -1,11 +1,10 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { Alert, Linking, Pressable } from 'react-native'
 
 import {
   useAppearanceConfig,
   useDevicePropsGenerator,
 } from '@itcase/ui-core/hooks'
-import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { Text } from '../Text'
@@ -24,6 +23,7 @@ linkConfig.setAppearance(linkAppearance)
 
 function Link(props: LinkProps) {
   const {
+    appearance = 'accentPrimary sizeM solid rounded',
     text,
     href,
     link,
@@ -36,12 +36,8 @@ function Link(props: LinkProps) {
     children,
   } = props
 
-  const resolvedAppearance = useMemo(() => {
-    return mergeAppearanceKeys(props.appearance, props.appearanceStyle)
-  }, [props.appearance, props.appearanceStyle])
-
   const appearanceConfig = useAppearanceConfig(
-    resolvedAppearance,
+    appearance,
     linkConfig,
     isDisabled,
   )

package/src/components/Link/stories/Link.stories.tsx

@@ -6,7 +6,7 @@ const meta = {
   title: 'Atoms / Link',
   component: Link,
   args: {
-    appearance: 'accentPrimary',
+    appearance: 'accentPrimary sizeM solid rounded',
     text: 'Link',
     href: 'https://itcase.pro',
   },

package/src/components/List/List.interface.ts

@@ -40,7 +40,6 @@ type ListAppearanceSize = AppearancePartialRecord<
   ListAppearanceProps,
   'size'
 >
-type ListAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 
 interface ListContextValue {
   bulletFill?: FillProps
@@ -51,7 +50,7 @@ interface ListContextValue {
 }
 
 interface ListProps extends ListAppearanceProps {
-  appearance?: ListAppearanceKey
+  appearance?: CompositeAppearanceKeys
   bulletFill?: FillProps
   bulletSize?: TextSizeProps
   bulletTextColor?: TextColorProps
@@ -79,6 +78,8 @@ interface ListItemProps extends ListItemAppearanceProps {
   text?: string
 }
 
+type ListAppearanceKey = NonNullable<ListProps['appearance']>
+
 export type {
   ListAppearance,
   ListAppearanceKey,

package/src/components/Loader/Loader.interface.ts

@@ -50,11 +50,9 @@ type LoaderAppearanceSize = AppearancePartialRecord<
   LoaderAppearanceProps,
   'size' | 'textSize'
 >
-type LoaderAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 
 interface LoaderProps extends LoaderAppearanceProps {
-  appearance?: LoaderAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceKeys
   loaderColor?: ColorValue
   loaderSize?: number | 'large' | 'small'
   loaderTextColor?: TextColorProps
@@ -65,6 +63,8 @@ interface LoaderProps extends LoaderAppearanceProps {
   text?: string
 }
 
+type LoaderAppearanceKey = NonNullable<LoaderProps['appearance']>
+
 type LoaderGalleryStory = ComponentGalleryArgs & Pick<LoaderProps, 'text'>
 
 type LoaderStoryArgs = Omit<LoaderProps, 'appearance'> & {

package/src/components/Loader/Loader.tsx

@@ -1,11 +1,9 @@
-import { useMemo } from 'react'
 import { ActivityIndicator, View } from 'react-native'
 
 import {
   useAppearanceConfig,
   useDevicePropsGenerator,
 } from '@itcase/ui-core/hooks'
-import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { Text } from '../Text'
@@ -66,7 +64,6 @@ function Loader(props: LoaderProps) {
   const {
     appearance = 'accentPrimary sizeL solid rounded',
     text,
-    appearanceStyle,
     loaderColor,
     loaderSize,
     loaderTextColor,
@@ -74,16 +71,7 @@ function Loader(props: LoaderProps) {
     style,
   } = props
 
-  const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    return isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-  }, [appearance, appearanceStyle])
-
-  const appearanceConfig = useAppearanceConfig(resolvedAppearance, loaderConfig)
+  const appearanceConfig = useAppearanceConfig(appearance, loaderConfig)
   const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
   const { size, fill, borderColor, textColor, textSize, itemFill, shape } =

package/src/components/MenuItem/MenuItem.interface.ts

@@ -30,13 +30,13 @@ interface MenuItemAppearanceProps {
   fill?: FillProps
   fillActive?: FillActiveProps
   iconAfter?: SvgIconComponent
-  iconAfterAppearance?: string
+  iconAfterAppearance?: IconProps['appearance']
   iconAfterFill?: IconProps['fill']
   iconAfterFillIcon?: IconProps['iconFill']
   iconAfterShape?: IconProps['shape']
   iconAfterSize?: IconProps['size']
   iconBefore?: SvgIconComponent
-  iconBeforeAppearance?: string
+  iconBeforeAppearance?: IconProps['appearance']
   iconBeforeFill?: IconProps['fill']
   iconBeforeFillIcon?: IconProps['iconFill']
   iconBeforeShape?: IconProps['shape']
@@ -70,14 +70,13 @@ type MenuItemAppearanceSize = AppearancePartialRecord<
   MenuItemAppearanceProps,
   'iconAfterSize' | 'iconBeforeSize' | 'labelTextSize' | 'size'
 >
-type MenuItemAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 
 interface MenuItemProps extends MenuItemAppearanceProps {
   isActive?: boolean
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: MenuItemAppearanceKey
+  appearance?: CompositeAppearanceKeys
   before?: ReactNode
   children?: ReactNode
   desc?: string
@@ -90,6 +89,8 @@ interface MenuItemProps extends MenuItemAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type MenuItemAppearanceKey = NonNullable<MenuItemProps['appearance']>
+
 export type {
   MenuItemAppearance,
   MenuItemAppearanceKey,

package/src/components/Pagination/Pagination.tsx

@@ -7,6 +7,7 @@ import {
 
 import { tokens } from '../../styles/tokens'
 import { Button } from '../Button'
+import type { ButtonProps } from '../Button/Button.interface'
 import { Text } from '../Text'
 import { paginationAppearance } from './Pagination.appearance'
 import type { PaginationConfig, PaginationProps } from './Pagination.interface'
@@ -46,14 +47,15 @@ function Pagination(props: PaginationProps) {
   const sizeKey = size || DEFAULT_PAGINATION_SIZE
   const isPrevDisabled = isDisabled || page <= 1
   const isNextDisabled = isDisabled || page >= pageCount
+  const paginationButtonAppearance =
+    `surfaceSecondary size${sizeKey.toUpperCase()} solid rounded` as ButtonProps['appearance']
 
   return (
     <View
       style={[styles.pagination, styles[`pagination_size_${sizeKey}`], style]}
     >
       <Button
-        appearance="surfaceSecondary"
-        size={sizeKey}
+        appearance={paginationButtonAppearance}
         label="‹"
         isDisabled={isPrevDisabled}
         onPress={() => {
@@ -81,8 +83,7 @@ function Pagination(props: PaginationProps) {
         / {pageCount}
       </Text>
       <Button
-        appearance="surfaceSecondary"
-        size={sizeKey}
+        appearance={paginationButtonAppearance}
         label="›"
         isDisabled={isNextDisabled}
         onPress={() => {

package/src/components/Pressable/Pressable.interface.ts

@@ -8,7 +8,7 @@ import type {
   AppearanceShapeKey,
   AppearanceStyleKey,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceWithoutSizeKeys,
   FillActiveProps,
   FillProps,
   ShapeProps,
@@ -41,7 +41,7 @@ type PressableAppearanceShape = Partial<
 interface PressableProps extends PressableAppearanceProps {
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
-  appearance?: string | AppearanceKeysDefault | CompositeAppearanceKeys
+  appearance?: CompositeAppearanceWithoutSizeKeys
   children?: ReactNode
   style?: StyleProp<ViewStyle>
 }

package/src/components/Pressable/stories/PressableGallery.stories.tsx

@@ -60,7 +60,7 @@ export const WithIcon: Story = {
         onPress={() => undefined}
       >
         <Icon
-          appearance="surfacePrimary size24_24 ghost"
+          appearance="surfacePrimary size24_24 ghost rounded"
           SVGIcon={icons24.Placeholder.Default}
         />
       </Pressable>

package/src/components/Radio/Radio.interface.ts

@@ -40,19 +40,6 @@ interface RadioAppearanceProps {
   size?: radioSizePropsType
 }
 
-type RadioAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
-type RadioConfig = AppearanceConfig<AppearanceKeysState, RadioAppearanceProps>
-type RadioAppearance = RadioConfig['appearance']
-type RadioAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  RadioAppearanceProps,
-  'borderColor' | 'borderRadioColor' | 'borderRadioColorActive' | 'fill'
->
-type RadioAppearanceShape = AppearancePartialRecord<
-  AppearanceShapeKey,
-  RadioAppearanceProps,
-  'shape'
->
 type RadioAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   RadioAppearanceProps,
@@ -64,14 +51,27 @@ interface RadioProps extends RadioAppearanceProps {
   isChecked?: boolean
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
-  appearance?: RadioAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   checked?: boolean
   desc?: string
   label?: string
   style?: StyleProp<ViewStyle>
 }
 
+type RadioConfig = AppearanceConfig<AppearanceKeysState, RadioAppearanceProps>
+type RadioAppearance = RadioConfig['appearance']
+type RadioAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  RadioAppearanceProps,
+  'borderColor' | 'borderRadioColor' | 'borderRadioColorActive' | 'fill'
+>
+type RadioAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  RadioAppearanceProps,
+  'shape'
+>
+type RadioAppearanceKey = NonNullable<RadioProps['appearance']>
+
 type RadioGalleryStory = ComponentGalleryArgs &
   Pick<RadioProps, 'checked' | 'desc' | 'isDisabled' | 'label'>