@retray-dev/ui-kit 12.1.0 → 13.0.0

package/dist/{chunk-GK4VRMNE.mjs → chunk-EROPDCB5.mjs}

@@ -1,56 +1,51 @@
-import { Spinner } from './chunk-BCWEHE34.mjs';
-import { PressableCard } from './chunk-3DKJ2GIC.mjs';
-import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { Spinner } from './chunk-2VIDP72N.mjs';
+import { PressableCard } from './chunk-IFYMBOEN.mjs';
+import { impactLight } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
-import React from 'react';
-import { StyleSheet, Image, View, Text, Platform } from 'react-native';
+import { __require } from './chunk-Y6FXYEAI.mjs';
+import React, { useState } from 'react';
+import { Image } from 'expo-image';
+import { StyleSheet, View, Text } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 
 function ImageUpload({
   value,
   onChange,
   loading = false,
-  placeholder = "Tap to add image",
+  placeholder = "Toca para a\xF1adir imagen",
   showPlaceholderText = true,
   width,
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = "cover",
+  allowsEditing = true,
   disabled = false,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  onPickerStarting
 }) {
   const { colors } = useTheme();
+  const [imageLoaded, setImageLoaded] = useState(false);
   const handlePress = async () => {
     if (disabled || loading) return;
     impactLight();
+    onPickerStarting?.();
     let picker;
     try {
-      const mod = await import('expo-image-picker/build/ExponentImagePicker');
-      picker = mod.default;
+      picker = __require("expo-image-picker");
     } catch {
-      try {
-        picker = await import('expo-image-picker');
-      } catch {
-        if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed.");
-        return;
-      }
-    }
-    if (Platform.OS !== "web") {
-      try {
-        const { status } = await picker.requestMediaLibraryPermissionsAsync();
-        if (status !== "granted") return;
-      } catch {
-      }
+      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed.");
+      return;
     }
     const result = await picker.launchImageLibraryAsync({
       mediaTypes: ["images"],
-      allowsEditing: true,
+      allowsEditing,
       quality: 0.8
     });
     if (!result.canceled && result.assets?.[0]) {
+      setImageLoaded(false);
       onChange?.(result.assets[0].uri);
     }
   };
@@ -61,7 +56,7 @@ function ImageUpload({
     borderWidth: value ? 0 : 1,
     borderStyle: "dashed",
     borderColor: colors.border,
-    backgroundColor: value ? "transparent" : colors.surface,
+    backgroundColor: value && imageLoaded ? "transparent" : colors.surface,
     overflow: "hidden"
   };
   return /* @__PURE__ */ React.createElement(
@@ -72,7 +67,7 @@ function ImageUpload({
       rippleColor: "transparent",
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: accessibilityLabel ?? (value ? "Change image" : placeholder),
+      accessibilityLabel: accessibilityLabel ?? (value ? "Cambiar imagen" : placeholder),
       accessibilityState: { disabled: disabled || loading },
       style: [containerStyle, style]
     },
@@ -81,7 +76,9 @@ function ImageUpload({
       {
         source: { uri: value },
         style: [StyleSheet.absoluteFillObject, { borderRadius }],
-        resizeMode
+        contentFit: resizeMode === "stretch" ? "fill" : resizeMode,
+        onLoad: () => setImageLoaded(true),
+        onError: () => setImageLoaded(true)
       }
     ) : /* @__PURE__ */ React.createElement(View, { style: styles.placeholder }, /* @__PURE__ */ React.createElement(Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), showPlaceholderText ? /* @__PURE__ */ React.createElement(
       Text,

package/dist/{chunk-XBAGGKLW.mjs → chunk-ERWJPVX7.mjs}

@@ -1,5 +1,5 @@
-import { ToastProvider } from './chunk-QSFV2P7O.mjs';
-import { ThemeProvider } from './chunk-EMUWGDWC.mjs';
+import { ToastProvider } from './chunk-SZEKQAOY.mjs';
+import { ThemeProvider } from './chunk-KSSVIFYR.mjs';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';

package/dist/{chunk-LRM4AVYY.mjs → chunk-ESQDPO5E.mjs}

@@ -1,7 +1,7 @@
-import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { impactLight } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
@@ -9,11 +9,11 @@ import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 function DefaultErrorFallback({
   error,
   reset,
-  title = "Something went wrong",
+  title = "Algo sali\xF3 mal",
   message
 }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React.createElement(View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, renderIcon("alert-triangle", ms(28), colors.destructive)), /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React.createElement(Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "An unexpected error occurred."), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React.createElement(View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, /* @__PURE__ */ React.createElement(Icon, { name: "alert-triangle", size: ms(28), color: colors.destructive })), /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React.createElement(Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "Ocurri\xF3 un error inesperado."), /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       style: [styles.button, { backgroundColor: colors.primary }],
@@ -24,9 +24,9 @@ function DefaultErrorFallback({
       activeOpacity: 0.85,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Try again"
+      accessibilityLabel: "Intentar de nuevo"
     },
-    /* @__PURE__ */ React.createElement(Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Try again")
+    /* @__PURE__ */ React.createElement(Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Intentar de nuevo")
   ));
 }
 var ErrorBoundary = class extends React.Component {

package/dist/{chunk-EFLFRAHD.mjs → chunk-EW2FIDSM.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 

package/dist/{chunk-7HSILTC4.mjs → chunk-FTTI6T5Q.mjs}

@@ -1,6 +1,6 @@
-import { Button } from './chunk-DOGIPOF5.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Button } from './chunk-Y6YS33GM.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -8,7 +8,7 @@ import { StyleSheet, View, Text } from 'react-native';
 function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size = "default", style }) {
   const { colors } = useTheme();
   const isCompact = size === "compact";
-  const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted) : icon;
+  const effectiveIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: isCompact ? 32 : 48, color: iconColor ?? colors.foregroundMuted }) : icon;
   return /* @__PURE__ */ React.createElement(
     View,
     {

package/dist/{chunk-X26S5EVZ.mjs → chunk-HUSSF6TF.mjs}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-PGERH3P7.mjs';
+import { Input } from './chunk-4NQFTHN3.mjs';
 import { ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 

package/dist/chunk-IFYMBOEN.mjs

@@ -0,0 +1,14 @@
+import { createAnimatedPressable } from 'pressto';
+
+// src/utils/pressable.ts
+var makePressable = (scale) => createAnimatedPressable((progress) => {
+  "worklet";
+  return { transform: [{ scale: 1 - (1 - scale) * progress }] };
+});
+var PressableButton = makePressable(0.95);
+var PressableCard = makePressable(0.98);
+var PressableRow = makePressable(0.97);
+var PressableChip = makePressable(0.94);
+var PressableTab = makePressable(0.95);
+
+export { PressableButton, PressableCard, PressableChip, PressableRow, PressableTab };

package/dist/{chunk-S3KJCPEJ.mjs → chunk-IGU223UM.mjs}

@@ -1,7 +1,8 @@
-import { useTheme } from './chunk-EMUWGDWC.mjs';
-import { s, ms } from './chunk-2CE3TQVY.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { s, ms, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
-import { StyleSheet, View, Image, Text } from 'react-native';
+import { Image } from 'expo-image';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 
 var sizeMap = {
   sm: s(28),
@@ -92,6 +93,66 @@ function AvatarBase({ src, fallback, fallbackText, size = "md", status, style })
   );
 }
 var Avatar = React.memo(AvatarBase);
+function AvatarGroup({
+  users,
+  max = 3,
+  size = "sm",
+  overlap = vs(8),
+  onOverflowPress,
+  style
+}) {
+  const { colors } = useTheme();
+  const visible = users.slice(0, max);
+  const overflowCount = users.length - max;
+  const dimension = sizeMap[size];
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.group, style], accessibilityLabel: `${users.length} avatares` }, visible.map((user, i) => /* @__PURE__ */ React.createElement(
+    View,
+    {
+      key: `${user.name}-${i}`,
+      style: [
+        styles.groupItem,
+        i > 0 && { marginLeft: -overlap },
+        { zIndex: visible.length - i }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Avatar,
+      {
+        src: user.src,
+        fallbackText: user.name,
+        size
+      }
+    )
+  )), overflowCount > 0 ? /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles.overflowBadge,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: dimension / 2,
+          backgroundColor: colors.surfaceStrong,
+          marginLeft: -overlap
+        }
+      ],
+      onPress: onOverflowPress,
+      disabled: !onOverflowPress,
+      activeOpacity: 0.7,
+      accessibilityRole: "button",
+      accessibilityLabel: `${overflowCount} avatares m\xE1s`
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.overflowText, { color: colors.foregroundMuted }],
+        allowFontScaling: true
+      },
+      "+",
+      overflowCount
+    )
+  ) : null);
+}
 var styles = StyleSheet.create({
   wrapper: {
     alignSelf: "flex-start",
@@ -108,7 +169,22 @@ var styles = StyleSheet.create({
     position: "absolute",
     bottom: 0,
     right: 0
+  },
+  group: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  groupItem: {
+    borderRadius: 999
+  },
+  overflowBadge: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  overflowText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(11)
   }
 });
 
-export { Avatar };
+export { Avatar, AvatarGroup };

package/dist/chunk-IJCMPVW5.mjs

@@ -0,0 +1,121 @@
+import { COLOR_TRANSITION, SPRING_ELASTIC } from './chunk-M53LC4Q7.mjs';
+import { PressableButton } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { mvs, ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+function RadioItem({
+  option,
+  selected,
+  onSelect
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [styles.row, option.disabled && styles.rowDisabled],
+      onPress: () => {
+        if (!option.disabled) {
+          selectionAsync();
+          onSelect();
+        }
+      },
+      enabled: !option.disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "radio",
+      accessibilityLabel: option.label,
+      accessibilityState: { checked: selected, disabled: !!option.disabled }
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.radio,
+        animate: { borderColor: selected ? colors.primary : colors.border },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.dot, { backgroundColor: colors.primary }],
+          animate: { scale: selected ? 1 : 0, opacity: selected ? 1 : 0 },
+          transition: SPRING_ELASTIC
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, { color: colors.foreground }],
+        allowFontScaling: true
+      },
+      option.label
+    )
+  );
+}
+function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  style,
+  accessibilityLabel
+}) {
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, orientation === "horizontal" && styles.horizontal, style],
+      accessibilityRole: "radiogroup",
+      accessibilityLabel
+    },
+    options.map((option) => /* @__PURE__ */ React.createElement(
+      RadioItem,
+      {
+        key: option.value,
+        option,
+        selected: option.value === value,
+        onSelect: () => onValueChange?.(option.value)
+      }
+    ))
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(12)
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  rowDisabled: {
+    opacity: 0.45
+  },
+  radio: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  }
+});
+
+export { RadioGroup };

