@alveole/components 1.9.0 → 2.0.0-alpha

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

@@ -1,14 +1,4 @@
 export declare const useStyles: () => {
-    determinate: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    progressTrack: {
-        width: "100%";
-        overflow: "hidden";
-        position: "relative";
-    };
     progressed: {
         height: "100%";
         borderRadius: import("@alveole/theme").Radius;
@@ -22,19 +12,6 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         backgroundColor: string;
     };
-    remaining: {
-        height: "100%";
-        borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
-    };
-    remainingAbsolute: {
-        position: "absolute";
-        top: number;
-        bottom: number;
-        right: number;
-        borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
-    };
     progress: {
         backgroundColor: string;
         width: "100%";
@@ -49,9 +26,6 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         backgroundColor: string;
     };
-    noRadius: {
-        borderRadius: number;
-    };
     indicator: {
         color: string;
         marginTop: string | number;
@@ -63,5 +37,31 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
+    determinate: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    progressTrack: {
+        width: "100%";
+        overflow: "hidden";
+        position: "relative";
+    };
+    remaining: {
+        height: "100%";
+        borderRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
+    };
+    remainingAbsolute: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+        right: number;
+        borderRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
+    };
+    noRadius: {
+        borderRadius: number;
+    };
 };
 //# sourceMappingURL=ProgressBar.styles.d.ts.map

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

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

