@retray-dev/ui-kit 7.0.1 → 9.0.0

package/src/components/PagerDots/PagerDots.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect } from 'react'
+import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  interpolateColor,
+} from 'react-native-reanimated'
+import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
+import { SPRINGS } from '../../utils/animations'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { renderIcon } from '../../utils/icons'
+
+export interface PagerDotsProps {
+  /** Total number of pages. */
+  count: number
+  /** Index of the active page (0-based). */
+  activeIndex: number
+  /** Called when a dot is tapped — omit to make dots non-interactive. */
+  onDotPress?: (index: number) => void
+  /** Show previous/next buttons. If function provided, called on button press. If `true`, uses `onDotPress(activeIndex ± 1)`. */
+  showControls?: boolean | { onPrevious?: () => void; onNext?: () => void }
+  /** Diameter of an inactive dot (dp). Defaults to 8. */
+  dotSize?: number
+  /** Gap between dots (dp). Defaults to 8. */
+  spacing?: number
+  /** Active dot color. Defaults to theme `primary`. */
+  activeColor?: string
+  /** Inactive dot color. Defaults to theme `border`. */
+  inactiveColor?: string
+  style?: ViewStyle
+}
+
+interface DotProps {
+  active: boolean
+  size: number
+  activeColor: string
+  inactiveColor: string
+  onPress?: () => void
+  /** Index of this dot (0-based) for accessibility label. */
+  index: number
+  /** Total number of dots for accessibility label. */
+  total: number
+}
+
+function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }: DotProps) {
+  const progress = useSharedValue(active ? 1 : 0)
+
+  useEffect(() => {
+    progress.value = withSpring(active ? 1 : 0, SPRINGS.glide)
+  }, [active, progress])
+
+  // Active dot stretches into a pill (width = 2.5×). Color crossfades on the UI thread.
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: size + progress.value * size * 1.5,
+    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor]),
+  }))
+
+  const dot = (
+    <Animated.View style={[{ height: size, borderRadius: size / 2 }, animatedStyle]} />
+  )
+
+  if (!onPress) return dot
+
+  const handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.7}
+      touchSoundDisabled={true}
+      accessibilityRole="button"
+      accessibilityLabel={`Page ${index + 1} of ${total}${active ? ', current page' : ''}`}
+      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+    >
+      {dot}
+    </TouchableOpacity>
+  )
+}
+
+/**
+ * Animated page indicator for carousels / document pagers. The active dot
+ * stretches into a pill and color-crossfades — all on the UI thread.
+ *
+ * @example
+ * <PagerDots count={pages.length} activeIndex={page} onDotPress={setPage} />
+ */
+export function PagerDots({
+  count,
+  activeIndex,
+  onDotPress,
+  showControls = false,
+  dotSize = 8,
+  spacing = 8,
+  activeColor,
+  inactiveColor,
+  style,
+}: PagerDotsProps) {
+  const { colors } = useTheme()
+  const resolvedActive = activeColor ?? colors.primary
+  const resolvedInactive = inactiveColor ?? colors.border
+  const size = s(dotSize)
+
+  const hasControls = showControls !== false
+  const canGoPrev = activeIndex > 0
+  const canGoNext = activeIndex < count - 1
+
+  const handlePrevious = () => {
+    if (!canGoPrev) return
+    hapticSelection()
+    if (typeof showControls === 'object' && showControls.onPrevious) {
+      showControls.onPrevious()
+    } else if (onDotPress) {
+      onDotPress(activeIndex - 1)
+    }
+  }
+
+  const handleNext = () => {
+    if (!canGoNext) return
+    hapticSelection()
+    if (typeof showControls === 'object' && showControls.onNext) {
+      showControls.onNext()
+    } else if (onDotPress) {
+      onDotPress(activeIndex + 1)
+    }
+  }
+
+  return (
+    <View
+      style={[styles.container, { gap: s(spacing) }, style]}
+      accessibilityRole="adjustable"
+      accessibilityLabel={`Page ${activeIndex + 1} of ${count}`}
+    >
+      {hasControls && (
+        <TouchableOpacity
+          onPress={handlePrevious}
+          disabled={!canGoPrev}
+          activeOpacity={0.7}
+          touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel="Previous page"
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          style={[styles.controlBtn, !canGoPrev && styles.controlBtnDisabled]}
+        >
+          {renderIcon('chevron-left', s(18), canGoPrev ? colors.foreground : colors.foregroundMuted)}
+        </TouchableOpacity>
+      )}
+      <View style={[styles.dotsRow, { gap: s(spacing) }]}>
+        {Array.from({ length: count }).map((_, i) => (
+          <Dot
+            key={i}
+            active={i === activeIndex}
+            size={size}
+            activeColor={resolvedActive}
+            inactiveColor={resolvedInactive}
+            index={i}
+            total={count}
+            onPress={onDotPress ? () => onDotPress(i) : undefined}
+          />
+        ))}
+      </View>
+      {hasControls && (
+        <TouchableOpacity
+          onPress={handleNext}
+          disabled={!canGoNext}
+          activeOpacity={0.7}
+          touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel="Next page"
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          style={[styles.controlBtn, !canGoNext && styles.controlBtnDisabled]}
+        >
+          {renderIcon('chevron-right', s(18), canGoNext ? colors.foreground : colors.foregroundMuted)}
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  controlBtn: {
+    padding: s(4),
+  },
+  controlBtnDisabled: {
+    opacity: 0.3,
+  },
+})

package/src/components/PagerDots/index.ts

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

package/src/components/Pressable/Pressable.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { TouchableOpacity, Platform, ViewStyle, TouchableOpacityProps } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { ViewStyle } from 'react-native'
 import { impactLight } from '../../utils/haptics'
-import { usePressScale } from '../../utils/usePressScale'
-import { PRESS_SCALE, SPRINGS } from '../../utils/animations'
+import { PressableCard } from '../../utils/pressable'
+import { PRESS_SCALE } from '../../utils/animations'
 
-export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
+export interface PressableProps {
   /** Children content to render inside the pressable. */
   children: React.ReactNode
   /** Called when pressed. */
@@ -19,7 +18,7 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
   bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
-  /** Additional style for the Animated wrapper. */
+  /** Additional style for the wrapper. */
   style?: ViewStyle
   /** Disable interaction. */
   disabled?: boolean
@@ -29,7 +28,7 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
 
 /**
  * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
- * All animation runs on the UI thread via Reanimated v4 worklets.
+ * All animation runs on the UI thread via pressto (Reanimated v4 worklets).
  *
  * Use this for any custom pressable surface that needs consistent press feel
  * (cards, list rows, image tiles, etc).
@@ -37,21 +36,12 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
 export function Pressable({
   children,
   onPress,
-  pressScale = PRESS_SCALE.card,
+  pressScale: _pressScale = PRESS_SCALE.card,
   haptics = true,
   style,
   disabled,
-  hoverScale = 1.02,
-  ...touchableProps
+  hoverScale: _hoverScale = 1.02,
 }: PressableProps) {
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale,
-    hoverScale,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled,
-  })
-
   const handlePress = () => {
     if (disabled || !onPress) return
     if (haptics) impactLight()
@@ -59,23 +49,17 @@ export function Pressable({
   }
 
   return (
-    <Animated.View
-      style={[animatedStyle, style]}
-      {...(Platform.OS === 'web' ? hoverHandlers : {})}
+    <PressableCard
+      style={style}
+      onPress={handlePress}
+      enabled={!disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
+      activateOnHover
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
     >
-      <TouchableOpacity
-        onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        activeOpacity={1}
-        disabled={disabled}
-        touchSoundDisabled={true}
-        accessibilityRole="button"
-        accessibilityState={{ disabled: !!disabled }}
-        {...touchableProps}
-      >
-        {children}
-      </TouchableOpacity>
-    </Animated.View>
+      {children}
+    </PressableCard>
   )
 }

package/src/components/PricingCard/PricingCard.tsx

@@ -0,0 +1,220 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { Button } from '../Button'
+import { Badge } from '../Badge'
+import { renderIcon } from '../../utils/icons'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS, SHADOWS } from '../../tokens'
+
+export interface PricingFeature {
+  label: string
+  /** Whether the feature is included in this plan. Excluded features render dimmed with a dash. Defaults to true. */
+  included?: boolean
+}
+
+export interface PricingCardProps {
+  /** Plan name, e.g. "Pro". */
+  name: string
+  /** Formatted price, e.g. "$9" or "Free". */
+  price: string
+  /** Billing period suffix, e.g. "/mo". */
+  period?: string
+  /** Short description under the price. */
+  description?: string
+  /** Feature list. Strings are treated as included; objects allow `included: false`. */
+  features?: (string | PricingFeature)[]
+  /** CTA button label. */
+  ctaLabel?: string
+  onCtaPress?: () => void
+  /** Promotional badge, e.g. "Founders" or "Most popular". */
+  badge?: string
+  /** Emphasize this plan — primary border + elevation. Defaults to false. */
+  highlighted?: boolean
+  /** Small print under the CTA. */
+  footnote?: string
+  style?: ViewStyle
+}
+
+const normalize = (f: string | PricingFeature): PricingFeature =>
+  typeof f === 'string' ? { label: f, included: true } : { included: true, ...f }
+
+/**
+ * Pricing / plan card for paywalls and freemium tiers — price header, feature
+ * list with check marks, optional promo badge, and a CTA. Set `highlighted` on
+ * the recommended plan.
+ *
+ * @example
+ * <PricingCard
+ *   name="Pro"
+ *   price="$9"
+ *   period="/mo"
+ *   badge="Most popular"
+ *   highlighted
+ *   features={['Unlimited docs', 'Priority support', { label: 'SSO', included: false }]}
+ *   ctaLabel="Start trial"
+ *   onCtaPress={subscribe}
+ * />
+ */
+export function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features = [],
+  ctaLabel,
+  onCtaPress,
+  badge,
+  highlighted = false,
+  footnote,
+  style,
+}: PricingCardProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.card,
+          borderColor: highlighted ? colors.primary : colors.border,
+          borderWidth: highlighted ? 2 : StyleSheet.hairlineWidth,
+        },
+        highlighted && SHADOWS.md,
+        style,
+      ]}
+      accessibilityRole="summary"
+    >
+      <View style={styles.header}>
+        <Text style={[styles.name, { color: colors.foreground }]} allowFontScaling={true}>
+          {name}
+        </Text>
+        {badge ? <Badge label={badge} variant={highlighted ? 'default' : 'secondary'} size="sm" /> : null}
+      </View>
+
+      <View style={styles.priceRow}>
+        <Text style={[styles.price, { color: colors.foreground }]} allowFontScaling={true}>
+          {price}
+        </Text>
+        {period ? (
+          <Text style={[styles.period, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+            {period}
+          </Text>
+        ) : null}
+      </View>
+
+      {description ? (
+        <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {description}
+        </Text>
+      ) : null}
+
+      {features.length > 0 ? (
+        <View style={styles.features}>
+          {features.map(normalize).map((f, i) => (
+            <View key={i} style={styles.featureRow}>
+              {renderIcon(
+                f.included ? 'check' : 'minus',
+                ms(16),
+                f.included ? colors.success : colors.foregroundMuted,
+              )}
+              <Text
+                style={[
+                  styles.featureLabel,
+                  { color: f.included ? colors.foreground : colors.foregroundMuted },
+                  !f.included && styles.featureExcluded,
+                ]}
+                allowFontScaling={true}
+              >
+                {f.label}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      {ctaLabel ? (
+        <Button
+          label={ctaLabel}
+          variant={highlighted ? 'primary' : 'secondary'}
+          fullWidth
+          onPress={onCtaPress}
+          style={styles.cta}
+        />
+      ) : null}
+
+      {footnote ? (
+        <Text style={[styles.footnote, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {footnote}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    padding: s(16),
+    gap: vs(8),
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: s(8),
+  },
+  name: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(16),
+    lineHeight: mvs(20),
+  },
+  priceRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: s(3),
+  },
+  price: {
+    fontFamily: 'Sohne-Bold',
+    fontSize: ms(28),
+    lineHeight: mvs(32),
+    letterSpacing: -0.5,
+  },
+  period: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(16),
+  },
+  description: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  features: {
+    gap: vs(6),
+    marginTop: vs(2),
+  },
+  featureRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(6),
+  },
+  featureLabel: {
+    flex: 1,
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  featureExcluded: {
+    textDecorationLine: 'line-through',
+  },
+  cta: {
+    marginTop: vs(2),
+  },
+  footnote: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: ms(11),
+    lineHeight: mvs(14),
+    textAlign: 'center',
+  },
+})

package/src/components/PricingCard/index.ts

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

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,18 +1,12 @@
 import React from 'react'
 import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  interpolateColor,
-} from 'react-native-reanimated'
-import { useEffect } from 'react'
+import Animated from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { usePressScale } from '../../utils/usePressScale'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { COLOR_TRANSITION, SPRING_ELASTIC, PRESS_SCALE } from '../../utils/animations'
 
 export interface RadioOption {
   label: string
@@ -43,21 +37,6 @@ function RadioItem({
     pressScale: PRESS_SCALE.button,
     disabled: option.disabled,
   })
-  const colorProgress = useColorTransition(selected)
-
-  const dotScale = useSharedValue(selected ? 1 : 0)
-  useEffect(() => {
-    dotScale.value = withSpring(selected ? 1 : 0, SPRINGS.elastic)
-  }, [selected, dotScale])
-
-  const radioStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary]),
-  }))
-
-  const dotStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: dotScale.value }],
-    opacity: dotScale.value,
-  }))
 
   return (
     // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
@@ -81,9 +60,17 @@ function RadioItem({
       accessibilityState={{ checked: selected, disabled: !!option.disabled }}
     >
       <Animated.View style={scaleStyle}>
-        <Animated.View style={[styles.radio, radioStyle]}>
-          <Animated.View style={[styles.dot, { backgroundColor: colors.primary }, dotStyle]} />
-        </Animated.View>
+        <EaseView
+          style={styles.radio}
+          animate={{ borderColor: selected ? colors.primary : colors.border }}
+          transition={COLOR_TRANSITION}
+        >
+          <EaseView
+            style={[styles.dot, { backgroundColor: colors.primary }]}
+            animate={{ scale: selected ? 1 : 0, opacity: selected ? 1 : 0 }}
+            transition={SPRING_ELASTIC}
+          />
+        </EaseView>
       </Animated.View>
       <Text
         style={[styles.label, { color: colors.foreground }]}

package/src/components/RetrayProvider/RetrayProvider.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
+import { ThemeProvider } from '../../theme'
+import type { Theme, ColorScheme } from '../../theme'
+import { ToastProvider } from '../Toast'
+
+export interface RetrayProviderProps {
+  children: React.ReactNode
+  /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
+  theme?: Theme
+  /**
+   * - `'system'` (default): auto-detects device setting.
+   * - `'light'` / `'dark'`: forces a specific scheme.
+   */
+  colorScheme?: ColorScheme
+}
+
+/**
+ * All-in-one provider that wires every provider the UI kit needs, in the one
+ * correct order:
+ *
+ * `SafeAreaProvider` → `GestureHandlerRootView` → `ThemeProvider` →
+ * `BottomSheetModalProvider` → `ToastProvider`
+ *
+ * Use this at your app root instead of nesting the five providers by hand — it
+ * removes an entire class of provider-order bugs. The individual providers stay
+ * exported for consumers who need a custom tree.
+ *
+ * @example
+ * import { RetrayProvider } from '@retray-dev/ui-kit'
+ *
+ * export default function App() {
+ *   return (
+ *     <RetrayProvider colorScheme="system">
+ *       <RootNavigator />
+ *     </RetrayProvider>
+ *   )
+ * }
+ */
+export function RetrayProvider({ children, theme, colorScheme = 'system' }: RetrayProviderProps) {
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <GestureHandlerRootView style={styles.root}>
+        <ThemeProvider theme={theme} colorScheme={colorScheme}>
+          <BottomSheetModalProvider>
+            <ToastProvider>{children}</ToastProvider>
+          </BottomSheetModalProvider>
+        </ThemeProvider>
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+})

package/src/components/RetrayProvider/index.ts

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