@retray-dev/ui-kit 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -52,7 +52,7 @@
       "fast-xml-parser": "^5.5.7",
       "react": "19.1.0",
       "react-native": "0.81.5",
-      "react-native-worklets": "0.8.1"
+      "react-native-worklets": "0.5.1"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -62,12 +62,12 @@
     "@gorhom/bottom-sheet": "^5.0.0",
     "@types/react": "^19.1.0",
     "expo-haptics": "~15.0.8",
-    "expo-linear-gradient": "~14.1.5",
-    "react": "18.2.0",
-    "react-native": "0.74.0",
-    "react-native-gesture-handler": "~2.30.0",
-    "react-native-reanimated": "~4.3.0",
-    "react-native-worklets": "~0.8.1",
+    "expo-linear-gradient": "~15.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-worklets": "~0.5.1",
     "react-native-safe-area-context": "~5.6.2",
     "eslint": "^9.0.0",
     "@eslint/js": "^9.0.0",

package/src/components/Accordion/Accordion.tsx

@@ -154,19 +154,19 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 16,
+    paddingVertical: 20,
   },
   triggerText: {
-    fontSize: 15,
+    fontSize: 17,
     fontWeight: '500',
     flex: 1,
   },
   chevron: {
-    fontSize: 16,
+    fontSize: 18,
     marginLeft: 8,
   },
   content: {
-    paddingBottom: 16,
+    paddingBottom: 20,
     position: 'absolute',
     width: '100%',
   },

package/src/components/Alert/Alert.tsx

@@ -2,26 +2,46 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 
-export type AlertVariant = 'default' | 'destructive'
+export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
-export interface AlertProps {
+export interface AlertBannerProps {
   title?: string
   description?: string
-  variant?: AlertVariant
+  variant?: AlertBannerVariant
   icon?: React.ReactNode
   style?: ViewStyle
 }
 
-export function Alert({ title, description, variant = 'default', icon, style }: AlertProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
-  const borderColor = variant === 'destructive' ? colors.destructive : colors.border
-  const titleColor = variant === 'destructive' ? colors.destructive : colors.foreground
-  const descColor = variant === 'destructive' ? colors.destructive : colors.mutedForeground
+  const borderColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.border
+
+  const titleColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.foreground
+
+  const descColor =
+    variant === 'destructive' ? colors.destructive
+    : variant === 'success' ? colors.success
+    : colors.mutedForeground
+
+  const defaultIcon =
+    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
 
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      {icon ? <View style={styles.icon}>{icon}</View> : null}
+      {icon ? (
+        <View style={styles.icon}>{icon}</View>
+      ) : (
+        <View style={styles.icon}>
+          <Text style={[styles.defaultIcon, { color: titleColor }]}>{defaultIcon}</Text>
+        </View>
+      )}
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]}>{title}</Text> : null}
         {description ? (
@@ -56,4 +76,8 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
   },
+  defaultIcon: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
 })

package/src/components/Alert/index.ts

@@ -1,2 +1,2 @@
-export { Alert } from './Alert'
-export type { AlertProps, AlertVariant } from './Alert'
+export { AlertBanner } from './Alert'
+export type { AlertBannerProps, AlertBannerVariant } from './Alert'

package/src/components/Avatar/Avatar.tsx

@@ -14,17 +14,17 @@ export interface AvatarProps {
 }
 
 const sizeMap: Record<AvatarSize, number> = {
-  sm: 24,
-  md: 32,
-  lg: 48,
-  xl: 64,
+  sm: 28,
+  md: 40,
+  lg: 56,
+  xl: 72,
 }
 
 const fontSizeMap: Record<AvatarSize, number> = {
-  sm: 10,
-  md: 13,
-  lg: 18,
-  xl: 24,
+  sm: 12,
+  md: 16,
+  lg: 22,
+  xl: 28,
 }
 
 export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {

package/src/components/Badge/Badge.tsx

@@ -36,13 +36,13 @@ export function Badge({ label, variant = 'default', style }: BadgeProps) {
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
     alignSelf: 'flex-start',
   },
   label: {
-    fontSize: 12,
+    fontSize: 13,
     fontWeight: '500',
   },
 })

package/src/components/Button/Button.tsx

