feat : Différents inputs

src/app/(tabs)/index.tsx

@@ -1,14 +1,26 @@
+import { useRouter } from 'expo-router';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { Button } from '@/components/Button';
 import { colors } from '@/theme/colors';
 import { spacing } from '@/theme/spacing';
 import { typography } from '@/theme/typography';
 
 export default function HomeTabScreen() {
+	const router = useRouter();
+
 	return (
 		<View style={styles.container}>
 			<Text style={styles.title}>Accueil</Text>
 			<Text style={styles.description}>Base ecran accueil tab</Text>
+			<View style={styles.actions}>
+				<Button
+					label="Voir la démo des inputs"
+					variant="secondary"
+					onPress={() => router.push('/index-old')}
+					accessibilityLabel="Ouvrir la page d'exemple des champs"
+				/>
+			</View>
 		</View>
 	);
 }
@@ -29,4 +41,7 @@ const styles = StyleSheet.create({
 		...typography.body,
 		color: colors.textSecondary,
 	},
+	actions: {
+		marginTop: spacing[16],
+	},
 });

src/app/index-old.tsx

@@ -1,226 +1,144 @@
-import { ArrowUp, ArrowUpRight, Plus } from 'lucide-react-native';
-import { useCallback, useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Mail } from 'lucide-react-native';
+import { useMemo, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 
-import { Badge } from '@/components/Badge';
-import { Button } from '@/components/Button';
-import { ParticipationSegment } from '@/components/ParticipationSegment';
-import { ThemeChip } from '@/components/ThemeChip';
+import { FormField, Input, PasswordInput, SearchInput, TextArea } from '@/components/form';
+import { Screen } from '@/components/ui/Screen';
 import { colors } from '@/theme/colors';
 import { spacing } from '@/theme/spacing';
 import { typography } from '@/theme/typography';
 
-export default function Index() {
-  const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);
-
-  const themeOptions = useMemo(
-    () => ['Soirée', 'Techno', 'Festival', 'Fête de jeunesse', 'Concert', 'Bal', 'Afterwork', 'Gratuit'],
-    [],
-  );
-
-  const simulateSubmit = useCallback(async () => {
-    await new Promise<void>((resolve) => {
-      setTimeout(resolve, 1300);
-    });
-  }, []);
-
-  const handleThemeSelect = useCallback((value: string, nextSelected: boolean) => {
-    setSelectedThemes((prev) => {
-      if (nextSelected) {
-        if (prev.includes(value)) {
-          return prev;
+function computePasswordStrength(value: string): 0 | 1 | 2 | 3 {
+  if (!value) {
+    return 0;
   }
 
-        return [...prev, value];
+  const hasLower = /[a-z]/.test(value);
+  const hasUpper = /[A-Z]/.test(value);
+  const hasNumber = /\d/.test(value);
+  const hasSpecial = /[^A-Za-z0-9]/.test(value);
+
+  const criteria = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean)
+    .length;
+
+  if (value.length < 6 || criteria <= 1) {
+    return 1;
   }
 
-      return prev.filter((theme) => theme !== value);
-    });
-  }, []);
+  if (value.length >= 10 && criteria >= 3) {
+    return 3;
+  }
+
+  return 2;
+}
+
+export default function InputExamplesScreen() {
+  const [email, setEmail] = useState('lea.mercier@example.ch');
+  const [password, setPassword] = useState('');
+  const [search, setSearch] = useState('néon');
+  const [debouncedSearch, setDebouncedSearch] = useState('néon');
+  const [description, setDescription] = useState('');
+
+  const emailError = useMemo(() => {
+    if (email.length === 0) {
+      return 'Adresse e-mail requise';
+    }
+
+    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    return isValid ? undefined : 'Adresse e-mail invalide';
+  }, [email]);
+
+  const passwordStrength = useMemo(() => computePasswordStrength(password), [password]);
 
   return (
-    <View style={[styles.screen, { backgroundColor: colors.deepBackground }]}>
-      <ScrollView
-        contentContainerStyle={[
-          styles.content,
-          {
-            padding: spacing[24],
-            gap: spacing[24],
-          },
-        ]}
-        showsVerticalScrollIndicator={false}
+    <Screen contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.kicker}>DESIGN SYSTEM · FORM INPUTS</Text>
+        <Text style={styles.title}>Page d'exemple des champs</Text>
+      </View>
+
+      <FormField
+        label="E-mail"
+        required
+        error={emailError}
+        counter={{ value: email.length, max: 120 }}
       >
-        <View style={{ gap: spacing[8] }}>
-          <Text
-            style={[
-              typography.sectionLabel,
-              {
-                color: colors.textSecondary,
-                letterSpacing: 1.1,
-              },
-            ]}
+        <Input
+          accessibilityLabel="E-mail"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+          state={emailError ? 'error' : 'default'}
+          placeholder="lea.mercier@example.ch"
+          left={<Mail color={colors.textSecondary} size={20} />}
+        />
+      </FormField>
+
+      <FormField label="Mot de passe" helper="6 caractères minimum">
+        <PasswordInput
+          accessibilityLabel="Mot de passe"
+          value={password}
+          onChangeText={setPassword}
+          placeholder="••••••••"
+          strength={passwordStrength}
+        />
+      </FormField>
+
+      <FormField label="Recherche" helper={`Terme debouncé: ${debouncedSearch || '—'}`}>
+        <SearchInput
+          accessibilityLabel="Recherche"
+          value={search}
+          onChangeText={setSearch}
+          onDebouncedChange={setDebouncedSearch}
+          debounceMs={300}
+          placeholder="techno la chaux"
+        />
+      </FormField>
+
+      <FormField
+        label="Description d'événement"
+        helper="Ajoute le contexte, l'entrée et les horaires"
+        counter={{ value: description.length, max: 280 }}
       >
-            BOUTONS · HAUTEUR 52 PX · RAYON 14 PX
-          </Text>
-        </View>
-
-        <View style={styles.row}>
-          <View style={styles.cell}>
-            <Button label="Publier" variant="primary" />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Primaire</Text>
-          </View>
-          <View style={styles.cell}>
-            <Button label="Publier" variant="primary" />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Pressé (tap)</Text>
-          </View>
-        </View>
-
-        <View style={styles.row}>
-          <View style={styles.cell}>
-            <Button label="Intéressé" variant="secondary" rightIcon={ArrowUpRight} />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Secondaire</Text>
-          </View>
-          <View style={styles.cell}>
-            <Button label="Publier" variant="primary" disabled />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Désactivé</Text>
-          </View>
-        </View>
-
-        <View style={styles.row}>
-          <View style={styles.cell}>
-            <Button label="Tout voir" variant="ghost" fullWidth={false} style={styles.autoWidthButton} />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Texte</Text>
-          </View>
-          <View style={styles.cell}>
-            <Button label="Envoyer" variant="primary" autoLoading loadingLabel="Envoi..." onPress={simulateSubmit} />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Chargement</Text>
-          </View>
-        </View>
-
-        <View style={styles.row}>
-          <View style={styles.cell}>
-            <Button label="Supprimer" variant="destructive" />
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Destructif</Text>
-          </View>
-          <View style={styles.cell}>
-            <View style={styles.iconRow}>
-              <Button
-                iconOnly
-                variant="secondary"
-                fullWidth={false}
-                icon={ArrowUp}
-                iconOnlyShape="default"
-                accessibilityLabel="Partager"
+        <TextArea
+          accessibilityLabel="Description d'événement"
+          value={description}
+          onChangeText={setDescription}
+          rows={4}
+          maxLength={280}
+          placeholder="Il reste 40 places en prévente pour ce soir..."
         />
-              <Button
-                iconOnly
-                variant="primary"
-                fullWidth={false}
-                icon={Plus}
-                iconOnlyShape="round"
-                accessibilityLabel="Ajouter"
+      </FormField>
+
+      <FormField label="Champ désactivé" helper="Exemple d'état non éditable">
+        <Input
+          accessibilityLabel="Champ désactivé"
+          editable={false}
+          value="Néon session"
+          onChangeText={() => undefined}
         />
-            </View>
-            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Icône / FAB</Text>
-          </View>
-        </View>
-
-        <View style={{ gap: spacing[12] }}>
-          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>PARTICIPATION</Text>
-          <View style={{ gap: spacing[12] }}>
-            <ParticipationSegment defaultValue={{ going: false, interested: false }} />
-            <ParticipationSegment defaultValue={{ going: true, interested: true }} />
-          </View>
-        </View>
-
-        <View style={{ gap: spacing[12] }}>
-          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>BADGES</Text>
-          <View style={styles.badgeWrap}>
-            <Badge variant="verified" />
-            <Badge variant="free" />
-            <Badge variant="complete" />
-            <Badge variant="tonight" />
-            <Badge variant="pro" />
-            <Badge variant="draft" />
-            <Badge date={{ day: '04', month: 'sept' }} />
-          </View>
-        </View>
-
-        <View style={{ gap: spacing[12] }}>
-          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>CHIPS DE THÈME · CAPSULE 34 PX</Text>
-          <View style={styles.chipWrap}>
-            <ThemeChip label="Soirée" selected selectedVariant="gradient" showCross={false} />
-            <ThemeChip label="Festival" selected selectedVariant="accent" />
-            <ThemeChip label="Fête de jeunesse" />
-            <ThemeChip label="Concert" />
-            <ThemeChip label="Bal" />
-            <ThemeChip label="Techno" />
-            <ThemeChip label="Afterwork" />
-            <ThemeChip label="Gratuit" selected selectedVariant="accent" showRemoveIcon={false} />
-          </View>
-        </View>
-
-        <View style={{ gap: spacing[12] }}>
-          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>THÈMES · MULTI-SÉLECTION</Text>
-          <View style={styles.chipWrap}>
-            {themeOptions.map((theme) => {
-              const selected = selectedThemes.includes(theme);
-
-              return (
-                <ThemeChip
-                  key={theme}
-                  label={theme}
-                  value={theme}
-                  selected={selected}
-                  selectedVariant={theme === 'Soirée' ? 'gradient' : 'accent'}
-                  onSelect={handleThemeSelect}
-                />
-              );
-            })}
-          </View>
-        </View>
-      </ScrollView>
-    </View>
+      </FormField>
+    </Screen>
   );
 }
 
 const styles = StyleSheet.create({
-  screen: {
-    flex: 1,
-  },
   content: {
-    paddingBottom: 40,
+    gap: spacing[16],
+    paddingTop: spacing[24],
   },
-  row: {
-    flexDirection: 'row',
-    gap: 14,
+  header: {
+    gap: spacing[8],
+    marginBottom: spacing[8],
   },
-  cell: {
-    flex: 1,
-    gap: 10,
+  kicker: {
+    ...typography.sectionLabel,
+    color: colors.textSecondary,
   },
-  caption: {
-    textAlign: 'center',
-  },
-  iconRow: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 12,
-  },
-  autoWidthButton: {
-    alignSelf: 'center',
-    width: 140,
-  },
-  badgeWrap: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 12,
-    alignItems: 'center',
-  },
-  chipWrap: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 10,
-    alignItems: 'center',
+  title: {
+    ...typography.body,
+    color: colors.textPrimary,
   },
 });

src/components/form/FormField.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+
+export type FieldCounter = {
+  value: number;
+  max: number;
+};
+
+export type FormFieldProps = {
+  label?: string;
+  required?: boolean;
+  helper?: string;
+  error?: string;
+  counter?: FieldCounter;
+  children: ReactNode;
+};
+
+const FormField = ({
+  label,
+  required = false,
+  helper,
+  error,
+  counter,
+  children,
+}: FormFieldProps) => {
+  const message = error ?? helper;
+  const isCounterOverflow =
+    typeof counter?.value === 'number' && typeof counter?.max === 'number'
+      ? counter.value > counter.max
+      : false;
+
+  return (
+    <View style={styles.container}>
+      {label ? (
+        <Text style={styles.label}>
+          {label}
+          {required ? <Text style={styles.required}> *</Text> : null}
+        </Text>
+      ) : null}
+
+      {children}
+
+      {message || counter ? (
+        <View style={styles.bottomRow}>
+          {message ? (
+            <Text
+              style={[styles.message, error ? styles.errorMessage : null]}
+              accessibilityLiveRegion={error ? 'polite' : undefined}
+            >
+              {message}
+            </Text>
+          ) : (
+            <View style={styles.messageSpacer} />
+          )}
+
+          {counter ? (
+            <Text
+              style={[styles.counter, isCounterOverflow ? styles.counterError : null]}
+            >
+              {counter.value} / {counter.max}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  label: {
+    ...typography.inputLabel,
+    color: colors.textBody,
+  },
+  required: {
+    color: colors.primary,
+  },
+  bottomRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  message: {
+    ...typography.helper,
+    color: colors.textSecondary,
+    flex: 1,
+  },
+  errorMessage: {
+    color: colors.danger,
+  },
+  messageSpacer: {
+    flex: 1,
+  },
+  counter: {
+    ...typography.metadataSm,
+    color: colors.textSecondary,
+    fontFamily: fontFamily.mono,
+  },
+  counterError: {
+    color: colors.danger,
+  },
+});
+
+export default FormField;

src/components/form/Input.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react';
+import {
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type TextInputProps,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+export type InputSize = 'md' | 'lg';
+export type InputState = 'default' | 'error' | 'success';
+
+export type InputProps = Omit<TextInputProps, 'style'> & {
+  size?: InputSize;
+  state?: InputState;
+  left?: ReactNode;
+  right?: ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const HEIGHT_BY_SIZE: Record<InputSize, number> = {
+  md: 48,
+  lg: 56,
+};
+
+const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    size = 'md',
+    state = 'default',
+    left,
+    right,
+    containerStyle,
+    editable = true,
+    onFocus,
+    onBlur,
+    placeholderTextColor = colors.inputPlaceholder,
+    ...textInputProps
+  },
+  ref,
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
+    setIsFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur: NonNullable<TextInputProps['onBlur']> = (event) => {
+    setIsFocused(false);
+    onBlur?.(event);
+  };
+
+  const borderColor =
+    state === 'error'
+      ? colors.danger
+      : isFocused
+        ? colors.inputBorderFocus
+        : state === 'success'
+          ? colors.success
+          : colors.inputBorder;
+
+  return (
+    <Pressable
+      onPress={() => {
+        if (editable) {
+          inputRef.current?.focus();
+        }
+      }}
+      style={[
+        styles.container,
+        {
+          height: HEIGHT_BY_SIZE[size],
+          borderColor,
+          backgroundColor: editable ? colors.inputBackground : colors.surface,
+          opacity: editable ? 1 : 0.5,
+        },
+        isFocused && state !== 'error' ? styles.focusRing : null,
+        containerStyle,
+      ]}
+    >
+      {left ? <View style={styles.slot}>{left}</View> : null}
+      <TextInput
+        ref={inputRef}
+        {...textInputProps}
+        editable={editable}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholderTextColor={placeholderTextColor}
+        style={styles.input}
+      />
+      {right ? <View style={styles.slot}>{right}</View> : null}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    gap: 10,
+  },
+  input: {
+    ...typography.input,
+    flex: 1,
+    alignSelf: 'stretch',
+    height: '100%',
+    color: colors.textPrimary,
+    paddingVertical: 0,
+  },
+  slot: {
+    minWidth: 20,
+    minHeight: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  focusRing: {
+    shadowColor: colors.focusRing,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+});
+
+export default Input;

src/components/form/PasswordInput.tsx

@@ -0,0 +1,117 @@
+import { Eye, EyeOff } from 'lucide-react-native';
+import { forwardRef, useState } from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type PasswordStrength = 0 | 1 | 2 | 3;
+
+export type PasswordInputProps = Omit<InputProps, 'right' | 'secureTextEntry'> & {
+  strength?: PasswordStrength;
+  strengthContainerStyle?: StyleProp<ViewStyle>;
+};
+
+const SEGMENT_COUNT = 3;
+
+function getStrengthColor(strength: PasswordStrength): string {
+  if (strength <= 1) {
+    return colors.danger;
+  }
+
+  if (strength === 2) {
+    return colors.warning;
+  }
+
+  return colors.success;
+}
+
+const PasswordInput = forwardRef<TextInput, PasswordInputProps>(
+  function PasswordInput({ strength, strengthContainerStyle, ...props }, ref) {
+    const [revealed, setRevealed] = useState(false);
+    const strengthColor =
+      typeof strength === 'number' ? getStrengthColor(strength) : colors.divider;
+
+    return (
+      <View style={styles.wrapper}>
+        <Input
+          ref={ref}
+          secureTextEntry={!revealed}
+          autoCapitalize="none"
+          autoCorrect={false}
+          textContentType="password"
+          autoComplete="current-password"
+          right={
+            <Pressable
+              onPress={() => setRevealed((prev) => !prev)}
+              style={styles.toggleButton}
+              hitSlop={8}
+              accessibilityRole="button"
+              accessibilityLabel={
+                revealed
+                  ? 'Masquer le mot de passe'
+                  : 'Afficher le mot de passe'
+              }
+            >
+              {revealed ? (
+                <EyeOff color={colors.textSecondary} size={20} />
+              ) : (
+                <Eye color={colors.textSecondary} size={20} />
+              )}
+            </Pressable>
+          }
+          {...props}
+        />
+
+        {typeof strength === 'number' ? (
+          <View style={[styles.strengthRow, strengthContainerStyle]}>
+            {Array.from({ length: SEGMENT_COUNT }).map((_, index) => (
+              <View
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                style={[
+                  styles.strengthSegment,
+                  {
+                    backgroundColor:
+                      index < strength ? strengthColor : colors.divider,
+                  },
+                ]}
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 8,
+  },
+  toggleButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  strengthRow: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  strengthSegment: {
+    flex: 1,
+    height: 3,
+    borderRadius: 999,
+  },
+});
+
+export default PasswordInput;

src/components/form/SearchInput.tsx

@@ -0,0 +1,84 @@
+import { Search, X } from 'lucide-react-native';
+import {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    type ReactNode,
+} from 'react';
+import { Pressable, StyleSheet, TextInput } from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type SearchInputProps = Omit<InputProps, 'left' | 'right'> & {
+  onDebouncedChange?: (value: string) => void;
+  debounceMs?: number;
+};
+
+const SearchInput = forwardRef<TextInput, SearchInputProps>(function SearchInput(
+  { onDebouncedChange, debounceMs = 300, value, onChangeText, ...props },
+  ref,
+) {
+  const inputRef = useRef<TextInput>(null);
+  const valueAsString = typeof value === 'string' ? value : '';
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  useEffect(() => {
+    if (!onDebouncedChange) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      onDebouncedChange(valueAsString);
+    }, debounceMs);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [debounceMs, onDebouncedChange, valueAsString]);
+
+  const clearButton: ReactNode =
+    valueAsString.length > 0 ? (
+      <Pressable
+        onPress={() => {
+          onChangeText?.('');
+          inputRef.current?.clear();
+          inputRef.current?.focus();
+        }}
+        style={styles.clearButton}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel="Vider la recherche"
+      >
+        <X color={colors.textSecondary} size={20} />
+      </Pressable>
+    ) : null;
+
+  return (
+    <Input
+      ref={inputRef}
+      value={value}
+      onChangeText={onChangeText}
+      left={<Search color={colors.textSecondary} size={20} />}
+      right={clearButton}
+      returnKeyType="search"
+      autoCorrect={false}
+      clearButtonMode="never"
+      {...props}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  clearButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default SearchInput;

src/components/form/TextArea.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+
+import { typography } from '@/theme/typography';
+
+import Input, { type InputProps } from './Input';
+
+export type TextAreaProps = Omit<
+  InputProps,
+  'multiline' | 'textAlignVertical' | 'containerStyle'
+> & {
+  rows?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const TextArea = forwardRef<TextInput, TextAreaProps>(function TextArea(
+  { rows = 4, containerStyle, ...props },
+  ref,
+) {
+  const lineHeight =
+    typeof typography.input.lineHeight === 'number'
+      ? typography.input.lineHeight
+      : 22;
+  const minHeight = rows * lineHeight + 24;
+
+  return (
+    <Input
+      ref={ref}
+      multiline
+      textAlignVertical="top"
+      containerStyle={[
+        {
+          minHeight,
+          alignItems: 'flex-start',
+          paddingVertical: 12,
+        },
+        containerStyle,
+      ]}
+      {...props}
+    />
+  );
+});
+
+export default TextArea;

src/components/form/index.ts

@@ -0,0 +1,12 @@
+export { default as FormField } from './FormField';
+export { default as Input } from './Input';
+export { default as PasswordInput } from './PasswordInput';
+export { default as SearchInput } from './SearchInput';
+export { default as TextArea } from './TextArea';
+
+export type { FieldCounter, FormFieldProps } from './FormField';
+export type { InputProps, InputSize, InputState } from './Input';
+export type { PasswordInputProps, PasswordStrength } from './PasswordInput';
+export type { SearchInputProps } from './SearchInput';
+export type { TextAreaProps } from './TextArea';
+

src/theme/colors.ts

@@ -46,6 +46,11 @@ export const colors = {
   canvas: palette.ink950,
   surface: palette.ink800,
   surfaceElevated: palette.ink700,
+  inputBackground: palette.ink700,
+  inputBorder: palette.ink600,
+  inputBorderFocus: palette.violet,
+  inputPlaceholder: palette.grey400,
+  focusRing: 'rgba(123,61,255,0.22)',
   border: palette.ink600,
   /** Séparateur intra-carte, plus léger que `border` */
   divider: 'rgba(255,255,255,0.12)',

src/theme/typography.ts

@@ -100,6 +100,24 @@ export const typography = {
     lineHeight: 22,
     letterSpacing: 0,
   },
+  input: {
+    fontFamily: fontFamily.body,
+    fontSize: 16,
+    lineHeight: 22,
+    letterSpacing: 0,
+  },
+  inputLabel: {
+    fontFamily: fontFamily.bodySemi,
+    fontSize: 13,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  helper: {
+    fontFamily: fontFamily.body,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
   /** Libellé de bouton — 52 px de haut, rayon 14 px */
   button: {
     fontFamily: fontFamily.bodySemi,