@retray-dev/ui-kit 6.2.0 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "6.2.0",
+  "version": "7.0.1",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,7 +11,12 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./fonts": "./src/fonts.ts"
+    "./fonts": "./src/fonts.ts",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
   },
   "files": [
     "dist",
@@ -29,6 +34,7 @@
     "format:check": "prettier --check src",
     "lint:all": "pnpm lint && pnpm --filter retray-ui-kit-example lint",
     "format:all": "pnpm format && pnpm --filter retray-ui-kit-example format",
+    "verify": "pnpm typecheck && pnpm lint && pnpm build",
     "deploy": "pnpm typecheck && pnpm build && npm publish --access public"
   },
   "keywords": [
@@ -51,17 +57,20 @@
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=3.0.0",
     "react-native-size-matters": ">=0.4.0",
-    "react-native-worklets": ">=0.5.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-screens": ">=3.0.0"
+    "react-native-worklets": ">=0.5.0"
   },
   "pnpm": {
     "overrides": {
       "fast-xml-parser": "^5.5.7",
       "react": "19.1.0",
       "react-native": "0.81.5",
-      "react-native-worklets": "0.5.1"
+      "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"
     },
     "onlyBuiltDependencies": [
       "esbuild"
@@ -69,32 +78,32 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",
-    "react-native-size-matters": "^0.4.2",
     "@expo/vector-icons": "^15.1.1",
-    "@gorhom/bottom-sheet": "^5.0.0",
+    "@gorhom/bottom-sheet": "5.2.8",
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "19.1.17",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "expo-font": "~14.0.11",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
-    "prettier": "^3.0.0",
+    "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.2",
+    "react-native-safe-area-context": "5.6.2",
+    "react-native-screens": "4.16.0",
+    "react-native-size-matters": "^0.4.2",
+    "react-native-svg": "15.12.1",
     "react-native-worklets": "~0.5.1",
     "sonner-native": "0.23.1",
-    "react-native-svg": "15.12.1",
-    "react-native-screens": "4.16.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
-    "typescript-eslint": "^8.0.0"
+    "typescript-eslint": "^8.60.0"
   },
   "packageManager": "pnpm@11.0.8+sha512.4c4097e1dd2d42372c4e7fa5a791ff28fc75a484c7ac192e64b1df0fdef17594ba982f9b4fed9adfb3c757846f565b799b2763fb3733d1de1bcb82cf46684912"
 }

package/src/components/Accordion/Accordion.tsx

@@ -65,7 +65,7 @@ function AccordionItemComponent({
   // Keep isExpanded in sync with the parent-driven isOpen prop
   React.useEffect(() => {
     isExpanded.value = isOpen
-  }, [isOpen])
+  }, [isOpen, isExpanded])
 
   // Derived animated height — height * Number(isExpanded) gives 0 when closed and
   // the measured height when open. `withTiming` wraps it so every change animates.
