@alveole/components 1.6.5 → 1.7.0

package/dist/generated/version.d.ts

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

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "1.6.5";
+export const ALVEOLE_COMPONENTS_VERSION = "1.7.0";

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

@@ -8,7 +8,9 @@ export type ListItemProps = BoxProps & {
     description?: string;
     IconProps?: Pick<IconProps, 'color' | 'name'>;
     AvatarProps?: Pick<AvatarProps, 'fallbackText' | 'src'>;
-    RadioProps?: Pick<RadioInputProps, 'checked' | 'onChange' | 'value'>;
+    RadioProps?: Pick<RadioInputProps, 'checked' | 'onChange' | 'value'> & {
+        multiple?: boolean;
+    };
     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;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,sBA2F5C,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;AAEhD,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,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC9F,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,sBA4G5C,CAAC"}

package/dist/ui/ListItem/ListItem.js

@@ -2,6 +2,7 @@ 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 { CheckboxContainer, CheckboxIndicator } from '../Checkbox';
 import { LucideIcon } from '../LucideIcon';
 import { RadioGroup } from '../RadioGroup';
 import { Spinner } from '../Spinner';
@@ -14,7 +15,9 @@ export const ListItem = (props) => {
         onPress?.(event);
     }, [RadioProps, onPress]);
     const styles = useStyles();
-    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', onPress: event => {
+    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 && RadioProps.multiple !== true && (_jsx(Box, { mt: 'auto', mb: 'auto', onPress: event => {
                                     event.stopPropagation();
-                                }, 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] }));
+                                }, children: _jsx(RadioGroup.Input, { id: `${title}--radio`, size: "md", ...RadioProps }) })), RadioProps && RadioProps.multiple === true && (_jsx(Box, { mt: 'auto', mb: 'auto', onPress: event => {
+                                    event.stopPropagation();
+                                }, children: _jsx(CheckboxContainer, { id: `${title}--checkbox`, checked: RadioProps.checked, onCheckedChange: () => RadioProps.onChange?.(RadioProps.value), children: _jsx(CheckboxIndicator, {}) }) })), 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

@@ -110,6 +110,7 @@ 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 ItemRadioMultiple: () => 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;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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,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

@@ -49,6 +49,15 @@ export const ItemRadio = () => {
             onChange: v => setValue(v),
         } }));
 };
+export const ItemRadioMultiple = () => {
+    const [value, setValue] = useState();
+    return (_jsx(ListItem, { title: "Titre", description: "Description", RadioProps: {
+            value: 'tutu',
+            checked: value === 'tutu',
+            onChange: v => setValue(v),
+            multiple: true,
+        } }));
+};
 export const ItemRadioWithIcon = () => {
     const [value, setValue] = useState();
     return (_jsx(ListItem, { title: "Titre", description: "Description", IconProps: { name: 'Settings' }, RadioProps: {

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

@@ -6,6 +6,7 @@ export declare const WithIcon: () => string;
 export declare const WithAvatar: () => string;
 export declare const WithPreviewImage: () => string;
 export declare const ItemRadio: () => string;
+export declare const ItemRadioMultiple: () => string;
 export declare const ItemRadioWithIcon: () => string;
 export declare const withoutHover: () => string;
 export declare const storySources: {
@@ -17,6 +18,7 @@ export declare const storySources: {
     readonly WithAvatar: () => string;
     readonly WithPreviewImage: () => string;
     readonly ItemRadio: () => string;
+    readonly ItemRadioMultiple: () => string;
     readonly ItemRadioWithIcon: () => string;
     readonly withoutHover: () => string;
 };

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,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"}
+{"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,cAAsW,CAAC;AAErY,eAAO,MAAM,iBAAiB,cAAqX,CAAC;AAEpZ,eAAO,MAAM,YAAY,cAAsG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,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

@@ -8,6 +8,7 @@ export const WithIcon = () => "export const WithIcon = () => (\n  <ListItem\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 ItemRadioMultiple = () => "export const ItemRadioMultiple = () => {\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        multiple: true,\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 = {
@@ -19,6 +20,7 @@ export const storySources = {
     WithAvatar,
     WithPreviewImage,
     ItemRadio,
+    ItemRadioMultiple,
     ItemRadioWithIcon,
     withoutHover,
 };

package/package.json

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