@alveole/components 0.43.2 → 1.0.0

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

@@ -8,14 +8,14 @@ declare const _default: {
     component: typeof Toast;
     styleFn: () => {
         container: {
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
             width: number;
-            padding: import("@alveole/theme").Spacing;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             display: "flex";
             flexDirection: "row";
             gap: import("@alveole/theme").Spacing;
-            alignItems: "flex-start";
+            overflow: "hidden";
+            padding: number;
         } | {
             shadowColor: import("@alveole/theme").Color;
             shadowOffset: {
@@ -25,63 +25,73 @@ declare const _default: {
             shadowOpacity: number;
             shadowRadius: number;
             elevation: number;
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
             width: number;
-            padding: import("@alveole/theme").Spacing;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             display: "flex";
             flexDirection: "row";
             gap: import("@alveole/theme").Spacing;
-            alignItems: "flex-start";
+            overflow: "hidden";
+            padding: number;
         } | {
             boxShadow: string;
-            backgroundColor: "#FFFFFF";
+            backgroundColor: string;
             width: number;
-            padding: import("@alveole/theme").Spacing;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             display: "flex";
             flexDirection: "row";
             gap: import("@alveole/theme").Spacing;
-            alignItems: "flex-start";
+            overflow: "hidden";
+            padding: number;
         };
         contenu: {
             display: "flex";
             flex: number;
             flexDirection: "column";
             gap: import("@alveole/theme").Spacing;
+            padding: import("@alveole/theme").Spacing;
         };
         titleContainer: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
             justifyContent: "space-between";
-            minHeight: import("@alveole/theme").Spacing;
         };
         title: {
-            color: "#151617";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        icon: {
+        iconBlock: {
+            display: "flex";
+            alignSelf: "stretch";
+            justifyContent: "flex-start";
+            alignItems: "center";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
             paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        iconBlockDefault: {
+            backgroundColor: string;
         };
-        iconDefault: {
-            color: "#373A3F";
+        iconBlockInfo: {
+            backgroundColor: string;
         };
-        iconInfo: {
-            color: "#373A3F";
+        iconBlockSuccess: {
+            backgroundColor: string;
         };
-        iconSuccess: {
-            color: "#1B7440";
+        iconBlockError: {
+            backgroundColor: string;
         };
-        iconError: {
-            color: "#C62416";
+        iconBlockWarning: {
+            backgroundColor: string;
         };
         message: {
-            color: "#373A3F";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -92,5 +102,13 @@ declare const _default: {
 };
 export default _default;
 export declare const All: () => import("react").JSX.Element;
+export declare const PreviewInfo: () => import("react").JSX.Element;
+export declare const PreviewSuccess: () => import("react").JSX.Element;
+export declare const PreviewError: () => import("react").JSX.Element;
+export declare const PreviewDefault: () => import("react").JSX.Element;
+export declare const PreviewWarning: () => import("react").JSX.Element;
+export declare const PreviewInfoSansDescription: () => import("react").JSX.Element;
+export declare const PreviewSuccessSansDescription: () => import("react").JSX.Element;
+export declare const ToastsTypes: () => import("react").JSX.Element;
 export * as Sources from './Toast.stories.sources';
 //# sourceMappingURL=Toast.stories.d.ts.map

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,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKhC,wBAQkB;AAElB,eAAO,MAAM,GAAG,mCAwDf,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,wBAQkB;AAElB,eAAO,MAAM,GAAG,mCAwDf,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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@alveole/components';
 import { Box, Highlight, Typography } from '../../core';
-import { Toast } from './Toast';
+import { Toast, ToastView } from './Toast';
 import { useStyles } from './Toast.styles';
 import { defaultDuration } from './ToastBridge';
+import { ToastType } from './ToastType';
 import { useToast } from './index';
 export default {
     title: 'Toast',
@@ -16,7 +17,6 @@ export default {
 };
 export const All = () => {
     const toast = useToast();
-    defaultDuration;
     const defaultToast = () => toast.present('Default', 'Message');
     const successToast = () => toast.present('Success', 'Message', { variant: 'success' });
     const errorToast = () => toast.present('Error', 'Message beaucoup plus long', { variant: 'error' });
@@ -24,10 +24,11 @@ export const All = () => {
     const infoToastMultiLine = () => toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\nDeuxième ligne', {
         variant: 'info',
     });
+    const warningToast = () => toast.present('Attention', 'Message', { variant: 'warning' });
     const withoutMessageToast = () => toast.present('Sans message');
     const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });
     const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, 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: "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 })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Typography, { children: `Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner` }), _jsx(Highlight, { language: "tsx", children: `
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, 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 })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Typography, { children: `Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner` }), _jsx(Highlight, { language: "tsx", children: `
             import { Toasts } from '@alveole/components';
             import { ThemeProvider } from '@alveole/theme';
             import { Stack } from 'expo-router';
@@ -48,4 +49,12 @@ export const All = () => {
             }
           ` })] })] }));
 };
