@retray-dev/ui-kit 6.2.0 → 7.0.1

package/src/components/VirtualList/VirtualList.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react'
+import { FlatList, FlatListProps, ListRenderItem } from 'react-native'
+
+export interface VirtualListItem {
+  id?: string | number
+}
+
+export interface VirtualListProps<T> extends Omit<FlatListProps<T>, 'getItemLayout'> {
+  /**
+   * Fixed row height in px. When provided, enables `getItemLayout` so the list
+   * skips async measurement — large datasets scroll and `scrollToIndex` jump
+   * without layout passes. Omit only for variable-height rows.
+   */
+  itemHeight?: number
+}
+
+const defaultKeyExtractor = <T,>(item: T, index: number): string => {
+  const id = (item as VirtualListItem | null)?.id
+  return id !== undefined ? String(id) : String(index)
+}
+
+/**
+ * Virtualized list primitive. Thin wrapper over `FlatList` with sane defaults
+ * for the common case: stable keys + optional fixed-height fast path.
+ *
+ * For 10k+ rows, pass `itemHeight` and a `React.memo`-wrapped `renderItem` so
+ * only on-screen rows mount and re-render.
+ *
+ * @example
+ * const renderItem = useCallback(({ item }) => <ListItem title={item.title} onPress={...} />, [])
+ * <VirtualList data={rows} renderItem={renderItem} itemHeight={64} />
+ */
+function VirtualListInner<T>(
+  { itemHeight, keyExtractor, renderItem, ...props }: VirtualListProps<T>,
+  ref: React.Ref<FlatList<T>>,
+) {
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<T> | null | undefined, index: number) => ({
+      length: itemHeight ?? 0,
+      offset: (itemHeight ?? 0) * index,
+      index,
+    }),
+    [itemHeight],
+  )
+
+  return (
+    <FlatList<T>
+      ref={ref}
+      keyExtractor={keyExtractor ?? defaultKeyExtractor}
+      renderItem={renderItem as ListRenderItem<T>}
+      getItemLayout={itemHeight !== undefined ? getItemLayout : undefined}
+      removeClippedSubviews
+      {...props}
+    />
+  )
+}
+
+export const VirtualList = React.forwardRef(VirtualListInner) as <T>(
+  props: VirtualListProps<T> & { ref?: React.Ref<FlatList<T>> },
+) => React.ReactElement

package/src/components/VirtualList/index.ts

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

package/src/fonts.ts

@@ -1,30 +1,48 @@
 /**
- * Poppins font family required by @retray-dev/ui-kit components.
- * 
+ * Sohne font family required by @retray-dev/ui-kit components.
+ *
  * Consumer apps must load these fonts at app root using expo-font:
- * 
+ *
  * @example
  * import { useFonts } from 'expo-font'
- * import { PoppinsFonts } from '@retray-dev/ui-kit'
- * 
+ * import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+ *
  * function App() {
- *   const [fontsLoaded] = useFonts(PoppinsFonts)
+ *   const [fontsLoaded] = useFonts(SohneFonts)
  *   if (!fontsLoaded) return null
  *   // render app
  * }
  */
