@retray-dev/ui-kit 10.0.0 → 10.1.0

package/src/components/ImageViewer/ImageViewer.tsx

@@ -2,7 +2,8 @@ import React, { useState, useCallback } from 'react'
 import {
   Modal,
   View,
-  TouchableOpacity,
+  Image,
+  Dimensions,
   StyleSheet,
   useWindowDimensions,
   ImageSourcePropType,
@@ -18,7 +19,7 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { renderIcon } from '../../utils/icons'
+import { IconButton } from '../IconButton'
 import { PagerDots } from '../PagerDots'
 import { s, vs } from '../../utils/scaling'
 
@@ -102,13 +103,11 @@ function ZoomableImage({ source, width, height, onZoomChange }: ZoomableImagePro
 
   return (
     <GestureDetector gesture={composed}>
-      <Animated.View style={[{ width, height }, styles.imageWrap]}>
-        <Animated.Image
-          source={source}
-          style={[{ width, height }, animatedStyle]}
-          resizeMode="contain"
-        />
-      </Animated.View>
+      <View style={[{ width, height }, styles.imageWrap]} collapsable={false}>
+        <Animated.View style={[{ width, height }, animatedStyle]}>
+          <Image source={source} style={{ width, height }} resizeMode="contain" />
+        </Animated.View>
+      </View>
     </GestureDetector>
   )
 }
@@ -132,7 +131,9 @@ export interface ImageViewerProps {
  * <ImageViewer images={pages} visible={open} initialIndex={page} onClose={() => setOpen(false)} />
  */
 export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: ImageViewerProps) {
-  const { width, height } = useWindowDimensions()
+  const window = useWindowDimensions()
+  const width = window.width > 0 ? window.width : Dimensions.get('window').width
+  const height = window.height > 0 ? window.height : Dimensions.get('window').height
   const insets = useSafeAreaInsets()
   const [index, setIndex] = useState(initialIndex)
   const [pagingEnabled, setPagingEnabled] = useState(true)
@@ -203,7 +204,7 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
         <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="none" />
         <Animated.View style={[styles.container, dismissStyle]}>
           <GestureDetector gesture={swipeDown}>
-            <Animated.View style={styles.root}>
+            <View style={styles.root} collapsable={false}>
               <ScrollView
                 ref={scrollRef}
                 horizontal
@@ -223,20 +224,20 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
                   />
                 ))}
               </ScrollView>
-            </Animated.View>
+            </View>
           </GestureDetector>
 
-          <TouchableOpacity
-            style={[styles.closeButton, { top: insets.top + vs(8) }]}
-            onPress={onClose}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
-            accessibilityRole="button"
-            accessibilityLabel="Close"
-            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-          >
-            {renderIcon('x', 26, '#fff')}
-          </TouchableOpacity>
+          <View style={[styles.closeButtonWrapper, { top: insets.top + vs(8) }]}>
+            <IconButton
+              iconName="x"
+              size="md"
+              variant="text"
+              style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
+              iconColor="#fff"
+              onPress={onClose}
+              accessibilityLabel="Close"
+            />
+          </View>
 
           {images.length > 1 ? (
             <View style={[styles.dots, { bottom: insets.bottom + vs(16) }]} pointerEvents="box-none">
@@ -271,15 +272,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden',
   },
-  closeButton: {
+  closeButtonWrapper: {
     position: 'absolute',
     right: s(12),
-    width: s(40),
-    height: s(40),
-    borderRadius: s(20),
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   dots: {
     position: 'absolute',

package/src/components/Sheet/Sheet.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
-import {
-  BottomSheetModal,
+import BottomSheet, {
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
@@ -149,7 +148,7 @@ export function Sheet({
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const { width: windowWidth } = useWindowDimensions()
-  const ref = useRef<BottomSheetModal>(null)
+  const ref = useRef<BottomSheet>(null)
   const asDialog = responsive && windowWidth >= BREAKPOINTS.wide
   
   // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
@@ -159,9 +158,9 @@ export function Sheet({
   useEffect(() => {
     if (open) {
       impactMedium()
-      ref.current?.present()
+      ref.current?.snapToIndex(0)
     } else {
-      ref.current?.dismiss()
+      ref.current?.close()
     }
   }, [open])
 
@@ -193,7 +192,7 @@ export function Sheet({
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
   const headerNode = customHeader ? customHeader : (showHeader ? (
-    <View style={styles.header} accessibilityRole="header">
+    <View style={[styles.header, { backgroundColor: colors.card }]} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
@@ -270,12 +269,13 @@ export function Sheet({
   const useDynamicSizing = !snapPoints
   
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
+      index={-1}
+      onClose={onClose}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
-      onDismiss={onClose}
       backdropComponent={renderBackdrop}
       footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
@@ -297,6 +297,7 @@ export function Sheet({
           showsVerticalScrollIndicator={true}
           indicatorStyle="black"
           persistentScrollbar={isAndroid}
+          stickyHeaderIndices={headerNode ? [0] : undefined}
         >
           {headerNode}
           {contentNode}
@@ -307,7 +308,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheetModal>
+    </BottomSheet>
   )
 }
 

package/src/components/Switch/Switch.tsx

@@ -14,6 +14,8 @@ const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 const ICON_SIZE    = s(13)
 
+const DISABLED_OPACITY = 0.45
+
 export interface SwitchProps {
   checked?: boolean
   onCheckedChange?: (checked: boolean) => void
@@ -24,9 +26,10 @@ export interface SwitchProps {
 
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
+  const isDisabled = !!disabled
 
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -37,20 +40,15 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         touchSoundDisabled={true}
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ checked, disabled: !!disabled }}
+        accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >
-        <EaseView
-          style={styles.track}
-          animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
-          transition={COLOR_TRANSITION}
-        >
-          {/*
-            AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
-            with no border — nearly invisible on white page/card surfaces. A 1.5px border
-            that fades out as the track fills gives the off state clear visual definition
-            without adding visual weight to the on state.
-          */}
+        <View style={styles.trackContainer}>
+          <EaseView
+            style={[styles.track, isDisabled && styles.disabledTrack]}
+            animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
+            transition={COLOR_TRANSITION}
+          />
           <EaseView
             style={[styles.trackBorder, { borderWidth: 1.5 }]}
             pointerEvents="none"
@@ -62,14 +60,22 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             animate={{ translateX: checked ? THUMB_TRAVEL : 0 }}
             transition={SPRING_ELASTIC}
           >
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? (isDisabled ? DISABLED_OPACITY : 1) : 0 }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
             </EaseView>
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 0 : 1 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? 0 : (isDisabled ? DISABLED_OPACITY : 1) }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
             </EaseView>
           </EaseView>
-        </EaseView>
+        </View>
       </TouchableOpacity>
     </View>
   )
@@ -79,11 +85,18 @@ const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
   },
-  track: {
+  trackContainer: {
+    position: 'relative',
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
+  },
+  track: {
+    ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY,
+  },
   trackBorder: {
     ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,