@alveole/components 0.36.1 → 0.37.2

package/dist/ui/Signature/Signature.d.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '../../core/Box';
+export type SignatureProps = Omit<BoxProps, 'children'> & {
+    height: number;
+    date?: string | Date;
+    dateLabel?: string;
+    clearButtonLabel?: string;
+    onChange: (value: string | null) => void;
+    onBegin?: () => void;
+    onEnd?: () => void;
+};
+export declare const Signature: (props: SignatureProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Signature.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CA8E9C,CAAC"}

package/dist/ui/Signature/Signature.js

@@ -0,0 +1,55 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import { useTheme } from '@alveole/theme';
+import * as React from 'react';
+import SignatureCanvas from 'react-native-signature-canvas';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { useStyles } from './Signature.styles';
+export const Signature = (props) => {
+    const { height, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, onBegin, onEnd } = props;
+    const { color, spacing } = useTheme();
+    const styles = useStyles();
+    const ref = React.useRef(null);
+    const readTimeoutRef = React.useRef(null);
+    const handleOk = (signature) => {
+        onChange(signature);
+    };
+    const handleEnd = () => {
+        if (readTimeoutRef.current)
+            clearTimeout(readTimeoutRef.current);
+        readTimeoutRef.current = setTimeout(() => {
+            ref.current?.readSignature();
+            readTimeoutRef.current = null;
+        }, 100);
+    };
+    const handleClear = () => {
+        if (readTimeoutRef.current) {
+            clearTimeout(readTimeoutRef.current);
+            readTimeoutRef.current = null;
+        }
+        onChange(null);
+    };
+    React.useEffect(() => {
+        return () => {
+            if (readTimeoutRef.current)
+                clearTimeout(readTimeoutRef.current);
+        };
+    }, []);
+    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
+    const webviewHeightWithBorders = height + spacing('200') + spacing('100') + 3;
+    const webviewStyle = `
+    .m-signature-pad {
+      box-shadow: none;
+      border-radius: ${spacing('075')}px;
+      border-color: ${color.border['default-grey']};
+      border-width: 2px;
+      height: ${height}px;
+    }
+    .m-signature-pad--body {border: none; overflow: hidden; border-radius: ${spacing('075')}px}
+    .m-signature-pad--footer {display: none; margin: 0px;}
+    .button, .description {display: none;}
+  `;
+    return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { size: "xs", title: clearButtonLabel, variant: "tertiary", onPress: () => ref.current?.clearSignature() })] }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: webviewStyle }) })] }));
+};

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

@@ -0,0 +1,40 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    component: (props: import("./Signature").SignatureProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {
+            width: "100%";
+            display: "flex";
+            flexDirection: "column";
+        };
+        pen: {
+            color: "#373A3F";
+            backgroundColor: "#FFFFFF";
+        };
+        signatureWeb: {
+            borderColor: "#DEE3EC";
+            borderWidth: number;
+            borderRadius: import("@alveole/theme").Spacing;
+        };
+        headerSignature: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        date: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+    };
+};
+export default _default;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLabels: () => import("react/jsx-runtime").JSX.Element;
+export * as Sources from './Signature.stories.sources';
+//# sourceMappingURL=Signature.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAgBnB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAgBxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/Signature/Signature.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box, Image, Typography } from '../../';
+import { Signature } from './Signature';
+import { useStyles } from './Signature.styles';
+export default {
+    title: 'Signature',
+    tags: ['ui'],
+    experimental: true,
+    description: 'Composant de signature par le doigt ou la souris. Différent entre web et mobile. La hauteur doit être fixe.',
+    component: Signature,
+    styleFn: useStyles,
+};
+export const Example = () => {
+    const containerHeight = 100;
+    const [value, setValue] = React.useState(null);
+    return (_jsxs(Box, { width: '100%', children: [_jsx(Signature, { height: containerHeight, onChange: setValue }), value && (_jsxs(_Fragment, { children: [_jsx(Typography, { fontSize: 24, children: "Signature captur\u00E9e :" }), _jsx(Image, { contentFit: "contain", height: containerHeight, width: "100%", source: value })] }))] }));
+};
+export const CustomLabels = () => {
+    const containerHeight = 100;
+    const [value, setValue] = React.useState(null);
+    return (_jsxs(Box, { width: '100%', children: [_jsx(Signature, { height: containerHeight, onChange: setValue, dateLabel: "Date :", clearButtonLabel: "Clear" }), value && (_jsxs(_Fragment, { children: [_jsx(Typography, { fontSize: 24, children: "Captured signature:" }), _jsx(Image, { contentFit: "contain", height: containerHeight, width: "100%", source: value })] }))] }));
+};
+export * as Sources from './Signature.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6e,CAAC;AAElgB,eAAO,MAAM,YAAY,cAAiiB,CAAC;AAE3jB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Signature/Signature.stories.tsx
+export const Example = () => "export const Example = () => {\n  const containerHeight = 100;\n  const [value, setValue] = React.useState<string | null>(null);\n\n  return (\n    <Box width={'100%'}>\n      <Signature height={containerHeight} onChange={setValue} />\n\n      {value && (\n        <>\n          <Typography fontSize={24}>Signature capturée :</Typography>\n          <Image contentFit=\"contain\" height={containerHeight} width=\"100%\" source={value} />\n        </>\n      )}\n    </Box>\n  );\n};";
+export const CustomLabels = () => "export const CustomLabels = () => {\n  const containerHeight = 100;\n  const [value, setValue] = React.useState<string | null>(null);\n\n  return (\n    <Box width={'100%'}>\n      <Signature height={containerHeight} onChange={setValue} dateLabel=\"Date :\" clearButtonLabel=\"Clear\" />\n\n      {value && (\n        <>\n          <Typography fontSize={24}>Captured signature:</Typography>\n          <Image contentFit=\"contain\" height={containerHeight} width=\"100%\" source={value} />\n        </>\n      )}\n    </Box>\n  );\n};";
+export const storySources = {
+    Example,
+    CustomLabels,
+};

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

