@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/index.mjs

@@ -1,63 +1,65 @@
-export { Switch } from './chunk-WF2XDFRK.mjs';
-export { TabBar } from './chunk-Z6SFHN6T.mjs';
-export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
-export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-U2XJFYED.mjs';
-export { Toggle } from './chunk-7LWRKMF5.mjs';
+export { Toggle } from './chunk-UNNRUJTM.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
-export { Select } from './chunk-A3A6KNQN.mjs';
-export { SelectableGrid } from './chunk-Z4VHZ7B5.mjs';
-export { Separator } from './chunk-MX6HRKMI.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-Y2NS74WS.mjs';
-export { SheetSelect } from './chunk-KOO4WITD.mjs';
-export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
-export { Slider } from './chunk-JMOZEC77.mjs';
-export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
-export { NumberStepper } from './chunk-BUMAMSTZ.mjs';
-export { Pressable } from './chunk-MBMXYJJV.mjs';
-export { PricingCard } from './chunk-AJRVDP2H.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 { ImageViewer } from './chunk-ELXBDILQ.mjs';
-export { PagerDots } from './chunk-ZZ2R6KZ3.mjs';
-export { LabelValue } from './chunk-FCSSQK3L.mjs';
-export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-VKID2D2I.mjs';
-export { MediaCard } from './chunk-IX3NYLYQ.mjs';
-export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
-export { MenuItem } from './chunk-TB6SD2FT.mjs';
-export { DetailRow } from './chunk-S2R7UVOE.mjs';
-export { EmptyState } from './chunk-6SECQ2ZF.mjs';
-export { ErrorBoundary } from './chunk-RYZC432S.mjs';
-export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
-export { IconPicker } from './chunk-53Z3NYGE.mjs';
-export { ImageUpload } from './chunk-TZDGAP5N.mjs';
-export { Spinner } from './chunk-WBOOUHSS.mjs';
+export { Stats } from './chunk-4XOB5TTD.mjs';
+export { Switch } from './chunk-RMRS44MQ.mjs';
+export { TabBar } from './chunk-NJG7DHVF.mjs';
+export { Tabs, TabsContent } from './chunk-IVSRW4HS.mjs';
+export { Text } from './chunk-GUTDFUNF.mjs';
+export { Textarea } from './chunk-2BA3JMKK.mjs';
+export { Select } from './chunk-HEDQPK4I.mjs';
+export { SelectableCard, SelectableCardGroup } from './chunk-2P2CB235.mjs';
+export { SelectableGrid } from './chunk-ZR6HSEAB.mjs';
+export { Separator } from './chunk-VJBUCITV.mjs';
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-M3C7XM2M.mjs';
+export { SheetSelect } from './chunk-KSUWPU2F.mjs';
+export { Skeleton } from './chunk-QDAZGZUF.mjs';
+export { Slider } from './chunk-RJNLAH76.mjs';
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-AENAVIKT.mjs';
+export { NumberStepper } from './chunk-ELGEOM7I.mjs';
+export { Pressable } from './chunk-E7NEHHXV.mjs';
+export { PricingCard } from './chunk-E5UKLSJZ.mjs';
+export { Progress } from './chunk-TS7DGUIR.mjs';
+export { RadioGroup } from './chunk-LNPKGWBG.mjs';
+export { RetrayProvider } from './chunk-ZIMY2QUM.mjs';
+export { ToastProvider, sonnerToast as toast, useToast } from './chunk-YMYIEVZP.mjs';
+export { ImageViewer } from './chunk-LPV4NJJK.mjs';
+export { PagerDots } from './chunk-OLVJFKXS.mjs';
+export { LabelValue } from './chunk-57V2LXCK.mjs';
+export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-C43HRKXH.mjs';
+export { ListItem } from './chunk-EDLCGYIO.mjs';
+export { MediaCard } from './chunk-7ELGZ66G.mjs';
+export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-ULGNQPNE.mjs';
+export { MenuItem } from './chunk-UQ4742ET.mjs';
+export { DetailRow } from './chunk-2LG326TT.mjs';
+export { EmptyState } from './chunk-HC4VVCWY.mjs';
+export { ErrorBoundary } from './chunk-NLZY4TXU.mjs';
+export { Form, FormField, FormFooter, FormSection } from './chunk-7AFZWSCI.mjs';
+export { IconPicker } from './chunk-SAWUXP3A.mjs';
+export { ImageUpload } from './chunk-CF27NBXO.mjs';
+export { Spinner } from './chunk-LIS6I5UP.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
-export { CategoryStrip } from './chunk-6L4G6PBT.mjs';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-BXF4AMHY.mjs';
+export { CategoryStrip } from './chunk-3XCFYSX4.mjs';
 import './chunk-YNROWHQJ.mjs';
