@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -1,41 +1,100 @@
 export declare const useStyles: () => {
-    formControl: {
+    caption: {
         display: "flex";
-        flexDirection: "column";
+        flexDirection: "row";
         gap: string | number;
+        alignItems: "flex-start";
+        marginTop: string | number;
         width: "100%";
     };
-    labelContainer: {
-        display: "flex";
-        flexDirection: "row";
-        justifyContent: "space-between";
+    captionIcon: {
+        flexShrink: number;
+        marginTop: number;
     };
-    label: {
-        color: string;
-        fontSize: 14;
+    captionText: {
+        flex: number;
+        flexShrink: number;
+        minWidth: number;
+        fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    labelDisabled: {
+    errorText: {
         color: string;
     };
-    hintContainer: {
+    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;
     };
-    hint: {
+    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;
-        fontSize: 12;
+        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"];
     };
-    hintDisabled: {
-        color: string;
+    inputFocused: import("@alveole/theme").FocusBorderStyle;
+    inputError: {
+        borderColor: string;
+    };
+    inputSuccess: {
+        borderColor: string;
+    };
+    inputDisabled: {
+        backgroundColor: string;
+        borderColor: string;
     };
     inputContainer: {
         width: "100%";
@@ -45,7 +104,7 @@ export declare const useStyles: () => {
         flexDirection: "row";
         gap: string | number;
         padding: number;
-        borderRadius: number;
+        borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderColor: string;
         backgroundColor: "#FFFFFF";
@@ -62,30 +121,11 @@ export declare const useStyles: () => {
         fontSize: 14;
         marginTop: string | number;
         marginBottom: string | number;
-        paddingLeft: string | number;
-        paddingRight: string | number;
+        paddingLeft: number;
+        paddingRight: number;
         minHeight: number | undefined;
         flex: number;
     };
-    inputError: {
-        borderColor: string;
-    };
-    inputSuccess: {
-        borderColor: string;
-    };
-    inputDisabled: {
-        borderColor: string;
-    };
-    inputFocused: {
-        outlineStyle: "solid";
-        outlineWidth: number;
-        outlineColor: string;
-        outlineOffset: number;
-        borderColor: string | undefined;
-    };
-    inputFile: {
-        margin: number;
-    };
     inputFileText: {
         fontSize: 14;
         lineHeight: 20;
@@ -94,108 +134,55 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
         color: string;
     };
-    inputFileClear: {
-        position: "absolute";
-        right: number;
-    };
-    inputFileIcon: {
-        marginTop: string;
-        marginBottom: string;
-    };
     inputWeb: {
         borderWidth: number;
         borderStyle: "none";
         outline: string;
         backgroundColor: "transparent";
         lineHeight: string;
+        height: 20;
+        paddingTop: number;
+        paddingBottom: number;
     };
-    modalOverlay: {
-        flex: number;
-        backgroundColor: string;
-    };
-    modalSheet: {
+    formControl: {
+        display: "flex";
+        flexDirection: "column";
+        gap: string | number;
         width: "100%";
-        flex: number;
     };
-    modalContent: {
-        flex: number;
-        backgroundColor: "#FFFFFF";
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        padding: string | number;
-        paddingTop: string | number;
-        paddingBottom: string | number;
-    };
-    modalHeader: {
+    labelContainer: {
         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: number;
-        borderWidth: number;
-        borderColor: string;
-        backgroundColor: "#FFFFFF";
-        minHeight: number;
-    };
-    modalInput: {
+    label: {
         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"];
     };
-    caption: {
+    labelDisabled: {
+        color: string;
+    };
+    hintContainer: {
         display: "flex";
         flexDirection: "row";
-        gap: string | number;
-        alignItems: "flex-start";
-        marginTop: string | number;
-        width: "100%";
-    };
-    captionIcon: {
-        flexShrink: number;
-        marginTop: number;
+        justifyContent: "space-between";
     };
-    captionText: {
-        flex: number;
-        flexShrink: number;
-        minWidth: number;
+    hint: {
+        color: string;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
-    errorText: {
-        color: string;
-    };
-    successText: {
+    hintDisabled: {
         color: string;
     };
-    optionalText: {
+    requiredMarker: {
         color: string;
         marginLeft: string | number;
         fontSize: 14;

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMnB,CAAC"}
+{"version":3,"file":"FormControl.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.styles.ts"],"names":[],"mappings":"AAqOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMnB,CAAC"}

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

@@ -1,10 +1,10 @@
-import { makeStyles } from '@alveole/theme';
+import { CustomTypography, focusBorder, makeStyles } from '@alveole/theme';
 import { Platform } from 'react-native';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+const coque = ({ text, color, spacing }) => ({
     formControl: {
         display: 'flex',
         flexDirection: 'column',
-        gap: spacing('025'),
+        gap: spacing('1V'),
         width: '100%',
     },
     // Label
@@ -33,37 +33,83 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     hintDisabled: {
         color: color.text['disabled-grey'],
     },
-    // Input
-    inputContainer: {
-        width: '100%',
-    },
-    inputInner: {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: spacing('050'),
-        padding: 0,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: color.border['default-grey'],
-        backgroundColor: '#FFFFFF',
-        overflow: 'hidden',
-        width: '100%',
-        minHeight: 42,
-    },
-    input: {
-        display: 'flex',
-        flexDirection: 'row',
-        outline: 'none',
-        color: color.text['default-grey'],
-        fontFamily: text['Corps de texte'].SM.Regular.fontFamily,
-        fontSize: text['Corps de texte'].SM.Regular.fontSize,
-        marginTop: Platform.OS === 'web' ? spacing('050') : spacing('025'),
-        marginBottom: Platform.OS === 'web' ? spacing('050') : spacing('025'),
-        paddingLeft: spacing('100'),
-        paddingRight: spacing('100'),
-        minHeight: Platform.OS === 'web' ? undefined : 42,
-        flex: 1,
-    },
+    requiredMarker: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.light.text['mention-grey'],
+        marginLeft: spacing('1V'),
+    },
+});
+const EPAISSEUR_DE_BORDURE = 1;
+// La valeur brute et non celle du theme : sur web, le theme rend une variable CSS, sur
+// laquelle aucun calcul de marge n'est possible.
+const LIGNE_SAISIE = CustomTypography['Corps de texte'].SM.Regular.lineHeight;
+// En pixels et non sans unite : un `<input>` DOM brut (nombre, date, heure) lirait 20 comme
+// un multiple de la taille de police.
+const LIGNE_SAISIE_EN_PIXELS = `${LIGNE_SAISIE}px`;
+const champ = ({ text, color, spacing, control, radius }) => {
+    // Le cadre n'a qu'un plancher : c'est la ligne saisie, ses marges et la bordure qui
+    // fixent sa hauteur reelle. Sur web, les marges sont donc deduites de la hauteur de
+    // controle ; le natif, lui, tient sa hauteur par le `minHeight` de l'input.
+    const margeVerticale = Platform.OS === 'web' ? (control('md').height - LIGNE_SAISIE - 2 * EPAISSEUR_DE_BORDURE) / 2 : spacing('1V');
+    return {
+        // Input
+        inputContainer: {
+            width: '100%',
+        },
+        inputInner: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: spacing('1W'),
+            padding: 0,
+            borderRadius: radius('md'),
+            borderWidth: EPAISSEUR_DE_BORDURE,
+            borderColor: color.border['default-grey'],
+            backgroundColor: '#FFFFFF',
+            overflow: 'hidden',
+            width: '100%',
+            // Meme hauteur que le bouton md (`control('md').height`) : les deux partagent la
+            // meme echelle de controle, comme chez Primer. Un bouton pose a cote d'un champ
+            // s'alignait avant que le champ ne reste a 42 pendant que le bouton passait a 32.
+            minHeight: control('md').height,
+        },
+        input: {
+            display: 'flex',
+            flexDirection: 'row',
+            outline: 'none',
+            color: color.text['default-grey'],
+            fontFamily: text['Corps de texte'].SM.Regular.fontFamily,
+            fontSize: text['Corps de texte'].SM.Regular.fontSize,
+            marginTop: margeVerticale,
+            marginBottom: margeVerticale,
+            // Le meme retrait horizontal que le bouton md : c'est l'echelle de controle qui
+            // l'accorde, desktop (12) comme mobile (16), et non un litteral d'espacement.
+            paddingLeft: control('md').paddingInline,
+            paddingRight: control('md').paddingInline,
+            minHeight: Platform.OS === 'web' ? undefined : control('md').height,
+            flex: 1,
+        },
+        inputFileText: {
+            color: color.text['default-grey'],
+            ...text['Corps de texte'].SM.Regular,
+        },
+        inputWeb: {
+            borderWidth: 0,
+            borderStyle: 'none',
+            outline: 'none',
+            backgroundColor: 'transparent',
+            lineHeight: LIGNE_SAISIE_EN_PIXELS,
+            // Les sous-champs d'un input date ou heure grandissent sa boite au-dela de la ligne.
+            height: LIGNE_SAISIE,
+            // Et l'input nombre recoit du navigateur 1px de retrait vertical en plus.
+            paddingTop: 0,
+            paddingBottom: 0,
+        },
+    };
+};
+const etatDuChamp = ({ color }) => ({
+    // Le champ actif ne recoit pas d'anneau : c'est sa propre bordure qui change de couleur,
+    // selon la definition commune du theme (ADR 0012).
+    inputFocused: focusBorder(),
     inputError: {
         borderColor: color.border['plain-error'],
     },
@@ -71,37 +117,13 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         borderColor: color.border['plain-success'],
     },
     inputDisabled: {
+        // La bordure seule ne suffisait pas : elle ne differe de celle d'un champ actif que d'un
+        // cran de la rampe de gris. C'est le fond qui dit qu'on n'ecrit pas ici.
+        backgroundColor: color.background['disabled-grey'],
         borderColor: color.border['disabled-grey'],
     },
-    inputFocused: {
-        outlineStyle: 'solid',
-        outlineWidth: 2,
-        outlineColor: color.system.focus,
-        outlineOffset: 2,
-        borderColor: Platform.OS === 'ios' ? color.system.focus : undefined,
-    },
-    inputFile: {
-        margin: 0,
-    },
-    inputFileText: {
-        color: color.text['default-grey'],
-        ...text['Corps de texte'].SM.Regular,
-    },
-    inputFileClear: {
-        position: 'absolute',
-        right: 0,
-    },
-    inputFileIcon: {
-        marginTop: 'auto',
-        marginBottom: 'auto',
-    },
-    inputWeb: {
-        borderWidth: 0,
-        borderStyle: 'none',
-        outline: 'none',
-        backgroundColor: 'transparent',
-        lineHeight: 'auto',
-    },
+});
+const panneau = ({ text, color, spacing, radius }) => ({
     // Modal (multiline)
     modalOverlay: {
         flex: 1,
@@ -114,18 +136,18 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     modalContent: {
         flex: 1,
         backgroundColor: '#FFFFFF',
-        borderTopLeftRadius: 8,
-        borderTopRightRadius: 8,
-        padding: spacing('150'),
-        paddingTop: spacing('075'),
-        paddingBottom: spacing('075'),
+        borderTopLeftRadius: radius('lg'),
+        borderTopRightRadius: radius('lg'),
+        padding: spacing('3W'),
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('3V'),
     },
     modalHeader: {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: spacing('100'),
+        marginBottom: spacing('2W'),
     },
     modalHeaderLeft: {
         display: 'flex',
@@ -138,10 +160,10 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         alignItems: 'center',
     },
     modalFooter: {
-        marginTop: spacing('100'),
+        marginTop: spacing('2W'),
     },
     modalInputContainer: {
-        borderRadius: 6,
+        borderRadius: radius('md'),
         borderWidth: 1,
         borderColor: color.border['default-grey'],
         backgroundColor: '#FFFFFF',
@@ -150,20 +172,22 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     modalInput: {
         ...text['Corps de texte'].SM.Regular,
         color: color.text['default-grey'],
-        paddingLeft: spacing('100'),
-        paddingRight: spacing('100'),
-        paddingTop: spacing('100'),
-        paddingBottom: spacing('100'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
         minHeight: 180,
         flex: 1,
     },
+});
+const message = ({ text, color, spacing }) => ({
     // Caption
     caption: {
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('025'),
+        gap: spacing('1V'),
         alignItems: 'flex-start',
-        marginTop: spacing('050'),
+        marginTop: spacing('1W'),
         width: '100%',
     },
     captionIcon: {
@@ -182,9 +206,11 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     successText: {
         color: color.success,
     },
-    optionalText: {
-        ...text['Corps de texte'].SM.Medium,
-        color: color.light.text['mention-grey'],
-        marginLeft: spacing('025'),
-    },
+});
+export const useStyles = makeStyles(theme => ({
+    ...coque(theme),
+    ...champ(theme),
+    ...etatDuChamp(theme),
+    ...panneau(theme),
+    ...message(theme),
 }));

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

@@ -1 +1 @@
-{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAuBhE,CAAC"}
+{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAsBhE,CAAC"}

package/dist/ui/FormControl/FormControlCaption.js

@@ -1,10 +1,13 @@
 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 { LucideIcon } from '../LucideIcon';
 import { useStyles } from './FormControl.styles';
 export const FormControlCaption = (props) => {
     const { error, success } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { tag: "form-control-caption", style: styles.caption, children: [(error != null || success != null) &&
-                (success ? (_jsx(Box, { style: styles.captionIcon, children: _jsx(LucideIcon, { name: "CircleCheck", size: "sm", color: styles.successText.color }) })) : (_jsx(Box, { style: styles.captionIcon, children: _jsx(LucideIcon, { name: "OctagonX", size: "sm", color: styles.errorText.color }) }))), _jsx(Typography, { style: styles.captionText, color: error ? styles.errorText.color : styles.successText.color, children: error ?? success })] }));
+    const { icon, color } = error
+        ? { icon: 'OctagonX', color: styles.errorText.color }
+        : { icon: 'CircleCheck', color: styles.successText.color };
+    return (_jsxs(Box, { tag: "form-control-caption", style: styles.caption, children: [(error != null || success != null) && (_jsx(Box, { style: styles.captionIcon, children: _jsx(LucideIcon, { name: icon, size: "sm", color: color }) })), _jsx(Typography, { style: styles.captionText, color: color, children: error ?? success })] }));
 };

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

@@ -5,6 +5,8 @@ export type FormControlDateInputProps = {
     type?: 'date' | 'time' | 'datetime' | 'month';
     disabled?: boolean;
     readOnly?: boolean;
+    error?: string;
+    success?: string;
     onChange?: (value: string) => void;
 };
 export declare const FormControlDateInput: React.ForwardRefExoticComponent<FormControlDateInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormControlDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,oBAAoB,oGAwDhC,CAAC"}
+{"version":3,"file":"FormControlDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,oBAAoB,oGA+ChC,CAAC"}

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