package/dist/{chunk-I4V5XZPS.mjs → chunk-ITG4JQM3.mjs}

@@ -1,5 +1,5 @@
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
@@ -50,7 +50,7 @@ function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", forma
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Previous month",
+      accessibilityLabel: "Mes anterior",
       accessibilityState: { disabled: prevDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
@@ -72,7 +72,7 @@ function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", forma
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Next month",
+      accessibilityLabel: "Mes siguiente",
       accessibilityState: { disabled: nextDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },

package/dist/{chunk-F4V6XLP4.mjs → chunk-K3QX2M26.mjs}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-3UYAZ7I4.mjs';
-import { Button } from './chunk-DOGIPOF5.mjs';
+import { Badge } from './chunk-AZV7KNJI.mjs';
+import { Button } from './chunk-Y6YS33GM.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -40,10 +40,13 @@ function PricingCard({
     /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.name, { color: colors.foreground }], allowFontScaling: true }, name), badge ? /* @__PURE__ */ React.createElement(Badge, { label: badge, variant: highlighted ? "default" : "secondary", size: "sm" }) : null),
     /* @__PURE__ */ React.createElement(View, { style: styles.priceRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.price, { color: colors.foreground }], allowFontScaling: true }, price), period ? /* @__PURE__ */ React.createElement(Text, { style: [styles.period, { color: colors.foregroundMuted }], allowFontScaling: true }, period) : null),
     description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null,
