@alveole/components 0.43.3 → 1.0.1

package/dist/ui/EmailField/EmailField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import { EmailInput } from '../EmailInput';
+export const EmailField = React.forwardRef(function EmailField(props, ref) {
+    const { label, labelRight, hint, error, success, disabled, onChange } = props;
+    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,25 @@
+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 & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './EmailField.stories.sources';
+//# sourceMappingURL=EmailField.stories.d.ts.map

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

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

package/dist/ui/EmailField/EmailField.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { EmailField } from './EmailField';
+export default {
+    title: 'EmailField',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ email avec label. Clavier email, lowercase automatique.',
+    component: EmailField,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(EmailField, { label: "Email", placeholder: "jean@exemple.fr" }), _jsx(EmailField, { label: "Avec erreur", placeholder: "jean@exemple.fr", error: "Format invalide" }), _jsx(EmailField, { label: "Avec succ\u00E8s", value: "jean@exemple.fr", success: "Email valide" }), _jsx(EmailField, { label: "D\u00E9sactiv\u00E9", value: "jean@exemple.fr", disabled: true })] }));
+export * as Sources from './EmailField.stories.sources';

package/dist/ui/EmailField/EmailField.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=EmailField.stories.sources.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/EmailField/EmailField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <EmailField label=\"Email\" placeholder=\"jean@exemple.fr\" />\n    <EmailField label=\"Avec erreur\" placeholder=\"jean@exemple.fr\" error=\"Format invalide\" />\n    <EmailField label=\"Avec succès\" value=\"jean@exemple.fr\" success=\"Email valide\" />\n    <EmailField label=\"Désactivé\" value=\"jean@exemple.fr\" disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/EmailField/index.js

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

package/dist/ui/EmailInput/EmailInput.d.ts

@@ -0,0 +1,16 @@
+import { TextInputProps } from '@alveole/components';
+import React from 'react';
+export type EmailInputProps = TextInputProps & {
+    onChange?: TextInputProps['onChangeText'];
+};
+export declare const EmailInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    onChange?: TextInputProps["onChangeText"];
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=EmailInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../../src/ui/EmailInput/EmailInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC7C,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;eAHV,cAAc,CAAC,cAAc,CAAC;0DAuBzC,CAAC"}

package/dist/ui/EmailInput/EmailInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from '@alveole/components';
+import React from 'react';
+export const EmailInput = React.forwardRef(function EmailInput(props, ref) {
+    const { onChange } = props;
+    const handleChange = value => {
+        onChange?.(value.toLowerCase());
+    };
+    return (_jsx(TextInput, { ref: ref, onChangeText: handleChange, keyboardType: "email-address", textContentType: "emailAddress", autoCapitalize: "none", autoComplete: "email", inputMode: "email", ...props, autoCorrect: false }));
+});

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

@@ -0,0 +1,21 @@
+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;
+    } & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './EmailInput.stories.sources';
+//# sourceMappingURL=EmailInput.stories.d.ts.map

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

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

package/dist/ui/EmailInput/EmailInput.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { EmailInput } from './EmailInput';
+export default {
+    title: 'EmailInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Input email brut (sans label). Clavier email, lowercase automatique.',
+    component: EmailInput,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(EmailInput, { placeholder: "jean@exemple.fr" }), _jsx(EmailInput, { placeholder: "jean@exemple.fr", value: "jean@exemple.fr" }), _jsx(EmailInput, { placeholder: "jean@exemple.fr", editable: false })] }));
+export * as Sources from './EmailInput.stories.sources';

package/dist/ui/EmailInput/EmailInput.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=EmailInput.stories.sources.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/EmailInput/EmailInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <EmailInput placeholder=\"jean@exemple.fr\" />\n    <EmailInput placeholder=\"jean@exemple.fr\" value=\"jean@exemple.fr\" />\n    <EmailInput placeholder=\"jean@exemple.fr\" editable={false} />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/EmailInput/index.js

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

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

