@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/{chunk-AJ7ZDNBT.mjs → chunk-QDAZGZUF.mjs}

@@ -1,6 +1,6 @@
 import { TIMINGS } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
@@ -13,12 +13,13 @@ function Skeleton({
   borderRadius = 6,
   preset = "base",
   diameter = 40,
+  backgroundColor,
   style
 }) {
   const { colors, colorScheme } = useTheme();
   const shimmer = useSharedValue(0);
   const [containerWidth, setContainerWidth] = useState(300);
-  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
+  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.07)";
   useEffect(() => {
     shimmer.value = withRepeat(
       withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
@@ -37,7 +38,7 @@ function Skeleton({
     {
       style: [
         styles.base,
-        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: backgroundColor ?? colors.skeleton },
         style
       ],
       onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),

package/dist/{chunk-JT7HKXRB.mjs → chunk-QOLWA2PW.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, View, Image, Text } from 'react-native';

package/dist/{chunk-WYEUNUTP.mjs → chunk-QXDGGOLC.mjs}

@@ -1,17 +1,17 @@
-import { Button } from './chunk-HTHGSXFG.mjs';
+import { Button } from './chunk-4J2PXL36.mjs';
 import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useId, useCallback, useEffect } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
-import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Feather } from '@expo/vector-icons';
 
 function ConfirmDialog({
   visible,
   title,
   subtitle,
-  description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
@@ -21,36 +21,49 @@ function ConfirmDialog({
   onCancel
 }) {
   const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
   const ref = useRef(null);
-  const effectiveSubtitle = subtitle ?? description;
+  const wasOpened = useRef(false);
+  const isPresentedRef = useRef(false);
+  const name = useId();
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    onCancel();
+  }, [onCancel]);
   useEffect(() => {
-    if (visible) {
+    if (visible && !isPresentedRef.current) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+      isPresentedRef.current = true;
+    } else if (!visible && wasOpened.current && isPresentedRef.current) {
+      ref.current?.dismiss();
     }
   }, [visible]);
-  const renderBackdrop = (props) => /* @__PURE__ */ React.createElement(
-    BottomSheetBackdrop,
-    {
-      ...props,
-      disappearsOnIndex: -1,
-      appearsOnIndex: 0,
-      pressBehavior: "close"
-    }
+  const renderBackdrop = useCallback(
+    (props) => /* @__PURE__ */ React.createElement(
+      BottomSheetBackdrop,
+      {
+        ...props,
+        disappearsOnIndex: -1,
+        appearsOnIndex: 0,
+        pressBehavior: "close"
+      }
+    ),
+    []
   );
   return /* @__PURE__ */ React.createElement(
-    BottomSheet,
+    BottomSheetModal,
     {
       ref,
-      index: -1,
-      onClose: onCancel,
+      name,
+      onDismiss: handleDismiss,
       enableDynamicSizing: true,
       backdropComponent: renderBackdrop,
-      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
-      enablePanDownToClose: true
+      backgroundStyle: { ...styles.background, backgroundColor: colors.card },
+      handleIndicatorStyle: { ...styles.handle, backgroundColor: colors.border },
+      enablePanDownToClose: true,
+      topInset: insets.top
     },
     /* @__PURE__ */ React.createElement(BottomSheetView, { style: styles.content }, /* @__PURE__ */ React.createElement(View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), showCloseButton ? /* @__PURE__ */ React.createElement(
       TouchableOpacity,
@@ -64,7 +77,7 @@ function ConfirmDialog({
         hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
       },
       /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ms(18), color: colors.foregroundMuted })
-    ) : null), effectiveSubtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null), /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
+    ) : null), subtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, subtitle) : null), /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
       Button,
       {
         label: confirmLabel,

package/dist/{chunk-JMOZEC77.mjs → chunk-RJNLAH76.mjs}

@@ -1,5 +1,5 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef } from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-WF2XDFRK.mjs → chunk-RMRS44MQ.mjs}

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';