-    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, renderIcon(
-      f.included ? "check" : "minus",
-      ms(16),
-      f.included ? colors.success : colors.foregroundMuted
+    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: f.included ? "check" : "minus",
+        size: ms(16),
+        color: f.included ? colors.success : colors.foregroundMuted
+      }
     ), /* @__PURE__ */ React.createElement(
       Text,
       {

package/dist/{chunk-V6NFJXKO.mjs → chunk-K7TKID3V.mjs}

@@ -1,6 +1,6 @@
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
@@ -18,7 +18,7 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
     // a meaningful chromatic signal when an accent is defined.
     /* @__PURE__ */ React.createElement(Entypo, { name: "info-with-circle", size: ms(16), color: accentColor })
   );
-  const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
+  const effectiveIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: ms(16), color: iconColor ?? accentColor }) : icon ?? defaultIcon;
   const a11yLabel = description ? `${title}. ${description}` : title;
   return /* @__PURE__ */ React.createElement(
     View,
@@ -38,9 +38,10 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
       {
         onPress: onDismiss,
         style: styles.dismissButton,
+        hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
         activeOpacity: 0.6,
         accessibilityRole: "button",
-        accessibilityLabel: "Dismiss"
+        accessibilityLabel: "Descartar"
       },
       /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ms(16), color: colors.foregroundMuted })
     ) : null
