@retray-dev/ui-kit 13.2.0 → 13.4.0

package/dist/{chunk-NPCBNGNE.mjs → chunk-T4KMKHTI.mjs}

@@ -1,11 +1,12 @@
 import { PressableChip } from './chunk-IFYMBOEN.mjs';
-import { selectionAsync } from './chunk-ARONDO7M.mjs';
-import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
-import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import { selectionAsync } from './chunk-CTUFFKGS.mjs';
+import { RADIUS } from './chunk-DYYPDQA2.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
+import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, ScrollView, View, Text } from 'react-native';
+import { Image } from 'expo-image';
 
 function isSelected(value, candidate) {
   if (value == null) return false;
@@ -13,8 +14,10 @@ function isSelected(value, candidate) {
 }
 function Cell({ item, selected, width, onPress }) {
   const { colors } = useTheme();
+  const hasImage = !!item.imageUrl;
   const iconColor = selected ? colors.primary : colors.foregroundSubtle;
   const iconNode = item.icon ?? (item.iconName ? /* @__PURE__ */ React.createElement(Icon, { name: item.iconName, size: ms(24), color: iconColor }) : null);
+  const imageSize = width - 4;
   return /* @__PURE__ */ React.createElement(
     PressableChip,
     {
@@ -25,26 +28,44 @@ function Cell({ item, selected, width, onPress }) {
       activateOnHover: true,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled: item.disabled },
-      accessibilityLabel: item.label ?? String(item.value),
-      style: [
-        { width },
-        styles.cell,
-        {
-          borderColor: selected ? colors.primary : "transparent"
-        },
-        item.disabled && styles.cellDisabled
-      ]
+      accessibilityLabel: item.label ?? String(item.value)
     },
-    iconNode,
-    item.label ? /* @__PURE__ */ React.createElement(
-      Text,
+    /* @__PURE__ */ React.createElement(
+      View,
       {
-        style: [styles.label, { color: selected ? colors.primary : colors.foreground }],
-        numberOfLines: 1,
-        allowFontScaling: true
+        style: [
+          { width },
+          styles.cell,
+          hasImage && styles.cellImage,
+          {
+            borderColor: selected ? colors.primary : "transparent"
+          },
+          item.disabled && styles.cellDisabled
+        ]
       },
-      item.label
-    ) : null
+      hasImage ? /* @__PURE__ */ React.createElement(
+        Image,
+        {
+          source: item.imageUrl,
+          style: { width: imageSize, height: imageSize },
+          contentFit: "cover"
+        }
+      ) : null,
+      iconNode && !hasImage ? iconNode : null,
+      item.label ? /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles.label,
+            hasImage && styles.labelImage,
+            { color: selected ? colors.primary : colors.foreground }
+          ],
+          numberOfLines: 2,
+          allowFontScaling: true
+        },
+        item.label
+      ) : null
+    )
   );
 }
 function SelectableGrid({
@@ -124,6 +145,13 @@ var styles = StyleSheet.create({
     paddingHorizontal: s(8),
     paddingVertical: vs(10)
   },
+  cellImage: {
+    padding: 0,
+    gap: 0,
+    overflow: "hidden",
+    alignItems: "stretch",
+    justifyContent: "flex-start"
+  },
   cellDisabled: {
     opacity: 0.4
   },
@@ -132,6 +160,11 @@ var styles = StyleSheet.create({
     fontSize: ms(11),
     lineHeight: mvs(14),
     textAlign: "center"
+  },
+  labelImage: {
+    paddingHorizontal: s(6),
+    paddingBottom: vs(6),
+    paddingTop: vs(3)
   }
 });
 

package/dist/{chunk-7BZJRB77.mjs → chunk-UBTP4NPP.mjs}

@@ -1,7 +1,7 @@
-import { impactMedium } from './chunk-ARONDO7M.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { useSheetModal } from './chunk-HMKJGVXA.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useState, useEffect, useCallback } from 'react';
+import React, { useId, useCallback } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
@@ -38,34 +38,8 @@ function Sheet({
 }) {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
-  const ref = useRef(null);
-  const sheetState = useRef("idle");
-  const onCloseRef = useRef(onClose);
+  const { ref, handleDismiss } = useSheetModal(open, onClose);
   const name = useId();
-  const [tick, setTick] = useState(0);
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-  const handleDismiss = useCallback(() => {
-    sheetState.current = "idle";
-    onCloseRef.current?.();
-    setTick((t) => t + 1);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      if (sheetState.current === "idle") {
-        sheetState.current = "presenting";
-        impactMedium();
-        ref.current?.present();
-        sheetState.current = "presented";
-      }
-    } else {
-      if (sheetState.current === "presented" || sheetState.current === "presenting") {
-        sheetState.current = "dismissing";
-        ref.current?.dismiss();
-      }
-    }
-  }, [open, tick]);
   const renderBackdrop = useCallback(
     (props) => /* @__PURE__ */ React.createElement(
       BottomSheetBackdrop,

package/dist/{chunk-TMH263OK.mjs → chunk-UEA2VYGW.mjs}

@@ -1,7 +1,7 @@
 import { PressableCard } from './chunk-IFYMBOEN.mjs';
-import { impactLight } from './chunk-ARONDO7M.mjs';
-import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { impactLight } from './chunk-CTUFFKGS.mjs';
+import { RADIUS } from './chunk-DYYPDQA2.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/chunk-VISIOH33.mjs

@@ -0,0 +1,37 @@
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Image as Image$1 } from 'expo-image';
+
+function Image({ src, fallback, aspectRatio, borderRadius = 0, style, ...props }) {
+  const { colors } = useTheme();
+  const [failed, setFailed] = useState(false);
+  if (!src || failed) {
+    return fallback ? /* @__PURE__ */ React.createElement(View, { style: [style, { overflow: "hidden" }] }, fallback) : /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          { backgroundColor: colors.skeleton, overflow: "hidden" },
+          borderRadius ? { borderRadius } : void 0,
+          aspectRatio ? { aspectRatio } : void 0,
+          style
+        ]
+      }
+    );
+  }
+  const imageStyle = {
+    ...aspectRatio ? { aspectRatio, width: "100%" } : {},
+    ...borderRadius ? { borderRadius } : {}
+  };
+  return /* @__PURE__ */ React.createElement(
+    Image$1,
+    {
+      source: { uri: src },
+      style: [imageStyle, style],
+      onError: () => setFailed(true),
+      ...props
+    }
+  );
+}
+
+export { Image };