@@ -8,11 +8,14 @@ import {
   TouchableOpacityProps,
   ViewStyle,
   TextStyle,
+  Platform,
 } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -28,21 +31,21 @@ export interface ButtonProps extends TouchableOpacityProps {
   /** Replaces the label with a spinner and forces `disabled`. */
   loading?: boolean
   fullWidth?: boolean
-  /** Icon rendered alongside the label. */
-  icon?: React.ReactNode
+  /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
+  icon?: React.ReactNode | ((props: { label: string; size: ButtonSize; variant: ButtonVariant }) => React.ReactNode)
   /** Side the icon appears on. Defaults to `'left'`. */
   iconPosition?: 'left' | 'right'
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: 16, paddingVertical: 10 },
-  md: { paddingHorizontal: 20, paddingVertical: 14 },
-  lg: { paddingHorizontal: 28, paddingVertical: 18 },
+  sm: { paddingHorizontal: 20, paddingVertical: 12 },
+  md: { paddingHorizontal: 24, paddingVertical: 16 },
+  lg: { paddingHorizontal: 32, paddingVertical: 20 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
-  sm: { fontSize: 14 },
-  md: { fontSize: 16 },
+  sm: { fontSize: 15 },
+  md: { fontSize: 17 },
   lg: { fontSize: 18 },
 }
 
