@retray-dev/ui-kit 9.0.0 → 9.2.0

package/dist/index.js

@@ -12,11 +12,11 @@ var Ionicons = require('@expo/vector-icons/Ionicons');
 var pressto = require('pressto');
 var Animated13 = require('react-native-reanimated');
 var expoFont = require('expo-font');
+var bottomSheet = require('@gorhom/bottom-sheet');
 var vectorIcons = require('@expo/vector-icons');
 var expoLinearGradient = require('expo-linear-gradient');
 var reactNativeEase = require('react-native-ease');
 var RNSlider = require('@react-native-community/slider');
-var bottomSheet = require('@gorhom/bottom-sheet');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var picker = require('@react-native-picker/picker');
 var sonnerNative = require('sonner-native');
@@ -1011,7 +1011,7 @@ function useColorTransition(active, options = {}) {
 
 // src/components/Input/Input.tsx
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
+function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React25.useState(false);
   const [showPassword, setShowPassword] = React25.useState(false);
@@ -1048,7 +1048,31 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles4.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles4.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles4.prefixContainer }, effectivePrefix) : null,
-    /* @__PURE__ */ React25__default.default.createElement(
+    sheetMode ? /* @__PURE__ */ React25__default.default.createElement(
+      bottomSheet.BottomSheetTextInput,
+      {
+        style: [
+          styles4.input,
+          { color: colors.foreground },
+          webInputResetStyle,
+          style
+        ],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        placeholderTextColor: colors.foregroundMuted,
+        allowFontScaling: true,
+        secureTextEntry: effectiveSecure,
+        editable: isDisabled ? false : editable,
+        accessibilityLabel: accessibilityLabel ?? label,
+        ...props
+      }
+    ) : /* @__PURE__ */ React25__default.default.createElement(
       reactNative.TextInput,
       {
         style: [
@@ -1604,7 +1628,7 @@ var styles10 = reactNative.StyleSheet.create({
     right: 0
   }
 });
-function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
+function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, onDismiss, style }) {
   const { colors, colorScheme } = useTheme();
   const isDark = colorScheme === "dark";
   const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.foreground;
@@ -1630,7 +1654,18 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
       accessibilityLabel: a11yLabel
     },
     /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles11.iconSlot }, effectiveIcon),