package/dist/{chunk-SZEKQAOY.mjs → chunk-VSKBODEY.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { toast, Toaster } from 'sonner-native';

package/dist/{chunk-FTTI6T5Q.mjs → chunk-W422TEH2.mjs}

@@ -1,6 +1,6 @@
-import { Button } from './chunk-Y6YS33GM.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { Button } from './chunk-AHFEAY6M.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-WIPEDNSD.mjs → chunk-WD5LBXPR.mjs}

@@ -1,9 +1,9 @@
 import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
 import { PressableChip } from './chunk-IFYMBOEN.mjs';
-import { selectionAsync } from './chunk-ARONDO7M.mjs';
-import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { selectionAsync } from './chunk-CTUFFKGS.mjs';
+import { RADIUS } from './chunk-DYYPDQA2.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { ms, mvs, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, ScrollView } from 'react-native';

package/dist/chunk-WFNGSYS4.mjs

@@ -0,0 +1,111 @@
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { useCallback } from 'react';
+import { StyleSheet, View, Text, SectionList, RefreshControl } from 'react-native';
+
+function VirtualizedList({
+  sections,
+  renderItem,
+  emptyTitle = "Sin contenido",
+  emptyDescription,
+  emptyComponent,
+  refreshing = false,
+  onRefresh,
+  stickyHeaders = true,
+  headerColor,
+  style,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const renderSectionHeader = useCallback(
+    ({ section }) => {
+      if (!section.title) return null;
+      return /* @__PURE__ */ React.createElement(View, { style: [styles.sectionHeader, { backgroundColor: colors.background }] }, /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.sectionHeaderText, { color: headerColor ?? colors.foregroundMuted }],
+          allowFontScaling: true
+        },
+        section.title
+      ));
+    },
+    [colors.background, colors.foregroundMuted, headerColor]
+  );
+  const keyExtractor = useCallback(
+    (_item, index) => String(index),
+    []
+  );
+  const flatSections = sections.filter((s2) => s2.data.length > 0);
+  const hasData = flatSections.length > 0;
+  if (!hasData) {
+    if (emptyComponent) return /* @__PURE__ */ React.createElement(View, { style }, emptyComponent);
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.empty, style] }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.emptyTitle, { color: colors.foregroundMuted }],
+        allowFontScaling: true
+      },
+      emptyTitle
+    ), emptyDescription ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.emptyDescription, { color: colors.foregroundMuted }],
+        allowFontScaling: true
+      },
+      emptyDescription
+    ) : null);
+  }
+  return /* @__PURE__ */ React.createElement(
+    SectionList,
+    {
+      sections: flatSections,
+      renderItem,
+      renderSectionHeader,
+      keyExtractor,
+      stickySectionHeadersEnabled: stickyHeaders,
+      refreshControl: onRefresh ? /* @__PURE__ */ React.createElement(
+        RefreshControl,
+        {
+          refreshing,
+          onRefresh,
+          tintColor: colors.primary
+        }
+      ) : void 0,
+      style,
+      showsVerticalScrollIndicator: false,
+      ...props
+    }
+  );
+}
+var styles = StyleSheet.create({
+  sectionHeader: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(16),
+    paddingBottom: vs(6)
+  },
+  sectionHeaderText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  empty: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: s(32),
+    gap: vs(8)
+  },
+  emptyTitle: {
+    fontFamily: "Sohne-Medium",
+    fontSize: 16,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 14,
+    textAlign: "center"
+  }
+});
+
+export { VirtualizedList };

