@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/ui/Tag/tagStyling.d.ts

@@ -39,7 +39,7 @@ export declare const reponseAuPointeur: ({ manipulable, pastilleSurvolee, croixS
 };
 /** Le cercle de la croix : son gabarit suit le cran, seul son fond change au survol. */
 export declare const apparenceDeLaCroix: (styles: Styles, size: TailleDEtiquette, survolee: boolean) => {
-    backgroundColor?: string | undefined;
+    backgroundColor?: import("@alveole/theme").ThemeColor | undefined;
     marginLeft: number;
     alignItems: "center";
     justifyContent: "center";
@@ -52,7 +52,7 @@ export declare const apparenceDeLaCroix: (styles: Styles, size: TailleDEtiquette
 /** L'icone de la croix grossit avec la pastille et prend la teinte du libelle. */
 export declare const apparenceDeLIconeDeCroix: (styles: Styles, size: TailleDEtiquette, fonce: boolean) => {
     size: "sm" | "xs";
-    color: string;
+    color: import("@alveole/theme").ThemeColor;
 };
 export {};
 //# sourceMappingURL=tagStyling.d.ts.map

package/dist/ui/TextInputArray/TextInputArray.js

@@ -13,5 +13,5 @@ export const TextInputArray = (props) => {
         removeEmpty,
         dedupe,
     });
-    return (_jsxs(Box, { tag: "text-input-array", children: [items.map((item, index) => (_jsx(TextInput, { placeholder: placeholder, autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: `Retirer la ligne ${index + 1}`, onPress: () => removeItem(item.id) })), onBlur: notifier }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: '100', justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", leading: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
+    return (_jsxs(Box, { tag: "text-input-array", gap: "1V", children: [items.map((item, index) => (_jsx(TextInput, { placeholder: placeholder, autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: `Retirer la ligne ${index + 1}`, onPress: () => removeItem(item.id) })), onBlur: notifier }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: "2W", justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", leading: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
 };

package/dist/ui/TextareaInput/TextareaInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInputProps } from '../FormControl';
+import { TextInputElement, TextInputProps } from '../FormControl';
 export type TextareaInputProps = TextInputProps & {
     numberOfLines?: number;
     onModalSubmit?: () => void;
@@ -14,8 +14,9 @@ export declare const TextareaInput: React.ForwardRefExoticComponent<Omit<import(
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
+    resize?: "none" | "vertical" | "horizontal" | "both";
 } & {
     numberOfLines?: number;
     onModalSubmit?: () => void;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextareaInput.d.ts.map

package/dist/ui/TextareaInput/TextareaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0DAkB1B,CAAC"}
+{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0CAkB1B,CAAC"}

package/dist/ui/TextareaInput/TextareaInput.stories.d.ts

@@ -13,13 +13,15 @@ declare const _default: {
         openModal?: boolean;
         modalSubmitLabel?: string;
         onModalSubmit?: () => void;
+        resize?: "none" | "vertical" | "horizontal" | "both";
     } & {
         numberOfLines?: number;
         onModalSubmit?: () => void;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => {};
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const Redimensionnable: () => import("react").JSX.Element;
 export * as Sources from './TextareaInput.stories.sources';
 //# sourceMappingURL=TextareaInput.stories.d.ts.map

package/dist/ui/TextareaInput/TextareaInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,wBAOkB;AAYlB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"TextareaInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/ui/TextareaInput/TextareaInput.stories.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
-import { FormControl, FormControlLabel } from '../FormControl';
-import { InputHeading } from '../InputHeading';
+import { FormControl } from '../FormControl';
 import { TextareaInput } from './TextareaInput';
 export default {
     title: 'TextareaInput',
@@ -11,7 +10,6 @@ export default {
     component: TextareaInput,
     styleFn: () => ({}),
 };
-// TextareaInput est le champ nu : c'est FormControl qui porte le libellé et le relie au champ.
-const Champ = ({ label, children }) => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: label }) }), children] }));
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Champ, { label: "Message", children: _jsx(TextareaInput, { placeholder: "Votre message...", numberOfLines: 4 }) }), _jsx(Champ, { label: "Avec valeur", children: _jsx(TextareaInput, { value: "Contenu du message", numberOfLines: 4 }) }), _jsx(Champ, { label: "D\u00E9sactiv\u00E9", children: _jsx(TextareaInput, { placeholder: "D\u00E9sactiv\u00E9", disabled: true, numberOfLines: 4 }) })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Message", children: _jsx(TextareaInput, { placeholder: "Votre message...", numberOfLines: 4 }) }), _jsx(FormControl, { label: "Avec valeur", children: _jsx(TextareaInput, { value: "Contenu du message", numberOfLines: 4 }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", children: _jsx(TextareaInput, { placeholder: "D\u00E9sactiv\u00E9", disabled: true, numberOfLines: 4 }) })] }));
+export const Redimensionnable = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Verticalement", children: _jsx(TextareaInput, { placeholder: "Tirer le coin pour agrandir...", numberOfLines: 4, resize: "vertical" }) }), _jsx(FormControl, { label: "Dans les deux sens", children: _jsx(TextareaInput, { placeholder: "Tirer le coin pour agrandir...", numberOfLines: 4, resize: "both" }) })] }));
 export * as Sources from './TextareaInput.stories.sources';

