@retray-dev/ui-kit 2.8.0 → 3.0.0

package/src/components/Tabs/Tabs.tsx

@@ -9,7 +9,7 @@ import { s, vs, ms } from '../../utils/scaling'
 export interface TabItem {
   label: string
   value: string
-  icon?: React.ReactNode
+  icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
 export interface TabsProps {
@@ -66,9 +66,7 @@ function TabTrigger({
       <Animated.View style={{ transform: [{ scale }] }}>
         <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>
+            (typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode
           ) : null}
           <Text
             style={[
@@ -191,9 +189,9 @@ const styles = StyleSheet.create({
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: vs(12),
-    paddingHorizontal: s(16),
-    borderRadius: ms(8),
+    paddingVertical: vs(7),
+    paddingHorizontal: s(10),
+    borderRadius: ms(6),
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
@@ -202,18 +200,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: s(8),
-  },
-  triggerIcon: {
-    marginRight: s(6),
-    alignItems: 'center',
-    justifyContent: 'center',
+    gap: s(4),
   },
   triggerLabel: {
-    fontSize: ms(15),
-    fontWeight: '400',
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(13),
   },
   activeTriggerLabel: {
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
   },
 })

package/src/components/Text/Text.tsx

@@ -11,12 +11,12 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: ms(40), fontWeight: '700', lineHeight: mvs(52) },
-  h2: { fontSize: ms(28), fontWeight: '700', lineHeight: mvs(36) },
-  h3: { fontSize: ms(22), fontWeight: '600', lineHeight: mvs(30) },
-  body: { fontSize: ms(17), fontWeight: '400', lineHeight: mvs(26) },
-  caption: { fontSize: ms(13), fontWeight: '400', lineHeight: mvs(20) },
-  label: { fontSize: ms(15), fontWeight: '500', lineHeight: mvs(22) },
+  h1:      { fontFamily: 'Poppins-Bold',     fontSize: ms(40), lineHeight: mvs(52) },
+  h2:      { fontFamily: 'Poppins-Bold',     fontSize: ms(28), lineHeight: mvs(36) },
+  h3:      { fontFamily: 'Poppins-SemiBold', fontSize: ms(22), lineHeight: mvs(30) },
+  body:    { fontFamily: 'Poppins-Regular',  fontSize: ms(17), lineHeight: mvs(26) },
+  caption: { fontFamily: 'Poppins-Regular',  fontSize: ms(13), lineHeight: mvs(20) },
+  label:   { fontFamily: 'Poppins-Medium',   fontSize: ms(15), lineHeight: mvs(22) },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {

package/src/components/Textarea/Textarea.tsx

@@ -83,17 +83,19 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontSize: ms(15),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
   },
   input: {
-    borderWidth: 1.5,
+    fontFamily: 'Poppins-Regular',
+    borderWidth: 1,
     borderRadius: ms(8),
-    paddingHorizontal: s(16),
-    paddingVertical: vs(14),
-    fontSize: ms(17),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    fontSize: ms(15),
   },
   helperText: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(13),
   },
 })

package/src/components/Toast/Toast.tsx

@@ -96,25 +96,29 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
     transform: [{ translateY: translateY.value }, { translateX: translateX.value }],
   }))
 
+  const variant = item.variant ?? 'default'
+
   const bgColor = {
     default: colors.foreground,
-    destructive: colors.destructive,
-    success: colors.success,
-  }[item.variant ?? 'default']
+    destructive: colors.destructiveBorder,
+    success: colors.successBorder,
+  }[variant]
 
   const textColor = {
     default: colors.background,
-    destructive: colors.destructiveForeground,
-    success: colors.successForeground,
-  }[item.variant ?? 'default']
+    destructive: '#991b1b',
+    success: '#166534',
+  }[variant]
+
+  const borderColor = textColor
 
   const defaultIcon =
