@alveole/components 2.0.0-alpha.15 → 2.0.0-alpha.17

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

@@ -19,7 +19,7 @@ declare const _default: {
             gap: string | number;
         };
         title: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 24 | 22;
             lineHeight: 28 | 32;
             letterSpacing: 0;

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

@@ -12,7 +12,7 @@ export declare const useStyles: () => {
         gap: string | number;
     };
     title: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 24 | 22;
         lineHeight: 28 | 32;
         letterSpacing: 0;

package/dist/ui/Popover/Popover.js

@@ -22,5 +22,5 @@ export const Popover = (props) => {
     const maxW = popoverStyles.maxW ?? '100%';
     return (_jsxs(TamaguiPopover, { placement: placement, disableFocus: true, open: open, onOpenChange: setOpen, children: [_jsx(TamaguiPopover.Trigger, { asChild: true, children: renderTrigger({ open }) }), _jsx(TamaguiPopover.Content, { trapFocus: false, disableFocusScope: true, ...spacings, 
                 // {...styles.tamaguiPopoverContent}
-                style: [{ maxHeight: scrollable ? maxH : undefined, maxWidth: scrollable ? maxW : undefined }, styles.content], children: scrollable ? (_jsx(YStack, { style: { overflow: 'hidden' }, children: _jsx(ScrollView, { style: { maxHeight: maxH - spacingValue('025'), flexGrow: 0, flexShrink: 0 }, children: children }) })) : (children) })] }));
+                style: [{ maxHeight: scrollable ? maxH : undefined, maxWidth: scrollable ? maxW : undefined }, styles.content], children: scrollable ? (_jsx(YStack, { style: { overflow: 'hidden' }, children: _jsx(ScrollView, { style: { maxHeight: maxH - spacingValue('1V'), flexGrow: 0, flexShrink: 0 }, children: children }) })) : (children) })] }));
 };

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