-export const PoppinsFonts = {
-  'Poppins-Thin':           require('./assets/fonts/Poppins-Thin.ttf'),
-  'Poppins-ExtraLight':     require('./assets/fonts/Poppins-ExtraLight.ttf'),
-  'Poppins-Light':          require('./assets/fonts/Poppins-Light.ttf'),
-  'Poppins-Regular':        require('./assets/fonts/Poppins-Regular.ttf'),
-  'Poppins-Medium':         require('./assets/fonts/Poppins-Medium.ttf'),
-  'Poppins-SemiBold':       require('./assets/fonts/Poppins-SemiBold.ttf'),
-  'Poppins-Bold':           require('./assets/fonts/Poppins-Bold.ttf'),
-  'Poppins-ExtraBold':      require('./assets/fonts/Poppins-ExtraBold.ttf'),
-  'Poppins-Black':          require('./assets/fonts/Poppins-Black.ttf'),
-  'Poppins-Italic':         require('./assets/fonts/Poppins-Italic.ttf'),
-  'Poppins-MediumItalic':   require('./assets/fonts/Poppins-MediumItalic.ttf'),
-  'Poppins-SemiBoldItalic': require('./assets/fonts/Poppins-SemiBoldItalic.ttf'),
-  'Poppins-BoldItalic':     require('./assets/fonts/Poppins-BoldItalic.ttf'),
+/* eslint-disable @typescript-eslint/no-require-imports */
+export const SohneFonts = {
+  // Sohne base
+  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
+  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
+  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
+  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
+  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
+  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
+  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
+  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
+  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
+  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
+  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
+  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
+  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
+  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
+  // SohneMono
+  'SohneMono-ExtraLight':         require('./assets/fonts/SohneMono-ExtraLight.otf'),
+  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
+  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
+  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
+  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
+  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
+  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
+  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
+  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
+  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
+  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
+  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
+  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
+  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
 } as const

package/src/index.ts

@@ -34,7 +34,9 @@ export * from './components/CurrencyDisplay'
 // CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
 export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
+export * from './components/ListGroup'
 export * from './components/MenuItem'
+export * from './components/MenuGroup'
 export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
@@ -43,9 +45,11 @@ export * from './components/MediaCard'
 export * from './components/CategoryStrip'
 export * from './components/Pressable'
 export * from './components/DetailRow'
+export * from './components/Form'
+export * from './components/VirtualList'
 
 // Icon utility
-export { Icon, renderIcon } from './utils/icons'
+export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'

package/src/theme/colors.ts

@@ -1,61 +1,74 @@
 import { ThemeColors, ResolvedColors } from './types'
-import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken, isDark } from './colorUtils'
+import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken } from './colorUtils'
 
-// ─── Default palettes (12 tokens each) ───────────────────────────────────────
-// These are the only values consumers need to override.
-// Designed to look great out of the box with no customization.
+// ─── Default palettes ─────────────────────────────────────────────────────────
+// AUDIT FIXES applied:
+//   · accent + accentForeground added — system was fully achromatic
+//   · warning darkened: #e67e00 → #9a5200 (white text: 2.86:1 → 5.86:1 ✓ AA)
+//   · destructive darkened: #e53935 → #c72828 (white text: 4.22:1 → 5.59:1 ✓ AA)
+//   · foreground tweaked #222222 → #1a1a1a (matches primary, 16.1:1 on white ✓)
 
 export const defaultLight: ThemeColors = {
-  background: '#ffffff',
-  foreground: '#222222',       // Airbnb ink — deep near-black, never pure black
-  card: '#ffffff',
-  primary: '#1a1a1a',          // Near-black primary — clean, premium default
-  primaryForeground: '#ffffff',
-  border: '#dddddd',           // Airbnb hairline — light, airy
-  destructive: '#e53935',
+  background:            '#ffffff',
+  foreground:            '#1a1a1a',
+  card:                  '#ffffff',
+  primary:               '#1a1a1a',
+  primaryForeground:     '#ffffff',
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent:                '#d4561d',
+  accentForeground:      '#ffffff',
+  border:                '#dddddd',
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive:           '#c72828',
   destructiveForeground: '#ffffff',
-  success: '#1a7a45',
-  successForeground: '#ffffff',
-  warning: '#e67e00',
-  warningForeground: '#ffffff',
+  success:               '#1a7a45',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning:               '#9a5200',
+  warningForeground:     '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
-  background: '#0f0f0f',
-  foreground: '#fafafa',
-  card: '#1c1c1c',
-  primary: '#fafafa',
-  primaryForeground: '#0f0f0f',
-  border: '#303030',
-  destructive: '#ef5350',
+  background:            '#0f0f0f',
+  foreground:            '#fafafa',
+  card:                  '#1c1c1c',
+  primary:               '#fafafa',
+  primaryForeground:     '#0f0f0f',
+  // AUDIT FIX: lighter accent for dark surfaces (warm amber-orange)
+  accent:                '#e87645',
+  accentForeground:      '#ffffff',
+  border:                '#303030',
+  destructive:           '#ef5350',
   destructiveForeground: '#ffffff',
-  success: '#2e7d52',
-  successForeground: '#ffffff',
-  warning: '#f57c00',
-  warningForeground: '#ffffff',
+  success:               '#2e7d52',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: brighter amber for dark-bg visibility; dark text for contrast
+  // #f5a623 on #0f0f0f = 8.6:1 ✓ as indicator; #0f0f0f text on #f5a623 = 8.6:1 ✓
+  warning:               '#f5a623',
+  warningForeground:     '#0f0f0f',
 }
 
 // ─── Color derivation ─────────────────────────────────────────────────────────
