@retray-dev/ui-kit 4.0.0 → 5.1.0

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
+import { Feather } from '@expo/vector-icons'
 
 const nativeDriver = Platform.OS !== 'web'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
-import { s, vs } from '../../utils/scaling'
+import { s } from '../../utils/scaling'
 
 const TRACK_WIDTH = s(52)
 const TRACK_HEIGHT = s(30)
@@ -19,10 +20,14 @@ export interface SwitchProps {
   style?: ViewStyle
 }
 
+const ICON_SIZE = s(13)
+
 export function Switch({ checked = false, onCheckedChange, disabled, style }: SwitchProps) {
   const { colors } = useTheme()
   const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current
   const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+  const crossOpacity = useRef(new Animated.Value(checked ? 0 : 1)).current
 
   useEffect(() => {
     Animated.parallel([
@@ -36,12 +41,22 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
         duration: 150,
         useNativeDriver: false,
       }),
+      Animated.timing(checkOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 120,
+        useNativeDriver: true,
+      }),
+      Animated.timing(crossOpacity, {
+        toValue: checked ? 0 : 1,
+        duration: 120,
+        useNativeDriver: true,
+      }),
     ]).start()
-  }, [checked, translateX, trackOpacity])
+  }, [checked, translateX, trackOpacity, checkOpacity, crossOpacity])
 
   const trackColor = trackOpacity.interpolate({
     inputRange: [0, 1],
-    outputRange: [colors.muted, colors.primary],
+    outputRange: [colors.surface, colors.primary],
   })
 
   return (
@@ -62,7 +77,14 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
               styles.thumb,
               { backgroundColor: colors.primaryForeground, transform: [{ translateX }] },
             ]}
-          />
+          >
+            <Animated.View style={[styles.iconWrapper, { opacity: checkOpacity }]}>
+              <Feather name="check" size={ICON_SIZE} color={colors.primary} />
+            </Animated.View>
+            <Animated.View style={[styles.iconWrapper, { opacity: crossOpacity }]}>
+              <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
+            </Animated.View>
+          </Animated.View>
         </Animated.View>
       </TouchableOpacity>
     </View>
@@ -90,5 +112,10 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 2,
     elevation: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconWrapper: {
+    position: 'absolute',
   },
 })

package/src/components/Tabs/Tabs.tsx

