@alveole/components 1.5.3 → 1.6.0

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "1.5.3";
+export declare const ALVEOLE_COMPONENTS_VERSION: "1.6.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "1.5.3";
+export const ALVEOLE_COMPONENTS_VERSION = "1.6.0";

package/dist/ui/BottomSheet/BottomSheet.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import { SheetProps as TamaguiSheetProps } from 'tamagui';
+type BottomSheetWithPoints = {
+    points: TamaguiSheetProps['snapPoints'];
+    fitContent?: false;
+};
+type BottomSheetWithoutPoints = {
+    points?: undefined;
+    fitContent: true;
+};
 export type BottomSheetProps = React.PropsWithChildren<{
     open: TamaguiSheetProps['open'];
     title: string;
-    points: TamaguiSheetProps['snapPoints'];
     action?: React.ReactNode | undefined;
     setOpen: (value: boolean) => void;
-}>;
+} & (BottomSheetWithoutPoints | BottomSheetWithPoints)>;
 export declare const BottomSheet: (props: BottomSheetProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOjF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAqDlD,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyB,UAAU,IAAI,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOjF,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,GAAG,CAAC,wBAAwB,GAAG,qBAAqB,CAAC,CACvD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAsDlD,CAAC"}

package/dist/ui/BottomSheet/BottomSheet.js

@@ -8,9 +8,10 @@ import { ButtonIcon } from '../Button';
 import { Divider } from '../Divider';
 import { useStyles } from './BottomSheet.styles';
 export const BottomSheet = (props) => {
-    const { children, open, title, points, action, setOpen } = props;
+    const { children, open, title, points, fitContent, action, setOpen } = props;
     const [position, setPosition] = React.useState(0);
     const styles = useStyles();
     const { bottom } = useSafeAreaInsets();
-    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, forceRemoveScrollEnabled: open, open: open, onOpenChange: setOpen, snapPoints: points, snapPointsMode: 'percent', dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, animation: "medium", children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Frame, { style: styles.frame, children: [_jsx(TamaguiSheet.Handle, { style: styles.handle }), _jsxs(Box, { tag: "sheet-header", style: styles.header, children: [_jsx(Box, { children: _jsx(ButtonIcon, { icon: "X", variant: "tertiary", size: "lg", onPress: () => setOpen(false) }) }), _jsx(Box, { flex: 1, children: _jsx(Typography, { style: styles.title, children: title }) }), action && (_jsx(Box, { mt: 'auto', mb: 'auto', children: action }))] }), _jsx(Divider, { ml: '2W', mr: '2W' }), _jsx(Box, { tag: "sheet-content", style: styles.content, pb: bottom, children: children })] })] }) }));
+    const snapPointsMode = fitContent ? 'fit' : 'percent';
+    return (_jsx(Box, { tag: "sheet", style: styles.container, children: _jsxs(TamaguiSheet, { modal: true, forceRemoveScrollEnabled: open, open: open, onOpenChange: setOpen, snapPoints: fitContent ? undefined : points, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, animation: "medium", children: [_jsx(TamaguiSheet.Overlay, { style: styles.overlay }), _jsxs(TamaguiSheet.Frame, { style: styles.frame, children: [_jsx(TamaguiSheet.Handle, { style: styles.handle }), _jsxs(Box, { tag: "sheet-header", style: styles.header, children: [_jsx(Box, { children: _jsx(ButtonIcon, { icon: "X", variant: "tertiary", size: "md", onPress: () => setOpen(false) }) }), _jsx(Box, { flex: 1, children: _jsx(Typography, { style: styles.title, children: title }) }), action && (_jsx(Box, { mt: 'auto', mb: 'auto', children: action }))] }), _jsx(Divider, { ml: '2W', mr: '2W' }), _jsx(Box, { tag: "sheet-content", style: [styles.content, !fitContent && styles.contentFull], pb: bottom, children: children })] })] }) }));
 };

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

