@alveole/components 1.10.0 → 2.0.0-alpha

package/dist/ui/{NumberField/NumberFieldControlButton.d.ts.map → FormControl/NumberInputControlButton.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldControlButton.d.ts","sourceRoot":"","sources":["../../../src/ui/NumberField/NumberFieldControlButton.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,OAAO,6BAA6B,gCAW5E,CAAC"}
+{"version":3,"file":"NumberInputControlButton.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInputControlButton.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,OAAO,6BAA6B,gCAY5E,CAAC"}

package/dist/ui/FormControl/NumberInputControlButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputButtonAdornment } from '../InputButtonAdornment';
+export const NumberInputControlButton = (props) => {
+    const { step = 1, action, disabled, onPress } = props;
+    return (_jsx(InputButtonAdornment, { icon: action === 'plus' ? 'Plus' : 'Minus', accessibilityLabel: action === 'plus' ? `Augmenter de ${step}` : `Diminuer de ${step}`, position: action === 'moins' ? 'start' : 'end', disabled: disabled, onPress: () => onPress(action === 'plus' ? step : -step) }));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { OtpInputProps as OtpEntryProps, OtpInputRef } from 'react-native-otp-entry';
+export type OtpInputElement = OtpInputRef;
+export type OtpInputProps = Omit<OtpEntryProps, 'style' | 'theme' | 'focusColor' | 'onTextChange'> & {
+    readOnly?: boolean;
+    error?: string;
+    success?: string;
+    onChange?: OtpEntryProps['onTextChange'];
+};
+export declare const OtpInput: React.ForwardRefExoticComponent<Omit<OtpEntryProps, "theme" | "style" | "focusColor" | "onTextChange"> & {
+    readOnly?: boolean;
+    error?: string;
+    success?: string;
+    onChange?: OtpEntryProps["onTextChange"];
+} & React.RefAttributes<OtpInputRef>>;
+//# sourceMappingURL=OtpInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/OtpInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAwB,aAAa,IAAI,aAAa,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAO3G,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC;AAC1C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,cAAc,CAAC,GAAG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,QAAQ;eANR,OAAO;YACV,MAAM;cACJ,MAAM;eACL,aAAa,CAAC,cAAc,CAAC;qCA+BxC,CAAC"}

package/dist/ui/FormControl/OtpInput.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { OtpInput as OtpEntry } from 'react-native-otp-entry';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { useFieldId } from './FieldId';
+import { useStyles } from './OtpInput.styles';
+import { otpTheme } from './otpTheme';
+export const OtpInput = React.forwardRef(function OtpInput(props, ref) {
+    const { disabled, readOnly, error, success, onChange, textInputProps, ...inputProps } = props;
+    const fieldId = useFieldId();
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "form-control-otp-input", children: _jsx(OtpEntry, { ref: ref, disabled: disabled || readOnly, 
+            // La bibliotheque colore d'elle-meme la bordure de la cellule active et le curseur
+            // clignotant avec `focusColor`, dont le defaut est un vert sans rapport avec le kit.
+            focusColor: styles.focusedPinCodeContainerStyle.borderColor, theme: otpTheme(styles, { disabled, error, success }), onTextChange: onChange, 
+            // `outline` est une propriete du web que le `TextStyle` de react-native ne connait
+            // pas : la conversion est explicite ici parce que c'est la frontiere, comme dans
+            // `ButtonIcon`. Le style lui-meme se relit et s'eprouve dans la table.
+            textInputProps: {
+                id: fieldId,
+                style: versStyleNatif(styles.hiddenInputStyle),
+                ...textInputProps,
+            }, ...inputProps }) }));
+});

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 }) }));
 });