1import {
2 Platform,
3 Text as RNText,
4 TextInput as RNTextInput,
5 type TextInputInstance,
6 type TextInputProps as RNTextInputProps,
7 type TextProps as RNTextProps,
8} from "react-native";
9
10import { cn } from "../lib/cn";
11
12export type AppTextProps = RNTextProps & { readonly className?: string };
13
14/**
15 * Thin wrapper around RN Text with default font-family and foreground color.
16 * Uses Uniwind className — no manual style parsing.
17 */
18export function AppText({ className, ...props }: AppTextProps) {
19 return (
20 <RNText
21 className={cn("font-sans text-foreground", className)}
22 selectionColorClassName={Platform.OS === "android" ? "accent-focus/32" : undefined}
23 {...props}
24 />
25 );
26}
27
28export type AppTextInputProps = Omit<RNTextInputProps, "placeholderTextColor"> & {
29 readonly className?: string;
30 readonly ref?: React.Ref<TextInputInstance>;
31};
32
33/**
34 * Thin wrapper around RN TextInput with default input styling.
35 * Uses Uniwind className — no manual style parsing.
36 */
37export function AppTextInput({ className, ref, ...props }: AppTextInputProps) {
38 return (
39 <RNTextInput
40 ref={ref}
41 className={cn(
42 "min-h-13.5 rounded-2xl border border-input-border bg-input px-3.5 py-3 font-sans text-base text-foreground",
43 className,
44 )}
45 placeholderTextColorClassName="accent-placeholder"
46 selectionColorClassName={"accent-focus/32"}
47 cursorColorClassName={"accent-focus"}
48 selectionHandleColorClassName={Platform.OS === "android" ? "accent-focus" : undefined}
49 {...props}
50 />
51 );
52}