@@ -17,8 +17,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         } | {
             shadowColor: string;
             shadowOffset: {
@@ -38,8 +38,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         } | {
             boxShadow: string;
             display: "flex";
@@ -52,8 +52,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -10,8 +10,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     } | {
         shadowColor: string;
         shadowOffset: {
@@ -31,8 +31,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     } | {
         boxShadow: string;
         display: "flex";
@@ -45,8 +45,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Popover.styles.d.ts.map

package/dist/ui/PriceInput/PriceInput.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
-import { NumberInputProps } from '../FormControl';
+import { NumberInputProps, TextInputElement } from '../FormControl';
 export type PriceInputProps = NumberInputProps & {
     autoFocus?: boolean;
     devise?: '€';
@@ -10,5 +9,5 @@ export declare const PriceInput: React.ForwardRefExoticComponent<NumberInputProp
     autoFocus?: boolean;
     devise?: "\u20AC";
     onChange?: NumberInputProps["onChange"];
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=PriceInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,EAAE,gBAAgB,EAAoB,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,UAAU;gBALT,OAAO;aACV,QAAG;eACD,gBAAgB,CAAC,UAAU,CAAC;8CAuCvC,CAAC"}
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,UAAU;gBALT,OAAO;aACV,QAAG;eACD,gBAAgB,CAAC,UAAU,CAAC;0CAuCvC,CAAC"}

package/dist/ui/PriceInput/PriceInput.js

@@ -6,11 +6,11 @@ import { Typography } from '../../core/Typography';
 import { useFieldFocus } from '../FormControl/useFieldFocus';
 import { useStyles } from './PriceInput.styles';
 export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
-    const { value, devise, onChange, ...inputProps } = props;
+    const { value, devise, onChange, onKeyDown: _k, ...inputProps } = props;
     const styles = useStyles();
     const champ = useFieldFocus({ disabled: props.disabled, readOnly: props.readOnly });
     const numberLength = value ? String(value).length : 1;
-    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx(ReactNativeTextInput, { ref: ref, style: {
+    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.inputFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx(ReactNativeTextInput, { ref: ref, style: {
                         ...styles.input,
                         minWidth: numberLength * 36,
                     }, ...inputProps, value: Number.isNaN(value) || value == null ? '' : String(value), onChangeText: e => {

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

@@ -8,19 +8,33 @@ declare const _default: {
         autoFocus?: boolean;
         devise?: "\u20AC";
         onChange?: import("..").NumberInputProps["onChange"];
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => {
         container: {
             display: "flex";
             flexDirection: "column";
             width: "100%";
             borderBottomWidth: number;
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
             paddingBottom: string | number;
         };
-        containerFocused: {
+        inputFocused: {
             borderBottomWidth: number;
             borderBottomColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+            outlineWidth?: number;
+            outlineStyle?: "solid";
+            outlineColor?: string;
+            outlineOffset?: number;
+        };
+        inputError: {
+            borderBottomColor: import("@alveole/theme").ThemeColor;
+        };
+        inputSuccess: {
+            borderBottomColor: import("@alveole/theme").ThemeColor;
+        };
+        inputDisabled: {
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         priceInputContainer: {
             display: "flex";
@@ -30,13 +44,14 @@ declare const _default: {
         input: {
             outline: string;
             borderWidth: number;
+            backgroundColor: "transparent";
             textAlign: "center";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 64;
         };
         inputPlaceholder: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputDevise: {
             position: "relative";
@@ -46,7 +61,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginTop: string;
             marginBottom: string;
         };
@@ -54,5 +69,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
 export * as Sources from './PriceInput.stories.sources';
 //# sourceMappingURL=PriceInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAYlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PriceInput/PriceInput.stories.js

@@ -15,6 +15,7 @@ export default {
 };
 export const Default = () => {
     const [value, setValue] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Montant", children: _jsx(PriceInput, { value: value, onChange: setValue }) }), _jsx(FormControl, { label: "Montant saisi", children: _jsx(PriceInput, { value: 1250, onChange: () => { } }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Montant", children: _jsx(PriceInput, { value: value, onChange: setValue }) }), _jsx(FormControl, { label: "Montant saisi", children: _jsx(PriceInput, { value: 1250, onChange: () => { } }) })] }));
 };
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Erreur", error: "Montant requis", children: _jsx(PriceInput, { value: null, error: "Montant requis", onChange: () => { } }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(PriceInput, { value: 1250, success: "Enregistr\u00E9", onChange: () => { } }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(PriceInput, { value: 1250, disabled: true, onChange: () => { } }) })] }));
 export * as Sources from './PriceInput.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"PriceInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0b,CAAC;AAE/c,eAAO,MAAM,MAAM,cAAsjB,CAAC;AAE1kB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/PriceInput/PriceInput.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Montant\">\n        <PriceInput value={value} onChange={setValue} />\n      </FormControl>\n      <FormControl label=\"Montant saisi\">\n        <PriceInput value={1250} onChange={() => {}} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Montant\">\n        <PriceInput value={value} onChange={setValue} />\n      </FormControl>\n      <FormControl label=\"Montant saisi\">\n        <PriceInput value={1250} onChange={() => {}} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Erreur\" error=\"Montant requis\">\n      <PriceInput value={null} error=\"Montant requis\" onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Enregistré\">\n      <PriceInput value={1250} success=\"Enregistré\" onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <PriceInput value={1250} disabled onChange={() => {}} />\n    </FormControl>\n  </Box>\n);";
 export const storySources = {
     Default,
+    States,
 };

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

@@ -4,12 +4,26 @@ export declare const useStyles: () => {
         flexDirection: "column";
         width: "100%";
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
         paddingBottom: string | number;
     };
-    containerFocused: {
+    inputFocused: {
         borderBottomWidth: number;
         borderBottomColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        outlineWidth?: number;
+        outlineStyle?: "solid";
+        outlineColor?: string;
+        outlineOffset?: number;
+    };
+    inputError: {
+        borderBottomColor: import("@alveole/theme").ThemeColor;
+    };
+    inputSuccess: {
+        borderBottomColor: import("@alveole/theme").ThemeColor;
+    };
+    inputDisabled: {
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     priceInputContainer: {
         display: "flex";
@@ -19,13 +33,14 @@ export declare const useStyles: () => {
     input: {
         outline: string;
         borderWidth: number;
+        backgroundColor: "transparent";
         textAlign: "center";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: string;
         fontSize: 64;
     };
     inputPlaceholder: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     inputDevise: {
         position: "relative";
@@ -35,7 +50,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         marginTop: string;
         marginBottom: string;
     };

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

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

package/dist/ui/PriceInput/PriceInput.styles.js

@@ -1,5 +1,5 @@
 import { focusBorder, makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -8,11 +8,23 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         borderBottomColor: color.light.border['plain-grey'],
         paddingBottom: spacing('1W'),
     },
-    // Le champ de prix n'a qu'un trait sous le montant en guise de cadre : c'est donc lui que
-    // le focus recolore, avec la meme definition que la bordure complete des autres champs.
-    containerFocused: {
-        borderBottomWidth: focusBorder().borderWidth,
-        borderBottomColor: focusBorder().borderColor,
+    // Le champ de prix n'a qu'un trait sous le montant en guise de cadre : le focus le recolore,
+    // et l'anneau encastre des autres champs (ADR 0017) entoure la zone du montant.
+    inputFocused: (({ borderWidth, borderColor, ...anneau }) => ({
+        ...anneau,
+        borderBottomWidth: borderWidth,
+        borderBottomColor: borderColor,
+        // Au focus seulement : au repos, un rayon courberait les extremites du seul trait visible.
+        borderRadius: radius('md'),
+    }))(focusBorder()),
+    inputError: {
+        borderBottomColor: color.light.border['plain-error'],
+    },
+    inputSuccess: {
+        borderBottomColor: color.light.border['plain-success'],
+    },
+    inputDisabled: {
+        borderBottomColor: color.light.border['disabled-grey'],
     },
     priceInputContainer: {
         display: 'flex',
@@ -22,6 +34,8 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     input: {
         outline: 'none',
         borderWidth: 0,
+        // Le blanc par defaut d'un <input> recouvrirait l'anneau encastre du cadre.
+        backgroundColor: 'transparent',
         textAlign: 'center',
         color: color.light.text['title-grey'],
         fontFamily: text['Titres alternatifs'].MD.fontFamily,

package/dist/ui/PriceInput/PriceInput.web.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './PriceInput.css';
 export declare const PriceInput: React.ForwardRefExoticComponent<import("..").NumberInputProps & {
     autoFocus?: boolean;
     devise?: "\u20AC";

package/dist/ui/PriceInput/PriceInput.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,kBAAkB,CAAC;AAK1B,eAAO,MAAM,UAAU;;;;0CAuCrB,CAAC"}
+{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,eAAO,MAAM,UAAU;;;;0CAuCrB,CAAC"}

package/dist/ui/PriceInput/PriceInput.web.js

@@ -4,22 +4,21 @@ import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { useFieldId } from '../FormControl';
 import { useFieldFocus } from '../FormControl/useFieldFocus';
-import './PriceInput.css';
+import { cadrePrix } from './cadrePrix';
+import { largeurDuChamp } from './largeurDuChamp';
 import { useStyles } from './PriceInput.styles';
-const MAX_VALUE = 99999999;
+import { useSaisieMontant } from './useSaisieMontant';
 export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
-    const { devise, autoFocus, value, disabled, readOnly, onChange } = props;
+    const { devise, autoFocus, value, disabled, readOnly, error, success, onChange } = props;
     const styles = useStyles();
     const champ = useFieldFocus({ disabled, readOnly });
-    const numberLength = value ? String(value).length : 1;
-    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, id: useFieldId(), autoFocus: autoFocus, className: "alveole-price-input", style: {
+    const { affichage, saisir } = useSaisieMontant(value, onChange);
+    const largeur = largeurDuChamp(affichage);
+    return (_jsx(Box, { tag: "price-input", style: cadrePrix(styles, { focus: champ.focus, disabled, error, success }), children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, id: useFieldId(), autoFocus: autoFocus, disabled: disabled, readOnly: readOnly, className: "alveole-price-input", style: {
                         ...styles.input,
                         fontVariantNumeric: 'tabular-nums',
-                        width: numberLength * 36,
+                        width: largeur,
                         lineHeight: 'inherit',
                         maxWidth: '100%',
-                    }, value: value ?? '', placeholder: "0", onChange: e => {
-                        const newValue = e.target.value;
-                        onChange?.(newValue === '' ? null : Number(newValue));
-                    }, onFocus: champ.handleFocus, onBlur: champ.handleBlur, type: "number", max: MAX_VALUE }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
+                    }, value: affichage, placeholder: "0", onChange: e => saisir(e.target.value), onFocus: champ.handleFocus, onBlur: champ.handleBlur, type: "text", inputMode: "decimal" }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
 });

package/dist/ui/PriceInput/cadrePrix.d.ts

@@ -0,0 +1,43 @@
+import { FieldBorderState } from '../FormControl/fieldBorderState';
+import { useStyles } from './PriceInput.styles';
+type Styles = ReturnType<typeof useStyles>;
+/**
+ * Le trait sous le montant tient lieu de cadre au champ de prix : il prend les etats de tous
+ * les champs, dans la priorite commune de l'ADR 0012.
+ */
+export declare const cadrePrix: (styles: Styles, state: FieldBorderState) => {
+    borderBottomWidth: number;
+    borderBottomColor: string;
+    borderRadius?: import("@alveole/theme").Radius | undefined;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    display: "flex";
+    flexDirection: "column";
+    width: "100%";
+    paddingBottom: string | number;
+} | {
+    borderBottomColor: import("@alveole/theme").ThemeColor;
+    display: "flex";
+    flexDirection: "column";
+    width: "100%";
+    borderBottomWidth: number;
+    paddingBottom: string | number;
+} | {
+    borderBottomColor: import("@alveole/theme").ThemeColor;
+    display: "flex";
+    flexDirection: "column";
+    width: "100%";
+    borderBottomWidth: number;
+    paddingBottom: string | number;
+} | {
+    borderBottomColor: import("@alveole/theme").ThemeColor;
+    display: "flex";
+    flexDirection: "column";
+    width: "100%";
+    borderBottomWidth: number;
+    paddingBottom: string | number;
+};
+export {};
+//# sourceMappingURL=cadrePrix.d.ts.map

package/dist/ui/PriceInput/cadrePrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cadrePrix.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/cadrePrix.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAoB,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,QAAQ,MAAM,EAAE,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG/D,CAAC"}

package/dist/ui/PriceInput/cadrePrix.js

@@ -0,0 +1,9 @@
+import { fieldBorderState } from '../FormControl/fieldBorderState';
+/**
+ * Le trait sous le montant tient lieu de cadre au champ de prix : il prend les etats de tous
+ * les champs, dans la priorite commune de l'ADR 0012.
+ */
+export const cadrePrix = (styles, state) => ({
+    ...styles.container,
+    ...fieldBorderState(styles, state),
+});

package/dist/ui/PriceInput/largeurDuChamp.d.ts

@@ -0,0 +1,2 @@
+export declare const largeurDuChamp: (affichage: string) => string;
+//# sourceMappingURL=largeurDuChamp.d.ts.map

package/dist/ui/PriceInput/largeurDuChamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"largeurDuChamp.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/largeurDuChamp.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,WAAiC,CAAC"}

package/dist/ui/PriceInput/largeurDuChamp.js

@@ -0,0 +1,2 @@
+// Avec des chiffres tabulaires, un caractère occupe au plus 1 ch.
+export const largeurDuChamp = (affichage) => `${affichage.length || 1}ch`;

package/dist/ui/PriceInput/useSaisieMontant.d.ts

@@ -0,0 +1,5 @@
+export declare const useSaisieMontant: (montant: number | null | undefined, onChange?: (montant: number | null) => void) => {
+    affichage: string;
+    saisir: (texte: string) => void;
+};
+//# sourceMappingURL=useSaisieMontant.d.ts.map

package/dist/ui/PriceInput/useSaisieMontant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSaisieMontant.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/useSaisieMontant.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;oBAKvF,MAAM;CAO9B,CAAC"}

package/dist/ui/PriceInput/useSaisieMontant.js

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+// Des chiffres, puis au plus un séparateur décimal (virgule ou point) et deux décimales.
+const MONTANT = /^\d*([.,]\d{0,2})?$/;
+// La virgule est le séparateur décimal en français ; Number ne lit que le point.
+const lireMontant = (texte) => (texte === '' ? null : Number(texte.replace(',', '.')));
+// Le texte tapé reste affiché tant qu'il vaut le montant reçu : « 12, » attend sa décimale
+// au lieu de redevenir « 12 ». Un montant imposé par le parent reprend la main.
+export const useSaisieMontant = (montant, onChange) => {
+    const texteDuMontant = montant == null ? '' : String(montant);
+    const [saisie, setSaisie] = useState(texteDuMontant);
+    const affichage = lireMontant(saisie) === (montant ?? null) ? saisie : texteDuMontant;
+    const saisir = (texte) => {
+        if (!MONTANT.test(texte))
+            return;
+        setSaisie(texte);
+        onChange?.(lireMontant(texte));
+    };
+    return { affichage, saisir };
+};

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

@@ -9,7 +9,7 @@ declare const _default: {
         progressed: {
             height: "100%";
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         progressedAbsolute: {
             position: "absolute";
@@ -17,10 +17,10 @@ declare const _default: {
             bottom: number;
             left: number;
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         progress: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             width: "100%";
             borderRadius: import("@alveole/theme").Radius;
             overflow: "hidden";
@@ -32,10 +32,10 @@ declare const _default: {
             bottom: number;
             width: "100%";
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         indicator: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginTop: string | number;
             marginLeft: string;
             marginRight: string;
@@ -58,7 +58,7 @@ declare const _default: {
         remaining: {
             height: "100%";
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         remainingAbsolute: {
             position: "absolute";
@@ -66,7 +66,7 @@ declare const _default: {
             bottom: number;
             right: number;
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         noRadius: {
             borderRadius: number;

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     progressed: {
         height: "100%";
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     progressedAbsolute: {
         position: "absolute";
@@ -10,10 +10,10 @@ export declare const useStyles: () => {
         bottom: number;
         left: number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     progress: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         width: "100%";
         borderRadius: import("@alveole/theme").Radius;
         overflow: "hidden";
@@ -25,10 +25,10 @@ export declare const useStyles: () => {
         bottom: number;
         width: "100%";
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     indicator: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         marginTop: string | number;
         marginLeft: string;
         marginRight: string;
@@ -51,7 +51,7 @@ export declare const useStyles: () => {
     remaining: {
         height: "100%";
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     remainingAbsolute: {
         position: "absolute";
@@ -59,7 +59,7 @@ export declare const useStyles: () => {
         bottom: number;
         right: number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     noRadius: {
         borderRadius: number;