-    /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)
+    /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles11.content }, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles11.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles11.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null),
+    onDismiss ? /* @__PURE__ */ React25__default.default.createElement(
+      reactNative.TouchableOpacity,
+      {
+        onPress: onDismiss,
+        style: styles11.dismissButton,
+        activeOpacity: 0.6,
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss"
+      },
+      /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "x", size: ms(16), color: colors.foregroundMuted })
+    ) : null
   );
 }
 var styles11 = reactNative.StyleSheet.create({
@@ -1656,6 +1691,11 @@ var styles11 = reactNative.StyleSheet.create({
   description: {
     fontFamily: "Sohne-Regular",
     fontSize: ms(12)
+  },
+  dismissButton: {
+    padding: s(4),
+    marginTop: vs(-2),
+    marginRight: -s(4)
   }
 });
 function Progress({ value = 0, max = 100, variant = "default", style, accessibilityLabel }) {
@@ -3249,7 +3289,8 @@ function CurrencyInput({
   placeholder,
   editable,
   containerStyle,
-  style
+  style,
+  sheetMode
 }) {
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
@@ -3282,7 +3323,8 @@ function CurrencyInput({
       prefixStyle,
       containerStyle,
       inputWrapperStyle: isLarge ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
-      style: [inputStyle, style]
+      style: [inputStyle, style],
+      sheetMode
     }
   );
 }
@@ -3359,6 +3401,7 @@ function ListItemBase({
   style,
   titleStyle,
   subtitleStyle,
+  subtitleNumberOfLines = 2,
   captionStyle,
   accessibilityLabel
 }) {
@@ -3393,7 +3436,7 @@ function ListItemBase({
     reactNative.Text,
     {
       style: [styles25.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
-      numberOfLines: 2,
+      numberOfLines: subtitleNumberOfLines,
       allowFontScaling: true
     },
     subtitle
@@ -3861,6 +3904,7 @@ function ConfirmDialog({
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   confirmVariant = "primary",
+  loading = false,
   onConfirm,
   onCancel
 }) {
@@ -3900,6 +3944,8 @@ function ConfirmDialog({
         label: confirmLabel,
         variant: confirmVariant,
         fullWidth: true,
+        loading,
+        disabled: loading,
         onPress: () => {
           notificationSuccess();
           onConfirm();
@@ -5465,6 +5511,240 @@ var styles44 = reactNative.StyleSheet.create({
     alignItems: "center"
   }
 });
+function SheetSelectChip({
+  option,
+  selected,
+  onPress
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    selectionAsync();
+    onPress();
+  };
+  const iconColor = selected ? colors.primaryForeground : colors.foreground;
+  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null;
+  return /* @__PURE__ */ React25__default.default.createElement(
+    PressableChip,
+    {
+      onPress: option.disabled ? void 0 : handlePress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: option.disabled ? `${option.label}, unavailable` : option.label,
+      accessibilityState: { selected, disabled: option.disabled }
+    },
+    /* @__PURE__ */ React25__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: [styles45.chip, option.disabled && styles45.chipDisabled],
+        animate: {
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border
+        },
+        transition: COLOR_TRANSITION
+      },
+      resolvedIcon ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles45.chipIcon }, resolvedIcon) : null,
+      /* @__PURE__ */ React25__default.default.createElement(
+        reactNative.Text,
+        {
+          style: [styles45.chipLabel, { color: selected ? colors.primaryForeground : colors.foreground }],
+          allowFontScaling: true
+        },
+        option.label
+      )
+    )
+  );
+}
+function SheetSelect({
+  options,
+  value,
+  onValueChange,
+  multiSelect = false,
+  label,
+  error,
+  wrap = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const isSelected2 = (optionValue) => {
+    if (Array.isArray(value)) return value.includes(optionValue);
+    return optionValue === value;
+  };
+  const handlePress = (optionValue) => {
+    if (!multiSelect) {
+      onValueChange?.(optionValue);
+      return;
+    }
+    const currentArray = Array.isArray(value) ? value : value != null ? [value] : [];
+    const alreadySelected = currentArray.includes(optionValue);
+    const newArray = alreadySelected ? currentArray.filter((v) => v !== optionValue) : [...currentArray, optionValue];
+    onValueChange?.(newArray);
+  };
+  const chips = options.map((opt) => /* @__PURE__ */ React25__default.default.createElement(
+    SheetSelectChip,
+    {
+      key: opt.value,
+      option: opt,
+      selected: isSelected2(opt.value),
+      onPress: () => handlePress(opt.value)
+    }
+  ));
+  return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles45.container, style], accessibilityLabel }, label ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles45.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, wrap ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles45.wrapContainer }, chips) : /* @__PURE__ */ React25__default.default.createElement(
+    reactNative.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles45.scrollContent
+    },
+    chips
+  ), error ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles45.error, { color: colors.destructive }], allowFontScaling: true, accessibilityLiveRegion: "polite" }, error) : null);
+}
+var styles45 = reactNative.StyleSheet.create({
+  container: {
+    gap: vs(8)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  scrollContent: {
+    flexDirection: "row",
+    gap: s(8)
+  },
+  wrapContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: s(8)
+  },
+  chip: {
+    borderRadius: RADIUS.full,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(10),
+    minHeight: 44,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: s(5)
+  },
+  chipDisabled: {
+    opacity: 0.4
+  },
+  chipIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipLabel: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  error: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  }
+});
+function ImageUpload({
+  value,
+  onChange,
+  loading = false,
+  placeholder = "Tap to add image",
+  width,
+  height = 200,
+  borderRadius = RADIUS.lg,
+  resizeMode = "cover",
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = async () => {
+    if (disabled || loading) return;
+    impactLight();
+    let ImagePicker;
+    try {
+      ImagePicker = await import('expo-image-picker');
+    } catch {
+      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed. Add it as a dependency.");
+      return;
+    }
+    if (reactNative.Platform.OS !== "web") {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== "granted") return;
+    }
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      quality: 0.8
+    });
+    if (!result.canceled && result.assets[0]) {
+      onChange?.(result.assets[0].uri);
+    }
+  };
+  const containerStyle = {
+    width,
+    height,
+    borderRadius,
+    borderWidth: value ? 0 : 1,
+    borderStyle: "dashed",
+    borderColor: colors.border,
+    backgroundColor: value ? "transparent" : colors.surface,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ React25__default.default.createElement(
+    PressableCard,
+    {
+      onPress: handlePress,
+      enabled: !disabled && !loading,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? (value ? "Change image" : placeholder),
+      accessibilityState: { disabled: disabled || loading },
+      style: [containerStyle, style]
+    },
+    value ? /* @__PURE__ */ React25__default.default.createElement(
+      reactNative.Image,
+      {
+        source: { uri: value },
+        style: [reactNative.StyleSheet.absoluteFillObject, { borderRadius }],
+        resizeMode
+      }
+    ) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles46.placeholder }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles46.placeholderText, { color: colors.foregroundMuted }], allowFontScaling: true }, placeholder)),
+    loading ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles46.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React25__default.default.createElement(Spinner, { size: "md" })) : null,
+    value && !loading ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles46.editBadge, pointerEvents: "none" }, /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles46.editBadgeInner, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Feather, { name: "edit-2", size: ms(12), color: "#fff" }))) : null
+  );
+}
+var styles46 = reactNative.StyleSheet.create({
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: vs(8)
+  },
+  placeholderText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  },
+  loadingOverlay: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  editBadge: {
+    position: "absolute",
+    bottom: vs(8),
+    right: s(8)
+  },
+  editBadgeInner: {
+    width: s(28),
+    height: s(28),
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -5479,6 +5759,42 @@ function getResponsiveFontSize(text, maxSize, steps = [
   }
   return maxSize - 8;
 }
+function useConfirmDialog(options) {
+  const [visible, setVisible] = React25.useState(false);
+  const [target, setTarget] = React25.useState(null);
+  const [loading, setLoading] = React25.useState(false);
+  const open = React25.useCallback((t) => {
+    setTarget(t ?? null);
+    setVisible(true);
+  }, []);
+  const handleConfirm = React25.useCallback(async () => {
+    setLoading(true);
+    try {
+      await options.onConfirm();
+    } finally {
+      setLoading(false);
+      setVisible(false);
+      setTarget(null);
+    }
+  }, [options]);
+  const handleCancel = React25.useCallback(() => {
+    setVisible(false);
+    setTarget(null);
+    options.onCancel?.();
+  }, [options]);
+  return {
+    visible,
+    target,
+    loading,
+    open,
+    dialogProps: {
+      visible,
+      loading,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  };
+}
 
 Object.defineProperty(exports, "BottomSheetModalProvider", {
   enumerable: true,
@@ -5523,6 +5839,7 @@ exports.FormSection = FormSection;
 exports.ICON_SIZES = ICON_SIZES;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.ImageUpload = ImageUpload;
 exports.ImageViewer = ImageViewer;
 exports.Input = Input;
 exports.LabelValue = LabelValue;
@@ -5549,6 +5866,7 @@ exports.Select = Select;
 exports.SelectableGrid = SelectableGrid;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
+exports.SheetSelect = SheetSelect;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
@@ -5579,5 +5897,6 @@ exports.notificationWarning = notificationWarning;
 exports.renderIcon = renderIcon;
 exports.richHaptics = richHaptics;
 exports.selectionAsync = selectionAsync;
+exports.useConfirmDialog = useConfirmDialog;
 exports.useTheme = useTheme;
 exports.useToast = useToast;

package/dist/index.mjs

@@ -1,13 +1,15 @@
+export { Text } from './chunk-WJLKJMKR.mjs';
+export { Textarea } from './chunk-EH745HE5.mjs';
 export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { SheetSelect } from './chunk-URI2WBIV.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
-export { Spinner } from './chunk-WBOOUHSS.mjs';
 export { Switch } from './chunk-QKH5ZOD5.mjs';
 export { TabBar } from './chunk-MLF3EZFW.mjs';
 export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
-export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-EH745HE5.mjs';
+export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { PricingCard } from './chunk-4I7D47FH.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
 export { RadioGroup } from './chunk-X4G6APW6.mjs';
@@ -16,33 +18,33 @@ export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.
 export { Select } from './chunk-A3A6KNQN.mjs';
 export { SelectableGrid } from './chunk-NA7PARID.mjs';
 export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+export { LabelValue } from './chunk-A4MDAP7G.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-BNP626TY.mjs';
+export { ListItem } from './chunk-T4I5WVHA.mjs';
 export { MediaCard } from './chunk-VGTDN7SW.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
 export { MenuItem } from './chunk-ZJKGQMYH.mjs';
 export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
-export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { EmptyState } from './chunk-6OAZJ577.mjs';
 export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
+export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
+export { Spinner } from './chunk-WBOOUHSS.mjs';
 export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
 export { PagerDots } from './chunk-4K625MVM.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
 export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
 import './chunk-YNROWHQJ.mjs';
 export { Checkbox } from './chunk-AV4EMIRH.mjs';
 export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-7QHVVCB3.mjs';
+export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-MAC465BB.mjs';
-export { Input } from './chunk-756RAKE4.mjs';
+export { CurrencyInput } from './chunk-KNSENOV4.mjs';
+export { Input } from './chunk-LVYEU5ZK.mjs';
 import './chunk-26BCI223.mjs';
 export { DetailRow } from './chunk-JB67UOB5.mjs';
 export { Accordion } from './chunk-O3HA6TYM.mjs';
-export { AlertBanner } from './chunk-M6ZXVBTK.mjs';
+export { AlertBanner } from './chunk-6MKGPAR2.mjs';
 export { AppHeader } from './chunk-AZJF2BLK.mjs';
 export { IconButton } from './chunk-3U4SSNWP.mjs';
 export { Avatar } from './chunk-JT7HKXRB.mjs';
@@ -57,6 +59,7 @@ export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';
+import { useState, useCallback } from 'react';
 
 // src/utils/typography.ts
 function getResponsiveFontSize(text, maxSize, steps = [
@@ -71,5 +74,41 @@ function getResponsiveFontSize(text, maxSize, steps = [
   }
   return maxSize - 8;
 }
+function useConfirmDialog(options) {
+  const [visible, setVisible] = useState(false);
+  const [target, setTarget] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const open = useCallback((t) => {
+    setTarget(t ?? null);
+    setVisible(true);
+  }, []);
+  const handleConfirm = useCallback(async () => {
+    setLoading(true);
+    try {
+      await options.onConfirm();
+    } finally {
+      setLoading(false);
+      setVisible(false);
+      setTarget(null);
+    }
+  }, [options]);
+  const handleCancel = useCallback(() => {
+    setVisible(false);
+    setTarget(null);
+    options.onCancel?.();
+  }, [options]);
+  return {
+    visible,
+    target,
+    loading,
+    open,
+    dialogProps: {
+      visible,
+      loading,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  };
+}
 
-export { getResponsiveFontSize };
+export { getResponsiveFontSize, useConfirmDialog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,7 +22,10 @@
     "dist",
     "src",
     "COMPONENTS.md",
-    "EXAMPLES.md"
+    "CONSUMER.md",
+    "EXAMPLES.md",
+    "FONTS.md",
+    "DESIGN.md"
   ],
   "scripts": {
     "build": "tsup",
@@ -55,6 +58,7 @@
     "@shopify/react-native-skia": ">=1.0.0",
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
+    "expo-image-picker": ">=15.0.0",
     "expo-linear-gradient": ">=13.0.0",
     "expo-sensors": ">=13.0.0",
     "pressto": ">=0.6.0",
@@ -63,13 +67,13 @@
     "react-native-ease": ">=0.7.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-pulsar": ">=1.6.0",
-    "react-native-reanimated": ">=4.0.0",
+    "react-native-reanimated": ">=4.0.0 <5.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-screens": ">=3.0.0",
     "react-native-size-matters": ">=0.4.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-worklets": ">=0.5.0",
-    "sonner-native": ">=0.20.0"
+    "react-native-worklets": "~0.5.1",
+    "sonner-native": ">=0.22.0"
   },
   "peerDependenciesMeta": {
     "@shopify/react-native-skia": {
@@ -80,6 +84,15 @@
     },
     "react-native-pulsar": {
       "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "react-native-ease": {
+      "optional": false
+    },
+    "pressto": {
+      "optional": false
     }
   },
   "pnpm": {

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
+import { View, Text, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native'
+import { FontAwesome5, MaterialIcons, Entypo, Feather } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
@@ -15,10 +15,12 @@ export interface AlertBannerProps {
   icon?: React.ReactNode
   iconName?: string
   iconColor?: string
+  /** Called when the user taps the dismiss (×) button. If omitted, no button is shown. */
+  onDismiss?: () => void
   style?: ViewStyle
 }
 
-export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, onDismiss, style }: AlertBannerProps) {
   const { colors, colorScheme } = useTheme()
 
   // Match Toast richColors appearance — saturated semantic colors
@@ -81,6 +83,17 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
           <Text style={[styles.description, { color: colors.foreground, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
+      {onDismiss ? (
+        <TouchableOpacity
+          onPress={onDismiss}
+          style={styles.dismissButton}
+          activeOpacity={0.6}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+        >
+          <Feather name="x" size={ms(16)} color={colors.foregroundMuted} />
+        </TouchableOpacity>
+      ) : null}
     </View>
   )
 }
@@ -109,4 +122,9 @@ const styles = StyleSheet.create({
     fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
   },
+  dismissButton: {
+    padding: s(4),
+    marginTop: vs(-2),
+    marginRight: -s(4),
+  },
 })