@@ -190,7 +190,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   triggerText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   chevron: {
@@ -199,7 +199,7 @@ 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: {
-    paddingHorizontal: s(14),
+    paddingHorizontal: s(8),
     paddingBottom: vs(12),
     position: 'absolute',
     width: '100%',

package/src/components/AlertBanner/AlertBanner.tsx

@@ -19,13 +19,29 @@ export interface AlertBannerProps {
 }
 
 export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
-  const { colors } = useTheme()
+  const { colors, colorScheme } = useTheme()
+
+  // Match Toast richColors appearance — saturated semantic colors
+  const isDark = colorScheme === 'dark'
 
   const accentColor =
     variant === 'destructive' ? colors.destructive
     : variant === 'success'   ? colors.success
     : variant === 'warning'   ? colors.warning
-    : colors.primary
+    : colors.foreground
+
+  // Match sonner-native richColors backgrounds (more saturated than tint)
+  const bgColor =
+    variant === 'destructive' ? (isDark ? 'rgba(239, 83, 80, 0.15)' : 'rgba(199, 40, 40, 0.10)')
+    : variant === 'success'   ? (isDark ? 'rgba(46, 125, 82, 0.15)' : 'rgba(26, 122, 69, 0.10)')
+    : variant === 'warning'   ? (isDark ? 'rgba(245, 166, 35, 0.15)' : 'rgba(154, 82, 0, 0.10)')
+    : colors.surface
+
+  const borderColor =
+    variant === 'destructive' ? (isDark ? 'rgba(239, 83, 80, 0.30)' : 'rgba(199, 40, 40, 0.25)')
+    : variant === 'success'   ? (isDark ? 'rgba(46, 125, 82, 0.30)' : 'rgba(26, 122, 69, 0.25)')
+    : variant === 'warning'   ? (isDark ? 'rgba(245, 166, 35, 0.30)' : 'rgba(154, 82, 0, 0.25)')
+    : colors.border
 
   const defaultIcon =
     variant === 'success' ? (
@@ -35,6 +51,9 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     ) : variant === 'warning' ? (
       <MaterialIcons name="warning-amber" size={ms(17)} color={accentColor} />
     ) : (
+      // AUDIT FIX: default variant previously used colors.primary (near-black)
+      // as the info icon tint — ambiguous and heavy. accentResolved gives it
+      // a meaningful chromatic signal when an accent is defined.
       <Entypo name="info-with-circle" size={ms(16)} color={accentColor} />
     )
 
@@ -43,14 +62,18 @@ export function AlertBanner({ title, description, variant = 'default', icon, ico
     : icon ?? defaultIcon
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.card }, style]}>
-      {/* Icon */}
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderWidth: 1, borderColor },
+        style,
+      ]}
+    >
       <View style={styles.iconSlot}>{effectiveIcon}</View>
