@retray-dev/ui-kit 10.1.0 → 12.1.0

package/dist/{chunk-GQYFLP3D.mjs → chunk-3GEYJ7I5.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-SOYNZDVY.mjs';
+import { useTheme } from './chunk-EMUWGDWC.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-AV4EMIRH.mjs → chunk-3N2M3WZL.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-SOYNZDVY.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-TERDKCLE.mjs → chunk-3UYAZ7I4.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

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

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

package/dist/chunk-5OLNXP3S.mjs

@@ -0,0 +1,144 @@
+import { PressableCard } from './chunk-3DKJ2GIC.mjs';
+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 { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useCallback } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var COMPACT_THRESHOLD = s(150);
+function StatsComponent({
+  value,
+  label,
+  description,
+  icon,
+  iconName,
+  iconColor,
+  variant = "elevated",
+  onPress,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const [containerWidth, setContainerWidth] = useState(0);
+  const handleLayout = useCallback((e) => {
+    const w = e.nativeEvent.layout.width;
+    if (w > 0 && w !== containerWidth) {
+      setContainerWidth(w);
+    }
+  }, [containerWidth]);
+  const handlePress = () => {
+    if (!onPress) return;
+    impactLight();
+    onPress();
+  };
+  const isCompact = containerWidth > 0 && containerWidth < COMPACT_THRESHOLD && !!(icon ?? iconName);
+  const variantStyle = {
+    elevated: {
+      backgroundColor: colors.card,
+      borderWidth: 0,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
+      elevation: 4
+    },
+    outlined: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    },
+    filled: {
+      backgroundColor: colors.surfaceStrong,
+      borderColor: colors.border,
+      shadowOpacity: 0,
+      elevation: 0
+    }
+  }[variant];
+  const iconColorResolved = iconColor ?? colors.primary;
+  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), iconColorResolved) : icon;
+  const iconElement = resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconWrapper }, resolvedIcon) : null;
+  const valueElement = /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground }], allowFontScaling: true }, value);
+  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, style], onLayout: handleLayout }, isCompact ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconElement, /* @__PURE__ */ React.createElement(View, { style: styles.compactValue }, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.valueRow }, iconElement, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null));
+  if (onPress) {
+    return /* @__PURE__ */ React.createElement(
+      PressableCard,
+      {
+        onPress: handlePress,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        activateOnHover: true,
+        accessibilityRole: "button",
+        accessibilityLabel
+      },
+      cardContent
+    );
+  }
+  return cardContent;
+}
+function StatsGroup({ children, gap = s(12), style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.group, { gap }, style] }, React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const childStyle = child.props.style;
+    const mergedStyle = childStyle ? [childStyle, { alignSelf: "stretch" }] : [{ alignSelf: "stretch" }];
+    return /* @__PURE__ */ React.createElement(View, { style: styles.groupItem }, React.cloneElement(
+      child,
+      { style: mergedStyle }
+    ));
+  }));
+}
+var Stats = Object.assign(React.memo(StatsComponent), { Group: StatsGroup });
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    padding: s(16),
+    alignSelf: "flex-start",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  valueRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: s(8)
+  },
+  iconWrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  compactValue: {
+    marginTop: vs(8)
+  },
+  value: {
+    fontFamily: "Sohne-Bold",
+    fontSize: ms(28),
+    lineHeight: mvs(32),
+    textAlign: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+    marginTop: vs(8),
+    textAlign: "center"
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: mvs(16),
+    marginTop: vs(4),
+    textAlign: "center"
+  },
+  group: {
+    flexDirection: "row",
+    width: "100%"
+  },
+  groupItem: {
+    flex: 1
+  }
+});
+
+export { Stats };

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

@@ -1,6 +1,6 @@
-import { Button } from './chunk-2TFTAWVJ.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { Button } from './chunk-DOGIPOF5.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

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

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

package/dist/{chunk-VGTDN7SW.mjs → chunk-AQEVCEXV.mjs}

@@ -2,8 +2,8 @@ import { useHover, usePressScale } from './chunk-YNROWHQJ.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS, PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Platform, Image, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-WBOOUHSS.mjs → chunk-BCWEHE34.mjs}

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

