@retray-dev/ui-kit 6.1.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Accordion/Accordion.tsx

@@ -11,17 +11,13 @@ import Animated, {
   useDerivedValue,
   useAnimatedStyle,
   withTiming,
-  Easing,
-  type EasingFunction,
 } from 'react-native-reanimated'
-
-const easingExpand: EasingFunction = Easing.bezier(0.23, 1, 0.32, 1) as unknown as EasingFunction
-const easingCollapse: EasingFunction = Easing.in(Easing.ease)
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { TIMINGS, EASINGS } from '../../utils/animations'
 
 export interface AccordionItem {
   value: string
@@ -71,20 +67,19 @@ function AccordionItemComponent({
     isExpanded.value = isOpen
   }, [isOpen])
 
-  // Derived animated height — pattern from Reanimated docs:
-  // height * Number(isExpanded) gives 0 when closed and the measured height when open.
-  // withTiming wraps it so every change animates automatically.
+  // Derived animated height — height * Number(isExpanded) gives 0 when closed and
+  // the measured height when open. `withTiming` wraps it so every change animates.
   const derivedHeight = useDerivedValue(() =>
     withTiming(height.value * Number(isExpanded.value), {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse,
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
     })
   )
 
   const derivedRotation = useDerivedValue(() =>
     withTiming(isExpanded.value ? 1 : 0, {
-      duration: 220,
-      easing: isExpanded.value ? easingExpand : easingCollapse,
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse,
     })
   )
 
@@ -105,6 +100,9 @@ function AccordionItemComponent({
           hapticSelection()
           onToggle()
         }}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
+        accessibilityLabel={item.trigger}
       >
         <View style={styles.triggerContent}>
           {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}

package/src/components/Button/Button.tsx

@@ -1,22 +1,21 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   TouchableOpacity,
   Text,
-  Animated,
   ActivityIndicator,
   StyleSheet,
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
-  Platform,
 } from 'react-native'
-
-const nativeDriver = Platform.OS !== 'web'
+import Animated from 'react-native-reanimated'
 import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS, TYPOGRAPHY } from '../../tokens'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE } from '../../utils/animations'
 
 // primary: filled primary — main CTA (pill-shaped, Airbnb-style)
 // secondary: outlined primary border — alternative actions
@@ -65,20 +64,16 @@ export function Button({
   disabled,
   style,
   onPress,
+  accessibilityLabel,
+  accessibilityHint,
   ...props
 }: ButtonProps) {
   const { colors } = useTheme()
   const isDisabled = disabled || loading
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (isDisabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled,
+  })
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
     impactMedium()