package/dist/ui/ProgressBar/ProgressBar.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
+const rail = ({ color, radius }) => ({
     determinate: {
         width: '100%',
         flexDirection: 'row',
@@ -10,31 +10,36 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         overflow: 'hidden',
         position: 'relative',
     },
-    progressed: {
+    remaining: {
         height: '100%',
         borderRadius: radius('sm'),
-        backgroundColor: color.light.background['action-low-primary'],
+        backgroundColor: color.light.border['default-grey'],
     },
-    progressedAbsolute: {
+    remainingAbsolute: {
         position: 'absolute',
         top: 0,
         bottom: 0,
-        left: 0,
+        right: 0,
         borderRadius: radius('sm'),
-        backgroundColor: color.light.background['action-low-primary'],
+        backgroundColor: color.light.border['default-grey'],
     },
-    remaining: {
+    noRadius: {
+        borderRadius: 0,
+    },
+});
+const avancement = ({ text, color, spacing, radius }) => ({
+    progressed: {
         height: '100%',
         borderRadius: radius('sm'),
-        backgroundColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['action-low-primary'],
     },
-    remainingAbsolute: {
+    progressedAbsolute: {
         position: 'absolute',
         top: 0,
         bottom: 0,
-        right: 0,
+        left: 0,
         borderRadius: radius('sm'),
-        backgroundColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['action-low-primary'],
     },
     progress: {
         backgroundColor: color.light.background['action-low-primary'],
@@ -50,9 +55,6 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         borderRadius: radius('sm'),
         backgroundColor: color.light.border['default-grey'],
     },
-    noRadius: {
-        borderRadius: 0,
-    },
     indicator: {
         ...text['Corps de texte'].XS.Regular,
         color: color.light.artwork['major-primary'],
@@ -60,4 +62,5 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         marginLeft: 'auto',
         marginRight: 'auto',
     },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...rail(theme), ...avancement(theme) }));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type ProgressBarDeterminateProps = BoxProps & {
     indicator?: boolean;
     indicatorPrecision?: 0 | 1 | 2 | 3;

package/dist/ui/ProgressBar/ProgressBarDeterminate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarDeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarDeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAK3C,MAAM,MAAM,2BAA2B,GAAG,QAAQ,GAAG;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,sBA4CxE,CAAC"}
+{"version":3,"file":"ProgressBarDeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarDeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,MAAM,2BAA2B,GAAG,QAAQ,GAAG;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,sBA4CxE,CAAC"}

package/dist/ui/ProgressBar/ProgressBarDeterminate.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Animated, Easing } from 'react-native';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { PROGRESS_BAR_GAP, PROGRESS_BAR_HEIGHT, PROGRESS_DETERMINATE_DURATION } from './ProgressBar.constants';
 import { useStyles } from './ProgressBar.styles';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type ProgressBarIndeterminateProps = BoxProps & {
     noRadius?: boolean;
 };

package/dist/ui/ProgressBar/ProgressBarIndeterminate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarIndeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarIndeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,MAAM,MAAM,6BAA6B,GAAG,QAAQ,GAAG;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,OAAO,6BAA6B,sBA+D5E,CAAC"}
+{"version":3,"file":"ProgressBarIndeterminate.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarIndeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,6BAA6B,GAAG,QAAQ,GAAG;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,OAAO,6BAA6B,sBA+D5E,CAAC"}

package/dist/ui/ProgressBar/ProgressBarIndeterminate.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Animated, Easing } from 'react-native';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './ProgressBar.constants';
 import { useStyles } from './ProgressBar.styles';
 export const ProgressBarIndeterminate = (props) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 export type ProgressBarLoopProps = BoxProps & {
     noRadius?: boolean;
 };

package/dist/ui/ProgressBar/ProgressBarLoop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarLoop.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarLoop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA4D1D,CAAC"}
+{"version":3,"file":"ProgressBarLoop.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBarLoop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA4D1D,CAAC"}

package/dist/ui/ProgressBar/ProgressBarLoop.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Animated, Easing } from 'react-native';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { PROGRESS_BAR_GAP, PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './ProgressBar.constants';
 import { useStyles } from './ProgressBar.styles';
 export const ProgressBarLoop = (props) => {

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

@@ -1,6 +1,6 @@
-import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
 import React from 'react';
 import { TamaguiElement, RadioGroupProps as TamaguiRadioGroupProps } from 'tamagui';
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '../FormControl';
 export type RadioGroupElement = TamaguiElement;
 export type RadioGroupProps = Omit<TamaguiRadioGroupProps, 'value' | 'onValueChange' | 'direction'> & FormControlCaptionProps & FormControlLabelProps & FormControlHintProps & {
     label?: string;
@@ -8,13 +8,7 @@ export type RadioGroupProps = Omit<TamaguiRadioGroupProps, 'value' | 'onValueCha
     onChange?: TamaguiRadioGroupProps['onValueChange'];
     variant?: 'default' | 'card';
 };
-export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<TamaguiRadioGroupProps, "direction" | "value" | "onValueChange"> & FormControlCaptionProps & {
-    label: string;
-    labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & FormControlHintProps & {
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<TamaguiRadioGroupProps, "direction" | "value" | "onValueChange"> & FormControlCaptionProps & FormControlLabelProps & FormControlHintProps & {
     label?: string;
     value?: TamaguiRadioGroupProps["value"];
     onChange?: TamaguiRadioGroupProps["onValueChange"];

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAmC,eAAe,IAAI,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAIrH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC,GACjG,uBAAuB,GACvB,qBAAqB,GACrB,oBAAoB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,UAAU;;;;;;;YANX,MAAM;YACN,sBAAsB,CAAC,OAAO,CAAC;eAC5B,sBAAsB,CAAC,eAAe,CAAC;cACxC,SAAS,GAAG,MAAM;wCAuD9B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAmC,eAAe,IAAI,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAErH,OAAO,EAEL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EACtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC,GACjG,uBAAuB,GACvB,qBAAqB,GACrB,oBAAoB,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,UAAU;YANX,MAAM;YACN,sBAAsB,CAAC,OAAO,CAAC;eAC5B,sBAAsB,CAAC,eAAe,CAAC;cACxC,SAAS,GAAG,MAAM;wCAiD9B,CAAC"}

package/dist/ui/RadioGroup/RadioGroup.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControlCaption, FormControlHint, FormControlLabel, } from '@alveole/components';
 import React from 'react';
 import { RadioGroup as TamaguiRadioGroup } from 'tamagui';
+import { Box } from '../../core/Box';
+import { FormControlCaption, FormControlHint, FormControlLabel, } from '../FormControl';
 import { useStyles } from './RadioGroup.styles';
 import { RadioGroupContext } from './RadioGroupContext';
 export const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
     const { children, value, label, labelRight, hint, error, success, disabled, onChange, variant = 'default', ...groupProps } = props;
     const styles = useStyles();
-    return (_jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: _jsxs(Box, { tag: "radio-group", style: styles.container, children: [_jsxs(Box, { tag: "radio-group-heading", children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { width: '100%', children: _jsx(TamaguiRadioGroup, { orientation: "vertical", ref: ref, value: value, onValueChange: onChange, style: [styles.group, variant === 'card' ? styles.groupCard : styles.groupItem], width: "100%", ...groupProps, minWidth: '100%', children: children }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
+    const labelId = React.useId();
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: _jsxs(Box, { tag: "radio-group", style: styles.container, children: [_jsxs(Box, { tag: "radio-group-heading", children: [!!label && _jsx(FormControlLabel, { id: labelId, labelRight: labelRight, label: label, disabled: disabled }), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { width: '100%', children: _jsx(TamaguiRadioGroup, { orientation: "vertical", ref: ref, "aria-labelledby": label ? labelId : undefined, value: value, onValueChange: onChange, style: [styles.group, variant === 'card' ? styles.groupCard : styles.groupItem], width: "100%", ...groupProps, minWidth: '100%', children: children }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
 });

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

@@ -3,13 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").RadioGroupProps, "direction" | "value" | "onValueChange"> & import("..").FormControlCaptionProps & {
-        label: string;
-        labelRight?: React.ReactNode;
-        optional?: boolean;
-        optionalText?: string;
-        disabled?: boolean;
-    } & import("..").FormControlHintProps & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").RadioGroupProps, "direction" | "value" | "onValueChange"> & import("..").FormControlCaptionProps & import("..").FormControlLabelProps & import("..").FormControlHintProps & {
         label?: string;
         value?: import("tamagui").RadioGroupProps["value"];
         onChange?: import("tamagui").RadioGroupProps["onValueChange"];
@@ -20,36 +14,6 @@ declare const _default: {
         Input: (props: import("./RadioInput").RadioInputProps) => import("react").JSX.Element;
     };
     styleFn: () => {
-        container: {
-            width: "100%";
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "flex-start";
-            gap: string | number;
-        };
-        group: {
-            display: "flex";
-            alignItems: "flex-start";
-            width: "100%";
-            flexDirection: "column";
-        };
-        groupCard: {
-            borderColor: string;
-            borderRadius: import("@alveole/theme").Radius;
-            borderWidth: number;
-            overflow: "hidden";
-        };
-        groupItem: {
-            gap: string | number;
-        };
-        label: {
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-            color: string;
-        };
         card: {
             display: "flex";
             flexDirection: "row";
@@ -71,18 +35,43 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             boxShadow: undefined;
         };
-        itemCardContent: {
+        itemCardIcon: {
+            display: "flex";
+            justifyContent: "center";
+            alignItems: "center";
+            color: string;
+        };
+        itemCardSeparator: {
+            borderTopWidth: number;
+            borderTopColor: string;
+        };
+        radioGroupCardContent: {
             display: "flex";
-            flex: number;
-            height: "100%";
             flexDirection: "row";
-            justifyContent: "flex-start";
+            flex: number;
             alignItems: "center";
+            justifyContent: "flex-start";
+            height: "100%";
             paddingLeft: string | number;
             paddingRight: string | number;
+            gap: string | number;
+        };
+        radioGroupCardLabelContainer: {
             paddingTop: string | number;
             paddingBottom: string | number;
+            display: "flex";
+            flexDirection: "row";
+            width: "100%";
+            alignItems: "center";
             gap: string | number;
+            flex: number;
+        };
+        radioGroupCardLabel: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         itemContainer: {
             backgroundColor: "#FFFFFF";
@@ -96,11 +85,6 @@ declare const _default: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
         };
-        itemCardContainer: {
-            height: import("@alveole/theme").Spacing;
-            width: import("@alveole/theme").Spacing;
-            backgroundColor: "#FFFFFF";
-        };
         itemContainerActive: {
             borderColor: string;
         };
@@ -109,53 +93,36 @@ declare const _default: {
             height: number;
             width: number;
         };
-        itemCardLabel: {
-            textAlign: "center";
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
-            cursor: "pointer";
-            color: string;
-        };
-        itemCardIcon: {
-            display: "flex";
-            justifyContent: "center";
-            alignItems: "center";
-            color: string;
-        };
-        radioGroupCardContent: {
+        itemContainerFocused: import("@alveole/theme").FocusRingStyle;
+        container: {
+            width: "100%";
             display: "flex";
-            flexDirection: "row";
-            flex: number;
-            alignItems: "center";
-            justifyContent: "flex-start";
-            height: "100%";
-            paddingLeft: string | number;
-            paddingRight: string | number;
+            flexDirection: "column";
+            alignItems: "flex-start";
             gap: string | number;
         };
-        radioGroupCardLabelContainer: {
-            paddingTop: string | number;
-            paddingBottom: string | number;
+        group: {
             display: "flex";
-            flexDirection: "row";
+            alignItems: "flex-start";
             width: "100%";
-            alignItems: "center";
-            gap: string | number;
-            flex: number;
+            flexDirection: "column";
         };
-        itemCardSeparator: {
-            borderTopWidth: number;
-            borderTopColor: string;
+        groupCard: {
+            borderColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            overflow: "hidden";
         };
-        radioGroupCardLabel: {
+        groupItem: {
+            gap: string | number;
+        };
+        label: {
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: string;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAStB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAuBtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { RadioGroup } from './index';
 import { useStyles } from './RadioGroup.styles';
 export default {
@@ -17,11 +17,11 @@ export const Default = () => {
 };
 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", icon: "Check" }), _jsx(RadioGroup.Card, { value: "non", label: "Non", icon: "X" })] }));
+    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 RadioInput = () => {
     const [value, setValue] = useState('tutu');
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(RadioGroup.Input, { id: "exemple-input", size: "sm", value: "tutu", checked: value === 'tutu', onChange: setValue }), _jsx(RadioGroup.Input, { id: "exemple-input-md", size: "md", value: "toto", checked: value === 'toto', onChange: setValue })] }));
+    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 })] }));
 };
 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,cAAqV,CAAC;AAExW,eAAO,MAAM,SAAS,cAA4V,CAAC;AAEnX,eAAO,MAAM,UAAU,cAAsb,CAAC;AAE9c,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,cAA4V,CAAC;AAEnX,eAAO,MAAM,UAAU,cAAglB,CAAC;AAExmB,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,9 +1,9 @@
 // This file is generated. Do not edit manually.
 // 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\" icon=\"Check\" />\n      <RadioGroup.Card value=\"non\" label=\"Non\" icon=\"X\" />\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 id=\"exemple-input\" size=\"sm\" value=\"tutu\" checked={value === 'tutu'} onChange={setValue} />\n      <RadioGroup.Input id=\"exemple-input-md\" size=\"md\" value=\"toto\" checked={value === 'toto'} onChange={setValue} />\n    </Box>\n  );\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 storySources = {
     Default,
     Cards,