@retray-dev/ui-kit 2.5.1 → 2.6.0

package/src/components/Toggle/Toggle.tsx

@@ -1,8 +1,10 @@
 import React, { useRef, useEffect } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
 import { FontAwesome5 } from '@expo/vector-icons'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
@@ -17,14 +19,30 @@ export interface ToggleProps extends TouchableOpacityProps {
   icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
   /** Icon to show when pressed/active. If omitted, a default check mark is used. */
   activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  /**
+   * Icon name from `@expo/vector-icons` shown when not pressed.
+   * See https://icons.expo.fyi. Takes precedence over `icon`.
+   */
+  iconName?: string
+  /**
+   * Icon name from `@expo/vector-icons` shown when pressed/active.
+   * See https://icons.expo.fyi. Takes precedence over `activeIcon`.
+   */
+  activeIconName?: string
+  /** Override the resolved inactive icon color. Defaults to `mutedForeground`. */
+  iconColor?: string
+  /** Override the resolved active icon color. Defaults to `primary`. */
+  activeIconColor?: string
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
-  sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
-  md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
-  lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 },
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) },
 }
 
+const iconSizeMap: Record<ToggleSize, number> = { sm: 16, md: 18, lg: 20 }
+
 export function Toggle({
   pressed = false,
   onPressedChange,
@@ -33,6 +51,10 @@ export function Toggle({
   label,
   icon,
   activeIcon,
+  iconName,
+  activeIconName,
+  iconColor,
+  activeIconColor,
   disabled,
   style,
   ...props
@@ -77,6 +99,8 @@ export function Toggle({
     outputRange: [colors.foreground, colors.primary],
   })
 
+  const iconSize = iconSizeMap[size]
+
   const LeftIcon = () => {
     const renderProp = (prop?: any) => {
       if (!prop) return null
@@ -85,23 +109,25 @@ export function Toggle({
     }
 
     if (pressed) {
+      if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary)}</>
       const active = renderProp(activeIcon)
       if (active) return <>{active}</>
-      return <FontAwesome5 name="check-circle" size={20} color={colors.primary} />
+      return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
     }
 
+    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.mutedForeground)}</>
     const custom = renderProp(icon)
     if (custom) return <>{custom}</>
 
     // Default: empty circle to signal an action is available
-    return <FontAwesome5 name="circle" size={20} color={colors.mutedForeground} />
+    return <FontAwesome5 name="circle" size={iconSize} color={colors.mutedForeground} />
   }
 
   return (
     <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
       <TouchableOpacity
         onPress={() => {
-          Haptics.selectionAsync()
+          hapticSelection()
           onPressedChange?.(!pressed)
         }}
         onPressIn={handlePressIn}
@@ -130,19 +156,19 @@ export function Toggle({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: ms(8),
   },
   inner: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
+    gap: s(8),
   },
   disabled: {
     opacity: 0.45,
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
   },
 })

package/src/index.ts

@@ -36,3 +36,7 @@ export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
 export * from './components/MonthPicker'
+
+// Icon utility
+export { Icon, renderIcon } from './utils/icons'
+export type { IconProps, IconFamily } from './utils/icons'

package/src/utils/haptics.ts

@@ -0,0 +1,32 @@
+import { Platform } from 'react-native'
+
+/**
+ * Web-safe haptics helpers. All calls are no-ops on web since expo-haptics
+ * is a native-only module and throws on web.
+ */
+
+let Haptics: typeof import('expo-haptics') | null = null
+
+if (Platform.OS !== 'web') {
+  Haptics = require('expo-haptics')
+}
+
+export function selectionAsync(): void {
+  Haptics?.selectionAsync()
+}
+
+export function impactLight(): void {
+  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+}
+
+export function impactMedium(): void {
+  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+}
+
+export function notificationSuccess(): void {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success)
+}
+
+export function notificationError(): void {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error)
+}

package/src/utils/icons.ts

