npm - @alveole/components - Versions diffs - 2.0.0-alpha.15 → 2.0.0-alpha.17 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (392) hide show

package/dist/ui/FormControl/FormControl.stories.sources.js CHANGED Viewed

@@ -3,11 +3,11 @@
 export const WithTextInput = () => "export const WithTextInput = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n      <FormControlHint hint=\"Votre email professionnel\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n  </FormControl>\n);";
 export const WithError = () => "export const WithError = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption error=\"Format invalide\" />\n  </FormControl>\n);";
 export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <InputHeading>\n      <FormControlLabel label=\"Adresse email\" />\n    </InputHeading>\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
-export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
-export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
-export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
+export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
+export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
+export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
 export const Modal = () => "export const Modal = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <Box>\n      <Button variant=\"secondary\" title=\"Ouvrir la modale\" onPress={() => setOpen(true)} />\n      <FormControlModal\n        open={open}\n        onClose={() => setOpen(false)}\n        submitLabel=\"Valider\"\n        onSubmit={() => setOpen(false)}\n      >\n        <TextInput placeholder=\"Saisir un texte...\" multiline numberOfLines={6} />\n      </FormControlModal>\n    </Box>\n  );\n};";
-export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <DateInputControl type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <TimeInput value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <DateInputControl type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Date\" />\n        </InputHeading>\n        <DateInputControl type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Heure\" />\n        </InputHeading>\n        <TimeInput value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <InputHeading>\n          <FormControlLabel label=\"Mois\" />\n        </InputHeading>\n        <DateInputControl type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     WithTextInput,
     WithError,

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