@@ -7,10 +7,12 @@ declare const _default: {
     styleFn: () => {
         container: {};
         content: {
-            height: "100%";
             backgroundColor: string;
             marginTop: string | number;
         };
+        contentFull: {
+            height: "100%";
+        };
         header: {
             paddingLeft: string | number;
             paddingRight: string | number;
@@ -45,5 +47,6 @@ declare const _default: {
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
 export declare const WithAction: () => import("react").JSX.Element;
+export declare const FitContent: () => import("react").JSX.Element;
 export * as Sources from './BottomSheet.stories.sources';
 //# sourceMappingURL=BottomSheet.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAoBtB,CAAC;AAEF,eAAO,MAAM,UAAU,mCActB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/BottomSheet/BottomSheet.stories.js

@@ -19,4 +19,8 @@ export const WithAction = () => {
     const [open, setOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Button, { title: "Ouvrir la modal", variant: "primary", onPress: () => setOpen(true) }) }), _jsx(BottomSheet, { open: open, setOpen: setOpen, points: [50], title: "Titre", action: _jsx(Button, { title: "Action", variant: "tertiary", size: "sm" }), children: _jsx(Typography, { children: "Children" }) })] }));
 };
+export const FitContent = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Button, { title: "Ouvrir la modal", variant: "primary", onPress: () => setOpen(true) }) }), _jsx(BottomSheet, { fitContent: true, open: open, setOpen: setOpen, title: "Titre", children: _jsx(Typography, { height: 100, children: "Children" }) })] }));
+};
 export * as Sources from './BottomSheet.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,UAAU,cAAkjB,CAAC;AAE1kB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"BottomSheet.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/BottomSheet/BottomSheet.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,UAAU,cAAkjB,CAAC;AAE1kB,eAAO,MAAM,UAAU,cAAic,CAAC;AAEzd,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -2,7 +2,9 @@
 // Source: src/ui/BottomSheet/BottomSheet.stories.tsx
 export const Default = () => "export const Default = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Button title=\"Ouvrir la modal\" variant=\"primary\" onPress={() => setOpen(true)} />\n      </Box>\n\n      <BottomSheet open={open} setOpen={setOpen} points={[80, 25]} title=\"Titre\">\n        <Typography>Children</Typography>\n      </BottomSheet>\n    </>\n  );\n};";
 export const WithAction = () => "export const WithAction = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Button title=\"Ouvrir la modal\" variant=\"primary\" onPress={() => setOpen(true)} />\n      </Box>\n\n      <BottomSheet\n        open={open}\n        setOpen={setOpen}\n        points={[50]}\n        title=\"Titre\"\n        action={<Button title=\"Action\" variant=\"tertiary\" size=\"sm\" />}\n      >\n        <Typography>Children</Typography>\n      </BottomSheet>\n    </>\n  );\n};";
+export const FitContent = () => "export const FitContent = () => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Button title=\"Ouvrir la modal\" variant=\"primary\" onPress={() => setOpen(true)} />\n      </Box>\n\n      <BottomSheet fitContent open={open} setOpen={setOpen} title=\"Titre\">\n        <Typography height={100}>Children</Typography>\n      </BottomSheet>\n    </>\n  );\n};";
 export const storySources = {
     Default,
     WithAction,
+    FitContent,
 };

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

