@retray-dev/ui-kit 7.0.1 → 9.1.0

package/src/components/TabBar/TabBar.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+
+export interface TabBarItem {
+  /** Unique key for the tab. */
+  key: string
+  /** Label under the icon. Omit for an icon-only tab. */
+  label?: string
+  /** Icon name (active + inactive share the name; color signals state). */
+  iconName?: string
+  /** Custom icon node — receives no state, overrides `iconName`. */
+  icon?: React.ReactNode
+  /** Badge overlay — `true` shows a dot, a number shows a count (capped at 99). */
+  badge?: boolean | number
+}
+
+export interface TabBarProps {
+  items: TabBarItem[]
+  /** Key of the active tab. */
+  activeKey: string
+  onTabPress: (key: string) => void
+  /** Active tint. Defaults to theme `primary`. */
+  activeColor?: string
+  /** Inactive tint. Defaults to theme `foregroundMuted`. */
+  inactiveColor?: string
+  /** Apply the bottom safe-area inset as padding. Defaults to true. */
+  withSafeArea?: boolean
+  style?: ViewStyle
+}
+
+/**
+ * Bottom tab bar — icon + label tabs with active tint and badge support. Pair
+ * with your navigator, or drive it with local state for a single-screen app.
+ *
+ * @example
+ * <TabBar
+ *   items={[{ key: 'home', label: 'Home', iconName: 'home' }, { key: 'profile', label: 'Profile', iconName: 'user', badge: 3 }]}
+ *   activeKey={tab}
+ *   onTabPress={setTab}
+ * />
+ */
+export function TabBar({
+  items,
+  activeKey,
+  onTabPress,
+  activeColor,
+  inactiveColor,
+  withSafeArea = true,
+  style,
+}: TabBarProps) {
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const resolvedActive = activeColor ?? colors.primary
+  const resolvedInactive = inactiveColor ?? colors.foregroundMuted
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          paddingBottom: withSafeArea ? insets.bottom : 0,
+        },
+        style,
+      ]}
+      accessibilityRole="tablist"
+    >
+      {items.map((item) => {
+        const active = item.key === activeKey
+        const tint = active ? resolvedActive : resolvedInactive
+        const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), tint) : null)
+        const showBadge = item.badge !== undefined && item.badge !== false
+        const badgeCount = typeof item.badge === 'number' ? item.badge : undefined
+
+        return (
+          <TouchableOpacity
+            key={item.key}
+            style={styles.tab}
+            onPress={() => {
+              if (!active) hapticSelection()
+              onTabPress(item.key)
+            }}
+            activeOpacity={0.7}
+            touchSoundDisabled={true}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active }}
+            accessibilityLabel={item.label ?? item.key}
+          >
+            <View>
+              {iconNode}
+              {showBadge ? (
+                <View
+                  style={[
+                    styles.badge,
+                    { backgroundColor: colors.destructive, borderColor: colors.card },
+                    badgeCount === undefined && styles.badgeDot,
+                  ]}
+                >
+                  {badgeCount !== undefined ? (
+                    <Text style={[styles.badgeText, { color: colors.destructiveForeground }]} allowFontScaling={false}>
+                      {badgeCount > 99 ? '99+' : badgeCount}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+            {item.label ? (
+              <Text style={[styles.label, { color: tint }]} numberOfLines={1} allowFontScaling={true}>
+                {item.label}
+              </Text>
+            ) : null}
+          </TouchableOpacity>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: vs(8),
+    paddingBottom: vs(6),
+    gap: vs(2),
+    minHeight: vs(48),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(11),
+    lineHeight: mvs(14),
+  },
+  badge: {
+    position: 'absolute',
+    top: -vs(4),
+    right: -s(10),
+    minWidth: s(16),
+    height: s(16),
+    borderRadius: s(8),
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(3),
+  },
+  badgeDot: {
+    minWidth: s(10),
+    height: s(10),
+    borderRadius: s(5),
+    top: -vs(2),
+    right: -s(6),
+    paddingHorizontal: 0,
+  },
+  badgeText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(9),
+    lineHeight: ms(11),
+  },
+})

package/src/components/TabBar/index.ts