@@ -12,12 +12,13 @@ export interface TabItem {
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
+// pill: animated sliding pill background (default)
+// underline: 2px bottom border on active tab — Airbnb product-tab style
+export type TabsVariant = 'pill' | 'underline'
+
 export interface TabsProps {
   tabs: TabItem[]
-  /**
-   * Controlled active tab value. When omitted the component manages state internally
-   * (uncontrolled), defaulting to the first tab.
-   */
+  variant?: TabsVariant
   value?: string
   onValueChange?: (value: string) => void
   children?: React.ReactNode
@@ -36,11 +37,13 @@ function TabTrigger({
   isActive,
   onPress,
   onLayout,
+  variant,
 }: {
   tab: TabItem
   isActive: boolean
   onPress: () => void
   onLayout: (e: any) => void
+  variant: TabsVariant
 }) {
   const { colors } = useTheme()
   const scale = useRef(new Animated.Value(1)).current
@@ -53,9 +56,15 @@ function TabTrigger({
     Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
+  const isUnderline = variant === 'underline'
+
   return (
     <TouchableOpacity
-      style={styles.trigger}
+      style={[
+        styles.trigger,
+        isUnderline && styles.triggerUnderline,
+        isUnderline && isActive && { borderBottomColor: colors.primary },
+      ]}
       onPress={onPress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
@@ -71,8 +80,8 @@ function TabTrigger({
           <Text
             style={[
               styles.triggerLabel,
-              { color: isActive ? colors.foreground : colors.mutedForeground },
-              isActive && styles.activeTriggerLabel,
+              { color: isActive ? colors.foreground : colors.foregroundMuted },
+              isActive && (isUnderline ? styles.activeTriggerLabelUnderline : styles.activeTriggerLabel),
             ]}
             allowFontScaling={true}
           >
@@ -84,7 +93,7 @@ function TabTrigger({
   )
 }
 
-export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps) {
+export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? '')
   const { colors } = useTheme()
   const active = value ?? internal
@@ -99,18 +108,8 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
     if (!layout) return
     if (animate) {
       Animated.parallel([
-        Animated.spring(pillX, {
-          toValue: layout.x,
-          useNativeDriver: false,
-          speed: 20,
-          bounciness: 0,
-        }),
-        Animated.spring(pillWidth, {
-          toValue: layout.width,
-          useNativeDriver: false,
-          speed: 20,
-          bounciness: 0,
-        }),
+        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, speed: 20, bounciness: 0 }),
+        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, speed: 20, bounciness: 0 }),
       ]).start()
     } else {
       pillX.setValue(layout.x)
@@ -119,9 +118,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }
 
   useEffect(() => {
-    if (initialised.current) {
-      animatePill(active, true)
-    }
+    if (initialised.current) animatePill(active, true)
   }, [active])
 
   const handlePress = (v: string) => {
@@ -132,32 +129,37 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
 
   return (
     <View style={style}>
-      <View style={[styles.list, { backgroundColor: colors.muted }]}>
-        <Animated.View
-          style={[
-            styles.pill,
-            {
-              backgroundColor: colors.background,
-              position: 'absolute',
-              top: 4,
-              bottom: 4,
-              left: pillX,
-              width: pillWidth,
-              borderRadius: 8,
-              shadowColor: '#000',
-              shadowOffset: { width: 0, height: 1 },
-              shadowOpacity: 0.1,
-              shadowRadius: 2,
-              elevation: 2,
-            },
-          ]}
-        />
+      <View style={[
+        variant === 'pill' ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline,
+      ]}>
+        {variant === 'pill' && (
+          <Animated.View
+            style={[
+              styles.pill,
+              {
+                backgroundColor: colors.background,
+                position: 'absolute',
+                top: 4,
+                bottom: 4,
+                left: pillX,
+                width: pillWidth,
+                borderRadius: 8,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.08,
+                shadowRadius: 2,
+                elevation: 2,
+              },
+            ]}
+          />
+        )}
         {tabs.map((tab) => (
           <TabTrigger
             key={tab.value}
             tab={tab}
             isActive={tab.value === active}
             onPress={() => handlePress(tab.value)}
+            variant={variant}
             onLayout={(e) => {
               const { x, width } = e.nativeEvent.layout
               tabLayouts.current[tab.value] = { x, width }
@@ -182,20 +184,32 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: ms(12),
+    borderRadius: 12,
     padding: s(4),
     gap: s(4),
   },
+  listUnderline: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
   pill: {},
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
     paddingHorizontal: s(10),
-    borderRadius: ms(6),
+    borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
   },
+  triggerUnderline: {
+    flex: 0,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
   triggerInner: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -209,4 +223,8 @@ const styles = StyleSheet.create({
   activeTriggerLabel: {
     fontFamily: 'Poppins-Medium',
   },
+  activeTriggerLabelUnderline: {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: ms(14),
+  },
 })

package/src/components/Text/Text.tsx

@@ -1,32 +1,81 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
 
-export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
+export type TextVariant =
+  | 'display-hero'
+  | 'display-xl'
+  | 'display-lg'
+  | 'display-md'
+  | 'display-sm'
+  | 'title-md'
+  | 'title-sm'
+  | 'body-md'
+  | 'body-sm'
+  | 'caption'
+  | 'caption-sm'
+  | 'badge-text'
+  | 'micro-label'
+  | 'uppercase-tag'
+  | 'button-lg'
+  | 'button-sm'
 
 export interface TextProps extends RNTextProps {
   variant?: TextVariant
   color?: string
 }
 
+// Apply scaling to font/line-height values while preserving all other token props
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1:      { fontFamily: 'Poppins-Bold',     fontSize: ms(40), lineHeight: mvs(52) },
-  h2:      { fontFamily: 'Poppins-Bold',     fontSize: ms(28), lineHeight: mvs(36) },
-  h3:      { fontFamily: 'Poppins-SemiBold', fontSize: ms(22), lineHeight: mvs(30) },
-  body:    { fontFamily: 'Poppins-Regular',  fontSize: ms(17), lineHeight: mvs(26) },
-  caption: { fontFamily: 'Poppins-Regular',  fontSize: ms(13), lineHeight: mvs(20) },
-  label:   { fontFamily: 'Poppins-Medium',   fontSize: ms(15), lineHeight: mvs(22) },
+  'display-hero': { ...TYPOGRAPHY['display-hero'], fontSize: ms(TYPOGRAPHY['display-hero'].fontSize), lineHeight: mvs(TYPOGRAPHY['display-hero'].lineHeight) },
+  'display-xl':   { ...TYPOGRAPHY['display-xl'],   fontSize: ms(TYPOGRAPHY['display-xl'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-xl'].lineHeight) },
+  'display-lg':   { ...TYPOGRAPHY['display-lg'],   fontSize: ms(TYPOGRAPHY['display-lg'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-lg'].lineHeight) },
+  'display-md':   { ...TYPOGRAPHY['display-md'],   fontSize: ms(TYPOGRAPHY['display-md'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-md'].lineHeight) },
+  'display-sm':   { ...TYPOGRAPHY['display-sm'],   fontSize: ms(TYPOGRAPHY['display-sm'].fontSize),   lineHeight: mvs(TYPOGRAPHY['display-sm'].lineHeight) },
+  'title-md':     { ...TYPOGRAPHY['title-md'],     fontSize: ms(TYPOGRAPHY['title-md'].fontSize),     lineHeight: mvs(TYPOGRAPHY['title-md'].lineHeight) },
+  'title-sm':     { ...TYPOGRAPHY['title-sm'],     fontSize: ms(TYPOGRAPHY['title-sm'].fontSize),     lineHeight: mvs(TYPOGRAPHY['title-sm'].lineHeight) },
+  'body-md':      { ...TYPOGRAPHY['body-md'],      fontSize: ms(TYPOGRAPHY['body-md'].fontSize),      lineHeight: mvs(TYPOGRAPHY['body-md'].lineHeight) },
+  'body-sm':      { ...TYPOGRAPHY['body-sm'],      fontSize: ms(TYPOGRAPHY['body-sm'].fontSize),      lineHeight: mvs(TYPOGRAPHY['body-sm'].lineHeight) },
+  caption:        { ...TYPOGRAPHY['caption'],      fontSize: ms(TYPOGRAPHY['caption'].fontSize),      lineHeight: mvs(TYPOGRAPHY['caption'].lineHeight) },
+  'caption-sm':   { ...TYPOGRAPHY['caption-sm'],   fontSize: ms(TYPOGRAPHY['caption-sm'].fontSize),   lineHeight: mvs(TYPOGRAPHY['caption-sm'].lineHeight) },
+  'badge-text':   { ...TYPOGRAPHY['badge-text'],   fontSize: ms(TYPOGRAPHY['badge-text'].fontSize),   lineHeight: mvs(TYPOGRAPHY['badge-text'].lineHeight) },
+  'micro-label':  { ...TYPOGRAPHY['micro-label'],  fontSize: ms(TYPOGRAPHY['micro-label'].fontSize),  lineHeight: mvs(TYPOGRAPHY['micro-label'].lineHeight) },
+  'uppercase-tag':{ ...TYPOGRAPHY['uppercase-tag'],fontSize: ms(TYPOGRAPHY['uppercase-tag'].fontSize),lineHeight: mvs(TYPOGRAPHY['uppercase-tag'].lineHeight) },
+  'button-lg':    { ...TYPOGRAPHY['button-lg'],    fontSize: ms(TYPOGRAPHY['button-lg'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-lg'].lineHeight) },
+  'button-sm':    { ...TYPOGRAPHY['button-sm'],    fontSize: ms(TYPOGRAPHY['button-sm'].fontSize),    lineHeight: mvs(TYPOGRAPHY['button-sm'].lineHeight) },
 }
 
-export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {
+// Default color by variant — hierarchy matches Airbnb ink/body/muted pattern
+const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroundSubtle' | 'foregroundMuted'>> = {
+  'display-hero': 'foreground',
+  'display-xl':   'foreground',
+  'display-lg':   'foreground',
+  'display-md':   'foreground',
+  'display-sm':   'foreground',
+  'title-md':     'foreground',
+  'title-sm':     'foreground',
+  'body-md':      'foregroundSubtle',  // running text — slightly softer
+  'body-sm':      'foregroundSubtle',
+  caption:        'foregroundMuted',
+  'caption-sm':   'foregroundMuted',
+  'badge-text':   'foreground',
+  'micro-label':  'foreground',
+  'uppercase-tag':'foregroundMuted',
+  'button-lg':    'foreground',
+  'button-sm':    'foreground',
+}
+
+export function Text({ variant = 'body-md', color, style, children, ...props }: TextProps) {
   const { colors } = useTheme()
 
-  const defaultColor = variant === 'caption' ? colors.mutedForeground : colors.foreground
+  const colorKey = defaultColorVariant[variant] ?? 'foreground'
+  const resolvedColor = color ?? colors[colorKey]
 
   return (
     <RNText
-      style={[variantStyles[variant], { color: color ?? defaultColor }, style]}
+      style={[variantStyles[variant], { color: resolvedColor }, style]}
       allowFontScaling={true}
       {...props}
     >

package/src/components/Textarea/Textarea.tsx

@@ -64,7 +64,7 @@ export function Textarea({
           setFocused(false)
           onBlur?.(e)
         }}
-        placeholderTextColor={colors.mutedForeground}
+        placeholderTextColor={colors.foregroundMuted}
         allowFontScaling={true}
         {...props}
       />
@@ -72,7 +72,7 @@ export function Textarea({
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )
@@ -88,11 +88,12 @@ const styles = StyleSheet.create({
   },
   input: {
     fontFamily: 'Poppins-Regular',
-    borderWidth: 1,
+    borderWidth: 2,
     borderRadius: ms(8),
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     fontSize: ms(15),
+    includeFontPadding: false,
   },
   helperText: {
     fontFamily: 'Poppins-Regular',

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'