@itcase/ui-react-native 1.10.85 → 1.10.87

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

@@ -10,7 +10,7 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceStateDefault,
   FillActiveProps,
   FillDisabledProps,
   FillProps,
@@ -22,7 +22,8 @@ import type {
   WrapProps,
 } from '@itcase/types-ui'
 
-import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { iconSizePropsType } from '../Icon/styles/iconSize'
 import type { choiceSizePropsType } from './styles/choiceSize'
 
@@ -33,10 +34,16 @@ interface ChoiceAppearanceProps {
   fillItemActive?: FillActiveProps
   fillItemActiveDisabled?: FillDisabledProps
   fillItemDisabled?: FillDisabledProps
+  iconAfterAppearance?: IconProps['appearance']
+  iconAfterAppearanceActive?: IconProps['appearance']
   iconAfterFill?: ItemFillActiveProps
   iconAfterFillActive?: ItemFillActiveProps
   iconAfterFillDisabled?: ItemFillActiveProps
   iconAfterSize?: iconSizePropsType
+  iconAppearance?: IconProps['appearance']
+  iconAppearanceActive?: IconProps['appearance']
+  iconBeforeAppearance?: IconProps['appearance']
+  iconBeforeAppearanceActive?: IconProps['appearance']
   iconBeforeFill?: ItemFillActiveProps
   iconBeforeFillActive?: ItemFillActiveProps
   iconBeforeFillDisabled?: ItemFillActiveProps
@@ -70,19 +77,6 @@ interface ChoiceActive {
   value: ReactNode
 }
 
-type ChoiceAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
-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,
@@ -96,15 +90,39 @@ 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
   itemBefore?: ReactNode
   options: ChoiceOptionsItem[]
   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
+  appearanceStyle: string
+  appearanceType: string
+}
+
+type ChoiceGalleryStory = ComponentGalleryArgs &
+  Pick<ChoiceProps, 'active' | 'dataTestId' | 'isDisabled' | 'options'>
+
 export type {
   ChoiceActive,
   ChoiceAppearance,
@@ -114,6 +132,8 @@ export type {
   ChoiceAppearanceSize,
   ChoiceAppearanceStyle,
   ChoiceConfig,
+  ChoiceGalleryStory,
   ChoiceOptionsItem,
   ChoiceProps,
+  ChoiceStoryArgs,
 }

package/src/components/Choice/Choice.tsx

@@ -1,24 +1,23 @@
-import { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Icon } from '../Icon'
 import { Loader } from '../Loader'
 import { Text } from '../Text'
 import { choiceAppearance } from './Choice.appearance'
+import { resolveChoiceItemFill } from './Choice.helpers'
 import type {
-  ChoiceAppearanceProps,
   ChoiceConfig,
   ChoiceOptionsItem,
   ChoiceProps,
 } from './Choice.interface'
 import { styles } from './Choice.styles'
 
-const DEFAULT_CHOICE_APPEARANCE = 'defaultPrimary'
-const DEFAULT_CHOICE_APPEARANCE_STYLE = 'solid'
-const DEFAULT_CHOICE_SIZE = 'l'
-const DEFAULT_CHOICE_SHAPE = 'rounded'
-
 const choiceConfig: ChoiceConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -30,7 +29,29 @@ choiceConfig.setAppearance(choiceAppearance)
 
 function Choice(props: ChoiceProps) {
   const {
+    appearance = 'defaultPrimary sizeL solid rounded',
+    dataTestId,
+    active,
+    itemAfter,
+    itemBefore,
+    options = [],
+    style,
+    before,
+    after,
+    isDisabled = false,
+    isCheckbox = false,
+    isLoading = false,
+    setActiveSegment,
+  } = props
+
+  const appearanceConfig = useAppearanceConfig(
     appearance,
+    choiceConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
     size,
     fill,
     fillItem,
@@ -43,12 +64,16 @@ function Choice(props: ChoiceProps) {
     labelTextSize,
     labelTextWeight,
     borderColor,
-    active,
-    appearanceStyle,
+    iconAfterAppearance,
+    iconAfterAppearanceActive,
     iconAfterFill,
     iconAfterFillActive,
     iconAfterFillDisabled,
     iconAfterSize,
+    iconAppearance,
+    iconAppearanceActive,
+    iconBeforeAppearance,
+    iconBeforeAppearanceActive,
     iconBeforeFill,
     iconBeforeFillActive,
     iconBeforeFillDisabled,
@@ -57,59 +82,12 @@ function Choice(props: ChoiceProps) {
     iconFillActive,
     iconFillDisabled,
     iconSize,
-    itemAfter,
-    itemBefore,
-    options = [],
     shape,
-    style,
     wrap,
-    before,
-    after,
-    isDisabled = false,
-    isCheckbox = false,
-    isLoading = false,
-    setActiveSegment,
-  } = props
-
-  const appearanceConfig = useMemo(() => {
-    const appearanceTokens = (appearance || DEFAULT_CHOICE_APPEARANCE).split(
-      ' ',
-    )
-    const isCompositeAppearance = appearanceTokens.length > 1
-    const sizeAppearanceKey = size && `size${size.toUpperCase()}`
-    const appearanceKeys = isCompositeAppearance
-      ? appearanceTokens
-      : [
-          ...appearanceTokens,
-          appearanceStyle || DEFAULT_CHOICE_APPEARANCE_STYLE,
-          sizeAppearanceKey,
-          shape,
-        ]
-
-    return appearanceKeys.reduce<ChoiceAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        return Object.assign(
-          resultConfig,
-          appearanceKey &&
-            choiceConfig.appearance?.[
-              appearanceKey as keyof NonNullable<typeof choiceConfig.appearance>
-            ],
-        )
-      },
-      {},
-    )
-  }, [appearance, appearanceStyle, shape, size])
+  } = propsGenerator
 
-  const sizeKey = size || appearanceConfig.size || DEFAULT_CHOICE_SIZE
-  const shapeKey = shape || appearanceConfig.shape || DEFAULT_CHOICE_SHAPE
-  const wrapKey = wrap || appearanceConfig.wrap
-  const fillKey = fill || appearanceConfig.fill
-  const borderColorKey = borderColor || appearanceConfig.borderColor
-  const resolvedIconSize = iconSize || appearanceConfig.iconSize
-  const resolvedIconBeforeSize =
-    iconBeforeSize || appearanceConfig.iconBeforeSize || resolvedIconSize
-  const resolvedIconAfterSize =
-    iconAfterSize || appearanceConfig.iconAfterSize || resolvedIconSize
+  const resolvedIconBeforeSize = iconBeforeSize || iconSize
+  const resolvedIconAfterSize = iconAfterSize || iconSize
 
   function onItemPress(item: ChoiceOptionsItem, isItemActive: boolean) {
     if (!setActiveSegment) {
@@ -124,12 +102,13 @@ function Choice(props: ChoiceProps) {
     <View
       style={[
         styles.choice,
-        sizeKey && styles[`choice_size_${sizeKey}`],
-        fillKey && tokens[`fill_${fillKey}`],
-        shapeKey && styles[`choice_shape_${shapeKey}`],
-        wrapKey && styles[`choice_wrap_${wrapKey}`],
-        style && style,
+        size && styles[`choice_size_${size}`],
+        fill && tokens[`fill_${fill}`],
+        shape && styles[`choice_shape_${shape}`],
+        wrap && styles[`choice_wrap_${wrap}`],
+        style,
       ]}
+      testID={dataTestId ? `${dataTestId}Choice` : undefined}
     >
       {before && <View style={styles.choice__before}>{before}</View>}
       {isLoading ? (
@@ -138,43 +117,23 @@ function Choice(props: ChoiceProps) {
         options.map((item) => {
           const isItemActive = String(item.value) === String(active.value)
           const hasIcon = Boolean(item.icon || item.iconActive)
-          const itemFillKey = isItemActive
-            ? isDisabled
-              ? fillItemActiveDisabled ||
-                appearanceConfig.fillItemActiveDisabled ||
-                fillItemActive ||
-                appearanceConfig.fillItemActive
-              : fillItemActive || appearanceConfig.fillItemActive
-            : isDisabled
-              ? fillItemDisabled ||
-                appearanceConfig.fillItemDisabled ||
-                fillItem ||
-                appearanceConfig.fillItem
-              : fillItem || appearanceConfig.fillItem
-          const itemLabelTextColor = isDisabled
-            ? labelTextColorDisabled ||
-              appearanceConfig.labelTextColorDisabled ||
-              appearanceConfig.labelTextColor
-            : isItemActive
-              ? labelTextColorActive ||
-                appearanceConfig.labelTextColorActive ||
-                appearanceConfig.labelTextColor
-              : labelTextColor || appearanceConfig.labelTextColor
-          const itemIconFill = isDisabled
-            ? iconFillDisabled || appearanceConfig.iconFillDisabled
-            : isItemActive
-              ? iconFillActive || appearanceConfig.iconFillActive
-              : iconFill || appearanceConfig.iconFill
-          const itemIconBeforeFill = isDisabled
-            ? iconBeforeFillDisabled || appearanceConfig.iconBeforeFillDisabled
-            : isItemActive
-              ? iconBeforeFillActive || appearanceConfig.iconBeforeFillActive
-              : iconBeforeFill || appearanceConfig.iconBeforeFill
-          const itemIconAfterFill = isDisabled
-            ? iconAfterFillDisabled || appearanceConfig.iconAfterFillDisabled
-            : isItemActive
-              ? iconAfterFillActive || appearanceConfig.iconAfterFillActive
-              : iconAfterFill || appearanceConfig.iconAfterFill
+          const itemFillKey = resolveChoiceItemFill({
+            fillItem,
+            fillItemActive,
+            fillItemActiveDisabled,
+            fillItemDisabled,
+            isActive: isItemActive,
+            isDisabled,
+          })
+          const itemIconAppearance = isItemActive
+            ? iconAppearanceActive || iconAppearance
+            : iconAppearance
+          const itemIconBeforeAppearance = isItemActive
+            ? iconBeforeAppearanceActive || iconBeforeAppearance
+            : iconBeforeAppearance
+          const itemIconAfterAppearance = isItemActive
+            ? iconAfterAppearanceActive || iconAfterAppearance
+            : iconAfterAppearance
 
           return (
             <Pressable
@@ -182,13 +141,11 @@ function Choice(props: ChoiceProps) {
               disabled={isDisabled}
               style={[
                 styles.choice__item,
-                sizeKey && styles[`choice__item_size_${sizeKey}`],
-                hasIcon &&
-                  sizeKey &&
-                  styles[`choice__item_icon_size_${sizeKey}`],
-                shapeKey && styles[`choice_shape_${shapeKey}`],
+                size && styles[`choice__item_size_${size}`],
+                hasIcon && size && styles[`choice__item_icon_size_${size}`],
+                shape && styles[`choice_shape_${shape}`],
                 itemFillKey && tokens[`fill_${itemFillKey}`],
-                borderColorKey && tokens[`border_color_${borderColorKey}`],
+                borderColor && tokens[`border_color_${borderColor}`],
               ]}
               onPress={() => {
                 onItemPress(item, isItemActive)
@@ -197,51 +154,70 @@ function Choice(props: ChoiceProps) {
               <View
                 style={[
                   styles.choice__item_label,
-                  sizeKey && styles[`choice__item_label_size_${sizeKey}`],
+                  size && styles[`choice__item_label_size_${size}`],
                 ]}
               >
                 {itemBefore}
                 {(item.iconBefore || item.iconBeforeActive) && (
                   <Icon
+                    appearance={itemIconBeforeAppearance}
                     size={resolvedIconBeforeSize}
-                    iconFill={itemIconBeforeFill}
+                    iconFill={iconBeforeFill}
+                    iconFillActive={iconBeforeFillActive}
+                    iconFillDisabled={iconBeforeFillDisabled}
                     iconSize={resolvedIconBeforeSize}
                     SVGIcon={
                       isItemActive
                         ? item.iconBeforeActive || item.iconBefore
                         : item.iconBefore
                     }
+                    isActive={isItemActive}
+                    isDisabled={isDisabled}
                   />
                 )}
                 {item.label && (
                   <Text
-                    size={labelTextSize || appearanceConfig.labelTextSize}
-                    textColor={itemLabelTextColor}
-                    weight={labelTextWeight || appearanceConfig.labelTextWeight}
+                    size={labelTextSize}
+                    textColor={labelTextColor}
+                    textColorActive={labelTextColorActive}
+                    textColorDisabled={labelTextColorDisabled}
+                    weight={labelTextWeight}
+                    isActive={isItemActive}
+                    isDisabled={isDisabled}
                   >
                     {item.label}
                   </Text>
                 )}
                 {(item.icon || item.iconActive) && (
                   <Icon
-                    size={resolvedIconSize}
-                    iconFill={itemIconFill}
-                    iconSize={resolvedIconSize}
+                    appearance={itemIconAppearance}
+                    size={iconSize}
+                    iconFill={iconFill}
+                    iconFillActive={iconFillActive}
+                    iconFillDisabled={iconFillDisabled}
+                    iconSize={iconSize}
                     SVGIcon={
                       isItemActive ? item.iconActive || item.icon : item.icon
                     }
+                    isActive={isItemActive}
+                    isDisabled={isDisabled}
                   />
                 )}
                 {(item.iconAfter || item.iconAfterActive) && (
                   <Icon
+                    appearance={itemIconAfterAppearance}
                     size={resolvedIconAfterSize}
-                    iconFill={itemIconAfterFill}
+                    iconFill={iconAfterFill}
+                    iconFillActive={iconAfterFillActive}
+                    iconFillDisabled={iconAfterFillDisabled}
                     iconSize={resolvedIconAfterSize}
                     SVGIcon={
                       isItemActive
                         ? item.iconAfterActive || item.iconAfter
                         : item.iconAfter
                     }
+                    isActive={isItemActive}
+                    isDisabled={isDisabled}
                   />
                 )}
                 {itemAfter}

package/src/components/Choice/appearance/choiceDefault.ts

@@ -8,8 +8,14 @@ const choiceAppearanceDefault = {
     labelTextColor: 'surfaceTextPrimary',
     labelTextColorActive: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderSecondary',
+    iconAfterAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconAfterFill: 'surfaceItemQuaternary',
     iconAfterFillActive: 'surfaceItemSecondary',
+    iconAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconBeforeFill: 'surfaceItemQuaternary',
     iconBeforeFillActive: 'surfaceItemSecondary',
     iconFill: 'surfaceItemQuaternary',
@@ -22,8 +28,14 @@ const choiceAppearanceDefault = {
     labelTextColor: 'surfaceTextPrimary',
     labelTextColorActive: 'accentTextPrimary',
     borderColor: 'surfaceBorderQuaternary',
+    iconAfterAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconAfterFill: 'surfaceItemQuaternary',
     iconAfterFillActive: 'surfaceItemSecondary',
+    iconAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconBeforeFill: 'surfaceItemQuaternary',
     iconBeforeFillActive: 'surfaceItemSecondary',
     iconFill: 'surfaceItemQuaternary',

package/src/components/Choice/appearance/choiceDisabled.ts

@@ -7,8 +7,14 @@ const choiceAppearanceDisabled = {
     fillItemActive: 'surfaceDisabled',
     labelTextColor: 'surfaceTextQuaternary',
     borderColor: 'surfaceBorderPrimary',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'disabledPrimary size24_24 ghost rounded',
     iconAfterFill: 'surfaceItemPrimary',
     iconAfterFillActive: 'disabledItemSecondary',
+    iconAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'disabledPrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'disabledPrimary size24_24 ghost rounded',
     iconBeforeFill: 'surfaceItemPrimary',
     iconBeforeFillActive: 'disabledItemSecondary',
     iconFill: 'surfaceItemPrimary',

package/src/components/Choice/appearance/choiceError.ts

@@ -7,8 +7,14 @@ const choiceAppearanceError = {
     fillItemActive: 'errorPrimary',
     labelTextColor: 'errorTextSecondary',
     borderColor: 'errorBorderQuaternary',
+    iconAfterAppearance: 'errorPrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'errorPrimary size24_24 ghost rounded',
     iconAfterFill: 'errorItemSecondary',
     iconAfterFillActive: 'errorItemTertiary',
+    iconAppearance: 'errorPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'errorPrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'errorPrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'errorPrimary size24_24 ghost rounded',
     iconBeforeFill: 'errorItemSecondary',
     iconBeforeFillActive: 'errorItemTertiary',
     iconFill: 'errorItemSecondary',

package/src/components/Choice/appearance/choiceRequire.ts

@@ -8,8 +8,14 @@ const choiceAppearanceRequire = {
     labelTextColor: 'warningTextSecondary',
     labelTextColorActive: 'warningTextPrimary',
     borderColor: 'warningBorderSecondary',
+    iconAfterAppearance: 'warningPrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'warningPrimary size24_24 ghost rounded',
     iconAfterFill: 'warningItemSecondary',
     iconAfterFillActive: 'warningItemTertiary',
+    iconAppearance: 'warningPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'warningPrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'warningPrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'warningPrimary size24_24 ghost rounded',
     iconBeforeFill: 'warningItemSecondary',
     iconBeforeFillActive: 'warningItemTertiary',
     iconFill: 'warningItemSecondary',

package/src/components/Choice/appearance/choiceSuccess.ts

@@ -8,8 +8,14 @@ const choiceAppearanceSuccess = {
     labelTextColor: 'successTextSecondary',
     labelTextColorActive: 'successTextPrimary',
     borderColor: 'successBorderSecondary',
+    iconAfterAppearance: 'successPrimary size24_24 ghost rounded',
+    iconAfterAppearanceActive: 'successPrimary size24_24 ghost rounded',
     iconAfterFill: 'successItemSecondary',
     iconAfterFillActive: 'successItemTertiary',
+    iconAppearance: 'successPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'successPrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'successPrimary size24_24 ghost rounded',
+    iconBeforeAppearanceActive: 'successPrimary size24_24 ghost rounded',
     iconBeforeFill: 'successItemSecondary',
     iconBeforeFillActive: 'successItemTertiary',
     iconFill: 'successItemSecondary',

package/src/components/Choice/stories/ChoiceDemo.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { choiceAppearanceShape } from '../appearance/choiceShape'
+import { choiceAppearanceSize } from '../appearance/choiceSize'
+import { choiceAppearanceStyle } from '../appearance/choiceStyle'
+import { Choice } from '../Choice'
+import { choiceAppearance } from '../Choice.appearance'
+import type { ChoiceProps, ChoiceStoryArgs } from '../Choice.interface'
+import { choiceListMock } from './__mock__'
+import { choiceStoryParameters, ControlledChoice } from './ChoiceStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(choiceAppearance, {
+  appearanceShape: choiceAppearanceShape,
+  appearanceSize: choiceAppearanceSize,
+  appearanceStyle: choiceAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Choice',
+  component: Choice,
+  args: {
+    dataTestId: 'choiceAppearanceTestId',
+    active: choiceListMock.active,
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeL',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+    options: choiceListMock.choices.map(({ label, value }) => ({
+      label,
+      value,
+    })),
+  },
+  parameters: {
+    ...choiceStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'isDisabled',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceSize: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceSize'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<ChoiceStoryArgs>
+export default meta
+
+export const Demo: StoryObj<ChoiceStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <ControlledChoice
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as ChoiceProps['appearance']
+      }
+    />
+  ),
+}