@@ -116,7 +111,10 @@ export function Button({
   const { flex, ...restStyle } = flatStyle || {}
 
   return (
-    <Animated.View style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, { transform: [{ scale }] }]}>
+    <Animated.View
+      style={[fullWidth && styles.fullWidth, flex !== undefined && { flex }, animatedStyle]}
+      {...hoverHandlers}
+    >
       <TouchableOpacity
         style={[
           styles.base,
@@ -130,8 +128,12 @@ export function Button({
         activeOpacity={1}
         touchSoundDisabled={true}
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         {...props}
       >
         {loading ? (

package/src/components/Card/Card.tsx

@@ -1,21 +1,24 @@
-import React, { useRef } from 'react'
-import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native'
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export type CardVariant = 'elevated' | 'outlined' | 'filled'
 
 export interface CardProps {
   children: React.ReactNode
-  /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
+  /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
   variant?: CardVariant
   /** Makes the card tappable. Adds press animation and haptic feedback. */
   onPress?: () => void
   style?: ViewStyle
+  /** Accessibility label for the card (when interactive). */
+  accessibilityLabel?: string
 }
 
 export interface CardHeaderProps {
@@ -43,31 +46,14 @@ export interface CardFooterProps {
   style?: ViewStyle
 }
 
-export function Card({ children, variant = 'elevated', onPress, style }: CardProps) {
+export function Card({ children, variant = 'elevated', onPress, style, accessibilityLabel }: CardProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (!onPress) return
-    Animated.spring(scale, {
-      toValue: 0.98,
-      useNativeDriver: nativeDriver,
-      stiffness: 400,
-      damping: 30,
-      mass: 1.0,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    if (!onPress) return
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      stiffness: 250,
-      damping: 24,
-      mass: 1.0,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress,
+  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -107,13 +93,15 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
 
   if (onPress) {
     return (
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={animatedStyle} {...hoverHandlers}>
         <TouchableOpacity
           onPress={handlePress}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
           activeOpacity={1}
           touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
         >
           {cardContent}
         </TouchableOpacity>
@@ -150,7 +138,7 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
+    borderRadius: RADIUS.md,
     borderWidth: 1,
   },
   header: {

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -1,22 +1,25 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   ScrollView,
   TouchableOpacity,
-  Animated,
   Text,
   View,
   StyleSheet,
   ViewStyle,
-  Platform,
 } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { usePressScale } from '../../utils/usePressScale'
+import { useColorTransition } from '../../utils/useColorTransition'
+import { PRESS_SCALE } from '../../utils/animations'
 import { RADIUS } from '../../tokens'
 
-const nativeDriver = Platform.OS !== 'web'
-
 export interface CategoryItem {
   label: string
   value: string
@@ -36,6 +39,7 @@ export interface CategoryStripProps {
   style?: ViewStyle
   /** Style applied to each pill item. */
   itemStyle?: ViewStyle
+  accessibilityLabel?: string
 }
 
 function CategoryChip({
@@ -48,52 +52,52 @@ function CategoryChip({
   onPress: () => void
 }) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+  })
+  const progress = useColorTransition(selected)
 
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+  }))
 
-  const bgColor = selected ? colors.primary : colors.surface
-  const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle
-  const borderColor = selected ? colors.primary : colors.border
+  const textColorStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foregroundSubtle, colors.primaryForeground]),
+  }))
 
+  // Static color for icon — icon families take a static color prop, not animated.
+  const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle
   const resolvedIcon =
     typeof item.icon === 'string'
-      ? renderIcon(item.icon, 16, textColor)
+      ? renderIcon(item.icon, 16, iconColor)
       : item.icon ?? null
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
+    <Animated.View style={scaleStyle} {...hoverHandlers}>
       <TouchableOpacity
-        style={[
-          styles.chip,
-          {
-            backgroundColor: bgColor,
-            borderColor,
-          },
-        ]}
         onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={item.label}
+        accessibilityState={{ selected }}
       >
-        {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
-        <Text style={[styles.chipLabel, { color: textColor }]} allowFontScaling={true}>
-          {item.label}
-        </Text>
-        {item.badge !== undefined && item.badge > 0 && (
-          <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
-            <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
-              {Math.min(item.badge, 99)}
-            </Text>
-          </View>
-        )}
+        <Animated.View style={[styles.chip, surfaceStyle]}>
+          {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
+          <Animated.Text style={[styles.chipLabel, textColorStyle]} allowFontScaling={true}>
+            {item.label}
+          </Animated.Text>
+          {item.badge !== undefined && item.badge > 0 && (
+            <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
+              <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
+                {Math.min(item.badge, 99)}
+              </Text>
+            </View>
+          )}
+        </Animated.View>
       </TouchableOpacity>
     </Animated.View>
   )
@@ -106,6 +110,7 @@ export function CategoryStrip({
   multiSelect = false,
   style,
   itemStyle,
+  accessibilityLabel,
 }: CategoryStripProps) {
   const selected = Array.isArray(value) ? value : value ? [value] : []
 
@@ -128,6 +133,8 @@ export function CategoryStrip({
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={[styles.container, style]}
       style={styles.scroll}
+      accessibilityRole={multiSelect ? undefined : 'radiogroup'}
+      accessibilityLabel={accessibilityLabel}
     >
       {categories.map((cat) => (
         <View key={cat.value} style={itemStyle}>

package/src/components/Checkbox/Checkbox.tsx

@@ -1,10 +1,16 @@
-import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle, Platform } from 'react-native'
+import React from 'react'
+import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+  withTiming,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-
-const nativeDriver = Platform.OS !== 'web'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { usePressScale } from '../../utils/usePressScale'
+import { useColorTransition } from '../../utils/useColorTransition'
+import { PRESS_SCALE, TIMINGS, EASINGS } from '../../utils/animations'
 
 export interface CheckboxProps {
   checked?: boolean
@@ -12,6 +18,7 @@ export interface CheckboxProps {
   label?: string
   disabled?: boolean
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 export function Checkbox({
@@ -20,45 +27,23 @@ export function Checkbox({
   label,
   disabled,
   style,
+  accessibilityLabel,
 }: CheckboxProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  const bgOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(bgOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 150,
-        useNativeDriver: false,
-      }),
-      Animated.timing(checkOpacity, {
-        toValue: checked ? 1 : 0,
-        duration: 120,
-        useNativeDriver: false,
-      }),
-    ]).start()
-  }, [checked, bgOpacity, checkOpacity])
-
-  const borderColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.border, colors.primary],
-  })
-
-  const backgroundColor = bgOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.primary],
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled,
   })
+  const progress = useColorTransition(checked)
 
-  const handlePressIn = () => {
-    if (disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
+  const boxStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.primary]),
+  }))
 
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
+  }))
 
   return (
     <TouchableOpacity
@@ -67,24 +52,20 @@ export function Checkbox({
         hapticSelection()
         onCheckedChange?.(!checked)
       }}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       disabled={disabled}
       activeOpacity={1}
       touchSoundDisabled={true}
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ checked, disabled: !!disabled }}
     >
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={scaleStyle}>
         <Animated.View
