@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/{OtpField/OtpField.stories.d.ts → FormControl/OtpInput.stories.d.ts}

@@ -3,16 +3,11 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("react-native-otp-entry").OtpInputProps, "style"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native-otp-entry").OtpInputProps, "theme" | "style" | "focusColor" | "onTextChange"> & {
         readOnly?: boolean;
-    } & {
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
-        onChange?: import("..").FormControlOtpInputProps["onTextChange"];
+        error?: string;
+        success?: string;
+        onChange?: import("react-native-otp-entry").OtpInputProps["onTextChange"];
     } & import("react").RefAttributes<import("react-native-otp-entry").OtpInputRef>>;
     styleFn: () => {
         inputHeading: {};
@@ -21,7 +16,7 @@ declare const _default: {
             gap: string | number;
         };
         pinCodeContainerStyle: {
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderColor: string;
             backgroundColor: "#FFFFFF";
@@ -34,11 +29,15 @@ declare const _default: {
         pinCodeContainerStyleDisabled: {
             backgroundColor: string;
         };
-        focusedPinCodeContainerStyle: {
-            outlineStyle: "solid";
-            outlineWidth: number;
-            outlineColor: string;
-            outlineOffset: number;
+        pinCodeContainerStyleError: {
+            borderColor: string;
+        };
+        pinCodeContainerStyleSuccess: {
+            borderColor: string;
+        };
+        focusedPinCodeContainerStyle: import("@alveole/theme").FocusBorderStyle;
+        hiddenInputStyle: {
+            outline: string;
         };
         focusStickStyle: {
             maxHeight: string | number;
@@ -55,5 +54,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
-export * as Sources from './OtpField.stories.sources';
-//# sourceMappingURL=OtpField.stories.d.ts.map
+export * as Sources from './OtpInput.stories.sources';
+//# sourceMappingURL=OtpInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/OtpInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAenB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { FormControl } from './FormControl';
+import { OtpInput } from './OtpInput';
+import { useStyles } from './OtpInput.styles';
+export default {
+    title: 'OtpInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ OTP (code à 4 chiffres), nu : on le place dans un FormControl pour son libellé, son aide et sa validation.',
+    component: OtpInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Code de v\u00E9rification", children: _jsx(OtpInput, { onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { onChange: () => { }, disabled: true }) })] }));
+export * as Sources from './OtpInput.stories.sources';

package/dist/ui/{OtpField/OtpField.stories.sources.d.ts → FormControl/OtpInput.stories.sources.d.ts}

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

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/OtpInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Code de vérification\">\n      <OtpInput onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Avec erreur\" error=\"Code invalide\">\n      <OtpInput onChange={() => {}} error=\"Code invalide\" />\n    </FormControl>\n    <FormControl label=\"Avec succès\" success=\"Code vérifié\">\n      <OtpInput onChange={() => {}} success=\"Code vérifié\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <OtpInput onChange={() => {}} disabled />\n    </FormControl>\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

package/dist/ui/FormControl/OtpInput.styles.d.ts

@@ -0,0 +1,54 @@
+export declare const useStyles: () => {
+    inputHeading: {};
+    containerStyle: {
+        justifyContent: "center";
+        gap: string | number;
+    };
+    pinCodeContainerStyle: {
+        borderRadius: import("@alveole/theme").Radius;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: "#FFFFFF";
+        overflow: "hidden";
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    pinCodeContainerStyleDisabled: {
+        backgroundColor: string;
+    };
+    pinCodeContainerStyleError: {
+        borderColor: string;
+    };
+    pinCodeContainerStyleSuccess: {
+        borderColor: string;
+    };
+    /**
+     * La cellule active ne recoit pas d'anneau : c'est sa propre bordure qui change de
+     * couleur, selon la definition commune du theme (ADR 0012). La bibliotheque empile ce
+     * style par-dessus celui de la cellule au repos, ce qui donne au focus la priorite sur
+     * l'erreur et le succes sans que nous ayons a l'arbitrer.
+     */
+    focusedPinCodeContainerStyle: import("@alveole/theme").FocusBorderStyle;
+    /**
+     * La bibliotheque cache la vraie saisie derriere les cellules : c'est elle qui prend le
+     * focus, et le navigateur lui posait son propre contour par-dessus des cellules dont la
+     * bordure disait deja le focus. Meme parade que `FormControl` sur ses `input`.
+     */
+    hiddenInputStyle: {
+        outline: string;
+    };
+    focusStickStyle: {
+        maxHeight: string | number;
+    };
+    pinCodeTextStyle: {
+        fontSize: 18;
+        lineHeight: 28;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: string;
+    };
+};
+//# sourceMappingURL=OtpInput.styles.d.ts.map

package/dist/ui/FormControl/OtpInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/OtpInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;IA4BpB;;;;;OAKG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;CAWF,CAAC"}

package/dist/ui/FormControl/OtpInput.styles.js

@@ -0,0 +1,52 @@
+import { focusBorder, makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radius }) => ({
+    inputHeading: {},
+    containerStyle: {
+        justifyContent: 'center',
+        gap: spacing('1W'),
+    },
+    pinCodeContainerStyle: {
+        borderRadius: radius('md'),
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        overflow: 'hidden',
+        height: spacingValue('300'),
+        width: spacingValue('300'),
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    pinCodeContainerStyleDisabled: {
+        backgroundColor: color.background['disabled-grey'],
+    },
+    // La legende sous le champ disait seule l'erreur et le succes ; les cellules les portent
+    // aussi, comme le cadre des autres familles de champs.
+    pinCodeContainerStyleError: {
+        borderColor: color.border['plain-error'],
+    },
+    pinCodeContainerStyleSuccess: {
+        borderColor: color.border['plain-success'],
+    },
+    /**
+     * La cellule active ne recoit pas d'anneau : c'est sa propre bordure qui change de
+     * couleur, selon la definition commune du theme (ADR 0012). La bibliotheque empile ce
+     * style par-dessus celui de la cellule au repos, ce qui donne au focus la priorite sur
+     * l'erreur et le succes sans que nous ayons a l'arbitrer.
+     */
+    focusedPinCodeContainerStyle: focusBorder(),
+    /**
+     * La bibliotheque cache la vraie saisie derriere les cellules : c'est elle qui prend le
+     * focus, et le navigateur lui posait son propre contour par-dessus des cellules dont la
+     * bordure disait deja le focus. Meme parade que `FormControl` sur ses `input`.
+     */
+    hiddenInputStyle: {
+        outline: 'none',
+    },
+    focusStickStyle: {
+        maxHeight: spacing('2W'),
+    },
+    pinCodeTextStyle: {
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].LG.Regular,
+    },
+}));

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

@@ -1,20 +1,19 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput, TextInputProps as ReactNativeTextInputProps } from 'react-native';
-export type TextInputElement = ReactNativeTextInput;
-export type TextInputProps = Omit<ReactNativeTextInputProps, 'style'> & {
+import { TextInputElement, TextInputProps } from './TextInput.types';
+export type { TextInputElement, TextInputProps };
+/**
+ * Aiguillage entre les deux facons de saisir. Le web sait deja agrandir une zone de texte,
+ * la modale n'y aurait rien a apporter : `openModal` n'y est pas suivi.
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    type?: "text" | "email" | "tel" | "password";
     disabled?: boolean;
+    error?: string;
+    success?: string;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-};
-export declare const TextInput: React.ForwardRefExoticComponent<Omit<ReactNativeTextInputProps, "style"> & {
-    disabled?: boolean;
-    startAdornment?: React.ReactNode;
-    endAdornment?: React.ReactNode;
-    openModal?: boolean;
-    modalSubmitLabel?: string;
-    onModalSubmit?: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<import("react-native").TextInput>>;
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/ui/FormControl/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,IAAI,oBAAoB,EACjC,cAAc,IAAI,yBAAyB,EAG5C,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS;eART,OAAO;qBACD,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;gBAClB,OAAO;uBACA,MAAM;oBACT,MAAM,IAAI;8CA0N1B,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKrE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;0DAgBpB,CAAC"}

package/dist/ui/FormControl/TextInput.js

@@ -1,118 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@alveole/theme';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Keyboard, Platform, Pressable, TextInput as ReactNativeTextInput, } from 'react-native';
-import { Box } from '../../core';
+import { Platform } from 'react-native';
+import { Box } from '../../core/Box';
 import { useStyles } from './FormControl.styles';
-import { FormControlModal } from './FormControlModal';
+import { TextInputInline } from './TextInputInline';
+import { TextInputModal } from './TextInputModal';
+import { TextInputPassword } from './TextInputPassword';
+/**
+ * Aiguillage entre les deux facons de saisir. Le web sait deja agrandir une zone de texte,
+ * la modale n'y aurait rien a apporter : `openModal` n'y est pas suivi.
+ */
 export const TextInput = React.forwardRef(function TextInput(props, ref) {
-    const { disabled, readOnly, startAdornment, endAdornment, onFocus, onBlur, onPressIn, openModal, modalSubmitLabel, onModalSubmit, ...inputProps } = props;
-    const { color } = useTheme();
     const styles = useStyles();
-    const shouldUseModal = Boolean(openModal && inputProps.multiline && Platform.OS !== 'web');
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const [isModalReady, setIsModalReady] = React.useState(false);
-    const [focus, setFocus] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const modalInputRef = React.useRef(null);
-    const pendingFocusEventRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => inputRef.current);
-    React.useEffect(() => {
-        if (!shouldUseModal)
-            return;
-        setFocus(isModalOpen);
-    }, [isModalOpen, shouldUseModal]);
-    // Appeler onFocus une fois que la modale est prête
-    React.useEffect(() => {
-        if (isModalReady && pendingFocusEventRef.current) {
-            const event = pendingFocusEventRef.current;
-            pendingFocusEventRef.current = null;
-            requestAnimationFrame(() => {
-                onFocus?.(event);
-            });
-        }
-    }, [isModalReady, onFocus]);
-    const focusModalInput = React.useCallback(() => {
-        if (!shouldUseModal)
-            return;
-        requestAnimationFrame(() => {
-            modalInputRef.current?.focus();
-        });
-    }, [shouldUseModal]);
-    const handleFocus = (e) => {
-        if (shouldUseModal) {
-            inputRef.current?.blur();
-            onFocus?.(e);
-            return;
-        }
-        if (!disabled && !readOnly)
-            setFocus(true);
-        onFocus?.(e);
-    };
-    const handleBlur = (e) => {
-        if (shouldUseModal) {
-            onBlur?.(e);
-            return;
-        }
-        if (!disabled && !readOnly)
-            setFocus(false);
-        onBlur?.(e);
-    };
-    const handleOpenModal = () => {
-        if (!shouldUseModal || disabled || readOnly || isModalOpen)
-            return;
-        setIsModalOpen(true);
-    };
-    const closeModal = () => {
-        if (!isModalReady)
-            return;
-        Keyboard.dismiss();
-        modalInputRef.current?.blur();
-        setIsModalOpen(false);
-        inputRef.current?.blur();
-    };
-    const handleModalSubmit = () => {
-        if (!isModalReady)
-            return;
-        onModalSubmit?.();
-        closeModal();
-    };
-    return (_jsxs(Box, { tag: "form-control-text-input", style: {
+    const shouldUseModal = Boolean(props.openModal && props.multiline && Platform.OS !== 'web');
+    const Saisie = shouldUseModal ? TextInputModal : props.type === 'password' ? TextInputPassword : TextInputInline;
+    return (_jsx(Box, { tag: "form-control-text-input", style: {
             ...styles.inputContainer,
-            ...(inputProps.multiline ? { height: 'auto' } : {}),
-        }, children: [shouldUseModal ? (_jsxs(Pressable, { style: {
-                    ...styles.inputInner,
-                    ...(disabled ? styles.inputDisabled : {}),
-                    ...(focus ? styles.inputFocused : {}),
-                    ...(endAdornment ? { paddingRight: 0 } : {}),
-                    ...(startAdornment ? { paddingLeft: 0 } : {}),
-                    ...(inputProps.multiline ? { paddingTop: 8 } : {}),
-                }, onPress: handleOpenModal, children: [startAdornment, _jsx(ReactNativeTextInput, { ref: inputRef, style: {
-                            ...styles.input,
-                            ...(startAdornment && endAdornment ? { textAlign: 'center' } : {}),
-                        }, readOnly: true, editable: false, focusable: false, pointerEvents: "none", showSoftInputOnFocus: false, caretHidden: true, selectTextOnFocus: false, contextMenuHidden: true, selectionColor: "transparent", placeholderTextColor: color.text.inverse.muted, ...inputProps }), endAdornment] })) : (_jsxs(Box, { tag: "form-control-text-input-inner", style: {
-                    ...styles.inputInner,
-                    ...(disabled ? styles.inputDisabled : {}),
-                    ...(focus ? styles.inputFocused : {}),
-                    ...(endAdornment ? { paddingRight: 0 } : {}),
-                    ...(startAdornment ? { paddingLeft: 0 } : {}),
-                    ...(inputProps.multiline ? { paddingTop: 8 } : {}),
-                }, children: [startAdornment, _jsx(ReactNativeTextInput, { ref: inputRef, style: {
-                            ...styles.input,
-                            ...(startAdornment && endAdornment ? { textAlign: 'center' } : {}),
-                        }, readOnly: disabled === true || readOnly === true, editable: inputProps.editable, onFocus: handleFocus, onBlur: handleBlur, onPressIn: onPressIn, showSoftInputOnFocus: inputProps.showSoftInputOnFocus, caretHidden: inputProps.caretHidden, selectTextOnFocus: inputProps.selectTextOnFocus, contextMenuHidden: inputProps.contextMenuHidden, selectionColor: inputProps.selectionColor, placeholderTextColor: color.text.inverse.muted, ...inputProps }), endAdornment] })), shouldUseModal && (_jsx(FormControlModal, { open: isModalOpen, onClose: closeModal, onShow: () => {
-                    setIsModalReady(true);
-                    focusModalInput();
-                }, onDismiss: () => {
-                    setIsModalReady(false);
-                    pendingFocusEventRef.current = null;
-                    Keyboard.dismiss();
-                }, submitLabel: modalSubmitLabel, onSubmit: onModalSubmit ? handleModalSubmit : undefined, children: _jsx(Box, { style: styles.modalInputContainer, children: _jsx(ReactNativeTextInput, { ref: modalInputRef, style: styles.modalInput, readOnly: disabled === true || readOnly === true, onFocus: e => {
-                            if (!isModalReady) {
-                                pendingFocusEventRef.current = e;
-                            }
-                            else {
-                                onFocus?.(e);
-                            }
-                        }, onBlur: onBlur, placeholderTextColor: color.text.inverse.muted, ...inputProps, multiline: true, textAlignVertical: "top", autoFocus: true, showSoftInputOnFocus: true }) }) }))] }));
+            ...(props.multiline ? { height: 'auto' } : {}),
+        }, children: _jsx(Saisie, { ...props, ref: ref }) }));
 });

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

@@ -0,0 +1,221 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        type?: "text" | "email" | "tel" | "password";
+        disabled?: boolean;
+        error?: string;
+        success?: string;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {
+        caption: {
+            display: "flex";
+            flexDirection: "row";
+            gap: string | number;
+            alignItems: "flex-start";
+            marginTop: string | number;
+            width: "100%";
+        };
+        captionIcon: {
+            flexShrink: number;
+            marginTop: number;
+        };
+        captionText: {
+            flex: number;
+            flexShrink: number;
+            minWidth: number;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        errorText: {
+            color: string;
+        };
+        successText: {
+            color: string;
+        };
+        modalOverlay: {
+            flex: number;
+            backgroundColor: string;
+        };
+        modalSheet: {
+            width: "100%";
+            flex: number;
+        };
+        modalContent: {
+            flex: number;
+            backgroundColor: "#FFFFFF";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+        };
+        modalHeader: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: string | number;
+        };
+        modalHeaderLeft: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalHeaderRight: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalFooter: {
+            marginTop: string | number;
+        };
+        modalInputContainer: {
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            minHeight: number;
+        };
+        modalInput: {
+            color: string;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            minHeight: number;
+            flex: number;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        inputFocused: import("@alveole/theme").FocusBorderStyle;
+        inputError: {
+            borderColor: string;
+        };
+        inputSuccess: {
+            borderColor: string;
+        };
+        inputDisabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        inputContainer: {
+            width: "100%";
+        };
+        inputInner: {
+            display: "flex";
+            flexDirection: "row";
+            gap: string | number;
+            padding: number;
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            overflow: "hidden";
+            width: "100%";
+            minHeight: number;
+        };
+        input: {
+            display: "flex";
+            flexDirection: "row";
+            outline: string;
+            color: string;
+            fontFamily: string;
+            fontSize: 14;
+            marginTop: string | number;
+            marginBottom: string | number;
+            paddingLeft: number;
+            paddingRight: number;
+            minHeight: number | undefined;
+            flex: number;
+        };
+        inputFileText: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: string;
+        };
+        inputWeb: {
+            borderWidth: number;
+            borderStyle: "none";
+            outline: string;
+            backgroundColor: "transparent";
+            lineHeight: string;
+            height: 20;
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        formControl: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
+            width: "100%";
+        };
+        labelContainer: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+        };
+        label: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        labelDisabled: {
+            color: string;
+        };
+        hintContainer: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+        };
+        hint: {
+            color: string;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        hintDisabled: {
+            color: string;
+        };
+        requiredMarker: {
+            color: string;
+            marginLeft: string | number;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Email: () => import("react").JSX.Element;
+export declare const Telephone: () => import("react").JSX.Element;
+export declare const MotDePasse: () => import("react").JSX.Element;
+export declare const NonModifiable: () => import("react").JSX.Element;
+export declare const Multiline: () => import("react").JSX.Element;
+export declare const MultilineWithModal: () => import("react").JSX.Element;
+export * as Sources from './TextInput.stories.sources';
+//# sourceMappingURL=TextInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAIjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAIzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FormControl } from './FormControl';
+import { useStyles } from './FormControl.styles';
+import { TextInput } from './TextInput';
+export default {
+    title: 'TextInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ de saisie texte, nu : on le place dans un FormControl pour son libellé, son aide et sa validation.',
+    component: TextInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(FormControl, { label: "Nom", children: _jsx(TextInput, { placeholder: "Jean Dupont" }) }));
+export const Email = () => (_jsx(FormControl, { label: "Adresse email", children: _jsx(TextInput, { type: "email", placeholder: "jean@exemple.fr" }) }));
+export const Telephone = () => (_jsx(FormControl, { label: "T\u00E9l\u00E9phone", children: _jsx(TextInput, { type: "tel", placeholder: "06 12 34 56 78" }) }));
+export const MotDePasse = () => (_jsx(FormControl, { label: "Mot de passe", children: _jsx(TextInput, { type: "password", placeholder: "Votre mot de passe" }) }));
+export const NonModifiable = () => (_jsx(FormControl, { label: "Adresse email", children: _jsx(TextInput, { type: "email", value: "jean@exemple.fr", editable: false }) }));
+export const Multiline = () => (_jsx(FormControl, { label: "Message", children: _jsx(TextInput, { placeholder: "Votre message...", multiline: true, numberOfLines: 4 }) }));
+export const MultilineWithModal = () => {
+    const [text, setText] = useState('');
+    return (_jsx(FormControl, { label: "Description", children: _jsx(TextInput, { value: text, onChangeText: setText, placeholder: "Taper pour ouvrir la modale de saisie...", multiline: true, openModal: true, modalSubmitLabel: "Confirmer" }) }));
+};
+export * as Sources from './TextInput.stories.sources';

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

@@ -0,0 +1,18 @@
+export declare const Default: () => string;
+export declare const Email: () => string;
+export declare const Telephone: () => string;
+export declare const MotDePasse: () => string;
+export declare const NonModifiable: () => string;
+export declare const Multiline: () => string;
+export declare const MultilineWithModal: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Email: () => string;
+    readonly Telephone: () => string;
+    readonly MotDePasse: () => string;
+    readonly NonModifiable: () => string;
+    readonly Multiline: () => string;
+    readonly MultilineWithModal: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=TextInput.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6I,CAAC;AAElK,eAAO,MAAM,KAAK,cAAwK,CAAC;AAE3L,eAAO,MAAM,SAAS,cAAqK,CAAC;AAE5L,eAAO,MAAM,UAAU,cAAkL,CAAC;AAE1M,eAAO,MAAM,aAAa,cAA2L,CAAC;AAEtN,eAAO,MAAM,SAAS,cAAoL,CAAC;AAE3M,eAAO,MAAM,kBAAkB,cAAkZ,CAAC;AAElb,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}