@retray-dev/ui-kit 10.1.0 → 12.1.0

package/dist/index.mjs

@@ -1,61 +1,64 @@
-export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
-export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-CZCQZHG6.mjs';
-export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
-export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
-export { SheetSelect } from './chunk-URI2WBIV.mjs';
-export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
-export { Slider } from './chunk-JMOZEC77.mjs';
-export { Switch } from './chunk-WF2XDFRK.mjs';
-export { TabBar } from './chunk-MLF3EZFW.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';
-export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
-export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
-export { Select } from './chunk-A3A6KNQN.mjs';
-export { SelectableGrid } from './chunk-NA7PARID.mjs';
-export { LabelValue } from './chunk-A4MDAP7G.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-OHBNABL5.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 { DetailRow } from './chunk-JB67UOB5.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-WOEYDUJZ.mjs';
-export { PagerDots } from './chunk-4K625MVM.mjs';
+export { Stats } from './chunk-5OLNXP3S.mjs';
+export { Switch } from './chunk-HLMPMUK2.mjs';
+export { TabBar } from './chunk-D3Y2T42P.mjs';
+export { Tabs, TabsContent } from './chunk-3GEYJ7I5.mjs';
+export { Text } from './chunk-357YO24D.mjs';
+export { Textarea } from './chunk-JNVAIDLK.mjs';
+export { Toggle } from './chunk-FVTVCJAH.mjs';
+export { Select } from './chunk-WOEWGSTU.mjs';
+export { SelectableGrid } from './chunk-NXI4YDZ2.mjs';
+export { Separator } from './chunk-EFLFRAHD.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-FFTYLPSB.mjs';
+export { SheetSelect } from './chunk-P73V2EKS.mjs';
+export { Skeleton } from './chunk-BOVUP27T.mjs';
+export { Slider } from './chunk-4WFMPFZB.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-I4V5XZPS.mjs';
+export { NumberStepper } from './chunk-N4ZPVCJH.mjs';
+export { Pressable } from './chunk-E7NEHHXV.mjs';
+export { PricingCard } from './chunk-F4V6XLP4.mjs';
+export { Progress } from './chunk-2I2AYECM.mjs';
+export { RadioGroup } from './chunk-J6Q2YJEV.mjs';
+export { RetrayProvider } from './chunk-XBAGGKLW.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-QSFV2P7O.mjs';
+export { ImageViewer } from './chunk-2A2LEFZG.mjs';
+export { PagerDots } from './chunk-OULVKTWL.mjs';
+export { LabelValue } from './chunk-P64WHW4A.mjs';
+export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-JULSIZDM.mjs';
+export { ListItem } from './chunk-FUVYSVGR.mjs';
+export { MediaCard } from './chunk-AQEVCEXV.mjs';
+export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-AKM4EPOT.mjs';
+export { MenuItem } from './chunk-DI7CBDL6.mjs';
+export { DetailRow } from './chunk-ZHMSAYLT.mjs';
+export { EmptyState } from './chunk-7HSILTC4.mjs';
+export { ErrorBoundary } from './chunk-LRM4AVYY.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-HJ46DTJE.mjs';
+export { IconPicker } from './chunk-KHYX4IOM.mjs';
+export { ImageUpload } from './chunk-GK4VRMNE.mjs';
+export { Spinner } from './chunk-BCWEHE34.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
-export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-2CBQKU7H.mjs';
+export { CategoryStrip } from './chunk-MYZ2EDYU.mjs';
 import './chunk-YNROWHQJ.mjs';
-export { Checkbox } from './chunk-AV4EMIRH.mjs';
-export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
-export { ConfirmDialog } from './chunk-KZL5VTYK.mjs';
-export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-JUXSWN54.mjs';
-export { Input } from './chunk-ZUR7AU5R.mjs';
-export { Accordion } from './chunk-DJ7RN37L.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';
-export { Badge } from './chunk-TERDKCLE.mjs';
-export { Button } from './chunk-2TFTAWVJ.mjs';
+export { Checkbox } from './chunk-3N2M3WZL.mjs';
+export { Chip, ChipGroup } from './chunk-FA2KMTH5.mjs';
+export { ConfirmDialog } from './chunk-JCZQOY4O.mjs';
+export { CurrencyDisplay } from './chunk-BQZE3HAW.mjs';
+export { CurrencyInput } from './chunk-X26S5EVZ.mjs';
+export { Input } from './chunk-PGERH3P7.mjs';
+export { Accordion } from './chunk-265G6A46.mjs';
+export { AlertBanner } from './chunk-V6NFJXKO.mjs';
+export { AppHeader } from './chunk-ISY26JQJ.mjs';
+export { IconButton } from './chunk-DF6DU42P.mjs';
+export { Avatar } from './chunk-S3KJCPEJ.mjs';
+export { Badge } from './chunk-3UYAZ7I4.mjs';
+export { Button } from './chunk-DOGIPOF5.mjs';
 import './chunk-3DKJ2GIC.mjs';
 export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
