@retray-dev/ui-kit 12.1.0 → 12.2.0

package/dist/{chunk-2A2LEFZG.mjs → chunk-LPV4NJJK.mjs}

@@ -1,5 +1,5 @@
-import { PagerDots } from './chunk-OULVKTWL.mjs';
-import { IconButton } from './chunk-DF6DU42P.mjs';
+import { PagerDots } from './chunk-OLVJFKXS.mjs';
+import { IconButton } from './chunk-LOBLCFMN.mjs';
 import { s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
 import { StyleSheet, useWindowDimensions, Dimensions, Modal, View, ScrollView, Image } from 'react-native';

package/dist/{chunk-FFTYLPSB.mjs → chunk-M3C7XM2M.mjs}

@@ -1,7 +1,7 @@
 import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useEffect, useCallback } from 'react';
+import React, { useRef, useId, useCallback, useEffect } 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';
@@ -40,13 +40,19 @@ function Sheet({
   const insets = useSafeAreaInsets();
   const ref = useRef(null);
   const wasOpened = useRef(false);
+  const isPresentedRef = useRef(false);
   const name = useId();
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    onClose?.();
+  }, [onClose]);
   useEffect(() => {
-    if (open) {
+    if (open && !isPresentedRef.current) {
       impactMedium();
       ref.current?.present();
       wasOpened.current = true;
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true;
+    } else if (!open && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss();
     }
   }, [open]);
@@ -98,7 +104,7 @@ function Sheet({
     {
       ref,
       name,
-      onDismiss: onClose,
+      onDismiss: handleDismiss,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
       maxDynamicContentSize: useDynamicSizing && maxHeight ? maxHeight : void 0,

package/dist/{chunk-BQZE3HAW.mjs → chunk-MEPSKGBO.mjs}

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

package/dist/{chunk-ISY26JQJ.mjs → chunk-MVMGPZN6.mjs}

@@ -1,6 +1,6 @@
-import { IconButton } from './chunk-DF6DU42P.mjs';
+import { IconButton } from './chunk-LOBLCFMN.mjs';
 import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, useWindowDimensions, View, Text } from 'react-native';

package/dist/{chunk-265G6A46.mjs → chunk-NHDI3VQB.mjs}

@@ -1,7 +1,7 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { EASINGS, TIMINGS } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, View, Pressable, Text } from 'react-native';
@@ -52,6 +52,14 @@ function AccordionItemComponent({
       accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
     },
     /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
+    item.triggerActions ? /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: styles.triggerActions,
+        onTouchEnd: (e) => e.stopPropagation()
+      },
+      item.triggerActions
+    ) : null,
     /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React.createElement(Animated.View, { style: bodyStyle }, /* @__PURE__ */ React.createElement(
     View,
@@ -121,6 +129,12 @@ var styles = StyleSheet.create({
   chevron: {
     marginLeft: s(8)
   },
+  triggerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4),
+    marginLeft: s(8)
+  },
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {

package/dist/{chunk-D3Y2T42P.mjs → chunk-NJG7DHVF.mjs}

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, vs, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

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

@@ -1,7 +1,7 @@
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

package/dist/{chunk-OULVKTWL.mjs → chunk-OLVJFKXS.mjs}

@@ -1,7 +1,7 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s } from './chunk-2CE3TQVY.mjs';
 import React, { useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';

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

@@ -1,6 +1,6 @@
 import { TIMINGS } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.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-S3KJCPEJ.mjs → chunk-QOLWA2PW.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-EMUWGDWC.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-JCZQOY4O.mjs → chunk-QXDGGOLC.mjs}

@@ -1,8 +1,8 @@
-import { Button } from './chunk-DOGIPOF5.mjs';
+import { Button } from './chunk-4J2PXL36.mjs';
 import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useEffect, useCallback } from 'react';
+import React, { useRef, useId, useCallback, useEffect } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -24,13 +24,19 @@ function ConfirmDialog({
   const insets = useSafeAreaInsets();
   const ref = useRef(null);
   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?.present();
       wasOpened.current = true;
-    } else if (wasOpened.current) {
+      isPresentedRef.current = true;
+    } else if (!visible && wasOpened.current && isPresentedRef.current) {
       ref.current?.dismiss();
     }
   }, [visible]);
@@ -51,7 +57,7 @@ function ConfirmDialog({
     {
       ref,
       name,
-      onDismiss: onCancel,
+      onDismiss: handleDismiss,
       enableDynamicSizing: true,
       backdropComponent: renderBackdrop,
       backgroundStyle: { ...styles.background, backgroundColor: colors.card },

package/dist/{chunk-4WFMPFZB.mjs → chunk-RJNLAH76.mjs}

@@ -1,5 +1,5 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-EMUWGDWC.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-HLMPMUK2.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-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';

package/dist/{chunk-KHYX4IOM.mjs → chunk-SAWUXP3A.mjs}

@@ -1,8 +1,8 @@
-import { Spinner } from './chunk-BCWEHE34.mjs';
+import { Spinner } from './chunk-LIS6I5UP.mjs';
 import { selectionAsync, impactMedium } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useState, useId, useMemo, useCallback } from 'react';
 import { Dimensions, StyleSheet, TouchableOpacity, View, Text } from 'react-native';

package/dist/{chunk-2I2AYECM.mjs → chunk-TS7DGUIR.mjs}

@@ -1,5 +1,5 @@
 import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';

package/dist/{chunk-3N2M3WZL.mjs → chunk-UBUXUMER.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-AKM4EPOT.mjs → chunk-ULGNQPNE.mjs}

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

package/dist/{chunk-FVTVCJAH.mjs → chunk-UNNRUJTM.mjs}

@@ -2,7 +2,7 @@ import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-DI7CBDL6.mjs → chunk-UQ4742ET.mjs}

@@ -2,7 +2,7 @@ import { PressableRow } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

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

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

package/dist/{chunk-QSFV2P7O.mjs → chunk-YMYIEVZP.mjs}

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

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

@@ -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,

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

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

package/dist/{chunk-NXI4YDZ2.mjs → chunk-ZR6HSEAB.mjs}

@@ -3,7 +3,7 @@ import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { StyleSheet, ScrollView, View, TouchableOpacity, Text } from 'react-native';

package/dist/{index-wt-orHUi.d.ts → index-CY34hxPN.d.mts}

@@ -25,6 +25,7 @@ type ResolvedColors = ThemeColors & {
     foregroundMuted: string;
     surface: string;
     surfaceStrong: string;
+    skeleton: string;
     destructiveTint: string;
     destructiveBorder: string;
     successTint: string;

package/dist/{index-wt-orHUi.d.mts → index-CY34hxPN.d.ts}

@@ -25,6 +25,7 @@ type ResolvedColors = ThemeColors & {
     foregroundMuted: string;
     surface: string;
     surfaceStrong: string;
+    skeleton: string;
     destructiveTint: string;
     destructiveBorder: string;
     successTint: string;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { T as Theme, C as ColorScheme, a as ThemeContextValue, b as ThemeColors, R as ResolvedColors } from './index-wt-orHUi.mjs';
-export { c as RetrayProvider, d as RetrayProviderProps } from './index-wt-orHUi.mjs';
+import { T as Theme, C as ColorScheme, a as ThemeContextValue, b as ThemeColors, R as ResolvedColors } from './index-CY34hxPN.mjs';
+export { c as RetrayProvider, d as RetrayProviderProps } from './index-CY34hxPN.mjs';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './Button.mjs';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup.mjs';
 export { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.mjs';
@@ -46,6 +46,7 @@ export { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps } from './ErrorBo
 export { PagerDots, PagerDotsProps } from './PagerDots.mjs';
 export { AppHeader, AppHeaderProps } from './AppHeader.mjs';
 export { SelectableGrid, SelectableGridItem, SelectableGridProps } from './SelectableGrid.mjs';
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupProps, SelectableCardProps } from './SelectableCard.mjs';
 export { PricingCard, PricingCardProps, PricingFeature } from './PricingCard.mjs';
 export { TabBar, TabBarItem, TabBarProps } from './TabBar.mjs';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.mjs';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { T as Theme, C as ColorScheme, a as ThemeContextValue, b as ThemeColors, R as ResolvedColors } from './index-wt-orHUi.js';
-export { c as RetrayProvider, d as RetrayProviderProps } from './index-wt-orHUi.js';
+import { T as Theme, C as ColorScheme, a as ThemeContextValue, b as ThemeColors, R as ResolvedColors } from './index-CY34hxPN.js';
+export { c as RetrayProvider, d as RetrayProviderProps } from './index-CY34hxPN.js';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './Button.js';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup.js';
 export { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.js';
@@ -46,6 +46,7 @@ export { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps } from './ErrorBo
 export { PagerDots, PagerDotsProps } from './PagerDots.js';
 export { AppHeader, AppHeaderProps } from './AppHeader.js';
 export { SelectableGrid, SelectableGridItem, SelectableGridProps } from './SelectableGrid.js';
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupProps, SelectableCardProps } from './SelectableCard.js';
 export { PricingCard, PricingCardProps, PricingFeature } from './PricingCard.js';
 export { TabBar, TabBarItem, TabBarProps } from './TabBar.js';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.js';