@alveole/components 1.9.0 → 2.0.0-alpha

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

@@ -1,22 +1,17 @@
 export declare const useStyles: () => {
-    item: {
+    defaultIcon: {
+        color: string;
+    };
+    previewContainer: {
         display: "flex";
-        flexDirection: "row";
-        paddingLeft: string | number;
-        paddingRight: string | number;
         alignItems: "center";
-        gap: string | number;
-        alignSelf: "stretch";
-    };
-    itemHover: {
-        backgroundColor: string;
-        borderRadius: import("@alveole/theme").Radius;
-        cursor: "pointer";
+        justifyContent: "center";
+        overflow: "hidden";
+        borderRadius: string | number;
     };
-    container: {
-        display: "flex";
-        flexDirection: "row";
-        gap: string | number;
+    preview: {
+        width: number;
+        height: number;
     };
     detail: {
         paddingTop: string | number;
@@ -60,32 +55,28 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
         color: string;
     };
-    additional: {};
-    trailing: {
-        display: "flex";
-        justifyContent: "center";
-        alignSelf: "stretch";
-        color: string;
+    container: {
+        width: "100%";
     };
-    loading: {
+    item: {
         display: "flex";
+        flexDirection: "row";
+        paddingLeft: string | number;
+        paddingRight: string | number;
         alignItems: "center";
-        justifyContent: "center";
-        color: string;
+        gap: string | number;
+        alignSelf: "stretch";
     };
-    defaultIcon: {
-        color: string;
+    itemHover: {
+        backgroundColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        cursor: "pointer";
     };
-    previewContainer: {
+    loading: {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        overflow: "hidden";
-        borderRadius: string | number;
-    };
-    preview: {
-        width: number;
-        height: number;
+        color: string;
     };
 };
 //# sourceMappingURL=ListItem.styles.d.ts.map

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

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

package/dist/ui/ListItem/ListItem.styles.js

@@ -1,5 +1,11 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
+// Le regroupement suit le decoupage du composant : la ligne pressable, le bloc de detail, et
+// le visuel qui precede le titre. Trois fonctions plutot qu'un litteral de soixante-dix lignes.
+/** La ligne elle-meme : sa boite, et sa teinte au survol quand elle est actionnable. */
+const ligne = ({ color, radius, spacing }) => ({
+    container: {
+        width: '100%',
+    },
     item: {
         display: 'flex',
         flexDirection: 'row',
@@ -14,11 +20,15 @@ export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
         borderRadius: radius('md'),
         cursor: 'pointer',
     },
-    container: {
+    loading: {
         display: 'flex',
-        flexDirection: 'row',
-        gap: spacing('3V'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: color.primary,
     },
+});
+/** Le bloc de texte, son filet de separation et la pile titre + description. */
+const detail = ({ color, text, spacing }) => ({
     detail: {
         paddingTop: spacing('1W'),
         paddingBottom: spacing('1W'),
@@ -30,6 +40,8 @@ export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
         gap: spacing('1W'),
         position: 'relative',
     },
+    // Pose en absolu sur le bord haut du detail, et non entre deux lignes : c'est ce qui lui
+    // evite de compter dans la hauteur de la ligne.
     separateur: {
         left: 0,
         top: 0,
@@ -53,19 +65,9 @@ export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
         color: color.light.text['mention-grey'],
         ...text['Corps de texte'].XS.Regular,
     },
-    additional: {},
-    trailing: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignSelf: 'stretch',
-        color: color.light.text['mention-grey'],
-    },
-    loading: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: color.primary,
-    },
+});
+/** Ce qui precede le titre : la vignette, ou l'icone par defaut. */
+const visuel = ({ color, spacing }) => ({
     defaultIcon: {
         color: color.light.text['mention-grey'],
     },
@@ -80,4 +82,5 @@ export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
         width: 40,
         height: 40,
     },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...ligne(theme), ...detail(theme), ...visuel(theme) }));

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BoxProps } from '../../core/Box';
+import { AvatarProps } from '../Avatar';
+import { IconProps } from '../LucideIcon';
+import { RadioInputProps } from '../RadioGroup';
+/** Le choix que porte la ligne : un bouton radio, ou une case a cocher si `multiple`. */
+export type ChoixDeLaLigne = Pick<RadioInputProps, 'checked' | 'onChange' | 'value'> & {
+    multiple?: boolean;
+};
+export type ListItemProps = BoxProps & {
+    title: string;
+    description?: string;
+    IconProps?: Pick<IconProps, 'color' | 'name'>;
+    AvatarProps?: Pick<AvatarProps, 'fallbackText' | 'src'>;
+    RadioProps?: ChoixDeLaLigne;
+    preview_url?: string;
+    trailing?: () => React.ReactNode;
+    loading?: boolean;
+    showSeparateur?: boolean;
+};
+/**
+ * Ce qui precede le titre : soit une vignette, soit la rangee choix / icone / avatar. Les deux
+ * sont exclusifs, et `ListItemVisuel` est seul a trancher entre eux.
+ */
+export type VisuelDeLaLigne = Pick<ListItemProps, 'title' | 'preview_url' | 'IconProps' | 'AvatarProps'> & {
+    RadioProps?: ChoixDeLaLigne;
+};
+//# sourceMappingURL=ListItem.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,yFAAyF;AACzF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9G,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,cAAc,CAAC;IAC5B,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;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,aAAa,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG;IACzG,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC"}

package/dist/ui/ListItem/ListItem.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { ChoixDeLaLigne } from './ListItem.types';
+type ListItemChoixProps = {
+    title: string;
+    choix: ChoixDeLaLigne;
+};
+/**
+ * Le controle de selection de la ligne, radio ou case selon `multiple`. Les deux partagent la
+ * meme coque : elle arrete le clic, sans quoi cocher la case declencherait en plus l'action de
+ * la ligne et `onChange` serait appele deux fois. Le bouton radio, lui, n'emet deja pas de clic
+ * remontant - la coque commune lui est inoffensive, et evite d'ecrire la regle deux fois.
+ */
+export declare const ListItemChoix: ({ title, choix }: ListItemChoixProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ListItemChoix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemChoix.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItemChoix.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,kBAAkB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,kBAAkB,kBAAkB,gCAejE,CAAC"}

package/dist/ui/ListItem/ListItemChoix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
+import { RadioGroup } from '../RadioGroup';
+/**
+ * Le controle de selection de la ligne, radio ou case selon `multiple`. Les deux partagent la
+ * meme coque : elle arrete le clic, sans quoi cocher la case declencherait en plus l'action de
+ * la ligne et `onChange` serait appele deux fois. Le bouton radio, lui, n'emet deja pas de clic
+ * remontant - la coque commune lui est inoffensive, et evite d'ecrire la regle deux fois.
+ */
+export const ListItemChoix = ({ title, choix }) => (_jsx(Box, { mt: 'auto', mb: 'auto', onPress: event => event.stopPropagation(), children: choix.multiple === true ? (_jsx(CheckboxContainer, { id: `${title}--checkbox`, "aria-label": title, checked: choix.checked, onCheckedChange: () => choix.onChange?.(choix.value), children: _jsx(CheckboxIndicator, {}) })) : (_jsx(RadioGroup.Input, { id: `${title}--radio`, label: title, size: "md", ...choix })) }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { VisuelDeLaLigne } from './ListItem.types';
+/**
+ * Ce qui precede le titre. La vignette est exclusive du reste : une ligne qui montre un apercu
+ * ne montre ni choix, ni icone, ni avatar, meme si les props sont fournies.
+ */
+export declare const ListItemVisuel: ({ title, preview_url, RadioProps, IconProps, AvatarProps }: VisuelDeLaLigne) => React.JSX.Element;
+//# sourceMappingURL=ListItemVisuel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemVisuel.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItemVisuel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAUnD;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,4DAA4D,eAAe,sBAmCzG,CAAC"}

package/dist/ui/ListItem/ListItemVisuel.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
+import { Avatar } from '../Avatar';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './ListItem.styles';
+import { ListItemChoix } from './ListItemChoix';
+/** Centre verticalement ce qu'on lui confie, sans quoi chaque appelant reecrit les deux marges. */
+const AuMilieu = ({ children }) => (_jsx(Box, { mt: 'auto', mb: 'auto', children: children }));
+/**
+ * Ce qui precede le titre. La vignette est exclusive du reste : une ligne qui montre un apercu
+ * ne montre ni choix, ni icone, ni avatar, meme si les props sont fournies.
+ */
+export const ListItemVisuel = ({ title, preview_url, RadioProps, IconProps, AvatarProps }) => {
+    const styles = useStyles();
+    if (preview_url) {
+        return (_jsx(Box, { style: styles.previewContainer, children: _jsx(Image, { alt: "", source: { uri: preview_url }, width: styles.preview.width, height: styles.preview.height, contentFit: "contain" }) }));
+    }
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: '3V', children: [RadioProps && _jsx(ListItemChoix, { title: title, choix: RadioProps }), IconProps && (_jsx(AuMilieu, { children: _jsx(LucideIcon, { size: "sm", color: styles.defaultIcon.color, ...IconProps }) })), AvatarProps && (_jsx(AuMilieu, { children: _jsx(Avatar, { size: "xs", ...AvatarProps }) }))] }));
+};

package/dist/ui/LucideIcon/LucideIcon.d.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 import { LucideIconName, LucideIconProps } from './LucideIcon.props';
 export declare const strokeWidth = 1.5;
 export type IconProps = LucideIconProps;
+export declare const tailleDesIcones: Record<IconProps['size'], number>;
 export declare const resolveShareIconName: (platform: typeof Platform.OS) => LucideIconName;
 export declare const LucideIcon: (props: IconProps) => import("react").JSX.Element;
 //# sourceMappingURL=LucideIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/LucideIcon/LucideIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAwB,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAoB,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEvF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;AAKxC,eAAO,MAAM,oBAAoB,GAAI,UAAU,OAAO,QAAQ,CAAC,EAAE,KAAG,cAWnE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,SAAS,gCA0C1C,CAAC"}
+{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/LucideIcon/LucideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAwB,MAAM,cAAc,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrE,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;AAExC,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAM7D,CAAC;AAWF,eAAO,MAAM,oBAAoB,GAAI,UAAU,OAAO,QAAQ,CAAC,EAAE,KAAG,cAWnE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,SAAS,gCAyB1C,CAAC"}

package/dist/ui/LucideIcon/LucideIcon.js

@@ -1,10 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as LabIcons from '@lucide/lab';
-import * as LucideIcons from 'lucide-react-native';
-import { Icon as BaseIcon } from 'lucide-react-native';
 import { Platform } from 'react-native';
-import { isLucideIconName } from './LucideIcon.props';
+import { versStyleNatif } from '../../core/styleNatif/versStyleNatif';
+import { iconesLucide as catalogueLucide } from './catalogueLucide';
+import * as LabIcons from './vendor/lab';
+import { Icon as BaseIcon } from './vendor/lucide';
 export const strokeWidth = 1.5;
+export const tailleDesIcones = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 64,
+};
+// Les deux paquets vendor exposent leurs icones comme exports nommes : c'est un objet de module,
+// pas une table indexable par un nom calcule. Les aplatir une fois au chargement donne la table
+// que le rendu cherchait, sans forcer le typage et sans la reconstruire a chaque icone rendue.
+const iconesLucide = Object.fromEntries(Object.entries(catalogueLucide));
+const iconesLab = Object.fromEntries(Object.entries(LabIcons));
 // Chaque plateforme a une convention visuelle différente pour le partage :
 // iOS utilise la flèche vers le haut (Share), Android le symbole à trois points (Share2),
 // et le web la flèche vers l'avant (Forward).
@@ -26,19 +38,10 @@ export const LucideIcon = (props) => {
     if (name === 'Share') {
         name = resolveShareIconName(_platformOverride ?? Platform.OS);
     }
-    const iconMap = LucideIcons;
-    const sizeMap = {
-        xs: 12,
-        sm: 16,
-        md: 24,
-        lg: 32,
-        xl: 64,
-    };
-    const defaultStyle = { stroke: color ?? 'currentColor' };
-    const mergedStyle = [defaultStyle, style];
-    if (isLucideIconName(name)) {
-        const IconComponent = iconMap[name];
-        return (_jsx(IconComponent, { style: mergedStyle, strokeWidth: strokeWidth, color: color, size: sizeMap[size] }));
+    const mergedStyle = versStyleNatif({ stroke: color ?? 'currentColor', ...style });
+    const IconComponent = iconesLucide[name];
+    if (IconComponent) {
+        return _jsx(IconComponent, { style: mergedStyle, strokeWidth: strokeWidth, color: color, size: tailleDesIcones[size] });
     }
-    return (_jsx(BaseIcon, { iconNode: LabIcons?.[name], style: mergedStyle, strokeWidth: strokeWidth, color: color, size: sizeMap[size] }));
+    return (_jsx(BaseIcon, { iconNode: iconesLab[name], style: mergedStyle, strokeWidth: strokeWidth, color: color, size: tailleDesIcones[size] }));
 };