@retray-dev/ui-kit 12.1.0 → 13.0.0

package/src/components/SelectableCard/SelectableCard.tsx

@@ -0,0 +1,302 @@
+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 { Icon } 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
+    ? <Icon name={iconName} size={ms(22)} color={disabled ? colors.foregroundMuted : colors.foregroundMuted} />
+    : icon
+
+  const resolvedIconElement = resolvedIcon ? (
+    <View style={[styles.iconWrapper, disabled && { opacity: 0.45 }]}>{resolvedIcon}</View>
+  ) : null
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole={type === 'radio' ? 'radio' : 'checkbox'}
+      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}>
+          {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/SelectableGrid/SelectableGrid.tsx

@@ -1,38 +1,27 @@
 import React, { useState } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, ScrollView } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle, ScrollView } from 'react-native'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
+import { Icon } from '../../utils/icons'
+import { PressableChip } from '../../utils/pressable'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-import { PRESS_SCALE } from '../../utils/animations'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 
 export interface SelectableGridItem<T extends string | number = string> {
-  /** Unique value emitted on selection. */
   value: T
-  /** Label rendered under the icon. */
   label?: string
-  /** Icon name resolved via the icon registry. */
   iconName?: string
-  /** Custom icon node — overrides `iconName`. */
   icon?: React.ReactNode
   disabled?: boolean
 }
 
 export interface SelectableGridProps<T extends string | number = string> {
   items: SelectableGridItem<T>[]
-  /** Selected value(s). Array when `multiple`. */
   value: T | T[] | null
   onChange: (value: T) => void
-  /** Allow multiple selections. `value` should be an array. Defaults to false. */
   multiple?: boolean
-  /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
   numColumns?: number
-  /** Gap between cells (dp). Defaults to 12. */
   gap?: number
-  /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
   orientation?: 'grid' | 'horizontal'
   style?: ViewStyle
 }
@@ -51,63 +40,44 @@ interface CellProps<T extends string | number> {
 
 function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-    disabled: item.disabled,
-  })
 
   const iconColor = selected ? colors.primary : colors.foregroundSubtle
