@retray-dev/ui-kit 12.2.0 → 13.2.0

package/src/components/Textarea/Textarea.tsx

@@ -1,15 +1,10 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  interpolate,
-} from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { TIMINGS } from '../../utils/animations'
+import { Icon } from '../../utils/icons'
+import { COLOR_TRANSITION } from '../../utils/animations'
 
 const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
@@ -20,6 +15,7 @@ export interface TextareaProps extends TextInputProps {
   label?: string
   error?: string
   hint?: string
+  disabled?: boolean
   rows?: number
   prefixIcon?: string
   prefixIconNode?: React.ReactNode
@@ -31,6 +27,7 @@ export function Textarea({
   label,
   error,
   hint,
+  disabled,
   rows = 4,
   prefixIcon,
   prefixIconNode,
@@ -44,46 +41,36 @@ export function Textarea({
 }: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
-  const focusProgress = useColorTransition(focused, {
-    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
-  })
 
   const resolvedPrefixIcon = prefixIcon
-    ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
+    ? <Icon name={prefixIcon} size={ms(16)} color={prefixIconColor ?? colors.foregroundMuted} />
     : prefixIconNode
 
-  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
-  // focus weight change never resizes the box / reflows content.
-  const borderAnimStyle = useAnimatedStyle(() => ({
-    borderColor: error
-      ? colors.destructive
-      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error
-      ? 2
-      : interpolate(focusProgress.value, [0, 1], [1, 2]),
-  }))
+  const borderColor = error ? colors.destructive : (focused ? colors.primary : colors.border)
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <Animated.View
-        style={[
-          styles.inputWrapper,
-          { backgroundColor: colors.background },
-        ]}
-      >
-        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
+      <View style={[styles.inputWrapper, { backgroundColor: colors.background }]}>
+        <EaseView
+          style={[styles.borderOverlay, { borderWidth: error ? 2 : 1 }]}
+          animate={{ borderColor }}
+          transition={COLOR_TRANSITION}
+          pointerEvents="none"
+        />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
           numberOfLines={rows}
           textAlignVertical="top"
+          editable={!disabled}
           style={[
             styles.input,
             {
               color: colors.foreground,
               minHeight: rows * vs(30),
             },
+            disabled && { opacity: 0.45 },
             webInputResetStyle,
             style,
           ]}
@@ -98,9 +85,10 @@ export function Textarea({
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityState={{ disabled: !!disabled }}
           {...props}
         />
-      </Animated.View>
+      </View>
       {error ? (
         <Text
           style={[styles.helperText, { color: colors.destructive }]}
@@ -128,8 +116,6 @@ const styles = StyleSheet.create({
     marginBottom: vs(2),
   },
   inputWrapper: {
-    // Border lives on borderOverlay (absolute); wrapper carries none so the
-    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),

package/src/components/Toggle/Toggle.tsx

@@ -5,7 +5,7 @@ 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 { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
 import { PressableButton } from '../../utils/pressable'
 
@@ -30,13 +30,13 @@ function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconC
   }
 
   if (pressed) {
-    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor)}</>
+    if (activeIconName) return <Icon name={activeIconName} size={iconSize} color={activeIconColor ?? primaryColor} />
     const active = renderProp(activeIcon)
     if (active) return <>{active}</>
     return <FontAwesome5 name="check-circle" size={iconSize} color={primaryColor} />
   }
 
-  if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? mutedColor)}</>
+  if (iconName) return <Icon name={iconName} size={iconSize} color={iconColor ?? mutedColor} />
   const custom = renderProp(icon)
   if (custom) return <>{custom}</>
 

package/src/hooks/useConfirmDialog.ts

@@ -1,67 +1,56 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface UseConfirmDialogOptions {
   onConfirm: () => void | Promise<void>
   onCancel?: () => void
 }
 
-export interface UseConfirmDialogResult<T> {
-  /** Pass to ConfirmDialog `visible` prop. */
+export interface UseConfirmDialogResult {
   visible: boolean
-  /** The value passed to `open()` — available during the confirmation flow. */
-  target: T | null
-  /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
   loading: boolean
-  /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
-  open: (target?: T) => void
-  /** Handlers to pass directly to ConfirmDialog. */
-  dialogProps: {
-    visible: boolean
-    loading: boolean
-    onConfirm: () => void
-    onCancel: () => void
-  }
+  open: () => void
+  onConfirm: () => void
+  onCancel: () => void
 }
 
-export function useConfirmDialog<T = undefined>(
-  options: UseConfirmDialogOptions,
-): UseConfirmDialogResult<T> {
+export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult {
   const [visible, setVisible] = useState(false)
-  const [target, setTarget] = useState<T | null>(null)
   const [loading, setLoading] = useState(false)
+  const mountedRef = useRef(true)
+  const onConfirmRef = useRef(options.onConfirm)
+  const onCancelRef = useRef(options.onCancel)
 
-  const open = useCallback((t?: T) => {
-    setTarget(t ?? null)
-    setVisible(true)
+  useEffect(() => {
+    onConfirmRef.current = options.onConfirm
+    onCancelRef.current = options.onCancel
+  })
+
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
   }, [])
 
+  const open = useCallback(() => setVisible(true), [])
+
   const handleConfirm = useCallback(async () => {
     setLoading(true)
     try {
-      await options.onConfirm()
+      await onConfirmRef.current()
+    } catch {
+      /* consumer handles error in onConfirm */
     } finally {
-      setLoading(false)
-      setVisible(false)
-      setTarget(null)
+      if (mountedRef.current) {
+        setLoading(false)
+        setVisible(false)
+      }
     }
-  }, [options])
+  }, [])
 
   const handleCancel = useCallback(() => {
     setVisible(false)
-    setTarget(null)
-    options.onCancel?.()
-  }, [options])
+    onCancelRef.current?.()
+  }, [])
 
-  return {
-    visible,
-    target,
-    loading,
-    open,
-    dialogProps: {
-      visible,
-      loading,
-      onConfirm: handleConfirm,
-      onCancel: handleCancel,
-    },
-  }
+  return { visible, loading, open, onConfirm: handleConfirm, onCancel: handleCancel }
 }

package/src/index.ts

@@ -44,7 +44,6 @@ export * from './components/CategoryStrip'
 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'
@@ -64,10 +63,10 @@ export * from './components/Stats'
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
 
 // Icon utility
-export { Icon, renderIcon, configureIconFamilies, getValidIconNames } from './utils/icons'
+export { Icon } from './utils/icons'
 
 // Color utilities
-export { withAlpha } from './theme/colorUtils'
+export { withAlpha, hexToRgb } from './theme/colorUtils'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'
@@ -82,13 +81,13 @@ export {
   notificationSuccess,
   notificationError,
   notificationWarning,
-  richHaptics,
 } from './utils/haptics'
 
 // Hooks
 export { useConfirmDialog } from './hooks/useConfirmDialog'
 export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
 
+
 // Design tokens
 export {
   SPACING,

package/src/theme/ThemeProvider.tsx

@@ -3,10 +3,7 @@ import { useColorScheme } from 'react-native'
 import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
 import { defaultLight, defaultDark, deriveColors } from './colors'
 
-const ThemeContext = createContext<ThemeContextValue>({
-  colors: deriveColors(defaultLight, 'light'),
-  colorScheme: 'light',
-})
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export interface ThemeProviderProps {
   children: React.ReactNode

package/src/theme/colorUtils.ts

@@ -1,7 +1,4 @@
-// Hex color manipulation utilities for internal theme derivation.
-// All functions are pure — no side effects, no React dependencies.
-
-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   const clean = hex.replace('#', '')
   const full = clean.length === 3
     ? clean.split('').map(c => c + c).join('')
@@ -14,74 +11,6 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   }
 }
 
-function componentToHex(c: number): string {
-  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')
-}
-
-function rgbToHex(r: number, g: number, b: number): string {
-  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
-}
-
-// Returns hex color with alpha blended onto a white background (for tint derivation)
-export function withAlphaOnWhite(hex: string, alpha: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  const r = rgb.r * alpha + 255 * (1 - alpha)
-  const g = rgb.g * alpha + 255 * (1 - alpha)
-  const b = rgb.b * alpha + 255 * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
-// Returns hex color with alpha blended onto a dark background (for dark mode tints)
-export function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
-  const rgb = hexToRgb(hex)
-  const bg = hexToRgb(bgHex)
-  if (!rgb || !bg) return hex
-  const r = rgb.r * alpha + bg.r * (1 - alpha)
-  const g = rgb.g * alpha + bg.g * (1 - alpha)
-  const b = rgb.b * alpha + bg.b * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
-// Mix foreground color with background at given opacity (for text hierarchy)
-export function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
-  const fg = hexToRgb(fgHex)
-  const bg = hexToRgb(bgHex)
-  if (!fg || !bg) return fgHex
-  const r = fg.r * opacity + bg.r * (1 - opacity)
-  const g = fg.g * opacity + bg.g * (1 - opacity)
-  const b = fg.b * opacity + bg.b * (1 - opacity)
-  return rgbToHex(r, g, b)
-}
-
-// Lighten a hex color by mixing with white
-export function lighten(hex: string, amount: number): string {
-  return withAlphaOnWhite(hex, 1 - amount)
-}
-
-// Darken a hex color by mixing with black
-export function darken(hex: string, amount: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
-}
-
-// Detect if a hex color is "dark" (luminance < 0.5)
-export function isDark(hex: string): boolean {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return false
-  // Relative luminance (WCAG formula)
-  const toLinear = (c: number) => {
-    const s = c / 255
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
-  }
-  const L = 0.2126 * toLinear(rgb.r) + 0.7152 * toLinear(rgb.g) + 0.0722 * toLinear(rgb.b)
-  return L < 0.5
-}
-
-// Convert a hex color to rgba with the given alpha.
-// Returns an rgba() string suitable for use with semi-transparent backgrounds,
-// borders, and overlays.
 export function withAlpha(hex: string, alpha: number): string {
   const rgb = hexToRgb(hex)
   if (!rgb) return hex

package/src/theme/colors.ts

@@ -1,5 +1,44 @@
 import { ThemeColors, ResolvedColors } from './types'
-import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken } from './colorUtils'
+import { hexToRgb } from './colorUtils'
+
+function componentToHex(c: number): string {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
+}
+
+function withAlphaOnWhite(hex: string, alpha: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  const r = rgb.r * alpha + 255 * (1 - alpha); const g = rgb.g * alpha + 255 * (1 - alpha); const b = rgb.b * alpha + 255 * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
+  const rgb = hexToRgb(hex); const bg = hexToRgb(bgHex)
+  if (!rgb || !bg) return hex
+  const r = rgb.r * alpha + bg.r * (1 - alpha); const g = rgb.g * alpha + bg.g * (1 - alpha); const b = rgb.b * alpha + bg.b * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
+  const fg = hexToRgb(fgHex); const bg = hexToRgb(bgHex)
+  if (!fg || !bg) return fgHex
+  const r = fg.r * opacity + bg.r * (1 - opacity); const g = fg.g * opacity + bg.g * (1 - opacity); const b = fg.b * opacity + bg.b * (1 - opacity)
+  return rgbToHex(r, g, b)
+}
+
+function lighten(hex: string, amount: number): string {
+  return withAlphaOnWhite(hex, 1 - amount)
+}
+
+function darken(hex: string, amount: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
+}
 
 // ─── Default palettes ─────────────────────────────────────────────────────────
 // AUDIT FIXES applied:

package/src/theme/types.ts

@@ -26,8 +26,8 @@ export type ThemeColors = {
 // Derived from ThemeColors. Never supplied by consumers directly.
 export type ResolvedColors = ThemeColors & {
   // Text hierarchy
-  foregroundSubtle: string   // ~55% — body text, subtitles
-  foregroundMuted: string    // ~35% — captions, timestamps, placeholders
+  foregroundSubtle: string   // ~70% — body text, subtitles
+  foregroundMuted: string    // ~62% — captions, timestamps, placeholders
 
   // Surface fills (chips unselected, input bg, tag bg)
   surface: string            // background slightly off-canvas

package/src/utils/animations.ts

@@ -1,74 +1,29 @@
-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.
-// `stiffness`/`damping`/`mass` model — Reanimated v4 default physics units.
-//
-// pressIn:  high stiffness, heavy damping  → fast, controlled compression
-// pressOut: lower stiffness, less damping  → soft, elastic rebound
-// settle:   pillows / drawers / large surfaces → calm, never twitchy
 export const SPRINGS = {
-  /** Tight, premium press feel — Buttons, Toggle, Tabs triggers. */
-  pressIn: { stiffness: 600, damping: 35, mass: 0.8 },
-  pressOut: { stiffness: 280, damping: 22, mass: 0.8 },
-
-  /** Slightly softer for larger surfaces — Card, ListItem, MenuItem. */
-  surfacePressIn: { stiffness: 380, damping: 30, mass: 0.95 },
-  surfacePressOut: { stiffness: 220, damping: 20, mass: 0.95 },
-
-  /** Settled transitions for moving indicators — Tabs pill, Switch thumb. */
   glide: { stiffness: 380, damping: 38, mass: 1 },
-
-  /** Elastic indicator — Switch thumb, RadioGroup dot. */
   elastic: { stiffness: 320, damping: 22, mass: 0.7 },
 } as const
 
-// ─── Timing presets ──────────────────────────────────────────────────────────
-// All timings target the UI thread via Reanimated `withTiming`.
 export const TIMINGS = {
-  /** Color/opacity transitions on toggles, checkboxes, switches. */
   state: { duration: 160 },
-  /** Focus ring on inputs. */
-  focusIn: { duration: 140 },
-  focusOut: { duration: 100 },
-  /** Accordion / collapsible content. */
   expand: { duration: 240 },
   collapse: { duration: 200 },
-  /** Skeleton shimmer cycle (full pass). */
   shimmer: { duration: 1400 },
 } as const
 
-// ─── Easing presets ──────────────────────────────────────────────────────────
-export const EASINGS = {
-  /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Easing.bezier(0.2, 0, 0, 1),
-  /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Easing.bezier(0.23, 1, 0.32, 1),
-  /** Quick ease-in for collapsing. */
-  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,
@@ -76,8 +31,6 @@ export const SPRING_ELASTIC: SingleTransition = {
   mass: 0.7,
 }
 
-// ─── Press scale tokens ──────────────────────────────────────────────────────
-// Per-component press intensities — taken from DESIGN.md.
 export const PRESS_SCALE = {
   button: 0.95,
   card: 0.98,