+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." }));
+export const PreviewError = () => (_jsx(ToastView, { variant: "error", title: "Erreur", message: "Description additionnelle du toast." }));
+export const PreviewDefault = () => (_jsx(ToastView, { variant: "default", title: "Default", message: "Description additionnelle du toast." }));
+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 * as Sources from './Toast.stories.sources';

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

@@ -1,6 +1,22 @@
 export declare const All: () => string;
+export declare const PreviewInfo: () => string;
+export declare const PreviewSuccess: () => string;
+export declare const PreviewError: () => string;
+export declare const PreviewDefault: () => string;
+export declare const PreviewWarning: () => string;
+export declare const PreviewInfoSansDescription: () => string;
+export declare const PreviewSuccessSansDescription: () => string;
+export declare const ToastsTypes: () => string;
 export declare const storySources: {
     readonly All: () => string;
+    readonly PreviewInfo: () => string;
+    readonly PreviewSuccess: () => string;
+    readonly PreviewError: () => string;
+    readonly PreviewDefault: () => string;
+    readonly PreviewWarning: () => string;
+    readonly PreviewInfoSansDescription: () => string;
+    readonly PreviewSuccessSansDescription: () => string;
+    readonly ToastsTypes: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Toast.stories.sources.d.ts.map

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,cAA+zF,CAAC;AAEh1F,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA+9F,CAAC;AAEh/F,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"}

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

@@ -1,6 +1,22 @@
 // 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  defaultDuration;\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 withoutMessageToast = () => toast.present('Sans message');\n  const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });\n  const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n      <Box display=\"flex\" flexDirection=\"row\" gap={4} 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=\"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 display=\"flex\" flexDirection=\"column\" gap={4}>\n        <Typography>{`Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner`}</Typography>\n        <Highlight language=\"tsx\">\n          {`\n            import { Toasts } from '@alveole/components';\n            import { ThemeProvider } from '@alveole/theme';\n            import { Stack } from 'expo-router';\n            import React from 'react';\n            import { TamaguiProvider } from 'tamagui';\n            import { tamaguiConfig } from '../tamagui.config';\n\n            export 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          `}\n        </Highlight>\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, { icon: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n      <Box display=\"flex\" flexDirection=\"row\" gap={4} 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 display=\"flex\" flexDirection=\"column\" gap={4}>\n        <Typography>{`Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner`}</Typography>\n        <Highlight language=\"tsx\">\n          {`\n            import { Toasts } from '@alveole/components';\n            import { ThemeProvider } from '@alveole/theme';\n            import { Stack } from 'expo-router';\n            import React from 'react';\n            import { TamaguiProvider } from 'tamagui';\n            import { tamaguiConfig } from '../tamagui.config';\n\n            export 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          `}\n        </Highlight>\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);";
+export const PreviewDefault = () => "export const PreviewDefault = () => (\n  <ToastView variant=\"default\" title=\"Default\" message=\"Description additionnelle du toast.\" />\n);";
+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 storySources = {
     All,
+    PreviewInfo,
+    PreviewSuccess,
+    PreviewError,
+    PreviewDefault,
+    PreviewWarning,
+    PreviewInfoSansDescription,
+    PreviewSuccessSansDescription,
+    ToastsTypes,
 };

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

@@ -1,13 +1,13 @@
 export declare const useStyles: () => {
     container: {
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         width: number;
-        padding: import("@alveole/theme").Spacing;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         display: "flex";
         flexDirection: "row";
         gap: import("@alveole/theme").Spacing;
-        alignItems: "flex-start";
+        overflow: "hidden";
+        padding: number;
     } | {
         shadowColor: import("@alveole/theme").Color;
         shadowOffset: {
@@ -17,63 +17,73 @@ export declare const useStyles: () => {
         shadowOpacity: number;
         shadowRadius: number;
         elevation: number;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         width: number;
-        padding: import("@alveole/theme").Spacing;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         display: "flex";
         flexDirection: "row";
         gap: import("@alveole/theme").Spacing;
-        alignItems: "flex-start";
+        overflow: "hidden";
+        padding: number;
     } | {
         boxShadow: string;
-        backgroundColor: "#FFFFFF";
+        backgroundColor: string;
         width: number;
-        padding: import("@alveole/theme").Spacing;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         display: "flex";
         flexDirection: "row";
         gap: import("@alveole/theme").Spacing;
-        alignItems: "flex-start";
+        overflow: "hidden";
+        padding: number;
     };
     contenu: {
         display: "flex";
         flex: number;
         flexDirection: "column";
         gap: import("@alveole/theme").Spacing;
+        padding: import("@alveole/theme").Spacing;
     };
     titleContainer: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";
-        minHeight: import("@alveole/theme").Spacing;
     };
     title: {
-        color: "#151617";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    icon: {
+    iconBlock: {
+        display: "flex";
+        alignSelf: "stretch";
+        justifyContent: "flex-start";
+        alignItems: "center";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
         paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    iconBlockDefault: {
+        backgroundColor: string;
     };
-    iconDefault: {
-        color: "#373A3F";
+    iconBlockInfo: {
+        backgroundColor: string;
     };
-    iconInfo: {
-        color: "#373A3F";
+    iconBlockSuccess: {
+        backgroundColor: string;
     };
-    iconSuccess: {
-        color: "#1B7440";
+    iconBlockError: {
+        backgroundColor: string;
     };
-    iconError: {
-        color: "#C62416";
+    iconBlockWarning: {
+        backgroundColor: string;
     };
     message: {
-        color: "#373A3F";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDnB,CAAC"}
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEnB,CAAC"}

package/dist/ui/Toast/Toast.styles.js

@@ -2,53 +2,63 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ text, color, radius, spacing, shadows }) => ({
     // Container
     container: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: color.light.background['default-grey'],
         width: 384,
-        padding: spacing('100'),
         borderRadius: radius('sm'),
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('050'),
-        alignItems: 'flex-start',
+        gap: spacing('1W'),
+        overflow: 'hidden',
+        padding: 0,
         ...shadows(3),
     },
     contenu: {
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
-        gap: spacing('050'),
+        gap: spacing('1W'),
+        padding: spacing('100'),
     },
     titleContainer: {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        minHeight: spacing('150'),
     },
     // Titre
     title: {
         ...text['Corps de texte'].SM.Bold,
-        color: color.text['title-grey'],
+        color: color.light.text['default-grey'],
+    },
+    // Bloc icône (panel coloré pleine hauteur)
+    iconBlock: {
+        display: 'flex',
+        alignSelf: 'stretch',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
     },
-    // Icon
-    icon: {
-        paddingTop: spacing('025'),
+    iconBlockDefault: {
+        backgroundColor: color.light.background['flat-info'],
     },
-    iconDefault: {
-        color: color.text['default-grey'],
+    iconBlockInfo: {
+        backgroundColor: color.light.background['flat-info'],
     },
-    iconInfo: {
-        color: color.text['default-grey'],
+    iconBlockSuccess: {
+        backgroundColor: color.light.background['flat-success'],
     },
-    iconSuccess: {
-        color: color.text['default-success'],
+    iconBlockError: {
+        backgroundColor: color.light.background['flat-error'],
     },
-    iconError: {
-        color: color.text['default-error'],
+    iconBlockWarning: {
+        backgroundColor: color.light.background['flat-warning'],
     },
     // Message
     message: {
         ...text['Corps de texte'].SM.Regular,
-        color: color.text['default-grey'],
+        color: color.light.text['default-grey'],
     },
 }));

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

@@ -3,7 +3,7 @@ import { LucideIconProps } from '../LucideIcon';
 export type ToastAPIOptions = {
     icon?: LucideIconProps['name'];
     duration?: number;
-    variant?: 'default' | 'success' | 'error' | 'info';
+    variant?: 'default' | 'success' | 'error' | 'info' | 'warning';
 };
 export type ToastAPI = {
     present: (title: string, message?: string, opts?: ToastAPIOptions) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,YAAY,gCAA6C,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,YAAY,gCAA6C,CAAC"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LucideIconProps } from '../LucideIcon';
+import type { ToastAPIOptions } from './ToastContext';
+type ToastVariant = NonNullable<ToastAPIOptions['variant']>;
+export type ToastTypeProps = {
+    variant: ToastVariant;
+    icon?: LucideIconProps['name'];
+};
+export declare function ToastType({ variant, icon }: ToastTypeProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=ToastType.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastType.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/ToastType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,KAAK,YAAY,GAAG,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,YAAY,CAAC;IACtB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,cAAc,4BA8C1D"}

package/dist/ui/Toast/ToastType.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Toast.styles';
+export function ToastType({ variant, icon }) {
+    const styles = useStyles();
+    const iconBlockStyle = React.useMemo(() => {
+        switch (variant) {
+            case 'default':
+                return styles.iconBlockDefault;
+            case 'success':
+                return styles.iconBlockSuccess;
+            case 'error':
+                return styles.iconBlockError;
+            case 'info':
+                return styles.iconBlockInfo;
+            case 'warning':
+                return styles.iconBlockWarning;
+            default:
+                ((_) => { })(variant);
+        }
+    }, [styles, variant]);
+    const iconName = React.useMemo(() => {
+        if (icon)
+            return icon;
+        switch (variant) {
+            case 'default':
+                return null;
+            case 'success':
+                return 'CircleCheck';
+            case 'error':
+                return 'OctagonAlert';
+            case 'info':
+                return 'Info';
+            case 'warning':
+                return 'TriangleAlert';
+            default:
+                ((_) => { })(variant);
+        }
+        return null;
+    }, [icon, variant]);
+    if (!iconName)
+        return null;
+    return (_jsx(Box, { style: [styles.iconBlock, iconBlockStyle], children: _jsx(LucideIcon, { color: "#FFFFFF", name: iconName, size: "sm" }) }));
+}

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

@@ -7,8 +7,8 @@ declare const _default: {
     component: any;
     styleFn: () => {
         tabBarStyle: {
-            backgroundColor: "#FFFFFF";
-            borderColor: "#DEE3EC";
+            backgroundColor: string;
+            borderColor: string;
         };
         tabBarLabelStyle: {
             readonly fontSize: 12;
@@ -22,10 +22,10 @@ declare const _default: {
             margin: number;
         };
         tabBarActiveTintColor: {
-            color: "#012B53";
+            color: string;
         };
         tabBarInactiveTintColor: {
-            color: "#373A3F";
+            color: string;
         };
     };
 };

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.styles.d.ts

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     tabBarStyle: {
-        backgroundColor: "#FFFFFF";
-        borderColor: "#DEE3EC";
+        backgroundColor: string;
+        borderColor: string;
     };
     tabBarLabelStyle: {
         readonly fontSize: 12;
@@ -15,10 +15,10 @@ export declare const useStyles: () => {
         margin: number;
     };
     tabBarActiveTintColor: {
-        color: "#012B53";
+        color: string;
     };
     tabBarInactiveTintColor: {
-        color: "#373A3F";
+        color: string;
     };
 };
 //# sourceMappingURL=ToolbarBottomNav.styles.d.ts.map

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

@@ -37,7 +37,7 @@ declare const _default: {
             borderRightWidth: number;
             borderTopWidth: number;
             borderStyle: "solid";
-            borderColor: "#DEE3EC";
+            borderColor: string;
         };
         toolbarNavigation: {
             display: "flex";
@@ -63,7 +63,7 @@ declare const _default: {
             justifyContent: "center";
         };
         toolbarInformationTitleText: {
-            color: "#151617";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -78,7 +78,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         toolbarInformationTitleSubText: {
-            color: "#5F6571";
+            color: string;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;

package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts

@@ -29,7 +29,7 @@ export declare const useStyles: () => {
         borderRightWidth: number;
         borderTopWidth: number;
         borderStyle: "solid";
-        borderColor: "#DEE3EC";
+        borderColor: string;
     };
     toolbarNavigation: {
         display: "flex";
@@ -55,7 +55,7 @@ export declare const useStyles: () => {
         justifyContent: "center";
     };
     toolbarInformationTitleText: {
-        color: "#151617";
+        color: string;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -70,7 +70,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     toolbarInformationTitleSubText: {
-        color: "#5F6571";
+        color: string;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;