@alveole/components 0.43.2 → 1.0.0

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

@@ -19,7 +19,7 @@ declare const _default: {
         progressed: {
             height: "100%";
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#D2E8FE";
+            backgroundColor: string;
         };
         progressedAbsolute: {
             position: "absolute";
@@ -27,12 +27,12 @@ declare const _default: {
             bottom: number;
             left: number;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#D2E8FE";
+            backgroundColor: string;
         };
         remaining: {
             height: "100%";
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
         };
         remainingAbsolute: {
             position: "absolute";
@@ -40,10 +40,10 @@ declare const _default: {
             bottom: number;
             right: number;
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
         };
         progress: {
-            backgroundColor: "#D2E8FE";
+            backgroundColor: string;
             width: "100%";
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             overflow: "hidden";
@@ -54,10 +54,10 @@ declare const _default: {
             bottom: number;
             width: "100%";
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            backgroundColor: "#DEE3EC";
+            backgroundColor: string;
         };
         indicator: {
-            color: "#033B72";
+            color: string;
             marginTop: import("@alveole/theme").Spacing;
             marginLeft: string;
             marginRight: string;

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

@@ -12,7 +12,7 @@ export declare const useStyles: () => {
     progressed: {
         height: "100%";
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#D2E8FE";
+        backgroundColor: string;
     };
     progressedAbsolute: {
         position: "absolute";
@@ -20,12 +20,12 @@ export declare const useStyles: () => {
         bottom: number;
         left: number;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#D2E8FE";
+        backgroundColor: string;
     };
     remaining: {
         height: "100%";
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
     };
     remainingAbsolute: {
         position: "absolute";
@@ -33,10 +33,10 @@ export declare const useStyles: () => {
         bottom: number;
         right: number;
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
     };
     progress: {
-        backgroundColor: "#D2E8FE";
+        backgroundColor: string;
         width: "100%";
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         overflow: "hidden";
@@ -47,10 +47,10 @@ export declare const useStyles: () => {
         bottom: number;
         width: "100%";
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        backgroundColor: "#DEE3EC";
+        backgroundColor: string;
     };
     indicator: {
-        color: "#033B72";
+        color: string;
         marginTop: import("@alveole/theme").Spacing;
         marginLeft: string;
         marginRight: string;

package/dist/ui/ProgressBar/ProgressBarDeterminate.js

@@ -8,7 +8,7 @@ import { useStyles } from './ProgressBar.styles';
 export const ProgressBarDeterminate = (props) => {
     const { clamped, indicator, indicatorPrecision = 3, style, onLayout, ...boxProps } = props;
     const styles = useStyles();
-    const animatedProgress = React.useRef(new Animated.Value(clamped)).current;
+    const [animatedProgress] = React.useState(() => new Animated.Value(clamped));
     const remaining = React.useMemo(() => Animated.subtract(1, animatedProgress), [animatedProgress]);
     const animatedGap = React.useMemo(() => animatedProgress.interpolate({
         inputRange: [0, 0.0001, 0.9999, 1],

package/dist/ui/ProgressBar/ProgressBarIndeterminate.js

@@ -6,7 +6,7 @@ import { PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './ProgressBar.constants'
 import { useStyles } from './ProgressBar.styles';
 export const ProgressBarIndeterminate = (props) => {
     const { style, ...boxProps } = props;
-    const progress = React.useRef(new Animated.Value(0)).current;
+    const [progress] = React.useState(() => new Animated.Value(0));
     const styles = useStyles();
     const translateRange = React.useMemo(() => progress.interpolate({
         inputRange: [0, 1],

package/dist/ui/ProgressBar/ProgressBarLoop.js

@@ -6,7 +6,7 @@ import { PROGRESS_BAR_GAP, PROGRESS_BAR_HEIGHT, PROGRESS_DURATION } from './Prog
 import { useStyles } from './ProgressBar.styles';
 export const ProgressBarLoop = (props) => {
     const { style, onLayout, ...boxProps } = props;
-    const progress = React.useRef(new Animated.Value(0)).current;
+    const [progress] = React.useState(() => new Animated.Value(0));
     const styles = useStyles();
     const [width, setWidth] = React.useState(0);
     const loopProgressWidth = React.useMemo(() => Math.max(width - PROGRESS_BAR_GAP, 0), [width]);

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

@@ -0,0 +1,21 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+import React from 'react';
+import { TamaguiElement, RadioGroupProps as TamaguiRadioGroupProps } from 'tamagui';
+export type RadioGroupElement = TamaguiElement;
+export type RadioGroupProps = Omit<TamaguiRadioGroupProps, 'value' | 'onValueChange' | 'direction'> & FormControlCaptionProps & FormControlLabelProps & FormControlHintProps & {
+    label?: string;
+    value?: TamaguiRadioGroupProps['value'];
+    onChange?: TamaguiRadioGroupProps['onValueChange'];
+    variant?: 'default' | 'card';
+};
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<TamaguiRadioGroupProps, "direction" | "value" | "onValueChange"> & FormControlCaptionProps & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlHintProps & {
+    label?: string;
+    value?: TamaguiRadioGroupProps["value"];
+    onChange?: TamaguiRadioGroupProps["onValueChange"];
+    variant?: "default" | "card";
+} & React.RefAttributes<TamaguiElement>>;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +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"}

package/dist/ui/RadioGroup/RadioGroup.js

@@ -0,0 +1,11 @@
+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 { 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 })] }) }));
+});

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

@@ -0,0 +1,164 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").RadioGroupProps, "direction" | "value" | "onValueChange"> & import("..").FormControlCaptionProps & {
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlHintProps & {
+        label?: string;
+        value?: import("tamagui").RadioGroupProps["value"];
+        onChange?: import("tamagui").RadioGroupProps["onValueChange"];
+        variant?: "default" | "card";
+    } & import("react").RefAttributes<import("tamagui").TamaguiElement>> & {
+        Item: (props: import("./RadioGroupItem").RadioGroupItemProps) => import("react").JSX.Element;
+        Card: (props: import("./RadioGroupCard").RadioGroupCardProps) => import("react").JSX.Element;
+    };
+    styleFn: () => {
+        container: {
+            width: "100%";
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "flex-start";
+            gap: import("@alveole/theme").Spacing;
+        };
+        group: {
+            display: "flex";
+            alignItems: "flex-start";
+            width: "100%";
+            flexDirection: "column";
+        };
+        groupCard: {
+            borderColor: string;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderWidth: number;
+            overflow: "hidden";
+        };
+        groupItem: {
+            gap: import("@alveole/theme").Spacing;
+        };
+        label: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: string;
+        };
+        card: {
+            display: "flex";
+            flexDirection: "row";
+            width: "100%";
+        };
+        itemCard: {
+            padding: number;
+            width: "100%";
+            height: undefined;
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            cursor: "pointer";
+            transitionDuration: "0.1s";
+            transitionTimingFunction: "ease-in-out";
+        };
+        itemCardHover: {
+            backgroundColor: string;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            boxShadow: undefined;
+        };
+        itemCardContent: {
+            display: "flex";
+            flex: number;
+            height: "100%";
+            flexDirection: "row";
+            justifyContent: "flex-start";
+            alignItems: "center";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+        };
+        itemContainer: {
+            backgroundColor: "#FFFFFF";
+            borderColor: string;
+        };
+        itemContainerSm: {
+            height: import("@alveole/theme").Spacing;
+            width: import("@alveole/theme").Spacing;
+        };
+        itemContainerMd: {
+            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;
+        };
+        itemIndicator: {
+            backgroundColor: string;
+            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: {
+            display: "flex";
+            flexDirection: "row";
+            flex: number;
+            alignItems: "center";
+            justifyContent: "flex-start";
+            height: "100%";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+        };
+        radioGroupCardLabelContainer: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            display: "flex";
+            flexDirection: "row";
+            width: "100%";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            flex: number;
+        };
+        itemCardSeparator: {
+            borderTopWidth: number;
+            borderTopColor: string;
+        };
+        radioGroupCardLabel: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Cards: () => import("react").JSX.Element;
+export declare const WithError: () => import("react").JSX.Element;
+export * as Sources from './RadioGroup.stories.sources';
+//# sourceMappingURL=RadioGroup.stories.d.ts.map

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

@@ -0,0 +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,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { RadioGroup } from './index';
+import { useStyles } from './RadioGroup.styles';
+export default {
+    title: 'RadioGroup',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Groupe de boutons radio avec variantes liste et card.',
+    component: RadioGroup,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [value, setValue] = useState('a');
+    return (_jsxs(RadioGroup, { value: value, onChange: setValue, label: "Choix", children: [_jsx(RadioGroup.Item, { value: "a", children: "Option A" }), _jsx(RadioGroup.Item, { value: "b", children: "Option B" }), _jsx(RadioGroup.Item, { value: "c", children: "Option C" })] }));
+};
+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" })] }));
+};
+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 * as Sources from './RadioGroup.stories.sources';

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

@@ -0,0 +1,10 @@
+export declare const Default: () => string;
+export declare const Cards: () => string;
+export declare const WithError: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Cards: () => string;
+    readonly WithError: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=RadioGroup.stories.sources.d.ts.map

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

@@ -0,0 +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,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,10 @@
+// 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 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 storySources = {
+    Default,
+    Cards,
+    WithError,
+};

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

@@ -0,0 +1,140 @@
+export declare const useStyles: () => {
+    container: {
+        width: "100%";
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "flex-start";
+        gap: import("@alveole/theme").Spacing;
+    };
+    group: {
+        display: "flex";
+        alignItems: "flex-start";
+        width: "100%";
+        flexDirection: "column";
+    };
+    groupCard: {
+        borderColor: string;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderWidth: number;
+        overflow: "hidden";
+    };
+    groupItem: {
+        gap: import("@alveole/theme").Spacing;
+    };
+    label: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: string;
+    };
+    card: {
+        display: "flex";
+        flexDirection: "row";
+        width: "100%";
+    };
+    itemCard: {
+        padding: number;
+        width: "100%";
+        height: undefined;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        cursor: "pointer";
+        transitionDuration: "0.1s";
+        transitionTimingFunction: "ease-in-out";
+    };
+    itemCardHover: {
+        backgroundColor: string;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        boxShadow: undefined;
+    };
+    itemCardContent: {
+        display: "flex";
+        flex: number;
+        height: "100%";
+        flexDirection: "row";
+        justifyContent: "flex-start";
+        alignItems: "center";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+    };
+    itemContainer: {
+        backgroundColor: "#FFFFFF";
+        borderColor: string;
+    };
+    itemContainerSm: {
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+    };
+    itemContainerMd: {
+        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;
+    };
+    itemIndicator: {
+        backgroundColor: string;
+        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: {
+        display: "flex";
+        flexDirection: "row";
+        flex: number;
+        alignItems: "center";
+        justifyContent: "flex-start";
+        height: "100%";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+    };
+    radioGroupCardLabelContainer: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        display: "flex";
+        flexDirection: "row";
+        width: "100%";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+        flex: number;
+    };
+    itemCardSeparator: {
+        borderTopWidth: number;
+        borderTopColor: string;
+    };
+    radioGroupCardLabel: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=RadioGroup.styles.d.ts.map

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

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

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

@@ -0,0 +1,129 @@
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
+    container: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: spacing('025'),
+    },
+    group: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        width: '100%',
+        flexDirection: 'column',
+    },
+    groupCard: {
+        borderColor: color.border['default-grey'],
+        borderRadius: radius('md'),
+        borderWidth: 1,
+        overflow: 'hidden',
+    },
+    groupItem: {
+        gap: spacing('100'),
+    },
+    label: {
+        color: color.text['title-grey'],
+        ...text['Corps de texte'].SM.Bold,
+    },
+    card: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+    },
+    itemCard: {
+        padding: 0,
+        width: '100%',
+        height: undefined,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        cursor: 'pointer',
+        transitionDuration: '0.1s',
+        transitionTimingFunction: 'ease-in-out',
+    },
+    itemCardHover: {
+        backgroundColor: color.background['default-hover'],
+        borderRadius: radius('md'),
+        boxShadow: undefined,
+    },
+    itemCardContent: {
+        display: 'flex',
+        flex: 1,
+        height: '100%',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        paddingTop: spacing('075'),
+        paddingBottom: spacing('075'),
+        gap: spacing('075'),
+    },
+    itemContainer: {
+        backgroundColor: '#FFFFFF',
+        borderColor: color.light.border['action-high-primary'],
+    },
+    itemContainerSm: {
+        height: spacing('100'),
+        width: spacing('100'),
+    },
+    itemContainerMd: {
+        height: spacing('150'),
+        width: spacing('150'),
+    },
+    itemCardContainer: {
+        height: spacing('100'),
+        width: spacing('100'),
+        backgroundColor: '#FFFFFF',
+    },
+    itemContainerActive: {
+        borderColor: color.light.border['action-high-primary'],
+    },
+    itemIndicator: {
+        backgroundColor: color.light.background['action-high-primary'],
+        height: 8,
+        width: 8,
+    },
+    itemCardLabel: {
+        cursor: 'pointer',
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].SM.Bold,
+        textAlign: 'center',
+    },
+    itemCardIcon: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: color.text.mention,
+    },
+    radioGroupCardContent: {
+        display: 'flex',
+        flexDirection: 'row',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        height: '100%',
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        gap: spacing('075'),
+    },
+    radioGroupCardLabelContainer: {
+        paddingTop: spacing('075'),
+        paddingBottom: spacing('075'),
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        alignItems: 'center',
+        gap: spacing('050'),
+        flex: 1,
+    },
+    itemCardSeparator: {
+        borderTopWidth: Platform.OS === 'ios' ? 3 : 1,
+        borderTopColor: color.light.border['default-grey'],
+    },
+    radioGroupCardLabel: {
+        ...text['Corps de texte'].SM.Regular,
+    },
+}));