-export { Checkbox } from './chunk-AV4EMIRH.mjs';
-export { Chip, ChipGroup } from './chunk-DYT7BG5I.mjs';
-export { ConfirmDialog } from './chunk-WYEUNUTP.mjs';
-export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-NMU5FMQJ.mjs';
-export { Input } from './chunk-SXLKNTA4.mjs';
-export { Accordion } from './chunk-YJ7I257J.mjs';
-export { AlertBanner } from './chunk-BEMIQXXU.mjs';
-export { AppHeader } from './chunk-TBNZHU6C.mjs';
-export { IconButton } from './chunk-T2KCAHOS.mjs';
-export { Avatar } from './chunk-JT7HKXRB.mjs';
-export { Badge } from './chunk-VF2ATYN3.mjs';
-export { Button } from './chunk-HTHGSXFG.mjs';
+export { Checkbox } from './chunk-UBUXUMER.mjs';
+export { Chip, ChipGroup } from './chunk-F3YTWO3T.mjs';
+export { ConfirmDialog } from './chunk-QXDGGOLC.mjs';
+export { CurrencyDisplay } from './chunk-MEPSKGBO.mjs';
+export { CurrencyInput } from './chunk-2HFD4IHU.mjs';
+export { Input } from './chunk-DF7JA72E.mjs';
+export { Accordion } from './chunk-NHDI3VQB.mjs';
+export { AlertBanner } from './chunk-4OORJ2DY.mjs';
+export { AppHeader } from './chunk-MVMGPZN6.mjs';
+export { IconButton } from './chunk-LOBLCFMN.mjs';
+export { Avatar } from './chunk-QOLWA2PW.mjs';
+export { Badge } from './chunk-GH67YXG6.mjs';
+export { Button } from './chunk-4J2PXL36.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, getValidIconNames, renderIcon } from './chunk-KA7LTET3.mjs';
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha } from './chunk-YTXRIXNZ.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.2.0",
+  "version": "12.2.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/Accordion/Accordion.tsx

@@ -29,6 +29,12 @@ export interface AccordionItem {
   icon?: React.ReactNode
   /** Override icon color. Defaults to foregroundMuted. */
   iconColor?: string
+  /**
+   * Action buttons rendered after the trigger content but before the chevron.
+   * Automatically touch-isolated — taps on actions won't toggle the accordion.
+   * Use this instead of embedding interactive elements inside `trigger`.
+   */
+  triggerActions?: React.ReactNode
 }
 
 export interface AccordionProps {
@@ -112,6 +118,14 @@ function AccordionItemComponent({
             item.trigger
           )}
         </View>
+        {item.triggerActions ? (
+          <View
+            style={styles.triggerActions}
+            onTouchEnd={(e) => e.stopPropagation()}
+          >
+            {item.triggerActions}
+          </View>
+        ) : null}
         <Animated.View style={[styles.chevron, rotationStyle]}>
           <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />
         </Animated.View>
@@ -206,6 +220,12 @@ const 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/src/components/Button/Button.tsx

@@ -73,31 +73,38 @@ function ButtonBase({
     onPress?.()
   }
 
-  const containerVariantStyle: ViewStyle = {
-    primary:     { backgroundColor: colors.primary },
-    secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
-    text:        { backgroundColor: 'transparent' },
-    destructive: { backgroundColor: colors.destructive },
-  }[variant]
-
-  const labelVariantStyle: TextStyle = {
-    primary:     { color: colors.primaryForeground },
-    secondary:   { color: colors.primary },
-    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
-    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
-    // carry the brand voltage. Falls back to primary when no accent is defined.
-    text:        { color: colors.accentResolved },
-    destructive: { color: colors.destructiveForeground },
-  }[variant]
-
-  const textColor = iconColor ?? (labelVariantStyle.color as string)
+  const containerVariantStyle: ViewStyle = isDisabled
+    ? {
+        primary:     { backgroundColor: colors.surface },
+        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+        text:        { backgroundColor: 'transparent' },
+        destructive: { backgroundColor: colors.surface },
+      }[variant]
+    : {
+        primary:     { backgroundColor: colors.primary },
+        secondary:   { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.primary },
+        text:        { backgroundColor: 'transparent' },
+        destructive: { backgroundColor: colors.destructive },
+      }[variant]
+
+  const labelColor = isDisabled
+    ? colors.foregroundMuted
+    : {
+        primary:     colors.primaryForeground,
+        secondary:   colors.primary,
+        text:        colors.accentResolved,
+        destructive: colors.destructiveForeground,
+      }[variant]
+
+  const textColor = iconColor ?? labelColor
 
   const effectiveIcon: React.ReactNode = iconName
     ? renderIcon(iconName, iconSizeMap[size], textColor)
     : typeof icon === 'function' ? icon({ label, size, variant, color: textColor }) : icon
 
-  const spinnerColor =
-    variant === 'destructive' ? colors.destructiveForeground
+  const spinnerColor = isDisabled
+    ? colors.foregroundMuted
+    : variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
     : colors.accentResolved
 
@@ -113,7 +120,6 @@ function ButtonBase({
           containerVariantStyle,
           containerSizeStyles[size],
           fullWidth && styles.fullWidth,
-          isDisabled && styles.disabled,
           restStyle,
         ]}
         enabled={!isDisabled}
@@ -130,7 +136,7 @@ function ButtonBase({
           <>
             <ActivityIndicator size="small" color={spinnerColor} style={{ marginRight: s(6) }} />
             <Text
-              style={[styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading]}
+              style={[styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading]}
               allowFontScaling={true}
               numberOfLines={1}
             >
@@ -141,7 +147,7 @@ function ButtonBase({
           <>
             {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
             <Text
-              style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
+              style={[styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}
               allowFontScaling={true}
               numberOfLines={1}
             >
@@ -167,9 +173,6 @@ const styles = StyleSheet.create({
   fullWidth: {
     width: '100%',
   },
-  disabled: {
-    opacity: 0.45,
-  },
   label: {
     fontFamily: 'Sohne-Medium',
     flexShrink: 1,

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,51 @@ 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 isPresentedRef = useRef(false)
+  const name = useId()
+
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false
+    onCancel()
+  }, [onCancel])
 
   useEffect(() => {
-    if (visible) {
+    if (visible && !isPresentedRef.current) {
       impactMedium()
-      ref.current?.snapToIndex(0)
-    } else {
-      ref.current?.close()
+      ref.current?.present()
+      wasOpened.current = true
+      isPresentedRef.current = true
+    } else if (!visible && wasOpened.current && isPresentedRef.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={handleDismiss}
       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 +105,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 +118,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 +138,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"