@@ -33,9 +33,9 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             justifyContent: "center";
-            color: "#002764";
-            backgroundColor: "#F2F9FF";
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            color: string;
+            backgroundColor: string;
+            borderRadius: import("@alveole/theme").Radius;
             padding: import("@alveole/theme").Spacing;
         };
         messageEtDescription: {
@@ -52,7 +52,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: "#151617";
+            color: string;
         };
         description: {
             textAlign: "center";
@@ -61,7 +61,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: "#5F6571";
+            color: string;
         };
         footer: {
             width: "100%" | undefined;

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

@@ -26,9 +26,9 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        color: "#002764";
-        backgroundColor: "#F2F9FF";
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        color: string;
+        backgroundColor: string;
+        borderRadius: import("@alveole/theme").Radius;
         padding: import("@alveole/theme").Spacing;
     };
     messageEtDescription: {
@@ -45,7 +45,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: "#151617";
+        color: string;
     };
     description: {
         textAlign: "center";
@@ -54,7 +54,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: "#5F6571";
+        color: string;
     };
     footer: {
         width: "100%" | undefined;

package/dist/ui/FileField/FileField.d.ts

@@ -0,0 +1,5 @@
+import { FormControlCaptionProps, FormControlFileInputProps, FormControlFileInputValue, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+export type FileFieldValue = FormControlFileInputValue;
+export type FileFieldProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & FormControlFileInputProps;
+export declare const FileField: (props: FileFieldProps) => import("react").JSX.Element;
+//# sourceMappingURL=FileField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,yBAAyB,EACzB,yBAAyB,EAEzB,oBAAoB,EAEpB,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,cAAc,GAAG,yBAAyB,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAChD,oBAAoB,GACpB,uBAAuB,GACvB,yBAAyB,CAAC;AAE5B,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAwC9C,CAAC"}

package/dist/ui/FileField/FileField.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlFileInput, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import { Alert } from '../../core/Alert';
+import { useStyles } from './FileField.styles';
+export const FileField = (props) => {
+    const { label, labelRight, hint, error, success, disabled, type, onChange } = props;
+    const styles = useStyles();
+    const onValueChange = value => {
+        const normalizedValue = Array.isArray(value) ? value[0] : value;
+        const mimeType = normalizedValue?.mimeType;
+        if (type == null || mimeType == null)
+            return onChange(value);
+        const fileName = normalizedValue?.name;
+        if ((type.includes('image') && mimeType.startsWith('image')) ||
+            (type.includes('pdf') && mimeType.endsWith('pdf')) ||
+            (type.includes('csv') &&
+                (mimeType === 'text/csv' || mimeType === 'application/csv' || fileName?.endsWith('.csv'))))
+            return onChange(value);
+        else {
+            Alert.alert({
+                title: 'Type de fichier incorrect',
+                message: `Le format du fichier n'est pas pris en charge`,
+            });
+        }
+    };
+    return (_jsxs(FormControl, { style: styles.fileInput, children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+};

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./FileField").FileFieldProps) => import("react").JSX.Element;
+    styleFn: () => {
+        fileInput: {};
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export * as Sources from './FileField.stories.sources';
+//# sourceMappingURL=FileField.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAAkF,CAAC;AAExG,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/FileField/FileField.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { FileField } from './FileField';
+import { useStyles } from './FileField.styles';
+export default {
+    title: 'FileField',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ de sélection de fichier avec label et validation MIME.',
+    component: FileField,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FileField, { label: "Document", value: null, onChange: () => { } }), _jsx(FileField, { label: "Image uniquement", type: "image/*", value: null, onChange: () => { } }), _jsx(FileField, { label: "Avec erreur", value: null, error: "Ce champ est requis", onChange: () => { } })] }));
+export const Multiple = () => _jsx(FileField, { label: "Documents", value: null, multiple: true, onChange: () => { } });
+export * as Sources from './FileField.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FileField/FileField.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkY,CAAC;AAEvZ,eAAO,MAAM,QAAQ,cAAqH,CAAC;AAE3I,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FileField/FileField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FileField label=\"Document\" value={null} onChange={() => {}} />\n    <FileField label=\"Image uniquement\" type=\"image/*\" value={null} onChange={() => {}} />\n    <FileField label=\"Avec erreur\" value={null} error=\"Ce champ est requis\" onChange={() => {}} />\n  </Box>\n);";
+export const Multiple = () => "export const Multiple = () => <FileField label=\"Documents\" value={null} multiple onChange={() => {}} />;";
+export const storySources = {
+    Default,
+    Multiple,
+};

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

@@ -0,0 +1,4 @@
+export declare const useStyles: () => {
+    fileInput: {};
+};
+//# sourceMappingURL=FileField.styles.d.ts.map

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

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

package/dist/ui/FileField/FileField.styles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    fileInput: {},
+}));

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

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

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

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