-          style={[
-            styles.box,
-            {
-              borderColor,
-              backgroundColor,
-              opacity: disabled ? 0.45 : 1,
-            },
-          ]}
+          style={[styles.box, { opacity: disabled ? 0.45 : 1 }, boxStyle]}
         >
-          <Animated.View style={{ opacity: checkOpacity }}>
+          <Animated.View style={checkStyle}>
             <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
           </Animated.View>
         </Animated.View>

package/src/components/Chip/Chip.tsx

@@ -1,20 +1,16 @@
-import React, { useEffect, useRef } from 'react'
-import {
-  TouchableOpacity,
-  Animated,
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-  Platform,
-  Easing,
-} from 'react-native'
+import React from 'react'
+import { TouchableOpacity, View, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { useColorTransition } from '../../utils/useColorTransition'
+import { PRESS_SCALE } from '../../utils/animations'
 
 export interface ChipProps {
   label: string
@@ -25,6 +21,7 @@ export interface ChipProps {
   /** Icon name from @expo/vector-icons resolved automatically. */
   iconName?: string
   style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 export interface ChipOption {
@@ -46,74 +43,46 @@ export interface ChipGroupProps {
   style?: ViewStyle
 }
 
-export function Chip({ label, selected = false, onPress, icon, iconName, style }: ChipProps) {
+export function Chip({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }: ChipProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.timing(pressAnim, {
-      toValue: selected ? 1 : 0,
-      duration: 150,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: false,
-    }).start()
-  }, [selected, pressAnim])
-
-  const handlePressIn = () => {
-    Animated.spring(scale, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
-    }).start()
-  }
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+  })
+  const colorProgress = useColorTransition(selected)
 
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 4,
-    }).start()
-  }
+  const surfaceStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(colorProgress.value, [0, 1], [colors.surface, colors.primary]),
+    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary]),
+  }))
+
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(colorProgress.value, [0, 1], [colors.foreground, colors.primaryForeground]),
+  }))
 
   const handlePress = () => {
     hapticSelection()
     onPress?.()
   }
 
-  const backgroundColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.surface, colors.primary],
-  })
-
-  const textColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.foreground, colors.primaryForeground],
-  })
-
-  const borderColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.border, colors.primary],
-  })
-
   const resolvedIcon = iconName
     ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground)
     : icon
 
   return (
-    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }, style]}>
+    <Animated.View style={[styles.wrapper, scaleStyle, style]} {...hoverHandlers}>
       <TouchableOpacity
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ selected }}
       >
-        <Animated.View style={[styles.chip, { backgroundColor, borderColor }]}>
+        <Animated.View style={[styles.chip, surfaceStyle]}>
           {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
-          <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>
+          <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
             {label}
           </Animated.Text>
         </Animated.View>
@@ -129,18 +98,12 @@ export function ChipGroup({ options, value, onValueChange, multiSelect = false,
       return
     }
 
-    // Multiselect logic
     const currentArray = Array.isArray(value) ? value : value ? [value] : []
     const isSelected = currentArray.includes(optionValue)
 
-    let newArray: (string | number)[]
-    if (isSelected) {
-      // Remove from selection
-      newArray = currentArray.filter((v) => v !== optionValue)
-    } else {
-      // Add to selection
-      newArray = [...currentArray, optionValue]
-    }
+    const newArray: (string | number)[] = isSelected
+      ? currentArray.filter((v) => v !== optionValue)
+      : [...currentArray, optionValue]
 
     onValueChange?.(newArray)
   }