@retray-dev/ui-kit 13.2.0 → 13.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 55 components across 9 categories (plus the deep-import `HolographicCard`)
+- 57 components across 9 categories (plus the deep-import `HolographicCard`)
 - Light/dark theme with 12 public tokens (26 resolved) and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -188,15 +188,15 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
-| Display     | `Text`, `Badge`, `Avatar`, `AvatarGroup`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats` |
+| Display     | `Text`, `Badge`, `Avatar`, `AvatarGroup`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`, `Stats`, `Image` |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`, `MediaCard`, `PricingCard`                                 |
 | Form        | `Form` (+ `Form.Field` / `Form.Section` / `Form.Footer`), `Button`, `ButtonGroup`, `IconButton`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider`, `SelectableGrid`, `SelectableCard` (+ `SelectableCardGroup`), `SheetSelect`, `ImageUpload`, `IconPicker`, `NumberStepper` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Navigation  | `AppHeader`, `TabBar`, `PagerDots`                                                              |
 | Overlays    | `Sheet`, `ConfirmDialog`, `ImageViewer`                                                         |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |
-| Data        | `ListItem`, `ListGroup` (+ `.Header` / `.Footer`), `MenuItem`, `MenuGroup` (+ `.Header` / `.Footer`), `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`, `CategoryStrip`, `DetailRow` |
-| Utilities   | `Pressable`, `Icon`, `RetrayProvider`, `ErrorBoundary`                                          |
+| Data        | `ListItem`, `ListGroup` (+ `.Header` / `.Footer`), `MenuItem`, `MenuGroup` (+ `.Header` / `.Footer`), `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`, `CategoryStrip`, `DetailRow`, `VirtualizedList` |
+| Utilities   | `Pressable`, `Icon`, `RetrayProvider`, `ErrorBoundary`, `ScreenContainer`                        |
 
 Deep-import only: `HolographicCard` — `import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'`.
 

package/SKILL.md

@@ -2,7 +2,7 @@
 name: retray-ui-kit
 description: >
   Complete guide for @retray-dev/ui-kit — a React Native / Expo component
-  library (~55 components). Airbnb-inspired design, Sohne typography,
+  library (~57 components). Airbnb-inspired design, Sohne typography,
   haptic-rich interactions, animated with pressto + react-native-ease.
   Theme system, BottomSheet patterns, icon resolution, and conventions.
 ---
@@ -165,8 +165,8 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS, TYPOGRAPHY } from '@
 |-----|---------|--------|-----------|-----|
 | `sm` | 0.06 | 4 | 2 | Default card |
 | `md` | 0.10 | 8 | 5 | Hover float |
-| `lg` | 0.16 | 16 | 10 | Modals |
-| `xl` | 0.24 | 24 | 18 | High-elevation |
+| `lg` | 0.12 | 12 | 8 | Modals |
+| `xl` | 0.18 | 24 | 16 | High-elevation |
 
 **BREAKPOINTS**
 
@@ -234,7 +234,7 @@ Feather > AntDesign > Entypo > FontAwesome5 > MaterialIcons > Ionicons
 
 ### Rules
 - Prefer Feather (outlined) over FA5 solid (filled). FA5 `defaultStyle='regular'` but some names only exist in `solid` — avoid those.
