@retray-dev/ui-kit 10.0.0 → 10.2.0

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

@@ -1,31 +1,34 @@
-import { Button } from './chunk-2TFTAWVJ.mjs';
+import { Button } from './chunk-HTHGSXFG.mjs';
 import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useEffect } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { Feather } from '@expo/vector-icons';
 
 function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel
 }) {
   const { colors } = useTheme();
   const ref = useRef(null);
+  const effectiveSubtitle = subtitle ?? description;
   useEffect(() => {
     if (visible) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [visible]);
   const renderBackdrop = (props) => /* @__PURE__ */ React.createElement(
@@ -38,17 +41,30 @@ function ConfirmDialog({
     }
   );
   return /* @__PURE__ */ React.createElement(
-    BottomSheetModal,
+    BottomSheet,
     {
       ref,
+      index: -1,
+      onClose: onCancel,
       enableDynamicSizing: true,
-      onDismiss: onCancel,
       backdropComponent: renderBackdrop,
       backgroundStyle: [styles.background, { backgroundColor: colors.card }],
       handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React.createElement(BottomSheetView, { style: styles.content }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
+    /* @__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,
+      {
+        onPress: onCancel,
+        style: styles.closeButton,
+        activeOpacity: 0.6,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close",
+        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(
       Button,
       {
         label: confirmLabel,
@@ -95,19 +111,32 @@ var styles = StyleSheet.create({
     borderRadius: ms(2)
   },
   content: {
-    paddingHorizontal: s(24),
-    paddingBottom: vs(32),
-    gap: vs(12)
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32)
+  },
+  header: {
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4)
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   title: {
     fontFamily: "Sohne-SemiBold",
     fontSize: ms(18),
-    lineHeight: mvs(26)
+    flex: 1
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
   },
-  description: {
+  subtitle: {
     fontFamily: "Sohne-Regular",
-    fontSize: ms(15),
-    lineHeight: mvs(22)
+    fontSize: ms(14),
+    lineHeight: mvs(20)
   },
   actions: {
     gap: vs(10),

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

@@ -4,7 +4,7 @@ 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 { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetFooter, 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';
@@ -52,9 +52,9 @@ function Sheet({
   useEffect(() => {
     if (open) {
       impactMedium();
-      ref.current?.present();
+      ref.current?.snapToIndex(0);
     } else {
-      ref.current?.dismiss();
+      ref.current?.close();
     }
   }, [open]);
   const renderBackdrop = useCallback((props) => /* @__PURE__ */ React.createElement(
@@ -75,7 +75,7 @@ function Sheet({
   ) : children;
   const effectiveSubtitle = subtitle ?? description;
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
-  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: styles.header, 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(
+  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,
     {
       onPress: onClose,
@@ -123,13 +123,14 @@ function Sheet({
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
   return /* @__PURE__ */ React.createElement(
-    BottomSheetModal,
+    BottomSheet,
     {
       ref,
+      index: -1,
+      onClose,
       enableDynamicSizing: useDynamicSizing,
       snapPoints,
       maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
-      onDismiss: onClose,
       backdropComponent: renderBackdrop,
       footerComponent: effectiveFooter ? renderFooter : void 0,
       backgroundStyle: [styles.background, { backgroundColor: colors.card }],
@@ -151,7 +152,8 @@ function Sheet({
         style: contentStyle,
         showsVerticalScrollIndicator: true,
         indicatorStyle: "black",
-        persistentScrollbar: isAndroid
+        persistentScrollbar: isAndroid,
+        stickyHeaderIndices: headerNode ? [0] : void 0
       },
       headerNode,
       contentNode

package/dist/{chunk-O3HA6TYM.mjs → chunk-YJ7I257J.mjs}

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { EASINGS, TIMINGS } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
@@ -49,9 +49,9 @@ function AccordionItemComponent({
       },
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: item.trigger
+      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, /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__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),
     /* @__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,

package/dist/{chunk-NA7PARID.mjs → chunk-Z4VHZ7B5.mjs}

@@ -2,7 +2,7 @@ import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';

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

@@ -1,5 +1,5 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-4K625MVM.mjs → chunk-ZZ2R6KZ3.mjs}

@@ -1,6 +1,6 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s } from './chunk-2CE3TQVY.mjs';
 import React, { useEffect } from 'react';

package/dist/index.d.mts

@@ -51,6 +51,8 @@ export { TabBar, TabBarItem, TabBarProps } from './TabBar.mjs';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.mjs';
 export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.mjs';
 export { ImageUpload, ImageUploadProps } from './ImageUpload.mjs';
+export { IconPicker, IconPickerProps } from './IconPicker.mjs';
+export { NumberStepper, NumberStepperProps, NumberStepperSize } from './NumberStepper.mjs';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -97,6 +99,7 @@ interface IconProps {
  * @example configureIconFamilies(['Feather', 'MaterialIcons'])
  */
 declare function configureIconFamilies(families: IconFamily[]): void;
+declare function getValidIconNames(families?: IconFamily[]): string[];
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
@@ -386,4 +389,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };

package/dist/index.d.ts

@@ -51,6 +51,8 @@ export { TabBar, TabBarItem, TabBarProps } from './TabBar.js';
 export { ImageViewer, ImageViewerProps } from './ImageViewer.js';
 export { SheetSelect, SheetSelectOption, SheetSelectProps } from './SheetSelect.js';
 export { ImageUpload, ImageUploadProps } from './ImageUpload.js';
+export { IconPicker, IconPickerProps } from './IconPicker.js';
+export { NumberStepper, NumberStepperProps, NumberStepperSize } from './NumberStepper.js';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
@@ -97,6 +99,7 @@ interface IconProps {
  * @example configureIconFamilies(['Feather', 'MaterialIcons'])
  */
 declare function configureIconFamilies(families: IconFamily[]): void;
+declare function getValidIconNames(families?: IconFamily[]): string[];
 declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
 declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
 
@@ -386,4 +389,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, type UseConfirmDialogOptions, type UseConfirmDialogResult, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, getValidIconNames, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useConfirmDialog, useTheme };