@@ -22,14 +22,14 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     errorText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     successText: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     modalOverlay: {
         flex: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     modalSheet: {
         width: "100%";
@@ -67,12 +67,12 @@ export declare const useStyles: () => {
     modalInputContainer: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         minHeight: number;
     };
     modalInput: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: string | number;
         paddingRight: string | number;
         paddingTop: string | number;
@@ -87,14 +87,14 @@ export declare const useStyles: () => {
     };
     inputFocused: import("@alveole/theme").FocusBorderStyle;
     inputError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputDisabled: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputContainer: {
         width: "100%";
@@ -106,7 +106,7 @@ export declare const useStyles: () => {
         padding: number;
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         overflow: "hidden";
         width: "100%";
@@ -116,7 +116,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         outline: string;
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontFamily: string;
         fontSize: 14;
         marginTop: string | number;
@@ -132,7 +132,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     inputWeb: {
         borderWidth: number;
@@ -156,7 +156,7 @@ export declare const useStyles: () => {
         justifyContent: "space-between";
     };
     label: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -164,7 +164,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     labelDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     hintContainer: {
         display: "flex";
@@ -172,7 +172,7 @@ export declare const useStyles: () => {
         justifyContent: "space-between";
     };
     hint: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -180,10 +180,10 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     hintDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     requiredMarker: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         marginLeft: string | number;
         fontSize: 14;
         lineHeight: 20;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from './TextInput';
 export type NumberInputElement = HTMLInputElement;
 export type NumberInputProps = {
     value?: number | null;
@@ -17,5 +18,5 @@ export type NumberInputProps = {
     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>>;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=NumberInput.d.ts.map

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,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,2FActB,CAAC"}

package/dist/ui/FormControl/NumberInput.stories.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<import("./NumberInput").NumberInputProps & import("react").RefAttributes<import("react-native").TextInput>>;
+    component: import("react").ForwardRefExoticComponent<import("./NumberInput").NumberInputProps & import("react").RefAttributes<import("./TextInput.types").TextInputElement>>;
     styleFn: () => {
         caption: {
             display: "flex";
@@ -28,14 +28,14 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         errorText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         successText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         modalOverlay: {
             flex: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         modalSheet: {
             width: "100%";
@@ -73,12 +73,12 @@ declare const _default: {
         modalInputContainer: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             minHeight: number;
         };
         modalInput: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -93,14 +93,14 @@ declare const _default: {
         };
         inputFocused: import("@alveole/theme").FocusBorderStyle;
         inputError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputContainer: {
             width: "100%";
@@ -112,7 +112,7 @@ declare const _default: {
             padding: number;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             width: "100%";
@@ -122,7 +122,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 14;
             marginTop: string | number;
@@ -138,7 +138,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputWeb: {
             borderWidth: number;
@@ -162,7 +162,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -170,7 +170,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         hintContainer: {
             display: "flex";
@@ -178,7 +178,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -186,10 +186,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         hintDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         requiredMarker: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginLeft: string | number;
             fontSize: 14;
             lineHeight: 20;

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"NumberInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,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 CHANGED Viewed

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Spacings } from '@alveole/theme';
 import { useState } from 'react';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
@@ -19,7 +20,7 @@ export const Default = () => {
 };
 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" }) }) }) }));
+    return (_jsx(FormControl, { label: "Avec unit\u00E9s", children: _jsx(NumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: Spacings['1W'], paddingRight: Spacings['1V'] }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: Spacings['1V'], paddingRight: Spacings['1W'] }, 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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsQ,CAAC;AAE3R,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"}
1	+ {"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsQ,CAAC;AAE3R,eAAO,MAAM,UAAU,cAAynB,CAAC;AAEjpB,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 CHANGED Viewed

@@ -1,7 +1,7 @@
 // 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=\"Quantité\" />\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 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: Spacings['1W'], paddingRight: Spacings['1V'] }}>\n            <Typography>€</Typography>\n          </Box>\n        }\n        endAdornment={\n          <Box style={{ paddingLeft: Spacings['1V'], paddingRight: Spacings['1W'] }}>\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,

package/dist/ui/FormControl/OtpInput.stories.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ declare const _default: {
         pinCodeContainerStyle: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             height: import("@alveole/theme").Spacing;
@@ -27,13 +27,13 @@ declare const _default: {
             alignItems: "center";
         };
         pinCodeContainerStyleDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         pinCodeContainerStyleError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         pinCodeContainerStyleSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         focusedPinCodeContainerStyle: import("@alveole/theme").FocusBorderStyle;
         hiddenInputStyle: {
@@ -48,7 +48,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -11,5 +11,5 @@ export default {
     component: OtpInput,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Code de v\u00E9rification", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, disabled: true }) })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Code de v\u00E9rification", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { } }) }), _jsx(FormControl, { label: "Avec erreur", error: "Code invalide", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, error: "Code invalide" }) }), _jsx(FormControl, { label: "Avec succ\u00E8s", success: "Code v\u00E9rifi\u00E9", children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, success: "Code v\u00E9rifi\u00E9" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(OtpInput, { numberOfDigits: 4, onChange: () => { }, disabled: true }) })] }));
 export * as Sources from './OtpInput.stories.sources';

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

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

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

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

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

@@ -7,7 +7,7 @@ export declare const useStyles: () => {
     pinCodeContainerStyle: {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
         overflow: "hidden";
         height: import("@alveole/theme").Spacing;
@@ -16,13 +16,13 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     pinCodeContainerStyleDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     pinCodeContainerStyleError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     pinCodeContainerStyleSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     /**
      * La cellule active ne recoit pas d'anneau : c'est sa propre bordure qui change de
@@ -48,7 +48,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=OtpInput.styles.d.ts.map

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

@@ -11,8 +11,8 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         borderColor: color.border['default-grey'],
         backgroundColor: '#FFFFFF',
         overflow: 'hidden',
-        height: spacingValue('300'),
-        width: spacingValue('300'),
+        height: spacingValue('6W'),
+        width: spacingValue('6W'),
         justifyContent: 'center',
         alignItems: 'center',
     },

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

@@ -15,5 +15,5 @@ export declare const TextInput: React.ForwardRefExoticComponent<Omit<import("rea
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInput.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKrE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;~~0DAgBpB~~,CAAC"}
1	+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKrE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;0CAgBpB,CAAC"}

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

@@ -13,7 +13,7 @@ declare const _default: {
         openModal?: boolean;
         modalSubmitLabel?: string;
         onModalSubmit?: () => void;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("./TextInput.types").TextInputElement>>;
     styleFn: () => {
         caption: {
             display: "flex";
@@ -38,14 +38,14 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         errorText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         successText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         modalOverlay: {
             flex: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         modalSheet: {
             width: "100%";
@@ -83,12 +83,12 @@ declare const _default: {
         modalInputContainer: {
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             minHeight: number;
         };
         modalInput: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -103,14 +103,14 @@ declare const _default: {
         };
         inputFocused: import("@alveole/theme").FocusBorderStyle;
         inputError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            backgroundColor: string;
-            borderColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         inputContainer: {
             width: "100%";
@@ -122,7 +122,7 @@ declare const _default: {
             padding: number;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
             overflow: "hidden";
             width: "100%";
@@ -132,7 +132,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             outline: string;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: string;
             fontSize: 14;
             marginTop: string | number;
@@ -148,7 +148,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputWeb: {
             borderWidth: number;
@@ -172,7 +172,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         label: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -180,7 +180,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         labelDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         hintContainer: {
             display: "flex";
@@ -188,7 +188,7 @@ declare const _default: {
             justifyContent: "space-between";
         };
         hint: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -196,10 +196,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         hintDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         requiredMarker: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             marginLeft: string | number;
             fontSize: 14;
             lineHeight: 20;

package/dist/ui/FormControl/TextInput.types.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput, TextInputProps as ReactNativeTextInputProps } from 'react-native';
-export type TextInputElement = ReactNativeTextInput;
+import { TextInputProps as ReactNativeTextInputProps, TextInputInstance } from 'react-native';
+export interface TextInputElement extends TextInputInstance {
+}
 export type TextInputProps = Omit<ReactNativeTextInputProps, 'style'> & {
     type?: 'text' | 'email' | 'tel' | 'password';
     disabled?: boolean;

package/dist/ui/FormControl/TextInput.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,~~SAAS~~,IAAI,~~oBAAoB~~,EAAE,~~cAAc~~,~~IAAI,yBAAyB,~~EAAE,MAAM,cAAc,CAAC;~~AAE9G~~,MAAM,~~MAAM~~,~~gBAAgB~~,~~GAAG~~,~~oBAAoB,CAAC~~;~~AAEpD~~,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IAEtE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC"}
1	+ {"version":3,"file":"TextInput.types.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,IAAI,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAI9F,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;CAAG;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IAEtE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC"}

package/dist/ui/FormControl/TextInputInline.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 /**
  * La saisie ordinaire : on ecrit dans le champ la ou il est. Le focus est tenu ici et non
  * laisse a la plateforme, parce que le contour se dessine sur le cadre et non sur le champ.
@@ -14,5 +14,5 @@ export declare const TextInputInline: React.ForwardRefExoticComponent<Omit<impor
     openModal?: boolean;
     modalSubmitLabel?: string;
     onModalSubmit?: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputInline.d.ts.map

package/dist/ui/FormControl/TextInputInline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputInline.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAC1B~~,OAAO,~~EAAmC~~,~~SAAS~~,~~IAAI~~,~~oBAAoB,EAAE,~~MAAM,~~cAAc~~,CAAC;~~AAoClG~~;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;~~8CA0D1B~~,CAAC"}
1	+ {"version":3,"file":"TextInputInline.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInputInline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAkB,MAAM,mBAAmB,CAAC;AAgCrE;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;0CA0D1B,CAAC"}

package/dist/ui/FormControl/TextInputMirror.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInput as ReactNativeTextInput } from 'react-native';
+import { TextInputElement } from './TextInput.types';
 /**
  * Le champ tel qu'il apparait dans le formulaire quand la saisie vit en modale : il a
  * l'allure d'un champ mais n'en est pas un. Tout ce qui pourrait y installer un curseur
@@ -18,5 +18,5 @@ export declare const TextInputMirror: React.ForwardRefExoticComponent<Omit<impor
 } & {
     isOpen: boolean;
     onOpen: () => void;
-} & React.RefAttributes<ReactNativeTextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextInputMirror.d.ts.map