-- Icon lookup uses lazy singleton cache from `glyphMap` introspection.
+- Icon lookup introspects `glyphMap` per call — no caching between renders.
 
 ### `getResponsiveFontSize` utility
 ```tsx
@@ -295,7 +295,7 @@ Use `<Input sheetMode />` — transparently swaps to `BottomSheetTextInput`. For
 
 ## Haptics (expo-haptics)
 
-Web-safe via `Platform.OS !== 'web'` guard + dynamic `import()`.
+Web-safe via static `import * as Haptics` with `Platform.OS === 'web'` guard at call sites.
 
 | Function | Usage |
 |---|---|
@@ -417,9 +417,137 @@ import { HolographicCard } from '@retray-dev/ui-kit/HolographicCard'
 
 ---
 
+### Image
+
+**Import:** `import { Image } from '@retray-dev/ui-kit'`
+
+**When to use:** Image display with automatic fallback when source is null or fails to load. Wraps `expo-image` for performant caching and cross-fade transitions. Supports aspect ratio containers.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| src | `string \| null` | — | Image URI. `null` or load failure shows fallback/skeleton |
+| fallback | `ReactNode` | — | Custom fallback when src is null or image fails |
+| aspectRatio | `number` | — | Width/height ratio — sets container proportionally (e.g. `16/9`, `4/3`) |
+| borderRadius | `number` | `0` | Corner radius on the image |
+| style | `ImageStyle` | — | — |
+
+All remaining `expo-image` props (`contentFit`, `transition`, `placeholder`, etc.) pipe through.
+
+**Fallback behavior:** When `src` is null/falsy or the image errors on load:
+- If `fallback` is provided: renders fallback node inside a container
+- Otherwise: renders a `skeleton`-colored placeholder matching the image dimensions
+
+**Examples:**
+```tsx
+<Image src="https://example.com/photo.jpg" aspectRatio={4/3} borderRadius={12} />
+<Image src={null} fallback={<Icon name="image" size={32} color={colors.foregroundMuted} />} />
+<Image src={avatar} borderRadius={40} style={{ width: 80, height: 80 }} />
+<Image src={banner} aspectRatio={16/9} contentFit="cover" transition={500} />
+```
+
+---
+
+### ScreenContainer
+
+**Import:** `import { ScreenContainer } from '@retray-dev/ui-kit'`
+
+**When to use:** Consistent screen-level layout wrapper. Sets background color, safe area padding, optional scroll, keyboard avoidance, and centers content with a max-width constraint for wide screens.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| children | `ReactNode` | required | Screen content |
+| maxWidth | `number` | `700` (BREAKPOINTS.wide) | Max content width. Set to `0` to disable centering |
+| scroll | `boolean` | `false` | Wrap content in ScrollView |
+| backgroundColor | `string` | Theme `background` | Override background color |
+| paddingTop | `number` | Safe area top | Override top padding |
+| paddingBottom | `number` | Safe area bottom | Override bottom padding |
+| paddingHorizontal | `number` | `0` | Horizontal padding |
+| keyboard | `boolean` | `false` | Enable KeyboardAvoidingView (iOS: padding behavior) |
+| style | `ViewStyle` | — | Additional container styles |
+
+**Behavior:** Wraps children in a centered View (maxWidth with `alignSelf: 'center'`). When `keyboard={true}`, wraps in `KeyboardAvoidingView`. When `scroll={true}`, wraps in `ScrollView` with `keyboardShouldPersistTaps="handled"`.
+
+**Examples:**
+```tsx
+// Basic screen
+<ScreenContainer>
+  <Text variant="display-xl">Home</Text>
+  {/* screen content */}
+</ScreenContainer>
+
+// Scrollable with keyboard avoidance
+<ScreenContainer scroll keyboard paddingHorizontal={16}>
+  <Input label="Name" />
+  <Input label="Email" />
+  <Button label="Submit" fullWidth />
+</ScreenContainer>
+
+// Wide desktop constraint
+<ScreenContainer maxWidth={700} paddingHorizontal={16}>
+  <Text variant="display-lg">Dashboard</Text>
+</ScreenContainer>
+```
+
+---
+
+### VirtualizedList
+
+**Import:** `import { VirtualizedList } from '@retray-dev/ui-kit'`
+
+**When to use:** Performant sectioned lists with sticky headers, pull-to-refresh, and empty state. Built on React Native `SectionList` for memory-efficient rendering of large datasets.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| sections | `VirtualizedListSection<T>[]` | required | `{ title?: string, data: T[] }` — sections with optional headers |
+| renderItem | `(info: SectionListRenderItemInfo<T>) => ReactElement` | required | Row renderer for each item |
+| emptyTitle | `string` | `'Sin contenido'` | Title shown when no data |
+| emptyDescription | `string` | — | Description below empty title |
+| emptyComponent | `ReactNode` | — | Custom empty state (overrides emptyTitle/emptyDescription) |
+| refreshing | `boolean` | `false` | Pull-to-refresh loading state |
+| onRefresh | `() => void` | — | Pull-to-refresh handler |
+| stickyHeaders | `boolean` | `true` | Section headers stick to top while scrolling |
+| headerColor | `string` | `foregroundMuted` | Section header text color override |
+| style | `ViewStyle` | — | List container style |
+
+Also accepts all `SectionListProps` (e.g. `ListHeaderComponent`, `ListFooterComponent`, `ItemSeparatorComponent`).
+
+**Section headers:** Uppercase 13pt SemiBold text. Sections with empty `data` arrays are filtered out automatically.
+
+**Empty state:** When all sections have empty data, shows centered emptyTitle/emptyDescription or custom emptyComponent.
+
+**Examples:**
+```tsx
+// Simple sectioned list
+<VirtualizedList
+  sections={[
+    { title: 'Fruits', data: ['Apple', 'Banana', 'Cherry'] },
+    { title: 'Vegetables', data: ['Carrot', 'Broccoli'] },
+  ]}
+  renderItem={({ item }) => <ListItem title={item} showSeparator />}
+/>
+
+// With pull-to-refresh
+<VirtualizedList
+  sections={data}
+  renderItem={renderRow}
+  refreshing={loading}
+  onRefresh={handleRefresh}
+/>
+
+// Custom empty state
+<VirtualizedList
+  sections={[]}
+  renderItem={() => null}
+  emptyTitle="No items found"
+  emptyDescription="Try adjusting your filters"
+/>
+```
+
+---
+
 ## Version
 
-**Current: 13.1.0.** Requires Expo SDK 54+, React Native 0.81+, React 19.
+**Current: 13.4.0.** Requires Expo SDK 54+, React Native 0.81+, React 19.
 
 For full setup guide, see `CONSUMER.md`. For usage examples, see `EXAMPLES.md`.
 
@@ -1431,9 +1559,10 @@ const [guests, setGuests] = useState(2)
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | orientation | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction of the line |
+| label | `string` | — | Label shown in center of horizontal separator — renders as `── label ──` |
 | style | `ViewStyle` | — | — |
 
-**Styling:** 1px thickness, `border` token color.
+**Styling:** 1px thickness, `border` token color. When `label` is provided, uses uppercase medium text with letter-spacing.
 
 **Examples:**
 ```tsx
