@retray-dev/ui-kit 10.0.0 → 10.2.0

package/dist/index.mjs

@@ -1,60 +1,62 @@
+export { Switch } from './chunk-WF2XDFRK.mjs';
+export { TabBar } from './chunk-Z6SFHN6T.mjs';
 export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-CZCQZHG6.mjs';
-export { Toggle } from './chunk-KIHCWCWL.mjs';
+export { Textarea } from './chunk-U2XJFYED.mjs';
+export { Toggle } from './chunk-7LWRKMF5.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
+export { Select } from './chunk-A3A6KNQN.mjs';
+export { SelectableGrid } from './chunk-Z4VHZ7B5.mjs';
 export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
-export { SheetSelect } from './chunk-URI2WBIV.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
+export { SheetSelect } from './chunk-KOO4WITD.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
-export { Switch } from './chunk-QKH5ZOD5.mjs';
-export { TabBar } from './chunk-MLF3EZFW.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
+export { NumberStepper } from './chunk-BUMAMSTZ.mjs';
 export { Pressable } from './chunk-MBMXYJJV.mjs';
-export { PricingCard } from './chunk-4I7D47FH.mjs';
+export { PricingCard } from './chunk-AJRVDP2H.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
 export { RadioGroup } from './chunk-X4G6APW6.mjs';
 export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
 export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
-export { Select } from './chunk-A3A6KNQN.mjs';
-export { SelectableGrid } from './chunk-NA7PARID.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
+export { ImageViewer } from './chunk-ELXBDILQ.mjs';
+export { PagerDots } from './chunk-ZZ2R6KZ3.mjs';
+export { LabelValue } from './chunk-FCSSQK3L.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-OHBNABL5.mjs';
-export { MediaCard } from './chunk-VGTDN7SW.mjs';
+export { ListItem } from './chunk-VKID2D2I.mjs';
+export { MediaCard } from './chunk-IX3NYLYQ.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
-export { MenuItem } from './chunk-ZJKGQMYH.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
-export { DetailRow } from './chunk-JB67UOB5.mjs';
-export { EmptyState } from './chunk-6OAZJ577.mjs';
-export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
+export { MenuItem } from './chunk-TB6SD2FT.mjs';
+export { DetailRow } from './chunk-S2R7UVOE.mjs';
+export { EmptyState } from './chunk-6SECQ2ZF.mjs';
+export { ErrorBoundary } from './chunk-RYZC432S.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
-export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
+export { IconPicker } from './chunk-53Z3NYGE.mjs';
+export { ImageUpload } from './chunk-TZDGAP5N.mjs';
 export { Spinner } from './chunk-WBOOUHSS.mjs';
-export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
-export { PagerDots } from './chunk-4K625MVM.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
-export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+export { CategoryStrip } from './chunk-6L4G6PBT.mjs';
 import './chunk-YNROWHQJ.mjs';
 export { Checkbox } from './chunk-AV4EMIRH.mjs';
-export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
+export { Chip, ChipGroup } from './chunk-DYT7BG5I.mjs';
+export { ConfirmDialog } from './chunk-WYEUNUTP.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-JUXSWN54.mjs';
-export { Input } from './chunk-ZUR7AU5R.mjs';
-export { Accordion } from './chunk-O3HA6TYM.mjs';
-export { AlertBanner } from './chunk-6MKGPAR2.mjs';
-export { AppHeader } from './chunk-AZJF2BLK.mjs';
-export { IconButton } from './chunk-3U4SSNWP.mjs';
+export { CurrencyInput } from './chunk-NMU5FMQJ.mjs';
+export { Input } from './chunk-SXLKNTA4.mjs';
+export { Accordion } from './chunk-YJ7I257J.mjs';
+export { AlertBanner } from './chunk-BEMIQXXU.mjs';
+export { AppHeader } from './chunk-TBNZHU6C.mjs';
+export { IconButton } from './chunk-T2KCAHOS.mjs';
 export { Avatar } from './chunk-JT7HKXRB.mjs';