-    item.variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={22} color={textColor} />
-    ) : item.variant === 'destructive' ? (
-      <MaterialIcons name="error-outline" size={24} color={textColor} />
+    variant === 'success' ? (
+      <FontAwesome5 name="check-circle" size={18} color={textColor} />
+    ) : variant === 'destructive' ? (
+      <AntDesign name="exclamation-circle" size={18} color={textColor} />
     ) : (
-      <Entypo name="info-with-circle" size={22} color={textColor} />
+      <Entypo name="info-with-circle" size={18} color={textColor} />
     )
 
   const leftIcon: React.ReactNode = item.iconName
@@ -123,7 +127,7 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
 
   return (
     <GestureDetector gesture={panGesture}>
-      <Animated.View style={[styles.toast, { backgroundColor: bgColor }, animatedStyle]}>
+      <Animated.View style={[styles.toast, { backgroundColor: bgColor, borderColor }, animatedStyle]}>
         <View style={styles.leftIconContainer}>{leftIcon}</View>
         <View style={styles.toastContent}>
           {item.title ? (
@@ -201,30 +205,32 @@ const styles = StyleSheet.create({
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: ms(16),
-    paddingHorizontal: s(20),
-    paddingVertical: vs(14),
+    borderRadius: ms(12),
+    borderWidth: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(12),
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.10,
     shadowRadius: 8,
-    elevation: 6,
+    elevation: 5,
   },
   toastContent: {
     flex: 1,
     gap: vs(4),
   },
   leftIconContainer: {
-    width: s(40),
+    width: s(28),
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: s(8),
+    marginRight: s(10),
   },
   toastTitle: {
+    fontFamily: 'Poppins-SemiBold',
     fontSize: ms(15),
-    fontWeight: '600',
   },
   toastDescription: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
   },
   dismissButton: {

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,7 @@
 import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
+import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing, Platform } from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
 import { FontAwesome5 } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -75,11 +77,11 @@ export function Toggle({
 
   const handlePressIn = () => {
     if (disabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, 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()
   }
 
   // Keep borderWidth constant at 2 to prevent layout jumps when pressing.
@@ -168,7 +170,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
+    fontFamily: 'Poppins-Medium',
     fontSize: ms(14),
-    fontWeight: '500',
   },
 })

package/src/fonts.ts

@@ -0,0 +1,30 @@
+/**
+ * Poppins font family required by @retray-dev/ui-kit components.
+ * 
+ * Consumer apps must load these fonts at app root using expo-font:
+ * 
+ * @example
+ * import { useFonts } from 'expo-font'
+ * import { PoppinsFonts } from '@retray-dev/ui-kit'
+ * 
+ * function App() {
+ *   const [fontsLoaded] = useFonts(PoppinsFonts)
+ *   if (!fontsLoaded) return null
+ *   // render app
+ * }
+ */
+export const PoppinsFonts = {
+  'Poppins-Thin':           require('./assets/fonts/Poppins-Thin.ttf'),
+  'Poppins-ExtraLight':     require('./assets/fonts/Poppins-ExtraLight.ttf'),
+  'Poppins-Light':          require('./assets/fonts/Poppins-Light.ttf'),
+  'Poppins-Regular':        require('./assets/fonts/Poppins-Regular.ttf'),
+  'Poppins-Medium':         require('./assets/fonts/Poppins-Medium.ttf'),
+  'Poppins-SemiBold':       require('./assets/fonts/Poppins-SemiBold.ttf'),
+  'Poppins-Bold':           require('./assets/fonts/Poppins-Bold.ttf'),
+  'Poppins-ExtraBold':      require('./assets/fonts/Poppins-ExtraBold.ttf'),
+  'Poppins-Black':          require('./assets/fonts/Poppins-Black.ttf'),
+  'Poppins-Italic':         require('./assets/fonts/Poppins-Italic.ttf'),
+  'Poppins-MediumItalic':   require('./assets/fonts/Poppins-MediumItalic.ttf'),
+  'Poppins-SemiBoldItalic': require('./assets/fonts/Poppins-SemiBoldItalic.ttf'),
+  'Poppins-BoldItalic':     require('./assets/fonts/Poppins-BoldItalic.ttf'),
+} as const

package/src/theme/colors.ts

@@ -15,32 +15,40 @@ export const defaultLight: ThemeColors = {
   accent: '#e4e4e4',
   accentForeground: '#171717',
   destructive: '#ef4444',
-  destructiveForeground: '#1a1a1a',
+  destructiveForeground: '#ffffff',
   border: '#e5e5e5',
   input: '#e5e5e5',
   ring: '#1a1a1a',
-  success: '#16a34a',
-  successForeground: '#1a1a1a',
+  success: '#1a7a45',
+  successForeground: '#ffffff',
+  destructiveTint: '#fff5f5',
+  destructiveBorder: '#fecaca',
+  successTint: '#f0fdf4',
+  successBorder: '#bbf7d0',
 }
 
 export const defaultDark: ThemeColors = {
-  background: '#171717',
+  background: '#0f0f0f',
   foreground: '#fafafa',
-  card: '#222222',
+  card: '#1c1c1c',
   cardForeground: '#fafafa',
   primary: '#fafafa',
-  primaryForeground: '#1a1a1a',
-  secondary: '#323232',
+  primaryForeground: '#0f0f0f',
+  secondary: '#272727',
   secondaryForeground: '#fafafa',
-  muted: '#323232',
-  mutedForeground: '#888888',
-  accent: '#323232',
+  muted: '#272727',
+  mutedForeground: '#9a9a9a',
+  accent: '#2e2e2e',
   accentForeground: '#fafafa',
   destructive: '#dc2626',
-  destructiveForeground: '#1a1a1a',
-  border: '#2a2a2a',
+  destructiveForeground: '#ffffff',
+  border: '#303030',
   input: '#2a2a2a',
   ring: '#fafafa',
-  success: '#22c55e',
-  successForeground: '#1a1a1a',
+  success: '#166534',
+  successForeground: '#ffffff',
+  destructiveTint: '#3b0a0a',
+  destructiveBorder: '#7f1d1d',
+  successTint: '#052e16',
+  successBorder: '#166534',
 }

package/src/theme/types.ts

@@ -18,6 +18,10 @@ export type ThemeColors = {
   ring: string
   success: string
   successForeground: string
+  destructiveTint: string
+  destructiveBorder: string
+  successTint: string
+  successBorder: string
 }
 
 // Theme overrides: consumers may supply partial or full `ThemeColors` objects