package/dist/ui/TextareaInput/TextareaInput.stories.sources.d.ts

@@ -1,6 +1,8 @@
 export declare const Default: () => string;
+export declare const Redimensionnable: () => string;
 export declare const storySources: {
     readonly Default: () => string;
+    readonly Redimensionnable: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=TextareaInput.stories.sources.d.ts.map

package/dist/ui/TextareaInput/TextareaInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAke,CAAC;AAEvf,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"TextareaInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwgB,CAAC;AAE7hB,eAAO,MAAM,gBAAgB,cAAyd,CAAC;AAEvf,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/TextareaInput/TextareaInput.stories.sources.js

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/TextareaInput/TextareaInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Champ label=\"Message\">\n      <TextareaInput placeholder=\"Votre message...\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Avec valeur\">\n      <TextareaInput value=\"Contenu du message\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Désactivé\">\n      <TextareaInput placeholder=\"Désactivé\" disabled numberOfLines={4} />\n    </Champ>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Message\">\n      <TextareaInput placeholder=\"Votre message...\" numberOfLines={4} />\n    </FormControl>\n    <FormControl label=\"Avec valeur\">\n      <TextareaInput value=\"Contenu du message\" numberOfLines={4} />\n    </FormControl>\n    <FormControl label=\"Désactivé\">\n      <TextareaInput placeholder=\"Désactivé\" disabled numberOfLines={4} />\n    </FormControl>\n  </Box>\n);";
+export const Redimensionnable = () => "export const Redimensionnable = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Verticalement\">\n      <TextareaInput placeholder=\"Tirer le coin pour agrandir...\" numberOfLines={4} resize=\"vertical\" />\n    </FormControl>\n    <FormControl label=\"Dans les deux sens\">\n      <TextareaInput placeholder=\"Tirer le coin pour agrandir...\" numberOfLines={4} resize=\"both\" />\n    </FormControl>\n  </Box>\n);";
 export const storySources = {
     Default,
+    Redimensionnable,
 };

package/dist/ui/TimeInput/TimeInput.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from '../FormControl';
 import { ChampHHMMProps } from '../FormControl/ChampHHMM';
 export type TimeInputProps = ChampHHMMProps;
 export declare const TimeInput: React.ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
@@ -6,5 +7,5 @@ export declare const TimeInput: React.ForwardRefExoticComponent<import("..").For
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TimeInput.d.ts.map

package/dist/ui/TimeInput/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAQ5C,eAAO,MAAM,SAAS;;;;;0DAEpB,CAAC"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAQ5C,eAAO,MAAM,SAAS;;;;;0CAEpB,CAAC"}

package/dist/ui/TimeInput/TimeInput.stories.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         onChange?: (value: string) => void;
         onBlur?: () => void;
         disabled?: boolean;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => string;
 };
 export default _default;

package/dist/ui/TimeInput/TimeInput.stories.js

@@ -23,6 +23,6 @@ Le champ est nu : on le place dans un FormControl pour son libellé, son aide et
     component: TimeInput,
     styleFn: () => 'Aucun style appliqué',
 };