@@ -0,0 +1,29 @@
+export declare const useStyles: () => {
+    container: {
+        width: "100%";
+        display: "flex";
+        flexDirection: "column";
+    };
+    pen: {
+        color: "#373A3F";
+        backgroundColor: "#FFFFFF";
+    };
+    signatureWeb: {
+        borderColor: "#DEE3EC";
+        borderWidth: number;
+        borderRadius: import("@alveole/theme").Spacing;
+    };
+    headerSignature: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    date: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+};
+//# sourceMappingURL=Signature.styles.d.ts.map

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

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

package/dist/ui/Signature/Signature.styles.js

@@ -0,0 +1,26 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing, text }) => ({
+    container: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    pen: {
+        color: color.text['default-grey'],
+        backgroundColor: '#FFFFFF',
+    },
+    signatureWeb: {
+        borderColor: color.border['default-grey'],
+        borderWidth: 2,
+        borderRadius: spacing('075'),
+    },
+    headerSignature: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    date: {
+        ...text['Corps de texte'].XS.Regular,
+    },
+}));

package/dist/ui/Signature/Signature.web.d.ts

@@ -0,0 +1,3 @@
+import { SignatureProps } from './Signature';
+export declare const Signature: (props: SignatureProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Signature.web.d.ts.map

package/dist/ui/Signature/Signature.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.web.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAyE9C,CAAC"}

package/dist/ui/Signature/Signature.web.js

@@ -0,0 +1,50 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DateFormats, displayDate, isValidDate } from '@alveole/core';
+import ReactSignature from '@uiw/react-signature';
+import * as React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { useStyles } from './Signature.styles';
+export const Signature = (props) => {
+    const { height, style, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, ...boxProps } = props;
+    const styles = useStyles();
+    const signatureRef = React.useRef(null);
+    const serializeSvgToBase64 = (svg) => {
+        return new Promise(resolve => {
+            const svgString = new XMLSerializer().serializeToString(svg);
+            const blob = new Blob([svgString], { type: 'image/svg+xml' });
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64data = reader.result;
+                resolve(base64data);
+            };
+            reader.readAsDataURL(blob);
+        });
+    };
+    React.useEffect(() => {
+        const svgEl = signatureRef.current?.svg;
+        if (!svgEl)
+            return;
+        const handlePointerUp = async () => {
+            const svgEl = signatureRef.current?.svg;
+            if (!svgEl)
+                return;
+            const base64 = await serializeSvgToBase64(svgEl);
+            onChange(base64);
+        };
+        svgEl.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            svgEl.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [signatureRef.current?.svg, onChange]);
+    const handleClear = () => {
+        signatureRef.current?.clear();
+        onChange(null);
+    };
+    const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
+    return (_jsxs(Box, { tag: "signature", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { style: styles.headerSignature, children: [_jsxs(Typography, { style: styles.date, children: [dateLabel, " ", dateFormat] }), _jsx(Button, { title: clearButtonLabel, variant: "tertiary", size: "xs", onPress: handleClear })] }), _jsx(Box, { style: { ...styles.signatureWeb, height }, children: _jsx(ReactSignature, { ref: (inst) => {
+                        if (inst)
+                            signatureRef.current = inst;
+                    }, style: styles.signatureWeb, fill: styles.pen.color, options: { size: 12, smoothing: 0.15, thinning: 0.73, streamline: 0.5 } }) })] }));
+};

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

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

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

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

package/dist/ui/Signature/index.js

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

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    tags: "Composant"[];
+    tags: "ui"[];
     experimental: false;
     figmaURL: string;
     description: string;

package/dist/ui/Tabs/Tabs.stories.js