@@ -0,0 +1,73 @@
+import React from 'react'
+import AntDesign from '@expo/vector-icons/AntDesign'
+import Entypo from '@expo/vector-icons/Entypo'
+import Feather from '@expo/vector-icons/Feather'
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5'
+import MaterialIcons from '@expo/vector-icons/MaterialIcons'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+export type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons'
+
+export interface IconProps {
+  /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
+  name: string
+  size: number
+  color: string
+  /** Override the resolved family when the same name exists in multiple families. */
+  family?: IconFamily
+}
+
+type ResolvedFamily = {
+  name: IconFamily
+  component: React.ComponentType<{ name: any; size: number; color: string }>
+  glyphMap: Record<string, number>
+}
+
+// Priority order: highest-priority family listed last so it overwrites lower-priority entries in the cache
+const ICON_FAMILIES: ResolvedFamily[] = [
+  { name: 'Ionicons',      component: Ionicons as any,      glyphMap: (Ionicons as any).glyphMap },
+  { name: 'MaterialIcons', component: MaterialIcons as any, glyphMap: (MaterialIcons as any).glyphMap },
+  { name: 'FontAwesome5',  component: FontAwesome5 as any,  glyphMap: (FontAwesome5 as any).glyphMap },
+  { name: 'Entypo',        component: Entypo as any,        glyphMap: (Entypo as any).glyphMap },
+  { name: 'AntDesign',     component: AntDesign as any,     glyphMap: (AntDesign as any).glyphMap },
+  { name: 'Feather',       component: Feather as any,       glyphMap: (Feather as any).glyphMap },
+]
+
+let resolvedCache: Map<string, ResolvedFamily> | null = null
+
+function buildCache(): Map<string, ResolvedFamily> {
+  const cache = new Map<string, ResolvedFamily>()
+  for (const family of ICON_FAMILIES) {
+    if (!family.glyphMap) continue
+    for (const iconName of Object.keys(family.glyphMap)) {
+      cache.set(iconName, family)
+    }
+  }
+  return cache
+}
+
+function resolveFamily(name: string): ResolvedFamily | null {
+  if (!resolvedCache) {
+    resolvedCache = buildCache()
+  }
+  return resolvedCache.get(name) ?? null
+}
+
+export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
+  let resolved: ResolvedFamily | null = null
+
+  if (family) {
+    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null
+  } else {
+    resolved = resolveFamily(name)
+  }
+
+  if (!resolved) return null
+
+  const Component = resolved.component
+  return React.createElement(Component, { name, size, color })
+}
+
+export function renderIcon(name: string, size: number, color: string): React.ReactElement | null {
+  return React.createElement(Icon, { name, size, color })
+}

package/src/utils/scaling.ts

@@ -0,0 +1,26 @@
+import { Platform } from 'react-native'
+import {
+  scale,
+  verticalScale,
+  moderateScale,
+  moderateVerticalScale,
+} from 'react-native-size-matters'
+
+/**
+ * Scaling utilities wrapping react-native-size-matters.
+ *
+ * On native: scales relative to guideline base 350×680 (~5" mobile).
+ * On web: identity functions — no scaling, values used as-is (px in web = pt on a standard display).
+ *
+ * Usage:
+ *   s(n)   — scale horizontal values  (paddingHorizontal, width, gap)
+ *   vs(n)  — scale vertical values    (paddingVertical, height, minHeight)
+ *   ms(n)  — moderate scale           (fontSize, borderRadius)
+ *   mvs(n) — moderate vertical scale  (lineHeight)
+ */
+const isWeb = Platform.OS === 'web'
+
+export const s   = isWeb ? (n: number) => n : scale
+export const vs  = isWeb ? (n: number) => n : verticalScale
+export const ms  = isWeb ? (n: number, _factor?: number) => n : moderateScale
+export const mvs = isWeb ? (n: number, _factor?: number) => n : moderateVerticalScale