+export { Icon, configureIconFamilies, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-EMUWGDWC.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';
 import { useState, useCallback } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "10.1.0",
+  "version": "12.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -110,7 +110,7 @@
       "react-native-worklets": "0.5.1",
       "@types/react": "19.1.17",
       "react-native-safe-area-context": "5.6.2",
-      "@gorhom/bottom-sheet": "5.2.8"
+      "@gorhom/bottom-sheet": "5.2.14"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@expo/vector-icons": "^15.1.1",
-    "@gorhom/bottom-sheet": "5.2.8",
+    "@gorhom/bottom-sheet": "5.2.14",
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
     "@shopify/react-native-skia": "2.2.12",

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
-import BottomSheet, {
+import {
+  BottomSheetModal,
   BottomSheetView,
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Feather } from '@expo/vector-icons'
 import { impactMedium, notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -14,16 +16,11 @@ import { s, vs, ms, mvs } from '../../utils/scaling'
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
-  /** Secondary text below title. */
   subtitle?: string
-  /** @deprecated Use `subtitle` instead. */
-  description?: string
   confirmLabel?: string
   cancelLabel?: string
   confirmVariant?: 'primary' | 'destructive'
-  /** Show a loading spinner in the confirm button (e.g. while async action completes). */
   loading?: boolean
-  /** Show an X close button in the top-right corner. */
   showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
@@ -33,7 +30,6 @@ export function ConfirmDialog({
   visible,
   title,
   subtitle,
-  description,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
@@ -43,37 +39,44 @@ export function ConfirmDialog({
   onCancel,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
-  const ref = useRef<BottomSheet>(null)
-  const effectiveSubtitle = subtitle ?? description
+  const insets = useSafeAreaInsets()
+  const ref = useRef<BottomSheetModal>(null)
+  const wasOpened = useRef(false)
+  const name = useId()
 
   useEffect(() => {
     if (visible) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+    } else if (wasOpened.current) {
+      ref.current?.dismiss()
     }
   }, [visible])
 
-  const renderBackdrop = (props: BottomSheetBackdropProps) => (
-    <BottomSheetBackdrop
-      {...props}
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      pressBehavior="close"
-    />
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
   )
 
   return (
-    <BottomSheet
+      <BottomSheetModal
       ref={ref}
-      index={-1}
-      onClose={onCancel}
+      name={name}
+      onDismiss={onCancel}
       enableDynamicSizing
       backdropComponent={renderBackdrop}
-      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
+      topInset={insets.top}
     >
       <BottomSheetView style={styles.content}>
         <View style={styles.header} accessibilityRole="header">
@@ -95,9 +98,9 @@ export function ConfirmDialog({
               </TouchableOpacity>
             ) : null}
           </View>
-          {effectiveSubtitle ? (
+          {subtitle ? (
             <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-              {effectiveSubtitle}
+              {subtitle}
             </Text>
           ) : null}
         </View>
@@ -108,7 +111,10 @@ export function ConfirmDialog({
             fullWidth
             loading={loading}
             disabled={loading}
-            onPress={() => { notificationSuccess(); onConfirm() }}
+            onPress={() => {
+              notificationSuccess()
+              onConfirm()
+            }}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}
@@ -125,12 +131,15 @@ export function ConfirmDialog({
             label={cancelLabel}
             variant="secondary"
             fullWidth
-            onPress={() => { hapticSelection(); onCancel() }}
+            onPress={() => {
+              hapticSelection()
+              onCancel()
+            }}
             icon={<Feather name="x" size={15} color={colors.foreground} />}
           />
         </View>
       </BottomSheetView>
-    </BottomSheet>
+    </BottomSheetModal>
   )
 }
 

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import { ViewStyle, TextStyle } from 'react-native'
+import { ViewStyle, TextStyle, TextInputProps } from 'react-native'
 import { Input } from '../Input'
 import { ms, vs } from '../../utils/scaling'
 
-export interface CurrencyInputProps {
-  value?: string
-  onChangeText?: (formatted: string) => void
+export interface CurrencyInputProps extends TextInputProps {
   /** Called with the parsed numeric value (no separators, no prefix). */
   onChangeValue?: (raw: number) => void
   /** Currency symbol shown left of the value. Any string (`'$'`, `'€'`, `'£'`, `'COP '`). Defaults to `'$'`. */
@@ -18,10 +16,7 @@ export interface CurrencyInputProps {
   /** Red helper text; also changes input border to destructive color. */
   error?: string
   hint?: string
-  placeholder?: string
-  editable?: boolean
   containerStyle?: ViewStyle
-  style?: TextStyle
   /** Use inside a Sheet/BottomSheet — passes sheetMode to the underlying Input. */
   sheetMode?: boolean
 }
@@ -47,6 +42,7 @@ export function CurrencyInput({
   containerStyle,
   style,
   sheetMode,
+  ...props
 }: CurrencyInputProps) {
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
@@ -73,6 +69,7 @@ export function CurrencyInput({
 
   return (
     <Input
+      {...props}
       value={displayValue}
       onChangeText={handleChange}
       keyboardType="numeric"

package/src/components/DetailRow/DetailRow.tsx

@@ -16,7 +16,7 @@ const weightMap: Record<DetailRowLabelWeight, string> = {
 
 export interface DetailRowProps {
   label: React.ReactNode
-  value: string | React.ReactNode
+  value: string | number | React.ReactNode
   /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
   separator?: DetailRowSeparator
   labelWeight?: DetailRowLabelWeight