@retray-dev/ui-kit 12.1.0 → 12.2.0

package/dist/index.mjs

@@ -1,64 +1,65 @@
+export { Toggle } from './chunk-UNNRUJTM.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
-export { Stats } from './chunk-5OLNXP3S.mjs';
-export { Switch } from './chunk-HLMPMUK2.mjs';
-export { TabBar } from './chunk-D3Y2T42P.mjs';
-export { Tabs, TabsContent } from './chunk-3GEYJ7I5.mjs';
-export { Text } from './chunk-357YO24D.mjs';
-export { Textarea } from './chunk-JNVAIDLK.mjs';
-export { Toggle } from './chunk-FVTVCJAH.mjs';
-export { Select } from './chunk-WOEWGSTU.mjs';
-export { SelectableGrid } from './chunk-NXI4YDZ2.mjs';
-export { Separator } from './chunk-EFLFRAHD.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-FFTYLPSB.mjs';
-export { SheetSelect } from './chunk-P73V2EKS.mjs';
-export { Skeleton } from './chunk-BOVUP27T.mjs';
-export { Slider } from './chunk-4WFMPFZB.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-I4V5XZPS.mjs';
-export { NumberStepper } from './chunk-N4ZPVCJH.mjs';
+export { Stats } from './chunk-4XOB5TTD.mjs';
+export { Switch } from './chunk-RMRS44MQ.mjs';
+export { TabBar } from './chunk-NJG7DHVF.mjs';
+export { Tabs, TabsContent } from './chunk-IVSRW4HS.mjs';
+export { Text } from './chunk-GUTDFUNF.mjs';
+export { Textarea } from './chunk-2BA3JMKK.mjs';
+export { Select } from './chunk-HEDQPK4I.mjs';
+export { SelectableCard, SelectableCardGroup } from './chunk-2P2CB235.mjs';
+export { SelectableGrid } from './chunk-ZR6HSEAB.mjs';
+export { Separator } from './chunk-VJBUCITV.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-M3C7XM2M.mjs';
+export { SheetSelect } from './chunk-KSUWPU2F.mjs';
+export { Skeleton } from './chunk-QDAZGZUF.mjs';
+export { Slider } from './chunk-RJNLAH76.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-AENAVIKT.mjs';
+export { NumberStepper } from './chunk-ELGEOM7I.mjs';
 export { Pressable } from './chunk-E7NEHHXV.mjs';
-export { PricingCard } from './chunk-F4V6XLP4.mjs';
-export { Progress } from './chunk-2I2AYECM.mjs';
-export { RadioGroup } from './chunk-J6Q2YJEV.mjs';
-export { RetrayProvider } from './chunk-XBAGGKLW.mjs';
-export { ToastProvider, sonnerToast as toast, useToast } from './chunk-QSFV2P7O.mjs';
-export { ImageViewer } from './chunk-2A2LEFZG.mjs';
-export { PagerDots } from './chunk-OULVKTWL.mjs';
-export { LabelValue } from './chunk-P64WHW4A.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-JULSIZDM.mjs';
-export { ListItem } from './chunk-FUVYSVGR.mjs';
-export { MediaCard } from './chunk-AQEVCEXV.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-AKM4EPOT.mjs';
-export { MenuItem } from './chunk-DI7CBDL6.mjs';
-export { DetailRow } from './chunk-ZHMSAYLT.mjs';
-export { EmptyState } from './chunk-7HSILTC4.mjs';
-export { ErrorBoundary } from './chunk-LRM4AVYY.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-HJ46DTJE.mjs';
-export { IconPicker } from './chunk-KHYX4IOM.mjs';
-export { ImageUpload } from './chunk-GK4VRMNE.mjs';
-export { Spinner } from './chunk-BCWEHE34.mjs';
+export { PricingCard } from './chunk-E5UKLSJZ.mjs';
+export { Progress } from './chunk-TS7DGUIR.mjs';
+export { RadioGroup } from './chunk-LNPKGWBG.mjs';
+export { RetrayProvider } from './chunk-ZIMY2QUM.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-YMYIEVZP.mjs';
+export { ImageViewer } from './chunk-LPV4NJJK.mjs';
+export { PagerDots } from './chunk-OLVJFKXS.mjs';
+export { LabelValue } from './chunk-57V2LXCK.mjs';
+export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-C43HRKXH.mjs';
+export { ListItem } from './chunk-EDLCGYIO.mjs';
+export { MediaCard } from './chunk-7ELGZ66G.mjs';
+export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-ULGNQPNE.mjs';
+export { MenuItem } from './chunk-UQ4742ET.mjs';
+export { DetailRow } from './chunk-2LG326TT.mjs';
+export { EmptyState } from './chunk-HC4VVCWY.mjs';
+export { ErrorBoundary } from './chunk-NLZY4TXU.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-7AFZWSCI.mjs';
+export { IconPicker } from './chunk-SAWUXP3A.mjs';
+export { ImageUpload } from './chunk-CF27NBXO.mjs';
+export { Spinner } from './chunk-LIS6I5UP.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-2CBQKU7H.mjs';
-export { CategoryStrip } from './chunk-MYZ2EDYU.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-BXF4AMHY.mjs';
+export { CategoryStrip } from './chunk-3XCFYSX4.mjs';
 import './chunk-YNROWHQJ.mjs';
-export { Checkbox } from './chunk-3N2M3WZL.mjs';
-export { Chip, ChipGroup } from './chunk-FA2KMTH5.mjs';
-export { ConfirmDialog } from './chunk-JCZQOY4O.mjs';
-export { CurrencyDisplay } from './chunk-BQZE3HAW.mjs';
-export { CurrencyInput } from './chunk-X26S5EVZ.mjs';
-export { Input } from './chunk-PGERH3P7.mjs';
-export { Accordion } from './chunk-265G6A46.mjs';
-export { AlertBanner } from './chunk-V6NFJXKO.mjs';
-export { AppHeader } from './chunk-ISY26JQJ.mjs';
-export { IconButton } from './chunk-DF6DU42P.mjs';
-export { Avatar } from './chunk-S3KJCPEJ.mjs';
-export { Badge } from './chunk-3UYAZ7I4.mjs';
-export { Button } from './chunk-DOGIPOF5.mjs';
+export { Checkbox } from './chunk-UBUXUMER.mjs';
+export { Chip, ChipGroup } from './chunk-F3YTWO3T.mjs';
+export { ConfirmDialog } from './chunk-QXDGGOLC.mjs';
+export { CurrencyDisplay } from './chunk-MEPSKGBO.mjs';
+export { CurrencyInput } from './chunk-2HFD4IHU.mjs';
+export { Input } from './chunk-DF7JA72E.mjs';
+export { Accordion } from './chunk-NHDI3VQB.mjs';
+export { AlertBanner } from './chunk-4OORJ2DY.mjs';
+export { AppHeader } from './chunk-MVMGPZN6.mjs';
+export { IconButton } from './chunk-LOBLCFMN.mjs';
+export { Avatar } from './chunk-QOLWA2PW.mjs';
+export { Badge } from './chunk-GH67YXG6.mjs';
+export { Button } from './chunk-4J2PXL36.mjs';
 import './chunk-3DKJ2GIC.mjs';
 export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
 export { Icon, configureIconFamilies, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-EMUWGDWC.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-YTXRIXNZ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';
 import { useState, useCallback } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "12.1.0",
+  "version": "12.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Accordion/Accordion.tsx

@@ -29,6 +29,12 @@ export interface AccordionItem {
   icon?: React.ReactNode
   /** Override icon color. Defaults to foregroundMuted. */
   iconColor?: string
+  /**
+   * Action buttons rendered after the trigger content but before the chevron.
+   * Automatically touch-isolated — taps on actions won't toggle the accordion.
+   * Use this instead of embedding interactive elements inside `trigger`.
+   */
+  triggerActions?: React.ReactNode
 }
 
 export interface AccordionProps {
@@ -112,6 +118,14 @@ function AccordionItemComponent({
             item.trigger
           )}
         </View>
+        {item.triggerActions ? (
+          <View
+            style={styles.triggerActions}
+            onTouchEnd={(e) => e.stopPropagation()}
+          >
+            {item.triggerActions}
+          </View>
+        ) : null}
         <Animated.View style={[styles.chevron, rotationStyle]}>
           <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />
         </Animated.View>
@@ -206,6 +220,12 @@ const styles = StyleSheet.create({
   chevron: {
     marginLeft: s(8),
   },
+  triggerActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(4),
+    marginLeft: s(8),
+  },
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {

package/src/components/Button/Button.tsx

@@ -73,31 +73,38 @@ function ButtonBase({
     onPress?.()
   }
 
-  const containerVariantStyle: ViewStyle = {
-    primary:     { backgroundColor: colors.primary },
-    secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
-    text:        { backgroundColor: 'transparent' },
-    destructive: { backgroundColor: colors.destructive },
-  }[variant]
-
-  const labelVariantStyle: TextStyle = {
-    primary:     { color: colors.primaryForeground },
-    secondary:   { color: colors.primary },
-    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
-    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
-    // carry the brand voltage. Falls back to primary when no accent is defined.
-    text:        { color: colors.accentResolved },
-    destructive: { color: colors.destructiveForeground },
-  }[variant]
-
-  const textColor = iconColor ?? (labelVariantStyle.color as string)
+  const containerVariantStyle: ViewStyle = isDisabled
+    ? {
+        primary:     { backgroundColor: colors.surface },
+        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+        text:        { backgroundColor: 'transparent' },
+        destructive: { backgroundColor: colors.surface },
+      }[variant]
+    : {
+        primary:     { backgroundColor: colors.primary },
+        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
+        text:        { backgroundColor: 'transparent' },
+        destructive: { backgroundColor: colors.destructive },
+      }[variant]
+
+  const labelColor = isDisabled
+    ? colors.foregroundMuted
+    : {
+        primary:     colors.primaryForeground,
+        secondary:   colors.primary,
+        text:        colors.accentResolved,
+        destructive: colors.destructiveForeground,
+      }[variant]
+
+  const textColor = iconColor ?? labelColor
 
   const effectiveIcon: React.ReactNode = iconName
     ? renderIcon(iconName, iconSizeMap[size], textColor)
     : typeof icon === 'function' ? icon({ label, size, variant, color: textColor }) : icon
 
-  const spinnerColor =
-    variant === 'destructive' ? colors.destructiveForeground
+  const spinnerColor = isDisabled
+    ? colors.foregroundMuted
+    : variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
     : colors.accentResolved
 
@@ -113,7 +120,6 @@ function ButtonBase({
           containerVariantStyle,
           containerSizeStyles[size],
           fullWidth && styles.fullWidth,
-          isDisabled && styles.disabled,
           restStyle,
         ]}
         enabled={!isDisabled}
@@ -130,7 +136,7 @@ function ButtonBase({
           <>
             <ActivityIndicator size="small" color={spinnerColor} style={{ marginRight: s(6) }} />
             <Text
-              style={[styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading]}
+              style={[styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading]}
               allowFontScaling={true}
               numberOfLines={1}
             >
@@ -141,7 +147,7 @@ function ButtonBase({
           <>
             {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
             <Text
-              style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
+              style={[styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
               allowFontScaling={true}
               numberOfLines={1}
             >
@@ -167,9 +173,6 @@ const styles = StyleSheet.create({
   fullWidth: {
     width: '100%',
   },
-  disabled: {
-    opacity: 0.45,
-  },
   label: {
     fontFamily: 'Sohne-Medium',
     flexShrink: 1,

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -42,14 +42,21 @@ export function ConfirmDialog({
   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
+    onCancel()
+  }, [onCancel])
+
   useEffect(() => {
-    if (visible) {
+    if (visible && !isPresentedRef.current) {
       impactMedium()
       ref.current?.present()
       wasOpened.current = true
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true
+    } else if (!visible && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss()
     }
   }, [visible])
@@ -70,7 +77,7 @@ export function ConfirmDialog({
       <BottomSheetModal
       ref={ref}
       name={name}
-      onDismiss={onCancel}
+      onDismiss={handleDismiss}
       enableDynamicSizing
       backdropComponent={renderBackdrop}
       backgroundStyle={{ ...styles.background, backgroundColor: colors.card }}

package/src/components/ImageUpload/ImageUpload.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text, Image, StyleSheet, ViewStyle, Platform } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 import { impactLight } from '../../utils/haptics'
@@ -27,6 +27,8 @@ export interface ImageUploadProps {
   borderRadius?: number
   /** Aspect ratio for the selected image. Defaults to 'cover'. */
   resizeMode?: 'cover' | 'contain' | 'stretch'
+  /** Whether to allow the user to crop the image after selecting. Defaults to true. */
+  allowsEditing?: boolean
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
@@ -42,11 +44,13 @@ export function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = 'cover',
+  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
 }: ImageUploadProps) {
   const { colors } = useTheme()
+  const [imageLoaded, setImageLoaded] = useState(false)
 
   const handlePress = async () => {
     if (disabled || loading) return
@@ -81,11 +85,12 @@ export function ImageUpload({
 
     const result = await picker.launchImageLibraryAsync({
       mediaTypes: ['images'],
-      allowsEditing: true,
+      allowsEditing,
       quality: 0.8,
     })
 
     if (!result.canceled && result.assets?.[0]) {
+      setImageLoaded(false)
       onChange?.(result.assets[0].uri)
     }
   }
@@ -97,7 +102,7 @@ export function ImageUpload({
     borderWidth: value ? 0 : 1,
     borderStyle: 'dashed',
     borderColor: colors.border,
-    backgroundColor: value ? 'transparent' : colors.surface,
+    backgroundColor: (value && imageLoaded) ? 'transparent' : colors.surface,
     overflow: 'hidden',
   }
 
@@ -117,6 +122,8 @@ export function ImageUpload({
           source={{ uri: value }}
           style={[StyleSheet.absoluteFillObject, { borderRadius }]}
           resizeMode={resizeMode}
+          onLoad={() => setImageLoaded(true)}
+          onError={() => setImageLoaded(true)}
         />
       ) : (
         <View style={styles.placeholder}>

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'