@@ -1447,6 +1576,9 @@ const [guests, setGuests] = useState(2)
   <Text>Right</Text>
 </View>
 
+// With label
+<Separator label="o" />
+
 // With custom spacing
 <Separator style={{ marginVertical: SPACING.lg }} />
 ```
@@ -2097,15 +2229,21 @@ const [accepted, setAccepted] = useState(false)
 | tabs | `TabItem[]` | required | Tab definitions |
 | variant | `'pill' \| 'underline'` | `'pill'` | Visual style |
 | value | `string` | — | Controlled active tab |
-| onValueChange | `(value: string) => void` | — | — |
+| onValueChange | `(value: T) => void` | — | Generic — infers from `value` prop type |
 | children | `ReactNode` | — | `TabsContent` components |
 | style | `ViewStyle` | — | — |
 
 **TabItem type:**
 ```ts
-{ label: string; value: string; icon?: ReactNode | ((isActive: boolean) => ReactNode) }
+interface TabItem<T extends string = string> {
+  label: string
+  value: T
+  icon?: ReactNode | ((isActive: boolean) => ReactNode)
+}
 ```
 
+The generic `T` propagates from `TabItem<T>` through `onValueChange(value: T)`, so callbacks receive the correct union type without manual casting.
+
 **Variants:**
 - `pill` — Animated background pill slides to active tab. Full-width distributed tabs. Active: filled `primary` + `primaryForeground` text. Default for top-of-screen navigation.
 - `underline` — 2px bottom border on active tab, no background. Tabs don't stretch — natural width. Airbnb-style filter tabs.
@@ -3739,17 +3877,23 @@ export default function TabLayout() {
 | title | `string` | `'Something went wrong'` | Default fallback title |
 | message | `string` | `error.message` | Default fallback body |
 | onError | `(error, info) => void` | — | Wire your crash reporter here |
+| onCatch | `(error, componentStack) => void` | — | Simplified callback — just error + stack string |
 
 **Default fallback:** centered themed card with a destructive icon, title, message, and a "Try again" button that calls `reset()`.
 
-**Example:**
+**Examples:**
 ```tsx
 <ErrorBoundary onError={reportCrash}>
   <DocumentViewer />
 </ErrorBoundary>
 