@@ -5,7 +5,7 @@ import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
     title: 'Tabs',
-    tags: ['Composant'],
+    tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1863-621',
     description: 'Composant d’onglets (tabs) basé sur tamagui.',

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    tags: "Kit"[];
+    tags: "ui"[];
     experimental: false;
     figmaURL: string;
     description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,MAAM,+CAWlB,CAAC;AAEF,eAAO,MAAM,KAAK,+CASjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,MAAM,+CASlB,CAAC;AAEF,eAAO,MAAM,KAAK,+CASjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

package/dist/ui/Tag/Tag.stories.js

@@ -4,13 +4,13 @@ import { Tag } from './Tag';
 import { useStyles } from './Tag.styles';
 export default {
     title: 'Tag',
-    tags: ['Kit'],
+    tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1002-8509',
     description: 'Différents tags. Composant de type Typography.',
     component: Tag,
     styleFn: useStyles,
 };
-export const Colors = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }) }));
+export const Colors = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }));
 export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", color: "default", children: "Tag sm" }), _jsx(Tag, { size: "md", color: "default", children: "Tag md" })] }));
 export * as Sources from './Tag.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,cAAkS,CAAC;AAEtT,eAAO,MAAM,KAAK,cAAqQ,CAAC;AAExR,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,cAA8Q,CAAC;AAElS,eAAO,MAAM,KAAK,cAAqQ,CAAC;AAExR,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tag/Tag.stories.tsx
-export const Colors = () => "export const Colors = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n      <Tag size=\"md\" color=\"default\">\n        Tag default\n      </Tag>\n      <Tag size=\"md\" color=\"action\">\n        Tag action\n      </Tag>\n    </Box>\n  </Box>\n);";
+export const Colors = () => "export const Colors = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"md\" color=\"default\">\n      Tag default\n    </Tag>\n    <Tag size=\"md\" color=\"action\">\n      Tag action\n    </Tag>\n  </Box>\n);";
 export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"sm\" color=\"default\">\n      Tag sm\n    </Tag>\n    <Tag size=\"md\" color=\"default\">\n      Tag md\n    </Tag>\n  </Box>\n);";
 export const storySources = {
     Colors,

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

@@ -0,0 +1,4 @@
+import { BoxProps } from '../../core';
+export type ToastProps = Omit<BoxProps, 'children'>;
+export declare function Toast(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAIvD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEpD,wBAAgB,KAAK,mDA4EpB"}

package/dist/ui/Toast/Toast.js

@@ -0,0 +1,48 @@
+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';
+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));
+}

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

@@ -0,0 +1,94 @@
+import { Toast } from './Toast';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: typeof Toast;
+    styleFn: () => {
+        container: {
+            backgroundColor: "#FFFFFF";
+            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";
+        } | {
+            shadowColor: import("@alveole/theme").Color;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+            backgroundColor: "#FFFFFF";
+            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";
+        } | {
+            boxShadow: string;
+            backgroundColor: "#FFFFFF";
+            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";
+        };
+        contenu: {
+            display: "flex";
+            flex: number;
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        titleContainer: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+            minHeight: import("@alveole/theme").Spacing;
+        };
+        title: {
+            color: "#151617";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+        icon: {
+            paddingTop: import("@alveole/theme").Spacing;
+        };
+        iconDefault: {
+            color: "#373A3F";
+        };
+        iconInfo: {
+            color: "#373A3F";
+        };
+        iconSuccess: {
+            color: "#1B7440";
+        };
+        iconError: {
+            color: "#C62416";
+        };
+        message: {
+            color: "#373A3F";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+    };
+};
+export default _default;
+export declare const All: () => import("react/jsx-runtime").JSX.Element;
+export * as Sources from './Toast.stories.sources';
+//# sourceMappingURL=Toast.stories.d.ts.map

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

@@ -0,0 +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,+CAwDf,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,51 @@
+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 { useStyles } from './Toast.styles';
+import { defaultDuration } from './ToastBridge';
+import { useToast } from './index';
+export default {
+    title: 'Toast',
+    tags: ['ui'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=2084-1372',
+    description: `Toaster Tamagui. Contient le provider global et le hook useToast. Par défaut un toast reste affiché pendant ${defaultDuration / 1000} secondes`,
+    component: Toast,
+    styleFn: useStyles,
+};
+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' });
+    const infoToast = () => toast.present('Information', 'Message', { variant: 'info' });
+    const infoToastMultiLine = () => toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\nDeuxième ligne', {
+        variant: 'info',
+    });
+    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: `
+            import { Toasts } from '@alveole/components';
+            import { ThemeProvider } from '@alveole/theme';
+            import { Stack } from 'expo-router';
+            import React from 'react';
+            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>
+              );
+            }
+          ` })] })] }));
+};
+export * as Sources from './Toast.stories.sources';

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +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  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 storySources = {
+    All,
+};