-// Takes 12 public tokens → produces full ResolvedColors for component consumption.
-// Dark mode uses bg-blended tints instead of white-blended to stay on-palette.
-
 export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
   const dark = scheme === 'dark'
   const bg = t.background
 
-  // Text hierarchy: foreground mixed with background at different opacities
-  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55)
-  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38)
+  // AUDIT FIX: Text hierarchy opacities raised to pass WCAG AA.
+  //   foregroundSubtle was 0.55 → ~#858585 (3.5:1 fail on white)
+  //   foregroundMuted  was 0.38 → ~#ababab (2.2:1 critical fail on white)
+  //   New values on light (#1a1a1a on #ffffff):
+  //     foregroundSubtle 0.70 → ~#646464 (5.9:1 ✓ AA)
+  //     foregroundMuted  0.62 → ~#767676 (4.5:1 ✓ AA minimum)
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.70)
+  const foregroundMuted  = mixWithBackground(t.foreground, bg, 0.62)
 
-  // Surface fills: slight offset from background
   const surface = dark
-    ? lighten(bg, -0.06)   // slightly lighter than dark bg
-    : darken(bg, 0.04)     // slightly darker than white → #f7f7f7 equivalent
+    ? lighten(bg, -0.06)
+    : darken(bg, 0.04)
   const surfaceStrong = dark
     ? lighten(bg, -0.12)
-    : darken(bg, 0.08)     // #ebebeb equivalent
+    : darken(bg, 0.08)
 
-  // Semantic tints: color blended toward background
   const destructiveTint = dark
     ? withAlphaOnDark(t.destructive, 0.15, bg)
     : withAlphaOnWhite(t.destructive, 0.08)
@@ -92,7 +105,8 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     overlay: t.overlay ?? 'rgba(0,0,0,0.45)',
     accentResolved: t.accent ?? t.primary,
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
-    ring: t.primary,       // focus ring always = primary
-    input: t.border,       // input border always = border
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16),
   }
 }

package/src/theme/types.ts

