@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/{chunk-TZDGAP5N.mjs → chunk-CF27NBXO.mjs}

@@ -1,10 +1,10 @@
-import { Spinner } from './chunk-WBOOUHSS.mjs';
+import { Spinner } from './chunk-LIS6I5UP.mjs';
 import { PressableCard } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, Image, View, Text, Platform } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 
@@ -18,11 +18,13 @@ function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = "cover",
+  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel
 }) {
   const { colors } = useTheme();
+  const [imageLoaded, setImageLoaded] = useState(false);
   const handlePress = async () => {
     if (disabled || loading) return;
     impactLight();
@@ -47,10 +49,11 @@ function ImageUpload({
     }
     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 +64,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(
@@ -81,7 +84,9 @@ function ImageUpload({
       {
         source: { uri: value },
         style: [StyleSheet.absoluteFillObject, { borderRadius }],
-        resizeMode
+        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-SXLKNTA4.mjs → chunk-DF7JA72E.mjs}

@@ -1,6 +1,6 @@
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';

package/dist/{chunk-AJRVDP2H.mjs → chunk-E5UKLSJZ.mjs}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-VF2ATYN3.mjs';
-import { Button } from './chunk-HTHGSXFG.mjs';
+import { Badge } from './chunk-GH67YXG6.mjs';
+import { Button } from './chunk-4J2PXL36.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.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-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-VKID2D2I.mjs → chunk-EDLCGYIO.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-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.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)

package/dist/{chunk-BUMAMSTZ.mjs → chunk-ELGEOM7I.mjs}

@@ -2,7 +2,7 @@ import { PressableButton } 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-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-DYT7BG5I.mjs → chunk-F3YTWO3T.mjs}

@@ -2,7 +2,7 @@ import { PressableChip } 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-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, mvs, ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-VF2ATYN3.mjs → chunk-GH67YXG6.mjs}

@@ -1,5 +1,5 @@
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.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-WJLKJMKR.mjs → chunk-GUTDFUNF.mjs}

@@ -1,5 +1,5 @@
 import { TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { Text as Text$1 } from 'react-native';
@@ -13,7 +13,7 @@ function warnIfFontsMissing() {
   try {
     if (!isLoaded("Sohne-Regular")) {
       console.warn(
-        "[retray-ui-kit] Sohne fonts are not loaded \u2014 text will fall back to the system font. Load them at your app root before rendering any UI kit component:\n\n  import { useFonts } from 'expo-font'\n  import { SohneFonts } from '@retray-dev/ui-kit/fonts'\n\n  const [fontsLoaded] = useFonts(SohneFonts)\n  if (!fontsLoaded) return null\n"
+        "[retray-ui-kit] Sohne fonts are not loaded \u2014 text will fall back to the system font. Load them at your app root before rendering any UI kit component:\n\n  import { useFonts } from 'expo-font'\n  import { SohneFontNames } from '@retray-dev/ui-kit/fonts'\n  // Copy the SohneFonts boilerplate from CONSUMER.md into your App.tsx\n\n  const [fontsLoaded] = useFonts(SohneFonts)\n  if (!fontsLoaded) return null\n"
       );
     }
   } catch {
@@ -58,7 +58,7 @@ var defaultColorVariant = {
   "button-lg": "foreground",
   "button-sm": "foreground"
 };
-function TextBase({ variant = "body-md", color, style, children, ...props }) {
+function TextBase({ variant = "body-md", color, style, uppercase, children, ...props }) {
   warnIfFontsMissing();
   const { colors } = useTheme();
   const colorKey = defaultColorVariant[variant] ?? "foreground";
@@ -66,7 +66,7 @@ function TextBase({ variant = "body-md", color, style, children, ...props }) {
   return /* @__PURE__ */ React.createElement(
     Text$1,
     {
-      style: [variantStyles[variant], { color: resolvedColor }, style],
+      style: [variantStyles[variant], { color: resolvedColor }, uppercase && { textTransform: "uppercase" }, style],
       allowFontScaling: true,
       ...props
     },

package/dist/{chunk-6SECQ2ZF.mjs → chunk-HC4VVCWY.mjs}

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

package/dist/{chunk-A3A6KNQN.mjs → chunk-HEDQPK4I.mjs}

@@ -1,7 +1,7 @@
 import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef } from 'react';
 import { Platform, StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';

package/dist/{chunk-GQYFLP3D.mjs → chunk-IVSRW4HS.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-YTXRIXNZ.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-KOO4WITD.mjs → chunk-KSUWPU2F.mjs}

@@ -3,7 +3,7 @@ import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.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-WBOOUHSS.mjs → chunk-LIS6I5UP.mjs}

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

package/dist/{chunk-X4G6APW6.mjs → chunk-LNPKGWBG.mjs}

@@ -1,7 +1,7 @@
 import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE, COLOR_TRANSITION, SPRING_ELASTIC } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-T2KCAHOS.mjs → chunk-LOBLCFMN.mjs}

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

package/dist/{chunk-ELXBDILQ.mjs → chunk-LPV4NJJK.mjs}

@@ -1,5 +1,5 @@
-import { PagerDots } from './chunk-ZZ2R6KZ3.mjs';
-import { IconButton } from './chunk-T2KCAHOS.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-Y2NS74WS.mjs → chunk-M3C7XM2M.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-YTXRIXNZ.mjs';
+import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+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';
 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,51 @@ 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 isPresentedRef = useRef(false);
+  const name = useId();
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    onClose?.();
+  }, [onClose]);
   useEffect(() => {
-    if (open) {
+    if (open && !isPresentedRef.current) {
       impactMedium();
-      ref.current?.snapToIndex(0);
-    } else {
-      ref.current?.close();
+      ref.current?.present();
+      wasOpened.current = true;
+      isPresentedRef.current = true;
+    } else if (!open && wasOpened.current && isPresentedRef.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 +75,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 +88,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: handleDismiss,
       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 +177,7 @@ var styles = StyleSheet.create({
   },
   scrollContent: {
     paddingHorizontal: s(16),
-    paddingBottom: vs(32),
-    paddingRight: s(16)
+    paddingBottom: vs(32)
   },
   sheetContent: {
     gap: vs(16)
@@ -216,24 +188,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-BRKYVJVV.mjs → chunk-MEPSKGBO.mjs}

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

@@ -1,6 +1,6 @@
-import { IconButton } from './chunk-T2KCAHOS.mjs';
+import { IconButton } from './chunk-LOBLCFMN.mjs';
 import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-SOYNZDVY.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-YJ7I257J.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-SOYNZDVY.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-Z6SFHN6T.mjs → chunk-NJG7DHVF.mjs}

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.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-RYZC432S.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-SOYNZDVY.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-ZZ2R6KZ3.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-SOYNZDVY.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';