feat: modernize Searchbar to Material Design 3

[adrcotfas]

• Modernize the Searchbar to the latest specs: https://m3.material.io/components/search/
• Reuse newly introduced tokens (shape, motion, typography, color etc)
• Extract component specific tokens for easier maintenance.
• Get inspired from TextInput/TextField, Switch, Checkbox, FAB components which have gone through modernization.

Current State

Searchbar

MD3 spec: Search
Specs link: https://m3.material.io/components/search/specs

Color tokens

• Container background: surfaceContainerHigh ✅
• Leading icon: onSurfaceVariant ✅
• Clear / trailing icons: onSurfaceVariant ✅
• Cursor: primary ✅
• Input text color: onSurfaceVariant; should be onSurface
• Placeholder text color: onSurface; should be onSurfaceVariant – these two are swapped ❌

Spacing / sizing

• Bar height: minHeight: 56 ✅
• Bar border radius: 7 * roundness = 28dp (corner.extra-large) ✅ for baseline style
• View mode border radius: 0 (corner.none) ✅ for divided style
• Input font: bodyLarge (16sp, overrides fontSize: 18 in StyleSheet) ✅

Behavior

• Leading icon, clear icon, trailing icon, custom right render prop ✅
• mode="bar" maps to divided/baseline style with elevation ✅
• mode="view" maps to divided search view with bottom Divider ✅
• State layers on icons via IconButton + TouchableRipple ✅
• No focus animation: M3 Expressive (Feb 2025) requires the bar container margins to change from 24dp (unfocused) to 12dp (focused), creating a grow-wider effect; not implemented
• mode values ("bar" / "view") do not align with M3 spec terminology ("contained" / "divided (baseline)")
• M3 Expressive contained style is now the recommended style; the component partially implements the shape but missing the focus margin transition
• No results/suggestions container component: spec anatomy includes a “container for search suggestions or results” as element 6; consumers must build this themselves with no provided primitive

Notes

• Should be moved to its own directory
• The divided style is deprecated in M3 Expressive in favor of contained; mode="view" implements the divided style
• Result grouping with gaps (M3 Expressive) is a consumer-level concern and does not need to be part of the component itself