@retray-dev/ui-kit 13.2.0 → 13.4.0

package/src/components/ScreenContainer/ScreenContainer.tsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { View, ScrollView, KeyboardAvoidingView, Platform, StyleSheet, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { BREAKPOINTS } from '../../tokens'
+
+export interface ScreenContainerProps {
+  children: React.ReactNode
+  /** Maximum width in points. Defaults to BREAKPOINTS.wide (700). Set to 0 to disable. */
+  maxWidth?: number
+  /** Enable scroll. Default false. */
+  scroll?: boolean
+  /** Background color. Defaults to theme `background`. */
+  backgroundColor?: string
+  /** Padding top override. Defaults to safe area top. */
+  paddingTop?: number
+  /** Padding bottom override. Defaults to safe area bottom. */
+  paddingBottom?: number
+  /** Horizontal padding. Defaults to 0. */
+  paddingHorizontal?: number
+  /** Enable keyboard avoidance. Default false. */
+  keyboard?: boolean
+  style?: ViewStyle
+}
+
+export function ScreenContainer({
+  children,
+  maxWidth = BREAKPOINTS.wide,
+  scroll = false,
+  backgroundColor,
+  paddingTop,
+  paddingBottom,
+  paddingHorizontal,
+  keyboard = false,
+  style: _style,
+}: ScreenContainerProps) {
+  const insets = useSafeAreaInsets()
+  const { colors } = useTheme()
+
+  const wrapperStyle: ViewStyle = {
+    flex: 1,
+    backgroundColor: backgroundColor ?? colors.background,
+    paddingTop: paddingTop ?? insets.top,
+    paddingBottom: paddingBottom ?? insets.bottom,
+    paddingHorizontal: paddingHorizontal ?? 0,
+    ..._style,
+  }
+
+  const inner = (
+    <View style={[styles.inner, { maxWidth: maxWidth || undefined }]}>
+      {children}
+    </View>
+  )
+
+  const content = scroll ? (
+    <ScrollView
+      style={styles.scroll}
+      contentContainerStyle={styles.scrollContent}
+      keyboardShouldPersistTaps="handled"
+    >
+      {inner}
+    </ScrollView>
+  ) : (
+    inner
+  )
+
+  if (keyboard) {
+    return (
+      <KeyboardAvoidingView
+        style={wrapperStyle}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+      >
+        {content}
+      </KeyboardAvoidingView>
+    )
+  }
+
+  return <View style={wrapperStyle}>{content}</View>
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  inner: {
+    flex: 1,
+    alignSelf: 'center',
+    width: '100%',
+  },
+})

package/src/components/ScreenContainer/index.ts

@@ -0,0 +1,2 @@
+export { ScreenContainer } from './ScreenContainer'
+export type { ScreenContainerProps } from './ScreenContainer'

package/src/components/Select/Select.tsx

