@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/Toast/Toast.tsx

@@ -4,10 +4,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 
-// Direct function API — no hook required
 export { sonnerToast as toast }
 
-// useToast — backward-compat wrapper
 export function useToast() {
   return {
     toast: sonnerToast,
@@ -15,7 +13,6 @@ export function useToast() {
   }
 }
 
-// ToastProvider — wraps children + renders the Toaster
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const { colorScheme } = useTheme()
   const insets = useSafeAreaInsets()
@@ -26,7 +23,10 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
       <Toaster
         theme={colorScheme}
         position="top-center"
-        richColors={false}
+        // AUDIT FIX: was richColors={false} — all semantic variants (error, success,
+        // warning) were visually identical. richColors={true} restores correct
+        // semantic coloring so users immediately recognise severity from colour alone.
+        richColors={true}
         gap={vs(8)}
         offset={insets.top + vs(8)}
         visibleToasts={3}
@@ -40,11 +40,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             paddingVertical: vs(10),
           },
           titleStyle: {
-            fontFamily: 'Poppins-Medium',
+            fontFamily: 'Sohne-Medium',
             fontSize: ms(13),
           },
           descriptionStyle: {
-            fontFamily: 'Poppins-Regular',
+            fontFamily: 'Sohne-Regular',
             fontSize: ms(12),
             opacity: 0.85,
           },

package/src/components/Toggle/Toggle.tsx

@@ -1,22 +1,52 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet, TouchableOpacityProps, ViewStyle, View } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-} from 'react-native-reanimated'
+import { StyleSheet, ViewStyle, View, Text } from 'react-native'
+import { EaseView } from 'react-native-ease'
 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 { usePressScale } from '../../utils/usePressScale'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { PRESS_SCALE } from '../../utils/animations'
+import { COLOR_TRANSITION } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
+
+interface ToggleIconProps {
+  pressed: boolean
+  iconName?: string
+  activeIconName?: string
+  icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  iconColor?: string
+  activeIconColor?: string
+  iconSize: number
+  primaryColor: string
+  mutedColor: string
+}
+
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }: ToggleIconProps) {
+  const renderProp = (prop?: React.ReactNode | ((p: boolean) => React.ReactNode)) => {
+    if (!prop) return null
+    if (typeof prop === 'function') return (prop as (p: boolean) => React.ReactNode)(pressed)
+    return prop
+  }
+
+  if (pressed) {
+    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, 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)}</>
+  const custom = renderProp(icon)
+  if (custom) return <>{custom}</>
+
+  return <FontAwesome5 name="circle" size={iconSize} color={mutedColor} />
+}
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
 
-export interface ToggleProps extends TouchableOpacityProps {
+export interface ToggleProps {
   pressed?: boolean
   onPressedChange?: (pressed: boolean) => void
   variant?: ToggleVariant
@@ -40,6 +70,9 @@ export interface ToggleProps extends TouchableOpacityProps {
   iconColor?: string
   /** Override the resolved active icon color. Defaults to `primary`. */
   activeIconColor?: string
+  disabled?: boolean
+  style?: ViewStyle
+  accessibilityLabel?: string
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
@@ -65,88 +98,63 @@ export function Toggle({
   disabled,
   style,
   accessibilityLabel,
-  ...props
 }: ToggleProps) {
   const { colors } = useTheme()
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled,
-  })
-  const progress = useColorTransition(pressed)
 
   const inactiveBorder = variant === 'outline' ? colors.border : 'transparent'
 
-  const surfaceStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
-    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.surfaceStrong]),
-  }))
-
-  const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary]),
-  }))
-
   const iconSize = iconSizeMap[size]
 
-  const LeftIcon = () => {
-    const renderProp = (prop?: any) => {
-      if (!prop) return null
-      if (typeof prop === 'function') return prop(pressed)
-      return prop
-    }
-
-    if (pressed) {
-      if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary)}</>
-      const active = renderProp(activeIcon)
-      if (active) return <>{active}</>
-      return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
-    }
-
-    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted)}</>
-    const custom = renderProp(icon)
-    if (custom) return <>{custom}</>
-
-    return <FontAwesome5 name="circle" size={iconSize} color={colors.foregroundMuted} />
+  const handlePress = () => {
+    hapticSelection()
+    onPressedChange?.(!pressed)
   }
 
   return (
-    <Animated.View
-      style={[scaleStyle, disabled && styles.disabled, style]}
-      {...hoverHandlers}
-    >
-      <TouchableOpacity
-        onPress={() => {
-          hapticSelection()
-          onPressedChange?.(!pressed)
-        }}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+    <View style={[disabled && styles.disabled, style]}>
+      <PressableButton
+        onPress={handlePress}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel ?? label}
         accessibilityState={{ selected: pressed, disabled: !!disabled }}
