@retray-dev/ui-kit 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Button/Button.tsx

@@ -148,7 +148,7 @@ export function Button({
         ) : (
           <>
             {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
-            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}>{label}</Text>
+            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]} allowFontScaling={true}>{label}</Text>
             {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}

package/src/components/Checkbox/Checkbox.tsx

@@ -64,6 +64,7 @@ export function Checkbox({
       {label ? (
         <Text
           style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}
+          allowFontScaling={true}
         >
           {label}
         </Text>

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,147 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacityProps,
+  ViewStyle,
+  Platform,
+} from 'react-native'
+
+const nativeDriver = Platform.OS !== 'web'
+import { impactLight } from '../../utils/haptics'
+import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+
+export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+export type IconButtonSize = 'sm' | 'md' | 'lg'
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  /**
+   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
+   * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
+   */
+  iconName?: string
+  /** ReactNode icon — used when `iconName` is not provided. */
+  icon?: React.ReactNode
+  /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
+  iconColor?: string
+  variant?: IconButtonVariant
+  size?: IconButtonSize
+  /** Replaces icon with a spinner and forces `disabled`. */
+  loading?: boolean
+}
+
+const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
+  sm: { container: s(40), icon: 18 },
+  md: { container: s(44), icon: 20 },
+  lg: { container: s(52), icon: 24 },
+}
+
+export function IconButton({
+  iconName,
+  icon,
+  iconColor,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  style,
+  onPress,
+  ...props
+}: IconButtonProps) {
+  const { colors } = useTheme()
+  const isDisabled = disabled || loading
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    if (isDisabled) return
+    Animated.spring(scale, {
+      toValue: 0.95,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 0,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: nativeDriver,
+      speed: 40,
+      bounciness: 4,
+    }).start()
+  }
+
+  const handlePress: TouchableOpacityProps['onPress'] = (e) => {
+    impactLight()
+    onPress?.(e)
+  }
+
+  const containerVariantStyle: ViewStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: colors.secondary },
+    outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+    ghost: { backgroundColor: 'transparent' },
+    destructive: { backgroundColor: colors.destructive },
+  }[variant]
+
+  const defaultIconColor: string = {
+    primary: colors.primaryForeground,
+    secondary: colors.secondaryForeground,
+    outline: colors.foreground,
+    ghost: colors.foreground,
+    destructive: colors.destructiveForeground,
+  }[variant]
+
+  const spinnerColor =
+    variant === 'destructive' ? colors.destructiveForeground
+    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : colors.foreground
+
+  const { container: containerSize, icon: iconSize } = sizeMap[size]
+
+  const resolvedIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor)
+    : icon
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={[
+          styles.base,
+          containerVariantStyle,
+          { width: containerSize, height: containerSize },
+          isDisabled && styles.disabled,
+          style,
+        ]}
+        disabled={isDisabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={spinnerColor} />
+        ) : (
+          resolvedIcon
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+})

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './IconButton'

package/src/components/RadioGroup/RadioGroup.tsx

@@ -73,6 +73,7 @@ function RadioItem({
             styles.label,
             { color: option.disabled ? colors.mutedForeground : colors.foreground },
           ]}
+          allowFontScaling={true}
         >
           {option.label}
         </Text>

package/src/components/Select/Select.tsx