package/dist/chunk-WR6DCNAE.mjs

@@ -0,0 +1,65 @@
+import { BREAKPOINTS } from './chunk-DYYPDQA2.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
+import React from 'react';
+import { StyleSheet, View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function ScreenContainer({
+  children,
+  maxWidth = BREAKPOINTS.wide,
+  scroll = false,
+  backgroundColor,
+  paddingTop,
+  paddingBottom,
+  paddingHorizontal,
+  keyboard = false,
+  style: _style
+}) {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+  const wrapperStyle = {
+    flex: 1,
+    backgroundColor: backgroundColor ?? colors.background,
+    paddingTop: paddingTop ?? insets.top,
+    paddingBottom: paddingBottom ?? insets.bottom,
+    paddingHorizontal: paddingHorizontal ?? 0,
+    ..._style
+  };
+  const inner = /* @__PURE__ */ React.createElement(View, { style: [styles.inner, { maxWidth: maxWidth || void 0 }] }, children);
+  const content = scroll ? /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
+      keyboardShouldPersistTaps: "handled"
+    },
+    inner
+  ) : inner;
+  if (keyboard) {
+    return /* @__PURE__ */ React.createElement(
+      KeyboardAvoidingView,
+      {
+        style: wrapperStyle,
+        behavior: Platform.OS === "ios" ? "padding" : void 0,
+        keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0
+      },
+      content
+    );
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: wrapperStyle }, content);
+}
+var styles = StyleSheet.create({
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    flexGrow: 1
+  },
+  inner: {
+    flex: 1,
+    alignSelf: "center",
+    width: "100%"
+  }
+});
+
+export { ScreenContainer };

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

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

package/dist/{chunk-422IVD3H.mjs → chunk-Y5TPAKOS.mjs}

@@ -1,12 +1,12 @@
 import { TIMINGS } from './chunk-M53LC4Q7.mjs';
 import { PressableRow } from './chunk-IFYMBOEN.mjs';
-import { selectionAsync } from './chunk-ARONDO7M.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { selectionAsync } from './chunk-CTUFFKGS.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import Animated, { useSharedValue, useDerivedValue, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { Entypo } from '@expo/vector-icons';
 
 function AccordionItemComponent({
@@ -21,24 +21,20 @@ function AccordionItemComponent({
   React.useEffect(() => {
     isExpanded.value = isOpen;
   }, [isOpen, isExpanded]);
-  const derivedHeight = useDerivedValue(
-    () => withTiming(height.value * Number(isExpanded.value), {
-      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease)
-    })
-  );
-  const derivedRotation = useDerivedValue(
-    () => withTiming(isExpanded.value ? 1 : 0, {
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease)
-    })
-  );
-  const bodyStyle = useAnimatedStyle(() => ({
-    height: derivedHeight.value,
+    }),
     overflow: "hidden"
   }));
   const rotationStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
+    transform: [{
+      rotate: `${withTiming(isExpanded.value ? 1 : 0, {
+        duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+        easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease)
+      }) * 180}deg`
+    }]
   }));
   return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React.createElement(
     PressableRow,

package/dist/{chunk-AZV7KNJI.mjs → chunk-YKWIMVGU.mjs}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-ZKDKKQCE.mjs → chunk-YOXSXHDE.mjs}

@@ -1,8 +1,8 @@
 import { PressableCard } from './chunk-IFYMBOEN.mjs';
-import { impactLight } from './chunk-ARONDO7M.mjs';
-import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { impactLight } from './chunk-CTUFFKGS.mjs';
+import { RADIUS } from './chunk-DYYPDQA2.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-PGQ6FMXS.mjs → chunk-ZO5BRTCW.mjs}