-        {...props}
       >
-        <Animated.View
-          style={[
-            styles.base,
-            sizeStyles[size],
-            { borderWidth: 2 },
-            surfaceStyle,
-          ]}
+        <EaseView
+          style={[styles.base, sizeStyles[size], { borderWidth: 2 }]}
+          animate={{
+            borderColor: pressed ? colors.primary : inactiveBorder,
+            backgroundColor: pressed ? colors.surfaceStrong : 'transparent',
+          }}
+          transition={COLOR_TRANSITION}
         >
           <View style={styles.inner}>
-            <LeftIcon />
+            <ToggleIcon
+              pressed={pressed}
+              iconName={iconName}
+              activeIconName={activeIconName}
+              icon={icon}
+              activeIcon={activeIcon}
+              iconColor={iconColor}
+              activeIconColor={activeIconColor}
+              iconSize={iconSize}
+              primaryColor={colors.primary}
+              mutedColor={colors.foregroundMuted}
+            />
             {label ? (
-              <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
+              <Text
+                style={[styles.label, { color: pressed ? colors.primary : colors.foreground }]}
+                allowFontScaling={true}
+              >
                 {label}
-              </Animated.Text>
+              </Text>
             ) : null}
           </View>
-        </Animated.View>
-      </TouchableOpacity>
-    </Animated.View>
+        </EaseView>
+      </PressableButton>
+    </View>
   )
 }
 
@@ -164,7 +172,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
 })

package/src/components/VirtualList/VirtualList.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react'
+import { FlatList, FlatListProps, ListRenderItem } from 'react-native'
+
+export interface VirtualListItem {
+  id?: string | number
+}
+
+export interface VirtualListProps<T> extends Omit<FlatListProps<T>, 'getItemLayout'> {
+  /**
+   * Fixed row height in px. When provided, enables `getItemLayout` so the list
+   * skips async measurement — large datasets scroll and `scrollToIndex` jump
+   * without layout passes. Omit only for variable-height rows.
+   */
+  itemHeight?: number
+}
+
+const defaultKeyExtractor = <T,>(item: T, index: number): string => {
+  const id = (item as VirtualListItem | null)?.id
+  return id !== undefined ? String(id) : String(index)
+}
+
+/**
+ * Virtualized list primitive. Thin wrapper over `FlatList` with sane defaults
+ * for the common case: stable keys + optional fixed-height fast path.
+ *
+ * For 10k+ rows, pass `itemHeight` and a `React.memo`-wrapped `renderItem` so
+ * only on-screen rows mount and re-render.
+ *
+ * @example
+ * const renderItem = useCallback(({ item }) => <ListItem title={item.title} onPress={...} />, [])
+ * <VirtualList data={rows} renderItem={renderItem} itemHeight={64} />
+ */
+function VirtualListInner<T>(
+  { itemHeight, keyExtractor, renderItem, ...props }: VirtualListProps<T>,
+  ref: React.Ref<FlatList<T>>,
+) {
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<T> | null | undefined, index: number) => ({
+      length: itemHeight ?? 0,
+      offset: (itemHeight ?? 0) * index,
+      index,
+    }),
+    [itemHeight],
+  )
+
+  return (
+    <FlatList<T>
+      ref={ref}
+      keyExtractor={keyExtractor ?? defaultKeyExtractor}
+      renderItem={renderItem as ListRenderItem<T>}
+      getItemLayout={itemHeight !== undefined ? getItemLayout : undefined}
+      removeClippedSubviews
+      {...props}
+    />
+  )
+}
+
+export const VirtualList = React.forwardRef(VirtualListInner) as <T>(
+  props: VirtualListProps<T> & { ref?: React.Ref<FlatList<T>> },
+) => React.ReactElement

package/src/components/VirtualList/index.ts

@@ -0,0 +1 @@
+export * from './VirtualList'

package/src/fonts.ts

@@ -1,30 +1,51 @@
 /**
- * Poppins font family required by @retray-dev/ui-kit components.
- * 
+ * Sohne font family required by @retray-dev/ui-kit components.
+ *
  * Consumer apps must load these fonts at app root using expo-font:
- * 
+ *
  * @example
  * import { useFonts } from 'expo-font'
- * import { PoppinsFonts } from '@retray-dev/ui-kit'
- * 
+ * import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+ *
  * function App() {
- *   const [fontsLoaded] = useFonts(PoppinsFonts)
+ *   const [fontsLoaded] = useFonts(SohneFonts)
  *   if (!fontsLoaded) return null
  *   // render app
  * }
  */
-export const PoppinsFonts = {
-  'Poppins-Thin':           require('./assets/fonts/Poppins-Thin.ttf'),
-  'Poppins-ExtraLight':     require('./assets/fonts/Poppins-ExtraLight.ttf'),
-  'Poppins-Light':          require('./assets/fonts/Poppins-Light.ttf'),
-  'Poppins-Regular':        require('./assets/fonts/Poppins-Regular.ttf'),
-  'Poppins-Medium':         require('./assets/fonts/Poppins-Medium.ttf'),
-  'Poppins-SemiBold':       require('./assets/fonts/Poppins-SemiBold.ttf'),
-  'Poppins-Bold':           require('./assets/fonts/Poppins-Bold.ttf'),
-  'Poppins-ExtraBold':      require('./assets/fonts/Poppins-ExtraBold.ttf'),
-  'Poppins-Black':          require('./assets/fonts/Poppins-Black.ttf'),
-  'Poppins-Italic':         require('./assets/fonts/Poppins-Italic.ttf'),
-  'Poppins-MediumItalic':   require('./assets/fonts/Poppins-MediumItalic.ttf'),
-  'Poppins-SemiBoldItalic': require('./assets/fonts/Poppins-SemiBoldItalic.ttf'),
-  'Poppins-BoldItalic':     require('./assets/fonts/Poppins-BoldItalic.ttf'),
+// `.otf` assets resolve to a Metro asset module id (number) via require() at the
+// consumer's build time. Declared locally so the dts build does not depend on @types/node.
+declare const require: (path: string) => number
+
+export const SohneFonts = {
+  // Sohne base
+  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
+  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
+  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
+  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
+  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
+  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
+  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
+  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
+  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
+  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
+  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
+  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
+  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
+  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
+  // SohneMono
+  'SohneMono-ExtraLight':         require('./assets/fonts/SohneMono-ExtraLight.otf'),
+  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
+  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
+  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
+  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
+  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
+  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
+  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
+  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
+  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
+  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
+  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
+  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
+  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
 } as const

package/src/index.ts

@@ -31,10 +31,10 @@ export * from './components/Select'
 export * from './components/Toast'
 export * from './components/CurrencyInput'
 export * from './components/CurrencyDisplay'
-// CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
-export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
+export * from './components/ListGroup'
 export * from './components/MenuItem'
+export * from './components/MenuGroup'
 export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
@@ -43,14 +43,39 @@ export * from './components/MediaCard'
 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'
+export * from './components/AppHeader'
+export * from './components/SelectableGrid'
+export * from './components/PricingCard'
+export * from './components/TabBar'
+export * from './components/ImageViewer'
+// HolographicCard is intentionally NOT re-exported here — it depends on the
+// optional peer @shopify/react-native-skia, so it must stay out of the main
+// barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
 
 // Icon utility
-export { Icon, renderIcon } from './utils/icons'
+export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'
 export type { IconProps, IconFamily } from './utils/icons'
 
+// Haptic feedback utilities
+export {
+  selectionAsync,
+  impactLight,
+  impactMedium,
+  impactHeavy,
+  notificationSuccess,
+  notificationError,
+  notificationWarning,
+  richHaptics,
+} from './utils/haptics'
+
 // Design tokens
 export {
   SPACING,

package/src/theme/colors.ts

@@ -1,61 +1,74 @@
 import { ThemeColors, ResolvedColors } from './types'
-import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken, isDark } from './colorUtils'
+import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken } 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.
+// ─── Default palettes ─────────────────────────────────────────────────────────
+// AUDIT FIXES applied:
+//   · accent + accentForeground added — system was fully achromatic
+//   · warning darkened: #e67e00 → #9a5200 (white text: 2.86:1 → 5.86:1 ✓ AA)
+//   · destructive darkened: #e53935 → #c72828 (white text: 4.22:1 → 5.59:1 ✓ AA)
+//   · foreground tweaked #222222 → #1a1a1a (matches primary, 16.1:1 on white ✓)
 
 export const defaultLight: ThemeColors = {
-  background: '#ffffff',
-  foreground: '#222222',       // Airbnb ink — deep near-black, never pure black
-  card: '#ffffff',
-  primary: '#1a1a1a',          // Near-black primary — clean, premium default
-  primaryForeground: '#ffffff',
-  border: '#dddddd',           // Airbnb hairline — light, airy
-  destructive: '#e53935',
+  background:            '#ffffff',
+  foreground:            '#1a1a1a',
+  card:                  '#ffffff',
+  primary:               '#1a1a1a',
+  primaryForeground:     '#ffffff',
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent:                '#d4561d',
+  accentForeground:      '#ffffff',
+  border:                '#dddddd',
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive:           '#c72828',
   destructiveForeground: '#ffffff',
-  success: '#1a7a45',
-  successForeground: '#ffffff',
-  warning: '#e67e00',
-  warningForeground: '#ffffff',
+  success:               '#1a7a45',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning:               '#9a5200',
+  warningForeground:     '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
-  background: '#0f0f0f',
-  foreground: '#fafafa',
-  card: '#1c1c1c',
-  primary: '#fafafa',
-  primaryForeground: '#0f0f0f',
-  border: '#303030',
-  destructive: '#ef5350',
+  background:            '#0f0f0f',
+  foreground:            '#fafafa',
+  card:                  '#1c1c1c',
+  primary:               '#fafafa',
+  primaryForeground:     '#0f0f0f',
+  // AUDIT FIX: lighter accent for dark surfaces (warm amber-orange)
+  accent:                '#e87645',
+  accentForeground:      '#ffffff',
+  border:                '#303030',
+  destructive:           '#ef5350',
   destructiveForeground: '#ffffff',
-  success: '#2e7d52',
-  successForeground: '#ffffff',
-  warning: '#f57c00',
-  warningForeground: '#ffffff',
+  success:               '#2e7d52',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: brighter amber for dark-bg visibility; dark text for contrast
+  // #f5a623 on #0f0f0f = 8.6:1 ✓ as indicator; #0f0f0f text on #f5a623 = 8.6:1 ✓
+  warning:               '#f5a623',
+  warningForeground:     '#0f0f0f',
 }
 
 // ─── 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)
+  // AUDIT FIX: Text hierarchy opacities raised to pass WCAG AA.
+  //   foregroundSubtle was 0.55 → ~#858585 (3.5:1 fail on white)
+  //   foregroundMuted  was 0.38 → ~#ababab (2.2:1 critical fail on white)
+  //   New values on light (#1a1a1a on #ffffff):
+  //     foregroundSubtle 0.70 → ~#646464 (5.9:1 ✓ AA)
+  //     foregroundMuted  0.62 → ~#767676 (4.5:1 ✓ AA minimum)
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.70)
+  const foregroundMuted  = mixWithBackground(t.foreground, bg, 0.62)
 
-  // 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
+    ? lighten(bg, -0.06)
+    : darken(bg, 0.04)
   const surfaceStrong = dark
     ? lighten(bg, -0.12)
-    : darken(bg, 0.08)     // #ebebeb equivalent
+    : darken(bg, 0.08)
 
-  // Semantic tints: color blended toward background
   const destructiveTint = dark
     ? withAlphaOnDark(t.destructive, 0.15, bg)
     : withAlphaOnWhite(t.destructive, 0.08)
@@ -92,7 +105,8 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     overlay: t.overlay ?? 'rgba(0,0,0,0.45)',
     accentResolved: t.accent ?? t.primary,
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
-    ring: t.primary,       // focus ring always = primary
-    input: t.border,       // input border always = border
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16),
   }
 }

package/src/theme/types.ts

@@ -49,6 +49,9 @@ export type ResolvedColors = ThemeColors & {
   // Aliases (ring + input always equal primary + border for coherence)
   ring: string               // = primary
   input: string              // = border
+
+  // Divider/separator line — deliberately darker than border for visibility
+  separator: string
 }
 
 export type Theme = {