@@ -0,0 +1 @@
+export * from './TabBar'

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react'
-import { View, TouchableOpacity, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,8 +8,8 @@ import Animated, {
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { SPRINGS } from '../../utils/animations'
+import { PressableTab } from '../../utils/pressable'
 
 export interface TabItem {
   label: string
@@ -49,29 +49,23 @@ function TabTrigger({
   variant: TabsVariant
 }) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-  })
   const isUnderline = variant === 'underline'
 
   return (
-    <TouchableOpacity
-      style={[
-        styles.trigger,
-        isUnderline && styles.triggerUnderline,
-        isUnderline && isActive && { borderBottomColor: colors.primary },
-      ]}
-      onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onLayout={onLayout}
-      activeOpacity={1}
-      touchSoundDisabled={true}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isActive }}
-      accessibilityLabel={tab.label}
-    >
-      <Animated.View style={animatedStyle}>
+    <View onLayout={onLayout} style={styles.triggerWrap}>
+      <PressableTab
+        style={[
+          styles.trigger,
+          isUnderline && styles.triggerUnderline,
+          isUnderline && isActive && { borderBottomColor: colors.primary },
+        ]}
+        onPress={onPress}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="tab"
+        accessibilityState={{ selected: isActive }}
+        accessibilityLabel={tab.label}
+      >
         <View style={styles.triggerInner}>
           {tab.icon ? (
             typeof tab.icon === 'function' ? tab.icon(isActive) : tab.icon
@@ -90,8 +84,8 @@ function TabTrigger({
             {tab.label}
           </Text>
         </View>
-      </Animated.View>
-    </TouchableOpacity>
+      </PressableTab>
+    </View>
   )
 }
 
@@ -207,6 +201,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   pill: {},
+  triggerWrap: {
+    flex: 1,
+  },
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
@@ -217,7 +214,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   triggerUnderline: {
-    flex: 0,
+    flex: 1,
     paddingVertical: vs(12),
     paddingHorizontal: s(16),
     borderRadius: 0,

package/src/components/Text/Text.tsx

@@ -3,6 +3,7 @@ import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-nativ
 import { useTheme } from '../../theme'
 import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
+import { warnIfFontsMissing } from '../../utils/fontGuard'
 
 export type TextVariant =
   | 'display-hero'
@@ -68,6 +69,7 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
 }
 
 function TextBase({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+  warnIfFontsMissing()
   const { colors } = useTheme()
 
   const colorKey = defaultColorVariant[variant] ?? 'foreground'

package/src/components/Toggle/Toggle.tsx

@@ -1,17 +1,13 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet, TouchableOpacityProps, ViewStyle, View } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-} from 'react-native-reanimated'
+import { StyleSheet, ViewStyle, View, Text } from 'react-native'
+import { EaseView } from 'react-native-ease'
 import { FontAwesome5 } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { PRESS_SCALE } from '../../utils/animations'
+import { COLOR_TRANSITION } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 interface ToggleIconProps {
   pressed: boolean
@@ -50,7 +46,7 @@ function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconC
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
 
-export interface ToggleProps extends TouchableOpacityProps {
+export interface ToggleProps {
   pressed?: boolean
   onPressedChange?: (pressed: boolean) => void
   variant?: ToggleVariant
@@ -74,6 +70,9 @@ export interface ToggleProps extends TouchableOpacityProps {
   iconColor?: string
   /** Override the resolved active icon color. Defaults to `primary`. */
   activeIconColor?: string
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
@@ -99,55 +98,37 @@ export function Toggle({
   disabled,
   style,
   accessibilityLabel,
-  ...props
 }: ToggleProps) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled,
-  })
-  const progress = useColorTransition(pressed)
 
   const inactiveBorder = variant === 'outline' ? colors.border : 'transparent'
 
-  const surfaceStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
-    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.surfaceStrong]),
-  }))
-
-  const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary]),
-  }))
-
   const iconSize = iconSizeMap[size]
 
+  const handlePress = () => {
+    hapticSelection()
+    onPressedChange?.(!pressed)
+  }
+
   return (
-    <Animated.View
-      style={[scaleStyle, disabled && styles.disabled, style]}
-      {...hoverHandlers}
-    >
-      <TouchableOpacity
-        onPress={() => {
-          hapticSelection()
-          onPressedChange?.(!pressed)
-        }}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+    <View style={[disabled && styles.disabled, style]}>
+      <PressableButton
+        onPress={handlePress}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? label}
         accessibilityState={{ selected: pressed, disabled: !!disabled }}
-        {...props}
       >
-        <Animated.View
-          style={[
-            styles.base,
-            sizeStyles[size],
-            { borderWidth: 2 },
-            surfaceStyle,
-          ]}
+        <EaseView
+          style={[styles.base, sizeStyles[size], { borderWidth: 2 }]}
+          animate={{
+            borderColor: pressed ? colors.primary : inactiveBorder,
+            backgroundColor: pressed ? colors.surfaceStrong : 'transparent',
+          }}
+          transition={COLOR_TRANSITION}
         >
           <View style={styles.inner}>
             <ToggleIcon
@@ -163,14 +144,17 @@ export function Toggle({
               mutedColor={colors.foregroundMuted}
             />
             {label ? (
-              <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
+              <Text
+                style={[styles.label, { color: pressed ? colors.primary : colors.foreground }]}
+                allowFontScaling={true}
+              >
                 {label}
-              </Animated.Text>
+              </Text>
             ) : null}
           </View>
-        </Animated.View>
-      </TouchableOpacity>
-    </Animated.View>
+        </EaseView>
+      </PressableButton>
+    </View>
   )
 }
 

package/src/fonts.ts

@@ -13,7 +13,10 @@
  *   // render app
  * }
  */
