@alveole/components 1.10.0 → 2.0.0-alpha

package/dist/ui/FormControl/FormControlDateInput.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { useFieldId } from './FieldId';
 import { useStyles } from './FormControl.styles';
+import { inputFrameStyle } from './textInputStyles';
+import { useFieldFocus } from './useFieldFocus';
 function formatForInput(value, type) {
     const d = new Date(value);
     if (isNaN(d.getTime()))
@@ -16,17 +19,10 @@ function formatForInput(value, type) {
     return value;
 }
 export const FormControlDateInput = React.forwardRef(function DateInput(props, ref) {
-    const { value, type, onChange, ...inputProps } = props;
+    const { value, type, error, success, onChange, ...inputProps } = props;
     const styles = useStyles();
-    const [focus, setFocus] = React.useState(false);
-    const handleFocus = () => {
-        if (!props.disabled && !props.readOnly)
-            setFocus(true);
-    };
-    const handleBlur = () => {
-        if (!props.disabled && !props.readOnly)
-            setFocus(false);
-    };
+    const fieldId = useFieldId();
+    const champ = useFieldFocus({ disabled: props.disabled, readOnly: props.readOnly });
     const parsed = React.useMemo(() => {
         if (value == null)
             return value;
@@ -43,14 +39,10 @@ export const FormControlDateInput = React.forwardRef(function DateInput(props, r
             return formatForInput(value, 'month');
         return value;
     }, [type, value]);
-    return (_jsx(Box, { tag: "form-control-date-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-date-input-inner", style: {
-                ...styles.inputInner,
-                ...(props.disabled ? styles.inputDisabled : {}),
-                ...(focus ? styles.inputFocused : {}),
-            }, children: _jsx("input", { ref: ref, onChange: e => {
+    return (_jsx(Box, { tag: "form-control-date-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-date-input-inner", style: inputFrameStyle(styles, { disabled: props.disabled, focus: champ.focus, error, success }), children: _jsx("input", { ref: ref, id: fieldId, onChange: e => {
                     const newDate = e.target.value;
                     if (type === 'month')
                         return onChange?.(newDate + '-01');
                     return onChange?.(newDate);
-                }, autoComplete: undefined, style: { ...styles.input, ...styles.inputWeb }, type: type === 'datetime' ? 'datetime-local' : (type ?? 'date'), ...inputProps, value: parsed, onFocus: handleFocus, onBlur: handleBlur }) }) }));
+                }, autoComplete: undefined, style: { ...styles.input, ...styles.inputWeb }, type: type === 'datetime' ? 'datetime-local' : (type ?? 'date'), ...inputProps, value: parsed, onFocus: champ.handleFocus, onBlur: champ.handleBlur }) }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"FormControlHint.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlHint.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAU1D,CAAC"}
+{"version":3,"file":"FormControlHint.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlHint.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAW1D,CAAC"}

package/dist/ui/FormControl/FormControlHint.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { useFieldDisabled } from './FieldId';
 import { useStyles } from './FormControl.styles';
 export const FormControlHint = (props) => {
-    const { hint, disabled } = props;
+    const { hint, disabled: ownDisabled } = props;
     const styles = useStyles();
+    const disabled = useFieldDisabled(ownDisabled);
     return (_jsx(Box, { tag: "form-control-hint", style: styles.hintContainer, children: _jsx(Typography, { style: { ...styles.hint, ...(disabled ? styles.hintDisabled : {}) }, children: hint }) }));
 };

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { FormControlCaptionProps } from './FormControlCaption';
 export type FormControlLabelProps = {
     label: string;
+    /** Pour qu'un groupe se nomme de ce libellé par `aria-labelledby`, faute de champ unique à désigner. */
+    id?: string;
     labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
     disabled?: boolean;
-} & FormControlCaptionProps;
+};
 export declare const FormControlLabel: (props: FormControlLabelProps) => React.JSX.Element;
 //# sourceMappingURL=FormControlLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,uBAAuB,CAAC;AAE5B,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAyB5D,CAAC"}
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,wGAAwG;IACxG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAiC5D,CAAC"}

package/dist/ui/FormControl/FormControlLabel.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { useFieldDisabled, useFieldId, useFieldRequired } from './FieldId';
 import { useStyles } from './FormControl.styles';
 export const FormControlLabel = (props) => {
-    const { label, labelRight, optional = false, optionalText = '(optionnel)', disabled, error, success } = props;
+    const { label, id, labelRight, disabled: ownDisabled } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "form-control-label", style: styles.labelContainer, children: [_jsx(Typography, { style: {
+    const fieldId = useFieldId();
+    const disabled = useFieldDisabled(ownDisabled);
+    const required = useFieldRequired();
+    return (_jsxs(Box, { tag: "form-control-label", style: styles.labelContainer, children: [_jsx(Typography, { tag: "label", id: id, htmlFor: fieldId, style: {
                     ...styles.label,
-                    ...(error ? styles.errorText : {}),
-                    ...(success ? styles.successText : {}),
                     ...(disabled ? styles.labelDisabled : {}),
-                }, children: label }), !!optional && _jsx(Typography, { style: styles.optionalText, children: optionalText }), !!label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
+                }, children: label }), !!required && (_jsx(Typography, { "aria-hidden": true, style: styles.requiredMarker, children: "*" })), !!label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FormControlModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAyC5D,CAAC"}
+{"version":3,"file":"FormControlModal.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBA6C5D,CAAC"}

package/dist/ui/FormControl/FormControlModal.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardAvoidingView, Modal, Platform, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
 import { Button, ButtonIcon } from '../Button';
 import { useStyles } from './FormControl.styles';
 export const FormControlModal = (props) => {
     const { open, onClose, onShow, onDismiss, submitLabel, onSubmit, children } = props;
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
-    return (_jsx(Modal, { animationType: "slide", transparent: true, visible: open, onRequestClose: onClose, onShow: onShow, onDismiss: onDismiss, children: _jsx(Pressable, { style: styles.modalOverlay, onPress: onClose, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? -8 : 0, style: { ...styles.modalSheet, paddingTop: top }, children: _jsxs(Pressable, { style: styles.modalContent, onPress: () => null, children: [_jsxs(Box, { style: styles.modalHeader, children: [_jsx(Box, { style: styles.modalHeaderLeft }), _jsx(Box, { style: styles.modalHeaderRight, children: _jsx(ButtonIcon, { icon: "Check", variant: "primary", onPress: onClose }) })] }), children, submitLabel && onSubmit && (_jsx(Box, { style: styles.modalFooter, children: _jsx(Button, { size: "lg", variant: "primary", title: submitLabel, onPress: onSubmit }) }))] }) }) }) }));
+    return (_jsx(Modal, { animationType: "slide", transparent: true, visible: open, onRequestClose: onClose, onShow: onShow, onDismiss: onDismiss, children: _jsx(Pressable, { accessible: false, style: styles.modalOverlay, onPress: onClose, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? -8 : 0, style: { ...styles.modalSheet, paddingTop: top }, children: _jsxs(Pressable, { accessible: false, style: versStyleNatif(styles.modalContent), onPress: () => null, children: [_jsxs(Box, { style: styles.modalHeader, children: [_jsx(Box, { style: styles.modalHeaderLeft }), _jsx(Box, { style: styles.modalHeaderRight, children: _jsx(ButtonIcon, { icon: "Check", variant: "primary", accessibilityLabel: "Valider", onPress: onClose }) })] }), children, submitLabel && onSubmit && (_jsx(Box, { style: styles.modalFooter, children: _jsx(Button, { size: "lg", variant: "primary", title: submitLabel, onPress: onSubmit }) }))] }) }) }) }));
 };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type NumberInputElement = HTMLInputElement;
+export type NumberInputProps = {
+    value?: number | null;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    success?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onChange?: (value: number | null) => void;
+    controlButton?: boolean;
+};
+/** Le natif n'a pas de champ nombre : c'est un champ texte au pave numerique, qui rend un nombre. */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,WAAW,2GActB,CAAC"}

package/dist/ui/FormControl/NumberInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { adornmentsDePas } from './adornmentsDePas';
+import { TextInput } from './TextInput';
+/** Le natif n'a pas de champ nombre : c'est un champ texte au pave numerique, qui rend un nombre. */
+export const NumberInput = React.forwardRef(function NumberInput(props, ref) {
+    const { value, onChange, onKeyDown: _k, min: _min, max: _max, step: _s, controlButton: _c, ...inputProps } = props;
+    return (_jsx(TextInput, { ref: ref, ...inputProps, ...adornmentsDePas(props), value: value ? String(value) : '0', onChangeText: e => onChange?.(e === '' ? 0 : Number(e)), keyboardType: "number-pad", inputMode: "numeric" }));
+});

package/dist/ui/{Autocomplete/Autocomplete.stories.d.ts → FormControl/NumberInput.stories.d.ts}

@@ -1,138 +1,122 @@
-import React from 'react';
-import { AutocompleteProps } from './Autocomplete';
 declare const _default: {
     title: string;
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: (props: AutocompleteProps) => React.JSX.Element;
+    component: import("react").ForwardRefExoticComponent<import("./NumberInput").NumberInputProps & import("react").RefAttributes<import("react-native").TextInput>>;
     styleFn: () => {
-        select: {
-            lineHeight: number;
-            width: "100%";
-            borderWidth: number;
-            backgroundColor: "transparent";
-            appearance: "none";
-            fontSize: 14;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-            outline: string;
-            paddingTop: number;
-            paddingBottom: number;
-            color: string;
-        };
-        inputInner: {
+        caption: {
             display: "flex";
             flexDirection: "row";
             gap: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            borderRadius: number;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: "#FFFFFF";
-            overflow: "hidden";
+            alignItems: "flex-start";
+            marginTop: string | number;
             width: "100%";
         };
-        inputContainer: {
-            width: "100%";
+        captionIcon: {
+            flexShrink: number;
+            marginTop: number;
         };
-        inputDisabled: {
-            borderRadius: number;
-            backgroundColor: string;
+        captionText: {
+            flex: number;
+            flexShrink: number;
+            minWidth: number;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        control: {
-            minHeight: string | number;
-            flexWrap: "inherit";
-            borderColor: string;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            borderRadius: number;
+        errorText: {
+            color: string;
         };
-        controlDisabled: {
-            backgroundColor: string;
+        successText: {
+            color: string;
         };
-        multiValue: {
-            borderRadius: string | number;
+        modalOverlay: {
+            flex: number;
             backgroundColor: string;
-            paddingLeft: string | number;
         };
-        multiValueDisabled: {
-            backgroundColor: "#FFFFFF";
-            borderColor: string;
-            borderWidth: number;
-            borderRadius: string | number;
-            borderStyle: "solid";
-            paddingLeft: string | number;
-            paddingRight: string | number;
+        modalSheet: {
+            width: "100%";
+            flex: number;
         };
-        multiValueRemoveHover: {
-            backgroundColor: string;
-            cursor: "pointer";
+        modalContent: {
+            flex: number;
+            backgroundColor: "#FFFFFF";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
-        multiValueRemoveDisabled: {
-            display: "none";
+        modalHeader: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: string | number;
         };
-        dropdownIndicator: {
-            padding: string | number;
+        modalHeaderLeft: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
         };
-        dropdownIndicatorDisabled: {};
-        clearIndicator: {
-            color: string;
-            padding: string | number;
+        modalHeaderRight: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
         };
-        nativeLabel: {
-            color: string;
-            fontSize: 18 | 20;
-            lineHeight: 24 | 28;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        modalFooter: {
+            marginTop: string | number;
         };
-        nativeValue: {
-            color: string;
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        modalInputContainer: {
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            minHeight: number;
         };
-        nativeSimpleValue: {
+        modalInput: {
             color: string;
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-        };
-        nativeItem: {
-            paddingTop: string | number;
+            paddingLeft: string | number;
             paddingRight: string | number;
+            paddingTop: string | number;
             paddingBottom: string | number;
-            paddingLeft: string | number;
-            backgroundColor: string;
-        };
-        nativeItemText: {
-            color: string;
+            minHeight: number;
+            flex: number;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        nativeItemTextNew: {
-            color: string;
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        inputFocused: import("@alveole/theme").FocusBorderStyle;
+        inputError: {
+            borderColor: string;
         };
-        nativeItemSelected: {
+        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";
@@ -141,10 +125,14 @@ declare const _default: {
             color: string;
             fontFamily: string;
             fontSize: 14;
-            minHeight: number;
+            marginTop: string | number;
+            marginBottom: string | number;
+            paddingLeft: number;
+            paddingRight: number;
+            minHeight: number | undefined;
             flex: number;
         };
-        inputPlaceholder: {
+        inputFileText: {
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -152,53 +140,58 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
             color: string;
         };
-        autocompleteIcon: {
-            position: "absolute";
-            right: string | number;
-            top: string;
-            color: string;
+        inputWeb: {
+            borderWidth: number;
+            borderStyle: "none";
+            outline: string;
+            backgroundColor: "transparent";
+            lineHeight: string;
+            height: 20;
+            paddingTop: number;
+            paddingBottom: number;
         };
-        modalOverlay: {
-            flex: number;
-            justifyContent: "flex-end";
-            backgroundColor: string;
+        formControl: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
+            width: "100%";
         };
-        modalContent: {
-            flex: number;
-            backgroundColor: "white";
-            borderTopLeftRadius: import("@alveole/theme").Radius;
-            borderTopRightRadius: import("@alveole/theme").Radius;
-            paddingTop: string | number;
+        labelContainer: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
         };
-        modalHeader: {
+        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";
-            alignItems: "center";
-            paddingLeft: string | number;
         };
-        groupHeader: {
+        hint: {
             color: string;
-            textTransform: "uppercase";
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            backgroundColor: string;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        groupHeading: {
-            backgroundColor: string;
-            paddingTop: string | number;
-            paddingBottom: string | number;
+        hintDisabled: {
             color: string;
-            textTransform: "uppercase";
-            marginBottom: number;
-            fontSize: 12;
+        };
+        requiredMarker: {
+            color: string;
+            marginLeft: string | number;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
@@ -207,10 +200,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const SingleValue: () => React.JSX.Element;
-export declare const WithSearch: () => React.JSX.Element;
-export declare const WithGroups: () => React.JSX.Element;
-export declare const AllowCreate: () => React.JSX.Element;
-export * as Sources from './Autocomplete.stories.sources';
-//# sourceMappingURL=Autocomplete.stories.d.ts.map
+export declare const Default: () => import("react").JSX.Element;
+export declare const AvecUnites: () => import("react").JSX.Element;
+export declare const Desactive: () => import("react").JSX.Element;
+export * as Sources from './NumberInput.stories.sources';
+//# sourceMappingURL=NumberInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { FormControl } from './FormControl';
+import { useStyles } from './FormControl.styles';
+import { NumberInput } from './NumberInput';
+export default {
+    title: 'NumberInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ de saisie numérique, nu : il rend un nombre, et on le place dans un FormControl pour son libellé, son aide et sa validation.',
+    component: NumberInput,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [value, setValue] = useState(null);
+    return (_jsx(FormControl, { label: "Montant", children: _jsx(NumberInput, { value: value, onChange: setValue, placeholder: "0" }) }));
+};
+export const AvecUnites = () => {
+    const [value, setValue] = useState(null);
+    return (_jsx(FormControl, { label: "Avec unit\u00E9s", children: _jsx(NumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: 8, paddingRight: 4 }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(Typography, { children: "TTC" }) }) }) }));
+};
+export const Desactive = () => (_jsx(FormControl, { label: "D\u00E9sactiv\u00E9", children: _jsx(NumberInput, { value: 42, onChange: () => { }, disabled: true }) }));
+export * as Sources from './NumberInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+P,CAAC;AAEpR,eAAO,MAAM,UAAU,cAAqkB,CAAC;AAE7lB,eAAO,MAAM,SAAS,cAAmK,CAAC;AAE1L,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,10 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/NumberInput.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <FormControl label=\"Montant\">\n      <NumberInput value={value} onChange={setValue} placeholder=\"0\" />\n    </FormControl>\n  );\n};";
+export const AvecUnites = () => "export const AvecUnites = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <FormControl label=\"Avec unités\">\n      <NumberInput\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  );\n};";
+export const Desactive = () => "export const Desactive = () => (\n  <FormControl label=\"Désactivé\">\n    <NumberInput value={42} onChange={() => {}} disabled />\n  </FormControl>\n);";
+export const storySources = {
+    Default,
+    AvecUnites,
+    Desactive,
+};

package/dist/ui/FormControl/NumberInput.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NumberInputProps } from './NumberInput';
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=NumberInput.web.d.ts.map

package/dist/ui/FormControl/NumberInput.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKtD,eAAO,MAAM,WAAW,2FAwDtB,CAAC"}

package/dist/ui/FormControl/NumberInput.web.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '../../core/Box';
+import { useFieldId } from './FieldId';
+import { useStyles } from './FormControl.styles';
+import { adornmentsDePas } from './adornmentsDePas';
+import { inputFrameStyle } from './textInputStyles';
+import { useFieldFocus } from './useFieldFocus';
+export const NumberInput = React.forwardRef(function NumberInput(props, ref) {
+    const { value, error, success, onChange, controlButton: _c, startAdornment: _d, endAdornment: _f, ...inputProps } = props;
+    const { startAdornment, endAdornment } = adornmentsDePas(props);
+    const styles = useStyles();
+    const fieldId = useFieldId();
+    const champ = useFieldFocus({ disabled: props.disabled, readOnly: props.readOnly });
+    return (_jsx(Box, { tag: "form-control-number-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-number-input-inner", style: inputFrameStyle(styles, {
+                disabled: props.disabled,
+                focus: champ.focus,
+                error,
+                success,
+                startAdornment,
+                endAdornment,
+            }), children: [startAdornment, _jsx("input", { ref: ref, id: fieldId, value: value ?? '', onChange: e => {
+                        const newValue = e.target.value;
+                        onChange?.(newValue === '' ? null : Number(newValue));
+                    }, type: "number", style: {
+                        ...styles.input,
+                        ...styles.inputWeb,
+                        ...(endAdornment && startAdornment ? { textAlign: 'center' } : {}),
+                        ...(endAdornment ? { minWidth: 0 } : {}),
+                    }, ...inputProps, onFocus: champ.handleFocus, onBlur: champ.handleBlur }), endAdornment] }) }));
+});

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

@@ -0,0 +1,8 @@
+export type NumberInputControlButtonProps = {
+    step?: number;
+    action: 'plus' | 'moins';
+    disabled?: boolean;
+    onPress: (addValue: number) => void;
+};
+export declare const NumberInputControlButton: (props: NumberInputControlButtonProps) => import("react").JSX.Element;
+//# sourceMappingURL=NumberInputControlButton.d.ts.map