@@ -1,5 +1,5 @@
-import { PagerDots } from './chunk-S44XWTTC.mjs';
-import { IconButton } from './chunk-ZTPYUU5C.mjs';
+import { PagerDots } from './chunk-E4BJ5WXG.mjs';
+import { IconButton } from './chunk-ZRUUUVOO.mjs';
 import { s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
 import { Image } from 'expo-image';

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

@@ -25,23 +25,6 @@ function componentToHex(c) {
 function rgbToHex(r, g, b) {
   return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
 }
-function withAlphaOnWhite(hex, alpha) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  const r = rgb.r * alpha + 255 * (1 - alpha);
-  const g = rgb.g * alpha + 255 * (1 - alpha);
-  const b = rgb.b * alpha + 255 * (1 - alpha);
-  return rgbToHex(r, g, b);
-}
-function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
-  const rgb = hexToRgb(hex);
-  const bg = hexToRgb(bgHex);
-  if (!rgb || !bg) return hex;
-  const r = rgb.r * alpha + bg.r * (1 - alpha);
-  const g = rgb.g * alpha + bg.g * (1 - alpha);
-  const b = rgb.b * alpha + bg.b * (1 - alpha);
-  return rgbToHex(r, g, b);
-}
 function mixWithBackground(fgHex, bgHex, opacity) {
   const fg = hexToRgb(fgHex);
   const bg = hexToRgb(bgHex);
@@ -51,13 +34,11 @@ function mixWithBackground(fgHex, bgHex, opacity) {
   const b = fg.b * opacity + bg.b * (1 - opacity);
   return rgbToHex(r, g, b);
 }
-function lighten(hex, amount) {
-  return withAlphaOnWhite(hex, 1 - amount);
-}
-function darken(hex, amount) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
+function createColorPair(fg, bg, dark) {
+  return {
+    tint: mixWithBackground(fg, dark ? bg : "#ffffff", dark ? 0.15 : 0.08),
+    border: mixWithBackground(fg, dark ? bg : "#ffffff", dark ? 0.45 : 0.3)
+  };
 }
 var defaultLight = {
   background: "#ffffff",
@@ -100,17 +81,16 @@ var defaultDark = {
 function deriveColors(t, scheme) {
   const dark = scheme === "dark";
   const bg = t.background;
+  const WHITE = "#ffffff";
+  const BLACK = "#000000";
   const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
   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);
-  const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
-  const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
-  const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
+  const surface = dark ? mixWithBackground(bg, BLACK, 0.94) : mixWithBackground(bg, BLACK, 0.96);
+  const surfaceStrong = dark ? mixWithBackground(bg, BLACK, 0.88) : mixWithBackground(bg, BLACK, 0.92);
+  const skeleton = dark ? mixWithBackground(bg, BLACK, 0.9) : mixWithBackground(bg, BLACK, 0.9);
+  const { tint: destructiveTint, border: destructiveBorder } = createColorPair(t.destructive, bg, dark);
+  const { tint: successTint, border: successBorder } = createColorPair(t.success, bg, dark);
+  const { tint: warningTint, border: warningBorder } = createColorPair(t.warning, bg, dark);
   return {
     ...t,
     foregroundSubtle,
@@ -129,7 +109,7 @@ function deriveColors(t, scheme) {
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
     ring: t.accent ?? t.primary,
     input: t.border,
-    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
+    separator: dark ? mixWithBackground(t.border, WHITE, 0.78) : mixWithBackground(t.border, BLACK, 0.84)
   };
 }
 var ThemeContext = createContext(void 0);

package/dist/{chunk-ZTPYUU5C.mjs → chunk-ZRUUUVOO.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-IFYMBOEN.mjs';
-import { impactLight } from './chunk-ARONDO7M.mjs';
-import { Icon } from './chunk-MZ6WRTD2.mjs';
-import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { impactLight } from './chunk-CTUFFKGS.mjs';
+import { Icon } from './chunk-24JTXQ2M.mjs';
+import { useTheme } from './chunk-ZQGCQ7SA.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';

package/dist/{index-CY34hxPN.d.mts → index-CinAt5Uo.d.mts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 type ThemeColors = {
     background: string;
@@ -50,7 +50,7 @@ type ThemeContextValue = {
 };
 
 interface RetrayProviderProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
     theme?: Theme;
     /**
@@ -81,6 +81,6 @@ interface RetrayProviderProps {
  *   )
  * }
  */
-declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React__default.JSX.Element;
 
 export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };

package/dist/{index-CY34hxPN.d.ts → index-CinAt5Uo.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 type ThemeColors = {
     background: string;
@@ -50,7 +50,7 @@ type ThemeContextValue = {
 };
 
 interface RetrayProviderProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
     theme?: Theme;
     /**
@@ -81,6 +81,6 @@ interface RetrayProviderProps {
  *   )
  * }
  */
-declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React__default.JSX.Element;
 
 export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };