@retray-dev/ui-kit 10.2.0 → 12.2.0

package/src/components/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,304 @@
+import React, { createContext, useContext } from 'react'
+import { View, Text, StyleSheet, ViewStyle, Pressable } from 'react-native'
+import { EaseView } from 'react-native-ease'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import { renderIcon } from '../../utils/icons'
+import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
+
+type SelectType = 'radio' | 'checkbox'
+type CardVariant = 'elevated' | 'outlined' | 'filled'
+
+interface SelectableCardContextValue {
+  type: SelectType
+  value: string | string[]
+  onValueChange: (value: string | string[]) => void
+  variant: CardVariant
+}
+
+const SelectableCardContext = createContext<SelectableCardContextValue | null>(null)
+
+// ─── Group ────────────────────────────────────────────────────────────────────
+
+export interface SelectableCardGroupProps {
+  type: SelectType
+  value: string | string[]
+  onValueChange: (value: string | string[]) => void
+  variant?: CardVariant
+  gap?: number
+  style?: ViewStyle
+  children: React.ReactNode
+}
+
+export function SelectableCardGroup({
+  type,
+  value,
+  onValueChange,
+  variant = 'elevated',
+  gap = s(8),
+  style,
+  children,
+}: SelectableCardGroupProps) {
+  return (
+    <SelectableCardContext.Provider value={{ type, value, onValueChange, variant }}>
+      <View style={[styles.group, { gap }, style]}>
+        {children}
+      </View>
+    </SelectableCardContext.Provider>
+  )
+}
+
+// ─── Card ─────────────────────────────────────────────────────────────────────
+
+export interface SelectableCardProps {
+  value: string
+  title: string
+  description?: string
+  iconName?: string
+  icon?: React.ReactNode
+  disabled?: boolean
+  style?: ViewStyle
+}
+
+export function SelectableCard({
+  value,
+  title,
+  description,
+  iconName,
+  icon,
+  disabled = false,
+  style,
+}: SelectableCardProps) {
+  const ctx = useContext(SelectableCardContext)
+  if (!ctx) {
+    throw new Error('SelectableCard must be used inside <SelectableCard.Group>')
+  }
+
+  const { colors } = useTheme()
+  const { type, value: selectedValue, onValueChange, variant } = ctx
+
+  const isSelected =
+    type === 'radio'
+      ? selectedValue === value
+      : Array.isArray(selectedValue) && selectedValue.includes(value)
+
+  const handlePress = () => {
+    if (disabled) return
+    impactLight()
+    if (type === 'radio') {
+      onValueChange(value)
+    } else {
+      const arr = Array.isArray(selectedValue) ? selectedValue : []
+      if (arr.includes(value)) {
+        onValueChange(arr.filter((v) => v !== value))
+      } else {
+        onValueChange([...arr, value])
+      }
+    }
+  }
+
+  const variantStyle: ViewStyle = (() => {
+    const borderWidth = 2 // always 2 — no layout shift on select
+
+    const base = {
+      elevated: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: 'transparent', // reserve space for selected border
+      },
+      outlined: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: colors.border,
+      },
+      filled: {
+        backgroundColor: colors.surfaceStrong,
+        borderWidth,
+        borderColor: colors.border,
+      },
+    }[variant]
+
+    if (isSelected && !disabled) {
+      return {
+        ...base,
+        borderColor: colors.primary,
+        shadowColor: 'transparent',
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0,
+      }
+    }
+
+    if (disabled) {
+      return {
+        ...base,
+        shadowColor: 'transparent',
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0,
+        borderColor: colors.border,
+      }
+    }
+
+    return base
+  })()
+
+  const resolvedIcon = iconName
+    ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted)
+    : icon
+
+  const resolvedIconElement = resolvedIcon ? (
+    <View style={[styles.iconWrapper, disabled && { opacity: 0.45 }]}>{resolvedIcon}</View>
+  ) : null
+
+  const selectorAccessibilityRole = type === 'radio' ? 'radio' : 'checkbox'
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={`${title}${description ? `, ${description}` : ''}`}
+      accessibilityState={{ selected: isSelected, disabled }}
+      style={[
+        styles.card,
+        variantStyle,
+        isSelected && !disabled && styles.cardSelected,
+        style,
+      ]}
+    >
+      <View style={styles.row}>
+        {/* Selection indicator */}
+        <View style={styles.selectorContainer} accessibilityRole={selectorAccessibilityRole} accessibilityState={{ selected: isSelected, disabled }}>
+          {type === 'radio' ? (
+            <EaseView
+              style={styles.radioCircle}
+              animate={{ borderColor: !disabled && isSelected ? colors.primary : colors.border }}
+              transition={COLOR_TRANSITION}
+            >
+              <EaseView
+                animate={{
+                  scale: !disabled && isSelected ? 1 : 0,
+                  opacity: !disabled && isSelected ? 1 : 0,
+                }}
+                transition={SPRING_ELASTIC}
+              >
+                <View style={[styles.radioDot, { backgroundColor: colors.primary }]} />
+              </EaseView>
+            </EaseView>
+          ) : (
+            <EaseView
+              style={styles.checkboxBox}
+              animate={{
+                borderColor: !disabled && isSelected ? colors.primary : colors.border,
+                backgroundColor: !disabled && isSelected ? colors.primary : 'transparent',
+              }}
+              transition={COLOR_TRANSITION}
+            >
+              <EaseView
+                animate={{ opacity: !disabled && isSelected ? 1 : 0 }}
+                transition={OPACITY_TRANSITION}
+              >
+                <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
+              </EaseView>
+            </EaseView>
+          )}
+        </View>
+
+        {/* Optional icon */}
+        {resolvedIconElement}
+
+        {/* Title + description */}
+        <View style={styles.textArea}>
+          <Text
+            style={[styles.title, { color: disabled ? colors.foregroundMuted : colors.foreground }]}
+            allowFontScaling={true}
+            numberOfLines={2}
+          >
+            {title}
+          </Text>
+          {description ? (
+            <Text
+              style={[styles.description, { color: disabled ? colors.foregroundMuted : colors.foregroundSubtle }]}
+              allowFontScaling={true}
+              numberOfLines={4}
+            >
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  group: {
+    width: '100%',
+  },
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+  },
+  cardSelected: {
+    backgroundColor: undefined, // overridden by variantStyle
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: s(16),
+    gap: s(12),
+  },
+  selectorContainer: {
+    paddingTop: vs(1),
+  },
+  radioCircle: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioDot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5),
+  },
+  checkboxBox: {
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(4),
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    width: s(12),
+    height: vs(7),
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: '-45deg' }, { translateY: -1 }],
+  },
+  iconWrapper: {
+    paddingTop: vs(1),
+  },
+  textArea: {
+    flex: 1,
+    gap: vs(4),
+  },
+  title: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(16),
+    lineHeight: mvs(22),
+  },
+  description: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+})

package/src/components/SelectableCard/index.ts

@@ -0,0 +1 @@
+export * from './SelectableCard'

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,80 @@ 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 isPresentedRef = useRef(false)
+  const name = useId()
+
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false
+    onClose?.()
+  }, [onClose])
 
   useEffect(() => {
-    if (open) {
+    if (open && !isPresentedRef.current) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+      isPresentedRef.current = true
+    } else if (!open && wasOpened.current && isPresentedRef.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 +170,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={handleDismiss}
       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 +227,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheet>
+    </BottomSheetModal>
   )
 }
 
@@ -358,7 +277,6 @@ const styles = StyleSheet.create({
   scrollContent: {
     paddingHorizontal: s(16),
     paddingBottom: vs(32),
-    paddingRight: s(16),
   },
   sheetContent: {
     gap: vs(16),
@@ -370,23 +288,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),
-  },
 })
-