-export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, { value: "09:30" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", hint: "Heure de d\u00E9but de mission", children: _jsx(TimeInput, { value: "14:00" }) }) })] }) }));
-export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (00:00\u201323:59)", children: _jsx(TimeInput, { value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(TimeInput, { value: "09:30", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(TimeInput, { value: "09:30", disabled: true }) }) })] }) }));
+export const Default = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, { value: "09:30" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", hint: "Heure de d\u00E9but de mission", children: _jsx(TimeInput, { value: "14:00" }) }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (00:00\u201323:59)", children: _jsx(TimeInput, { value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(TimeInput, { value: "09:30", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(TimeInput, { value: "09:30", disabled: true }) }) })] }) }));
 export * as Sources from './TimeInput.stories.sources';

package/dist/ui/TimeInput/TimeInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwqB,CAAC;AAE7rB,eAAO,MAAM,MAAM,cAAwyB,CAAC;AAE5zB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8qB,CAAC;AAEnsB,eAAO,MAAM,MAAM,cAA8yB,CAAC;AAEl0B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/TimeInput/TimeInput.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/TimeInput/TimeInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput value=\"09:30\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\" hint=\"Heure de début de mission\">\n          <TimeInput value=\"14:00\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (00:00–23:59)\">\n          <TimeInput value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <TimeInput value=\"09:30\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <TimeInput value=\"09:30\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput value=\"09:30\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\" hint=\"Heure de début de mission\">\n          <TimeInput value=\"14:00\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (00:00–23:59)\">\n          <TimeInput value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <TimeInput value=\"09:30\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <TimeInput value=\"09:30\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
 export const storySources = {
     Default,
     States,

package/dist/ui/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '../../core/Box';
+import { type ToastItemRenderProps } from '@tamagui/toast';
 import { Leading } from '../Leading';
 import type { ToastAPIOptions } from './ToastContext';
 type ToastVariant = NonNullable<ToastAPIOptions['variant']>;
@@ -10,7 +10,7 @@ export type ToastViewProps = {
     onClose?: () => void;
 };
 export declare function ToastView({ title, message, variant, leading, onClose }: ToastViewProps): import("react").JSX.Element;
-export type ToastProps = Omit<BoxProps, 'children'>;
-export declare function Toast(): import("react").JSX.Element | null;
+export type ToastProps = ToastItemRenderProps;
+export declare function Toast({ toast, index }: ToastProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Toast.d.ts.map

package/dist/ui/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAmB,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,cAAc,+BAqBlG;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEpD,wBAAgB,KAAK,uCAyBpB"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAIlF,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAmB,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,cAAc,+BAqBlG;AAED,MAAM,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAK9C,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,+BAQjD"}

package/dist/ui/Toast/Toast.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toast as TamaguiToast, useToastController, useToastState } from '@tamagui/toast';
+import { Toast as TamaguiToast } from '@tamagui/toast';
 import { Pressable } from 'react-native';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