@@ -49,6 +49,9 @@ export type ResolvedColors = ThemeColors & {
   // Aliases (ring + input always equal primary + border for coherence)
   ring: string               // = primary
   input: string              // = border
+
+  // Divider/separator line — deliberately darker than border for visibility
+  separator: string
 }
 
 export type Theme = {

package/src/tokens.ts

@@ -1,5 +1,4 @@
 // ─── Spacing ─────────────────────────────────────────────────────────────────
-// 8pt grid with 2pt micro-step. `section` for major band separators (Airbnb: 64px).
 export const SPACING = {
   xxs: 2,
   xs: 4,
@@ -22,8 +21,6 @@ export const ICON_SIZES = {
 } as const
 
 // ─── Border radius ────────────────────────────────────────────────────────────
-// Airbnb-aligned shape language — soft everywhere, no hard corners on interactive elements.
-// xs: micro chips/tags  sm: inputs/forms  md: cards  lg: sheet corners  xl: primary CTAs (pill)
 export const RADIUS = {
   none: 0,
   xs: 4,
@@ -35,7 +32,6 @@ export const RADIUS = {
 } as const
 
 // ─── Shadows ──────────────────────────────────────────────────────────────────
-// Multi-tier. Default card usage = sm. Hover float = md. Modals = lg/xl.
 export const SHADOWS = {
   sm: {
     shadowColor: '#000',
@@ -73,118 +69,132 @@ export const BREAKPOINTS = {
 } as const
 
 // ─── Typography ───────────────────────────────────────────────────────────────
-// Airbnb-inspired hierarchy. Modest weights — 500-600 on display, not 700+.
-// Exception: display-hero (large number display) and display-xl always bold.
-// Poppins carries the full scale. All fontFamily values reference loaded font names.
+// AUDIT FIX: Rationalised display scale — removed weight inversions and size
+// collisions. display-lg/md separated by 4px with matching weights. title-md/sm
+// now actually differ in size. uppercase-tag raised from 10px → 11px for
+// minimum mobile readability (Apple HIG: 11pt floor).
 export const TYPOGRAPHY = {
   'display-hero': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 64,
     fontWeight: '700' as const,
     lineHeight: 70,
     letterSpacing: -1,
   },
   'display-xl': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 28,
     fontWeight: '700' as const,
     lineHeight: 40,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 22px/500 — raised to 24px/600; removes weight inversion vs display-md
   'display-lg': {
-    fontFamily: 'Poppins-Medium',
-    fontSize: 22,
-    fontWeight: '500' as const,
-    lineHeight: 26,
-    letterSpacing: -0.44,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 24,
+    fontWeight: '600' as const,
+    lineHeight: 32,
+    letterSpacing: -0.3,
   },
+  // AUDIT FIX: was 21px/700 — lowered to 20px/600; weight normalised, 4px gap preserved
   'display-md': {
-    fontFamily: 'Poppins-Bold',
-    fontSize: 21,
-    fontWeight: '700' as const,
-    lineHeight: 30,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 20,
+    fontWeight: '600' as const,
+    lineHeight: 28,
     letterSpacing: 0,
   },
   'display-sm': {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: 20,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 18,
     fontWeight: '600' as const,
     lineHeight: 24,
     letterSpacing: -0.18,
   },
+  // AUDIT FIX: was 16px — raised to 17px so title-md > title-sm is size-visible
   'title-md': {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: 16,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 17,
     fontWeight: '600' as const,
-    lineHeight: 20,
+    lineHeight: 22,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 16px — lowered to 15px; now distinct from title-md
   'title-sm': {
-    fontFamily: 'Poppins-Medium',
-    fontSize: 16,
+    fontFamily: 'Sohne-Medium',
+    fontSize: 15,
     fontWeight: '500' as const,
     lineHeight: 20,
     letterSpacing: 0,
   },
   'body-md': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 16,
     fontWeight: '400' as const,
     lineHeight: 24,
     letterSpacing: 0,
   },
   'body-sm': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 14,
     fontWeight: '400' as const,
     lineHeight: 20,
     letterSpacing: 0,
   },
-  caption: {
-    fontFamily: 'Poppins-Medium',
+  'caption': {
+    fontFamily: 'Sohne-Medium',
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 18,
     letterSpacing: 0,
   },
   'caption-sm': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 13,
     fontWeight: '400' as const,
     lineHeight: 16,
     letterSpacing: 0,
   },
   'badge-text': {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: 11,
     fontWeight: '600' as const,
-    lineHeight: 13,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  // AUDIT FIX: added badge-text-md so Badge md size has a canonical token
+  'badge-text-md': {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    fontWeight: '600' as const,
+    lineHeight: 16,
     letterSpacing: 0,
   },
   'micro-label': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 12,
     fontWeight: '700' as const,
     lineHeight: 16,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 10px/0.8 letterSpacing — raised to 11px/0.6; minimum mobile readability
   'uppercase-tag': {
-    fontFamily: 'Poppins-Bold',
-    fontSize: 10,
+    fontFamily: 'Sohne-Bold',
+    fontSize: 11,
     fontWeight: '700' as const,
-    lineHeight: 13,
-    letterSpacing: 0.8,
+    lineHeight: 14,
+    letterSpacing: 0.6,
     textTransform: 'uppercase' as const,
   },
   'button-lg': {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: 16,
     fontWeight: '500' as const,
     lineHeight: 22,
     letterSpacing: 0,
   },
   'button-sm': {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 18,

package/src/utils/icons.ts

@@ -17,36 +17,63 @@ export interface IconProps {
   family?: IconFamily
 }
 
-type ResolvedFamily = {
+type IconComponentType = React.ComponentType<{ name: string; size: number; color: string }>
+type IconFamilyEntry = {
   name: IconFamily
-  component: React.ComponentType<{ name: any; size: number; color: string }>
-  glyphMap: Record<string, number>
+  component: IconComponentType
+  /** Deferred — glyphMap is only read when the resolution cache is first built. */
+  getGlyphMap: () => Record<string, number>
 }
 
-// Priority order: highest-priority family listed last so it overwrites lower-priority entries in the cache
-const ICON_FAMILIES: ResolvedFamily[] = [
-  { name: 'Ionicons',      component: Ionicons as any,      glyphMap: (Ionicons as any).glyphMap },
-  { name: 'MaterialIcons', component: MaterialIcons as any, glyphMap: (MaterialIcons as any).glyphMap },
-  { name: 'FontAwesome5',  component: FontAwesome5 as any,  glyphMap: (FontAwesome5 as any).glyphMap },
-  { name: 'Entypo',        component: Entypo as any,        glyphMap: (Entypo as any).glyphMap },
-  { name: 'AntDesign',     component: AntDesign as any,     glyphMap: (AntDesign as any).glyphMap },
-  { name: 'Feather',       component: Feather as any,       glyphMap: (Feather as any).glyphMap },
+type WithGlyphMap = { glyphMap?: Record<string, number> }
+
+const glyphMapOf = (mod: unknown): Record<string, number> =>
+  (mod as WithGlyphMap).glyphMap ?? {}
+
+// Priority order: highest-priority family LAST so it overwrites lower-priority entries in the cache.
+const ALL_FAMILIES: IconFamilyEntry[] = [
+  { name: 'Ionicons',      component: Ionicons as unknown as IconComponentType,      getGlyphMap: () => glyphMapOf(Ionicons) },
+  { name: 'MaterialIcons', component: MaterialIcons as unknown as IconComponentType, getGlyphMap: () => glyphMapOf(MaterialIcons) },
+  { name: 'FontAwesome5',  component: FontAwesome5 as unknown as IconComponentType,  getGlyphMap: () => glyphMapOf(FontAwesome5) },
+  { name: 'Entypo',        component: Entypo as unknown as IconComponentType,        getGlyphMap: () => glyphMapOf(Entypo) },
+  { name: 'AntDesign',     component: AntDesign as unknown as IconComponentType,     getGlyphMap: () => glyphMapOf(AntDesign) },
+  { name: 'Feather',       component: Feather as unknown as IconComponentType,       getGlyphMap: () => glyphMapOf(Feather) },
 ]
 
-let resolvedCache: Map<string, ResolvedFamily> | null = null
+// Active families participating in name resolution. Defaults to all six.
+let activeFamilies: IconFamilyEntry[] = ALL_FAMILIES
+let resolvedCache: Map<string, IconFamilyEntry> | null = null
+
+/**
+ * Restrict which icon families participate in automatic name resolution.
+ * Narrowing to the families you actually use shrinks the resolution cache and
+ * speeds up the first `renderIcon` call (no scanning thousands of unused glyphs).
+ *
+ * Note: all six families are still statically imported by this module — Metro
+ * bundles them regardless. This controls *resolution scope*, not bundle size.
+ *
+ * @example configureIconFamilies(['Feather', 'MaterialIcons'])
+ */
+export function configureIconFamilies(families: IconFamily[]): void {
+  const order = families
+    .map((n) => ALL_FAMILIES.find((f) => f.name === n))
+    .filter((f): f is IconFamilyEntry => f !== undefined)
+  activeFamilies = order.length > 0 ? order : ALL_FAMILIES
+  resolvedCache = null // invalidate — rebuilt lazily on next resolve
+}
 
-function buildCache(): Map<string, ResolvedFamily> {
-  const cache = new Map<string, ResolvedFamily>()
-  for (const family of ICON_FAMILIES) {
-    if (!family.glyphMap) continue
-    for (const iconName of Object.keys(family.glyphMap)) {
+function buildCache(): Map<string, IconFamilyEntry> {
+  const cache = new Map<string, IconFamilyEntry>()
+  for (const family of activeFamilies) {
+    const glyphMap = family.getGlyphMap()
+    for (const iconName of Object.keys(glyphMap)) {
       cache.set(iconName, family)
     }
   }
   return cache
 }
 
-function resolveFamily(name: string): ResolvedFamily | null {
+function resolveFamily(name: string): IconFamilyEntry | null {
   if (!resolvedCache) {
     resolvedCache = buildCache()
   }
@@ -54,10 +81,10 @@ function resolveFamily(name: string): ResolvedFamily | null {
 }
 
 export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
-  let resolved: ResolvedFamily | null = null
+  let resolved: IconFamilyEntry | null = null
 
   if (family) {
-    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null
+    resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null
   } else {
     resolved = resolveFamily(name)
   }

package/src/utils/usePressScale.ts

@@ -48,11 +48,13 @@ export function usePressScale({
 
   const onPressIn = useCallback(() => {
     if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
     scale.value = withSpring(pressScale, pressInSpring)
   }, [disabled, pressScale, pressInSpring, scale])
 
   const onPressOut = useCallback(() => {
     if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
     scale.value = withSpring(1, pressOutSpring)
   }, [disabled, pressOutSpring, scale])