-/* eslint-disable @typescript-eslint/no-require-imports */
+// `.otf` assets resolve to a Metro asset module id (number) via require() at the
+// consumer's build time. Declared locally so the dts build does not depend on @types/node.
+declare const require: (path: string) => number
+
 export const SohneFonts = {
   // Sohne base
   'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),

package/src/index.ts

@@ -31,8 +31,6 @@ export * from './components/Select'
 export * from './components/Toast'
 export * from './components/CurrencyInput'
 export * from './components/CurrencyDisplay'
-// CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
-export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
 export * from './components/ListGroup'
 export * from './components/MenuItem'
@@ -47,6 +45,17 @@ export * from './components/Pressable'
 export * from './components/DetailRow'
 export * from './components/Form'
 export * from './components/VirtualList'
+export * from './components/RetrayProvider'
+export * from './components/ErrorBoundary'
+export * from './components/PagerDots'
+export * from './components/AppHeader'
+export * from './components/SelectableGrid'
+export * from './components/PricingCard'
+export * from './components/TabBar'
+export * from './components/ImageViewer'
+// HolographicCard is intentionally NOT re-exported here — it depends on the
+// optional peer @shopify/react-native-skia, so it must stay out of the main
+// barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
 
 // Icon utility
 export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
@@ -55,6 +64,18 @@ export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
 export { getResponsiveFontSize } from './utils/typography'
 export type { IconProps, IconFamily } from './utils/icons'
 
+// Haptic feedback utilities
+export {
+  selectionAsync,
+  impactLight,
+  impactMedium,
+  impactHeavy,
+  notificationSuccess,
+  notificationError,
+  notificationWarning,
+  richHaptics,
+} from './utils/haptics'
+
 // Design tokens
 export {
   SPACING,

package/src/utils/animations.ts

@@ -1,4 +1,5 @@
 import { Easing } from 'react-native-reanimated'
+import type { SingleTransition } from 'react-native-ease'
 
 // ─── Spring presets ──────────────────────────────────────────────────────────
 // Tuned for the "Apple HIG / Airbnb" press-feel: snap inward fast, settle out elastically.
@@ -17,7 +18,7 @@ export const SPRINGS = {
   surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
 
   /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
-  glide: { stiffness: 380, damping: 38, mass: 1.0 },
+  glide: { stiffness: 380, damping: 38, mass: 1 },
 
   /** Elastic indicator — Switch thumb, RadioGroup dot. */
   elastic: { stiffness: 320, damping: 22, mass: 0.7 },
@@ -48,6 +49,33 @@ export const EASINGS = {
   collapse: Easing.in(Easing.ease),
 } as const
 
+// ─── EaseView transition presets ─────────────────────────────────────────────
+// Equivalents of the reanimated presets above, in `react-native-ease` units.
+// EaseView spring takes raw damping/stiffness/mass (same physical model). EaseView
+// timing takes duration + an easing curve as a cubic-bezier tuple.
+
+/** Color/border state transition for Toggle, Checkbox, Chip, CategoryStrip, Switch track. Mirrors TIMINGS.state + EASINGS.standard. */
+export const COLOR_TRANSITION: SingleTransition = {
+  type: 'timing',
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1],
+}
+
+/** Icon/opacity crossfade. Mirrors TIMINGS.state + EASINGS.standard. */
+export const OPACITY_TRANSITION: SingleTransition = {
+  type: 'timing',
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1],
+}
+
+/** Elastic indicator spring — Switch thumb, RadioGroup dot. Mirrors SPRINGS.elastic. */
+export const SPRING_ELASTIC: SingleTransition = {
+  type: 'spring',
+  stiffness: 320,
+  damping: 22,
+  mass: 0.7,
+}
+
 // ─── Press scale tokens ──────────────────────────────────────────────────────
 // Per-component press intensities — taken from DESIGN.md.
 export const PRESS_SCALE = {

package/src/utils/fontGuard.ts

@@ -0,0 +1,34 @@
+import { isLoaded } from 'expo-font'
+
+declare const __DEV__: boolean
+
+let warned = false
+
+/**
+ * Dev-only guard: warns once if the Sohne font family is not loaded.
+ *
+ * Called lazily from `Text` on first render. Without this, a missing
+ * `useFonts(SohneFonts)` call (or a broken font path) produces invisible /
+ * system-font text with no signal — a silent failure consumers reported losing
+ * hours to. In production (`__DEV__ === false`) this is a no-op.
+ */
+export function warnIfFontsMissing(): void {
+  if (warned) return
+  if (typeof __DEV__ !== 'undefined' && !__DEV__) return
+  warned = true
+  try {
+    if (!isLoaded('Sohne-Regular')) {
+      console.warn(
+        '[retray-ui-kit] Sohne fonts are not loaded — text will fall back to the ' +
+          'system font. Load them at your app root before rendering any UI kit ' +
+          'component:\n\n' +
+          "  import { useFonts } from 'expo-font'\n" +
+          "  import { SohneFonts } from '@retray-dev/ui-kit/fonts'\n\n" +
+          '  const [fontsLoaded] = useFonts(SohneFonts)\n' +
+          '  if (!fontsLoaded) return null\n',
+      )
+    }
+  } catch {
+    // `isLoaded` not available in this expo-font version — skip the guard silently.
+  }
+}