@retray-dev/ui-kit 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "1.6.0",
+  "version": "1.7.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

@@ -21,7 +21,15 @@ export function Alert({ title, description, variant = 'default', icon, style }:
 
   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 }]}>
+            {variant === 'destructive' ? '⚠' : 'ℹ'}
+          </Text>
+        </View>
+      )}
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]}>{title}</Text> : null}
         {description ? (
@@ -56,4 +64,8 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
   },
+  defaultIcon: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
 })

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

@@ -28,21 +28,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 },
 }
 
@@ -122,9 +122,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 +134,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/CurrencyDisplay/CurrencyDisplay.tsx

@@ -0,0 +1,46 @@
+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
+  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, style }: CurrencyDisplayProps) {
+  const { colors } = useTheme()
+  const formatted = formatValue(value, prefix, showDecimals)
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={[styles.amount, { color: 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'

package/src/components/CurrencyInputLarge/CurrencyInputLarge.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import { Input } from '../Input'
+
+export interface CurrencyInputLargeProps {
+  value?: string
+  onChangeText?: (formatted: string) => void
+  /** Called with the parsed numeric value (no separators, no prefix). */
+  onChangeValue?: (raw: number) => void
+  /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+  prefix?: string
+  /** Character used to separate groups of three digits. Defaults to `'.'`. */
+  thousandsSeparator?: '.' | ','
+  label?: string
+  /** Red helper text; also changes input border to destructive color. */
+  error?: string
+  hint?: string
+  placeholder?: string
+  editable?: boolean
+  containerStyle?: ViewStyle
+}
+
+function formatCurrency(raw: string, separator: '.' | ','): string {
+  const digits = raw.replace(/\D/g, '')
+  if (!digits) return ''
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+}
+
+export function CurrencyInputLarge({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = '$',
+  thousandsSeparator = '.',
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle,
+}: CurrencyInputLargeProps) {
+  const handleChange = (text: string) => {
+    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
+    const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
+    const display = formatted ? `${prefix}${formatted}` : ''
+    onChangeText?.(display)
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, 'g')
+    const raw = parseFloat(formatted.replace(separatorRegex, '') || '0')
+    onChangeValue?.(isNaN(raw) ? 0 : raw)
+  }
+
+  return (
+    <Input
+      value={value}
+      onChangeText={handleChange}
+      keyboardType="numeric"
+      label={label}
+      error={error}
+      hint={hint}
+      placeholder={placeholder ?? `${prefix}0`}
+      editable={editable}
+      containerStyle={containerStyle}
+      style={{ fontSize: 36 }}
+    />
+  )
+}

package/src/components/CurrencyInputLarge/index.ts

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

package/src/components/Input/Input.tsx

@@ -53,21 +53,21 @@ export function Input({ label, error, hint, containerStyle, style, onFocus, onBl
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 6,
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500',
-    marginBottom: 4,
+    marginBottom: 6,
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 16,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17,
   },
   helperText: {
-    fontSize: 12,
+    fontSize: 13,
   },
 })

package/src/components/Select/Select.tsx

@@ -163,10 +163,10 @@ export function Select({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 6,
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500',
     marginBottom: 2,
   },
@@ -175,24 +175,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
   },
   triggerText: {
-    fontSize: 16,
+    fontSize: 17,
     flex: 1,
   },
   chevron: {
-    fontSize: 14,
+    fontSize: 16,
     marginLeft: 8,
   },
   helperText: {
-    fontSize: 12,
+    fontSize: 13,
   },
   sheetBackground: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
   },
   sheetHandle: {
     width: 36,
@@ -200,32 +200,32 @@ const styles = StyleSheet.create({
     borderRadius: 2,
   },
   sheetContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 32,
+    paddingHorizontal: 20,
+    paddingBottom: 36,
   },
   sheetTitle: {
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: '600',
-    paddingVertical: 12,
+    paddingVertical: 16,
     paddingHorizontal: 4,
   },
   option: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingVertical: 14,
-    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 12,
   },
   optionText: {
-    fontSize: 15,
+    fontSize: 17,
     flex: 1,
   },
   disabledOption: {
     opacity: 0.45,
   },
   checkmark: {
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: '600',
     marginLeft: 8,
   },

package/src/components/Switch/Switch.tsx

@@ -3,9 +3,9 @@ import { TouchableOpacity, Animated, StyleSheet, ViewStyle } from 'react-native'
 import * as Haptics from 'expo-haptics'
 import { useTheme } from '../../theme'
 
-const TRACK_WIDTH = 56
-const TRACK_HEIGHT = 32
-const THUMB_SIZE = 24
+const TRACK_WIDTH = 60
+const TRACK_HEIGHT = 36
+const THUMB_SIZE = 28
 const THUMB_OFFSET = 4
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
@@ -70,10 +70,13 @@ const styles = StyleSheet.create({
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2,
-    justifyContent: 'center',
-    paddingHorizontal: THUMB_OFFSET,
+    // No justifyContent/alignItems — thumb uses absolute positioning
+    // so the track's flex layout doesn't interfere with translateX animation
   },
   thumb: {
+    position: 'absolute',
+    top: THUMB_OFFSET,
+    left: THUMB_OFFSET,
     width: THUMB_SIZE,
     height: THUMB_SIZE,
     borderRadius: THUMB_SIZE / 2,

package/src/components/Tabs/Tabs.tsx

@@ -6,6 +6,7 @@ import { useTheme } from '../../theme'
 export interface TabItem {
   label: string
   value: string
+  icon?: React.ReactNode
 }
 
 export interface TabsProps {
@@ -60,15 +61,22 @@ function TabTrigger({
       touchSoundDisabled={true}
     >
       <Animated.View style={{ transform: [{ scale }] }}>
-        <Text
-          style={[
-            styles.triggerLabel,
-            { color: isActive ? colors.foreground : colors.mutedForeground },
-            isActive && styles.activeTriggerLabel,
-          ]}
-        >
-          {tab.label}
-        </Text>
+        <View style={styles.triggerInner}>
+          {tab.icon ? (
+            <View style={styles.triggerIcon}>
+              {(typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode}
+            </View>
+          ) : null}
+          <Text
+            style={[
+              styles.triggerLabel,
+              { color: isActive ? colors.foreground : colors.mutedForeground },
+              isActive && styles.activeTriggerLabel,
+            ]}
+          >
+            {tab.label}
+          </Text>
+        </View>
       </Animated.View>
     </TouchableOpacity>
   )
@@ -133,7 +141,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
               bottom: 4,
               left: pillX,
               width: pillWidth,
-              borderRadius: 6,
+              borderRadius: 8,
               shadowColor: '#000',
               shadowOffset: { width: 0, height: 1 },
               shadowOpacity: 0.1,
@@ -172,22 +180,33 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: 8,
+    borderRadius: 12,
     padding: 4,
     gap: 4,
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
   },
+  triggerInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  triggerIcon: {
+    marginRight: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   triggerLabel: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '400',
   },
   activeTriggerLabel: {

package/src/components/Text/Text.tsx

@@ -10,12 +10,12 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: 32, fontWeight: '700', lineHeight: 44 },
-  h2: { fontSize: 24, fontWeight: '700', lineHeight: 32 },
-  h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
-  body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
-  caption: { fontSize: 12, fontWeight: '400', lineHeight: 18 },
-  label: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
+  h1: { fontSize: 40, fontWeight: '700', lineHeight: 52 },
+  h2: { fontSize: 28, fontWeight: '700', lineHeight: 36 },
+  h3: { fontSize: 22, fontWeight: '600', lineHeight: 30 },
+  body: { fontSize: 17, fontWeight: '400', lineHeight: 26 },
+  caption: { fontSize: 13, fontWeight: '400', lineHeight: 20 },
+  label: { fontSize: 15, fontWeight: '500', lineHeight: 22 },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {

package/src/components/Textarea/Textarea.tsx

@@ -41,7 +41,7 @@ export function Textarea({
             borderColor: error ? colors.destructive : focused ? colors.ring : colors.border,
             color: colors.foreground,
             backgroundColor: colors.background,
-            minHeight: rows * 28,
+            minHeight: rows * 30,
           },
           style,
         ]}
@@ -69,21 +69,21 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 4,
+    gap: 6,
   },
   label: {
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: '500',
-    marginBottom: 4,
+    marginBottom: 6,
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 16,
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    fontSize: 17,
   },
   helperText: {
-    fontSize: 12,
+    fontSize: 13,
   },
 })