@@ -79,7 +79,7 @@ export function Select({
 
   return (
     <View style={[styles.container, style]}>
-      {label ? <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text> : null}
+      {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
 
       {/* Trigger button — shown on iOS and Android only */}
       {!isWeb ? (
@@ -220,7 +220,7 @@ export function Select({
       ) : null}
 
       {error ? (
-        <Text style={[styles.helperText, { color: colors.destructive }]}>{error}</Text>
+        <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
     </View>
   )

package/src/components/Sheet/Sheet.tsx

@@ -72,10 +72,10 @@ export function Sheet({
         {title || description ? (
           <View style={styles.header}>
             {title ? (
-              <Text style={[styles.title, { color: colors.cardForeground }]}>{title}</Text>
+              <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>{title}</Text>
             ) : null}
             {description ? (
-              <Text style={[styles.description, { color: colors.mutedForeground }]}>
+              <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
                 {description}
               </Text>
             ) : null}

package/src/components/Tabs/Tabs.tsx

@@ -76,6 +76,7 @@ function TabTrigger({
               { color: isActive ? colors.foreground : colors.mutedForeground },
               isActive && styles.activeTriggerLabel,
             ]}
+            allowFontScaling={true}
           >
             {tab.label}
           </Text>

package/src/components/Toast/Toast.tsx

@@ -127,10 +127,10 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
         <View style={styles.leftIconContainer}>{leftIcon}</View>
         <View style={styles.toastContent}>
           {item.title ? (
-            <Text style={[styles.toastTitle, { color: textColor }]}>{item.title}</Text>
+            <Text style={[styles.toastTitle, { color: textColor }]} allowFontScaling={true}>{item.title}</Text>
           ) : null}
           {item.description ? (
-            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]}>
+            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]} allowFontScaling={true}>
               {item.description}
             </Text>
           ) : null}

package/src/components/Toggle/Toggle.tsx

@@ -146,7 +146,7 @@ export function Toggle({
         >
           <View style={styles.inner}>
             <LeftIcon />
-            {label ? <Animated.Text style={[styles.label, { color: textColor }]}>{label}</Animated.Text> : null}
+            {label ? <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Animated.Text> : null}
           </View>
         </Animated.View>
       </TouchableOpacity>

package/src/index.ts

@@ -5,6 +5,7 @@ export { defaultLight, defaultDark } from './theme'
 
 // Components
 export * from './components/Button'
+export * from './components/IconButton'
 export * from './components/Text'
 export * from './components/Input'
 export * from './components/Badge'
@@ -40,3 +41,20 @@ export * from './components/MonthPicker'
 // Icon utility
 export { Icon, renderIcon } from './utils/icons'
 export type { IconProps, IconFamily } from './utils/icons'
+
+// Design tokens
+export {
+  SPACING,
+  ICON_SIZES,
+  RADIUS,
+  SHADOWS,
+  BREAKPOINTS,
+} from './tokens'
+export type {
+  Spacing,
+  SpacingKey,
+  IconSize,
+  IconSizeKey,
+  Radius,
+  RadiusKey,
+} from './tokens'

package/src/tokens.ts

@@ -0,0 +1,69 @@
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+} as const
+
+export const ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  '2xl': 32,
+} as const
+
+export const RADIUS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const
+
+export const SHADOWS = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 10,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 18,
+  },
+} as const
+
+export const BREAKPOINTS = {
+  wide: 700,
+} as const
+
+export type Spacing = typeof SPACING
+export type SpacingKey = keyof Spacing
+
+export type IconSize = typeof ICON_SIZES
+export type IconSizeKey = keyof IconSize
+
+export type Radius = typeof RADIUS
+export type RadiusKey = keyof Radius

package/src/utils/haptics.ts

@@ -1,32 +1,38 @@
 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.
- */
+type HapticsModule = typeof import('expo-haptics')
 
-let Haptics: typeof import('expo-haptics') | null = null
+let _haptics: HapticsModule | null = null
 
-if (Platform.OS !== 'web') {
-  Haptics = require('expo-haptics')
+async function getHaptics(): Promise<HapticsModule | null> {
+  if (Platform.OS === 'web') return null
+  if (!_haptics) {
+    _haptics = await import('expo-haptics')
+  }
+  return _haptics
 }
 
 export function selectionAsync(): void {
-  Haptics?.selectionAsync()
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.selectionAsync())
 }
 
 export function impactLight(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Light))
 }
 
 export function impactMedium(): void {
-  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Medium))
 }
 
 export function notificationSuccess(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Success))
 }
 
 export function notificationError(): void {
-  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error)
+  if (Platform.OS === 'web') return
+  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Error))
 }

package/src/components/Alert/Alert.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
-
-export type AlertBannerVariant = 'default' | 'destructive' | 'success'
-
-export interface AlertBannerProps {
-  title?: string
-  description?: string
-  variant?: AlertBannerVariant
-  icon?: React.ReactNode
-  style?: ViewStyle
-}
-
-export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
-  const { colors } = useTheme()
-
-  const borderColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.border
-
-  const titleColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.foreground
-
-  const descColor =
-    variant === 'destructive' ? colors.destructive
-    : variant === 'success' ? colors.success
-    : colors.mutedForeground
-
-  const defaultIcon =
-    variant === 'destructive' ? '⚠' : variant === 'success' ? '✓' : 'ℹ'
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      {icon ? (
-        <View style={styles.icon}>{icon}</View>
-      ) : (
-        <View style={styles.icon}>
-          <Text style={[styles.defaultIcon, { color: titleColor }]} allowFontScaling={true}>{defaultIcon}</Text>
-        </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>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderRadius: ms(8),
-    padding: s(16),
-    gap: s(12),
-  },
-  icon: {
-    marginTop: vs(2),
-  },
-  content: {
-    flex: 1,
-    gap: vs(4),
-  },
-  title: {
-    fontSize: ms(14),
-    fontWeight: '500',
-    lineHeight: mvs(20),
-  },
-  description: {
-    fontSize: ms(14),
-    lineHeight: mvs(20),
-  },
-  defaultIcon: {
-    fontSize: ms(18),
-    fontWeight: '700',
-  },
-})