@@ -1,10 +1,12 @@
 export declare const useStyles: () => {
     container: {};
     content: {
-        height: "100%";
         backgroundColor: string;
         marginTop: string | number;
     };
+    contentFull: {
+        height: "100%";
+    };
     header: {
         paddingLeft: string | number;
         paddingRight: string | number;

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

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

package/dist/ui/BottomSheet/BottomSheet.styles.js

@@ -2,10 +2,12 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ spacing, text, color }) => ({
     container: {},
     content: {
-        height: '100%',
         backgroundColor: color.light.background['alt-grey'],
         marginTop: spacing('2W'),
     },
+    contentFull: {
+        height: '100%',
+    },
     header: {
         paddingLeft: spacing('2W'),
         paddingRight: spacing('2W'),
@@ -26,7 +28,7 @@ export const useStyles = makeStyles(({ spacing, text, color }) => ({
         backgroundColor: color.alpha(color.background.inverse, 0.5),
     },
     title: {
-        ...text['Corps de texte'].LG.SemiBold,
+        ...text['Corps de texte'].LG.Medium,
         color: color.light.text['title-grey'],
         marginTop: 'auto',
         marginBottom: 'auto',

package/dist/ui/Card/CardHeader.styles.d.ts

@@ -33,8 +33,6 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "flex-start";
     };
-    imageDisabled: {
-        filter: "grayscale(1)";
-    };
+    imageDisabled: import("@alveole/theme").StyleValue;
 };
 //# sourceMappingURL=CardHeader.styles.d.ts.map

package/dist/ui/Card/CardHeader.styles.d.ts.map

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

package/dist/ui/Card/CardHeader.styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@alveole/theme';
+import { grayscaleStyle, makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ spacing, color, text }) => ({
     cardHeader: {
         display: 'flex',
@@ -26,7 +26,5 @@ export const useStyles = makeStyles(({ spacing, color, text }) => ({
         display: 'flex',
         alignItems: 'flex-start',
     },
-    imageDisabled: {
-        filter: 'grayscale(1)',
-    },
+    imageDisabled: grayscaleStyle,
 }));

package/dist/ui/Card/CardMedia.styles.d.ts

@@ -2,8 +2,6 @@ export declare const useStyles: () => {
     cardMedia: {
         overflow: "hidden";
     };
-    disabled: {
-        filter: "grayscale(1)";
-    };
+    disabled: import("@alveole/theme").StyleValue;
 };
 //# sourceMappingURL=CardMedia.styles.d.ts.map

package/dist/ui/Card/CardMedia.styles.d.ts.map

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

package/dist/ui/Card/CardMedia.styles.js

@@ -1,9 +1,7 @@
-import { makeStyles } from '@alveole/theme';
+import { grayscaleStyle, makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(() => ({
     cardMedia: {
         overflow: 'hidden',
     },
-    disabled: {
-        filter: 'grayscale(1)',
-    },
+    disabled: grayscaleStyle,
 }));

package/dist/ui/ListItem/ListItem.d.ts

@@ -2,11 +2,13 @@ import React from 'react';
 import { BoxProps } from '../../core';
 import { AvatarProps } from '../Avatar';
 import { IconProps } from '../LucideIcon';
+import { RadioInputProps } from '../RadioGroup';
 export type ListItemProps = BoxProps & {
     title: string;
     description?: string;
     IconProps?: Pick<IconProps, 'color' | 'name'>;
     AvatarProps?: Pick<AvatarProps, 'fallbackText' | 'src'>;
+    RadioProps?: Pick<RadioInputProps, 'checked' | 'onChange' | 'value'>;
     preview_url?: string;
     trailing?: () => React.ReactNode;
     loading?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAqB,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAItD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,KAAK,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBA6D5C,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAqB,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AACtD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,KAAK,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAqF5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -1,11 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, Image, Typography } from '../../core';
 import { Avatar } from '../Avatar';
 import { LucideIcon } from '../LucideIcon';
+import { RadioGroup } from '../RadioGroup';
 import { Spinner } from '../Spinner';
 import { useStyles } from './ListItem.styles';
 export const ListItem = (props) => {
-    const { children, title, description, style, AvatarProps, IconProps, preview_url, trailing, loading = false, showSeparateur = true, ...itemProps } = props;
+    const { children, title, description, style, AvatarProps, IconProps, RadioProps, preview_url, trailing, loading = false, showSeparateur = true, onPress, ...itemProps } = props;
+    const handlePress = React.useCallback((event) => {
+        if (RadioProps)
+            RadioProps.onChange?.(RadioProps.value);
+        onPress?.(event);
+    }, [RadioProps, onPress]);
     const styles = useStyles();
-    return (_jsxs(Box, { children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: itemProps['onPress'] ? styles.itemHover : {}, ...itemProps, children: [preview_url ? (_jsx(Box, { style: styles.previewContainer, children: _jsx(Image, { source: { uri: preview_url }, width: styles.preview.width, height: styles.preview.height, contentFit: "contain" }) })) : (_jsxs(_Fragment, { children: [IconProps && _jsx(LucideIcon, { size: "sm", color: styles.defaultIcon.color, ...IconProps }), AvatarProps && _jsx(Avatar, { size: "xs", ...AvatarProps })] })), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
+    return (_jsxs(Box, { children: [_jsxs(Box, { tag: "resource-item", style: [styles.item, style], hoverStyle: onPress || RadioProps ? styles.itemHover : {}, onPress: handlePress, ...itemProps, children: [preview_url ? (_jsx(Box, { style: styles.previewContainer, children: _jsx(Image, { source: { uri: preview_url }, width: styles.preview.width, height: styles.preview.height, contentFit: "contain" }) })) : (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '3V', children: [RadioProps && (_jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(RadioGroup.Input, { id: `${title}--radio`, size: "md", ...RadioProps }) })), IconProps && (_jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(LucideIcon, { size: "sm", color: styles.defaultIcon.color, ...IconProps }) })), AvatarProps && (_jsx(Box, { mt: 'auto', mb: 'auto', children: _jsx(Avatar, { size: "xs", ...AvatarProps }) }))] })), _jsxs(Box, { style: styles.detail, children: [showSeparateur && _jsx(Box, { style: styles.separateur }), _jsxs(Box, { style: styles.principal, children: [_jsx(Typography, { style: styles.title, children: title }), description && _jsx(Typography, { style: styles.description, children: description })] }), trailing && trailing()] }), loading && (_jsx(Box, { style: styles.loading, children: _jsx(Spinner, { size: "sm" }) }))] }), children] }));
 };

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

@@ -109,6 +109,8 @@ export declare const WithoutSeparator: () => import("react").JSX.Element;
 export declare const WithIcon: () => import("react").JSX.Element;
 export declare const WithAvatar: () => import("react").JSX.Element;
 export declare const WithPreviewImage: () => import("react").JSX.Element;
+export declare const ItemRadio: () => import("react").JSX.Element;
+export declare const ItemRadioWithIcon: () => import("react").JSX.Element;
 /** Sans prop `onPress`, l’effet de hover n’apparaît pas. */
 export declare const withoutHover: () => import("react").JSX.Element;
 export * as Sources from './ListItem.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCASxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCASxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/ListItem/ListItem.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { ButtonIcon } from '../Button';
 import { ListItem } from './ListItem';
 import { useStyles } from './ListItem.styles';
@@ -40,6 +41,22 @@ export const WithAvatar = () => (_jsx(ListItem, { title: "Titre", description: "
 export const WithPreviewImage = () => (_jsx(ListItem, { title: "Titre", description: "Description", preview_url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400", onPress: () => {
         window.alert('click !');
     } }));
+export const ItemRadio = () => {
+    const [value, setValue] = useState();
+    return (_jsx(ListItem, { title: "Titre", description: "Description", RadioProps: {
+            value: 'tutu',
+            checked: value === 'tutu',
+            onChange: v => setValue(v),
+        } }));
+};
+export const ItemRadioWithIcon = () => {
+    const [value, setValue] = useState();
+    return (_jsx(ListItem, { title: "Titre", description: "Description", IconProps: { name: 'Settings' }, RadioProps: {
+            value: 'tutu',
+            checked: value === 'tutu',
+            onChange: v => setValue(v),
+        } }));
+};
 /** Sans prop `onPress`, l’effet de hover n’apparaît pas. */
 export const withoutHover = () => _jsx(ListItem, { title: "Titre", description: "Description" });
 export * as Sources from './ListItem.stories.sources';

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

@@ -5,6 +5,8 @@ export declare const WithoutSeparator: () => string;
 export declare const WithIcon: () => string;
 export declare const WithAvatar: () => string;
 export declare const WithPreviewImage: () => string;
+export declare const ItemRadio: () => string;
+export declare const ItemRadioWithIcon: () => string;
 export declare const withoutHover: () => string;
 export declare const storySources: {
     readonly Default: () => string;
@@ -14,6 +16,8 @@ export declare const storySources: {
     readonly WithIcon: () => string;
     readonly WithAvatar: () => string;
     readonly WithPreviewImage: () => string;
+    readonly ItemRadio: () => string;
+    readonly ItemRadioWithIcon: () => string;
     readonly withoutHover: () => string;
 };
 export type StorySourceName = keyof typeof storySources;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAoL,CAAC;AAEzM,eAAO,MAAM,YAAY,cAA0S,CAAC;AAEpU,eAAO,MAAM,WAAW,cAA4M,CAAC;AAErO,eAAO,MAAM,gBAAgB,cAAyN,CAAC;AAEvP,eAAO,MAAM,QAAQ,cAA6O,CAAC;AAEnQ,eAAO,MAAM,UAAU,cAAyU,CAAC;AAEjW,eAAO,MAAM,gBAAgB,cAAqR,CAAC;AAEnT,eAAO,MAAM,YAAY,cAAsG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"ListItem.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAoL,CAAC;AAEzM,eAAO,MAAM,YAAY,cAA0S,CAAC;AAEpU,eAAO,MAAM,WAAW,cAA4M,CAAC;AAErO,eAAO,MAAM,gBAAgB,cAAyN,CAAC;AAEvP,eAAO,MAAM,QAAQ,cAA6O,CAAC;AAEnQ,eAAO,MAAM,UAAU,cAAyU,CAAC;AAEjW,eAAO,MAAM,gBAAgB,cAAqR,CAAC;AAEnT,eAAO,MAAM,SAAS,cAAqU,CAAC;AAE5V,eAAO,MAAM,iBAAiB,cAAqX,CAAC;AAEpZ,eAAO,MAAM,YAAY,cAAsG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

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

@@ -7,6 +7,8 @@ export const WithoutSeparator = () => "export const WithoutSeparator = () => (\n
 export const WithIcon = () => "export const WithIcon = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    IconProps={{ name: 'Settings', color: 'primary' }}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
 export const WithAvatar = () => "export const WithAvatar = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    AvatarProps={{\n      fallbackText: 'Jean Pierre',\n      src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',\n    }}\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
 export const WithPreviewImage = () => "export const WithPreviewImage = () => (\n  <ListItem\n    title=\"Titre\"\n    description=\"Description\"\n    preview_url=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400\"\n    onPress={() => {\n      window.alert('click !');\n    }}\n  />\n);";
+export const ItemRadio = () => "export const ItemRadio = () => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <ListItem\n      title=\"Titre\"\n      description=\"Description\"\n      RadioProps={{\n        value: 'tutu',\n        checked: value === 'tutu',\n        onChange: v => setValue(v),\n      }}\n    />\n  );\n};";
+export const ItemRadioWithIcon = () => "export const ItemRadioWithIcon = () => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <ListItem\n      title=\"Titre\"\n      description=\"Description\"\n      IconProps={{ name: 'Settings' }}\n      RadioProps={{\n        value: 'tutu',\n        checked: value === 'tutu',\n        onChange: v => setValue(v),\n      }}\n    />\n  );\n};";
 export const withoutHover = () => "export const withoutHover = () => <ListItem title=\"Titre\" description=\"Description\" />;";
 export const storySources = {
     Default,
@@ -16,6 +18,8 @@ export const storySources = {
     WithIcon,
     WithAvatar,
     WithPreviewImage,
+    ItemRadio,
+    ItemRadioWithIcon,
     withoutHover,
 };
 export const storyDescriptions = {

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

@@ -17,6 +17,7 @@ declare const _default: {
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>> & {
         Item: (props: import("./RadioGroupItem").RadioGroupItemProps) => import("react").JSX.Element;
         Card: (props: import("./RadioGroupCard").RadioGroupCardProps) => import("react").JSX.Element;
+        Input: (props: import("./RadioInput").RadioInputProps) => import("react").JSX.Element;
     };
     styleFn: () => {
         container: {
@@ -162,5 +163,6 @@ 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 declare const RadioInput: () => 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

@@ -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,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,mCAStB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

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

@@ -20,4 +20,8 @@ export const Cards = () => {
     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 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 })] }));
+};
 export * as Sources from './RadioGroup.stories.sources';

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

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

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,YAAY;;;;CAIf,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,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"}

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

@@ -3,8 +3,10 @@
 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 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 storySources = {
     Default,
     Cards,
     WithError,
+    RadioInput,
 };

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

@@ -2,6 +2,8 @@ export type RadioInputProps = {
     value: string;
     id: string;
     size: 'sm' | 'md';
+    checked?: boolean;
+    onChange?: (value: string) => void;
 };
 export declare const RadioInput: (props: RadioInputProps) => import("react").JSX.Element;
 //# sourceMappingURL=RadioInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioInput.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAwBhD,CAAC"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioInput.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAuChD,CAAC"}

package/dist/ui/RadioGroup/RadioInput.js

@@ -3,11 +3,19 @@ import { RadioGroup as TamaguiRadioGroup } from 'tamagui';
 import { useStyles } from './RadioGroup.styles';
 import { useRadioGroup } from './RadioGroupContext';
 export const RadioInput = (props) => {
-    const { value, id, size = 'md' } = props;
-    const { value: selectedValue, onChange } = useRadioGroup();
-    const isSelected = selectedValue === value;
+    const { value, id, size = 'md', checked, onChange: onInputChange } = props;
+    const { value: selectedValue, onChange: onGroupChange } = useRadioGroup();
+    const isSelected = checked ?? selectedValue === value;
     const styles = useStyles();
     const itemStyles = { ...styles.itemContainer, ...(size === 'sm' ? styles.itemContainerSm : styles.itemContainerMd) };
     const indicatorStyle = { ...styles.itemContainer, ...(isSelected ? styles.itemContainerActive : {}) };
-    return (_jsx(TamaguiRadioGroup.Item, { value: value, id: id, style: itemStyles, focusStyle: styles.itemContainerActive, hoverStyle: indicatorStyle, pressStyle: styles.itemContainerActive, onPress: () => onChange?.(value), children: _jsx(TamaguiRadioGroup.Indicator, { style: styles.itemIndicator }) }));
+    const handleChange = () => {
+        onInputChange?.(value);
+        onGroupChange?.(value);
+    };
+    const input = (_jsx(TamaguiRadioGroup.Item, { value: value, id: id, style: itemStyles, focusStyle: styles.itemContainerActive, hoverStyle: indicatorStyle, pressStyle: styles.itemContainerActive, onPress: checked == null ? handleChange : undefined, children: _jsx(TamaguiRadioGroup.Indicator, { style: styles.itemIndicator }) }));
+    if (checked == null) {
+        return input;
+    }
+    return (_jsx(TamaguiRadioGroup, { value: isSelected ? value : '', onValueChange: () => handleChange(), children: input }));
 };

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

@@ -2,6 +2,7 @@ export { RadioGroupElement, RadioGroupProps } from './RadioGroup';
 export { RadioGroupCardProps } from './RadioGroupCard';
 export { RadioGroupCtx } from './RadioGroupContext';
 export { RadioGroupItemProps } from './RadioGroupItem';
+export { RadioInputProps } from './RadioInput';
 export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<import("tamagui").RadioGroupProps, "direction" | "value" | "onValueChange"> & import("..").FormControlCaptionProps & {
     label: string;
     labelRight?: React.ReactNode;
@@ -16,5 +17,6 @@ export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<
 } & import("react").RefAttributes<import("tamagui").TamaguiElement>> & {
     Item: (props: import("./RadioGroupItem").RadioGroupItemProps) => import("react").JSX.Element;
     Card: (props: import("./RadioGroupCard").RadioGroupCardProps) => import("react").JSX.Element;
+    Input: (props: import("./RadioInput").RadioInputProps) => import("react").JSX.Element;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAGrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAIrB,CAAC"}

package/dist/ui/RadioGroup/index.js

@@ -1,7 +1,9 @@
 import { RadioGroup as RadioGroupComponent } from './RadioGroup';
 import { RadioGroupCard } from './RadioGroupCard';
 import { RadioGroupItem } from './RadioGroupItem';
+import { RadioInput } from './RadioInput';
 export const RadioGroup = Object.assign(RadioGroupComponent, {
     Item: RadioGroupItem,
     Card: RadioGroupCard,
+    Input: RadioInput,
 });

package/dist/ui/Toast/Toast.js

@@ -7,7 +7,7 @@ import { useStyles } from './Toast.styles';
 import { ToastType } from './ToastType';
 export function ToastView({ title, message, variant = 'default', icon, onClose }) {
     const styles = useStyles();
-    return (_jsxs(Box, { style: styles.container, children: [_jsx(ToastType, { variant: variant, icon: icon }), _jsxs(Box, { style: styles.contenu, children: [_jsxs(Box, { style: styles.titleContainer, children: [_jsx(Typography, { style: styles.title, children: title }), _jsx(Pressable, { onPress: onClose, children: _jsx(LucideIcon, { name: "X", size: "md" }) })] }), message && (_jsx(Box, { children: _jsx(Typography, { style: styles.message, children: message }) }))] })] }));
+    return (_jsxs(Box, { style: [styles.dualContainer, styles.container], children: [_jsx(ToastType, { variant: variant, icon: icon }), _jsxs(Box, { style: styles.contenu, children: [_jsxs(Box, { style: styles.titleContainer, children: [_jsx(Typography, { style: styles.title, children: title }), _jsx(Pressable, { onPress: onClose, children: _jsx(LucideIcon, { name: "X", size: "md" }) })] }), message && (_jsx(Box, { children: _jsx(Typography, { style: styles.message, children: message }) }))] })] }));
 }
 export function Toast() {
     const toast = useToastState();
@@ -15,5 +15,5 @@ export function Toast() {
     const styles = useStyles();
     if (!toast)
         return null;
-    return (_jsx(TamaguiToast, { duration: toast.duration, enterStyle: { opacity: 0, y: 10, scale: 0.98 }, exitStyle: { opacity: 0, y: 10, scale: 0.98 }, viewportName: "app-toasts", style: styles.container, children: _jsx(ToastView, { title: toast.title, message: toast.message, variant: toast.customData?.variant ?? 'default', icon: toast.customData?.icon, onClose: () => controller.hide() }) }, toast.id));
+    return (_jsx(TamaguiToast, { duration: toast.duration, enterStyle: { opacity: 0, y: 10, scale: 0.98 }, exitStyle: { opacity: 0, y: 10, scale: 0.98 }, viewportName: "app-toasts", style: [styles.dualContainer, styles.tamaguiToastContainer], children: _jsx(ToastView, { title: toast.title, message: toast.message, variant: toast.customData?.variant ?? 'default', icon: toast.customData?.icon, onClose: () => controller.hide() }) }, toast.id));
 }

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

@@ -8,15 +8,21 @@ declare const _default: {
     shortDescription: string;
     component: typeof Toast;
     styleFn: () => {
+        dualContainer: {
+            padding: number;
+            width: number | `${string}%` | undefined;
+        };
+        tamaguiToastContainer: {
+            backgroundColor: "transparent";
+            borderRadius: number;
+        };
         container: {
             backgroundColor: string;
-            width: number;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
             gap: string | number;
             overflow: "hidden";
-            padding: number;
         } | {
             shadowColor: import("@alveole/theme").Color;
             shadowOffset: {
@@ -27,23 +33,19 @@ declare const _default: {
             shadowRadius: number;
             elevation: number;
             backgroundColor: string;
-            width: number;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
             gap: string | number;
             overflow: "hidden";
-            padding: number;
         } | {
             boxShadow: string;
             backgroundColor: string;
-            width: number;
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
             gap: string | number;
             overflow: "hidden";
-            padding: number;
         };
         contenu: {
             display: "flex";

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

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

@@ -1,13 +1,19 @@
 export declare const useStyles: () => {
+    dualContainer: {
+        padding: number;
+        width: number | `${string}%` | undefined;
+    };
+    tamaguiToastContainer: {
+        backgroundColor: "transparent";
+        borderRadius: number;
+    };
     container: {
         backgroundColor: string;
-        width: number;
         borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
         gap: string | number;
         overflow: "hidden";
-        padding: number;
     } | {
         shadowColor: import("@alveole/theme").Color;
         shadowOffset: {
@@ -18,23 +24,19 @@ export declare const useStyles: () => {
         shadowRadius: number;
         elevation: number;
         backgroundColor: string;
-        width: number;
         borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
         gap: string | number;
         overflow: "hidden";
-        padding: number;
     } | {
         boxShadow: string;
         backgroundColor: string;
-        width: number;
         borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
         gap: string | number;
         overflow: "hidden";
-        padding: number;
     };
     contenu: {
         display: "flex";

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

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

package/dist/ui/Toast/Toast.styles.js

@@ -1,15 +1,22 @@
 import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
 export const useStyles = makeStyles(({ text, color, radius, spacing, shadows }) => ({
     // Container
+    dualContainer: {
+        padding: 0,
+        width: Platform.select({ web: 384, default: '100%' }),
+    },
+    tamaguiToastContainer: {
+        backgroundColor: 'transparent',
+        borderRadius: 0,
+    },
     container: {
         backgroundColor: color.light.background['default-grey'],
-        width: 384,
         borderRadius: radius('sm'),
         display: 'flex',
         flexDirection: 'row',
         gap: spacing('1W'),
         overflow: 'hidden',
-        padding: 0,
         ...shadows(3),
     },
     contenu: {

package/dist/ui/Toast/Toasts.js

@@ -6,7 +6,7 @@ import { ToastBridge } from './ToastBridge';
 import { ToastContext } from './ToastContext';
 export function Toasts(props) {
     const { children } = props;
-    return (_jsx(ToastProvider, { swipeDirection: "horizontal", native: ['ios', 'android'], children: _jsxs(ToastBridge, { children: [_jsx(Toast, {}), _jsx(ToastViewport, { name: "app-toasts", multipleToasts: true, bottom: 32, left: 0, right: 0 }), children] }) }));
+    return (_jsx(ToastProvider, { swipeDirection: "horizontal", children: _jsxs(ToastBridge, { children: [_jsx(Toast, {}), _jsx(ToastViewport, { name: "app-toasts", multipleToasts: true, bottom: 32, left: 0, right: 0 }), children] }) }));
 }
 export function useToast() {
     const ctx = React.useContext(ToastContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",