@alveole/storybook 2.0.0-alpha → 2.0.0-alpha.2

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export * from './components/JsonBlock';
 export * from './components/UIKitColumn';
 export * from './components/UIKitTopBar';
 export * from './navigation';
+export * from './pages/FormulairesPage';
 export * from './pages/InstallationPage';
+export * from './pages/MigrationV2Page';
 export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -3,7 +3,9 @@ export * from './components/JsonBlock';
 export * from './components/UIKitColumn';
 export * from './components/UIKitTopBar';
 export * from './navigation';
+export * from './pages/FormulairesPage';
 export * from './pages/InstallationPage';
+export * from './pages/MigrationV2Page';
 export * from './pages/PhilosophyPage';
 export * from './pages/UIKitHomePage';
 export * from './pages/UIKitPage';

package/dist/pages/FormulairesPage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type FormulairesPageProps = {
+    beforeContent?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    footerContent?: React.ReactNode;
+};
+export declare const FormulairesPage: ({ beforeContent, sidebar, footerContent }: FormulairesPageProps) => React.JSX.Element;
+//# sourceMappingURL=FormulairesPage.d.ts.map

package/dist/pages/FormulairesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormulairesPage.d.ts","sourceRoot":"","sources":["../../src/pages/FormulairesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2CAA2C,oBAAoB,sBAiB9F,CAAC"}

package/dist/pages/FormulairesPage.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchorHeading, Box, MarkdownDescription } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
+import { JsonBlock } from '../components/JsonBlock';
+import { SECTIONS_DE_FORMULAIRES } from './formulaires';
+import { Anatomie, Clavier, Fichiers, FormulaireDeBase, Sources, Validation } from './formulaires.stories';
+const DEMOS = { Anatomie, Clavier, Fichiers, FormulaireDeBase, Validation };
+const SectionDeFormulairesView = ({ titre, markdown, demo }) => {
+    const { text } = useTheme();
+    const Demo = demo ? DEMOS[demo] : null;
+    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown }), demo && Demo ? (_jsxs(Box, { display: "flex", gap: 8, children: [_jsx(Demo, {}), _jsx(JsonBlock, { language: "tsx", value: Sources.storySources[demo]() })] })) : null] }));
+};
+export const FormulairesPage = ({ beforeContent, sidebar, footerContent }) => {
+    return (_jsx(EcranDeCatalogue, { title: "Formulaires", description: "Construire un formulaire avec les champs Alveole", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_FORMULAIRES.map(({ titre }) => titre), children: _jsx(Box, { display: "flex", gap: 0, children: SECTIONS_DE_FORMULAIRES.map(section => (_jsx(SectionDeFormulairesView, { ...section }, section.titre))) }) }));
+};

package/dist/pages/MigrationV2Page.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type MigrationV2PageProps = {
+    beforeContent?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    footerContent?: React.ReactNode;
+};
+export declare const MigrationV2Page: ({ beforeContent, sidebar, footerContent }: MigrationV2PageProps) => React.JSX.Element;
+//# sourceMappingURL=MigrationV2Page.d.ts.map

package/dist/pages/MigrationV2Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MigrationV2Page.d.ts","sourceRoot":"","sources":["../../src/pages/MigrationV2Page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2CAA2C,oBAAoB,sBAoB9F,CAAC"}

package/dist/pages/MigrationV2Page.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchorHeading, Box, MarkdownDescription } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import { EcranDeCatalogue } from '../components/EcranDeCatalogue';
+import { INTRODUCTION_DE_MIGRATION_V2, SECTIONS_DE_MIGRATION_V2 } from './migrationV2';
+const SectionDeMigrationV2 = ({ titre, markdown }) => {
+    const { text } = useTheme();
+    return (_jsxs(Box, { display: "flex", gap: 8, mb: '400', children: [_jsx(AnchorHeading, { style: text.Titres['H4 - SM'], children: titre }), _jsx(MarkdownDescription, { children: markdown })] }));
+};
+export const MigrationV2Page = ({ beforeContent, sidebar, footerContent }) => {
+    return (_jsx(EcranDeCatalogue, { title: "Migration v2", description: "Migrer une application d'Alveole 1.x vers 2.0", sidebar: sidebar, beforeContent: beforeContent, footerContent: footerContent, sommaire: SECTIONS_DE_MIGRATION_V2.map(({ titre }) => titre), children: _jsxs(Box, { display: "flex", gap: 0, children: [_jsx(Box, { mb: '400', children: _jsx(MarkdownDescription, { children: INTRODUCTION_DE_MIGRATION_V2 }) }), SECTIONS_DE_MIGRATION_V2.map(section => (_jsx(SectionDeMigrationV2, { ...section }, section.titre)))] }) }));
+};

package/dist/pages/formulaires.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Le texte de la page Formulaires. Chaque section peut nommer une démo de
+ * formulaires.stories.tsx : la page la rend en direct, avec son code dessous.
+ */
+import type { StorySourceName } from './formulaires.stories.sources';
+export type SectionDeFormulaires = {
+    titre: string;
+    markdown: string;
+    demo?: StorySourceName;
+};
+export declare const SECTIONS_DE_FORMULAIRES: readonly SectionDeFormulaires[];
+//# sourceMappingURL=formulaires.d.ts.map

package/dist/pages/formulaires.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulaires.d.ts","sourceRoot":"","sources":["../../src/pages/formulaires.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAErE,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,SAAS,oBAAoB,EAkGlE,CAAC"}

package/dist/pages/formulaires.js