-  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null)
+  const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={iconColor} /> : null)
 
   return (
-    <Animated.View style={[{ width }, animatedStyle]}>
-      <TouchableOpacity
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={item.disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole="button"
-        accessibilityState={{ selected, disabled: item.disabled }}
-        accessibilityLabel={item.label ?? String(item.value)}
-        {...hoverHandlers}
-        style={[
-          styles.cell,
-          {
-            backgroundColor: selected ? colors.primary + '14' : colors.surface,
-            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}
-      </TouchableOpacity>
-    </Animated.View>
+    <PressableChip
+      onPress={onPress}
+      enabled={!item.disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
+      activateOnHover
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled: item.disabled }}
+      accessibilityLabel={item.label ?? String(item.value)}
+      style={[
+        { width },
+        styles.cell,
+        {
+          backgroundColor: selected ? colors.primary + '14' : colors.surface,
+          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}
+    </PressableChip>
   )
 }
 
-/**
- * Grid of selectable cells (icon + label) — for store / category / emoji pickers
- * where a list would be the wrong shape. Single or multi select.
- *
- * @example
- * <SelectableGrid
- *   items={categories}
- *   value={selected}
- *   onChange={setSelected}
- *   numColumns={4}
- * />
- */
 export function SelectableGrid<T extends string | number = string>({
   items,
   value,
@@ -120,10 +90,7 @@ export function SelectableGrid<T extends string | number = string>({
 }: SelectableGridProps<T>) {
   const [containerWidth, setContainerWidth] = useState(0)
   const gapPx = s(gap)
-  // Compute exact cell width so `numColumns` always fits — percentage widths + gap
-  // overflow and wrap one short. -0.5 guards against sub-pixel rounding overflow.
   const cellWidth = containerWidth > 0 ? (containerWidth - gapPx * (numColumns - 1)) / numColumns - 0.5 : 0
-  // Horizontal mode: fixed 72dp cell width (same scale as grid cells)
   const horizCellWidth = s(72)
 
   const handlePress = (item: SelectableGridItem<T>) => {
@@ -184,22 +151,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: s(4),
   },
   cell: {
-    flex: 1,
     borderRadius: RADIUS.md,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
     gap: vs(4),
-    paddingHorizontal: s(12),
-    paddingVertical: vs(12),
+    paddingHorizontal: s(8),
+    paddingVertical: vs(10),
   },
   cellDisabled: {
     opacity: 0.4,
   },
   label: {
     fontFamily: 'Sohne-Medium',
-    fontSize: ms(12),
-    lineHeight: mvs(15),
+    fontSize: ms(11),
+    lineHeight: mvs(14),
     textAlign: 'center',
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -99,14 +99,21 @@ export function Sheet({
   const insets = useSafeAreaInsets()
   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?.present()
       wasOpened.current = true
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true
+    } else if (!open && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss()
     }
   }, [open])
@@ -156,7 +163,7 @@ export function Sheet({
             activeOpacity={0.6}
             touchSoundDisabled={true}
             accessibilityRole="button"
-            accessibilityLabel="Close"
+            accessibilityLabel="Cerrar"
             hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
           >
             <AntDesign name="close" size={ms(18)} color={colors.foregroundMuted} />
@@ -188,7 +195,7 @@ export function Sheet({
       <BottomSheetModal
       ref={ref}
       name={name}
-      onDismiss={onClose}
+      onDismiss={handleDismiss}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
       maxDynamicContentSize={useDynamicSizing && maxHeight ? maxHeight : undefined}

package/src/components/SheetSelect/SheetSelect.tsx

@@ -4,7 +4,7 @@ import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
 import { PressableChip } from '../../utils/pressable'
 import { RADIUS } from '../../tokens'
@@ -47,7 +47,7 @@ function SheetSelectChip({
   }
 
   const iconColor = selected ? colors.primaryForeground : colors.foreground
-  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null
+  const resolvedIcon = option.iconName ? <Icon name={option.iconName} size={ms(13)} color={iconColor} /> : null
 
   return (
     <PressableChip
@@ -55,7 +55,7 @@ function SheetSelectChip({
       rippleColor="transparent"
       touchSoundDisabled
       accessibilityRole="button"
-      accessibilityLabel={option.disabled ? `${option.label}, unavailable` : option.label}
+      accessibilityLabel={option.disabled ? `${option.label}, no disponible` : option.label}
       accessibilityState={{ selected, disabled: option.disabled }}
     >
       <EaseView

package/src/components/Skeleton/Skeleton.tsx

@@ -24,6 +24,8 @@ export interface SkeletonProps {
   preset?: SkeletonPreset
   /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
   diameter?: number
+  /** Override the skeleton background color. Defaults to `colors.skeleton`. */
+  backgroundColor?: string
   style?: ViewStyle
 }
 
@@ -33,6 +35,7 @@ export function Skeleton({
   borderRadius = 6,
   preset = 'base',
   diameter = 40,
+  backgroundColor,
   style,
 }: SkeletonProps) {
   const { colors, colorScheme } = useTheme()
@@ -40,7 +43,7 @@ export function Skeleton({
   const [containerWidth, setContainerWidth] = useState(300)
 
   const shimmerHighlight =
-    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)'
+    colorScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.07)'
 
   useEffect(() => {
     // Repeats indefinitely on the UI thread — zero JS bridge cost per frame.
@@ -75,12 +78,12 @@ export function Skeleton({
     <View
       style={[
         styles.base,
-        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth as number | `${number}%`, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: backgroundColor ?? colors.skeleton },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
       accessibilityRole="progressbar"
-      accessibilityLabel="Loading"
+      accessibilityLabel="Cargando"
       accessibilityState={{ busy: true }}
     >
       <Animated.View style={[StyleSheet.absoluteFill, shimmerStyle]}>

package/src/components/Spinner/Spinner.tsx

@@ -13,7 +13,7 @@ export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
 
 const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
   sm: 'small',
-  md: 'small',
+  md: 'large',
   lg: 'large',
 }
 
@@ -25,7 +25,7 @@ const labelFontSize: Record<SpinnerSize, number> = {
 
 export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
-  const a11yLabel = label || 'Loading'
+  const a11yLabel = label || 'Cargando'
 
   if (label) {
     return (