@@ -71,9 +72,9 @@ var styles = StyleSheet.create({
     fontSize: ms(12)
   },
   dismissButton: {
-    padding: s(4),
-    marginTop: vs(-2),
-    marginRight: -s(4)
+    padding: s(10),
+    marginTop: vs(-8),
+    marginRight: -s(10)
   }
 });
 

package/dist/{chunk-ZHMSAYLT.mjs → chunk-KAGADD2O.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -26,8 +26,8 @@ function DetailRowBase({
   valueStyle
 }) {
   const { colors } = useTheme();
-  const resolvedLeftIcon = leftIconName ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted) : leftIcon;
-  const resolvedRightIcon = rightIconName ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted) : null;
+  const resolvedLeftIcon = leftIconName ? /* @__PURE__ */ React.createElement(Icon, { name: leftIconName, size: ms(14), color: leftIconColor ?? colors.foregroundMuted }) : leftIcon;
+  const resolvedRightIcon = rightIconName ? /* @__PURE__ */ React.createElement(Icon, { name: rightIconName, size: ms(14), color: rightIconColor ?? colors.foregroundMuted }) : null;
   const separatorStyle = separator === "none" ? null : {
     flex: 1,
     height: 1,

package/dist/{chunk-3GEYJ7I5.mjs → chunk-KC5QDYGZ.mjs}

@@ -1,7 +1,7 @@
-import { PressableTab } from './chunk-3DKJ2GIC.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { SPRINGS } from './chunk-M53LC4Q7.mjs';
+import { PressableTab } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-HJ46DTJE.mjs → chunk-KPTY7UYQ.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-EMUWGDWC.mjs → chunk-KSSVIFYR.mjs}

@@ -12,6 +12,13 @@ function hexToRgb(hex) {
     b: parseInt(full.slice(4, 6), 16)
   };
 }
+function withAlpha(hex, alpha) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+
+// src/theme/colors.ts
 function componentToHex(c) {
   return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
 }
@@ -52,13 +59,6 @@ function darken(hex, amount) {
   if (!rgb) return hex;
   return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
 }
-function withAlpha(hex, alpha) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-}
-
-// src/theme/colors.ts
 var defaultLight = {
   background: "#ffffff",
   foreground: "#1a1a1a",
@@ -104,6 +104,7 @@ function deriveColors(t, scheme) {
   const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
   const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
   const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const skeleton = dark ? lighten(bg, -0.1) : darken(bg, 0.1);
   const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
   const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
   const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
@@ -116,6 +117,7 @@ function deriveColors(t, scheme) {
     foregroundMuted,
     surface,
     surfaceStrong,
+    skeleton,
     destructiveTint,
     destructiveBorder,
     successTint,
@@ -130,10 +132,7 @@ function deriveColors(t, scheme) {
     separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
   };
 }
-var ThemeContext = createContext({
-  colors: deriveColors(defaultLight, "light"),
-  colorScheme: "light"
-});
+var ThemeContext = createContext(void 0);
 function ThemeProvider({ children, theme, colorScheme = "system" }) {
   const systemScheme = useColorScheme() ?? "light";
   const resolvedScheme = colorScheme === "system" ? systemScheme : colorScheme;
@@ -153,4 +152,4 @@ function useTheme() {
   return context;
 }
 
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha };
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha };