@retray-dev/ui-kit 13.0.0 → 13.4.0

package/src/components/Separator/Separator.tsx

@@ -1,15 +1,33 @@
 import React from 'react'
-import { View, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
 
 export interface SeparatorProps {
   orientation?: 'horizontal' | 'vertical'
+  /** Label shown in the center of a horizontal separator — renders as "── label ──". */
+  label?: string
   style?: ViewStyle
 }
 
-export function Separator({ orientation = 'horizontal', style }: SeparatorProps) {
+export function Separator({ orientation = 'horizontal', label, style }: SeparatorProps) {
   const { colors } = useTheme()
 
+  if (label && orientation !== 'vertical') {
+    return (
+      <View style={[styles.row, style]} accessibilityRole="none">
+        <View style={[styles.line, { backgroundColor: colors.separator }]} />
+        <Text
+          style={[styles.label, { color: colors.foregroundMuted }]}
+          allowFontScaling={true}
+        >
+          {label}
+        </Text>
+        <View style={[styles.line, { backgroundColor: colors.separator }]} />
+      </View>
+    )
+  }
+
   return (
     <View
       style={[
@@ -30,4 +48,19 @@ const styles = StyleSheet.create({
     width: 1,
     height: '100%',
   },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(12),
+  },
+  line: {
+    flex: 1,
+    height: 1,
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
 })

package/src/components/Sheet/Sheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
@@ -13,8 +13,8 @@ import {
 } from '@gorhom/bottom-sheet'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { AntDesign } from '@expo/vector-icons'
-import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { useSheetModal } from '../../hooks/useSheetModal'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export { BottomSheetModalProvider }
@@ -97,27 +97,9 @@ export function Sheet({
 }: SheetProps) {
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
-  const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const { ref, handleDismiss } = useSheetModal(open, onClose)
   const name = useId()
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onClose?.()
-  }, [onClose])
-
-  useEffect(() => {
-    if (open && !isPresentedRef.current) {
-      impactMedium()
-      ref.current?.present()
-      wasOpened.current = true
-      isPresentedRef.current = true
-    } else if (!open && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss()
-    }
-  }, [open])
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop

package/src/components/Sheet/index.ts

@@ -1,2 +1,2 @@
-export { Sheet, BottomSheetModalProvider, SheetTextInput } from './Sheet'
-export type { SheetProps } from './Sheet'
+export { Sheet, SheetHeader, SheetContent, SheetFooter, BottomSheetModalProvider, SheetTextInput } from './Sheet'
+export type { SheetProps, SheetHeaderProps, SheetContentProps, SheetFooterProps } from './Sheet'

package/src/components/Slider/Slider.tsx

@@ -16,6 +16,7 @@ export interface SliderProps {
   showValue?: boolean
   formatValue?: (value: number) => string
   accessibilityLabel?: string
+  accessibilityHint?: string
   disabled?: boolean
   style?: ViewStyle
 }
@@ -31,6 +32,7 @@ export function Slider({
   showValue = false,
   formatValue = (v: number) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style,
 }: SliderProps) {
@@ -50,6 +52,7 @@ export function Slider({
       style={[styles.wrapper, style]}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityValue={{
         min: minimumValue,
         max: maximumValue,

package/src/components/Switch/Switch.tsx

@@ -23,9 +23,10 @@ export interface SwitchProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
-export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
+export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel, accessibilityHint }: SwitchProps) {
   const { colors } = useTheme()
   const isDisabled = !!disabled
 
@@ -41,6 +42,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         touchSoundDisabled
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >

package/src/components/Tabs/Tabs.tsx

@@ -11,19 +11,19 @@ import { s, vs, ms } from '../../utils/scaling'
 import { SPRINGS } from '../../utils/animations'
 import { PressableTab } from '../../utils/pressable'
 
-export interface TabItem {
+export interface TabItem<T extends string = string> {
   label: string
-  value: string
+  value: T
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
 export type TabsVariant = 'pill' | 'underline'
 
-export interface TabsProps {
-  tabs: TabItem[]
+export interface TabsProps<T extends string = string> {
+  tabs: TabItem<T>[]
   variant?: TabsVariant
-  value?: string
-  onValueChange?: (value: string) => void
+  value?: T
+  onValueChange?: (value: T) => void
   children?: React.ReactNode
   style?: ViewStyle
 }
@@ -89,8 +89,8 @@ function TabTrigger({
   )
 }
 
-export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps) {
-  const [internal, setInternal] = useState(tabs[0]?.value ?? '')
+export function Tabs<T extends string = string>({ tabs, variant = 'pill', value, onValueChange, children, style }: TabsProps<T>) {
+  const [internal, setInternal] = useState<T>((tabs[0]?.value ?? '') as T)
   const { colors } = useTheme()
   const active = value ?? internal
 
@@ -117,7 +117,7 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     if (initialised.current) animatePill(active, true)
   }, [active, animatePill])
 
-  const handlePress = (v: string) => {
+  const handlePress = (v: T) => {
     hapticSelection()
     if (!value) setInternal(v)
     onValueChange?.(v)

package/src/components/Tabs/index.ts

@@ -1,2 +1,2 @@
 export { Tabs, TabsContent } from './Tabs'
-export type { TabsProps, TabsContentProps, TabItem } from './Tabs'
+export type { TabsProps, TabsContentProps, TabItem, TabsVariant } from './Tabs'

package/src/components/Text/Text.tsx

@@ -24,6 +24,8 @@ export type TextVariant =
   | 'uppercase-tag'
   | 'button-lg'
   | 'button-sm'
+  | 'code-sm'
+  | 'code-md'
 
 export interface TextProps extends RNTextProps {
   variant?: TextVariant
@@ -50,6 +52,8 @@ const variantStyles: Record<TextVariant, TextStyle> = {
   '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) },
+  'code-sm':      { ...TYPOGRAPHY['code-sm'],      fontSize: ms(TYPOGRAPHY['code-sm'].fontSize),      lineHeight: mvs(TYPOGRAPHY['code-sm'].lineHeight) },
+  'code-md':      { ...TYPOGRAPHY['code-md'],      fontSize: ms(TYPOGRAPHY['code-md'].fontSize),      lineHeight: mvs(TYPOGRAPHY['code-md'].lineHeight) },
 }
 
 // Default color by variant — hierarchy matches Airbnb ink/body/muted pattern
@@ -70,6 +74,8 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'uppercase-tag':'foregroundMuted',
   'button-lg':    'foreground',
   'button-sm':    'foreground',
+  'code-sm':      'foreground',
+  'code-md':      'foreground',
 }
 
 let fontWarned = false
@@ -77,6 +83,7 @@ function warnIfFontsMissing(): void {
   if (fontWarned || typeof __DEV__ === 'undefined' || !__DEV__) return
   fontWarned = true
   if (!expoFontIsLoaded('Sohne-Regular')) {
+    // eslint-disable-next-line no-console
     console.warn('[retray-ui-kit] Sohne fonts not loaded — text falls back to system font.')
   }
 }

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback } from 'react'
+import {
+  SectionList,
+  type SectionListProps,
+  type SectionListRenderItemInfo,
+  RefreshControl,
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+
+export interface VirtualizedListSection<T> {
+  title?: string
+  data: readonly T[]
+}
+
+export interface VirtualizedListProps<T>
+  extends Omit<SectionListProps<T>, 'sections' | 'renderItem' | 'ListEmptyComponent'> {
+  sections: VirtualizedListSection<T>[]
+  renderItem: (info: SectionListRenderItemInfo<T>) => React.ReactElement | null
+  /** Empty state shown when no data. */
+  emptyTitle?: string
+  /** Empty state description. */
+  emptyDescription?: string
+  /** Custom empty state component. Overrides emptyTitle/emptyDescription. */
+  emptyComponent?: React.ReactNode
+  /** Enable pull-to-refresh. */
+  refreshing?: boolean
+  onRefresh?: () => void
+  /** Sticky section headers. Default true. */
+  stickyHeaders?: boolean
+  /** Override section header color. Defaults to foregroundMuted. */
+  headerColor?: string
+  style?: ViewStyle
+}
+
+export function VirtualizedList<T>({
+  sections,
+  renderItem,
+  emptyTitle = 'Sin contenido',
+  emptyDescription,
+  emptyComponent,
+  refreshing = false,
+  onRefresh,
+  stickyHeaders = true,
+  headerColor,
+  style,
+  ...props
+}: VirtualizedListProps<T>) {
+  const { colors } = useTheme()
+
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: VirtualizedListSection<T> }) => {
+      if (!section.title) return null
+      return (
+        <View style={[styles.sectionHeader, { backgroundColor: colors.background }]}>
+          <Text
+            style={[styles.sectionHeaderText, { color: headerColor ?? colors.foregroundMuted }]}
+            allowFontScaling={true}
+          >
+            {section.title}
+          </Text>
+        </View>
+      )
+    },
+    [colors.background, colors.foregroundMuted, headerColor],
+  )
+
+  const keyExtractor = useCallback(
+    (_item: T, index: number) => String(index),
+    [],
+  )
+
+  const flatSections = sections.filter((s) => s.data.length > 0)
+  const hasData = flatSections.length > 0
+
+  if (!hasData) {
+    if (emptyComponent) return <View style={style}>{emptyComponent}</View>
+    return (
+      <View style={[styles.empty, style]}>
+        <Text
+          style={[styles.emptyTitle, { color: colors.foregroundMuted }]}
+          allowFontScaling={true}
+        >
+          {emptyTitle}
+        </Text>
+        {emptyDescription ? (
+          <Text
+            style={[styles.emptyDescription, { color: colors.foregroundMuted }]}
+            allowFontScaling={true}
+          >
+            {emptyDescription}
+          </Text>
+        ) : null}
+      </View>
+    )
+  }
+
+  return (
+    <SectionList
+      sections={flatSections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      keyExtractor={keyExtractor}
+      stickySectionHeadersEnabled={stickyHeaders}
+      refreshControl={
+        onRefresh ? (
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={colors.primary}
+          />
+        ) : undefined
+      }
+      style={style}
+      showsVerticalScrollIndicator={false}
+      {...props}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(16),
+    paddingBottom: vs(6),
+  },
+  sectionHeaderText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
+  empty: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(32),
+    gap: vs(8),
+  },
+  emptyTitle: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  emptyDescription: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+})

package/src/components/VirtualizedList/index.ts

@@ -0,0 +1,2 @@
+export { VirtualizedList } from './VirtualizedList'
+export type { VirtualizedListProps, VirtualizedListSection } from './VirtualizedList'

package/src/hooks/useConfirmDialog.ts

@@ -16,7 +16,6 @@ export interface UseConfirmDialogResult {
 export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
-  const mountedRef = useRef(true)
   const onConfirmRef = useRef(options.onConfirm)
   const onCancelRef = useRef(options.onCancel)
 
@@ -25,12 +24,6 @@ export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDi
     onCancelRef.current = options.onCancel
   })
 
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
   const open = useCallback(() => setVisible(true), [])
 
   const handleConfirm = useCallback(async () => {
@@ -40,10 +33,8 @@ export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDi
     } catch {
       /* consumer handles error in onConfirm */
     } finally {
-      if (mountedRef.current) {
-        setLoading(false)
-        setVisible(false)
-      }
+      setLoading(false)
+      setVisible(false)
     }
   }, [])
 

package/src/hooks/useSheetModal.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import { impactMedium } from '../utils/haptics'
+
+type SheetState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
+export function useSheetModal(visible: boolean, onDismiss?: () => void) {
+  const ref = useRef<BottomSheetModal>(null)
+  const state = useRef<SheetState>('idle')
+  const onDismissRef = useRef(onDismiss)
+  const [tick, setTick] = useState(0)
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss
+  })
+
+  useEffect(() => {
+    if (visible) {
+      if (state.current === 'idle') {
+        state.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        state.current = 'presented'
+      }
+    } else {
+      if (state.current === 'presented' || state.current === 'presenting') {
+        state.current = 'dismissing'
+        ref.current?.dismiss()
+      }
+    }
+  }, [visible, tick])
+
+  const handleDismiss = useCallback(() => {
+    state.current = 'idle'
+    onDismissRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
+  return { ref, handleDismiss }
+}

package/src/index.ts

@@ -39,9 +39,9 @@ export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
 export * from './components/MonthPicker'
+export * from './components/Pressable'
 export * from './components/MediaCard'
 export * from './components/CategoryStrip'
-export * from './components/Pressable'
 export * from './components/DetailRow'
 export * from './components/Form'
 export * from './components/RetrayProvider'
@@ -58,6 +58,9 @@ export * from './components/ImageUpload'
 export * from './components/IconPicker'
 export * from './components/NumberStepper'
 export * from './components/Stats'
+export * from './components/Image'
+export * from './components/ScreenContainer'
+export * from './components/VirtualizedList'
 // 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'.
@@ -86,6 +89,7 @@ export {
 // Hooks
 export { useConfirmDialog } from './hooks/useConfirmDialog'
 export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
+export { useSheetModal } from './hooks/useSheetModal'
 
 
 // Design tokens

package/src/theme/colors.ts

@@ -9,20 +9,6 @@ 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
@@ -30,14 +16,11 @@ function mixWithBackground(fgHex: string, bgHex: string, opacity: number): strin
   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))
+function createColorPair(fg: string, bg: string, dark: boolean): { tint: string; border: string } {
+  return {
+    tint: mixWithBackground(fg, dark ? bg : '#ffffff', dark ? 0.15 : 0.08),
+    border: mixWithBackground(fg, dark ? bg : '#ffffff', dark ? 0.45 : 0.30),
+  }
 }
 
 // ─── Default palettes ─────────────────────────────────────────────────────────
@@ -91,49 +74,26 @@ export const defaultDark: ThemeColors = {
 export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
   const dark = scheme === 'dark'
   const bg = t.background
+  const WHITE = '#ffffff'
+  const BLACK = '#000000'
 
-  // 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)
 
   const surface = dark
-    ? lighten(bg, -0.06)
-    : darken(bg, 0.04)
+    ? mixWithBackground(bg, BLACK, 0.94)
+    : mixWithBackground(bg, BLACK, 0.96)
   const surfaceStrong = dark
-    ? lighten(bg, -0.12)
-    : darken(bg, 0.08)
+    ? mixWithBackground(bg, BLACK, 0.88)
+    : mixWithBackground(bg, BLACK, 0.92)
 
-  // Skeleton needs higher contrast than surface to be visible.
-  // Light: 10% darken (was 4% via surface — invisible). Dark: 10% lighten.
   const skeleton = dark
-    ? lighten(bg, -0.10)
-    : darken(bg, 0.10)
-
-  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)
+    ? mixWithBackground(bg, BLACK, 0.90)
+    : mixWithBackground(bg, BLACK, 0.90)
 
-  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)
+  const { tint: destructiveTint, border: destructiveBorder } = createColorPair(t.destructive, bg, dark)
+  const { tint: successTint, border: successBorder } = createColorPair(t.success, bg, dark)
+  const { tint: warningTint, border: warningBorder } = createColorPair(t.warning, bg, dark)
 
   return {
     ...t,
@@ -153,6 +113,8 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
     ring: t.accent ?? t.primary,
     input: t.border,
-    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16),
+    separator: dark
+      ? mixWithBackground(t.border, WHITE, 0.78)
+      : mixWithBackground(t.border, BLACK, 0.84),
   }
 }

package/src/tokens.ts

@@ -49,17 +49,17 @@ export const SHADOWS = {
   },
   lg: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.16,
-    shadowRadius: 16,
-    elevation: 10,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 8,
   },
   xl: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.24,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.18,
     shadowRadius: 24,
-    elevation: 18,
+    elevation: 16,
   },
 } as const
 
@@ -200,6 +200,20 @@ export const TYPOGRAPHY = {
     lineHeight: 18,
     letterSpacing: 0,
   },
+  'code-sm': {
+    fontFamily: 'SohneMono-Regular',
+    fontSize: 13,
+    fontWeight: '400' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  'code-md': {
+    fontFamily: 'SohneMono-Regular',
+    fontSize: 15,
+    fontWeight: '400' as const,
+    lineHeight: 22,
+    letterSpacing: 0,
+  },
 } as const
 
 // ─── Types ────────────────────────────────────────────────────────────────────