-      {/* Text */}
       <View style={styles.content}>
         <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
         {description ? (
-          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>{description}</Text>
+          <Text style={[styles.description, { color: colors.foreground, opacity: 0.85 }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
     </View>
@@ -63,8 +86,8 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     borderRadius: RADIUS.lg,
     gap: s(8),
-    paddingVertical: vs(8),
-    paddingHorizontal: s(10),
+    paddingVertical: vs(10),
+    paddingHorizontal: s(12),
   },
   iconSlot: {
     marginTop: vs(1),
@@ -74,13 +97,11 @@ const styles = StyleSheet.create({
     gap: vs(2),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
-    lineHeight: ms(19),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
-    lineHeight: ms(17),
   },
 })

package/src/components/Avatar/Avatar.tsx

@@ -50,7 +50,7 @@ function getInitials(fallback?: string, fallbackText?: string): string {
   return '?'
 }
 
-export function Avatar({ src, fallback, fallbackText, size = 'md', status, style }: AvatarProps) {
+function AvatarBase({ src, fallback, fallbackText, size = 'md', status, style }: AvatarProps) {
   const { colors } = useTheme()
   const [imageError, setImageError] = useState(false)
   const dimension = typeof size === 'number' ? size : sizeMap[size as AvatarSize]
@@ -111,6 +111,8 @@ export function Avatar({ src, fallback, fallbackText, size = 'md', status, style
   )
 }
 
+export const Avatar = React.memo(AvatarBase)
+
 const styles = StyleSheet.create({
   wrapper: {
     alignSelf: 'flex-start',
@@ -121,7 +123,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   fallback: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
   },
   statusDot: {
     position: 'absolute',

package/src/components/Badge/Badge.tsx

@@ -45,7 +45,7 @@ const sizeIconGap: Record<BadgeSize, number> = {
 
 const sizeIconSize: Record<BadgeSize, number> = { sm: 10, md: 12, lg: 14 }
 
-export function Badge({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
+function BadgeBase({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
   const { colors } = useTheme()
 
   const containerStyle: ViewStyle = {
@@ -92,6 +92,8 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
   )
 }
 
+export const Badge = React.memo(BadgeBase)
+
 const styles = StyleSheet.create({
   container: {
     borderRadius: 9999,
@@ -100,6 +102,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
   },
 })

package/src/components/Button/Button.tsx

@@ -17,10 +17,6 @@ import { RADIUS, TYPOGRAPHY } from '../../tokens'
 import { usePressScale } from '../../utils/usePressScale'
 import { PRESS_SCALE } from '../../utils/animations'
 
-// primary: filled primary — main CTA (pill-shaped, Airbnb-style)
-// secondary: outlined primary border — alternative actions
-// text: fully transparent — low-emphasis, in-context actions
-// destructive: filled destructive — delete/danger actions
 export type ButtonVariant = 'primary' | 'secondary' | 'text' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
@@ -36,7 +32,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   iconPosition?: 'left' | 'right'
 }
 
-// Airbnb-spec sizing: md=48px height, padding 14px vertical 24px horizontal
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
   sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
   md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
@@ -51,7 +46,7 @@ const labelSizeStyles: Record<ButtonSize, TextStyle> = {
 
 const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
 
-export function Button({
+function ButtonBase({
   label,
   variant = 'primary',
   size = 'md',
@@ -90,7 +85,10 @@ export function Button({
   const labelVariantStyle: TextStyle = {
     primary:     { color: colors.primaryForeground },
     secondary:   { color: colors.primary },
-    text:        { color: colors.foreground },
+    // 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]
 
@@ -103,9 +101,8 @@ export function Button({
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' ? colors.primaryForeground
-    : colors.foreground
+    : colors.accentResolved
 
-  // Extract flex from style for wrapper — ButtonGroup sets flex: 1
   const styleArray = Array.isArray(style) ? style : style ? [style] : []
   const flatStyle = StyleSheet.flatten(styleArray)
   const { flex, ...restStyle } = flatStyle || {}
@@ -165,9 +162,11 @@ export function Button({
   )
 }
 
+export const Button = React.memo(ButtonBase)
+
 const styles = StyleSheet.create({
   base: {
-    borderRadius: RADIUS.md,   // 14px — Airbnb-aligned rounded rect (not pill)
+    borderRadius: RADIUS.md,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -179,7 +178,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     flexShrink: 1,
   },
   labelWithIcon: {

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -33,16 +33,19 @@ export function ButtonGroup({ children, gap = 12, vertical = false, style }: But
         style,
       ]}
     >
-      {React.Children.map(children, (child) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              style: [
-                (child as React.ReactElement<any>).props.style,
-                { flex: 1 },
-              ],
-            })
-          : child,
-      )}
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const childProps = child.props as Record<string, unknown>
+        const extraProps: Record<string, unknown> = {
+          style: [(child as React.ReactElement<{ style?: unknown }>).props.style, { flex: 1 }],
+        }
+        // Horizontal ButtonGroup: default Button children to sm size to prevent
+        // oversized layout. Only applies when consumer hasn't explicitly set size.
+        if (!vertical && 'label' in childProps && childProps['size'] === undefined) {
+          extraProps['size'] = 'sm'
+        }
+        return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, extraProps)
+      })}
     </View>
   )
 }

package/src/components/Card/Card.tsx

@@ -12,39 +12,17 @@ export type CardVariant = 'elevated' | 'outlined' | 'filled'
 
 export interface CardProps {
   children: React.ReactNode
-  /** Visual style variant. `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
   variant?: CardVariant
-  /** Makes the card tappable. Adds press animation and haptic feedback. */
   onPress?: () => void
   style?: ViewStyle
-  /** Accessibility label for the card (when interactive). */
   accessibilityLabel?: string
 }
 
-export interface CardHeaderProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export interface CardTitleProps {
-  children: React.ReactNode
-  style?: TextStyle
-}
-
-export interface CardDescriptionProps {
-  children: React.ReactNode
-  style?: TextStyle
-}
-
-export interface CardContentProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
-
-export interface CardFooterProps {
-  children: React.ReactNode
-  style?: ViewStyle
-}
+export interface CardHeaderProps { children: React.ReactNode; style?: ViewStyle }
+export interface CardTitleProps { children: React.ReactNode; style?: TextStyle }
+export interface CardDescriptionProps { children: React.ReactNode; style?: TextStyle }
+export interface CardContentProps { children: React.ReactNode; style?: ViewStyle }
+export interface CardFooterProps { children: React.ReactNode; style?: ViewStyle }
 
 export function Card({ children, variant = 'elevated', onPress, style, accessibilityLabel }: CardProps) {
   const { colors } = useTheme()
@@ -64,11 +42,14 @@ export function Card({ children, variant = 'elevated', onPress, style, accessibi
   const variantStyle: ViewStyle = {
     elevated: {
       backgroundColor: colors.card,
-      borderColor: colors.border,
+      // AUDIT FIX: removed borderColor — shadow is the depth signal; a border on
+      // top of a shadow creates redundant double-framing that reads as "heavy"
+      // rather than "elevated". borderWidth: 0 overrides the base style's borderWidth: 1.
+      borderWidth: 0,
       shadowColor: '#000',
-      shadowOffset: { width: 0, height: 6 },
-      shadowOpacity: 0.10,
-      shadowRadius: 16,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.09,
+      shadowRadius: 14,
       elevation: 4,
     },
     outlined: {
@@ -124,7 +105,7 @@ export function CardTitle({ children, style }: CardTitleProps) {
 export function CardDescription({ children, style }: CardDescriptionProps) {
   const { colors } = useTheme()
   return (
-    <Text style={[styles.description, { color: colors.foregroundMuted }, style]} allowFontScaling={true}>{children}</Text>
+    <Text style={[styles.description, { color: colors.foregroundSubtle }, style]} allowFontScaling={true}>{children}</Text>
   )
 }
 
@@ -147,12 +128,14 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(16),
     lineHeight: mvs(22),
   },
+  // AUDIT FIX: was foregroundMuted (2.2:1 fail) — description text now uses
+  // foregroundSubtle (5.9:1 ✓) which is readable while still visually secondary.
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   ScrollView,
   TouchableOpacity,
@@ -42,14 +42,14 @@ export interface CategoryStripProps {
   accessibilityLabel?: string
 }
 
-function CategoryChip({
+const CategoryChip = React.memo(function CategoryChip({
   item,
   selected,
-  onPress,
+  onSelect,
 }: {
   item: CategoryItem
   selected: boolean
-  onPress: () => void
+  onSelect: (value: string) => void
 }) {
   const { colors } = useTheme()
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
@@ -76,7 +76,7 @@ function CategoryChip({
   return (
     <Animated.View style={scaleStyle} {...hoverHandlers}>
       <TouchableOpacity
-        onPress={onPress}
+        onPress={() => onSelect(item.value)}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         activeOpacity={1}
@@ -101,7 +101,7 @@ function CategoryChip({
       </TouchableOpacity>
     </Animated.View>
   )
-}
+})
 
 export function CategoryStrip({
   categories,
@@ -114,18 +114,21 @@ export function CategoryStrip({
 }: CategoryStripProps) {
   const selected = Array.isArray(value) ? value : value ? [value] : []
 
-  const handlePress = (v: string) => {
-    hapticSelection()
-    if (multiSelect) {
-      const current = Array.isArray(value) ? value : value ? [value] : []
-      const next = current.includes(v)
-        ? current.filter((x) => x !== v)
-        : [...current, v]
-      onValueChange?.(next)
-    } else {
-      onValueChange?.(v === value ? '' : v)
-    }
-  }
+  const handlePress = useCallback(
+    (v: string) => {
+      hapticSelection()
+      if (multiSelect) {
+        const current = Array.isArray(value) ? value : value ? [value] : []
+        const next = current.includes(v)
+          ? current.filter((x) => x !== v)
+          : [...current, v]
+        onValueChange?.(next)
+      } else {
+        onValueChange?.(v === value ? '' : v)
+      }
+    },
+    [multiSelect, value, onValueChange],
+  )
 
   return (
     <ScrollView
@@ -141,7 +144,7 @@ export function CategoryStrip({
           <CategoryChip
             item={cat}
             selected={selected.includes(cat.value)}
-            onPress={() => handlePress(cat.value)}
+            onSelect={handlePress}
           />
         </View>
       ))}
@@ -173,7 +176,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chipLabel: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   chipBadge: {
@@ -185,7 +188,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   chipBadgeText: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: ms(9),
     lineHeight: 14,
   },