feat : Différents inputs

feat : BottomBar + Base component + Clean Nativewind
2026-09-08 21:44:07 +02:00 · 2026-09-08 19:50:28 +02:00
25 changed files with 1228 additions and 920 deletions
--- a/app.json
+++ b/app.json
@@ -21,7 +21,6 @@
      "package": "com.anonymous.bahla"
    },
    "web": {
-      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,9 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: [
-      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
-      "nativewind/babel",
-    ],
-  };
-};
--- a/metro.config.js
+++ b/metro.config.js
@@ -1,8 +0,0 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
-
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname);
-
-module.exports = withNativeWind(config, { input: './src/global.css' })
--- a/nativewind-env.d.ts
+++ b/nativewind-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="nativewind/types" />
--- a/output.css
+++ b/output.css
@@ -1,608 +0,0 @@
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-/*
-! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
-*/
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  /* 4 */
-  font-feature-settings: normal;
-  /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
-  font-size: 1em;
-  /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  /* 1 */
-  font-feature-settings: inherit;
-  /* 1 */
-  font-variation-settings: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  letter-spacing: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
-  -webkit-appearance: button;
-  /* 1 */
-  background-color: transparent;
-  /* 2 */
-  background-image: none;
-  /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-
-:root {
-  --css-interop-darkMode: media;
-  --css-interop: true;
-  --css-interop-nativewind: true;
-}
-
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
-.flex {
-  display: flex;
-}
-
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
-}
-
-.font-bold {
-  font-weight: 700;
-}
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
    "@react-navigation/bottom-tabs": "^7.18.18",
    "@tanstack/react-query": "^5.102.8",
    "axios": "^1.20.0",
-    "babel-preset-expo": "^57.0.9",
    "expo": "~56.0.5",
    "expo-blur": "~56.0.4",
    "expo-constants": "~56.0.16",
@@ -31,8 +30,6 @@
    "expo-web-browser": "~56.0.5",
    "lucide-react": "^1.38.0",
    "lucide-react-native": "^1.38.0",
-    "nativewind": "^4.2.6",
-    "prettier-plugin-tailwindcss": "^0.5.14",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "react-native": "0.85.3",
@@ -43,7 +40,6 @@
    "react-native-svg": "15.15.4",
    "react-native-web": "~0.21.0",
    "react-native-worklets": "0.8.3",
-    "tailwindcss": "^3.4.19",
    "zod": "^4.5.4",
    "zustand": "^5.0.15"
  },
--- a/src/app/(tabs)/index.tsx
+++ b/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],
+	},
 });
--- a/src/app/(tabs)/my-events.tsx
+++ b/src/app/(tabs)/my-events.tsx
@@ -1,15 +1,22 @@
 import { StyleSheet, Text, View } from 'react-native';

+import { Header } from '@/components/ui/Header';
+import { Screen } from '@/components/ui/Screen';
+
 import { colors } from '@/theme/colors';
 import { spacing } from '@/theme/spacing';
 import { typography } from '@/theme/typography';

 export default function MyEventsTabScreen() {
 	return (
+		<Screen>
+			<Header variant="large" overline="12 événements" title="Mes events" />
+
 			<View style={styles.container}>
 				<Text style={styles.title}>My Events</Text>
 				<Text style={styles.description}>Base ecran mes events</Text>
 			</View>
+		</Screen>
 	);
 }

--- a/src/app/index-old.tsx
+++ b/src/app/index-old.tsx
@@ -1,228 +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';

-import '../global.css';
-
-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,
  },
 });