package/dist/{chunk-AJ7ZDNBT.mjs → chunk-BOVUP27T.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-EMUWGDWC.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';

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

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

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

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.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-3U4SSNWP.mjs → chunk-DF6DU42P.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';

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

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

package/dist/{chunk-2TFTAWVJ.mjs → chunk-DOGIPOF5.mjs}

@@ -1,8 +1,8 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
 import { TYPOGRAPHY, RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';

package/dist/{chunk-MBMXYJJV.mjs → chunk-E7NEHHXV.mjs}

@@ -10,7 +10,10 @@ function Pressable({
   haptics = true,
   style,
   disabled,
-  hoverScale: _hoverScale = 1.02
+  hoverScale: _hoverScale = 1.02,
+  accessibilityRole,
+  accessibilityState,
+  accessibilityLabel
 }) {
   const handlePress = () => {
     if (disabled || !onPress) return;
@@ -26,8 +29,9 @@ function Pressable({
       rippleColor: "transparent",
       touchSoundDisabled: true,
       activateOnHover: true,
-      accessibilityRole: "button",
-      accessibilityState: { disabled: !!disabled }
+      accessibilityRole: accessibilityRole ?? "button",
+      accessibilityState: accessibilityState ?? { disabled: !!disabled },
+      accessibilityLabel
     },
     children
   );

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

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

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

@@ -52,6 +52,11 @@ 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 = {
@@ -148,4 +153,4 @@ function useTheme() {
   return context;
 }
 
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme };
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha };

package/dist/{chunk-4I7D47FH.mjs → chunk-F4V6XLP4.mjs}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-TERDKCLE.mjs';
-import { Button } from './chunk-2TFTAWVJ.mjs';
+import { Badge } from './chunk-3UYAZ7I4.mjs';
+import { Button } from './chunk-DOGIPOF5.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-UREA2GYY.mjs → chunk-FA2KMTH5.mjs}

@@ -1,8 +1,8 @@
 import { PressableChip } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { s, mvs, ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

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

@@ -1,17 +1,13 @@
 import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
-import { SHADOWS, RADIUS, BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useEffect, useCallback } from 'react';
-import { Dimensions, Platform, StyleSheet, useWindowDimensions, View, Text, TouchableOpacity, Modal, Pressable, ScrollView } from 'react-native';
-import BottomSheet, { BottomSheetBackdrop, BottomSheetFooter, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useRef, useId, useEffect, 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';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AntDesign } from '@expo/vector-icons';
 
-var SCREEN_HEIGHT = Dimensions.get("window").height;
-var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
-var isAndroid = Platform.OS === "android";
 function SheetHeader({ children, style }) {
   return /* @__PURE__ */ React.createElement(View, { style: [styles.header, style] }, children);
 }
@@ -27,45 +23,45 @@ function Sheet({
   onClose,
   title,
   subtitle,
-  description,
   showCloseButton = false,
   children,
   style,
   contentStyle,
-  scrollable,
+  scrollable = false,
   maxHeight,
-  keyboardBehavior,
+  keyboardBehavior = "interactive",
   keyboardBlurBehavior = "restore",
   enableBlurKeyboardOnGesture = true,
   android_keyboardInputMode = "adjustPan",
   footer,
-  snapPoints,
-  responsive = false,
-  dialogMaxWidth = 480
+  snapPoints
 }) {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
-  const { width: windowWidth } = useWindowDimensions();
   const ref = useRef(null);
-  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide;
-  const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
+  const wasOpened = useRef(false);
+  const name = useId();
   useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+    } else if (wasOpened.current) {
+      ref.current?.dismiss();
     }
   }, [open]);
-  const renderBackdrop = useCallback((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"
+      }
+    ),
+    []
+  );
   const childArray = React.Children.toArray(children);
   const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader);
   const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent);
@@ -73,8 +69,7 @@ function Sheet({
   const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
     (child) => !React.isValidElement(child) || child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter
   ) : children;
-  const effectiveSubtitle = subtitle ?? description;
-  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
+  const showHeader = !!(title || subtitle || showCloseButton) && !customHeader;
   const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: [styles.header, { backgroundColor: colors.card }], accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
@@ -87,72 +82,44 @@ function Sheet({
       hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
     },
     /* @__PURE__ */ React.createElement(AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
-  ) : null), effectiveSubtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  ) : null), subtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, subtitle) : null) : null;
   const contentNode = customContent ? customContent : filteredChildren;
   const effectiveFooter = customFooter ? customFooter : footer;
