@retray-dev/ui-kit 2.8.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,7 +10,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./fonts": "./src/fonts.ts"
   },
   "files": [
     "dist",
@@ -41,6 +42,7 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "@react-native-community/slider": ">=4.0.0",
     "@react-native-picker/picker": ">=2.0.0",
+    "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-linear-gradient": ">=13.0.0",
     "react": ">=17",
@@ -49,7 +51,7 @@
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-size-matters": ">=0.4.0",
-    "react-native-worklets": ">=0.8.0"
+    "react-native-worklets": ">=0.5.0"
   },
   "pnpm": {
     "overrides": {
@@ -74,6 +76,7 @@
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "expo-font": "~14.0.11",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
     "prettier": "^3.0.0",

package/src/components/Accordion/Accordion.tsx

@@ -83,7 +83,7 @@ function AccordionItemComponent({
   }))
 
   return (
-    <View style={[styles.item, { borderBottomColor: colors.border }]}>
+    <View style={[styles.item, { backgroundColor: colors.card, borderColor: colors.border }]}>
       <Pressable
         style={({ pressed }) => [styles.trigger, { opacity: pressed ? 0.6 : 1 }]}
         onPress={() => {
@@ -91,9 +91,9 @@ function AccordionItemComponent({
           onToggle()
         }}
       >
-        <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
+        <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
         <Animated.View style={[styles.chevron, rotationStyle]}>
-          <Entypo name="chevron-down" size={20} color={colors.foreground} />
+          <Entypo name="chevron-down" size={18} color={colors.mutedForeground} />
         </Animated.View>
       </Pressable>
 
@@ -134,7 +134,7 @@ export function Accordion({ items, type = 'single', defaultValue, style }: Accor
   }
 
   return (
-    <View style={style}>
+    <View style={[styles.list, style]}>
       {items.map((item) => (
         <AccordionItemComponent
           key={item.value}
@@ -148,18 +148,24 @@ export function Accordion({ items, type = 'single', defaultValue, style }: Accor
 }
 
 const styles = StyleSheet.create({
+  list: {
+    gap: s(6),
+  },
   item: {
-    borderBottomWidth: 1,
+    borderWidth: 1,
+    borderRadius: ms(10),
+    overflow: 'hidden',
   },
   trigger: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: vs(20),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(12),
   },
   triggerText: {
-    fontSize: ms(17),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(14),
     flex: 1,
   },
   chevron: {
@@ -168,7 +174,8 @@ const styles = StyleSheet.create({
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {
-    paddingBottom: vs(20),
+    paddingHorizontal: s(14),
+    paddingBottom: vs(12),
     position: 'absolute',
     width: '100%',
   },

package/src/components/AlertBanner/AlertBanner.tsx

@@ -25,73 +25,73 @@ export interface AlertBannerProps {
 export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
-  const borderColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.border
+  const bgColor =
+    variant === 'destructive' ? colors.destructiveBorder
+    : variant === 'success' ? colors.successBorder
+    : colors.card
 
-  const titleColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
+  const textColor =
+    variant === 'destructive' ? '#991b1b'
+    : variant === 'success' ? '#166534'
     : colors.foreground
 
-  const descColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.mutedForeground
+  const borderColor = textColor
 
   const defaultIcon =
     variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={18} color={titleColor} />
+      <FontAwesome5 name="check-circle" size={18} color={textColor} />
     ) : variant === 'destructive' ? (
-      <MaterialIcons name="error-outline" size={20} color={titleColor} />
+      <MaterialIcons name="error-outline" size={20} color={textColor} />
     ) : (
-      <Entypo name="info-with-circle" size={18} color={titleColor} />
+      <Entypo name="info-with-circle" size={18} color={textColor} />
     )
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, 18, iconColor ?? titleColor)
+    ? renderIcon(iconName, 18, iconColor ?? textColor)
     : icon ?? defaultIcon
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      <View style={styles.icon}>{effectiveIcon}</View>
-      <View style={styles.content}>
-        {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
-        {description ? (
-          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{description}</Text>
-        ) : null}
+    <View style={[styles.container, { backgroundColor: bgColor, borderColor }, style]}>
+      <View style={styles.header}>
+        <View style={styles.icon}>{effectiveIcon}</View>
+        {title ? <Text style={[styles.title, { color: textColor }]} allowFontScaling={true}>{title}</Text> : null}
       </View>
+      {description ? (
+        <Text style={[styles.description, { color: textColor, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
+      ) : null}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
     borderWidth: 1,
     borderRadius: ms(12),
-    padding: s(16),
-    gap: s(12),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(12),
+    gap: vs(8),
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.06,
-    shadowRadius: 12,
-    elevation: 3,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.10,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(10),
   },
   icon: {
     marginTop: 0,
   },
-  content: {
-    flex: 1,
-    gap: vs(4),
-  },
   title: {
-    fontSize: ms(14),
-    fontWeight: '500',
+    fontFamily: 'Poppins-Bold',
+    fontSize: ms(15),
     lineHeight: mvs(20),
+    flex: 1,
   },
   description: {
+    fontFamily: 'Poppins-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Avatar/Avatar.tsx

@@ -68,6 +68,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   fallback: {
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
   },
 })

package/src/components/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
-export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps {
@@ -53,6 +53,10 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
     secondary: { backgroundColor: colors.secondary },
     destructive: { backgroundColor: colors.destructive },
     outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border },
+    success: { backgroundColor: colors.success },
+    warning: { backgroundColor: '#f59e0b', },
+    successOutline: { backgroundColor: colors.successTint, borderWidth: 1, borderColor: colors.successBorder },
+    destructiveOutline: { backgroundColor: colors.destructiveTint, borderWidth: 1, borderColor: colors.destructiveBorder },
   }[variant]
 
   const textColor = {
@@ -60,6 +64,10 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
     secondary: colors.secondaryForeground,
     destructive: colors.destructiveForeground,
     outline: colors.foreground,
+    success: colors.successForeground,
+    warning: '#ffffff',
+    successOutline: colors.success,
+    destructiveOutline: colors.destructive,
   }[variant]
 
   const effectiveIcon: React.ReactNode = iconName
@@ -70,7 +78,7 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
 
   return (
     <View style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}>
-      {effectiveIcon ? <View style={styles.iconContainer}>{effectiveIcon}</View> : null}
+      {effectiveIcon}
       {typeof content === 'string' ? (
         <Text style={[styles.label, { color: textColor }, sizeFontSize[size]]} allowFontScaling={true}>
           {content}
@@ -84,16 +92,12 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: ms(6),
+    borderRadius: 9999,
     alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',
   },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   label: {
-    fontWeight: '500',
+    fontFamily: 'Poppins-Medium',
   },
 })

package/src/components/Button/Button.tsx

@@ -48,15 +48,15 @@ export interface ButtonProps extends TouchableOpacityProps {
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: s(20), paddingVertical: vs(10) },
-  md: { paddingHorizontal: s(24), paddingVertical: vs(14) },
-  lg: { paddingHorizontal: s(32), paddingVertical: vs(18) },
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(10), minHeight: 44 },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 44 },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(12), minHeight: 48 },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
-  sm: { fontSize: ms(15) },
-  md: { fontSize: ms(17) },
-  lg: { fontSize: ms(18) },
+  sm: { fontSize: ms(13) },
+  md: { fontSize: ms(15) },
+  lg: { fontSize: ms(16) },
 }
 
 const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
@@ -159,7 +159,7 @@ export function Button({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 999,
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -171,7 +171,7 @@ const styles = StyleSheet.create({
     opacity: 0.5,
   },
   label: {
-    fontWeight: '600',
+    fontFamily: 'Poppins-SemiBold',
   },
   labelWithIcon: {
     marginHorizontal: s(8),

package/src/components/Card/Card.tsx

@@ -151,24 +151,27 @@ const styles = StyleSheet.create({
     borderWidth: 1,
   },
   header: {
-    padding: s(24),
+    padding: s(16),
     paddingBottom: 0,
-    gap: vs(8),
+    gap: vs(4),
   },
   title: {
-    fontSize: ms(20),
-    fontWeight: '600',
-    lineHeight: mvs(28),
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: ms(16),
+    lineHeight: mvs(22),
   },
   description: {
-    fontSize: ms(15),
-    lineHeight: mvs(22),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
   },
   content: {
-    padding: s(24),
+    padding: s(16),
+    paddingTop: s(12),
   },
   footer: {
-    padding: s(24),
+    paddingHorizontal: s(16),
+    paddingBottom: vs(14),
     paddingTop: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Checkbox/Checkbox.tsx

@@ -30,11 +30,10 @@ export function Checkbox({
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
     <TouchableOpacity
       style={[styles.row, style]}
       onPress={() => {
@@ -47,20 +46,21 @@ export function Checkbox({
       activeOpacity={1}
       touchSoundDisabled={true}
     >
-      <View
+      <Animated.View
         style={[
           styles.box,
           {
             borderColor: checked ? colors.primary : colors.border,
             backgroundColor: checked ? colors.primary : 'transparent',
             opacity: disabled ? 0.45 : 1,
+            transform: [{ scale }],
           },
         ]}
       >
         {checked ? (
           <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
         ) : null}
-      </View>
+      </Animated.View>
       {label ? (
         <Text
           style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}
@@ -70,7 +70,6 @@ export function Checkbox({
         </Text>
       ) : null}
     </TouchableOpacity>
-    </Animated.View>
   )
 }
 
@@ -83,7 +82,7 @@ const styles = StyleSheet.create({
   box: {
     width: s(24),
     height: s(24),
-    borderRadius: ms(8),
+    borderRadius: ms(4),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
@@ -96,7 +95,8 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontSize: ms(15),
-    lineHeight: mvs(22),
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
 })

package/src/components/Chip/Chip.tsx

@@ -12,6 +12,7 @@ import {
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -19,6 +20,10 @@ export interface ChipProps {
   label: string
   selected?: boolean
   onPress?: () => void
+  /** JSX icon rendered before the label. */
+  icon?: React.ReactNode
+  /** Icon name from @expo/vector-icons resolved automatically. */
+  iconName?: string
   style?: ViewStyle
 }
 
@@ -36,7 +41,7 @@ export interface ChipGroupProps {
   style?: ViewStyle
 }
 
-export function Chip({ label, selected = false, onPress, style }: ChipProps) {
+export function Chip({ label, selected = false, onPress, icon, iconName, style }: ChipProps) {
   const { colors } = useTheme()
   const scale = useRef(new Animated.Value(1)).current
   const pressAnim = useRef(new Animated.Value(selected ? 1 : 0)).current
@@ -88,6 +93,10 @@ export function Chip({ label, selected = false, onPress, style }: ChipProps) {
     outputRange: [colors.border, colors.primary],
   })
 
+  const resolvedIcon = iconName
+    ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground)
+    : icon
+
   return (
     <Animated.View style={[styles.wrapper, { transform: [{ scale }] }, style]}>
       <TouchableOpacity
@@ -98,6 +107,7 @@ export function Chip({ label, selected = false, onPress, style }: ChipProps) {
         touchSoundDisabled={true}
       >
         <Animated.View style={[styles.chip, { backgroundColor, borderColor }]}>
+          {resolvedIcon ? <View style={styles.chipIcon}>{resolvedIcon}</View> : null}
           <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>
             {label}
           </Animated.Text>
@@ -156,15 +166,21 @@ const styles = StyleSheet.create({
   chip: {
     borderRadius: 999,
     paddingHorizontal: s(14),
-    paddingVertical: vs(8),
-    borderWidth: 1.5,
+    paddingVertical: vs(5),
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: s(5),
+  },
+  chipIcon: {
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontSize: ms(14),
-    fontWeight: '500',
-    lineHeight: mvs(20),
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
   },
   group: {
     flexDirection: 'row',