@@ -51,6 +51,25 @@ export function Select({
 
   const selected = options.find((o) => o.value === value)
 
+  function renderPickerItems(includePlaceholder: boolean, itemColor?: string, disabledColor?: string) {
+    return (
+      <>
+        {includePlaceholder ? (
+          <Picker.Item label={placeholder} value="" enabled={false} color={disabledColor} />
+        ) : null}
+        {options.map((o) => (
+          <Picker.Item
+            key={o.value}
+            label={o.label}
+            value={o.value}
+            enabled={!o.disabled}
+            color={o.disabled ? disabledColor : itemColor}
+          />
+        ))}
+      </>
+    )
+  }
+
   const handleOpen = () => {
     if (disabled) return
     hapticSelection()
@@ -142,18 +161,7 @@ export function Select({
               onValueChange={(val) => setPendingValue(val as string)}
               itemStyle={{ color: colors.foreground }}
             >
-              {!value ? (
-                <Picker.Item label={placeholder} value="" color={colors.foregroundMuted} enabled={false} />
-              ) : null}
-              {options.map((o) => (
-                <Picker.Item
-                  key={o.value}
-                  label={o.label}
-                  value={o.value}
-                  enabled={!o.disabled}
-                  color={o.disabled ? colors.foregroundMuted : colors.foreground}
-                />
-              ))}
+              {renderPickerItems(!value, colors.foreground, colors.foregroundMuted)}
             </Picker>
           </View>
         </Modal>
@@ -175,15 +183,7 @@ export function Select({
           prompt={label}
           style={styles.androidHiddenPicker}
         >
-          {!value ? <Picker.Item label={placeholder} value="" enabled={false} /> : null}
-          {options.map((o) => (
-            <Picker.Item
-              key={o.value}
-              label={o.label}
-              value={o.value}
-              enabled={!o.disabled}
-            />
-          ))}
+          {renderPickerItems(!value)}
         </Picker>
       ) : null}
 
@@ -207,15 +207,7 @@ export function Select({
             },
           ]}
         >
-          <Picker.Item label={placeholder} value="" enabled={false} />
-          {options.map((o) => (
-            <Picker.Item
-              key={o.value}
-              label={o.label}
-              value={o.value}
-              enabled={!o.disabled}
-            />
-          ))}
+          {renderPickerItems(true)}
         </Picker>
       ) : null}
 

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { View, Text, StyleSheet, ViewStyle, ScrollView } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle, ScrollView, ImageSourcePropType } from 'react-native'
+import { Image } from 'expo-image'
 import { useTheme } from '../../theme'
 import { Icon } from '../../utils/icons'
 import { PressableChip } from '../../utils/pressable'
@@ -12,6 +13,7 @@ export interface SelectableGridItem<T extends string | number = string> {
   label?: string
   iconName?: string
   icon?: React.ReactNode
+  imageUrl?: ImageSourcePropType
   disabled?: boolean
 }
 
@@ -40,10 +42,13 @@ interface CellProps<T extends string | number> {
 
 function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
   const { colors } = useTheme()
+  const hasImage = !!item.imageUrl
 
   const iconColor = selected ? colors.primary : colors.foregroundSubtle
   const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={iconColor} /> : null)
 
+  const imageSize = width - 4
+
   return (
     <PressableChip
       onPress={onPress}
@@ -54,25 +59,40 @@ function Cell<T extends string | number>({ item, selected, width, onPress }: Cel
       accessibilityRole="button"
       accessibilityState={{ selected, disabled: item.disabled }}
       accessibilityLabel={item.label ?? String(item.value)}
-      style={[
-        { width },
-        styles.cell,
-        {
-          borderColor: selected ? colors.primary : 'transparent',
-        },
-        item.disabled && styles.cellDisabled,
-      ]}
     >
-      {iconNode}
-      {item.label ? (
-        <Text
-          style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
-          numberOfLines={1}
-          allowFontScaling={true}
-        >
-          {item.label}
-        </Text>
-      ) : null}
+      <View
+        style={[
+          { width },
+          styles.cell,
+          hasImage && styles.cellImage,
+          {
+            borderColor: selected ? colors.primary : 'transparent',
+          },
+          item.disabled && styles.cellDisabled,
+        ]}
+      >
+        {hasImage ? (
+          <Image
+            source={item.imageUrl}
+            style={{ width: imageSize, height: imageSize }}
+            contentFit="cover"
+          />
+        ) : null}
+        {iconNode && !hasImage ? iconNode : null}
+        {item.label ? (
+          <Text
+            style={[
+              styles.label,
+              hasImage && styles.labelImage,
+              { color: selected ? colors.primary : colors.foreground },
+            ]}
+            numberOfLines={2}
+            allowFontScaling={true}
+          >
+            {item.label}
+          </Text>
+        ) : null}
+      </View>
     </PressableChip>
   )
 }
@@ -158,6 +178,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: s(8),
     paddingVertical: vs(10),
   },
+  cellImage: {
+    padding: 0,
+    gap: 0,
+    overflow: 'hidden',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+  },
   cellDisabled: {
     opacity: 0.4,
   },
@@ -167,4 +194,9 @@ const styles = StyleSheet.create({
     lineHeight: mvs(14),
     textAlign: 'center',
   },
+  labelImage: {
+    paddingHorizontal: s(6),
+    paddingBottom: vs(6),
+    paddingTop: vs(3),
+  },
 })

package/src/components/Separator/Separator.tsx

@@ -1,15 +1,33 @@
 import React from 'react'
