@retray-dev/ui-kit 10.2.0 → 12.1.0

package/dist/index.mjs

@@ -1,63 +1,64 @@
-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-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-Y2NS74WS.mjs';
-export { SheetSelect } from './chunk-KOO4WITD.mjs';
-export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
-export { Slider } from './chunk-JMOZEC77.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-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 { 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-VKID2D2I.mjs';
-export { MediaCard } from './chunk-IX3NYLYQ.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.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 { IconPicker } from './chunk-53Z3NYGE.mjs';
-export { ImageUpload } from './chunk-TZDGAP5N.mjs';
-export { Spinner } from './chunk-WBOOUHSS.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 { 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 { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
-export { CategoryStrip } from './chunk-6L4G6PBT.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-2CBQKU7H.mjs';
+export { CategoryStrip } from './chunk-MYZ2EDYU.mjs';
 import './chunk-YNROWHQJ.mjs';
-export { Checkbox } from './chunk-AV4EMIRH.mjs';
-export { Chip, ChipGroup } from './chunk-DYT7BG5I.mjs';
-export { ConfirmDialog } from './chunk-WYEUNUTP.mjs';
-export { CurrencyDisplay } from './chunk-BRKYVJVV.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-VF2ATYN3.mjs';
-export { Button } from './chunk-HTHGSXFG.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';
 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 } from './chunk-SOYNZDVY.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-EMUWGDWC.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": "10.2.0",
+  "version": "12.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -110,7 +110,7 @@
       "react-native-worklets": "0.5.1",
       "@types/react": "19.1.17",
       "react-native-safe-area-context": "5.6.2",