@@ -67,14 +70,14 @@ export function Button({
     if (isDisabled) return
     Animated.spring(scale, {
       toValue: 0.95,
-      useNativeDriver: true,
+      useNativeDriver: nativeDriver,
       speed: 40,
       bounciness: 0,
     }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
@@ -87,6 +90,7 @@ export function Button({
     secondary: { backgroundColor: colors.secondary },
     outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
     ghost: { backgroundColor: 'transparent' },
+    destructive: { backgroundColor: colors.destructive },
   }[variant]
 
   const labelVariantStyle: TextStyle = {
@@ -94,10 +98,13 @@ export function Button({
     secondary: { color: colors.secondaryForeground },
     outline: { color: colors.foreground },
     ghost: { color: colors.foreground },
+    destructive: { color: colors.destructiveForeground },
   }[variant]
 
   const spinnerColor =
-    variant === 'primary' || variant === 'secondary' ? colors.primaryForeground : colors.foreground
+    variant === 'destructive' ? colors.destructiveForeground
+    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : colors.foreground
 
   return (
     <Animated.View style={[fullWidth && styles.fullWidth, { transform: [{ scale }] }]}>
@@ -122,9 +129,9 @@ export function Button({
           <ActivityIndicator size="small" color={spinnerColor} />
         ) : (
           <>
-            {icon && iconPosition === 'left' && <>{icon}</>}
+            {icon && iconPosition === 'left' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
             <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : undefined]}>{label}</Text>
-            {icon && iconPosition === 'right' && <>{icon}</>}
+            {icon && iconPosition === 'right' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
           </>
         )}
       </TouchableOpacity>
@@ -134,7 +141,7 @@ export function Button({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: 999,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',

package/src/components/Card/Card.tsx

@@ -69,7 +69,7 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 12,
+    borderRadius: 20,
     borderWidth: 1,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
@@ -78,24 +78,24 @@ const styles = StyleSheet.create({
     elevation: 1,
   },
   header: {
-    padding: 24,
+    padding: 28,
     paddingBottom: 0,
-    gap: 6,
+    gap: 8,
   },
   title: {
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '600',
-    lineHeight: 24,
+    lineHeight: 28,
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: 15,
+    lineHeight: 22,
   },
   content: {
-    padding: 24,
+    padding: 28,
   },
   footer: {
-    padding: 24,
+    padding: 28,
     paddingTop: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Checkbox/Checkbox.tsx

@@ -74,25 +74,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
+    gap: 12,
   },
   box: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
+    width: 28,
+    height: 28,
+    borderRadius: 8,
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkmark: {
-    width: 13,
-    height: 8,
+    width: 15,
+    height: 9,
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: 15,
+    lineHeight: 22,
   },
 })

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  Platform,
+  Easing,
+} from 'react-native'
+import * as Haptics from 'expo-haptics'
+import { useTheme } from '../../theme'
+
+const nativeDriver = Platform.OS !== 'web'
+
+export interface ChipProps {
+  label: string
+  selected?: boolean
+  onPress?: () => void
+  style?: ViewStyle
+}
+
+export interface ChipOption {
+  label: string
+  value: string | number
+}
+
+export interface ChipGroupProps {
+  options: ChipOption[]
+  value?: string | number
+  onValueChange?: (value: string | number) => void
+  style?: ViewStyle
+}
+
+export function Chip({ label, selected = false, onPress, style }: ChipProps) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+  const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(pressAnim, {
+      toValue: selected ? 1 : 0,
+      duration: 150,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start()
+  }, [selected, pressAnim])
+
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress = () => {
+    Haptics.selectionAsync()
+    onPress?.()
+  }
+
+  const backgroundColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.secondary, colors.primary],
+  })
+
+  const textColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.foreground, colors.primaryForeground],
+  })
+
+  const borderColor = pressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary],
+  })
+
+  return (
+    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }, style]}>
+      <TouchableOpacity
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        <Animated.View style={[styles.chip, { backgroundColor, borderColor }]}>
+          <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>
+            {label}
+          </Animated.Text>
+        </Animated.View>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+export function ChipGroup({ options, value, onValueChange, style }: ChipGroupProps) {
+  return (
+    <View style={[styles.group, style]}>
+      {options.map((opt) => (
+        <Chip
+          key={opt.value}
+          label={opt.label}
+          selected={opt.value === value}
+          onPress={() => onValueChange?.(opt.value)}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {},
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  group: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+})

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip, ChipGroup } from './Chip'
+export type { ChipProps, ChipOption, ChipGroupProps } from './Chip'

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import { useTheme } from '../../theme'
+import { Button } from '../Button'
+
+export interface ConfirmDialogProps {
+  visible: boolean
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmVariant?: 'primary' | 'destructive'
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmDialog({
+  visible,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmVariant = 'primary',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const { colors } = useTheme()
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
+      <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onCancel}>
+        <View
+          style={[styles.dialog, { backgroundColor: colors.card }]}
+          onStartShouldSetResponder={() => true}
+        >
+          <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>
+            {title}
+          </Text>
+          {description ? (
+            <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+          <View style={styles.actions}>
+            <Button label={cancelLabel} variant="outline" fullWidth onPress={onCancel} />
+            <Button label={confirmLabel} variant={confirmVariant} fullWidth onPress={onConfirm} />
+          </View>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  dialog: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: 16,
+    padding: 24,
+    gap: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    lineHeight: 26,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  actions: {
+    gap: 10,
+    marginTop: 8,
+  },
+})

package/src/components/ConfirmDialog/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps } from './ConfirmDialog'

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+
+export interface CurrencyDisplayProps {
+  value: number | string
+  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+  prefix?: string
+  /** When true, shows two decimal places separated by a comma (e.g. `$25.000,00`). Defaults to `false`. */
+  showDecimals?: boolean
+  /** Override the color of the formatted text. Defaults to the `foreground` theme token. */
+  textColor?: string
+  style?: ViewStyle
+}
+
+function formatValue(value: number | string, prefix: string, showDecimals: boolean): string {
+  const num = typeof value === 'string' ? parseFloat(value.replace(/[^0-9.-]/g, '')) : value
+  if (isNaN(num)) return `${prefix}0`
+  const abs = Math.abs(num)
+  const sign = num < 0 ? '-' : ''
+  const intPart = Math.floor(abs).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+  if (showDecimals) {
+    const decStr = (abs % 1).toFixed(2).slice(2)
+    return `${sign}${prefix}${intPart},${decStr}`
+  }
+  return `${sign}${prefix}${intPart}`
+}
+
+export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, textColor, style }: CurrencyDisplayProps) {
+  const { colors } = useTheme()
+  const formatted = formatValue(value, prefix, showDecimals)
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={[styles.amount, { color: textColor ?? colors.foreground }]} allowFontScaling={true}>
+        {formatted}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  amount: {
+    fontSize: 56,
+    fontWeight: '700',
+  },
+})

package/src/components/CurrencyDisplay/index.ts

@@ -0,0 +1 @@
+export * from './CurrencyDisplay'