@@ -0,0 +1,99 @@
+export const SECTIONS_DE_FORMULAIRES = [
+    {
+        titre: 'Anatomie d’un champ',
+        markdown: `Un **champ** est un \`FormControl\` qui enveloppe un **contrôle de saisie** (\`TextInput\`, \`Select\`,
+\`DateInput\`, \`FileInput\`…). Le libellé (\`label\`), l'aide (\`hint\`), l'astérisque (\`required\`) et le
+message (\`error\` / \`success\`) vont sur \`FormControl\` ; le contrôle reste nu.
+
+\`error\` est passé **aux deux** : \`FormControl\` affiche le message sous le champ, le contrôle colore sa
+bordure. \`FormControl\` relie aussi le libellé au contrôle pour les lecteurs d'écran : ne pas
+reconstruire un champ à la main avec \`FormControlLabel\` et \`FormControlCaption\`.
+
+Les contrôles sont **contrôlés** : \`value\` + \`onChangeText\` pour les textes, \`value\` + \`onChange\`
+pour les autres, \`checked\` + \`onCheckedChange\` pour \`Checkbox\`.`,
+        demo: 'Anatomie',
+    },
+    {
+        titre: 'Formulaire de base',
+        markdown: `Tout formulaire est enveloppé dans \`Form\`. Sur mobile, il ferme le clavier au toucher en dehors
+d'un champ ; sur le web, il rend un vrai \`<form>\` : **Entrée** déclenche le bouton \`type="submit"\`.
+
+Pendant l'envoi, passer \`isLoading\` au bouton plutôt que de le masquer : il garde sa place et
+empêche le double envoi. Les champs sont espacés par un \`Box\` en colonne.`,
+        demo: 'FormulaireDeBase',
+    },
+    {
+        titre: 'Validation et erreurs',
+        markdown: `Afficher l'erreur **après la première soumission**, pas à la première frappe : on ne reproche pas
+un champ que l'utilisateur n'a pas encore fini de remplir. \`success\` confirme une saisie vérifiée.
+
+Une erreur renvoyée par le serveur pour un champ précis va sur **ce champ** (\`error\`), pas dans une
+alerte globale. Une erreur sans champ (réseau, droits) va dans une \`Alert\` au-dessus du bouton.`,
+        demo: 'Validation',
+    },
+    {
+        titre: 'Fichiers',
+        markdown: `\`FileInput\` ouvre le sélecteur (galerie, appareil photo, documents) ; \`type\` restreint les
+fichiers acceptés (\`image/*\`, \`application/pdf\`). Sur le web, \`FileDropZone\` autour du formulaire
+permet de déposer les fichiers n'importe où : elle partage la même \`value\` que le \`FileInput\`.
+Une seule \`FileDropZone\` par formulaire, liée à un seul champ de fichier.`,
+        demo: 'Fichiers',
+    },
+    {
+        titre: 'Clavier sur mobile',
+        markdown: `Placer le formulaire dans une \`Page scrollable\` : elle remonte le champ actif au-dessus du
+clavier. Enchaîner les champs avec \`returnKeyType="next"\` et \`onSubmitEditing\` qui donne le focus
+au suivant ; le dernier champ prend \`returnKeyType="done"\`. Choisir le bon \`type\` (\`email\`, \`tel\`,
+\`password\`) donne le bon clavier et l'autoremplissage.`,
+        demo: 'Clavier',
+    },
+    {
+        titre: 'Recommandation : react-hook-form',
+        markdown: `**Recommandé** : react-hook-form, utilisé dans les applications construites avec Alveole. Alveole
+n'en dépend pas, à installer dans l'application. Un \`Controller\` relie
+chaque champ ; le message vient de \`fieldState.error\` et va, comme toujours, sur \`FormControl\` et
+sur le contrôle.
+
+\`\`\`tsx
+import { Controller, useForm } from 'react-hook-form';
+import { Button, Form, FormControl, TextInput } from '@alveole/components';
+
+type Contact = { email: string };
+
+export const ContactForm = ({ onSave }: { onSave: (c: Contact) => Promise<void> }) => {
+  const { control, handleSubmit, setError, formState } = useForm<Contact>({ defaultValues: { email: '' } });
+
+  const soumettre = handleSubmit(async contact => {
+    try {
+      await onSave(contact);
+    } catch {
+      // Une erreur serveur rattachée à un champ s'affiche sur ce champ.
+      setError('email', { message: 'Adresse déjà utilisée' });
+    }
+  });
+
+  return (
+    <Form>
+      <Controller
+        control={control}
+        name="email"
+        rules={{ required: 'Adresse requise' }}
+        render={({ field, fieldState }) => (
+          <FormControl label="Adresse email" error={fieldState.error?.message} required>
+            <TextInput
+              type="email"
+              value={field.value}
+              onChangeText={field.onChange}
+              onBlur={field.onBlur}
+              error={fieldState.error?.message}
+            />
+          </FormControl>
+        )}
+      />
+      <Button type="submit" variant="primary" title="Enregistrer" isLoading={formState.isSubmitting} onPress={soumettre} />
+    </Form>
+  );
+};
+\`\`\``,
+    },
+];

package/dist/pages/formulaires.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Anatomie: () => React.JSX.Element;
+export declare const FormulaireDeBase: () => React.JSX.Element;
+export declare const Validation: () => React.JSX.Element;
+export declare const Fichiers: () => React.JSX.Element;
+export declare const Clavier: () => React.JSX.Element;
+export * as Sources from './formulaires.stories.sources';
+//# sourceMappingURL=formulaires.stories.d.ts.map

package/dist/pages/formulaires.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulaires.stories.d.ts","sourceRoot":"","sources":["../../src/pages/formulaires.stories.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,eAAO,MAAM,QAAQ,yBAQpB,CAAC;AAOF,eAAO,MAAM,gBAAgB,yBAyB5B,CAAC;AAEF,eAAO,MAAM,UAAU,yBAiBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,yBAWpB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAcnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/pages/formulaires.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Checkbox, FileDropZone, FileInput, Form, FormControl, Select, TextInput, } from '@alveole/components';
+import React, { useState } from 'react';
+// Les démos de la page Formulaires. Le code affiché sous chaque démo est extrait de ce fichier
+// par generate:sources : ce que la page montre est ce qui tourne.
+export const Anatomie = () => {
+    const [email, setEmail] = useState('jean@');
+    const error = email.includes('.') ? undefined : 'Adresse email invalide';
+    return (_jsx(FormControl, { label: "Adresse email", hint: "Votre email professionnel", error: error, required: true, children: _jsx(TextInput, { type: "email", value: email, onChangeText: setEmail, error: error }) }));
+};
+const PAYS = [
+    { value: 'fr', label: 'France' },
+    { value: 'be', label: 'Belgique' },
+];
+export const FormulaireDeBase = () => {
+    const [nom, setNom] = useState('');
+    const [pays, setPays] = useState(null);
+    const [cgu, setCgu] = useState(false);
+    const [envoi, setEnvoi] = useState(false);
+    const soumettre = () => {
+        setEnvoi(true);
+        setTimeout(() => setEnvoi(false), 1500);
+    };
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Nom", required: true, children: _jsx(TextInput, { value: nom, onChangeText: setNom }) }), _jsx(FormControl, { label: "Pays", children: _jsx(Select, { placeholder: "Choisir...", options: PAYS, value: pays, onChange: setPays }) }), _jsx(Checkbox, { label: "J'accepte les conditions", checked: cgu, onCheckedChange: c => setCgu(c === true) }), _jsx(Button, { type: "submit", variant: "primary", title: "Envoyer", isLoading: envoi, disabled: !cgu, onPress: soumettre })] }) }));
+};
+export const Validation = () => {
+    const [email, setEmail] = useState('');
+    const [soumis, setSoumis] = useState(false);
+    // L'erreur n'apparaît qu'après la première soumission : on ne reproche pas un champ pas encore rempli.
+    const error = soumis && !email.includes('@') ? 'Adresse email invalide' : undefined;
+    const success = soumis && !error ? 'Adresse valide' : undefined;
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Adresse email", error: error, success: success, required: true, children: _jsx(TextInput, { type: "email", value: email, onChangeText: setEmail, error: error, success: success }) }), _jsx(Button, { type: "submit", variant: "primary", title: "Valider", onPress: () => setSoumis(true) })] }) }));
+};
+export const Fichiers = () => {
+    const [pieces, setPieces] = useState(null);
+    return (_jsx(FileDropZone, { value: pieces, onChange: setPieces, multiple: true, children: _jsx(Box, { p: 16, children: _jsx(FormControl, { label: "Pi\u00E8ces jointes", hint: "Glissez des fichiers n'importe o\u00F9 sur le formulaire.", children: _jsx(FileInput, { value: pieces, onChange: setPieces, multiple: true }) }) }) }));
+};
+export const Clavier = () => {
+    const prenom = React.useRef(null);
+    return (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 16, children: [_jsx(FormControl, { label: "Nom", children: _jsx(TextInput, { returnKeyType: "next", submitBehavior: "submit", onSubmitEditing: () => prenom.current?.focus() }) }), _jsx(FormControl, { label: "Pr\u00E9nom", children: _jsx(TextInput, { ref: prenom, returnKeyType: "done" }) })] }) }));
+};
+export * as Sources from './formulaires.stories.sources';