-import { View, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
 
 export interface SeparatorProps {
   orientation?: 'horizontal' | 'vertical'
+  /** Label shown in the center of a horizontal separator — renders as "── label ──". */
+  label?: string
   style?: ViewStyle
 }
 
-export function Separator({ orientation = 'horizontal', style }: SeparatorProps) {
+export function Separator({ orientation = 'horizontal', label, style }: SeparatorProps) {
   const { colors } = useTheme()
 
+  if (label && orientation !== 'vertical') {
+    return (
+      <View style={[styles.row, style]} accessibilityRole="none">
+        <View style={[styles.line, { backgroundColor: colors.separator }]} />
+        <Text
+          style={[styles.label, { color: colors.foregroundMuted }]}
+          allowFontScaling={true}
+        >
+          {label}
+        </Text>
+        <View style={[styles.line, { backgroundColor: colors.separator }]} />
+      </View>
+    )
+  }
+
   return (
     <View
       style={[
@@ -30,4 +48,19 @@ const styles = StyleSheet.create({
     width: 1,
     height: '100%',
   },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+  },
+  line: {
+    flex: 1,
+    height: 1,
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
 })

package/src/components/Sheet/Sheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
+import React, { useCallback, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
@@ -13,8 +13,8 @@ import {
 } from '@gorhom/bottom-sheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { AntDesign } from '@expo/vector-icons'
-import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { useSheetModal } from '../../hooks/useSheetModal'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export { BottomSheetModalProvider }
@@ -95,41 +95,10 @@ export function Sheet({
   footer,
   snapPoints,
 }: SheetProps) {
-  type SheetState = 'idle' | 'presenting' | 'presented' | 'dismissing'
-
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const ref = useRef<BottomSheetModal>(null)
-  const sheetState = useRef<SheetState>('idle')
-  const onCloseRef = useRef(onClose)
+  const { ref, handleDismiss } = useSheetModal(open, onClose)
   const name = useId()
-  const [tick, setTick] = useState(0)
-
-  useEffect(() => {
-    onCloseRef.current = onClose
-  }, [onClose])
-
-  const handleDismiss = useCallback(() => {
-    sheetState.current = 'idle'
-    onCloseRef.current?.()
-    setTick((t) => t + 1)
-  }, [])
-
-  useEffect(() => {
-    if (open) {
-      if (sheetState.current === 'idle') {
-        sheetState.current = 'presenting'
-        impactMedium()
-        ref.current?.present()
-        sheetState.current = 'presented'
-      }
-    } else {
-      if (sheetState.current === 'presented' || sheetState.current === 'presenting') {
-        sheetState.current = 'dismissing'
-        ref.current?.dismiss()
-      }
-    }
-  }, [open, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (

package/src/components/Tabs/Tabs.tsx

@@ -11,19 +11,19 @@ import { s, vs, ms } from '../../utils/scaling'
 import { SPRINGS } from '../../utils/animations'
 import { PressableTab } from '../../utils/pressable'
 
-export interface TabItem {
+export interface TabItem<T extends string = string> {
   label: string
-  value: string
+  value: T
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
 export type TabsVariant = 'pill' | 'underline'
 
-export interface TabsProps {
-  tabs: TabItem[]
+export interface TabsProps<T extends string = string> {
+  tabs: TabItem<T>[]
   variant?: TabsVariant
-  value?: string
-  onValueChange?: (value: string) => void
+  value?: T
+  onValueChange?: (value: T) => void
   children?: React.ReactNode
   style?: ViewStyle
 }
@@ -89,8 +89,8 @@ function TabTrigger({
   )
 }
 
-export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps) {
-  const [internal, setInternal] = useState(tabs[0]?.value ?? '')
+export function Tabs<T extends string = string>({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps<T>) {
+  const [internal, setInternal] = useState<T>((tabs[0]?.value ?? '') as T)
   const { colors } = useTheme()
   const active = value ?? internal
 
@@ -117,7 +117,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     if (initialised.current) animatePill(active, true)
   }, [active, animatePill])
 
-  const handlePress = (v: string) => {
+  const handlePress = (v: T) => {
     hapticSelection()
     if (!value) setInternal(v)
     onValueChange?.(v)

package/src/components/Tabs/index.ts

@@ -1,2 +1,2 @@
 export { Tabs, TabsContent } from './Tabs'
-export type { TabsProps, TabsContentProps, TabItem } from './Tabs'
+export type { TabsProps, TabsContentProps, TabItem, TabsVariant } from './Tabs'

package/src/components/Text/Text.tsx

@@ -24,6 +24,8 @@ export type TextVariant =
   | 'uppercase-tag'
   | 'button-lg'
   | 'button-sm'
+  | 'code-sm'
+  | 'code-md'
 
 export interface TextProps extends RNTextProps {
   variant?: TextVariant
@@ -50,6 +52,8 @@ const variantStyles: Record<TextVariant, TextStyle> = {
   'uppercase-tag':{ ...TYPOGRAPHY['uppercase-tag'],fontSize: ms(TYPOGRAPHY['uppercase-tag'].fontSize),lineHeight: mvs(TYPOGRAPHY['uppercase-tag'].lineHeight) },
   'button-lg':    { ...TYPOGRAPHY['button-lg'],    fontSize: ms(TYPOGRAPHY['button-lg'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-lg'].lineHeight) },
   'button-sm':    { ...TYPOGRAPHY['button-sm'],    fontSize: ms(TYPOGRAPHY['button-sm'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-sm'].lineHeight) },
+  'code-sm':      { ...TYPOGRAPHY['code-sm'],      fontSize: ms(TYPOGRAPHY['code-sm'].fontSize),      lineHeight: mvs(TYPOGRAPHY['code-sm'].lineHeight) },
+  'code-md':      { ...TYPOGRAPHY['code-md'],      fontSize: ms(TYPOGRAPHY['code-md'].fontSize),      lineHeight: mvs(TYPOGRAPHY['code-md'].lineHeight) },
 }
 
 // Default color by variant — hierarchy matches Airbnb ink/body/muted pattern
@@ -70,6 +74,8 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'uppercase-tag':'foregroundMuted',
   'button-lg':    'foreground',
   'button-sm':    'foreground',
+  'code-sm':      'foreground',
+  'code-md':      'foreground',
 }
 
 let fontWarned = false

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback } from 'react'
+import {
+  SectionList,
+  type SectionListProps,
+  type SectionListRenderItemInfo,
+  RefreshControl,
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+
+export interface VirtualizedListSection<T> {
+  title?: string
+  data: readonly T[]
+}
+
+export interface VirtualizedListProps<T>
+  extends Omit<SectionListProps<T>, 'sections' | 'renderItem' | 'ListEmptyComponent'> {
+  sections: VirtualizedListSection<T>[]
+  renderItem: (info: SectionListRenderItemInfo<T>) => React.ReactElement | null
+  /** Empty state shown when no data. */
+  emptyTitle?: string
+  /** Empty state description. */
+  emptyDescription?: string
+  /** Custom empty state component. Overrides emptyTitle/emptyDescription. */
+  emptyComponent?: React.ReactNode
+  /** Enable pull-to-refresh. */
+  refreshing?: boolean
+  onRefresh?: () => void
+  /** Sticky section headers. Default true. */
+  stickyHeaders?: boolean
+  /** Override section header color. Defaults to foregroundMuted. */
+  headerColor?: string
+  style?: ViewStyle
+}
+
+export function VirtualizedList<T>({
+  sections,
+  renderItem,
+  emptyTitle = 'Sin contenido',
+  emptyDescription,
+  emptyComponent,
+  refreshing = false,
+  onRefresh,
+  stickyHeaders = true,
+  headerColor,
+  style,
+  ...props
+}: VirtualizedListProps<T>) {
+  const { colors } = useTheme()
+
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: VirtualizedListSection<T> }) => {
+      if (!section.title) return null
+      return (
+        <View style={[styles.sectionHeader, { backgroundColor: colors.background }]}>
+          <Text
+            style={[styles.sectionHeaderText, { color: headerColor ?? colors.foregroundMuted }]}
+            allowFontScaling={true}
+          >
+            {section.title}
+          </Text>
+        </View>
+      )
+    },
+    [colors.background, colors.foregroundMuted, headerColor],
+  )
+
+  const keyExtractor = useCallback(
+    (_item: T, index: number) => String(index),
+    [],
+  )
+
+  const flatSections = sections.filter((s) => s.data.length > 0)
+  const hasData = flatSections.length > 0
+
+  if (!hasData) {
+    if (emptyComponent) return <View style={style}>{emptyComponent}</View>
+    return (
+      <View style={[styles.empty, style]}>
+        <Text
+          style={[styles.emptyTitle, { color: colors.foregroundMuted }]}
+          allowFontScaling={true}
+        >
+          {emptyTitle}
+        </Text>
+        {emptyDescription ? (
+          <Text
+            style={[styles.emptyDescription, { color: colors.foregroundMuted }]}
+            allowFontScaling={true}
+          >
+            {emptyDescription}
+          </Text>
+        ) : null}
+      </View>
+    )
+  }
+
+  return (
+    <SectionList
+      sections={flatSections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      keyExtractor={keyExtractor}
+      stickySectionHeadersEnabled={stickyHeaders}
+      refreshControl={
+        onRefresh ? (
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={colors.primary}
+          />
+        ) : undefined
+      }
+      style={style}
+      showsVerticalScrollIndicator={false}
+      {...props}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(16),
+    paddingBottom: vs(6),
+  },
+  sectionHeaderText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
+  empty: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(32),
+    gap: vs(8),
+  },
+  emptyTitle: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  emptyDescription: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+})

package/src/components/VirtualizedList/index.ts

@@ -0,0 +1,2 @@
+export { VirtualizedList } from './VirtualizedList'
+export type { VirtualizedListProps, VirtualizedListSection } from './VirtualizedList'

package/src/hooks/useConfirmDialog.ts

@@ -16,7 +16,6 @@ export interface UseConfirmDialogResult {
 export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
-  const mountedRef = useRef(true)
   const onConfirmRef = useRef(options.onConfirm)
   const onCancelRef = useRef(options.onCancel)
 
@@ -25,12 +24,6 @@ export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDi
     onCancelRef.current = options.onCancel
   })
 
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
   const open = useCallback(() => setVisible(true), [])
 
   const handleConfirm = useCallback(async () => {
@@ -40,10 +33,8 @@ export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDi
     } catch {
       /* consumer handles error in onConfirm */
     } finally {
-      if (mountedRef.current) {
-        setLoading(false)
-        setVisible(false)
-      }
+      setLoading(false)
+      setVisible(false)
     }
   }, [])