@alveole/components 2.0.0-alpha.16 → 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,7 +6,7 @@ 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;

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

@@ -8,14 +8,14 @@ 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;
         };
         inputFocused: {
@@ -28,13 +28,13 @@ declare const _default: {
             outlineOffset?: number;
         };
         inputError: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         inputSuccess: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         inputDisabled: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         priceInputContainer: {
             display: "flex";
@@ -46,12 +46,12 @@ declare const _default: {
             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";
@@ -61,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;
         };

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

@@ -15,7 +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: 24, 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 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.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,MAAM,cAAojB,CAAC;AAExkB,eAAO,MAAM,YAAY;;;CAGf,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,7 +1,7 @@
 // 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 States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\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 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,7 +4,7 @@ export declare const useStyles: () => {
         flexDirection: "column";
         width: "100%";
         borderBottomWidth: number;
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
         paddingBottom: string | number;
     };
     inputFocused: {
@@ -17,13 +17,13 @@ export declare const useStyles: () => {
         outlineOffset?: number;
     };
     inputError: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     inputSuccess: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     inputDisabled: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
     };
     priceInputContainer: {
         display: "flex";
@@ -35,12 +35,12 @@ export declare const useStyles: () => {
         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";
@@ -50,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.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;AAU1B,eAAO,MAAM,UAAU;;;;0CAwCrB,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

@@ -5,6 +5,7 @@ import { Typography } from '../../core/Typography';
 import { useFieldId } from '../FormControl';
 import { useFieldFocus } from '../FormControl/useFieldFocus';
 import { cadrePrix } from './cadrePrix';
+import { largeurDuChamp } from './largeurDuChamp';
 import { useStyles } from './PriceInput.styles';
 import { useSaisieMontant } from './useSaisieMontant';
 export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
@@ -12,8 +13,7 @@ export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
     const styles = useStyles();
     const champ = useFieldFocus({ disabled, readOnly });
     const { affichage, saisir } = useSaisieMontant(value, onChange);
-    // Avec des chiffres tabulaires, un caractère occupe au plus 1 ch.
-    const largeur = `${affichage.length || 1}ch`;
+    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',

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

@@ -6,7 +6,33 @@ type Styles = ReturnType<typeof useStyles>;
  * 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%";

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

@@ -1 +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"}
+{"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/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/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;

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

@@ -32,17 +32,17 @@ declare const _default: {
             transitionTimingFunction: "ease-in-out";
         };
         itemCardHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         itemCardIcon: {
             display: "flex";
             justifyContent: "center";
             alignItems: "center";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         itemCardSeparator: {
             borderTopWidth: number;
-            borderTopColor: string;
+            borderTopColor: import("@alveole/theme").ThemeColor;
         };
         radioGroupCardContent: {
             display: "flex";
@@ -74,7 +74,7 @@ declare const _default: {
         };
         itemContainer: {
             backgroundColor: "#FFFFFF";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         itemContainerSm: {
             height: import("@alveole/theme").Spacing;
@@ -85,10 +85,10 @@ declare const _default: {
             width: import("@alveole/theme").Spacing;
         };
         itemContainerActive: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         itemIndicator: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             height: number;
             width: number;
         };
@@ -106,7 +106,7 @@ declare const _default: {
             flexDirection: "column";
         };
         groupCard: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             overflow: "hidden";
@@ -120,7 +120,7 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/RadioGroup/RadioGroup.stories.js

@@ -19,9 +19,9 @@ export const Cards = () => {
     const [value, setValue] = useState('oui');
     return (_jsxs(RadioGroup, { value: value, onChange: setValue, label: "Confirmez-vous ?", children: [_jsx(RadioGroup.Card, { value: "oui", label: "Oui", leading: "Check" }), _jsx(RadioGroup.Card, { value: "non", label: "Non", leading: "X" })] }));
 };
-export const WithError = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsxs(RadioGroup, { value: "a", label: "Avec erreur", error: "Veuillez faire un choix", children: [_jsx(RadioGroup.Item, { value: "a", children: "Option A" }), _jsx(RadioGroup.Item, { value: "b", children: "Option B" })] }) }));
+export const WithError = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsxs(RadioGroup, { value: "a", label: "Avec erreur", error: "Veuillez faire un choix", children: [_jsx(RadioGroup.Item, { value: "a", children: "Option A" }), _jsx(RadioGroup.Item, { value: "b", children: "Option B" })] }) }));
 export const RadioInput = () => {
     const [value, setValue] = useState('tutu');
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(RadioGroup.Input, { id: "exemple-input", label: "Petit", size: "sm", value: "tutu", checked: value === 'tutu', onChange: setValue }), _jsx(RadioGroup.Input, { id: "exemple-input-md", label: "Moyen", size: "md", value: "toto", checked: value === 'toto', onChange: setValue })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(RadioGroup.Input, { id: "exemple-input", label: "Petit", size: "sm", value: "tutu", checked: value === 'tutu', onChange: setValue }), _jsx(RadioGroup.Input, { id: "exemple-input-md", label: "Moyen", size: "md", value: "toto", checked: value === 'toto', onChange: setValue })] }));
 };
 export * as Sources from './RadioGroup.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+X,CAAC;AAEpZ,eAAO,MAAM,KAAK,cAA2V,CAAC;AAE9W,eAAO,MAAM,SAAS,cAA4V,CAAC;AAEnX,eAAO,MAAM,UAAU,cAAglB,CAAC;AAExmB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"RadioGroup.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+X,CAAC;AAEpZ,eAAO,MAAM,KAAK,cAA2V,CAAC;AAE9W,eAAO,MAAM,SAAS,cAA8V,CAAC;AAErX,eAAO,MAAM,UAAU,cAAklB,CAAC;AAE1mB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -2,8 +2,8 @@
 // Source: src/ui/RadioGroup/RadioGroup.stories.tsx
 export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState('a');\n  return (\n    <RadioGroup value={value} onChange={setValue} label=\"Choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n      <RadioGroup.Item value=\"c\">Option C</RadioGroup.Item>\n    </RadioGroup>\n  );\n};";
 export const Cards = () => "export const Cards = () => {\n  const [value, setValue] = useState('oui');\n  return (\n    <RadioGroup value={value} onChange={setValue} label=\"Confirmez-vous ?\">\n      <RadioGroup.Card value=\"oui\" label=\"Oui\" leading=\"Check\" />\n      <RadioGroup.Card value=\"non\" label=\"Non\" leading=\"X\" />\n    </RadioGroup>\n  );\n};";
-export const WithError = () => "export const WithError = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <RadioGroup value=\"a\" label=\"Avec erreur\" error=\"Veuillez faire un choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n    </RadioGroup>\n  </Box>\n);";
-export const RadioInput = () => "export const RadioInput = () => {\n  const [value, setValue] = useState('tutu');\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <RadioGroup.Input\n        id=\"exemple-input\"\n        label=\"Petit\"\n        size=\"sm\"\n        value=\"tutu\"\n        checked={value === 'tutu'}\n        onChange={setValue}\n      />\n      <RadioGroup.Input\n        id=\"exemple-input-md\"\n        label=\"Moyen\"\n        size=\"md\"\n        value=\"toto\"\n        checked={value === 'toto'}\n        onChange={setValue}\n      />\n    </Box>\n  );\n};";
+export const WithError = () => "export const WithError = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <RadioGroup value=\"a\" label=\"Avec erreur\" error=\"Veuillez faire un choix\">\n      <RadioGroup.Item value=\"a\">Option A</RadioGroup.Item>\n      <RadioGroup.Item value=\"b\">Option B</RadioGroup.Item>\n    </RadioGroup>\n  </Box>\n);";
+export const RadioInput = () => "export const RadioInput = () => {\n  const [value, setValue] = useState('tutu');\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <RadioGroup.Input\n        id=\"exemple-input\"\n        label=\"Petit\"\n        size=\"sm\"\n        value=\"tutu\"\n        checked={value === 'tutu'}\n        onChange={setValue}\n      />\n      <RadioGroup.Input\n        id=\"exemple-input-md\"\n        label=\"Moyen\"\n        size=\"md\"\n        value=\"toto\"\n        checked={value === 'toto'}\n        onChange={setValue}\n      />\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     Cards,

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

@@ -17,17 +17,17 @@ export declare const useStyles: () => {
         transitionTimingFunction: "ease-in-out";
     };
     itemCardHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     itemCardIcon: {
         display: "flex";
         justifyContent: "center";
         alignItems: "center";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     itemCardSeparator: {
         borderTopWidth: number;
-        borderTopColor: string;
+        borderTopColor: import("@alveole/theme").ThemeColor;
     };
     radioGroupCardContent: {
         display: "flex";
@@ -59,7 +59,7 @@ export declare const useStyles: () => {
     };
     itemContainer: {
         backgroundColor: "#FFFFFF";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     itemContainerSm: {
         height: import("@alveole/theme").Spacing;
@@ -70,10 +70,10 @@ export declare const useStyles: () => {
         width: import("@alveole/theme").Spacing;
     };
     itemContainerActive: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     itemIndicator: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         height: number;
         width: number;
     };
@@ -91,7 +91,7 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     groupCard: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         overflow: "hidden";
@@ -105,7 +105,7 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=RadioGroup.styles.d.ts.map

package/dist/ui/RadioGroup/RadioGroup.styles.js

@@ -34,12 +34,12 @@ const ligne = ({ color, spacingValue }) => ({
         borderColor: color.light.border['action-high-primary'],
     },
     itemContainerSm: {
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
     },
     itemContainerMd: {
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
     },
     itemContainerActive: {
         borderColor: color.light.border['action-high-primary'],