@retray-dev/ui-kit 4.0.0 → 5.2.0

package/src/components/Toast/Toast.tsx

@@ -16,7 +16,12 @@ import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
-export type ToastVariant = 'default' | 'destructive' | 'success'
+export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning'
+
+export interface ToastAction {
+  label: string
+  onPress: () => void
+}
 
 export interface ToastItem {
   id: string
@@ -24,15 +29,12 @@ export interface ToastItem {
   description?: string
   variant?: ToastVariant
   icon?: React.ReactNode
-  /**
-   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
-   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
-   */
   iconName?: string
-  /** Override the resolved icon color. Defaults to the variant text color. */
   iconColor?: string
   /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
   duration?: number
+  /** Optional inline action button rendered at the end of the toast. */
+  action?: ToastAction
 }
 
 interface ToastContextValue {
@@ -99,30 +101,42 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
   const variant = item.variant ?? 'default'
 
   const bgColor = {
-    default: colors.foreground,
+    default:     colors.card,
+    destructive: colors.destructiveTint,
+    success:     colors.successTint,
+    warning:     colors.warningTint,
+  }[variant]
+
+  const borderColor = {
+    default:     colors.border,
     destructive: colors.destructiveBorder,
-    success: colors.successBorder,
+    success:     colors.successBorder,
+    warning:     colors.warningBorder,
   }[variant]
 
-  const textColor = {
-    default: colors.background,
-    destructive: '#991b1b',
-    success: '#166534',
+  const accentColor = {
+    default:     colors.primary,
+    destructive: colors.destructive,
+    success:     colors.success,
+    warning:     colors.warning,
   }[variant]
 
-  const borderColor = textColor
+  const titleColor = variant === 'default' ? colors.foreground : accentColor
+  const descColor = variant === 'default' ? colors.foregroundMuted : accentColor
 
   const defaultIcon =
     variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={18} color={textColor} />
+      <FontAwesome5 name="check-circle" size={16} color={accentColor} />
     ) : variant === 'destructive' ? (
-      <AntDesign name="exclamation-circle" size={18} color={textColor} />
+      <AntDesign name="exclamation-circle" size={16} color={accentColor} />
+    ) : variant === 'warning' ? (
+      <MaterialIcons name="warning-amber" size={17} color={accentColor} />
     ) : (
-      <Entypo name="info-with-circle" size={18} color={textColor} />
+      <Entypo name="info-with-circle" size={16} color={accentColor} />
     )
 
   const leftIcon: React.ReactNode = item.iconName
-    ? renderIcon(item.iconName, 22, item.iconColor ?? textColor)
+    ? renderIcon(item.iconName, 16, item.iconColor ?? accentColor)
     : item.icon ?? defaultIcon
 
   return (
@@ -131,16 +145,27 @@ function ToastNotification({ item, onDismiss }: { item: ToastItem; onDismiss: ()
         <View style={styles.leftIconContainer}>{leftIcon}</View>
         <View style={styles.toastContent}>
           {item.title ? (
-            <Text style={[styles.toastTitle, { color: textColor }]} allowFontScaling={true}>{item.title}</Text>
+            <Text style={[styles.toastTitle, { color: titleColor }]} allowFontScaling={true}>{item.title}</Text>
           ) : null}
           {item.description ? (
-            <Text style={[styles.toastDescription, { color: textColor, opacity: 0.85 }]} allowFontScaling={true}>
+            <Text style={[styles.toastDescription, { color: descColor }]} allowFontScaling={true}>
               {item.description}
             </Text>
           ) : null}
         </View>
+        {item.action && (
+          <TouchableOpacity
+            onPress={() => { item.action!.onPress(); onDismiss() }}
+            style={styles.actionButton}
+            touchSoundDisabled={true}
+          >
+            <Text style={[styles.actionLabel, { color: accentColor }]} allowFontScaling={true}>
+              {item.action.label}
+            </Text>
+          </TouchableOpacity>
+        )}
         <TouchableOpacity onPress={onDismiss} style={styles.dismissButton} touchSoundDisabled={true}>
-          <AntDesign name="close-circle" size={18} color={textColor} />
+          <AntDesign name="close-circle" size={16} color={descColor} />
         </TouchableOpacity>
       </Animated.View>
     </GestureDetector>
@@ -166,6 +191,8 @@ export function ToastProvider({ children }: ToastProviderProps) {
       notificationSuccess()
     } else if (item.variant === 'destructive') {
       notificationError()
+    } else if (item.variant === 'warning') {
+      notificationError()
     } else {
       impactLight()
     }
@@ -204,37 +231,51 @@ const styles = StyleSheet.create({
   },
   toast: {
     flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: ms(12),
-    borderWidth: 1,
-    paddingHorizontal: s(14),
-    paddingVertical: vs(12),
+    alignItems: 'flex-start',
+    borderRadius: ms(10),
+    borderWidth: 0.5,
+    paddingHorizontal: s(12),
+    paddingVertical: vs(10),
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.10,
-    shadowRadius: 8,
-    elevation: 5,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 3,
   },
   toastContent: {
     flex: 1,
-    gap: vs(4),
+    gap: vs(2),
   },
   leftIconContainer: {
-    width: s(28),
+    marginTop: vs(1),
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: s(10),
   },
   toastTitle: {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: ms(15),
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
+    lineHeight: ms(18),
   },
   toastDescription: {
     fontFamily: 'Poppins-Regular',
-    fontSize: ms(14),
+    fontSize: ms(12),
+    lineHeight: ms(17),
+    opacity: 0.85,
   },
-  dismissButton: {
-    padding: s(8),
+  actionButton: {
+    paddingHorizontal: s(8),
+    paddingVertical: vs(4),
     marginLeft: s(4),
   },
+  actionLabel: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(12),
+    textDecorationLine: 'underline',
+  },
+  dismissButton: {
+    padding: s(6),
+    marginLeft: s(2),
+    marginTop: vs(0),
+  },
 })

package/src/components/Toggle/Toggle.tsx

@@ -93,7 +93,7 @@ export function Toggle({
 
   const backgroundColor = pressAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: ['transparent', colors.accent],
+    outputRange: ['transparent', colors.surfaceStrong],
   })
 
   const textColor = pressAnim.interpolate({
@@ -117,12 +117,12 @@ export function Toggle({
       return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
     }
 
-    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.mutedForeground)}</>
+    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted)}</>
     const custom = renderProp(icon)
     if (custom) return <>{custom}</>
 
     // Default: empty circle to signal an action is available
-    return <FontAwesome5 name="circle" size={iconSize} color={colors.mutedForeground} />
+    return <FontAwesome5 name="circle" size={iconSize} color={colors.foregroundMuted} />
   }
 
   return (

package/src/index.ts

@@ -1,7 +1,7 @@
 // Theme
 export { ThemeProvider, useTheme } from './theme'
-export type { ThemeProviderProps, ThemeColors, Theme, ColorScheme } from './theme'
-export { defaultLight, defaultDark } from './theme'
+export type { ThemeProviderProps, ThemeColors, ResolvedColors, Theme, ColorScheme } from './theme'
+export { defaultLight, defaultDark, deriveColors } from './theme'
 
 // Components
 export * from './components/Button'
@@ -37,6 +37,9 @@ export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
 export * from './components/MonthPicker'
+export * from './components/MediaCard'
+export * from './components/CategoryStrip'
+export * from './components/Pressable'
 
 // Icon utility
 export { Icon, renderIcon } from './utils/icons'
@@ -49,6 +52,7 @@ export {
   RADIUS,
   SHADOWS,
   BREAKPOINTS,
+  TYPOGRAPHY,
 } from './tokens'
 export type {
   Spacing,
@@ -57,4 +61,6 @@ export type {
   IconSizeKey,
   Radius,
   RadiusKey,
+  Typography,
+  TypographyKey,
 } from './tokens'

package/src/theme/ThemeProvider.tsx

@@ -1,25 +1,25 @@
 import React, { createContext, useContext, useMemo } from 'react'
 import { useColorScheme } from 'react-native'
 import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
-import { defaultLight, defaultDark } from './colors'
+import { defaultLight, defaultDark, deriveColors } from './colors'
 
 const ThemeContext = createContext<ThemeContextValue>({
-  colors: defaultLight,
+  colors: deriveColors(defaultLight, 'light'),
   colorScheme: 'light',
 })
 
 export interface ThemeProviderProps {
   children: React.ReactNode
   /**
-  * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
-  * for `light` and/or `dark` to override the defaults.
-  * @example
-  * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
+   * Optional token overrides per scheme. Supply any of the 12 public ThemeColors
+   * tokens for `light` and/or `dark`. All derived colors are recomputed automatically.
+   * @example
+   * { light: { primary: '#ff385c' }, dark: { primary: '#ff385c' } }
    */
   theme?: Theme
   /**
-   * - `'system'` (default): auto-detects device setting and updates when it changes.
-   * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
+   * - `'system'` (default): auto-detects device setting.
+   * - `'light'` / `'dark'`: forces a specific scheme.
    */
   colorScheme?: ColorScheme
 }
@@ -28,10 +28,11 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
   const systemScheme = useColorScheme() ?? 'light'
   const resolvedScheme: 'light' | 'dark' = colorScheme === 'system' ? systemScheme : colorScheme
 
-  const colors = useMemo<ThemeColors>(() => {
+  const colors = useMemo(() => {
     const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
     const override = resolvedScheme === 'dark' ? theme?.dark : theme?.light
-    return override ? { ...base, ...override } : base
+    const merged: ThemeColors = override ? { ...base, ...override } : base
+    return deriveColors(merged, resolvedScheme)
   }, [resolvedScheme, theme])
 
   return (

package/src/theme/colorUtils.ts

@@ -0,0 +1,80 @@
+// 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 {
+  const clean = hex.replace('#', '')
+  const full = clean.length === 3
+    ? clean.split('').map(c => c + c).join('')
+    : clean
+  if (full.length !== 6) return null
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+  }
+}
+
+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
+}

package/src/theme/colors.ts

@@ -1,54 +1,95 @@
-import { ThemeColors } from './types'
+import { ThemeColors, ResolvedColors } from './types'
+import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken, isDark } from './colorUtils'
+
+// ─── Default palettes (12 tokens each) ───────────────────────────────────────
+// These are the only values consumers need to override.
+// Designed to look great out of the box with no customization.
 
-// Full, explicit theme palettes. No derivation — palettes are direct and fully customizable.
 export const defaultLight: ThemeColors = {
   background: '#ffffff',
-  foreground: '#171717',
+  foreground: '#222222',       // Airbnb ink — deep near-black, never pure black
   card: '#ffffff',
-  cardForeground: '#171717',
-  primary: '#1a1a1a',
+  primary: '#1a1a1a',          // Near-black primary — clean, premium default
   primaryForeground: '#ffffff',
-  secondary: '#f1f1f1',
-  secondaryForeground: '#171717',
-  muted: '#f1f1f1',
-  mutedForeground: '#a2a2a2',
-  accent: '#e4e4e4',
-  accentForeground: '#171717',
-  destructive: '#ef4444',
+  border: '#dddddd',           // Airbnb hairline — light, airy
+  destructive: '#e53935',
   destructiveForeground: '#ffffff',
-  border: '#e5e5e5',
-  input: '#e5e5e5',
-  ring: '#1a1a1a',
   success: '#1a7a45',
   successForeground: '#ffffff',
-  destructiveTint: '#fff5f5',
-  destructiveBorder: '#fecaca',
-  successTint: '#f0fdf4',
-  successBorder: '#bbf7d0',
+  warning: '#e67e00',
+  warningForeground: '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
   background: '#0f0f0f',
   foreground: '#fafafa',
   card: '#1c1c1c',
-  cardForeground: '#fafafa',
   primary: '#fafafa',
   primaryForeground: '#0f0f0f',
-  secondary: '#272727',
-  secondaryForeground: '#fafafa',
-  muted: '#272727',
-  mutedForeground: '#9a9a9a',
-  accent: '#2e2e2e',
-  accentForeground: '#fafafa',
-  destructive: '#dc2626',
-  destructiveForeground: '#ffffff',
   border: '#303030',
-  input: '#2a2a2a',
-  ring: '#fafafa',
-  success: '#166534',
+  destructive: '#ef5350',
+  destructiveForeground: '#ffffff',
+  success: '#2e7d52',
   successForeground: '#ffffff',
-  destructiveTint: '#3b0a0a',
-  destructiveBorder: '#7f1d1d',
-  successTint: '#052e16',
-  successBorder: '#166534',
+  warning: '#f57c00',
+  warningForeground: '#ffffff',
+}
+
+// ─── Color derivation ─────────────────────────────────────────────────────────
+// Takes 12 public tokens → produces full ResolvedColors for component consumption.
+// Dark mode uses bg-blended tints instead of white-blended to stay on-palette.
+
+export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
+  const dark = scheme === 'dark'
+  const bg = t.background
+
+  // Text hierarchy: foreground mixed with background at different opacities
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55)
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38)
+
+  // Surface fills: slight offset from background
+  const surface = dark
+    ? lighten(bg, -0.06)   // slightly lighter than dark bg
+    : darken(bg, 0.04)     // slightly darker than white → #f7f7f7 equivalent
+  const surfaceStrong = dark
+    ? lighten(bg, -0.12)
+    : darken(bg, 0.08)     // #ebebeb equivalent
+
+  // Semantic tints: color blended toward background
+  const destructiveTint = dark
+    ? withAlphaOnDark(t.destructive, 0.15, bg)
+    : withAlphaOnWhite(t.destructive, 0.08)
+  const destructiveBorder = dark
+    ? withAlphaOnDark(t.destructive, 0.45, bg)
+    : withAlphaOnWhite(t.destructive, 0.30)
+
+  const successTint = dark
+    ? withAlphaOnDark(t.success, 0.15, bg)
+    : withAlphaOnWhite(t.success, 0.08)
+  const successBorder = dark
+    ? withAlphaOnDark(t.success, 0.45, bg)
+    : withAlphaOnWhite(t.success, 0.30)
+
+  const warningTint = dark
+    ? withAlphaOnDark(t.warning, 0.15, bg)
+    : withAlphaOnWhite(t.warning, 0.08)
+  const warningBorder = dark
+    ? withAlphaOnDark(t.warning, 0.45, bg)
+    : withAlphaOnWhite(t.warning, 0.30)
+
+  return {
+    ...t,
+    foregroundSubtle,
+    foregroundMuted,
+    surface,
+    surfaceStrong,
+    destructiveTint,
+    destructiveBorder,
+    successTint,
+    successBorder,
+    warningTint,
+    warningBorder,
+    ring: t.primary,       // focus ring always = primary
+    input: t.border,       // input border always = border
+  }
 }

package/src/theme/index.ts

@@ -1,4 +1,4 @@
 export { ThemeProvider, useTheme } from './ThemeProvider'
 export type { ThemeProviderProps } from './ThemeProvider'
-export type { ThemeColors, Theme, ColorScheme } from './types'
-export { defaultLight, defaultDark } from './colors'
+export type { ThemeColors, ResolvedColors, Theme, ColorScheme } from './types'
+export { defaultLight, defaultDark, deriveColors } from './colors'

package/src/theme/types.ts

@@ -1,31 +1,45 @@
+// 12 public tokens — the only values consumers need to supply.
+// All derived colors (tints, borders, surface, text hierarchy) are computed
+// internally by deriveColors() and exposed via useTheme().colors as ResolvedColors.
 export type ThemeColors = {
   background: string
   foreground: string
   card: string
-  cardForeground: string
   primary: string
   primaryForeground: string
-  secondary: string
-  secondaryForeground: string
-  muted: string
-  mutedForeground: string
-  accent: string
-  accentForeground: string
+  border: string
   destructive: string
   destructiveForeground: string
-  border: string
-  input: string
-  ring: string
   success: string
   successForeground: string
+  warning: string
+  warningForeground: string
+}
+
+// Full resolved palette — what components actually consume via useTheme().
+// 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
+
+  // Surface fills (chips unselected, input bg, tag bg, skeleton)
+  surface: string            // background slightly off-canvas
+  surfaceStrong: string      // slightly stronger fill for pressed/hover states
+
+  // Semantic tints (light bg for alert banners, toast backgrounds)
   destructiveTint: string
   destructiveBorder: string
   successTint: string
   successBorder: string
+  warningTint: string
+  warningBorder: string
+
+  // Aliases (ring + input always equal primary + border for coherence)
+  ring: string               // = primary
+  input: string              // = border
 }
 
-// Theme overrides: consumers may supply partial or full `ThemeColors` objects
-// for `theme.light` / `theme.dark` to override only the tokens they want.
 export type Theme = {
   light?: Partial<ThemeColors>
   dark?: Partial<ThemeColors>
@@ -34,6 +48,6 @@ export type Theme = {
 export type ColorScheme = 'light' | 'dark' | 'system'
 
 export type ThemeContextValue = {
-  colors: ThemeColors
+  colors: ResolvedColors
   colorScheme: 'light' | 'dark'
 }