package/dist/pages/formulaires.stories.sources.d.ts

@@ -0,0 +1,14 @@
+export declare const Anatomie: () => string;
+export declare const FormulaireDeBase: () => string;
+export declare const Validation: () => string;
+export declare const Fichiers: () => string;
+export declare const Clavier: () => string;
+export declare const storySources: {
+    readonly Anatomie: () => string;
+    readonly FormulaireDeBase: () => string;
+    readonly Validation: () => string;
+    readonly Fichiers: () => string;
+    readonly Clavier: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=formulaires.stories.sources.d.ts.map

package/dist/pages/formulaires.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulaires.stories.sources.d.ts","sourceRoot":"","sources":["../../src/pages/formulaires.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA8Y,CAAC;AAEpa,eAAO,MAAM,gBAAgB,cAAk+B,CAAC;AAEhgC,eAAO,MAAM,UAAU,cAAq1B,CAAC;AAE72B,eAAO,MAAM,QAAQ,cAAmc,CAAC;AAEzd,eAAO,MAAM,OAAO,cAAsiB,CAAC;AAE3jB,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/pages/formulaires.stories.sources.js

@@ -0,0 +1,14 @@
+// This file is generated. Do not edit manually.
+// Source: src/pages/formulaires.stories.tsx
+export const Anatomie = () => "export const Anatomie = () => {\n  const [email, setEmail] = useState('jean@');\n  const error = email.includes('.') ? undefined : 'Adresse email invalide';\n  return (\n    <FormControl label=\"Adresse email\" hint=\"Votre email professionnel\" error={error} required>\n      <TextInput type=\"email\" value={email} onChangeText={setEmail} error={error} />\n    </FormControl>\n  );\n};";
+export const FormulaireDeBase = () => "export const FormulaireDeBase = () => {\n  const [nom, setNom] = useState('');\n  const [pays, setPays] = useState<string | null>(null);\n  const [cgu, setCgu] = useState(false);\n  const [envoi, setEnvoi] = useState(false);\n\n  const soumettre = () => {\n    setEnvoi(true);\n    setTimeout(() => setEnvoi(false), 1500);\n  };\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Nom\" required>\n          <TextInput value={nom} onChangeText={setNom} />\n        </FormControl>\n        <FormControl label=\"Pays\">\n          <Select placeholder=\"Choisir...\" options={PAYS} value={pays} onChange={setPays} />\n        </FormControl>\n        <Checkbox label=\"J'accepte les conditions\" checked={cgu} onCheckedChange={c => setCgu(c === true)} />\n        <Button type=\"submit\" variant=\"primary\" title=\"Envoyer\" isLoading={envoi} disabled={!cgu} onPress={soumettre} />\n      </Box>\n    </Form>\n  );\n};";
+export const Validation = () => "export const Validation = () => {\n  const [email, setEmail] = useState('');\n  const [soumis, setSoumis] = useState(false);\n  // L'erreur n'apparaît qu'après la première soumission : on ne reproche pas un champ pas encore rempli.\n  const error = soumis && !email.includes('@') ? 'Adresse email invalide' : undefined;\n  const success = soumis && !error ? 'Adresse valide' : undefined;\n\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Adresse email\" error={error} success={success} required>\n          <TextInput type=\"email\" value={email} onChangeText={setEmail} error={error} success={success} />\n        </FormControl>\n        <Button type=\"submit\" variant=\"primary\" title=\"Valider\" onPress={() => setSoumis(true)} />\n      </Box>\n    </Form>\n  );\n};";
+export const Fichiers = () => "export const Fichiers = () => {\n  const [pieces, setPieces] = useState<FileInputValue>(null);\n  return (\n    <FileDropZone value={pieces} onChange={setPieces} multiple>\n      <Box p={16}>\n        <FormControl label=\"Pièces jointes\" hint=\"Glissez des fichiers n'importe où sur le formulaire.\">\n          <FileInput value={pieces} onChange={setPieces} multiple />\n        </FormControl>\n      </Box>\n    </FileDropZone>\n  );\n};";
+export const Clavier = () => "export const Clavier = () => {\n  const prenom = React.useRef<React.ComponentRef<typeof TextInput>>(null);\n  return (\n    <Form>\n      <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n        <FormControl label=\"Nom\">\n          <TextInput returnKeyType=\"next\" submitBehavior=\"submit\" onSubmitEditing={() => prenom.current?.focus()} />\n        </FormControl>\n        <FormControl label=\"Prénom\">\n          <TextInput ref={prenom} returnKeyType=\"done\" />\n        </FormControl>\n      </Box>\n    </Form>\n  );\n};";
+export const storySources = {
+    Anatomie,
+    FormulaireDeBase,
+    Validation,
+    Fichiers,
+    Clavier,
+};

package/dist/pages/migrationV2.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Le guide de migration 1.x → 2.0. Il est écrit pour être donné tel quel à un agent IA : la page
+ * le rend en Markdown, une section par titre de niveau 2, pour que le sommaire et les ancres
+ * suivent le texte sans rien déclarer.
+ */
+export type SectionDeMigration = {
+    titre: string;
+    markdown: string;
+};
+export declare const INTRODUCTION_DE_MIGRATION_V2 = "Guide destin\u00E9 \u00E0 \u00EAtre donn\u00E9 tel quel \u00E0 un agent IA (ou suivi \u00E0 la main) pour migrer une application\nde `@alveole/*` 1.10 vers 2.0. Chaque section donne : **comment trouver** les appels, **comment les\nr\u00E9\u00E9crire**, et les **pi\u00E8ges** qui font \u00E9chouer le typecheck ou changent le comportement.\n\nAucun alias n'est conserv\u00E9 : tout ce qui est retir\u00E9 casse au typecheck. Le typecheck est donc la\nliste de travail de r\u00E9f\u00E9rence.";
+export declare const SECTIONS_DE_MIGRATION_V2: readonly SectionDeMigration[];
+//# sourceMappingURL=migrationV2.d.ts.map

package/dist/pages/migrationV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"migrationV2.d.ts","sourceRoot":"","sources":["../../src/pages/migrationV2.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,4BAA4B,gfAKV,CAAC;AAEhC,eAAO,MAAM,wBAAwB,EAAE,SAAS,kBAAkB,EA6lBjE,CAAC"}

package/dist/pages/migrationV2.js

@@ -0,0 +1,612 @@
+export const INTRODUCTION_DE_MIGRATION_V2 = `Guide destiné à être donné tel quel à un agent IA (ou suivi à la main) pour migrer une application
+de \`@alveole/*\` 1.10 vers 2.0. Chaque section donne : **comment trouver** les appels, **comment les
+réécrire**, et les **pièges** qui font échouer le typecheck ou changent le comportement.
+
+Aucun alias n'est conservé : tout ce qui est retiré casse au typecheck. Le typecheck est donc la
+liste de travail de référence.`;
+export const SECTIONS_DE_MIGRATION_V2 = [
+    {
+        titre: 'Procédure',
+        markdown: `1. Mettre à jour les paquets en version exacte :
+   \`@alveole/components\`, \`@alveole/core\`, \`@alveole/theme\`, \`@alveole/storybook\`,
+   \`@alveole/eslint-config\` → \`2.0.0\`.
+2. Mettre à jour les peer dependencies (section [Dépendances](#1-dependances)).
+3. Lancer les recherches \`git grep\` de chaque section, appliquer les réécritures **section par
+   section** (l'ordre du document est l'ordre conseillé : les champs avant les icônes, car un même
+   appel est souvent concerné par les deux).
+4. Lancer le typecheck du projet. Chaque erreur restante correspond à une ligne d'un tableau
+   ci-dessous.
+5. Lancer les tests et vérifier visuellement les formulaires (libellé, erreur, bordure rouge).
+
+Règle générale à retenir : **un champ ne porte plus son libellé**. Le libellé, l'aide (\`hint\`) et
+le message (\`error\` / \`success\`) vont sur \`FormControl\`, le contrôle nu va dedans.
+
+\`\`\`tsx
+<FormControl label="…" hint="…" error={error} required>
+  <Controle … error={error} />
+</FormControl>
+\`\`\`
+
+\`error\` est passé **aux deux** : \`FormControl\` affiche le message sous le champ, le contrôle colore
+sa bordure. Avant, le \`*Field\` faisait les deux tout seul.`,
+    },
+    {
+        titre: '1. Dépendances',
+        markdown: `\`\`\`bash
+git grep -nE "lucide-react-native|@lucide/lab|@react-native-picker/picker|expo-linear-gradient|react-native-code-highlighter" -- package.json
+\`\`\`
+
+| Paquet                                                                                                                       | Action                                                                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| \`expo-web-browser\`                                                                                                           | **Ajouter** (\`npx expo install expo-web-browser\`) : requis par \`A\` / \`Link\` (\`target\`).   |
+| \`expo-image-picker\` | **Ajouter** (\`npx expo install expo-image-picker\`) : requis par \`FileInput\` (galerie, appareil photo). |
+| \`lucide-react-native\`, \`@lucide/lab\`, \`@react-native-picker/picker\`, \`expo-linear-gradient\`, \`react-native-code-highlighter\` | Plus requis par Alveole. Retirer seulement si l'application ne les importe pas elle-même. |
+| \`eslint\`                                                                                                                     | \`@alveole/eslint-config\` accepte maintenant ESLint 9 **ou** 10.                           |
+
+Vérifier qu'un paquet est encore importé avant de le retirer :
+
+\`\`\`bash
+git grep -nE "from '(lucide-react-native|@lucide/lab|@react-native-picker/picker|expo-linear-gradient)'"
+\`\`\``,
+    },
+    {
+        titre: '2. Champs de saisie *Field → FormControl + contrôle',
+        markdown: `\`\`\`bash
+git grep -nE "\\b(TextField|TextareaField|EmailField|EmailInput|PasswordField|PhoneField|PhoneInput|NumberField|OtpField|FileField|FormControlNumberInput|FormControlOtpInput|FormControlFileInput)\\b"
+\`\`\`
+
+| Avant                                              | Après (dans un \`FormControl\`)                                           |
+| -------------------------------------------------- | ----------------------------------------------------------------------- |
+| \`TextField\`                                        | \`TextInput\`                                                             |
+| \`TextareaField\`                                    | \`TextareaInput\`                                                         |
+| \`EmailField\`, \`EmailInput\`                         | \`TextInput type="email"\`                                                |
+| \`PasswordField\`                                    | \`TextInput type="password"\`                                             |
+| \`PhoneField\`, \`PhoneInput\`                         | \`TextInput type="tel"\`                                                  |
+| \`NumberField\`, \`FormControlNumberInput\`            | \`NumberInput\`                                                           |
+| \`OtpField\`, \`FormControlOtpInput\`                  | \`OtpInput\`                                                              |
+| \`FileField\`, \`FormControlFileInput\`                | \`FileInput\`                                                             |
+| type \`FileFieldValue\`, \`FormControlFileInputValue\` | \`FileInputValue\`                                                        |
+| types \`*FieldProps\`                                | \`TextInputProps\`, \`NumberInputProps\`, \`OtpInputProps\`, \`FileInputProps\` |
+
+Props qui **montent sur \`FormControl\`** : \`label\`, \`labelRight\`, \`hint\`, \`error\`, \`success\`,
+\`required\`, \`disabled\` (et \`disabled\` reste aussi sur le contrôle).
+Tout le reste reste sur le contrôle.
+
+### Piège n°1 : \`onChange\` des champs texte
+
+Les anciens \`TextField\`, \`TextareaField\`, \`EmailField\`, \`PasswordField\`, \`PhoneField\`, \`PhoneInput\`
+avaient un alias \`onChange(text: string)\`. **Il disparaît** : \`TextInput\` reprend les props de
+React Native, où \`onChange\` reçoit un **événement**, pas une chaîne. Le typecheck ne le signale
+pas toujours (ex. \`onChange={setValue}\` avec un \`setState\` non typé).
+
+➡️ Sur \`TextInput\` / \`TextareaInput\` : **renommer systématiquement \`onChange\` en \`onChangeText\`.**
+
+Ne concerne **pas** \`NumberInput\`, \`OtpInput\`, \`FileInput\`, \`Select\`, \`DateInput\`, \`TimeInput\`,
+\`DurationInput\` : leur \`onChange\` reçoit toujours la valeur.
+
+### Piège n°1 bis : \`FileInput\` affiche désormais une liste de fichiers
+
+\`\`\`bash
+git grep -nE "<(FileInput|DragAndDropFile)\\b"
+\`\`\`
+
+| Avant                                      | Après                                                                              |
+| ------------------------------------------ | ---------------------------------------------------------------------------------- |
+| \`placeholder="…"\`                          | \`labels={{ addFile: '…' }}\` (tous les libellés se règlent par \`labels\`)          |
+| \`previewURL={url}\`                         | un **fichier enregistré** dans \`value\` : \`{ id, uri: url, name, persisted: true }\` |
+| \`hideFilename\`, \`canChange\`, \`forcePlaceholder\` | retirer                                                                  |
+
+Changements de comportement :
+
+- Le champ montre un bouton « Ajouter un fichier » puis la **liste** des fichiers (aperçu, ouverture,
+  retrait).
+- Sur natif, le bouton ouvre une feuille **Galerie / Appareil photo / Document** (ajouter
+  \`expo-image-picker\`, voir [Dépendances](#1-dependances)).
+- \`multiple\` : une nouvelle sélection ou un dépôt **s'ajoute** aux fichiers déjà présents au lieu de
+  les remplacer.
+- Champ simple : le bouton est **désactivé** tant qu'un fichier est affiché ; le retirer d'abord.
+- Retirer un fichier ajouté l'enlève de \`value\` ; retirer un **fichier enregistré** le garde, marqué
+  \`removed: true\`, pour le supprimer côté serveur à l'envoi.
+- Annuler le sélecteur n'appelle plus \`onChange(null)\` : la valeur reste inchangée.
+
+### \`DragAndDropFile\` → \`FileDropZone\`
+
+\`DragAndDropFile\` est supprimé. La **zone de dépôt** \`FileDropZone\` enveloppe désormais toute une
+région (souvent le formulaire entier) et se branche sur le même état que le \`FileInput\`. Web
+uniquement : sur natif, elle rend simplement ses enfants. Elle n'ouvre plus le sélecteur au clic :
+c'est le bouton du \`FileInput\` qui s'en charge.
+
+\`\`\`tsx
+// Avant
+<DragAndDropFile label="Pièces jointes" hint="PDF ou image" multiple value={f} onChange={setF} />
+
+// Après
+<FileDropZone value={f} onChange={setF} multiple>
+  <FormControl label="Pièces jointes" hint="PDF ou image">
+    <FileInput value={f} onChange={setF} multiple />
+  </FormControl>
+</FileDropZone>
+\`\`\`
+
+\`label\`, \`hint\`, \`error\`, \`success\` montent sur \`FormControl\` ; \`leading\` disparaît. Pour couvrir
+tout le formulaire, placer \`FileDropZone\` autour du formulaire plutôt qu'autour du seul champ.
+
+### Piège n°2 : réglages imposés retirés
+
+\`TextField\` forçait \`autoComplete="off"\`, \`textContentType="none"\`, \`autoCapitalize="sentences"\`.
+\`TextInput\` ne force plus rien. Si un champ doit rester sans remplissage automatique, l'écrire
+explicitement : \`<TextInput autoComplete="off" textContentType="none" />\`.
+\`type="text"\` et \`type="hidden"\` de \`TextField\` n'avaient aucun effet :
+retirer \`type="text"\` (valeur par défaut de \`TextInput\`) et \`type="hidden"\`, sans autre changement.
+\`type="hidden"\` n'a jamais masqué le champ (ignoré en natif, réécrit en \`type="text"\` par react-native-web) :
+si un appel comptait dessus pour cacher une valeur, ne pas rendre le champ (\`{visible && <TextInput … />}\`).
+
+### Exemples
+
+\`\`\`tsx
+// Avant
+<TextField
+  label="Nom"
+  hint="Tel qu'il apparaît sur la pièce d'identité"
+  placeholder="Jean Dupont"
+  value={nom}
+  onChange={setNom}
+  error={errors.nom}
+/>
+
+// Après
+<FormControl label="Nom" hint="Tel qu'il apparaît sur la pièce d'identité" error={errors.nom}>
+  <TextInput placeholder="Jean Dupont" value={nom} onChangeText={setNom} error={errors.nom} />
+</FormControl>
+\`\`\`
+
+\`\`\`tsx
+// Avant
+<EmailField label="Email" value={email} onChange={setEmail} />
+<PasswordField label="Mot de passe" value={password} onChange={setPassword} />
+<PhoneField label="Téléphone" value={tel} onChange={setTel} />
+
+// Après
+<FormControl label="Email">
+  <TextInput type="email" value={email} onChangeText={setEmail} />
+</FormControl>
+<FormControl label="Mot de passe">
+  <TextInput type="password" value={password} onChangeText={setPassword} />
+</FormControl>
+<FormControl label="Téléphone">
+  <TextInput type="tel" value={tel} onChangeText={setTel} />
+</FormControl>
+\`\`\`
+
+\`\`\`tsx
+// Avant
+<TextareaField label="Message" numberOfLines={4} value={msg} onChange={setMsg} />
+
+// Après
+<FormControl label="Message">
+  <TextareaInput numberOfLines={4} value={msg} onChangeText={setMsg} />
+</FormControl>
+\`\`\`
+
+\`\`\`tsx
+// Avant
+<NumberField label="Montant" value={montant} onChange={setMontant} error={err} />
+
+// Après — onChange inchangé : (value: number | null) => void
+<FormControl label="Montant" error={err}>
+  <NumberInput value={montant} onChange={setMontant} error={err} />
+</FormControl>
+\`\`\`
+
+\`\`\`tsx
+// Avant
+<OtpField label="Code reçu" numberOfDigits={6} onChange={setCode} />
+
+// Après — onChange inchangé
+<FormControl label="Code reçu">
+  <OtpInput numberOfDigits={6} onChange={setCode} />
+</FormControl>
+\`\`\`
+
+\`\`\`tsx
+// Avant
+const [file, setFile] = useState<FileFieldValue>(null);
+<FileField label="Justificatif" type="application/pdf" value={file} onChange={setFile} />;
+
+// Après — la vérification du type de fichier (alerte « Type de fichier incorrect ») est conservée dans FileInput
+const [file, setFile] = useState<FileInputValue>(null);
+<FormControl label="Justificatif">
+  <FileInput type="application/pdf" value={file} onChange={setFile} />
+</FormControl>;
+\`\`\`
+
+Si un \`ref\` était passé au \`*Field\`, le passer au contrôle (\`<TextInput ref={ref} />\`).
+
+### \`TextareaInput\` (le composant existe toujours)
+
+En 1.10, son type reprenait celui de \`TextField\` : \`label\` y était **obligatoire**, et \`hint\`,
+\`labelRight\`, \`optional\`, \`onChange\` acceptés… mais **aucun n'était affiché ni branché**. Les appels
+existants passent donc presque tous un \`label\` invisible. Ces props n'existent plus.
+
+\`\`\`bash
+git grep -nE "<TextareaInput\\b"
+\`\`\`
+
+- \`label\` / \`hint\` : les déplacer sur un \`FormControl\` autour. ⚠️ Changement visuel : le libellé
+  devient visible. S'il ne doit pas l'être (libellé déjà affiché ailleurs), supprimer simplement la
+  prop.
+- \`onChange\` : ne fonctionnait pas avec une chaîne (React Native lui passait un événement) ;
+  renommer en \`onChangeText\`.
+
+\`\`\`tsx
+// Avant
+<TextareaInput label="Commentaire" value={c} onChangeText={setC} />
+
+// Après (libellé visible)
+<FormControl label="Commentaire">
+  <TextareaInput value={c} onChangeText={setC} />
+</FormControl>
+\`\`\`
+
+### \`FormControlLabel\` et \`RadioGroup\` : \`optional\` / \`optionalText\` supprimés
+
+La mention « (optionnel) » disparaît au profit de l'astérisque sur les champs **requis**.
+
+\`\`\`bash
+git grep -nE "\\boptional(Text)?[=:]"
+\`\`\`
+
+| Avant                                        | Après                                                                                      |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| \`optional\` / \`optionalText="…"\`              | retirer ; marquer à l'inverse les champs obligatoires : \`<FormControl required>\`           |
+| \`<FormControlLabel error="…" success="…" />\` | retirer \`error\`/\`success\` (le libellé ne se colore plus) ; message via \`FormControl error\` |
+| \`<RadioGroup label=… optional />\`            | retirer \`optional\` (\`label\` devient facultatif)                                            |`,
+    },
+    {
+        titre: '3. DateInput, TimeInput, DurationInput : libellé retiré',
+        markdown: `\`\`\`bash
+git grep -nE "<(DateInput|TimeInput|DurationInput)\\b"
+\`\`\`
+
+Ces composants existent toujours mais n'acceptent plus \`label\`, \`labelRight\`, \`hint\` (ni la légende
+\`error\`/\`success\` affichée sous le champ pour \`DateInput\`). Même règle : on les entoure.
+
+\`\`\`tsx
+// Avant
+<DateInput label="Date de naissance" hint="JJ/MM/AAAA" value={date} onChange={setDate} error={err} />
+<TimeInput label="Heure" value={heure} onChange={setHeure} />
+
+// Après — onChange inchangé
+<FormControl label="Date de naissance" hint="JJ/MM/AAAA" error={err}>
+  <DateInput value={date} onChange={setDate} error={err} />
+</FormControl>
+<FormControl label="Heure">
+  <TimeInput value={heure} onChange={setHeure} />
+</FormControl>
+\`\`\``,
+    },
+    {
+        titre: '4. Select, SelectMultiple, Autocomplete, AutocompleteAddress → Select',
+        markdown: `\`\`\`bash
+git grep -nE "\\b(Select|SelectMultiple|SelectInput|NativePicker|Autocomplete|AutocompleteChip|AutocompleteAddress|AutocompleteOption\\w*|SelectMultipleOption)\\b"
+\`\`\`
+
+Le nouveau \`Select\` couvre tous les cas : simple, multiple, recherche (locale ou distante),
+création. Il est **nu** (dans un \`FormControl\`) et **strictement contrôlé**.
+
+Types exportés : \`SelectOption\` (\`{ value: string; label: string; leading?; group?; disabled? }\`),
+\`SelectProps\`, \`SelectRef\`, \`SelectItem\`. Supprimés : \`NativePicker\`, \`SelectInput\`,
+\`SelectMultipleOption\`, \`AutocompleteOption*\`, \`isAutocompleteOptionWithGroup*\`.
+
+### 4.1 \`Select\` simple
+
+\`\`\`tsx
+// Avant
+<Select label="Pays" hint="…" options={pays} value={code} onChange={setCode} error={err} />
+
+// Après
+<FormControl label="Pays" hint="…" error={err}>
+  <Select options={pays} value={code} onChange={setCode} error={err} />
+</FormControl>
+\`\`\`
+
+\`value: string | null\`, \`onChange(value: string | null)\` : inchangés. Ajouter \`clearable\` si
+l'utilisateur doit pouvoir revenir à « aucune valeur ». Le titre du bottom sheet mobile est par
+défaut le \`label\` du \`FormControl\` (sinon \`sheetTitle\`).
+
+### 4.2 \`SelectMultiple\` → \`Select multiple\`
+
+\`\`\`tsx
+// Avant
+<SelectMultiple label="Rôles" options={roles} value={ids} onChange={setIds} />
+
+// Après
+<FormControl label="Rôles">
+  <Select multiple options={roles} value={ids} onChange={setIds} />
+</FormControl>
+\`\`\`
+
+Piège : \`value\` doit être un \`string[]\` (plus de \`number\`) et **obligatoire** (passer \`[]\`, pas
+\`undefined\`). Les \`value\` numériques des options deviennent des chaînes :
+\`options.map(o => ({ ...o, value: String(o.value) }))\`, et reconvertir dans \`onChange\` si besoin.
+
+### 4.3 \`Autocomplete\` → \`Select\`
+
+| Autocomplete                  | Select                                                                                        |
+| ----------------------------- | --------------------------------------------------------------------------------------------- |
+| \`value: AutocompleteOption[]\` | \`value: string \\| null\` (simple) / \`string[]\` (\`multiple\`) — **des valeurs, plus des objets** |
+| \`isMulti\`                     | \`multiple\`                                                                                    |
+| \`isSearchable\`                | \`searchable\`                                                                                  |
+| \`disabledFilterSearch\`        | \`localFilter={false}\`                                                                         |
+| \`disabledSearch\`              | retirer \`searchable\`                                                                          |
+| \`allowEmpty\`                  | \`clearable\`                                                                                   |
+| \`allowCreate\`                 | \`creatable\` (implique \`searchable\`)                                                           |
+| \`onCreateOption(option)\`      | \`onCreateOption(query: string)\` — l'appelant crée l'option                                    |
+| \`createOptionLabel\`           | \`createLabel\`                                                                                 |
+| \`createOptionValue\`           | supprimé : l'appelant fabrique \`value\` dans \`onCreateOption\`                                  |
+| \`onChange(options, meta)\`     | \`onChange(value)\` — plus de second argument \`meta\`                                            |
+| \`onSearchChange\`              | \`onSearchChange\` (émis après 300 ms, jamais au montage)                                       |
+| \`label\`, \`hint\`, \`error\`      | sur \`FormControl\` (et \`error\` aussi sur \`Select\`)                                             |
+| \`autoFocus\`                   | \`ref\` (\`SelectRef.open()\` / \`focus()\`) dans un \`useEffect\`                                    |
+| option \`{ group }\`            | inchangé : options consécutives de même \`group\` regroupées                                    |
+
+Conversion de la valeur, le point qui demande le plus d'attention :
+
+\`\`\`tsx
+// Avant : l'état contenait des objets option
+const [selected, setSelected] = useState<AutocompleteOption[]>([]);
+<Autocomplete label="Client" isSearchable options={clients} value={selected} onChange={setSelected} />;
+// lecture : selected[0]?.value
+
+// Après : l'état contient la valeur
+const [clientId, setClientId] = useState<string | null>(null);
+<FormControl label="Client">
+  <Select searchable options={clients} value={clientId} onChange={setClientId} />
+</FormControl>;
+// lecture : clientId
+// besoin du libellé : clients.find(c => c.value === clientId)?.label
+\`\`\`
+
+\`\`\`tsx
+// Avant : multi + création
+<Autocomplete
+  label="Étiquettes"
+  isMulti
+  allowCreate
+  options={tags}
+  value={selected}
+  onChange={(value, meta) => {
+    setSelected(value);
+    meta?.created.forEach(save);
+  }}
+/>;
+
+// Après
+const [tags, setTags] = useState<SelectOption[]>(initialTags);
+const [values, setValues] = useState<string[]>([]);
+<FormControl label="Étiquettes">
+  <Select
+    multiple
+    creatable
+    options={tags}
+    value={values}
+    onChange={setValues}
+    onCreateOption={query => {
+      // obligatoire : ajouter l'option PUIS la sélectionner, sinon rien ne s'affiche
+      setTags(current => [...current, { label: query, value: query }]);
+      setValues(current => [...current, query]);
+      save(query);
+    }}
+  />
+</FormControl>;
+\`\`\`
+
+Recherche distante (anciennement \`disabledFilterSearch\` + \`onSearchChange\`) :
+
+\`\`\`tsx
+<FormControl label="Recherche">
+  <Select
+    searchable
+    localFilter={false}
+    loading={loading}
+    emptyMessage="Saisir au moins 3 caractères"
+    options={resultats}
+    value={value}
+    onChange={setValue}
+    onSearchChange={rechercher}
+  />
+</FormControl>
+\`\`\`
+
+### 4.4 \`AutocompleteAddress\` → \`Select\`
+
+| AutocompleteAddress        | Select                                  |
+| -------------------------- | --------------------------------------- |
+| \`suggestions\`              | \`options\`                               |
+| \`onPlaceSelected(placeId)\` | \`onChange(value)\` avec \`value !== null\` |
+| \`onCustomAddress(address)\` | \`onCreateOption(query)\`                 |
+| \`onClear()\`                | \`onChange(null)\` (avec \`clearable\`)     |
+| \`disabledCreation\`         | retirer \`creatable\`                     |
+| \`label\` (défaut "Adresse") | \`FormControl label="Adresse"\`           |
+
+\`\`\`tsx
+// Avant
+<AutocompleteAddress
+  value={value}
+  suggestions={suggestions}
+  error={err}
+  onSearchChange={search}
+  onPlaceSelected={placeId => selectPlace(placeId)}
+  onCustomAddress={address => setCustom(address)}
+  onClear={reset}
+/>
+
+// Après
+<FormControl label="Adresse" error={err}>
+  <Select
+    placeholder="ex : 3 rue Robespierre"
+    searchable
+    localFilter={false}
+    creatable
+    clearable
+    emptyMessage="Saisir au moins 3 caractères"
+    createLabel={query => \`Utiliser « \${query} »\`}
+    options={suggestions}
+    value={placeId}
+    error={err}
+    onSearchChange={search}
+    onChange={value => (value === null ? reset() : selectPlace(value))}
+    onCreateOption={address => {
+      setSuggestions(current => [...current, { label: address, value: address }]);
+      setPlaceId(address);
+      setCustom(address);
+    }}
+  />
+</FormControl>
+\`\`\`
+
+Attention : quand la recherche distante remplace \`options\`, l'option sélectionnée doit rester dans
+\`options\`, sinon son libellé n'est plus affiché dans le champ fermé. Garder l'option retenue en tête
+de la liste : \`options={[...selectedOption ? [selectedOption] : [], ...suggestions]}\`.`,
+    },
+    {
+        titre: '5. Icônes → leading / trailing',
+        markdown: `Détail et justification : [leading-trailing.md](https://github.com/Captive-Studio/alveole-js/blob/main/docs/migrations/leading-trailing.md).
+
+\`\`\`bash
+git grep -nE "startIcon|endIcon|\\bicon[=:]"
+\`\`\`
+
+| Composant                             | Avant                   | Après                  |
+| ------------------------------------- | ----------------------- | ---------------------- |
+| \`Button\`                              | \`startIcon\` / \`endIcon\` | \`leading\` / \`trailing\` |
+| \`AccordionItem\`                       | \`startIcon\`             | \`leading\`              |
+| \`Tag\`                                 | \`icon\`                  | \`leading\`              |
+| \`Tabs\` (élément de \`tabs\`), \`TabsTab\` | \`icon\`                  | \`leading\`              |
+| \`SidebarItem\`                         | \`icon\`                  | \`leading\`              |
+| \`ActionMenu.Item\`                     | \`icon\`                  | \`leading\`              |
+| \`RadioGroupCard\`                      | \`icon\`                  | \`leading\`              |
+| \`SelectOption\`                        | \`{ icon }\`              | \`{ leading }\`          |
+| \`ToastView\`, \`toast.present(…, opts)\` | \`icon\`                  | \`leading\`              |
+
+**Ne pas toucher** \`icon\` sur \`ButtonIcon\`, \`InputButtonAdornment\`, \`DocumentViewerToolbarButton\`,
+ni \`name\` sur \`LucideIcon\`. Renommage mécanique : la valeur (nom d'icône) ne change pas.
+
+\`\`\`tsx
+<Button variant="secondary" title="Filtres" startIcon="Plus" endIcon="ChevronDown" />
+// →
+<Button variant="secondary" title="Filtres" leading="Plus" trailing="ChevronDown" />
+\`\`\`
+
+\`leading={null}\` retire l'icône par défaut de \`Toast\`.
+
+### Noms d'icônes retirés
+
+Le catalogue d'icônes est désormais embarqué dans Alveole. Ces noms ne sont plus acceptés
+(\`name\`, \`icon\`, \`leading\`, \`trailing\`, \`IconProps.name\`…) :
+
+| Nom                                                              | Remplacement                                                    |
+| ---------------------------------------------------------------- | --------------------------------------------------------------- |
+| \`broom\`, \`carton\`, \`cartonOff\`, \`houses\`, \`textSquare\` (Lab)     | choisir une icône proche dans le catalogue (story \`LucideIcon\`) |
+| \`Icon\`, \`LucideProvider\`, \`createLucideIcon\`, \`useLucideContext\` | ce n'étaient pas des icônes : retirer                           |
+
+\`\`\`bash
+git grep -nE "['\\"](broom|carton|cartonOff|houses|textSquare|Icon|LucideProvider|createLucideIcon|useLucideContext)['\\"]"
+\`\`\``,
+    },
+    {
+        titre: '6. Button, ButtonIcon, Badge',
+        markdown: `\`\`\`bash
+git grep -nE "variant=['\\"]link['\\"]|size=['\\"]xs['\\"]|\\b(noPadding|borderNone|leftAlign)\\b|<Button\\b[^>]*\\bactive\\b"
+\`\`\`
+
+| Avant                                                              | Après                                                                            |
+| ------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| \`<Button size="xs" …>\`                                             | \`size="sm"\`                                                                      |
+| \`<Button variant="link" title="…" onPress={go} />\` qui **navigue** | \`<Link href="/chemin">…</Link>\` (ou \`A\`)                                         |
+| \`<Button variant="link" …>\` qui **agit** sur place                 | \`variant="tertiary"\`                                                             |
+| \`<Button leftAlign …>\`                                             | \`contentAlign="start"\`                                                           |
+| \`<Button noPadding …>\`, \`<Button borderNone …>\`                    | retirer ; si l'effet était voulu : \`variant="tertiary"\` ou un \`Pressable\` maison |
+| \`<Button active={open} …>\`                                         | \`expanded={open}\` (\`active\` est déprécié, pas encore supprimé)                   |
+| \`<Button startIcon="X" />\` **sans \`title\`**                        | \`<ButtonIcon variant="…" icon="X" accessibilityLabel="Action décrite" />\`        |
+| \`<ButtonIcon icon="X" />\` sans \`accessibilityLabel\`                | ajouter \`accessibilityLabel="…"\` (obligatoire)                                   |
+| \`<Badge variant="disabled" …>\`                                     | \`variant="default"\`                                                              |
+
+\`title\` est désormais **obligatoire** sur \`Button\` : toute erreur « Property 'title' is missing »
+est un bouton-icône à convertir en \`ButtonIcon\`. \`ButtonIcon\` accepte seulement les variantes
+\`primary\`, \`secondary\`, \`tertiary\`.
+
+\`\`\`tsx
+// Avant
+<Button variant="tertiary" startIcon="Trash" onPress={remove} />
+<Button variant="link" title="Voir le dossier" onPress={() => router.push(\`/dossiers/\${id}\`)} />
+
+// Après
+<ButtonIcon variant="tertiary" icon="Trash" accessibilityLabel="Supprimer" onPress={remove} />
+<Link href={\`/dossiers/\${id}\`}>Voir le dossier</Link>
+\`\`\`
+
+\`Link\` n'accepte qu'une chaîne en \`children\`, et \`href\` + \`target\` (\`target="_blank"\` pour un lien
+externe dans un nouvel onglet web / navigateur intégré en natif).`,
+    },
+    {
+        titre: '6 bis. Tag, ToolbarTop',
+        markdown: `\`\`\`bash
+git grep -nE "<Tag\\b[^>]*\\bcolor=|\\b(onActions|actionsIcon)\\b|onNavigate="
+\`\`\`
+
+| Avant                                      | Après                                                                                         |
+| ------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| \`<Tag color="default" …>\`                  | retirer \`color\` (le Tag est toujours gris)                                                    |
+| \`<Tag color="action" …>\`                   | une couleur porteuse de sens → \`Badge\` ; un compteur → \`Counter\`                              |
+| \`ToolbarTop onActions={…} actionsIcon="X"\` | supprimés : passer le bouton dans \`actions\`                                                   |
+| \`ToolbarTop onNavigate={…}\`                | \`navigationLabel\` devient **obligatoire** avec \`onNavigate\` (nom accessible du bouton retour) |
+
+\`\`\`tsx
+// Avant
+<ToolbarTop title="Dossier" onNavigate={back} onActions={openMenu} actionsIcon="EllipsisVertical" />
+
+// Après
+<ToolbarTop
+  title="Dossier"
+  onNavigate={back}
+  navigationLabel="Retour"
+  actions={<ButtonIcon variant="tertiary" icon="EllipsisVertical" accessibilityLabel="Plus d'actions" onPress={openMenu} />}
+/>
+\`\`\`
+
+Nouveautés du \`Tag\`, si utiles : \`selected\`, \`interactive\`, \`closable\` + \`onClose\`, \`leading\`.`,
+    },
+    {
+        titre: '7. @alveole/theme',
+        markdown: `\`\`\`bash
+git grep -nE "\\b(Mandarine|Shakespeare|Pacifika|ButteryWhite|CoralRed|Lochmara|BigStone|LimeGreen|Purple)\\b|Inter|Barlow|generateDefaultThemeCSS|generateFontSmoothingCSS|color-(sun|950)\\b|illustration"
+\`\`\`
+
+| Avant                                                                                                                    | Après                                                                                                                                                                                                                                                                                                |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Rampes \`Mandarine\`, \`Shakespeare\`, \`Pacifika\`, \`ButteryWhite\`, \`CoralRed\`, \`Lochmara\`, \`BigStone\`, \`LimeGreen\`, \`Purple\` | supprimées : choisir la rampe restante la plus proche (ou copier la valeur hex localement)                                                                                                                                                                                                           |
+| Polices Inter (corps) et Barlow                                                                                          | tout est en **Geist** : \`'Inter-Light' / 'Inter-Regular' / 'Inter-Medium' / 'Inter-Bold'\` et \`'Barlow-*'\` → \`'Geist-Light' / 'Geist-Regular' / 'Geist-Medium' / 'Geist-Bold'\` (clés de \`FontsMap\`, \`FontWeightMap\`, \`fontStyle(…)\`) ; retirer \`@expo-google-fonts/inter\` / \`barlow\` si plus importés |
+| Palette \`illustration\` imbriquée (\`illustration["color-sun"].default.yellow\`, idem \`color-950\`)                          | clés aplaties : \`color-sun-default-yellow\`, \`color-950-default-yellow\`                                                                                                                                                                                                                               |
+| \`generateDefaultThemeCSS()\`                                                                                              | \`generateThemeCSSParts(theme).join('\\n')\`                                                                                                                                                                                                                                                            |
+| \`generateFontSmoothingCSS()\`                                                                                             | supprimé : plus d'antialiasing global. Le recréer côté app seulement si nécessaire.                                                                                                                                                                                                                  |
+| \`injectVariableCSS(theme: Theme)\`, \`generateCSSVariables(theme: Theme)\`                                                  | même appel ; le paramètre est typé \`SourceDuCSS\` (un \`Theme\` reste accepté s'il fournit les mêmes clés)                                                                                                                                                                                              |
+| \`Radius\` / \`Box.borderRadius\` : \`number\`                                                                                 | \`number \\| 'var(--radius-…)'\` sur web : ne plus faire de calcul sur un rayon du thème                                                                                                                                                                                                                |
+
+Les clés de spacing dépréciées existent toujours (non cassant) mais leurs usages sont à migrer vers
+l'échelle V/W quand on y passe.`,
+    },
+    {
+        titre: '8. Vérification finale',
+        markdown: `\`\`\`bash
+git grep -nE "\\b(TextField|TextareaField|EmailField|EmailInput|PasswordField|PhoneField|PhoneInput|NumberField|OtpField|FileField|SelectMultiple|Autocomplete\\w*|NativePicker|SelectInput)\\b|startIcon|endIcon|variant=['\\"]link['\\"]|size=['\\"]xs['\\"]|noPadding|borderNone|leftAlign|\\boptional(Text)?[=:]|onActions|actionsIcon|<Tag\\b[^>]*\\bcolor=|Inter-|Barlow-"
+\`\`\`
+
+Doit ne rien renvoyer. Puis : typecheck, lint, tests. Points à contrôler à l'œil :
+
+- chaque champ en erreur a **le message** (\`FormControl error\`) **et la bordure rouge** (\`error\` du contrôle) ;
+- aucun \`TextInput\` avec \`onChange=\` (doit être \`onChangeText=\`) :
+  \`git grep -nE "<(TextInput|TextareaInput)\\b[^>]*\\bonChange="\` ;
+- les \`Select\` multiples et créables affichent bien la valeur sélectionnée après création.`,
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/storybook",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0-alpha.2",
   "description": "Catalog screens and helpers for Alveole stories and theme tokens.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
     "@testing-library/react": "16.3.3",
-    "babel-preset-expo": "57.0.13",
+    "babel-preset-expo": "57.0.14",
     "eslint": "10.10.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "30.5.2",
@@ -28,7 +28,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.3",
-    "react-native-web": "0.21.3",
+    "react-native-web": "0.21.4",
     "tamagui": "1.144.4"
   },
   "peerDependencies": {
@@ -39,9 +39,10 @@
     "react-native": "*"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "lint": "eslint . --cache --cache-strategy content",
-    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit",
-    "test:unit": "npx jest --coverage --maxWorkers=$(node ../../scripts/print-allocated-cpus.mjs) --ci"
+    "build": "pnpm run generate:sources && tsc -p tsconfig.build.json",
+    "generate:sources": "node ../components/scripts/generate-stories-sources.mjs",
+    "lint": "pnpm run generate:sources && eslint . --cache --cache-strategy content",
+    "typecheck": "pnpm run generate:sources && tsc -p tsconfig.typecheck.json --noEmit",
+    "test:unit": "pnpm run generate:sources && npx jest --coverage --maxWorkers=$(node ../../scripts/print-allocated-cpus.mjs) --ci"
   }
 }