@alveole/components 0.43.3 → 1.0.1

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TextFieldProps } from '../TextField';
+export type TextareaInputProps = TextFieldProps & {
+    numberOfLines?: number;
+    onModalSubmit?: () => void;
+};
+export declare const TextareaInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    type?: "text" | "hidden";
+    onChange?: import("@alveole/components").TextInputProps["onChangeText"];
+} & {
+    numberOfLines?: number;
+    onModalSubmit?: () => void;
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=TextareaInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,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;0DAoB3B,CAAC"}

package/dist/ui/TextareaInput/TextareaInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from '@alveole/components';
+import React from 'react';
+export const TextareaInput = React.forwardRef(function TextareaInput(props, ref) {
+    const { numberOfLines = 5, multiline = true, onModalSubmit, onFocus, openModal, modalSubmitLabel, ...rest } = props;
+    return (_jsx(TextInput, { ref: ref, multiline: multiline, numberOfLines: numberOfLines, ...rest, openModal: openModal ?? true, modalSubmitLabel: modalSubmitLabel ?? 'Valider', onModalSubmit: onModalSubmit, onFocus: onFocus }));
+});

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

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        disabled?: boolean;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & {
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        type?: "text" | "hidden";
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & {
+        numberOfLines?: number;
+        onModalSubmit?: () => void;
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => 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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { TextareaInput } from './TextareaInput';
+export default {
+    title: 'TextareaInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Input multiline. Étend TextField avec multiline activé par défaut.',
+    component: TextareaInput,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(TextareaInput, { label: "Message", placeholder: "Votre message...", numberOfLines: 4 }), _jsx(TextareaInput, { label: "Avec valeur", value: "Contenu du message", numberOfLines: 4 }), _jsx(TextareaInput, { label: "D\u00E9sactiv\u00E9", placeholder: "D\u00E9sactiv\u00E9", disabled: true, numberOfLines: 4 })] }));
+export * as Sources from './TextareaInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2Y,CAAC;AAEha,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+// 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    <TextareaInput label=\"Message\" placeholder=\"Votre message...\" numberOfLines={4} />\n    <TextareaInput label=\"Avec valeur\" value=\"Contenu du message\" numberOfLines={4} />\n    <TextareaInput label=\"Désactivé\" placeholder=\"Désactivé\" disabled numberOfLines={4} />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

@@ -0,0 +1,2 @@
+export * from './TextareaInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/ui/TextareaInput/index.js

@@ -0,0 +1 @@
+export * from './TextareaInput';

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

@@ -1,5 +1,16 @@
-import React from 'react';
 import { BoxProps } from '../../core';
+import { LucideIconProps } from '../LucideIcon';
+import type { ToastAPIOptions } from './ToastContext';
+type ToastVariant = NonNullable<ToastAPIOptions['variant']>;
+export type ToastViewProps = {
+    title: string;
+    message?: string;
+    variant?: ToastVariant;
+    icon?: LucideIconProps['name'];
+    onClose?: () => void;
+};
+export declare function ToastView({ title, message, variant, icon, onClose }: ToastViewProps): import("react").JSX.Element;
 export type ToastProps = Omit<BoxProps, 'children'>;
-export declare function Toast(): React.JSX.Element | null;
+export declare function Toast(): import("react").JSX.Element | null;
+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":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAIvD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEpD,wBAAgB,KAAK,6BA4EpB"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,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,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAmB,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,cAAc,+BAqB/F;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEpD,wBAAgB,KAAK,uCAyBpB"}

package/dist/ui/Toast/Toast.js

@@ -1,48 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Toast as TamaguiToast, useToastController, useToastState } from '@tamagui/toast';
-import React from 'react';
 import { Pressable } from 'react-native';
 import { Box, Typography } from '../../core';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Toast.styles';
+import { ToastType } from './ToastType';
+export function ToastView({ title, message, variant = 'default', icon, onClose }) {
+    const styles = useStyles();
+    return (_jsxs(Box, { style: styles.container, children: [_jsx(ToastType, { variant: variant, icon: icon }), _jsxs(Box, { style: styles.contenu, children: [_jsxs(Box, { style: styles.titleContainer, children: [_jsx(Typography, { style: styles.title, children: title }), _jsx(Pressable, { 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 styles = useStyles();
-    const variant = toast?.customData?.variant ?? 'default';
-    const icon = toast?.customData?.icon;
-    const iconColor = React.useMemo(() => {
-        switch (variant) {
-            case 'default':
-                return styles.iconDefault.color;
-            case 'success':
-                return styles.iconSuccess.color;
-            case 'error':
-                return styles.iconError.color;
-            case 'info':
-                return styles.iconInfo.color;
-            default:
-                ((_) => { })(variant);
-        }
-    }, [styles, variant]);
-    const iconName = React.useMemo(() => {
-        if (icon)
-            return icon;
-        switch (variant) {
-            case 'default':
-                return null;
-            case 'success':
-                return 'BadgeCheck';
-            case 'error':
-                return 'BadgeX';
-            case 'info':
-                return 'BadgeInfo';
-            default:
-                ((_) => { })(variant);
-        }
-        return null;
-    }, [icon, variant]);
     if (!toast)
         return null;
-    return (_jsxs(TamaguiToast, { style: styles.container, duration: toast.duration, enterStyle: { opacity: 0, y: 10, scale: 0.98 }, exitStyle: { opacity: 0, y: 10, scale: 0.98 }, viewportName: "app-toasts", children: [iconName && (_jsx(Box, { style: styles.icon, children: _jsx(LucideIcon, { color: iconColor, name: iconName, size: "sm" }) })), _jsxs(Box, { style: styles.contenu, children: [_jsxs(Box, { style: styles.titleContainer, children: [_jsx(Typography, { style: styles.title, children: toast.title }), _jsx(Pressable, { onPress: () => controller.hide(), children: _jsx(LucideIcon, { name: "X", size: "md" }) })] }), toast.message && (_jsx(Box, { children: _jsx(Typography, { style: styles.message, children: toast.message }) }))] })] }, toast.id));
+    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.container, children: _jsx(ToastView, { title: toast.title, message: toast.message, variant: toast.customData?.variant ?? 'default', icon: toast.customData?.icon, onClose: () => controller.hide() }) }, toast.id));
 }

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;
+            borderRadius: import("@alveole/theme").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;
+            borderRadius: import("@alveole/theme").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;
+            borderRadius: import("@alveole/theme").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;
+        borderRadius: import("@alveole/theme").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;
+        borderRadius: import("@alveole/theme").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;
+        borderRadius: import("@alveole/theme").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"}