--- a/src/components/form/FormField.tsx
+++ b/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;
--- a/src/components/form/Input.tsx
+++ b/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;
--- a/src/components/form/PasswordInput.tsx
+++ b/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;
--- a/src/components/form/SearchInput.tsx
+++ b/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;
--- a/src/components/form/TextArea.tsx
+++ b/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;
--- a/src/components/form/index.ts
+++ b/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';
+
--- a/src/components/navigation/BahlaTabBar
+++ b/src/components/navigation/BahlaTabBar
@@ -0,0 +1,278 @@
+/* ------------------------------------------------------------------ *
+ * BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
+ *
+ * Une seule implémentation pour les deux parcours : le verre dépoli,
+ * le calcul de safe area, le rendu des items et l'accessibilité sont
+ * identiques. Seul le bouton central change, et il est optionnel.
+ *
+ * Usage :
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} />}>                    // utilisateur
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create"   // organisateur
+ *                          onFabPress={openCreateSheet} />}>
+ *
+ * Dépendances : expo-blur · expo-linear-gradient ·
+ *               react-native-safe-area-context · react-native-svg
+ * ------------------------------------------------------------------ */
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Tabs } from 'expo-router';
+import { useCallback, type ComponentProps } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+import { Plus } from 'lucide-react-native';
+
+/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
+export const TAB_BAR_BASE_HEIGHT = 52;
+const FAB_SIZE = 62;
+
+/**
+ * expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
+ * obtient un rectangle transparent et des libellés illisibles.
+ */
+const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
+
+type ExpoRouterTabBarProps = Parameters<
+  NonNullable<ComponentProps<typeof Tabs>['tabBar']>
+>[0];
+
+type Props = ExpoRouterTabBarProps & {
+  /**
+   * Nom de la route factice qui occupe l'emplacement central.
+   * Absent côté utilisateur — il n'y a pas de bouton flottant.
+   */
+  fabRouteName?: string;
+  /** Appelé à la place d'une navigation quand on presse le bouton central. */
+  onFabPress?: () => void;
+  /** Libellé lu par les lecteurs d'écran sur le bouton central. */
+  fabAccessibilityLabel?: string;
+};
+
+export function BahlaTabBar({
+  state,
+  descriptors,
+  navigation,
+  fabRouteName,
+  onFabPress,
+  fabAccessibilityLabel = 'Créer',
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const handlePress = useCallback(
+    (routeKey: string, routeName: string, isFocused: boolean) => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: routeKey,
+        canPreventDefault: true,
+      });
+      if (isFocused || event.defaultPrevented) return;
+      navigation.navigate(routeName as never);
+    },
+    [navigation],
+  );
+
+  const handleLongPress = useCallback(
+    (routeKey: string) => {
+      navigation.emit({ type: 'tabLongPress', target: routeKey });
+    },
+    [navigation],
+  );
+
+  return (
+    <BlurView
+      tint="dark"
+      intensity={SUPPORTS_BLUR ? 20 : 0}
+      blurMethod='dimezisBlurViewSdk31Plus'
+      style={[
+        styles.bar,
+        {
+          height: TAB_BAR_BASE_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          // Sans flou, le fond translucide ne suffit pas : on opacifie.
+          backgroundColor: SUPPORTS_BLUR
+            ? colors.deepBackground
+            : 'rgba(10,10,18,0.96)',
+        },
+      ]}
+    >
+      {state.routes.map((route: (typeof state.routes)[number], index: number) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+        const tint = isFocused ? colors.primary : colors.textSecondary;
+
+        /* --- Emplacement central : bouton flottant, pas un onglet ---- */
+        if (fabRouteName && route.name === fabRouteName) {
+          return (
+            <View key={route.key} style={styles.fabSlot}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={fabAccessibilityLabel}
+                onPress={onFabPress}
+                style={({ pressed }) => [
+                  styles.fab,
+                  pressed && styles.fabPressed,
+                ]}
+              >
+                <LinearGradient
+                  colors={gradients.signature}
+                  start={gradientDirection.start}
+                  end={gradientDirection.end}
+                  style={styles.fabGradient}
+                >
+                  <Plus size={28} color={colors.onPrimary} />
+                </LinearGradient>
+              </Pressable>
+            </View>
+          );
+        }
+
+        /* --- Onglet ordinaire ---------------------------------------- */
+        const label =
+          typeof options.tabBarLabel === 'string'
+            ? options.tabBarLabel
+            : (options.title ?? route.name);
+
+        return (
+          <Pressable
+            key={route.key}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
+            onPress={() => handlePress(route.key, route.name, isFocused)}
+            onLongPress={() => handleLongPress(route.key)}
+            style={styles.item}
+          >
+            <View>
+              {options.tabBarIcon?.({
+                focused: isFocused,
+                color: tint,
+                size: 23,
+              })}
+              {options.tabBarBadge != null && (
+                <View style={styles.badge}>
+                  <Text style={styles.badgeText} numberOfLines={1}>
+                    {options.tabBarBadge}
+                  </Text>
+                </View>
+              )}
+            </View>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: tint,
+                  fontFamily: isFocused
+                    ? fontFamily.bodySemi
+                    : fontFamily.bodyMedium,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </BlurView>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingTop: 8,
+    borderTopWidth: StyleSheet.hairlineWidth * 2,
+    borderTopColor: colors.border,
+    overflow: 'visible',
+  } as ViewStyle,
+
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 5,
+    // La zone tactile couvre toute la hauteur de la barre.
+    alignSelf: 'stretch',
+    paddingTop: 2,
+  },
+
+  label: {
+    ...typography.tabLabel,
+    fontFamily: undefined, // remplacé plus haut selon l'état
+  },
+
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 4,
+    borderRadius: 999,
+    backgroundColor: colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  badgeText: {
+    ...typography.overlineSm,
+    fontSize: 9,
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.onPrimary,
+  },
+
+  /* Le créneau central est plus étroit que les onglets : 84 px fixes,
+     comme la colonne du même nom dans la maquette. */
+  fabSlot: {
+    width: 84,
+    alignItems: 'center',
+  },
+
+  fab: {
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    aspectRatio: 1,
+    borderRadius: 15,
+    // Remonte au-dessus de la barre et découpe un anneau dans le fond.
+    marginTop: -30,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    borderWidth: 3,
+    borderColor: colors.deepBackground,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 14 },
+    shadowOpacity: 0.85,
+    shadowRadius: 17,
+    elevation: 12,
+  },
+
+  fabPressed: {
+    transform: [{ scale: 0.94 }],
+    shadowOpacity: 0.5,
+  },
+
+  fabGradient: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default BahlaTabBar;
--- a/src/components/navigation/BahlaTabBar.tsx
+++ b/src/components/navigation/BahlaTabBar.tsx
@@ -13,17 +13,15 @@
 * Dépendances : expo-blur · expo-linear-gradient ·
 *               react-native-safe-area-context · react-native-svg
 * ------------------------------------------------------------------ */
-import { BlurView } from 'expo-blur';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Tabs } from 'expo-router';
 import { useCallback, type ComponentProps } from 'react';
 import {
-  Platform,
  Pressable,
  StyleSheet,
  Text,
  View,
-  type ViewStyle,
+  type ViewStyle
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';

@@ -33,13 +31,9 @@ import { Plus } from 'lucide-react-native';

 /** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
 export const TAB_BAR_BASE_HEIGHT = 52;
-const FAB_SIZE = 62;
-
-/**
- * expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
- * obtient un rectangle transparent et des libellés illisibles.
- */
-const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
+const FAB_SIZE = 72;
+const FAB_RADIUS = 24;
+const FAB_LIFT = 40;

 type ExpoRouterTabBarProps = Parameters<
  NonNullable<ComponentProps<typeof Tabs>['tabBar']>
@@ -88,18 +82,13 @@ export function BahlaTabBar({
  );

  return (
-    <BlurView
-      tint="dark"
-      intensity={SUPPORTS_BLUR ? 20 : 0}
+    <View
      style={[
        styles.bar,
        {
          height: TAB_BAR_BASE_HEIGHT + insets.bottom,
          paddingBottom: insets.bottom,
-          // Sans flou, le fond translucide ne suffit pas : on opacifie.
-          backgroundColor: SUPPORTS_BLUR
-            ? colors.deepBackground
-            : 'rgba(10,10,18,0.96)',
+          backgroundColor: colors.deepBackground,
        },
      ]}
    >
@@ -112,25 +101,29 @@ export function BahlaTabBar({
        if (fabRouteName && route.name === fabRouteName) {
          return (
            <View key={route.key} style={styles.fabSlot}>
+              <View style={styles.fabShell}>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel={fabAccessibilityLabel}
                onPress={onFabPress}
-                style={({ pressed }) => [
-                  styles.fab,
-                  pressed && styles.fabPressed,
-                ]}
+                style={styles.fabPressable}
              >
+                {({ pressed }) => (
                  <LinearGradient
                    colors={gradients.signature}
                    start={gradientDirection.start}
                    end={gradientDirection.end}
-                  style={styles.fabGradient}
+                    style={[
+                      styles.fabGradient,
+                      pressed && styles.fabGradientPressed,
+                    ]}
                  >
                    <Plus size={28} color={colors.onPrimary} />
                  </LinearGradient>
+                )}
              </Pressable>
              </View>
+            </View>
          );
        }

@@ -181,7 +174,7 @@ export function BahlaTabBar({
          </Pressable>
        );
      })}
-    </BlurView>
+    </View>
  );
 }

@@ -237,41 +230,51 @@ const styles = StyleSheet.create({
  /* Le créneau central est plus étroit que les onglets : 84 px fixes,
     comme la colonne du même nom dans la maquette. */
  fabSlot: {
-    width: 84,
+    width: 96,
    alignItems: 'center',
+    overflow: 'visible',
+    zIndex: 20,
  },

-  fab: {
+  fabShell: {
    width: FAB_SIZE,
    height: FAB_SIZE,
    aspectRatio: 1,
-    borderRadius: 15,
+    borderRadius: FAB_RADIUS,
    // Remonte au-dessus de la barre et découpe un anneau dans le fond.
-    marginTop: -30,
+    marginTop: -FAB_LIFT,
    overflow: 'hidden',
    alignSelf: 'center',
+    zIndex: 20,
    borderWidth: 3,
    borderColor: colors.deepBackground,
    shadowColor: colors.primary,
-    shadowOffset: { width: 0, height: 14 },
-    shadowOpacity: 0.85,
-    shadowRadius: 17,
-    elevation: 12,
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.9,
+    shadowRadius: 20,
+    elevation: 18,
  },

-  fabPressed: {
-    transform: [{ scale: 0.94 }],
-    shadowOpacity: 0.5,
+  fabPressable: {
+    width: '100%',
+    height: '100%',
+    borderRadius: FAB_RADIUS,
+    overflow: 'hidden',
  },

  fabGradient: {
    width: '100%',
    height: '100%',
    aspectRatio: 1,
-    borderRadius: 15,
+    borderRadius: FAB_RADIUS,
    alignItems: 'center',
    justifyContent: 'center',
  },
+
+  fabGradientPressed: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0.92,
+  },
 });

 export default BahlaTabBar;
--- a/src/components/organizer/CreateActionSheet.tsx
+++ b/src/components/organizer/CreateActionSheet.tsx
@@ -15,7 +15,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';

 import { colors, gradientDirection, gradients } from '@/theme/colors';
 import { typography } from '@/theme/typography';
-import { Plus } from 'lucide-react-native';
+import { MessageSquare, Plus } from 'lucide-react-native';

 type Props = {
  visible: boolean;
@@ -32,6 +32,7 @@ export function CreateActionSheet({
 }: Props) {
  const insets = useSafeAreaInsets();

+  /* TODO - rendre dynamique en fonction du club connecté */
  return (
    <Modal
      visible={visible}
@@ -40,14 +41,28 @@ export function CreateActionSheet({
      onRequestClose={onClose}
    >
      <Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
+      
      <View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
        <View style={styles.handle} />

+        <Text
+          numberOfLines={1}
+          style={[
+            styles.modalTitle,
+          ]}
+        >
+          Créer - Club Vertige 
+        </Text> 
+
+        
+
        <Pressable
          accessibilityRole="button"
          onPress={onCreateEvent}
-          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+          style={styles.rowPressable}
        >
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed, { borderColor: colors.primary, borderWidth: 0.5 }]}>
              <LinearGradient
                colors={gradients.signature}
                start={gradientDirection.start}
@@ -60,20 +75,26 @@ export function CreateActionSheet({
                <Text style={styles.rowTitle}>Créer un événement</Text>
                <Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
              </View>
+            </View>
+          )}
        </Pressable>

        <Pressable
          accessibilityRole="button"
          onPress={onCreatePost}
-          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+          style={styles.rowPressable}
        >
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed]}>
              <View style={[styles.iconBox, styles.iconBoxPlain]}>
-            <Plus size={22} color={colors.tertiary} />
+                <MessageSquare size={22} color={colors.tertiary} />
              </View>
              <View style={styles.rowText}>
                <Text style={styles.rowTitle}>Publier un post</Text>
                <Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
              </View>
+            </View>
+          )}
        </Pressable>
      </View>
    </Modal>
@@ -117,7 +138,13 @@ const styles = StyleSheet.create({
    borderColor: colors.border,
  },

-  rowPressed: { opacity: 0.7 },
+  rowPressable: {
+    borderRadius: 18,
+  },
+
+  rowPressed: {
+    opacity: 0.7,
+  },

  iconBox: {
    width: 48,
@@ -133,6 +160,13 @@ const styles = StyleSheet.create({
    borderColor: colors.border,
  },

+  modalTitle: {
+    ...typography.sectionLabel,
+    color: colors.textPrimary,
+    fontSize: 14,
+    marginBottom: 10,
+  },
+
  rowText: { flex: 1, gap: 2 },

  rowTitle: {
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -0,0 +1,91 @@
+/* ------------------------------------------------------------------ *
+ * Header — trois variantes : large, compact, overlay.
+ * ------------------------------------------------------------------ */
+import { useRouter } from 'expo-router';
+import { ChevronLeft } from 'lucide-react-native';
+import { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+type Props = {
+  title?: string;
+  /** Overline mono au-dessus du titre (variante large uniquement). */
+  overline?: string;
+  variant?: 'large' | 'compact' | 'overlay';
+  /** Flèche retour. Auto : true sauf en `large`. */
+  back?: boolean;
+  onBack?: () => void;
+  /** Actions à droite — icônes 44×44 déjà encapsulées par l'appelant. */
+  right?: ReactNode;
+};
+
+export function Header({ title, overline, variant = 'large', back, onBack, right }: Props) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const showBack = back ?? variant !== 'large';
+  const glass = variant === 'overlay';
+
+  return (
+    <View
+      style={[
+        styles.row,
+        variant === 'overlay' && [styles.absolute, { paddingTop: insets.top + 8 }],
+        variant === 'compact' && styles.compactRow,
+      ]}
+    >
+      {showBack && (
+        <Pressable
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Retour"
+          onPress={onBack ?? (() => router.back())}
+          style={[styles.iconButton, glass && styles.iconButtonGlass]}
+        >
+          <ChevronLeft size={22} color={colors.textPrimary} strokeWidth={1.8} />
+        </Pressable>
+      )}
+
+      <View style={[styles.titleWrap, variant === 'compact' && styles.titleWrapCentered]}>
+        {overline && variant === 'large' && <Text style={styles.overline}>{overline}</Text>}
+        {title && (
+          <Text
+            numberOfLines={1}
+            style={variant === 'large' ? styles.titleLarge : styles.titleCompact}
+          >
+            {title}
+          </Text>
+        )}
+      </View>
+
+      {right ?? (showBack && variant === 'compact' ? <View style={styles.spacer} /> : null)}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 6, paddingBottom: 14 },
+  compactRow: { paddingBottom: 10 },
+  absolute: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, paddingHorizontal: 20 },
+
+  titleWrap: { flex: 1, minWidth: 0, gap: 2 },
+  titleWrapCentered: { alignItems: 'center' },
+  overline: { ...typography.overlineSm, color: colors.textSecondary },
+  titleLarge: { ...typography.screenTitleLg, color: colors.textPrimary },
+  titleCompact: { ...typography.cardTitle, color: colors.textPrimary },
+
+  iconButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonGlass: { backgroundColor: colors.glassFill, borderColor: 'transparent' },
+  spacer: { width: 44 },
+});
--- a/src/components/ui/Screen.tsx
+++ b/src/components/ui/Screen.tsx
@@ -0,0 +1,75 @@
+/* ------------------------------------------------------------------ *
+ * Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
+ * ------------------------------------------------------------------ */
+import { ReactNode } from 'react';
+import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+
+/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
+import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
+export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;
+
+type Props = {
+  children: ReactNode;
+  /** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
+  layout?: 'scroll' | 'static';
+  /** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
+  edgeToEdge?: boolean;
+  /** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
+  tabBar?: boolean;
+  /** Halo violet décoratif en haut à gauche (B1, C1). */
+  halo?: boolean;
+  /** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
+  gutter?: number;
+  contentContainerStyle?: ViewStyle;
+};
+
+export function Screen({
+  children,
+  layout = 'scroll',
+  edgeToEdge = false,
+  tabBar = true,
+  halo = false,
+  gutter = 20,
+  contentContainerStyle,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const padding: ViewStyle = {
+    paddingTop: edgeToEdge ? 0 : insets.top,
+    paddingHorizontal: gutter,
+    paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
+  };
+
+  return (
+    <View style={styles.root}>
+      {halo && <View pointerEvents="none" style={styles.halo} />}
+      {layout === 'scroll' ? (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[padding, contentContainerStyle]}
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.deepBackground },
+  flex: { flex: 1 },
+  halo: {
+    position: 'absolute',
+    width: 380,
+    height: 380,
+    borderRadius: 190,
+    top: -140,
+    left: -60,
+    backgroundColor: colors.secondarySoft,
+  },
+});
--- a/src/global.css
+++ b/src/global.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/src/stores/authStore.ts
+++ b/src/stores/authStore.ts
@@ -13,7 +13,7 @@ const DEV_MOCK_SESSION_ENABLED = true;
 const DEV_MOCK_SESSION: Session = {
    userId: 'dev-user',
    token: 'dev-token',
-    role: 'org',
+    role: 'user',
 };

 type AuthState = {
--- a/src/theme/colors.ts
+++ b/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)',
--- a/src/theme/typography.ts
+++ b/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,
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["src/**/*.{html,js,ts,jsx,tsx}"],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
Author	SHA1	Message	Date
Yaël Perret	845a9509b7	feat : Différents inputs	2026-09-08 21:44:07 +02:00
Yaël Perret	8ed48a6cd3	feat : BottomBar + Base component + Clean Nativewind	2026-09-08 19:50:28 +02:00