@itcase/ui-react-native 1.10.86 → 1.10.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-react-native",
-  "version": "1.10.86",
+  "version": "1.10.87",
   "license": "MIT",
   "private": false,
   "main": "src/index.tsx",
@@ -60,5 +60,5 @@
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.2.2"
   },
-  "gitHead": "1ee5a36744ff147b476c89a70aed69c05509b56a"
+  "gitHead": "4cd806876975ef1dce5942b06b865b7a7cdc81cb"
 }

package/src/components/Avatar/Avatar.interface.ts

@@ -44,7 +44,7 @@ interface AvatarAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
   icon?: SvgIconComponent
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   iconFill?: IconProps['fill']
   iconFillSize?: IconProps['fillSize']
   iconItemFill?: IconProps['iconFill']
@@ -75,13 +75,12 @@ type AvatarAppearanceSize = AppearancePartialRecord<
   AvatarAppearanceProps,
   'badgeAppearanceSize' | 'iconFillSize' | 'size' | 'textSize'
 >
-type AvatarAppearanceKey = AppearanceKeysPx | CompositeAppearancePxKeys
 
 interface AvatarProps extends AvatarAppearanceProps {
   isSkeleton?: boolean
   onPress?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: AvatarAppearanceKey
+  appearance?: CompositeAppearancePxKeys
   before?: ReactNode
   charsTextColor?: TextColorProps
   charsTextSize?: TextSizeProps
@@ -95,6 +94,8 @@ interface AvatarProps extends AvatarAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type AvatarAppearanceKey = NonNullable<AvatarProps['appearance']>
+
 type AvatarGalleryStory = ComponentGalleryArgs &
   Pick<
     AvatarProps,

package/src/components/Badge/Badge.interface.ts

@@ -32,7 +32,7 @@ interface BadgeAppearanceProps {
   borderColor?: BorderColorProps
   dotFill?: IconProps['iconFill']
   fill?: FillProps
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   iconFill?: IconProps['iconFill']
   iconShape?: IconProps['shape']
   iconSize?: IconProps['iconSize']
@@ -55,10 +55,8 @@ type BadgeAppearanceSize = AppearancePartialRecord<
   BadgeAppearanceProps,
   'badgeTextSize' | 'iconSize' | 'size'
 >
-type BadgeAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
-
 interface BadgeProps extends BadgeAppearanceProps {
-  appearance?: BadgeAppearanceKey
+  appearance?: CompositeAppearanceKeys
   dot?: boolean
   icon?: BadgeIconProp
   shape?: badgeShapePropsType
@@ -67,6 +65,8 @@ interface BadgeProps extends BadgeAppearanceProps {
   type?: badgeTypePropsType
 }
 
+type BadgeAppearanceKey = NonNullable<BadgeProps['appearance']>
+
 type BadgeGalleryStory = ComponentGalleryArgs &
   Pick<BadgeProps, 'dot' | 'text'> & {
     icon?: boolean

package/src/components/Button/Button.interface.ts

@@ -53,7 +53,6 @@ interface ButtonAppearanceProps {
   textSize?: TextSizeProps
 }
 
-type ButtonAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 type ButtonConfig = AppearanceConfig<
   AppearanceKeysDefault,
   ButtonAppearanceProps
@@ -81,8 +80,7 @@ interface ButtonProps extends ButtonAppearanceProps {
   onPressIn?: (event: GestureResponderEvent) => void
   onPressOut?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: ButtonAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceKeys
   before?: ReactNode
   label?: string
   loader?: ReactNode
@@ -93,6 +91,8 @@ interface ButtonProps extends ButtonAppearanceProps {
   width?: WidthProps
 }
 
+type ButtonAppearanceKey = NonNullable<ButtonProps['appearance']>
+
 type ButtonGalleryStory = ComponentGalleryArgs &
   Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'label'>
 

package/src/components/Button/Button.tsx

@@ -5,7 +5,6 @@ import {
   useAppearanceConfig,
   useDevicePropsGenerator,
 } from '@itcase/ui-core/hooks'
-import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { Loader } from '../Loader'
@@ -31,7 +30,6 @@ const Button = React.forwardRef<
     appearance = 'accentPrimary sizeXXL solid rounded',
     width,
     label,
-    appearanceStyle,
     loader,
     loaderColor,
     style,
@@ -45,12 +43,8 @@ const Button = React.forwardRef<
     onPressOut,
   } = props
 
-  const resolvedAppearance = appearanceStyle
-    ? mergeAppearanceKeys(appearance, appearanceStyle)
-    : appearance
-
   const appearanceConfig = useAppearanceConfig(
-    resolvedAppearance,
+    appearance,
     buttonConfig,
     isDisabled,
   )

package/src/components/Button/stories/ButtonDefault.stories.tsx

@@ -19,13 +19,13 @@ const meta = {
     label: 'Button',
     before: (
       <Icon
-        appearance="surfacePrimary size24_24 ghost"
+        appearance="surfacePrimary size24_24 ghost rounded"
         SVGIcon={icons24.Placeholder.Default}
       />
     ),
     after: (
       <Icon
-        appearance="surfacePrimary size24_24 ghost"
+        appearance="surfacePrimary size24_24 ghost rounded"
         SVGIcon={icons24.Placeholder.Default}
       />
     ),

package/src/components/Button/stories/ButtonGallery.stories.tsx

@@ -57,7 +57,7 @@ const renderButtonGallery = (
         before={
           withIcon ? (
             <PlaceholderIcon
-              appearance="surfacePrimary size24_24 ghost"
+              appearance="surfacePrimary size24_24 ghost rounded"
               SVGIcon={icon}
             />
           ) : undefined

package/src/components/Button/stories/ButtonIcon.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
     label: undefined,
     before: (
       <Icon
-        appearance="surfacePrimary size24_24 ghost"
+        appearance="surfacePrimary size24_24 ghost rounded"
         SVGIcon={icons24.Placeholder.Default}
       />
     ),

package/src/components/Checkbox/Checkbox.interface.ts

@@ -49,27 +49,6 @@ interface CheckboxAppearanceProps {
   size?: checkboxSizePropsType
 }
 
-type CheckboxAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
-type CheckboxConfig = AppearanceConfig<
-  AppearanceKeysState,
-  CheckboxAppearanceProps
->
-type CheckboxAppearance = CheckboxConfig['appearance']
-type CheckboxAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  CheckboxAppearanceProps,
-  | 'borderColorCheckbox'
-  | 'borderColorCheckboxActive'
-  | 'fill'
-  | 'fillCheckbox'
-  | 'fillCheckboxActive'
->
-type CheckboxAppearanceShape = AppearancePartialRecord<
-  AppearanceShapeKey,
-  CheckboxAppearanceProps,
-  'shape'
->
 type CheckboxAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   CheckboxAppearanceProps,
@@ -87,8 +66,7 @@ interface CheckboxProps extends CheckboxAppearanceProps {
   onPress?: (event: GestureResponderEvent) => void
   after?: ReactNode
   align?: checkboxAlignPropsType
-  appearance?: CheckboxAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   before?: ReactNode
   checked?: boolean
   desc?: string
@@ -99,6 +77,27 @@ interface CheckboxProps extends CheckboxAppearanceProps {
   width?: WidthProps
 }
 
+type CheckboxConfig = AppearanceConfig<
+  AppearanceKeysState,
+  CheckboxAppearanceProps
+>
+type CheckboxAppearance = CheckboxConfig['appearance']
+type CheckboxAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  CheckboxAppearanceProps,
+  | 'borderColorCheckbox'
+  | 'borderColorCheckboxActive'
+  | 'fill'
+  | 'fillCheckbox'
+  | 'fillCheckboxActive'
+>
+type CheckboxAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  CheckboxAppearanceProps,
+  'shape'
+>
+type CheckboxAppearanceKey = NonNullable<CheckboxProps['appearance']>
+
 type CheckboxGalleryStory = ComponentGalleryArgs &
   Pick<
     CheckboxProps,

package/src/components/Checkmark/Checkmark.tsx

@@ -103,7 +103,7 @@ function Checkmark(props: CheckmarkProps) {
             style={[styles.checkmark__icon, iconAnimatedStyle]}
           >
             <Icon
-              appearance="ghost"
+              appearance="surfacePrimary size24_24 ghost rounded"
               fill={checkmarkFill}
               iconFill={checkmarkIconFill}
               iconSize={checkmarkIconSize}

package/src/components/Chips/Chips.interface.ts

@@ -37,8 +37,8 @@ interface ChipsAppearanceProps {
   fillActive?: FillActiveProps
   iconAfter?: SvgIconComponent
   iconAfterActive?: SvgIconComponent
-  iconAfterAppearance?: string
-  iconAfterAppearanceActive?: string
+  iconAfterAppearance?: IconProps['appearance']
+  iconAfterAppearanceActive?: IconProps['appearance']
   iconAfterFill?: IconProps['fill']
   iconAfterFillActiveIcon?: IconProps['iconFill']
   iconAfterFillIcon?: IconProps['iconFill']
@@ -46,8 +46,8 @@ interface ChipsAppearanceProps {
   iconAfterSize?: IconProps['size']
   iconBefore?: SvgIconComponent
   iconBeforeActive?: SvgIconComponent
-  iconBeforeAppearance?: string
-  iconBeforeAppearanceActive?: string
+  iconBeforeAppearance?: IconProps['appearance']
+  iconBeforeAppearanceActive?: IconProps['appearance']
   iconBeforeFill?: IconProps['fill']
   iconBeforeFillActiveIcon?: IconProps['iconFill']
   iconBeforeFillIcon?: IconProps['iconFill']
@@ -79,7 +79,6 @@ type ChipsAppearanceSize = AppearancePartialRecord<
     'iconAfterSize' | 'iconBeforeSize' | 'labelTextSize' | 'size'
   >
 >
-type ChipsAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 
 interface ChipsProps extends ChipsAppearanceProps {
   isActive?: boolean
@@ -87,7 +86,7 @@ interface ChipsProps extends ChipsAppearanceProps {
   onPress?: (event: GestureResponderEvent) => void
   onPressIconAfter?: (event: GestureResponderEvent) => void
   onPressIconBefore?: (event: GestureResponderEvent) => void
-  appearance?: ChipsAppearanceKey
+  appearance?: CompositeAppearanceKeys
   children?: ReactNode
   label?: string
   shape?: chipsShapePropsType
@@ -95,6 +94,8 @@ interface ChipsProps extends ChipsAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type ChipsAppearanceKey = NonNullable<ChipsProps['appearance']>
+
 type ChipsGalleryStory = {
   appearance: string
   iconAfter?: boolean

package/src/components/Choice/Choice.interface.ts

@@ -23,7 +23,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 { choiceSizePropsType } from './styles/choiceSize'
 
@@ -34,16 +34,16 @@ interface ChoiceAppearanceProps {
   fillItemActive?: FillActiveProps
   fillItemActiveDisabled?: FillDisabledProps
   fillItemDisabled?: FillDisabledProps
-  iconAfterAppearance?: string
-  iconAfterAppearanceActive?: string
+  iconAfterAppearance?: IconProps['appearance']
+  iconAfterAppearanceActive?: IconProps['appearance']
   iconAfterFill?: ItemFillActiveProps
   iconAfterFillActive?: ItemFillActiveProps
   iconAfterFillDisabled?: ItemFillActiveProps
   iconAfterSize?: iconSizePropsType
-  iconAppearance?: string
-  iconAppearanceActive?: string
-  iconBeforeAppearance?: string
-  iconBeforeAppearanceActive?: string
+  iconAppearance?: IconProps['appearance']
+  iconAppearanceActive?: IconProps['appearance']
+  iconBeforeAppearance?: IconProps['appearance']
+  iconBeforeAppearanceActive?: IconProps['appearance']
   iconBeforeFill?: ItemFillActiveProps
   iconBeforeFillActive?: ItemFillActiveProps
   iconBeforeFillDisabled?: ItemFillActiveProps
@@ -77,19 +77,6 @@ interface ChoiceActive {
   value: ReactNode
 }
 
-type ChoiceAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
-type ChoiceConfig = AppearanceConfig<AppearanceKeysState, ChoiceAppearanceProps>
-type ChoiceAppearance = ChoiceConfig['appearance']
-type ChoiceAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  ChoiceAppearanceProps,
-  'borderColor' | 'fill'
->
-type ChoiceAppearanceShape = AppearancePartialRecord<
-  AppearanceShapeKey,
-  ChoiceAppearanceProps,
-  'shape'
->
 type ChoiceAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   ChoiceAppearanceProps,
@@ -103,8 +90,7 @@ interface ChoiceProps extends ChoiceAppearanceProps {
   setActiveSegment?: (item: ChoiceOptionsItem, isChecked?: boolean) => void
   active: ChoiceActive
   after?: ReactNode
-  appearance?: ChoiceAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   before?: ReactNode
   dataTestId?: string
   itemAfter?: ReactNode
@@ -113,6 +99,20 @@ interface ChoiceProps extends ChoiceAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type ChoiceConfig = AppearanceConfig<AppearanceKeysState, ChoiceAppearanceProps>
+type ChoiceAppearance = ChoiceConfig['appearance']
+type ChoiceAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  ChoiceAppearanceProps,
+  'borderColor' | 'fill'
+>
+type ChoiceAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  ChoiceAppearanceProps,
+  'shape'
+>
+type ChoiceAppearanceKey = NonNullable<ChoiceProps['appearance']>
+
 type ChoiceStoryArgs = Omit<ChoiceProps, 'appearance'> & {
   appearanceShape: string
   appearanceSize: string

package/src/components/Choice/Choice.tsx

@@ -1,11 +1,9 @@
-import { useMemo } from 'react'
 import { Pressable, 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 { Icon } from '../Icon'
@@ -34,7 +32,6 @@ function Choice(props: ChoiceProps) {
     appearance = 'defaultPrimary sizeL solid rounded',
     dataTestId,
     active,
-    appearanceStyle,
     itemAfter,
     itemBefore,
     options = [],
@@ -47,17 +44,8 @@ function Choice(props: ChoiceProps) {
     setActiveSegment,
   } = 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,
+    appearance,
     choiceConfig,
     isDisabled,
   )

package/src/components/Code/Code.interface.ts

@@ -37,17 +37,6 @@ interface CodeAppearanceProps {
   width?: WidthProps
 }
 
-type CodeAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
-type CodeConfig = AppearanceConfig<AppearanceKeysState, CodeAppearanceProps>
-type CodeAppearance = CodeConfig['appearance']
-type CodeAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  CodeAppearanceProps,
-  'inputBorderColor' | 'inputFill'
->
-type CodeAppearanceShape = Partial<
-  Record<AppearanceShapeKey, Partial<Pick<CodeAppearanceProps, 'shape'>>>
->
 type CodeAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   CodeAppearanceProps,
@@ -62,8 +51,7 @@ interface CodeProps extends CodeAppearanceProps {
   onChange?: (otp: string) => void
   onFocus?: () => void
   after?: ReactNode
-  appearance?: CodeAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   before?: ReactNode
   dataTestId?: string
   initialValue?: string
@@ -74,6 +62,18 @@ interface CodeProps extends CodeAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type CodeConfig = AppearanceConfig<AppearanceKeysState, CodeAppearanceProps>
+type CodeAppearance = CodeConfig['appearance']
+type CodeAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  CodeAppearanceProps,
+  'inputBorderColor' | 'inputFill'
+>
+type CodeAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<CodeAppearanceProps, 'shape'>>>
+>
+type CodeAppearanceKey = NonNullable<CodeProps['appearance']>
+
 type CodeGalleryStory = ComponentGalleryArgs &
   Pick<
     CodeProps,

package/src/components/Code/Code.tsx

@@ -7,7 +7,6 @@ import {
   useAppearanceConfig,
   useDevicePropsGenerator,
 } from '@itcase/ui-core/hooks'
-import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { codeAppearance } from './Code.appearance'
@@ -29,7 +28,6 @@ function Code(props: CodeProps) {
     appearance = 'defaultPrimary sizeM solid rounded',
     dataTestId,
     initialValue = '',
-    appearanceStyle,
     inputAutoFocus = false,
     inputCount = 6,
     inputPlaceholder,
@@ -45,17 +43,8 @@ function Code(props: CodeProps) {
 
   const otpRef = useRef<OtpInputRef>(null)
 
-  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,
+    appearance,
     codeConfig,
     isDisabled,
   )

package/src/components/ColorInput/ColorInput.interface.ts

@@ -26,22 +26,21 @@ interface ColorInputAppearanceProps {
   textSize?: TextSizeProps
 }
 
-type ColorInputAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
-type ColorInputConfig = AppearanceConfig<
-  AppearanceKeysState,
-  ColorInputAppearanceProps
->
-type ColorInputAppearance = ColorInputConfig['appearance']
-
 interface ColorInputProps extends ColorInputAppearanceProps {
   isDisabled?: boolean
   onChangeText?: (text: string) => void
-  appearance?: ColorInputAppearanceKey
+  appearance?: CompositeAppearanceStateDefault
   style?: StyleProp<ViewStyle>
   value?: string
 }
 
+type ColorInputConfig = AppearanceConfig<
+  AppearanceKeysState,
+  ColorInputAppearanceProps
+>
+type ColorInputAppearance = ColorInputConfig['appearance']
+type ColorInputAppearanceKey = NonNullable<ColorInputProps['appearance']>
+
 type ColorInputGalleryStory = ComponentGalleryArgs &
   Pick<ColorInputProps, 'isDisabled' | 'placeholder' | 'value'>
 

package/src/components/DatePicker/DatePicker.interface.ts

@@ -16,13 +16,15 @@ import type {
   TextWeightProps,
 } from '@itcase/types-ui'
 
+import type { IconProps } from '../Icon/Icon.interface'
+
 interface DatePickerAppearanceProps {
   dayTextColor?: TextColorProps
   dayTextShape?: ShapeProps
   dayTextSize?: TextSizeProps
   disablePastDays?: boolean
   fill?: FillProps
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   monthTextColor?: TextColorProps
   monthTextSize?: TextSizeProps
   monthTextWeight?: TextWeightProps

package/src/components/Divider/Divider.interface.ts

@@ -18,7 +18,6 @@ interface DividerAppearanceProps {
   width?: WidthProps
 }
 
-type DividerAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 type DividerConfig = AppearanceConfig<
   AppearanceKeysDefault,
   DividerAppearanceProps
@@ -27,10 +26,12 @@ type DividerAppearance = DividerConfig['appearance']
 
 interface DividerProps extends DividerAppearanceProps {
   isDisabled?: boolean
-  appearance?: DividerAppearanceKey
+  appearance?: CompositeAppearanceKeys
   style?: StyleProp<ViewStyle>
 }
 
+type DividerAppearanceKey = NonNullable<DividerProps['appearance']>
+
 export type {
   DividerAppearance,
   DividerAppearanceKey,

package/src/components/Drawer/Drawer.interface.ts

@@ -15,6 +15,7 @@ import type {
 } from '@itcase/types-ui'
 
 import type { dividerSizePropsType } from '../Divider/styles/dividerSize'
+import type { IconProps } from '../Icon/Icon.interface'
 
 type DrawerPosition = 'bottom' | 'left' | 'right'
 
@@ -25,7 +26,7 @@ interface DrawerAppearanceProps {
   dividerFill?: FillProps
   dividerSize?: dividerSizePropsType
   fill?: FillProps
-  iconCloseAppearance?: string
+  iconCloseAppearance?: IconProps['appearance']
   titleTextColor?: TextColorProps
   titleTextSize?: TitleSizeProps
   titleTextWeight?: TextWeightProps

package/src/components/Dropdown/Dropdown.interface.ts

@@ -38,11 +38,11 @@ interface DropdownAppearanceProps {
   emptyMessageTextSize?: TextSizeProps
   fill?: FillProps
   fillActive?: FillActiveProps
-  iconAfterAppearance?: string
+  iconAfterAppearance?: IconProps['appearance']
   iconAfterFillIcon?: ItemFillActiveProps
   iconAfterFillSize?: IconProps['fillSize']
   iconAfterSize?: IconProps['iconSize']
-  iconBeforeAppearance?: string
+  iconBeforeAppearance?: IconProps['appearance']
   iconBeforeFillIcon?: ItemFillActiveProps
   iconBeforeFillSize?: IconProps['fillSize']
   iconBeforeSize?: IconProps['iconSize']
@@ -68,11 +68,11 @@ interface DropdownItemAppearanceProps {
   fill?: FillProps
   fillActive?: FillActiveProps
   fillDisabled?: FillProps
-  iconAfterAppearance?: string
+  iconAfterAppearance?: IconProps['appearance']
   iconAfterFillIcon?: ItemFillActiveProps
   iconAfterFillSize?: IconProps['fillSize']
   iconAfterSize?: IconProps['iconSize']
-  iconBeforeAppearance?: string
+  iconBeforeAppearance?: IconProps['appearance']
   iconBeforeFillIcon?: ItemFillActiveProps
   iconBeforeFillSize?: IconProps['fillSize']
   iconBeforeSize?: IconProps['iconSize']

package/src/components/HeroTitle/HeroTitle.interface.ts

@@ -17,8 +17,8 @@ import type { IconProps } from '../Icon'
 interface HeroTitleAppearanceProps {
   direction?: DirectionProps
   fill?: FillProps
-  iconAfterAppearance?: string
-  iconBeforeAppearance?: string
+  iconAfterAppearance?: IconProps['appearance']
+  iconBeforeAppearance?: IconProps['appearance']
   size?: TitleSizeProps
   textAlign?: TextAlignProps
   textColor?: TextColorProps

package/src/components/Icon/Icon.interface.ts

@@ -16,7 +16,7 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceIconKeys,
   FillHoverProps,
   FillProps,
   FillSizeProps,
@@ -86,7 +86,7 @@ interface IconProps extends IconAppearanceProps {
   isSkeleton?: boolean
   onClick?: (event?: GestureResponderEvent) => void
   onPress?: (event: GestureResponderEvent) => void
-  appearance?: string | AppearanceKeysDefault | CompositeAppearanceKeys
+  appearance?: CompositeAppearanceIconKeys
   badgeCount?: number | string
   badgeType?: badgeTypePropsType
   badgeValue?: number | string