@@ -10,11 +10,9 @@ export function ToastView({ title, message, variant = 'default', leading, onClos
     const styles = useStyles();
     return (_jsxs(Box, { style: styles.container, children: [_jsx(ToastType, { variant: variant, leading: leading }), _jsxs(Box, { style: styles.contenu, children: [_jsxs(Box, { style: styles.titleContainer, children: [_jsx(Typography, { style: styles.title, children: title }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Fermer la notification", onPress: onClose, children: _jsx(LucideIcon, { name: "X", size: "md" }) })] }), message && (_jsx(Box, { children: _jsx(Typography, { style: styles.message, children: message }) }))] })] }));
 }
-export function Toast() {
-    const toast = useToastState();
-    const controller = useToastController();
+const horsEcran = { opacity: 0, y: 10, scale: 0.98 };
+const animationDuToast = { enter: horsEcran, exit: horsEcran };
+export function Toast({ toast, index }) {
     const styles = useStyles();
-    if (!toast)
-        return null;
-    return (_jsx(TamaguiToast, { duration: toast.duration, enterStyle: { opacity: 0, y: 10, scale: 0.98 }, exitStyle: { opacity: 0, y: 10, scale: 0.98 }, viewportName: "app-toasts", style: styles.tamaguiToastContainer, children: _jsx(ToastView, { title: toast.title, message: toast.message, variant: toast.customData?.variant ?? 'default', leading: toast.customData?.leading, onClose: () => controller.hide() }) }, toast.id));
+    return (_jsx(TamaguiToast.Item, { toast: toast, index: index, ...animationDuToast, style: styles.tamaguiToastContainer, children: toast.jsx }));
 }

package/dist/ui/Toast/Toast.stories.d.ts

@@ -19,19 +19,19 @@ declare const _default: {
             paddingBottom: string | number;
         };
         iconBlockDefault: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         iconBlockInfo: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         iconBlockSuccess: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         iconBlockError: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         iconBlockWarning: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         titleContainer: {
             display: "flex";
@@ -40,15 +40,16 @@ declare const _default: {
             justifyContent: "space-between";
         };
         title: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
+            flexShrink: number;
         };
         message: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -56,9 +57,11 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         tamaguiToastContainer: {
+            maxWidth: number;
+            alignSelf: "center";
             borderRadius: import("@alveole/theme").Radius;
             padding: number;
-            width: number;
+            width: 384 | "100%";
             backgroundColor: "transparent";
         } | {
             shadowColor: string;
@@ -69,24 +72,28 @@ declare const _default: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
+            maxWidth: number;
+            alignSelf: "center";
             borderRadius: import("@alveole/theme").Radius;
             padding: number;
-            width: number;
+            width: 384 | "100%";
             backgroundColor: "transparent";
         } | {
             boxShadow: string;
+            maxWidth: number;
+            alignSelf: "center";
             borderRadius: import("@alveole/theme").Radius;
             padding: number;
-            width: number;
+            width: 384 | "100%";
             backgroundColor: "transparent";
         } | {
             padding: number;
-            width: number;
+            width: 384 | "100%";
             backgroundColor: "transparent";
             borderRadius: number;
         };
         container: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
@@ -104,7 +111,7 @@ declare const _default: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
@@ -115,7 +122,7 @@ declare const _default: {
             padding: number;
         } | {
             boxShadow: string;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
@@ -125,7 +132,7 @@ declare const _default: {
             maxWidth: number;
             padding: number;
         } | {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
@@ -152,18 +159,21 @@ export default _default;
  * import { Toasts } from '@alveole/components';
  * import { ThemeProvider } from '@alveole/theme';
  * import { Stack } from 'expo-router';
+ * import { SafeAreaProvider } from 'react-native-safe-area-context';
  * import { TamaguiProvider } from 'tamagui';
  * import { tamaguiConfig } from '../tamagui.config';
  *
  * export default function RootLayout() {
  *   return (
- *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
- *       <ThemeProvider loader={false}>
- *         <Toasts>
- *           <Stack screenOptions={{ headerShown: false }} />
- *         </Toasts>
- *       </ThemeProvider>
- *     </TamaguiProvider>
+ *     <SafeAreaProvider>
+ *       <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *         <ThemeProvider loader={false}>
+ *           <Toasts>
+ *             <Stack screenOptions={{ headerShown: false }} />
+ *           </Toasts>
+ *         </ThemeProvider>
+ *       </TamaguiProvider>
+ *     </SafeAreaProvider>
  *   );
  * }
  * ```

package/dist/ui/Toast/Toast.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/ui/Toast/Toast.stories.js

@@ -3,9 +3,9 @@ import { Box } from '../../core/Box';
 import { Button } from '../Button';
 import { Toast, ToastView } from './Toast';
 import { useStyles } from './Toast.styles';
-import { defaultDuration } from './ToastBridge';
+import { defaultDuration } from './ToastContext';
+import { useToast } from './Toasts';
 import { ToastType } from './ToastType';
-import { useToast } from './index';
 export default {
     title: 'Toast',
     tags: ['ui'],
@@ -23,18 +23,21 @@ export default {
  * import { Toasts } from '@alveole/components';
  * import { ThemeProvider } from '@alveole/theme';
  * import { Stack } from 'expo-router';
+ * import { SafeAreaProvider } from 'react-native-safe-area-context';
  * import { TamaguiProvider } from 'tamagui';
  * import { tamaguiConfig } from '../tamagui.config';
  *
  * export default function RootLayout() {
  *   return (
- *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
- *       <ThemeProvider loader={false}>
- *         <Toasts>
- *           <Stack screenOptions={{ headerShown: false }} />
- *         </Toasts>
- *       </ThemeProvider>
- *     </TamaguiProvider>
+ *     <SafeAreaProvider>
+ *       <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *         <ThemeProvider loader={false}>
+ *           <Toasts>
+ *             <Stack screenOptions={{ headerShown: false }} />
+ *           </Toasts>
+ *         </ThemeProvider>
+ *       </TamaguiProvider>
+ *     </SafeAreaProvider>
  *   );
  * }
  * ```
@@ -52,7 +55,7 @@ export const All = () => {
     const withoutMessageToast = () => toast.present('Sans message');
     const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });
     const withCustomIcon = () => toast.present('Avec icon custom', undefined, { leading: 'Worm' });
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 8, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "1W", children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }) }));
 };
 export const PreviewInfo = () => (_jsx(ToastView, { variant: "info", title: "Information", message: "Description additionnelle du toast." }));
 export const PreviewSuccess = () => (_jsx(ToastView, { variant: "success", title: "Succ\u00E8s", message: "Description additionnelle du toast." }));
@@ -61,5 +64,5 @@ export const PreviewDefault = () => (_jsx(ToastView, { variant: "default", title
 export const PreviewWarning = () => (_jsx(ToastView, { variant: "warning", title: "Attention", message: "Description additionnelle du toast." }));
 export const PreviewInfoSansDescription = () => _jsx(ToastView, { variant: "info", title: "Message seul sans description" });
 export const PreviewSuccessSansDescription = () => (_jsx(ToastView, { variant: "success", title: "Message seul sans description" }));
-export const ToastsTypes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, children: [_jsx(ToastType, { variant: "info" }), _jsx(ToastType, { variant: "success" }), _jsx(ToastType, { variant: "error" }), _jsx(ToastType, { variant: "warning" })] }));
+export const ToastsTypes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", children: [_jsx(ToastType, { variant: "info" }), _jsx(ToastType, { variant: "success" }), _jsx(ToastType, { variant: "error" }), _jsx(ToastType, { variant: "warning" })] }));
 export * as Sources from './Toast.stories.sources';

package/dist/ui/Toast/Toast.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAAu8D,CAAC;AAEx9D,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA0Q,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA48D,CAAC;AAE79D,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA6Q,CAAC;AAEtS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

package/dist/ui/Toast/Toast.stories.sources.js

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Toast/Toast.stories.tsx
-export const All = () => "export const All = () => {\n  const toast = useToast();\n\n  const defaultToast = () => toast.present('Default', 'Message');\n  const successToast = () => toast.present('Success', 'Message', { variant: 'success' });\n  const errorToast = () => toast.present('Error', 'Message beaucoup plus long', { variant: 'error' });\n  const infoToast = () => toast.present('Information', 'Message', { variant: 'info' });\n  const infoToastMultiLine = () =>\n    toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\\nDeuxième ligne', {\n      variant: 'info',\n    });\n  const warningToast = () => toast.present('Attention', 'Message', { variant: 'warning' });\n  const withoutMessageToast = () => toast.present('Sans message');\n  const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });\n  const withCustomIcon = () => toast.present('Avec icon custom', undefined, { leading: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n      <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n        <Button title=\"Default toast\" variant=\"secondary\" onPress={defaultToast} />\n        <Button title=\"Success toast\" variant=\"secondary\" onPress={successToast} />\n        <Button title=\"Error toast\" variant=\"secondary\" onPress={errorToast} />\n        <Button title=\"Info toast\" variant=\"secondary\" onPress={infoToast} />\n        <Button title=\"Warning toast\" variant=\"secondary\" onPress={warningToast} />\n        <Button title=\"Message long\" variant=\"secondary\" onPress={infoToastMultiLine} />\n        <Button title=\"Without message toast\" variant=\"secondary\" onPress={withoutMessageToast} />\n        <Button title=\"Without message toast error\" variant=\"secondary\" onPress={withoutMessageToastError} />\n        <Button title=\"WithCustomIcon\" variant=\"secondary\" onPress={withCustomIcon} />\n      </Box>\n    </Box>\n  );\n};";
+export const All = () => "export const All = () => {\n  const toast = useToast();\n\n  const defaultToast = () => toast.present('Default', 'Message');\n  const successToast = () => toast.present('Success', 'Message', { variant: 'success' });\n  const errorToast = () => toast.present('Error', 'Message beaucoup plus long', { variant: 'error' });\n  const infoToast = () => toast.present('Information', 'Message', { variant: 'info' });\n  const infoToastMultiLine = () =>\n    toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\\nDeuxième ligne', {\n      variant: 'info',\n    });\n  const warningToast = () => toast.present('Attention', 'Message', { variant: 'warning' });\n  const withoutMessageToast = () => toast.present('Sans message');\n  const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });\n  const withCustomIcon = () => toast.present('Avec icon custom', undefined, { leading: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"1W\">\n      <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n        <Button title=\"Default toast\" variant=\"secondary\" onPress={defaultToast} />\n        <Button title=\"Success toast\" variant=\"secondary\" onPress={successToast} />\n        <Button title=\"Error toast\" variant=\"secondary\" onPress={errorToast} />\n        <Button title=\"Info toast\" variant=\"secondary\" onPress={infoToast} />\n        <Button title=\"Warning toast\" variant=\"secondary\" onPress={warningToast} />\n        <Button title=\"Message long\" variant=\"secondary\" onPress={infoToastMultiLine} />\n        <Button title=\"Without message toast\" variant=\"secondary\" onPress={withoutMessageToast} />\n        <Button title=\"Without message toast error\" variant=\"secondary\" onPress={withoutMessageToastError} />\n        <Button title=\"WithCustomIcon\" variant=\"secondary\" onPress={withCustomIcon} />\n      </Box>\n    </Box>\n  );\n};";
 export const PreviewInfo = () => "export const PreviewInfo = () => (\n  <ToastView variant=\"info\" title=\"Information\" message=\"Description additionnelle du toast.\" />\n);";
 export const PreviewSuccess = () => "export const PreviewSuccess = () => (\n  <ToastView variant=\"success\" title=\"Succès\" message=\"Description additionnelle du toast.\" />\n);";
 export const PreviewError = () => "export const PreviewError = () => (\n  <ToastView variant=\"error\" title=\"Erreur\" message=\"Description additionnelle du toast.\" />\n);";
@@ -8,7 +8,7 @@ export const PreviewDefault = () => "export const PreviewDefault = () => (\n  <T
 export const PreviewWarning = () => "export const PreviewWarning = () => (\n  <ToastView variant=\"warning\" title=\"Attention\" message=\"Description additionnelle du toast.\" />\n);";
 export const PreviewInfoSansDescription = () => "export const PreviewInfoSansDescription = () => <ToastView variant=\"info\" title=\"Message seul sans description\" />;";
 export const PreviewSuccessSansDescription = () => "export const PreviewSuccessSansDescription = () => (\n  <ToastView variant=\"success\" title=\"Message seul sans description\" />\n);";
-export const ToastsTypes = () => "export const ToastsTypes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={8}>\n    <ToastType variant=\"info\" />\n    <ToastType variant=\"success\" />\n    <ToastType variant=\"error\" />\n    <ToastType variant=\"warning\" />\n  </Box>\n);";
+export const ToastsTypes = () => "export const ToastsTypes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"1W\">\n    <ToastType variant=\"info\" />\n    <ToastType variant=\"success\" />\n    <ToastType variant=\"error\" />\n    <ToastType variant=\"warning\" />\n  </Box>\n);";
 export const storySources = {
     All,
     PreviewInfo,
@@ -21,5 +21,5 @@ export const storySources = {
     ToastsTypes,
 };
 export const storyDescriptions = {
-    All: "Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.\n\n```tsx\nimport { Toasts } from '@alveole/components';\nimport { ThemeProvider } from '@alveole/theme';\nimport { Stack } from 'expo-router';\nimport { TamaguiProvider } from 'tamagui';\nimport { tamaguiConfig } from '../tamagui.config';\n\nexport default function RootLayout() {\n  return (\n    <TamaguiProvider config={tamaguiConfig} defaultTheme=\"light\">\n      <ThemeProvider loader={false}>\n        <Toasts>\n          <Stack screenOptions={{ headerShown: false }} />\n        </Toasts>\n      </ThemeProvider>\n    </TamaguiProvider>\n  );\n}\n```",
+    All: "Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.\n\n```tsx\nimport { Toasts } from '@alveole/components';\nimport { ThemeProvider } from '@alveole/theme';\nimport { Stack } from 'expo-router';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { TamaguiProvider } from 'tamagui';\nimport { tamaguiConfig } from '../tamagui.config';\n\nexport default function RootLayout() {\n  return (\n    <SafeAreaProvider>\n      <TamaguiProvider config={tamaguiConfig} defaultTheme=\"light\">\n        <ThemeProvider loader={false}>\n          <Toasts>\n            <Stack screenOptions={{ headerShown: false }} />\n          </Toasts>\n        </ThemeProvider>\n      </TamaguiProvider>\n    </SafeAreaProvider>\n  );\n}\n```",
 };