@retray-dev/ui-kit 12.2.0 → 13.0.0

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,