@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/tokens.ts

@@ -1,5 +1,4 @@
 // ─── Spacing ─────────────────────────────────────────────────────────────────
-// 8pt grid with 2pt micro-step. `section` for major band separators (Airbnb: 64px).
 export const SPACING = {
   xxs: 2,
   xs: 4,
@@ -22,8 +21,6 @@ export const ICON_SIZES = {
 } as const
 
 // ─── Border radius ────────────────────────────────────────────────────────────
-// Airbnb-aligned shape language — soft everywhere, no hard corners on interactive elements.
-// xs: micro chips/tags  sm: inputs/forms  md: cards  lg: sheet corners  xl: primary CTAs (pill)
 export const RADIUS = {
   none: 0,
   xs: 4,
@@ -35,7 +32,6 @@ export const RADIUS = {
 } as const
 
 // ─── Shadows ──────────────────────────────────────────────────────────────────
-// Multi-tier. Default card usage = sm. Hover float = md. Modals = lg/xl.
 export const SHADOWS = {
   sm: {
     shadowColor: '#000',
@@ -73,118 +69,132 @@ export const BREAKPOINTS = {
 } as const
 
 // ─── Typography ───────────────────────────────────────────────────────────────
-// Airbnb-inspired hierarchy. Modest weights — 500-600 on display, not 700+.
-// Exception: display-hero (large number display) and display-xl always bold.
-// Poppins carries the full scale. All fontFamily values reference loaded font names.
+// AUDIT FIX: Rationalised display scale — removed weight inversions and size
+// collisions. display-lg/md separated by 4px with matching weights. title-md/sm
+// now actually differ in size. uppercase-tag raised from 10px → 11px for
+// minimum mobile readability (Apple HIG: 11pt floor).
 export const TYPOGRAPHY = {
   'display-hero': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 64,
     fontWeight: '700' as const,
     lineHeight: 70,
     letterSpacing: -1,
   },
   'display-xl': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 28,
     fontWeight: '700' as const,
     lineHeight: 40,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 22px/500 — raised to 24px/600; removes weight inversion vs display-md
   'display-lg': {
-    fontFamily: 'Poppins-Medium',
-    fontSize: 22,
-    fontWeight: '500' as const,
-    lineHeight: 26,
-    letterSpacing: -0.44,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 24,
+    fontWeight: '600' as const,
+    lineHeight: 32,
+    letterSpacing: -0.3,
   },
+  // AUDIT FIX: was 21px/700 — lowered to 20px/600; weight normalised, 4px gap preserved
   'display-md': {
-    fontFamily: 'Poppins-Bold',
-    fontSize: 21,
-    fontWeight: '700' as const,
-    lineHeight: 30,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 20,
+    fontWeight: '600' as const,
+    lineHeight: 28,
     letterSpacing: 0,
   },
   'display-sm': {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: 20,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 18,
     fontWeight: '600' as const,
     lineHeight: 24,
     letterSpacing: -0.18,
   },
+  // AUDIT FIX: was 16px — raised to 17px so title-md > title-sm is size-visible
   'title-md': {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: 16,
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 17,
     fontWeight: '600' as const,
-    lineHeight: 20,
+    lineHeight: 22,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 16px — lowered to 15px; now distinct from title-md
   'title-sm': {
-    fontFamily: 'Poppins-Medium',
-    fontSize: 16,
+    fontFamily: 'Sohne-Medium',
+    fontSize: 15,
     fontWeight: '500' as const,
     lineHeight: 20,
     letterSpacing: 0,
   },
   'body-md': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 16,
     fontWeight: '400' as const,
     lineHeight: 24,
     letterSpacing: 0,
   },
   'body-sm': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 14,
     fontWeight: '400' as const,
     lineHeight: 20,
     letterSpacing: 0,
   },
-  caption: {
-    fontFamily: 'Poppins-Medium',
+  'caption': {
+    fontFamily: 'Sohne-Medium',
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 18,
     letterSpacing: 0,
   },
   'caption-sm': {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: 13,
     fontWeight: '400' as const,
     lineHeight: 16,
     letterSpacing: 0,
   },
   'badge-text': {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: 11,
     fontWeight: '600' as const,
-    lineHeight: 13,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  // AUDIT FIX: added badge-text-md so Badge md size has a canonical token
+  'badge-text-md': {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    fontWeight: '600' as const,
+    lineHeight: 16,
     letterSpacing: 0,
   },
   'micro-label': {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: 12,
     fontWeight: '700' as const,
     lineHeight: 16,
     letterSpacing: 0,
   },
+  // AUDIT FIX: was 10px/0.8 letterSpacing — raised to 11px/0.6; minimum mobile readability
   'uppercase-tag': {
-    fontFamily: 'Poppins-Bold',
-    fontSize: 10,
+    fontFamily: 'Sohne-Bold',
+    fontSize: 11,
     fontWeight: '700' as const,
-    lineHeight: 13,
-    letterSpacing: 0.8,
+    lineHeight: 14,
+    letterSpacing: 0.6,
     textTransform: 'uppercase' as const,
   },
   'button-lg': {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: 16,
     fontWeight: '500' as const,
     lineHeight: 22,
     letterSpacing: 0,
   },
   'button-sm': {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 18,

package/src/utils/animations.ts

@@ -0,0 +1,58 @@
+import { Easing } from 'react-native-reanimated'
+
+// ─── 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.0 },
+
+  /** 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
+
+// ─── Press scale tokens ──────────────────────────────────────────────────────
+// Per-component press intensities — taken from DESIGN.md.
+export const PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94,
+} as const

package/src/utils/icons.ts

@@ -17,36 +17,63 @@ export interface IconProps {
   family?: IconFamily
 }
 
-type ResolvedFamily = {
+type IconComponentType = React.ComponentType<{ name: string; size: number; color: string }>
+type IconFamilyEntry = {
   name: IconFamily
-  component: React.ComponentType<{ name: any; size: number; color: string }>
-  glyphMap: Record<string, number>
+  component: IconComponentType
+  /** Deferred — glyphMap is only read when the resolution cache is first built. */
+  getGlyphMap: () => Record<string, number>
 }
 
-// Priority order: highest-priority family listed last so it overwrites lower-priority entries in the cache
-const ICON_FAMILIES: ResolvedFamily[] = [
-  { name: 'Ionicons',      component: Ionicons as any,      glyphMap: (Ionicons as any).glyphMap },
-  { name: 'MaterialIcons', component: MaterialIcons as any, glyphMap: (MaterialIcons as any).glyphMap },
-  { name: 'FontAwesome5',  component: FontAwesome5 as any,  glyphMap: (FontAwesome5 as any).glyphMap },
-  { name: 'Entypo',        component: Entypo as any,        glyphMap: (Entypo as any).glyphMap },
-  { name: 'AntDesign',     component: AntDesign as any,     glyphMap: (AntDesign as any).glyphMap },
-  { name: 'Feather',       component: Feather as any,       glyphMap: (Feather as any).glyphMap },
+type WithGlyphMap = { glyphMap?: Record<string, number> }
+
+const glyphMapOf = (mod: unknown): Record<string, number> =>
+  (mod as WithGlyphMap).glyphMap ?? {}
+
+// Priority order: highest-priority family LAST so it overwrites lower-priority entries in the cache.
+const ALL_FAMILIES: IconFamilyEntry[] = [
+  { name: 'Ionicons',      component: Ionicons as unknown as IconComponentType,      getGlyphMap: () => glyphMapOf(Ionicons) },
+  { name: 'MaterialIcons', component: MaterialIcons as unknown as IconComponentType, getGlyphMap: () => glyphMapOf(MaterialIcons) },
+  { name: 'FontAwesome5',  component: FontAwesome5 as unknown as IconComponentType,  getGlyphMap: () => glyphMapOf(FontAwesome5) },
+  { name: 'Entypo',        component: Entypo as unknown as IconComponentType,        getGlyphMap: () => glyphMapOf(Entypo) },
+  { name: 'AntDesign',     component: AntDesign as unknown as IconComponentType,     getGlyphMap: () => glyphMapOf(AntDesign) },
+  { name: 'Feather',       component: Feather as unknown as IconComponentType,       getGlyphMap: () => glyphMapOf(Feather) },
 ]
 
-let resolvedCache: Map<string, ResolvedFamily> | null = null
+// Active families participating in name resolution. Defaults to all six.
+let activeFamilies: IconFamilyEntry[] = ALL_FAMILIES
+let resolvedCache: Map<string, IconFamilyEntry> | null = null
+
+/**
+ * Restrict which icon families participate in automatic name resolution.
+ * Narrowing to the families you actually use shrinks the resolution cache and
+ * speeds up the first `renderIcon` call (no scanning thousands of unused glyphs).
+ *
+ * Note: all six families are still statically imported by this module — Metro
+ * bundles them regardless. This controls *resolution scope*, not bundle size.
+ *
+ * @example configureIconFamilies(['Feather', 'MaterialIcons'])
+ */
+export function configureIconFamilies(families: IconFamily[]): void {
+  const order = families
+    .map((n) => ALL_FAMILIES.find((f) => f.name === n))
+    .filter((f): f is IconFamilyEntry => f !== undefined)
+  activeFamilies = order.length > 0 ? order : ALL_FAMILIES
+  resolvedCache = null // invalidate — rebuilt lazily on next resolve
+}
 
-function buildCache(): Map<string, ResolvedFamily> {
-  const cache = new Map<string, ResolvedFamily>()
-  for (const family of ICON_FAMILIES) {
-    if (!family.glyphMap) continue
-    for (const iconName of Object.keys(family.glyphMap)) {
+function buildCache(): Map<string, IconFamilyEntry> {
+  const cache = new Map<string, IconFamilyEntry>()
+  for (const family of activeFamilies) {
+    const glyphMap = family.getGlyphMap()
+    for (const iconName of Object.keys(glyphMap)) {
       cache.set(iconName, family)
     }
   }
   return cache
 }
 
-function resolveFamily(name: string): ResolvedFamily | null {
+function resolveFamily(name: string): IconFamilyEntry | null {
   if (!resolvedCache) {
     resolvedCache = buildCache()
   }
@@ -54,10 +81,10 @@ function resolveFamily(name: string): ResolvedFamily | null {
 }
 
 export function Icon({ name, size, color, family }: IconProps): React.ReactElement | null {
-  let resolved: ResolvedFamily | null = null
+  let resolved: IconFamilyEntry | null = null
 
   if (family) {
-    resolved = ICON_FAMILIES.find((f) => f.name === family) ?? null
+    resolved = ALL_FAMILIES.find((f) => f.name === family) ?? null
   } else {
     resolved = resolveFamily(name)
   }

package/src/utils/useColorTransition.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import {
+  useSharedValue,
+  withTiming,
+  interpolateColor,
+  type SharedValue,
+} from 'react-native-reanimated'
+import { TIMINGS, EASINGS } from './animations'
+
+export interface UseColorTransitionOptions {
+  /** Animation duration in ms. Defaults to `160`. */
+  duration?: number
+}
+
+/**
+ * Drives a 0→1 `SharedValue` based on a boolean state, animated via `withTiming` on the UI thread.
+ * Use with Reanimated's `interpolateColor` inside a `useAnimatedStyle` to drive borderColor/backgroundColor/etc.
+ *
+ * @example
+ *   const progress = useColorTransition(focused)
+ *   const animatedStyle = useAnimatedStyle(() => ({
+ *     borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
+ *   }))
+ */
+export function useColorTransition(
+  active: boolean,
+  options: UseColorTransitionOptions = {},
+): SharedValue<number> {
+  const { duration = TIMINGS.state.duration } = options
+  const progress = useSharedValue(active ? 1 : 0)
+
+  useEffect(() => {
+    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard })
+  }, [active, duration, progress])
+
+  return progress
+}
+
+// Re-export interpolateColor for ergonomic consumer access
+export { interpolateColor }

package/src/utils/usePressScale.ts

@@ -0,0 +1,75 @@
+import { useCallback } from 'react'
+import { Platform } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated'
+import { SPRINGS, PRESS_SCALE } from './animations'
+import { useHover } from './hover'
+
+export interface SpringConfig {
+  stiffness?: number
+  damping?: number
+  mass?: number
+}
+
+export interface UsePressScaleOptions {
+  /** Scale value while pressed. Defaults to `0.95` (button). */
+  pressScale?: number
+  /** Scale value while hovered on web. Defaults to `1.02`. Set to `1` to disable. */
+  hoverScale?: number
+  /** Spring config for press-in. Defaults to `SPRINGS.pressIn`. */
+  pressInSpring?: SpringConfig
+  /** Spring config for press-out. Defaults to `SPRINGS.pressOut`. */
+  pressOutSpring?: SpringConfig
+  /** Disable all interaction animations (still returns stable handlers). */
+  disabled?: boolean
+}
+
+/**
+ * Unified press + hover scale primitive.
+ * All animation lives on the UI thread via Reanimated v4 worklets — zero JS-thread cost.
+ *
+ * Returns:
+ *  - `animatedStyle`: spread onto an `Animated.View` (from `react-native-reanimated`)
+ *  - `onPressIn` / `onPressOut`: bind to a `TouchableOpacity`
+ *  - `hoverHandlers`: spread for web hover scaling (no-op on native)
+ */
+export function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false,
+}: UsePressScaleOptions = {}) {
+  const scale = useSharedValue(1)
+  const { hovered, hoverHandlers } = useHover()
+
+  const onPressIn = useCallback(() => {
+    if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
+    scale.value = withSpring(pressScale, pressInSpring)
+  }, [disabled, pressScale, pressInSpring, scale])
+
+  const onPressOut = useCallback(() => {
+    if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
+    scale.value = withSpring(1, pressOutSpring)
+  }, [disabled, pressOutSpring, scale])
+
+  const hoverActive = Platform.OS === 'web' && hovered && hoverScale !== 1 && !disabled
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value * (hoverActive ? hoverScale : 1) },
+    ],
+  }))
+
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers,
+  }
+}