@alveole/components 1.10.0 → 2.0.0-alpha

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

@@ -1,34 +1,4 @@
 export declare const useStyles: () => {
-    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";
@@ -50,18 +20,43 @@ export declare const useStyles: () => {
         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";
@@ -75,11 +70,6 @@ export declare const useStyles: () => {
         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;
     };
@@ -88,53 +78,36 @@ export declare const useStyles: () => {
         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;
     };
 };
 //# sourceMappingURL=RadioGroup.styles.d.ts.map

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

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

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

@@ -1,12 +1,15 @@
-import { makeStyles } from '@alveole/theme';
+import { focusRing, makeStyles } from '@alveole/theme';
 import { Platform } from 'react-native';
-export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radius }) => ({
+const groupe = ({ text, color, spacing, radius }) => ({
+    // Voir `RadioInput.tsx` : Tamagui impose sa propre bague en `!important`, seule sa prop
+    // `focusVisibleStyle` peut la remplacer. Meme source que la regle CSS du theme.
+    itemContainerFocused: focusRing('default'),
     container: {
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: spacing('025'),
+        gap: spacing('1V'),
     },
     group: {
         display: 'flex',
@@ -21,46 +24,14 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         overflow: 'hidden',
     },
     groupItem: {
-        gap: spacing('100'),
+        gap: spacing('2W'),
     },
     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'),
-    },
+});
+const ligne = ({ color, spacingValue }) => ({
     itemContainer: {
         backgroundColor: '#FFFFFF',
         borderColor: color.light.border['action-high-primary'],
@@ -73,11 +44,6 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         height: spacingValue('150'),
         width: spacingValue('150'),
     },
-    itemCardContainer: {
-        height: spacingValue('100'),
-        width: spacingValue('100'),
-        backgroundColor: '#FFFFFF',
-    },
     itemContainerActive: {
         borderColor: color.light.border['action-high-primary'],
     },
@@ -86,11 +52,28 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         height: 8,
         width: 8,
     },
-    itemCardLabel: {
+});
+const carte = ({ text, color, spacing, radius }) => ({
+    card: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+    },
+    itemCard: {
+        padding: 0,
+        width: '100%',
+        height: undefined,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
         cursor: 'pointer',
-        color: color.text['default-grey'],
-        ...text['Corps de texte'].SM.Bold,
-        textAlign: 'center',
+        transitionDuration: '0.1s',
+        transitionTimingFunction: 'ease-in-out',
+    },
+    itemCardHover: {
+        backgroundColor: color.background['default-hover'],
+        borderRadius: radius('md'),
+        boxShadow: undefined,
     },
     itemCardIcon: {
         display: 'flex',
@@ -98,6 +81,10 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         alignItems: 'center',
         color: color.text.mention,
     },
+    itemCardSeparator: {
+        borderTopWidth: Platform.OS === 'ios' ? 3 : 1,
+        borderTopColor: color.light.border['default-grey'],
+    },
     radioGroupCardContent: {
         display: 'flex',
         flexDirection: 'row',
@@ -105,25 +92,22 @@ export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radiu
         alignItems: 'center',
         justifyContent: 'flex-start',
         height: '100%',
-        paddingLeft: spacing('100'),
-        paddingRight: spacing('100'),
-        gap: spacing('075'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        gap: spacing('3V'),
     },
     radioGroupCardLabelContainer: {
-        paddingTop: spacing('075'),
-        paddingBottom: spacing('075'),
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('3V'),
         display: 'flex',
         flexDirection: 'row',
         width: '100%',
         alignItems: 'center',
-        gap: spacing('050'),
+        gap: spacing('1W'),
         flex: 1,
     },
-    itemCardSeparator: {
-        borderTopWidth: Platform.OS === 'ios' ? 3 : 1,
-        borderTopColor: color.light.border['default-grey'],
-    },
     radioGroupCardLabel: {
         ...text['Corps de texte'].SM.Regular,
     },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...groupe(theme), ...ligne(theme), ...carte(theme) }));

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

@@ -1,10 +1,10 @@
-import { LucideIconProps } from '@alveole/components';
 import React, { CSSProperties } from 'react';
 import { TamaguiElement, RadioGroupItemProps as TamaguiRadioGroupCardProps } from 'tamagui';
+import { Leading } from '../Leading';
 export type RadioGroupCardElement = TamaguiElement;
 export type RadioGroupCardProps = Pick<TamaguiRadioGroupCardProps, 'value'> & {
     label: string;
-    icon?: LucideIconProps['name'];
+    leading?: Leading;
     style?: CSSProperties;
     separator?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupCard.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,eAAe,EAAc,MAAM,qBAAqB,CAAC;AACnF,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAKnG,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA2BxD,CAAC"}
+{"version":3,"file":"RadioGroupCard.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAGnG,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAKlD,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA2BxD,CAAC"}

package/dist/ui/RadioGroup/RadioGroupCard.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, LucideIcon, Typography } from '@alveole/components';
 import React, { useId } from 'react';
 import { Label } from 'tamagui';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
 import { useStyles } from './RadioGroup.styles';
 import { useRadioGroup } from './RadioGroupContext';
 import { RadioInput } from './RadioInput';
 export const RadioGroupCard = (props) => {
-    const { label, style, icon, value, separator = true } = props;
+    const { label, style, leading, value, separator = true } = props;
     const rid = useId();
     const id = React.useMemo(() => `radiogroup-${value}-${rid}`, [value, rid]);
     const styles = useStyles();
     useRadioGroup();
-    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { unstyled: true, htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, hoverStyle: styles.itemCardHover, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), icon && (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', style: styles.itemCardIcon, children: _jsx(LucideIcon, { size: "sm", name: icon }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
+    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { unstyled: true, htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, hoverStyle: styles.itemCardHover, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), leading != null && (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', style: styles.itemCardIcon, children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupItem.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAInG,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoBxD,CAAC"}
+{"version":3,"file":"RadioGroupItem.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,EAAS,cAAc,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAMnG,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAoBxD,CAAC"}

package/dist/ui/RadioGroup/RadioGroupItem.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
 import React, { useId } from 'react';
 import { Label } from 'tamagui';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { useStyles } from './RadioGroupItem.styles';
 import { RadioInput } from './RadioInput';
 export const RadioGroupItem = (props) => {

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

@@ -10,7 +10,7 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         flexDirection: 'row',
         alignItems: 'center',
         width: '100%',
-        gap: spacing('050'),
+        gap: spacing('1W'),
     },
     itemLabel: {
         cursor: 'pointer',

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

@@ -4,6 +4,8 @@ export type RadioInputProps = {
     size: 'sm' | 'md';
     checked?: boolean;
     onChange?: (value: string) => void;
+    /** Nom accessible du bouton : le contrôle n'affiche aucun texte de lui-même. */
+    label?: string;
 };
 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;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,gCAmChD,CAAC"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../src/ui/RadioGroup/RadioInput.tsx"],"names":[],"mappings":"AAKA,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;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAyChD,CAAC"}

package/dist/ui/RadioGroup/RadioInput.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
 import { RadioGroup as TamaguiRadioGroup } from 'tamagui';
 import { useStyles } from './RadioGroup.styles';
 import { useRadioGroup } from './RadioGroupContext';
 export const RadioInput = (props) => {
-    const { value, id, size = 'md', checked, onChange: onInputChange } = props;
+    const { value, id, size = 'md', checked, label, onChange: onInputChange } = props;
     const { value: selectedValue, onChange: onGroupChange } = useRadioGroup();
     const isSelected = checked ?? selectedValue === value;
     const styles = useStyles();
@@ -13,7 +14,12 @@ export const RadioInput = (props) => {
         onInputChange?.(value);
         onGroupChange?.(value);
     };
-    const input = (_jsx(TamaguiRadioGroup.Item, { value: value, id: id, style: itemStyles, focusStyle: styles.itemContainerActive, hoverStyle: indicatorStyle, pressStyle: styles.itemContainerActive, onPress: handleChange, children: _jsx(TamaguiRadioGroup.Indicator, { style: styles.itemIndicator }) }));
+    const input = (_jsx(TamaguiRadioGroup.Item, { value: value, id: id, "aria-label": label, style: itemStyles, hoverStyle: indicatorStyle, pressStyle: styles.itemContainerActive, ...focusRingProps(), 
+        // Tamagui injecte sa propre regle `:focus-visible` en `!important` derriere un selecteur
+        // `:root:root:root:root` : la regle CSS du theme ne peut pas la battre, et sans cette prop
+        // c'est le gris translucide de Tamagui qui s'affiche. La valeur vient de `focusRing()`,
+        // qui peint le meme bleu que la regle : un seul reglage, deux chemins pour l'appliquer.
+        focusVisibleStyle: styles.itemContainerFocused, onPress: handleChange, children: _jsx(TamaguiRadioGroup.Indicator, { style: styles.itemIndicator }) }));
     if (checked == null) {
         return input;
     }

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

@@ -3,13 +3,7 @@ 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;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & import("..").FormControlHintProps & {
+export declare const RadioGroup: 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"];

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":"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"}
+{"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/ResourceList/ResourceList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceList.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,iBAAiB,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG;IAC3D,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,IAAI,EAAG,OAAO,iBAAiB,CAAC,IAAI,CAAC,oSAsDjE,CAAC"}
+{"version":3,"file":"ResourceList.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,iBAAiB,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG;IAC3D,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,IAAI,EAAG,OAAO,iBAAiB,CAAC,IAAI,CAAC,oSAsDjE,CAAC"}

package/dist/ui/ResourceList/ResourceList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FlashList } from '@shopify/flash-list';
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Spinner } from '../Spinner';
 import { useStyles } from './ResourceList.styles';
 export const ResourceList = (props) => {

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

@@ -9,6 +9,7 @@ declare const _default: {
         list: {
             display: "flex";
             flexDirection: "column";
+            width: "100%";
             gap: string | number;
         };
         entete: {

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAcpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,mCAevC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAcpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,mCAevC,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}

package/dist/ui/ResourceList/ResourceList.stories.js

@@ -43,13 +43,14 @@ export const Default = () => (_jsx(ResourceList, { data: exampleData, keyExtract
 export const WithTitle = () => (_jsx(ResourceList, { titre: "Titre de la liste", data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
 export const WithIcon = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, IconProps: { name: 'Settings' }, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
 export const WithPreviewImageAndTrailing = () => (_jsx(ResourceList, { data: exampleDataWithPreview, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, preview_url: item.preview_url, trailing: () => _jsx(LucideIcon, { name: "ChevronRight", size: "sm" }), showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+const aucunExemple = [];
 /**
  * Quand `isLoading` est `true`, la liste entière est remplacée par un
  * spinner centré. Aucun délai n'est appliqué ici : le chargement initial
  * d'une liste vide n'a rien à afficher, le spinner apparaît donc
  * immédiatement pour éviter un écran blanc sans feedback.
  */
-export const IsLoading = () => (_jsx(ResourceList, { data: [], isLoading: true, keyExtractor: item => item.id, renderItem: () => null, renderNoContent: () => null }));
-export const WithNoContent = () => (_jsx(ResourceList, { data: [], keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const IsLoading = () => (_jsx(ResourceList, { data: aucunExemple, isLoading: true, keyExtractor: item => item.id, renderItem: () => null, renderNoContent: () => null }));
+export const WithNoContent = () => (_jsx(ResourceList, { data: aucunExemple, keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
 export const WithDivider = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), ItemSeparatorComponent: ResourceListDivider, renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
 export * as Sources from './ResourceList.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceList.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAkb,CAAC;AAEzc,eAAO,MAAM,QAAQ,cAA4d,CAAC;AAElf,eAAO,MAAM,2BAA2B,cAAmkB,CAAC;AAE5mB,eAAO,MAAM,SAAS,cAAoO,CAAC;AAE3P,eAAO,MAAM,aAAa,cAA8W,CAAC;AAEzY,eAAO,MAAM,WAAW,cAAqc,CAAC;AAE9d,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"ResourceList.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAkb,CAAC;AAEzc,eAAO,MAAM,QAAQ,cAA4d,CAAC;AAElf,eAAO,MAAM,2BAA2B,cAAmkB,CAAC;AAE5mB,eAAO,MAAM,SAAS,cAAwN,CAAC;AAE/O,eAAO,MAAM,aAAa,cAAkW,CAAC;AAE7X,eAAO,MAAM,WAAW,cAAqc,CAAC;AAE9d,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -4,8 +4,8 @@ export const Default = () => "export const Default = () => (\n  <ResourceList\n
 export const WithTitle = () => "export const WithTitle = () => (\n  <ResourceList\n    titre=\"Titre de la liste\"\n    data={exampleData}\n    keyExtractor={item => item.id}\n    renderItem={({ item, index }) => (\n      <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />\n    )}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
 export const WithIcon = () => "export const WithIcon = () => (\n  <ResourceList\n    data={exampleData}\n    keyExtractor={item => item.id}\n    renderItem={({ item, index }) => (\n      <ListItem\n        title={item.name}\n        description={item.description}\n        IconProps={{ name: 'Settings' }}\n        showSeparateur={index !== 0}\n      />\n    )}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
 export const WithPreviewImageAndTrailing = () => "export const WithPreviewImageAndTrailing = () => (\n  <ResourceList\n    data={exampleDataWithPreview}\n    keyExtractor={item => item.id}\n    renderItem={({ item, index }) => (\n      <ListItem\n        title={item.name}\n        description={item.description}\n        preview_url={item.preview_url}\n        trailing={() => <LucideIcon name=\"ChevronRight\" size=\"sm\" />}\n        showSeparateur={index !== 0}\n      />\n    )}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
-export const IsLoading = () => "export const IsLoading = () => (\n  <ResourceList\n    data={[] as typeof exampleData}\n    isLoading={true}\n    keyExtractor={item => item.id}\n    renderItem={() => null}\n    renderNoContent={() => null}\n  />\n);";
-export const WithNoContent = () => "export const WithNoContent = () => (\n  <ResourceList\n    data={[] as typeof exampleData}\n    keyExtractor={item => item.id}\n    renderItem={({ item }) => <ListItem title={item.name} description={item.description} />}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
+export const IsLoading = () => "export const IsLoading = () => (\n  <ResourceList\n    data={aucunExemple}\n    isLoading={true}\n    keyExtractor={item => item.id}\n    renderItem={() => null}\n    renderNoContent={() => null}\n  />\n);";
+export const WithNoContent = () => "export const WithNoContent = () => (\n  <ResourceList\n    data={aucunExemple}\n    keyExtractor={item => item.id}\n    renderItem={({ item }) => <ListItem title={item.name} description={item.description} />}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
 export const WithDivider = () => "export const WithDivider = () => (\n  <ResourceList\n    data={exampleData}\n    keyExtractor={item => item.id}\n    renderItem={({ item, index }) => (\n      <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />\n    )}\n    ItemSeparatorComponent={ResourceListDivider}\n    renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n  />\n);";
 export const storySources = {
     Default,

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

@@ -2,6 +2,7 @@ export declare const useStyles: () => {
     list: {
         display: "flex";
         flexDirection: "column";
+        width: "100%";
         gap: string | number;
     };
     entete: {

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

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

package/dist/ui/ResourceList/ResourceList.styles.js

@@ -3,6 +3,7 @@ export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
     list: {
         display: 'flex',
         flexDirection: 'column',
+        width: '100%',
         gap: spacing('1V'),
     },
     entete: {

package/dist/ui/ResourceList/ResourceListDivider.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Divider } from '../Divider';
 export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));

package/dist/ui/Select/Select.d.ts

@@ -1,26 +1,4 @@
-import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
-import { Picker, PickerProps } from '@react-native-picker/picker';
 import React from 'react';
-export type SelectOption = {
-    label: string;
-    value: string;
-};
-export type SelectProps = Partial<Pick<PickerProps, 'onBlur' | 'onFocus'>> & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
-    value: string | null;
-    placeholder?: string;
-    options: SelectOption[];
-    onChange?: (value: string | null) => void;
-};
-export declare const Select: React.ForwardRefExoticComponent<Partial<Pick<PickerProps<import("@react-native-picker/picker/typings/Picker").ItemValue>, "onFocus" | "onBlur">> & {
-    label: string;
-    labelRight?: React.ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    disabled?: boolean;
-} & FormControlCaptionProps & FormControlHintProps & {
-    value: string | null;
-    placeholder?: string;
-    options: SelectOption[];
-    onChange?: (value: string | null) => void;
-} & React.RefAttributes<Picker<string | number | object>>>;
+import type { SelectProps, SelectRef } from './Select.types';
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectRef>>;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC,GACxE,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,MAAM;;;;;;;WANR,MAAM,GAAG,IAAI;kBACN,MAAM;aACX,YAAY,EAAE;eACZ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;0DAkE3C,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM7D,eAAO,MAAM,MAAM,+EAoDjB,CAAC"}