-      "@gorhom/bottom-sheet": "5.2.8"
+      "@gorhom/bottom-sheet": "5.2.14"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@expo/vector-icons": "^15.1.1",
-    "@gorhom/bottom-sheet": "5.2.8",
+    "@gorhom/bottom-sheet": "5.2.14",
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
     "@shopify/react-native-skia": "2.2.12",

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
-import BottomSheet, {
+import {
+  BottomSheetModal,
   BottomSheetView,
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Feather } from '@expo/vector-icons'
 import { impactMedium, notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -14,16 +16,11 @@ 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
@@ -33,7 +30,6 @@ export function ConfirmDialog({
   visible,
   title,
   subtitle,
-  description,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
@@ -43,37 +39,44 @@ export function ConfirmDialog({
   onCancel,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
-  const ref = useRef<BottomSheet>(null)
-  const effectiveSubtitle = subtitle ?? description
+  const insets = useSafeAreaInsets()
+  const ref = useRef<BottomSheetModal>(null)
+  const wasOpened = useRef(false)
+  const name = useId()
 
   useEffect(() => {
     if (visible) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+    } else if (wasOpened.current) {
+      ref.current?.dismiss()
     }
   }, [visible])
 
-  const renderBackdrop = (props: BottomSheetBackdropProps) => (
-    <BottomSheetBackdrop
-      {...props}
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      pressBehavior="close"
-    />
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
   )
 
   return (
-    <BottomSheet
+      <BottomSheetModal
       ref={ref}
-      index={-1}
-      onClose={onCancel}
+      name={name}
+      onDismiss={onCancel}
       enableDynamicSizing
       backdropComponent={renderBackdrop}
-      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}
     >
       <BottomSheetView style={styles.content}>
         <View style={styles.header} accessibilityRole="header">
@@ -95,9 +98,9 @@ export function ConfirmDialog({
               </TouchableOpacity>
             ) : null}
           </View>
-          {effectiveSubtitle ? (
+          {subtitle ? (
             <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-              {effectiveSubtitle}
+              {subtitle}
             </Text>
           ) : null}
         </View>
@@ -108,7 +111,10 @@ export function ConfirmDialog({
             fullWidth
             loading={loading}
             disabled={loading}
-            onPress={() => { notificationSuccess(); onConfirm() }}
+            onPress={() => {
+              notificationSuccess()
+              onConfirm()
+            }}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}
@@ -125,12 +131,15 @@ export function ConfirmDialog({
             label={cancelLabel}
             variant="secondary"
             fullWidth
-            onPress={() => { hapticSelection(); onCancel() }}
+            onPress={() => {
+              hapticSelection()
+              onCancel()
+            }}
             icon={<Feather name="x" size={15} color={colors.foreground} />}
           />
         </View>
       </BottomSheetView>
-    </BottomSheet>
+    </BottomSheetModal>
   )
 }
 

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import { ViewStyle, TextStyle } from 'react-native'
+import { ViewStyle, TextStyle, TextInputProps } from 'react-native'
 import { Input } from '../Input'
 import { ms, vs } from '../../utils/scaling'
 
-export interface CurrencyInputProps {
-  value?: string
-  onChangeText?: (formatted: string) => void
+export interface CurrencyInputProps extends TextInputProps {
   /** Called with the parsed numeric value (no separators, no prefix). */
   onChangeValue?: (raw: number) => void
   /** Currency symbol shown left of the value. Any string (`'$'`, `'€'`, `'£'`, `'COP '`). Defaults to `'$'`. */
@@ -18,10 +16,7 @@ export interface CurrencyInputProps {
   /** Red helper text; also changes input border to destructive color. */
   error?: string
   hint?: string
-  placeholder?: string
-  editable?: boolean
   containerStyle?: ViewStyle
-  style?: TextStyle
   /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
   sheetMode?: boolean
 }
@@ -47,6 +42,7 @@ export function CurrencyInput({
   containerStyle,
   style,
   sheetMode,
+  ...props
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -73,6 +69,7 @@ export function CurrencyInput({
 
   return (
     <Input
+      {...props}
       value={displayValue}
       onChangeText={handleChange}
       keyboardType="numeric"

package/src/components/IconPicker/IconPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect, useMemo, useId } from 'react'
+import React, { useRef, useState, useCallback, useMemo, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import {
@@ -13,6 +13,7 @@ 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 { Spinner } from '../Spinner'
 import type { BottomSheetBackdropProps, BottomSheetModal as BottomSheetModalType } from '@gorhom/bottom-sheet'
 
 const NUM_COLUMNS = 6
@@ -74,10 +75,10 @@ export function IconPicker({
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const sheetRef = useRef<BottomSheetModalType>(null)
-  const catScrollRef = useRef<any>(null)
-  const [open, setOpen] = useState(false)
+  const catScrollRef = useRef<ScrollView>(null)
   const [activeCategory, setActiveCategory] = useState<string | null>(null)
   const [containerWidth, setContainerWidth] = useState(() => Dimensions.get('window').width - s(16) * 2)
+  const [ready, setReady] = useState(false)
 
   const sheetName = useId()
 
@@ -101,35 +102,26 @@ export function IconPicker({
     return result
   }, [activeIcons, numColumns])
 
-  useEffect(() => {
-    if (open) {
-      impactMedium()
-      sheetRef.current?.present()
-    } else {
-      sheetRef.current?.dismiss()
-    }
-  }, [open])
+  const handleDismiss = useCallback(() => {
+    setActiveCategory(null)
+    setReady(false)
+  }, [])
 
   const handleSelect = useCallback(
     (iconName: string) => {
       onChange(iconName)
-      setOpen(false)
-      setActiveCategory(null)
     },
     [onChange],
   )
 
   const handleOpen = useCallback(() => {
     if (disabled) return
+    impactMedium()
     setActiveCategory(null)
-    setOpen(true)
+    setReady(false)
+    sheetRef.current?.present()
   }, [disabled])
 
-  const handleClose = useCallback(() => {
-    setOpen(false)
-    setActiveCategory(null)
-  }, [])
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} pressBehavior="close" />
@@ -185,12 +177,12 @@ export function IconPicker({
       <BottomSheetModal
         ref={sheetRef}
         name={sheetName}
-        onDismiss={handleClose}
+        onDismiss={handleDismiss}
         enableDynamicSizing={true}
         maxDynamicContentSize={SCREEN_HEIGHT * 0.7}
         backdropComponent={renderBackdrop}
-        backgroundStyle={[styles.sheetBackground, { backgroundColor: colors.card }]}
-        handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
+        backgroundStyle={{ ...styles.sheetBackground, backgroundColor: colors.card }}
+        handleIndicatorStyle={{ ...styles.handle, backgroundColor: colors.border }}
         enablePanDownToClose
         topInset={insets.top}
         android_keyboardInputMode="adjustPan"
@@ -199,103 +191,118 @@ export function IconPicker({
           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}
+          {/* Measuring container — always rendered so onLayout fires */}
+          <View
+            style={styles.gridContainer}
+            onLayout={(e) => {
+              setContainerWidth(e.nativeEvent.layout.width)
+              setReady(true)
+            }}
           >
-            <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>
+            {!ready ? (
+              <View style={styles.loader}>
+                <Spinner size="md" color={colors.primary} label="Cargando iconos..." />
               </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
+            ) : (
+              <>
+                {/* 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.categoryChipText,
-                      { color: activeCategory === cat.name ? colors.primaryForeground : colors.foreground },
+                      styles.categoryChip,
+                      {
+                        backgroundColor: activeCategory === null ? colors.primary : colors.surface,
+                        borderColor: activeCategory === null ? colors.primary : colors.border,
+                      },
                     ]}
-                    allowFontScaling={true}
-                    numberOfLines={1}
                   >
-                    {cat.labelEs}
-                  </Text>
-                </View>
-              </TouchableOpacity>
-            ))}
-          </ScrollView>
+                    <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 }]} />
+                {/* 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}
+                {/* Icon grid */}
+                {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); sheetRef.current?.dismiss() }}
+                      />
+                    ))}
+                    {Array.from({ length: numColumns - row.length }).map((_, j) => (
+                      <View key={`spacer-${j}`} style={{ width: cellSize, height: cellSize }} />
+                    ))}
+                  </View>
+                )) : null}
+              </>
+            )}
           </View>
         </BottomSheetScrollView>
       </BottomSheetModal>
@@ -380,4 +387,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  loader: {
+    minHeight: vs(200),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 })