package/dist/ui/FileField/index.js

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

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

@@ -21,7 +21,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: "#373A3F";
+            color: string;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -29,7 +29,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: "#8D97AC";
+            color: string;
         };
         hintContainer: {
             display: "flex";
@@ -37,7 +37,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: "#5F6571";
+            color: string;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -45,7 +45,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         hintDisabled: {
-            color: "#8D97AC";
+            color: string;
         };
         inputContainer: {
             width: "100%";
@@ -57,7 +57,7 @@ declare const _default: {
             padding: number;
             borderRadius: number;
             borderWidth: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             width: "100%";
@@ -67,7 +67,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: "#373A3F";
+            color: string;
             fontFamily: string;
             fontSize: 14;
             marginTop: import("@alveole/theme").Spacing;
@@ -78,20 +78,20 @@ declare const _default: {
             flex: number;
         };
         inputError: {
-            borderColor: "#C62416";
+            borderColor: string;
         };
         inputSuccess: {
-            borderColor: "#1B7440";
+            borderColor: string;
         };
         inputDisabled: {
-            borderColor: "#E6EAF1";
+            borderColor: string;
         };
         inputFocused: {
             outlineStyle: "solid";
             outlineWidth: number;
-            outlineColor: "#0A76F6";
+            outlineColor: string;
             outlineOffset: number;
-            borderColor: "#0A76F6" | undefined;
+            borderColor: string | undefined;
         };
         inputFile: {
             margin: number;
@@ -102,7 +102,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: "#373A3F";
+            color: string;
         };
         inputFileClear: {
             position: "absolute";
@@ -121,7 +121,7 @@ declare const _default: {
         };
         modalOverlay: {
             flex: number;
-            backgroundColor: `rgba${string}`;
+            backgroundColor: string;
         };
         modalSheet: {
             width: "100%";
@@ -159,12 +159,12 @@ declare const _default: {
         modalInputContainer: {
             borderRadius: number;
             borderWidth: number;
-            borderColor: "#DEE3EC";
+            borderColor: string;
             backgroundColor: "#FFFFFF";
             minHeight: number;
         };
         modalInput: {
-            color: "#373A3F";
+            color: string;
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;
             paddingTop: import("@alveole/theme").Spacing;
@@ -200,10 +200,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         errorText: {
-            color: "#C62416";
+            color: string;
         };
         successText: {
-            color: "#1C7F54";
+            color: string;
         };
     };
 };

package/dist/ui/FormControl/FormControl.stories.js

@@ -30,9 +30,9 @@ export const MultilineWithModal = () => {
     const [text, setText] = useState('');
     return (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Description" }) }), _jsx(TextInput, { value: text, onChangeText: setText, placeholder: "Taper pour ouvrir la modale de saisie...", multiline: true, openModal: true, modalSubmitLabel: "Confirmer" })] }));
 };
-export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Erreur", error: "Message erreur" }), _jsx(FormControlLabel, { label: "Succes", success: "Message succes" }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
-export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
-export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
+export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Erreur", error: "Message erreur" }), _jsx(FormControlLabel, { label: "Succes", success: "Message succes" }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
+export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
+export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
 export const Modal = () => {
     const [open, setOpen] = useState(false);
     return (_jsxs(Box, { children: [_jsx(Button, { variant: "secondary", title: "Ouvrir la modale", onPress: () => setOpen(true) }), _jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: () => setOpen(false), children: _jsx(TextInput, { placeholder: "Saisir un texte...", multiline: true, numberOfLines: 6 }) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAmU,CAAC;AAE9V,eAAO,MAAM,SAAS,cAAkT,CAAC;AAEzU,eAAO,MAAM,WAAW,cAAkT,CAAC;AAE3U,eAAO,MAAM,SAAS,cAAyP,CAAC;AAEhR,eAAO,MAAM,kBAAkB,cAA6d,CAAC;AAE7f,eAAO,MAAM,KAAK,cAAqc,CAAC;AAExd,eAAO,MAAM,OAAO,cAA6N,CAAC;AAElP,eAAO,MAAM,IAAI,cAAsO,CAAC;AAExP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,WAAW,cAA8sC,CAAC;AAEvuC,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,SAAS,cAA+2B,CAAC;AAEt4B,eAAO,MAAM,QAAQ,cAAyZ,CAAC;AAE/a,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAmU,CAAC;AAE9V,eAAO,MAAM,SAAS,cAAkT,CAAC;AAEzU,eAAO,MAAM,WAAW,cAAkT,CAAC;AAE3U,eAAO,MAAM,SAAS,cAAyP,CAAC;AAEhR,eAAO,MAAM,kBAAkB,cAA6d,CAAC;AAE7f,eAAO,MAAM,KAAK,cAAsc,CAAC;AAEzd,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,WAAW,cAA8sC,CAAC;AAEvuC,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,SAAS,cAA+2B,CAAC;AAEt4B,eAAO,MAAM,QAAQ,cAAyZ,CAAC;AAE/a,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -5,9 +5,9 @@ export const WithError = () => "export const WithError = () => (\n  <FormControl
 export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" success=\"Email valide\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
 export const Multiline = () => "export const Multiline = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Message\" />\n    </InputHeading>\n    <TextInput placeholder=\"Votre message...\" multiline numberOfLines={4} />\n  </FormControl>\n);";
 export const MultilineWithModal = () => "export const MultilineWithModal = () => {\n  const [text, setText] = useState('');\n  return (\n    <FormControl>\n      <InputHeading>\n        <FormControlLabel label=\"Description\" />\n      </InputHeading>\n      <TextInput\n        value={text}\n        onChangeText={setText}\n        placeholder=\"Taper pour ouvrir la modale de saisie...\"\n        multiline\n        openModal\n        modalSubmitLabel=\"Confirmer\"\n      />\n    </FormControl>\n  );\n};";
-export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Erreur\" error=\"Message erreur\" />\n    <FormControlLabel label=\"Succes\" success=\"Message succes\" />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
-export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
-export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
+export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Erreur\" error=\"Message erreur\" />\n    <FormControlLabel label=\"Succes\" success=\"Message succes\" />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
+export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
+export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
 export const Modal = () => "export const Modal = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <Box>\n      <Button variant=\"secondary\" title=\"Ouvrir la modale\" onPress={() => setOpen(true)} />\n      <FormControlModal\n        open={open}\n        onClose={() => setOpen(false)}\n        submitLabel=\"Valider\"\n        onSubmit={() => setOpen(false)}\n      >\n        <TextInput placeholder=\"Saisir un texte...\" multiline numberOfLines={6} />\n      </FormControlModal>\n    </Box>\n  );\n};";
 export const NumberInput = () => "export const NumberInput = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Montant\" />\n        </InputHeading>\n        <FormControlNumberInput value={value} onChange={setValue} placeholder=\"0\" />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Avec unites\" />\n        </InputHeading>\n        <FormControlNumberInput\n          value={value}\n          onChange={setValue}\n          startAdornment={\n            <Box style={{ paddingLeft: 8, paddingRight: 4 }}>\n              <Typography>€</Typography>\n            </Box>\n          }\n          endAdornment={\n            <Box style={{ paddingLeft: 4, paddingRight: 8 }}>\n              <Typography>TTC</Typography>\n            </Box>\n          }\n        />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Desactive\" />\n        </InputHeading>\n        <FormControlNumberInput value={42} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
 export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <FormControlDateInput type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <FormControlDateInput type=\"time\" value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <FormControlDateInput type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";