-// Custom fallback
-<ErrorBoundary fallback={({ error, reset }) => <MyFallback error={error} onRetry={reset} />}>
+// Use componentStack in custom fallback
+<ErrorBoundary fallback={({ error, componentStack, reset }) => <MyFallback error={error} stack={componentStack} onRetry={reset} />}>
+  <RiskyScreen />
+</ErrorBoundary>
+
+// Simplified crash reporter
+<ErrorBoundary onCatch={(error, stack) => logCrash(error, stack)}>
   <RiskyScreen />
 </ErrorBoundary>
 ```
@@ -4069,3 +4213,123 @@ const { visible, loading, open, onConfirm, onCancel } = useConfirmDialog({
 
 ---
 
+### Image
+
+**Import:** `import { Image } from '@retray-dev/ui-kit'`
+
+**When to use:** Display images with automatic fallback on load failure. Wraps `expo-image` for performant loading and caching.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| src | `string \| null` | — | Image URI. `null` or failed load shows fallback |
+| fallback | `ReactNode` | — | Custom fallback content when image fails to load |
+| aspectRatio | `number` | — | Width/height ratio — e.g. `16/9`, `4/3`. Sets container height proportionally |
+| borderRadius | `number` | `0` | Border radius override |
+
+**All other `expo-image` props pass through** (except `source` — use `src` instead).
+
+**Behavior:** On load error or `null` src: if `fallback` node provided, renders it inside container; otherwise renders a skeleton-colored placeholder with `accessibilityLabel="Imagen no disponible"`.
+
+**Examples:**
+```tsx
+// Basic
+<Image src="https://example.com/photo.jpg" aspectRatio={16/9} />
+
+// With fallback
+<Image src={user.avatar} fallback={<Avatar fallbackText={user.name} />} />
+
+// Rounded
+<Image src={photo.uri} borderRadius={12} aspectRatio={4/3} />
+```
+
+---
+
+### ScreenContainer
+
+**Import:** `import { ScreenContainer } from '@retray-dev/ui-kit'`
+
+**When to use:** Consistent screen layout with safe area insets, optional scroll, keyboard avoidance, and responsive max-width centering.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| children | `ReactNode` | required | Screen content |
+| maxWidth | `number` | `700` | Max content width (points). `0` disables |
+| scroll | `boolean` | `false` | Enable scroll view |
+| backgroundColor | `string` | theme `background` | — |
+| paddingTop | `number` | safe area top | Override top padding |
+| paddingBottom | `number` | safe area bottom | Override bottom padding |
+| paddingHorizontal | `number` | `0` | Horizontal padding |
+| keyboard | `boolean` | `false` | Enable `KeyboardAvoidingView` (iOS `padding` behavior) |
+| style | `ViewStyle` | — | Additional wrapper style |
+
+**Behavior:** Applies top/bottom safe area insets, centers content horizontally when screen exceeds `maxWidth`. When `keyboard` is enabled, wraps content in `KeyboardAvoidingView` with iOS `padding` behavior.
+
+**Examples:**
+```tsx
+// Basic scroll screen
+<ScreenContainer scroll paddingHorizontal={16}>
+  <Text variant="title-md">Welcome</Text>
+</ScreenContainer>
+
+// With keyboard avoidance for forms
+<ScreenContainer keyboard paddingHorizontal={16}>
+  <Input label="Name" />
+  <Input label="Email" />
+  <Button label="Submit" />
+</ScreenContainer>
+
+// Non-scroll, max width disabled
+<ScreenContainer maxWidth={0}>
+  <FullWidthContent />
+</ScreenContainer>
+```
+
+---
+
+### VirtualizedList
+
+**Import:** `import { VirtualizedList } from '@retray-dev/ui-kit'`
+
+**When to use:** Sectioned lists with sticky headers, empty state, and pull-to-refresh. Wraps React Native `SectionList` with Spanish defaults.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| sections | `VirtualizedListSection<T>[]` | required | `{ title?: string; data: T[] }` — only non-empty sections render |
+| renderItem | `(info) => ReactElement` | required | Standard `SectionList` render function |
+| emptyTitle | `string` | `'Sin contenido'` | Title shown when no data |
+| emptyDescription | `string` | — | Description below title |
+| emptyComponent | `ReactNode` | — | Custom empty state (overrides titles) |
+| refreshing | `boolean` | `false` | Pull-to-refresh state |
+| onRefresh | `() => void` | — | Refresh handler |
+| stickyHeaders | `boolean` | `true` | Enable sticky section headers |
+| headerColor | `string` | `foregroundMuted` | Section header text color |
+
+**All other `SectionList` props pass through** (except `sections`, `renderItem`, `ListEmptyComponent`).
+
+**Behavior:** Sections with empty `data` arrays are filtered out. When no sections have data, renders the empty state (custom component or default title). Sticky headers render section titles in uppercase with `Sohne-SemiBold`.
+
+**Examples:**
+```tsx
+const sections = [
+  { title: 'Hoy', data: todayItems },
+  { title: 'Ayer', data: yesterdayItems },
+]
+
+<VirtualizedList
+  sections={sections}
+  renderItem={({ item }) => <ListItem title={item.name} />}
+  refreshing={refreshing}
+  onRefresh={handleRefresh}
+/>
+
+// With custom empty state
+<VirtualizedList
+  sections={[]}
+  renderItem={() => null}
+  emptyTitle="No hay transacciones"
+  emptyDescription="Tus transacciones aparecerán aquí"
+/>
+```
+
+---
+

package/dist/Accordion.d.mts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React__default from 'react';
 import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string | React.ReactNode;
-    content: React.ReactNode;
+    trigger: string | React__default.ReactNode;
+    content: React__default.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;
     /** Custom icon node rendered left of trigger. */
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     /** Override icon color. Defaults to foregroundMuted. */
     iconColor?: string;
     /**
@@ -17,7 +17,7 @@ interface AccordionItem {
      * Automatically touch-isolated — taps on actions won't toggle the accordion.
      * Use this instead of embedding interactive elements inside `trigger`.
      */
-    triggerActions?: React.ReactNode;
+    triggerActions?: React__default.ReactNode;
     accessibilityHint?: string;
 }
 interface AccordionProps {
@@ -31,6 +31,6 @@ interface AccordionProps {
     defaultValue?: string | string[];
     style?: ViewStyle;
 }
-declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React.JSX.Element;
+declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React__default.JSX.Element;
 
 export { Accordion, type AccordionItem, type AccordionProps };

package/dist/Accordion.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React__default from 'react';
 import { ViewStyle } from 'react-native';
 
 interface AccordionItem {
     value: string;
-    trigger: string | React.ReactNode;
-    content: React.ReactNode;
+    trigger: string | React__default.ReactNode;
+    content: React__default.ReactNode;
     /** Icon name from @expo/vector-icons rendered left of trigger. */
     iconName?: string;
     /** Custom icon node rendered left of trigger. */
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     /** Override icon color. Defaults to foregroundMuted. */
     iconColor?: string;
     /**
@@ -17,7 +17,7 @@ interface AccordionItem {
      * Automatically touch-isolated — taps on actions won't toggle the accordion.
      * Use this instead of embedding interactive elements inside `trigger`.
      */
-    triggerActions?: React.ReactNode;
+    triggerActions?: React__default.ReactNode;
     accessibilityHint?: string;
 }
 interface AccordionProps {
@@ -31,6 +31,6 @@ interface AccordionProps {
     defaultValue?: string | string[];
     style?: ViewStyle;
 }
-declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React.JSX.Element;
+declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React__default.JSX.Element;
 
 export { Accordion, type AccordionItem, type AccordionProps };

package/dist/Accordion.js

@@ -4,6 +4,7 @@ var React3 = require('react');
 var reactNative = require('react-native');
 var Animated = require('react-native-reanimated');
 var vectorIcons = require('@expo/vector-icons');
+var Haptics = require('expo-haptics');
 var reactNativeSizeMatters = require('react-native-size-matters');
 var AntDesign = require('@expo/vector-icons/AntDesign');
 var Entypo = require('@expo/vector-icons/Entypo');
@@ -15,8 +16,27 @@ var pressto = require('pressto');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var React3__default = /*#__PURE__*/_interopDefault(React3);
 var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var Haptics__namespace = /*#__PURE__*/_interopNamespace(Haptics);
 var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
 var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
 var Feather__default = /*#__PURE__*/_interopDefault(Feather);
@@ -25,22 +45,11 @@ var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
 var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 
 // src/components/Accordion/Accordion.tsx
-var _haptics = null;
-var _loaded = false;
-async function getHaptics() {
-  if (reactNative.Platform.OS === "web") return null;
-  if (!_loaded) {
-    _loaded = true;
-    try {
-      _haptics = await import('expo-haptics');
-    } catch {
-      _haptics = null;
-    }
-  }
-  return _haptics;
+function maybeHaptics() {
+  return reactNative.Platform.OS === "web" ? null : Haptics__namespace;
 }
 function selectionAsync() {
-  getHaptics().then((h) => h?.selectionAsync());
+  maybeHaptics()?.selectionAsync();
 }
 var ThemeContext = React3.createContext(void 0);
 function useTheme() {
@@ -62,23 +71,17 @@ var ALL_FAMILIES = [
   { name: "MaterialIcons", component: MaterialIcons__default.default },
   { name: "Ionicons", component: Ionicons__default.default }
 ];
-var glyphCacheInitialized = false;
-function ensureGlyphCache() {
-  if (glyphCacheInitialized) return;
-  glyphCacheInitialized = true;
-  for (const entry of ALL_FAMILIES) {
-    try {
-      entry.glyphMap = entry.component.glyphMap;
-    } catch {
-      entry.glyphMap = {};
-    }
+function getGlyphMap(component) {
+  try {
+    return component.glyphMap ?? {};
+  } catch {
+    return {};
   }
 }
 function Icon({ name, size, color, family }) {
-  ensureGlyphCache();
   const entry = family ? ALL_FAMILIES.find((f) => f.name === family) : ALL_FAMILIES.find((f) => {
-    const glyphMap = f.glyphMap;
-    return glyphMap ? name in glyphMap : false;
+    const glyphMap = getGlyphMap(f.component);
+    return name in glyphMap;
   });
   if (!entry) return null;
   return React3__default.default.createElement(entry.component, { name, size, color });
@@ -111,24 +114,20 @@ function AccordionItemComponent({
   React3__default.default.useEffect(() => {
     isExpanded.value = isOpen;
   }, [isOpen, isExpanded]);
-  const derivedHeight = Animated.useDerivedValue(
-    () => Animated.withTiming(height.value * Number(isExpanded.value), {
-      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? Animated.Easing.bezier(0.23, 1, 0.32, 1) : Animated.Easing.in(Animated.Easing.ease)
-    })
-  );
-  const derivedRotation = Animated.useDerivedValue(
-    () => Animated.withTiming(isExpanded.value ? 1 : 0, {
+  const bodyStyle = Animated.useAnimatedStyle(() => ({
+    height: Animated.withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? Animated.Easing.bezier(0.23, 1, 0.32, 1) : Animated.Easing.in(Animated.Easing.ease)
-    })
-  );
-  const bodyStyle = Animated.useAnimatedStyle(() => ({
-    height: derivedHeight.value,
+    }),
     overflow: "hidden"
   }));
   const rotationStyle = Animated.useAnimatedStyle(() => ({
-    transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
+    transform: [{
+      rotate: `${Animated.withTiming(isExpanded.value ? 1 : 0, {
+        duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+        easing: isExpanded.value ? Animated.Easing.bezier(0.23, 1, 0.32, 1) : Animated.Easing.in(Animated.Easing.ease)
+      }) * 180}deg`
+    }]
   }));
   return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React3__default.default.createElement(
     PressableRow,

package/dist/Accordion.mjs

@@ -1,7 +1,7 @@
-export { Accordion } from './chunk-422IVD3H.mjs';
+export { Accordion } from './chunk-Y5TPAKOS.mjs';
 import './chunk-M53LC4Q7.mjs';
 import './chunk-IFYMBOEN.mjs';
-import './chunk-ARONDO7M.mjs';
-import './chunk-MZ6WRTD2.mjs';
-import './chunk-KSSVIFYR.mjs';
+import './chunk-CTUFFKGS.mjs';
+import './chunk-24JTXQ2M.mjs';
+import './chunk-ZQGCQ7SA.mjs';
 import './chunk-2CE3TQVY.mjs';

package/dist/AlertBanner.d.mts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { ViewStyle } from 'react-native';
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
@@ -6,13 +6,13 @@ interface AlertBannerProps {
     title: string;
     description?: string;
     variant?: AlertBannerVariant;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     iconName?: string;
     iconColor?: string;
     /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
     onDismiss?: () => void;
     style?: ViewStyle;
 }
-declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React__default.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertBannerVariant };

package/dist/AlertBanner.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { ViewStyle } from 'react-native';
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning';
@@ -6,13 +6,13 @@ interface AlertBannerProps {
     title: string;
     description?: string;
     variant?: AlertBannerVariant;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     iconName?: string;
     iconColor?: string;
     /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
     onDismiss?: () => void;
     style?: ViewStyle;
 }
-declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, onDismiss, style }: AlertBannerProps): React__default.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertBannerVariant };