@retray-dev/ui-kit 10.2.0 → 12.1.0

package/src/components/ListItem/ListItem.tsx

@@ -31,13 +31,13 @@ export interface ListItemProps {
   leftRender?: React.ReactNode
   /**
    * Arbitrary content rendered on the right (badge, price, chevron, switch, etc.).
-   * Replaces the old `trailing` prop (still accepted as an alias).
    */
   rightRender?: React.ReactNode | string
-  /** @deprecated Use `rightRender` instead. */
-  trailing?: React.ReactNode | string
-  /** @deprecated Use `leftRender` instead. */
-  icon?: React.ReactNode
+  /**
+   * Multiple action buttons rendered on the right with automatic gap.
+   * Takes precedence over `rightRender` and `showChevron`.
+   */
+  rightActions?: React.ReactNode[]
   /**
    * Icon name from `@expo/vector-icons` rendered in the left slot.
    * See https://icons.expo.fyi. Takes precedence over `leftRender`.
@@ -65,7 +65,7 @@ export interface ListItemProps {
    */
   variant?: ListItemVariant
 
-  /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `trailing` is set. */
+  /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `rightActions` / `rightIcon` is set. */
   showChevron?: boolean
 
   /** Visual separator line at the bottom of the item. Useful when rendering multiple plain items in a list. */
@@ -91,8 +91,7 @@ function ListItemBase({
   imageSource,
   leftRender,
   rightRender,
-  trailing,
-  icon,
+  rightActions,
   leftIcon,
   rightIcon,
   leftIconColor,
@@ -119,16 +118,14 @@ function ListItemBase({
     onPress?.()
   }
 
-  // imageSource takes precedence, then leftIcon, then leftRender/icon
+  // imageSource takes precedence, then leftIcon, then leftRender
   const effectiveLeft: React.ReactNode = imageSource
     ? <Image source={imageSource} style={styles.image} />
     : leftIcon
       ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground)
-      : leftRender ?? icon
+      : leftRender
 
-  const effectiveRight: React.ReactNode | string | undefined = rightIcon
-    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)
-    : rightRender ?? trailing
+  const hasRightContent = !!(rightIcon || (rightActions && rightActions.length > 0) || rightRender !== undefined || showChevron)
 
   const cardStyle: ViewStyle =
     variant === 'card'
@@ -181,21 +178,33 @@ function ListItemBase({
         ) : null}
       </View>
 
-      {effectiveRight !== undefined ? (
-        <View style={styles.rightContainer}>
-          {typeof effectiveRight === 'string' ? (
-            <Text
-              style={[styles.rightText, { color: colors.foregroundMuted }]}
-              allowFontScaling={true}
-            >
-              {effectiveRight}
-            </Text>
-          ) : (
-            effectiveRight
-          )}
-        </View>
-      ) : showChevron ? (
-        <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+      {hasRightContent ? (
+        rightIcon ? (
+          <View style={styles.rightContainer}>
+            {renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)}
+          </View>
+        ) : rightActions && rightActions.length > 0 ? (
+          <View style={styles.rightActionsContainer}>
+            {rightActions.map((action, i) => (
+              <React.Fragment key={i}>{action}</React.Fragment>
+            ))}
+          </View>
+        ) : rightRender !== undefined ? (
+          <View style={styles.rightContainer}>
+            {typeof rightRender === 'string' ? (
+              <Text
+                style={[styles.rightText, { color: colors.foregroundMuted }]}
+                allowFontScaling={true}
+              >
+                {rightRender}
+              </Text>
+            ) : (
+              rightRender
+            )}
+          </View>
+        ) : showChevron ? (
+          <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+        ) : null
       ) : null}
     </>
   )
@@ -283,6 +292,12 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     maxWidth: s(160),
   },
+  rightActionsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(8),
+    flexShrink: 0,
+  },
   rightText: {
     fontFamily: 'Sohne-Regular',
     fontSize: ms(14),

package/src/components/Pressable/Pressable.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ViewStyle } from 'react-native'
+import { ViewStyle, type AccessibilityRole } from 'react-native'
 import { impactLight } from '../../utils/haptics'
 import { PressableCard } from '../../utils/pressable'
 import { PRESS_SCALE } from '../../utils/animations'
@@ -11,11 +11,6 @@ export interface PressableProps {
   onPress?: () => void
   /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /**
-   * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
-   * Kept for backwards compatibility with v6.x consumers.
-   */
-  bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
   /** Additional style for the wrapper. */
@@ -24,6 +19,19 @@ export interface PressableProps {
   disabled?: boolean
   /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
   hoverScale?: number
+  /**
+   * Accessibility role for the pressable element.
+   * Defaults to `"button"`.
+   */
+  accessibilityRole?: AccessibilityRole
+  /**
+   * Accessibility state for screen readers.
+   * Used to communicate states like `selected`, `expanded`, `checked`, etc.
+   * Defaults to `{ disabled: !!disabled }`.
+   */
+  accessibilityState?: Record<string, unknown>
+  /** Accessibility label for screen readers. */
+  accessibilityLabel?: string
 }
 
 /**
@@ -41,6 +49,9 @@ export function Pressable({
   style,
   disabled,
   hoverScale: _hoverScale = 1.02,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel,
 }: PressableProps) {
   const handlePress = () => {
     if (disabled || !onPress) return
@@ -56,8 +67,9 @@ export function Pressable({
       rippleColor="transparent"
       touchSoundDisabled
       activateOnHover
-      accessibilityRole="button"
-      accessibilityState={{ disabled: !!disabled }}
+      accessibilityRole={accessibilityRole ?? 'button'}
+      accessibilityState={accessibilityState ?? { disabled: !!disabled }}
+      accessibilityLabel={accessibilityLabel}
     >
       {children}
     </PressableCard>

package/src/components/Sheet/Sheet.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
-import BottomSheet, {
+import React, { useCallback, useEffect, useRef, useId } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import {
+  BottomSheetModal,
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
@@ -15,14 +16,8 @@ import { AntDesign } from '@expo/vector-icons'
 import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { BREAKPOINTS, RADIUS, SHADOWS } from '../../tokens'
-
-const SCREEN_HEIGHT = Dimensions.get('window').height
-const DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85
-const isAndroid = Platform.OS === 'android'
 
 export { BottomSheetModalProvider }
-// Re-export BottomSheetTextInput as SheetTextInput for consumer convenience
 export { BottomSheetTextInput as SheetTextInput }
 
 export interface SheetHeaderProps {
@@ -44,67 +39,25 @@ export interface SheetProps {
   open: boolean
   onClose: () => void
   title?: string
-  /** Secondary text below title. */
   subtitle?: string
-  /** @deprecated Use `subtitle` instead. */
-  description?: string
-  /** Show an X close button in the header. */
   showCloseButton?: boolean
   children?: React.ReactNode
-  /** Style for the inner content container. */
   style?: ViewStyle
-  /** Style for the content wrapper (outside the scroll container). */
   contentStyle?: ViewStyle
-  /** Render children inside BottomSheetScrollView. */
+  /** Render children inside BottomSheetScrollView instead of BottomSheetView. */
   scrollable?: boolean
-  /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+  /** Cap sheet height (dp). Content scrolls when exceeding this value. Requires `scrollable`. */
   maxHeight?: number
-  /**
-   * Keyboard behavior — how the sheet responds to keyboard appearance.
-   * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
-   * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
-   * - 'extend': extend sheet to maximum snap point
-   * 
-   * Default: 'interactive' on both platforms.
-   */
   keyboardBehavior?: 'extend' | 'fillParent' | 'interactive'
-  /**
-   * Keyboard blur behavior — what happens when keyboard dismisses.
-   * - 'none': do nothing
-   * - 'restore': restore sheet to previous position (default)
-   */
   keyboardBlurBehavior?: 'none' | 'restore'
-  /**
-   * Blur keyboard when user starts dragging the sheet down.
-   * Default: true (recommended for better UX)
-   */
   enableBlurKeyboardOnGesture?: boolean
-  /**
-   * Android-only: defines keyboard input mode.
-   * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
-   * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
-   */
   android_keyboardInputMode?: 'adjustPan' | 'adjustResize'
-  /** Sticky footer rendered below the scroll area. */
   footer?: React.ReactNode
   /**
-   * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+   * Array of snap points (e.g., ['50%', '85%'] or [200, 500]).
    * When provided, disables enableDynamicSizing.
-   * When omitted, sheet uses dynamic sizing (auto-fits content).
    */
   snapPoints?: (string | number)[]
-  /**
-   * When true, render as a centered modal dialog on wide screens (width ≥
-   * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
-   * bottom sheet. Use for store/category/picker dialogs that should feel native
-   * on tablets and web.
-   *
-   * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
-   * is not required there — use a regular `TextInput`.
-   */
-  responsive?: boolean
-  /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
-  dialogMaxWidth?: number
 }
 
 export function SheetHeader({ children, style }: SheetHeaderProps) {
@@ -129,76 +82,73 @@ export function Sheet({
   onClose,
   title,
   subtitle,
-  description,
   showCloseButton = false,
   children,
   style,
   contentStyle,
-  scrollable,
+  scrollable = false,
   maxHeight,
-  keyboardBehavior,
+  keyboardBehavior = 'interactive',
   keyboardBlurBehavior = 'restore',
   enableBlurKeyboardOnGesture = true,
   android_keyboardInputMode = 'adjustPan',
   footer,
   snapPoints,
-  responsive = false,
-  dialogMaxWidth = 480,
 }: SheetProps) {
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const { width: windowWidth } = useWindowDimensions()
-  const ref = useRef<BottomSheet>(null)
-  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide
-  
-  // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
-  // 'fillParent' + 'adjustResize' causes restore issues (transparent gap when keyboard dismisses)
-  const effectiveKeyboardBehavior = keyboardBehavior ?? 'interactive'
+  const ref = useRef<BottomSheetModal>(null)
+  const wasOpened = useRef(false)
+  const name = useId()
 
   useEffect(() => {
     if (open) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+    } else if (wasOpened.current) {
+      ref.current?.dismiss()
     }
   }, [open])
 
-  const renderBackdrop = useCallback((props: BottomSheetBackdropProps) => (
-    <BottomSheetBackdrop
-      {...props}
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      pressBehavior="close"
-    />
-  ), [])
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  )
 
-  // Detect compound components in children
   const childArray = React.Children.toArray(children)
   const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader)
   const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent)
   const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter)
-  
-  // If using compound components, filter them out from main children
-  const filteredChildren = customHeader || customContent || customFooter
-    ? childArray.filter(
-        (child) =>
-          !React.isValidElement(child) ||
-          (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
-      )
-    : children
 
-  const effectiveSubtitle = subtitle ?? description
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
+  const filteredChildren =
+    customHeader || customContent || customFooter
+      ? childArray.filter(
+          (child) =>
+            !React.isValidElement(child) ||
+            (child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter)
+        )
+      : children
 
-  const headerNode = customHeader ? customHeader : (showHeader ? (
+  const showHeader = !!(title || subtitle || showCloseButton) && !customHeader
+
+  const headerNode = customHeader ? customHeader : showHeader ? (
     <View style={[styles.header, { backgroundColor: colors.card }]} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
             {title}
           </Text>
-        ) : <View style={{ flex: 1 }} />}
+        ) : (
+          <View style={{ flex: 1 }} />
+        )}
         {showCloseButton ? (
           <TouchableOpacity
             onPress={onClose}
@@ -213,90 +163,52 @@ export function Sheet({
           </TouchableOpacity>
         ) : null}
       </View>
-      {effectiveSubtitle ? (
+      {subtitle ? (
         <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-          {effectiveSubtitle}
+          {subtitle}
         </Text>
       ) : null}
     </View>
-  ) : null)
+  ) : null
 
   const contentNode = customContent ? customContent : filteredChildren
   const effectiveFooter = customFooter ? customFooter : footer
 
-  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
-    if (!effectiveFooter) return null
-    return (
-      <BottomSheetFooter {...props}>
-        {effectiveFooter}
-      </BottomSheetFooter>
-    )
-  }, [effectiveFooter])
-
-  // Centered dialog path for wide screens — plain RN Modal, same header/content/footer.
-  if (asDialog) {
-    return (
-      <Modal visible={open} transparent animationType="fade" onRequestClose={onClose}>
-        <Pressable style={styles.dialogBackdrop} onPress={onClose} accessibilityRole="button" accessibilityLabel="Close">
-          {/* Inner Pressable swallows presses so taps inside the card don't close it. */}
-          <Pressable
-            style={[
-              styles.dialogCard,
-              { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 },
-            ]}
-            onPress={() => {}}
-          >
-            {headerNode}
-            <ScrollView
-              contentContainerStyle={[styles.dialogContent, style]}
-              style={contentStyle}
-              showsVerticalScrollIndicator={true}
-              bounces={false}
-            >
-              {contentNode}
-            </ScrollView>
-            {effectiveFooter}
-          </Pressable>
-        </Pressable>
-      </Modal>
-    )
-  }
+  const renderFooter = useCallback(
+    (props: BottomSheetFooterProps) => {
+      if (!effectiveFooter) return null
+      return <BottomSheetFooter {...props}>{effectiveFooter}</BottomSheetFooter>
+    },
+    [effectiveFooter]
+  )
 
-  const useScroll = scrollable || !!maxHeight
-  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT
-  
-  // If snapPoints provided, disable dynamic sizing. Otherwise use dynamic sizing.
   const useDynamicSizing = !snapPoints
-  
+
   return (
-    <BottomSheet
+      <BottomSheetModal
       ref={ref}
-      index={-1}
-      onClose={onClose}
+      name={name}
+      onDismiss={onClose}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
-      maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
+      maxDynamicContentSize={useDynamicSizing && maxHeight ? maxHeight : undefined}
       backdropComponent={renderBackdrop}
       footerComponent={effectiveFooter ? renderFooter : undefined}
-      backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
-      handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+      backgroundStyle={{ ...styles.background, backgroundColor: colors.card }}
+      handleIndicatorStyle={{ ...styles.handle, backgroundColor: colors.border }}
       enablePanDownToClose
       topInset={insets.top}
-      keyboardBehavior={effectiveKeyboardBehavior}
+      keyboardBehavior={keyboardBehavior}
       keyboardBlurBehavior={keyboardBlurBehavior}
       android_keyboardInputMode={android_keyboardInputMode}
       enableBlurKeyboardOnGesture={enableBlurKeyboardOnGesture}
     >
-      {useScroll ? (
+      {scrollable ? (
         <BottomSheetScrollView
-          contentContainerStyle={[
-            styles.scrollContent,
-            style,
-          ]}
+          contentContainerStyle={[styles.scrollContent, style]}
           style={contentStyle}
-          showsVerticalScrollIndicator={true}
-          indicatorStyle="black"
-          persistentScrollbar={isAndroid}
+          showsVerticalScrollIndicator
+          bounces={false}
           stickyHeaderIndices={headerNode ? [0] : undefined}
         >
           {headerNode}
@@ -308,7 +220,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheet>
+    </BottomSheetModal>
   )
 }
 
@@ -358,7 +270,6 @@ const styles = StyleSheet.create({
   scrollContent: {
     paddingHorizontal: s(16),
     paddingBottom: vs(32),
-    paddingRight: s(16),
   },
   sheetContent: {
     gap: vs(16),
@@ -370,23 +281,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: s(12),
   },
-  dialogBackdrop: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: s(24),
-  },
-  dialogCard: {
-    width: '100%',
-    borderRadius: RADIUS.lg,
-    paddingTop: vs(16),
-    overflow: 'hidden',
-    ...SHADOWS.xl,
-  },
-  dialogContent: {
-    paddingHorizontal: s(16),
-    paddingBottom: vs(16),
-  },
 })
-