-  const renderFooter = useCallback((props) => {
-    if (!effectiveFooter) return null;
-    return /* @__PURE__ */ React.createElement(BottomSheetFooter, { ...props }, effectiveFooter);
-  }, [effectiveFooter]);
-  if (asDialog) {
-    return /* @__PURE__ */ React.createElement(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        style: [
-          styles.dialogCard,
-          { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 }
-        ],
-        onPress: () => {
-        }
-      },
-      headerNode,
-      /* @__PURE__ */ React.createElement(
-        ScrollView,
-        {
-          contentContainerStyle: [styles.dialogContent, style],
-          style: contentStyle,
-          showsVerticalScrollIndicator: true,
-          bounces: false
-        },
-        contentNode
-      ),
-      effectiveFooter
-    )));
-  }
-  const useScroll = scrollable || !!maxHeight;
-  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
+  const renderFooter = useCallback(
+    (props) => {
+      if (!effectiveFooter) return null;
+      return /* @__PURE__ */ React.createElement(BottomSheetFooter, { ...props }, effectiveFooter);
+    },
+    [effectiveFooter]
+  );
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React.createElement(
-    BottomSheet,
+    BottomSheetModal,
     {
       ref,
-      index: -1,
-      onClose,
+      name,
+      onDismiss: onClose,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
-      maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
+      maxDynamicContentSize: useDynamicSizing && maxHeight ? maxHeight : void 0,
       backdropComponent: renderBackdrop,
       footerComponent: effectiveFooter ? renderFooter : void 0,
-      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
+      backgroundStyle: { ...styles.background, backgroundColor: colors.card },
+      handleIndicatorStyle: { ...styles.handle, backgroundColor: colors.border },
       enablePanDownToClose: true,
       topInset: insets.top,
-      keyboardBehavior: effectiveKeyboardBehavior,
+      keyboardBehavior,
       keyboardBlurBehavior,
       android_keyboardInputMode,
       enableBlurKeyboardOnGesture
     },
-    useScroll ? /* @__PURE__ */ React.createElement(
+    scrollable ? /* @__PURE__ */ React.createElement(
       BottomSheetScrollView,
       {
-        contentContainerStyle: [
-          styles.scrollContent,
-          style
-        ],
+        contentContainerStyle: [styles.scrollContent, style],
         style: contentStyle,
         showsVerticalScrollIndicator: true,
-        indicatorStyle: "black",
-        persistentScrollbar: isAndroid,
+        bounces: false,
         stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
@@ -204,8 +171,7 @@ var styles = StyleSheet.create({
   },
   scrollContent: {
     paddingHorizontal: s(16),
-    paddingBottom: vs(32),
-    paddingRight: s(16)
+    paddingBottom: vs(32)
   },
   sheetContent: {
     gap: vs(16)
@@ -216,24 +182,6 @@ var styles = StyleSheet.create({
     borderTopWidth: 1,
     flexDirection: "row",
     gap: s(12)
-  },
-  dialogBackdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: s(24)
-  },
-  dialogCard: {
-    width: "100%",
-    borderRadius: RADIUS.lg,
-    paddingTop: vs(16),
-    overflow: "hidden",
-    ...SHADOWS.xl
-  },
-  dialogContent: {
-    paddingHorizontal: s(16),
-    paddingBottom: vs(16)
   }
 });
 

package/dist/{chunk-OHBNABL5.mjs → chunk-FUVYSVGR.mjs}

@@ -1,8 +1,8 @@
 import { PressableRow } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-EMUWGDWC.mjs';
 import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, Image, View, Text } from 'react-native';
@@ -12,8 +12,7 @@ function ListItemBase({
   imageSource,
   leftRender,
   rightRender,
-  trailing,
-  icon,
+  rightActions,
   leftIcon,
   rightIcon,
   leftIconColor,
@@ -38,8 +37,8 @@ function ListItemBase({
     selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = imageSource ? /* @__PURE__ */ React.createElement(Image, { source: imageSource, style: styles.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
-  const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
+  const effectiveLeft = imageSource ? /* @__PURE__ */ React.createElement(Image, { source: imageSource, style: styles.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender;
+  const hasRightContent = !!(rightIcon || rightActions && rightActions.length > 0 || rightRender !== void 0 || showChevron);
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
     borderRadius: RADIUS.md,
@@ -76,14 +75,14 @@ function ListItemBase({
       allowFontScaling: true
     },
     caption
-  ) : null), effectiveRight !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React.createElement(
+  ) : null), hasRightContent ? rightIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)) : rightActions && rightActions.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightActionsContainer }, rightActions.map((action, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, action))) : rightRender !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof rightRender === "string" ? /* @__PURE__ */ React.createElement(
     Text,
     {
       style: [styles.rightText, { color: colors.foregroundMuted }],
       allowFontScaling: true
     },
-    effectiveRight
-  ) : effectiveRight) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null);
+    rightRender
+  ) : rightRender) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null : null);
   if (onPress) {
     return /* @__PURE__ */ React.createElement(View, { style: disabled && styles.disabled }, /* @__PURE__ */ React.createElement(
       PressableRow,
@@ -150,6 +149,12 @@ var styles = StyleSheet.create({
     flexShrink: 0,
     maxWidth: s(160)
   },
+  rightActionsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(8),
+    flexShrink: 0
+  },
   rightText: {
     fontFamily: "Sohne-Regular",
     fontSize: ms(14)