-export { Badge } from './chunk-TERDKCLE.mjs';
-export { Button } from './chunk-2TFTAWVJ.mjs';
+export { Badge } from './chunk-VF2ATYN3.mjs';
+export { Button } from './chunk-HTHGSXFG.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, renderIcon } from './chunk-T7XZ7H7Y.mjs';
+export { Icon, configureIconFamilies, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -21,7 +21,7 @@ import { TIMINGS, EASINGS } from '../../utils/animations'
 
 export interface AccordionItem {
   value: string
-  trigger: string
+  trigger: string | React.ReactNode
   content: React.ReactNode
   /** Icon name from @expo/vector-icons rendered left of trigger. */
   iconName?: string
@@ -102,11 +102,15 @@ function AccordionItemComponent({
         }}
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
-        accessibilityLabel={item.trigger}
+        accessibilityLabel={typeof item.trigger === 'string' ? item.trigger : undefined}
       >
         <View style={styles.triggerContent}>
           {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}
-          <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
+          {typeof item.trigger === 'string' ? (
+            <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
+          ) : (
+            item.trigger
+          )}
         </View>
         <Animated.View style={[styles.chevron, rotationStyle]}>
           <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import {
-  BottomSheetModal,
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import BottomSheet, {
   BottomSheetView,
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
@@ -15,12 +14,17 @@ import { s, vs, ms, mvs } from '../../utils/scaling'
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
+  /** Secondary text below title. */
+  subtitle?: string
+  /** @deprecated Use `subtitle` instead. */
   description?: string
   confirmLabel?: string
   cancelLabel?: string
   confirmVariant?: 'primary' | 'destructive'
   /** Show a loading spinner in the confirm button (e.g. while async action completes). */
   loading?: boolean
+  /** Show an X close button in the top-right corner. */
+  showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
 }
@@ -28,23 +32,26 @@ export interface ConfirmDialogProps {
 export function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
-  const ref = useRef<BottomSheetModal>(null)
+  const ref = useRef<BottomSheet>(null)
+  const effectiveSubtitle = subtitle ?? description
 
   useEffect(() => {
     if (visible) {
       impactMedium()
-      ref.current?.present()
+      ref.current?.snapToIndex(0)
     } else {
-      ref.current?.dismiss()
+      ref.current?.close()
     }
   }, [visible])
 
@@ -58,24 +65,42 @@ export function ConfirmDialog({
   )
 
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
+      index={-1}
+      onClose={onCancel}
       enableDynamicSizing
-      onDismiss={onCancel}
       backdropComponent={renderBackdrop}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
     >
       <BottomSheetView style={styles.content}>
-        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
-          {title}
-        </Text>
-        {description ? (
-          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-            {description}
-          </Text>
-        ) : null}
+        <View style={styles.header} accessibilityRole="header">
+          <View style={styles.headerRow}>
+            <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+              {title}
+            </Text>
+            {showCloseButton ? (
+              <TouchableOpacity
+                onPress={onCancel}
+                style={styles.closeButton}
+                activeOpacity={0.6}
+                touchSoundDisabled={true}
+                accessibilityRole="button"
+                accessibilityLabel="Close"
+                hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+              >
+                <Feather name="x" size={ms(18)} color={colors.foregroundMuted} />
+              </TouchableOpacity>
+            ) : null}
+          </View>
+          {effectiveSubtitle ? (
+            <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {effectiveSubtitle}
+            </Text>
+          ) : null}
+        </View>
         <View style={styles.actions}>
           <Button
             label={confirmLabel}
@@ -105,7 +130,7 @@ export function ConfirmDialog({
           />
         </View>
       </BottomSheetView>
-    </BottomSheetModal>
+    </BottomSheet>
   )
 }
 
@@ -120,19 +145,32 @@ const styles = StyleSheet.create({
     borderRadius: ms(2),
   },
   content: {
-    paddingHorizontal: s(24),
+    paddingHorizontal: s(16),
     paddingBottom: vs(32),
-    gap: vs(12),
+  },
+  header: {
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4),
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
   },
   title: {
     fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
-    lineHeight: mvs(26),
+    flex: 1,
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8),
   },
-  description: {
+  subtitle: {
     fontFamily: 'Sohne-Regular',
-    fontSize: ms(15),
-    lineHeight: mvs(22),
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
   actions: {
     gap: vs(10),

package/src/components/DetailRow/DetailRow.tsx

@@ -16,7 +16,7 @@ const weightMap: Record<DetailRowLabelWeight, string> = {
 
 export interface DetailRowProps {
   label: React.ReactNode
-  value: string | React.ReactNode
+  value: string | number | React.ReactNode
   /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
   separator?: DetailRowSeparator
   labelWeight?: DetailRowLabelWeight

package/src/components/IconPicker/IconPicker.tsx

@@ -0,0 +1,383 @@
+import React, { useRef, useState, useCallback, useEffect, useMemo, useId } from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+import {
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetBackdrop,
+} from '@gorhom/bottom-sheet'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+import { CURATED_ICONS, ALL_CURATED_ICONS } from '../../utils/curatedIcons'
+import { selectionAsync as hapticSelection, impactMedium } from '../../utils/haptics'
+import { s, vs, ms } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+import type { BottomSheetBackdropProps, BottomSheetModal as BottomSheetModalType } from '@gorhom/bottom-sheet'
+
+const NUM_COLUMNS = 6
+const GAP = 6
+const TRIGGER_SIZE = s(56)
+const SCREEN_HEIGHT = Dimensions.get('window').height
+
+export interface IconPickerProps {
+  value: string | null
+  onChange: (iconName: string) => void
+  label?: string
+  error?: string
+  hint?: string
+  disabled?: boolean
+  numColumns?: number
+  gap?: number
+  style?: ViewStyle
+}
+
+function IconCell({ name, selected, size, onPress }: { name: string; selected: boolean; size: number; onPress: () => void }) {
+  const { colors } = useTheme()
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const iconColor = selected ? colors.primaryForeground : colors.foreground
+  const bg = selected ? colors.primary : 'transparent'
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.6}
+      touchSoundDisabled={true}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      accessibilityLabel={name}
+      style={[styles.cell, { width: size, height: size, backgroundColor: bg }]}
+    >
+      {renderIcon(name, ms(20), iconColor)}
+    </TouchableOpacity>
+  )
+}
+
+const IconCellMemo = React.memo(IconCell)
+
+export function IconPicker({
+  value,
+  onChange,
+  label,
+  error,
+  hint,
+  disabled = false,
+  numColumns = NUM_COLUMNS,
+  gap = GAP,
+  style,
+}: IconPickerProps) {
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const sheetRef = useRef<BottomSheetModalType>(null)
+  const catScrollRef = useRef<any>(null)
+  const [open, setOpen] = useState(false)
+  const [activeCategory, setActiveCategory] = useState<string | null>(null)
+  const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width - s(16) * 2)
+
+  const sheetName = useId()
+
+  const activeIcons = useMemo(() => {
+    if (activeCategory) {
+      return CURATED_ICONS.find((c) => c.name === activeCategory)?.icons ?? ALL_CURATED_ICONS
+    }
+    return ALL_CURATED_ICONS
+  }, [activeCategory])
+
+  const gapPx = s(gap)
+  const cellSize = containerWidth > 0
+    ? Math.floor((containerWidth - gapPx * (numColumns - 1)) / numColumns)
+    : 0
+
+  const rows = useMemo(() => {
+    const result: string[][] = []
+    for (let i = 0; i < activeIcons.length; i += numColumns) {
+      result.push(activeIcons.slice(i, i + numColumns))
+    }
+    return result
+  }, [activeIcons, numColumns])
+
+  useEffect(() => {
+    if (open) {
+      impactMedium()
+      sheetRef.current?.present()
+    } else {
+      sheetRef.current?.dismiss()
+    }
+  }, [open])
+
+  const handleSelect = useCallback(
+    (iconName: string) => {
+      onChange(iconName)
+      setOpen(false)
+      setActiveCategory(null)
+    },
+    [onChange],
+  )
+
+  const handleOpen = useCallback(() => {
+    if (disabled) return
+    setActiveCategory(null)
+    setOpen(true)
+  }, [disabled])
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    setActiveCategory(null)
+  }, [])
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} pressBehavior="close" />
+    ),
+    [],
+  )
+
+  const selectedIcon = value ? renderIcon(value, ms(28), colors.foreground) : null
+
+  return (
+    <View style={[styles.triggerContainer, style]}>
+      {label ? (
+        <Text style={[styles.triggerLabel, { color: colors.foreground }]} allowFontScaling={true}>
+          {label}
+        </Text>
+      ) : null}
+      <TouchableOpacity
+        onPress={handleOpen}
+        disabled={disabled}
+        activeOpacity={0.7}
+        touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? 'Seleccionar icono'}
+        accessibilityState={{ disabled }}
+        style={[
+          styles.trigger,
+          {
+            backgroundColor: disabled ? colors.surface : colors.background,
+            width: TRIGGER_SIZE,
+            height: TRIGGER_SIZE,
+            borderColor: error ? colors.destructive : value ? colors.primary : colors.border,
+          },
+          disabled && styles.triggerDisabled,
+        ]}
+      >
+        {selectedIcon ?? renderIcon('plus', ms(24), colors.foregroundMuted)}
+      </TouchableOpacity>
+      {error ? (
+        <Text
+          style={[styles.helperText, { color: colors.destructive }]}
+          allowFontScaling={true}
+          accessibilityLiveRegion="polite"
+        >
+          {error}
+        </Text>
+      ) : null}
+      {!error && hint ? (
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {hint}
+        </Text>
+      ) : null}
+
+      <BottomSheetModal
+        ref={sheetRef}
+        name={sheetName}
+        onDismiss={handleClose}
+        enableDynamicSizing={true}
+        maxDynamicContentSize={SCREEN_HEIGHT * 0.7}
+        backdropComponent={renderBackdrop}
+        backgroundStyle={[styles.sheetBackground, { backgroundColor: colors.card }]}
+        handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+        enablePanDownToClose
+        topInset={insets.top}
+        android_keyboardInputMode="adjustPan"
+      >
+        <BottomSheetScrollView
+          contentContainerStyle={styles.sheetContent}
+          showsVerticalScrollIndicator={true}
+        >
+          {/* Category section label */}
+          <Text style={[styles.sectionLabel, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+            Categorías
+          </Text>
+
+          {/* Horizontal scrollable category chips */}
+          <ScrollView
+            ref={catScrollRef}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.categoryStrip}
+            style={styles.categoryScroll}
+          >
+            <TouchableOpacity
+              onPress={() => setActiveCategory(null)}
+              activeOpacity={0.7}
+              touchSoundDisabled={true}
+              accessibilityRole="button"
+              accessibilityLabel="Todos"
+              accessibilityState={{ selected: activeCategory === null }}
+              style={[
+                styles.categoryChip,
+                {
+                  backgroundColor: activeCategory === null ? colors.primary : colors.surface,
+                  borderColor: activeCategory === null ? colors.primary : colors.border,
+                },
+              ]}
+            >
+              <View style={styles.categoryChipInner}>
+                {renderIcon('grid', ms(14), activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle)}
+                <Text
+                  style={[
+                    styles.categoryChipText,
+                    { color: activeCategory === null ? colors.primaryForeground : colors.foreground },
+                  ]}
+                  allowFontScaling={true}
+                  numberOfLines={1}
+                >
+                  Todos
+                </Text>
+              </View>
+            </TouchableOpacity>
+            {CURATED_ICONS.map((cat) => (
+              <TouchableOpacity
+                key={cat.name}
+                onPress={() => setActiveCategory(cat.name)}
+                activeOpacity={0.7}
+                touchSoundDisabled={true}
+                accessibilityRole="button"
+                accessibilityLabel={cat.labelEs}
+                accessibilityState={{ selected: activeCategory === cat.name }}
+                style={[
+                  styles.categoryChip,
+                  {
+                    backgroundColor: activeCategory === cat.name ? colors.primary : colors.surface,
+                    borderColor: activeCategory === cat.name ? colors.primary : colors.border,
+                  },
+                ]}
+              >
+                <View style={styles.categoryChipInner}>
+                  {renderIcon(cat.categoryIcon, ms(14), activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle)}
+                  <Text
+                    style={[
+                      styles.categoryChipText,
+                      { color: activeCategory === cat.name ? colors.primaryForeground : colors.foreground },
+                    ]}
+                    allowFontScaling={true}
+                    numberOfLines={1}
+                  >
+                    {cat.labelEs}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+
+          {/* Separator */}
+          <View style={[styles.separator, { backgroundColor: colors.border }]} />
+
+          {/* Icon grid — rendered directly inside BottomSheetScrollView */}
+          <View style={styles.gridContainer} onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
+            {cellSize > 0 ? rows.map((row, i) => (
+              <View key={row[0] ?? `row-${i}`} style={[styles.row, { marginBottom: gapPx }]}>
+                {row.map((name) => (
+                  <IconCellMemo
+                    key={name}
+                    name={name}
+                    selected={value === name}
+                    size={cellSize}
+                    onPress={() => handleSelect(name)}
+                  />
+                ))}
+                {Array.from({ length: numColumns - row.length }).map((_, j) => (
+                  <View key={`spacer-${j}`} style={{ width: cellSize, height: cellSize }} />
+                ))}
+              </View>
+            )) : null}
+          </View>
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  triggerContainer: {
+    gap: vs(8),
+  },
+  triggerLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(14),
+  },
+  trigger: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  triggerDisabled: {
+    opacity: 0.6,
+  },
+  helperText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+  },
+  sheetBackground: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2),
+  },
+  sheetContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(24),
+  },
+  sectionLabel: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(12),
+    marginBottom: vs(8),
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  categoryScroll: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  categoryStrip: {
+    gap: s(8),
+  },
+  categoryChip: {
+    borderRadius: RADIUS.full,
+    borderWidth: 1,
+    paddingVertical: vs(6),
+    paddingHorizontal: s(12),
+  },
+  categoryChipInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(6),
+  },
+  categoryChipText: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(12),
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginVertical: vs(12),
+  },
+  gridContainer: {},
+  row: {
+    flexDirection: 'row',
+    gap: GAP,
+  },
+  cell: {
+    borderRadius: RADIUS.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/IconPicker/index.ts

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