@alveole/components 1.0.1 → 1.1.0

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

@@ -4,18 +4,18 @@ export declare const useStyles: () => {
         flexDirection: "column";
         alignItems: "center";
         justifyContent: "center";
-        gap: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         textAlign: "center";
         height: "100%" | undefined;
         width: "100%";
     };
     contenu: {
         display: "flex";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "center";
         textAlign: "center";
         flex: number | undefined;
@@ -29,12 +29,12 @@ export declare const useStyles: () => {
         color: string;
         backgroundColor: string;
         borderRadius: import("@alveole/theme").Radius;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     messageEtDescription: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
         justifyContent: "center";
     };
@@ -60,7 +60,7 @@ export declare const useStyles: () => {
         width: "100%" | undefined;
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
 };
 //# sourceMappingURL=EmptyState.styles.d.ts.map

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

@@ -12,7 +12,7 @@ declare const _default: {
         formControl: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             width: "100%";
         };
         labelContainer: {
@@ -53,7 +53,7 @@ declare const _default: {
         inputInner: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             padding: number;
             borderRadius: number;
             borderWidth: number;
@@ -70,10 +70,10 @@ declare const _default: {
             color: string;
             fontFamily: string;
             fontSize: 14;
-            marginTop: import("@alveole/theme").Spacing;
-            marginBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            marginTop: string | number;
+            marginBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             minHeight: number | undefined;
             flex: number;
         };
@@ -132,16 +132,16 @@ declare const _default: {
             backgroundColor: "#FFFFFF";
             borderTopLeftRadius: number;
             borderTopRightRadius: number;
-            padding: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         modalHeader: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
             alignItems: "center";
-            marginBottom: import("@alveole/theme").Spacing;
+            marginBottom: string | number;
         };
         modalHeaderLeft: {
             display: "flex";
@@ -154,7 +154,7 @@ declare const _default: {
             alignItems: "center";
         };
         modalFooter: {
-            marginTop: import("@alveole/theme").Spacing;
+            marginTop: string | number;
         };
         modalInputContainer: {
             borderRadius: number;
@@ -165,10 +165,10 @@ declare const _default: {
         };
         modalInput: {
             color: string;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
             minHeight: number;
             flex: number;
             fontSize: 14;
@@ -180,9 +180,9 @@ declare const _default: {
         caption: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             alignItems: "flex-start";
-            marginTop: import("@alveole/theme").Spacing;
+            marginTop: string | number;
             width: "100%";
         };
         captionIcon: {

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

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     formControl: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
     };
     labelContainer: {
@@ -43,7 +43,7 @@ export declare const useStyles: () => {
     inputInner: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         padding: number;
         borderRadius: number;
         borderWidth: number;
@@ -60,10 +60,10 @@ export declare const useStyles: () => {
         color: string;
         fontFamily: string;
         fontSize: 14;
-        marginTop: import("@alveole/theme").Spacing;
-        marginBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        marginTop: string | number;
+        marginBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         minHeight: number | undefined;
         flex: number;
     };
@@ -122,16 +122,16 @@ export declare const useStyles: () => {
         backgroundColor: "#FFFFFF";
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
-        padding: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        padding: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     modalHeader: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        marginBottom: import("@alveole/theme").Spacing;
+        marginBottom: string | number;
     };
     modalHeaderLeft: {
         display: "flex";
@@ -144,7 +144,7 @@ export declare const useStyles: () => {
         alignItems: "center";
     };
     modalFooter: {
-        marginTop: import("@alveole/theme").Spacing;
+        marginTop: string | number;
     };
     modalInputContainer: {
         borderRadius: number;
@@ -155,10 +155,10 @@ export declare const useStyles: () => {
     };
     modalInput: {
         color: string;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         minHeight: number;
         flex: number;
         fontSize: 14;
@@ -170,9 +170,9 @@ export declare const useStyles: () => {
     caption: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "flex-start";
-        marginTop: import("@alveole/theme").Spacing;
+        marginTop: string | number;
         width: "100%";
     };
     captionIcon: {

package/dist/ui/FormControl/FormControlFileInput.styles.d.ts

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     fileInputContainer: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         alignItems: "center";
     };
     fileInputButton: {
@@ -13,10 +13,10 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         justifyContent: "center";
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     fileInputButtonHovered: {
         backgroundColor: string;

package/dist/ui/FormControl/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,IAAI,oBAAoB,EACjC,cAAc,IAAI,yBAAyB,EAC5C,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS;eART,OAAO;qBACD,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;gBAClB,OAAO;uBACA,MAAM;oBACT,MAAM,IAAI;8CAsN1B,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,IAAI,oBAAoB,EACjC,cAAc,IAAI,yBAAyB,EAG5C,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,SAAS;eART,OAAO;qBACD,KAAK,CAAC,SAAS;mBACjB,KAAK,CAAC,SAAS;gBAClB,OAAO;uBACA,MAAM;oBACT,MAAM,IAAI;8CA0N1B,CAAC"}

package/dist/ui/Grid/Grid.d.ts

@@ -0,0 +1,17 @@
+import { BoxAdvancedStyle, BoxProps } from '@alveole/components';
+import React from 'react';
+export declare const GridGapContext: React.Context<number>;
+type GridProps = Pick<BoxProps, 'children' | 'gap'> & BoxAdvancedStyle;
+type GridColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridColumnProps = Pick<BoxProps, 'children' | 'style'> & {
+    size: GridColumnSize | {
+        mobile: GridColumnSize;
+        desktop: GridColumnSize;
+        tablet?: GridColumnSize;
+    };
+} & BoxAdvancedStyle;
+export declare const Grid: ((props: GridProps) => React.JSX.Element) & {
+    Column: (props: GridColumnProps) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,gBAAgB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,cAAc,uBAAiC,CAAC;AAE7D,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,gBAAgB,CAAC;AACvE,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACnE,IAAI,EAAE,cAAc,GAAG;QAAE,MAAM,EAAE,cAAc,CAAC;QAAC,OAAO,EAAE,cAAc,CAAC;QAAC,MAAM,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;CACrG,GAAG,gBAAgB,CAAC;AAgErB,eAAO,MAAM,IAAI,WA9Da,SAAS;oBA4BZ,eAAe;CAoCxC,CAAC"}

package/dist/ui/Grid/Grid.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@alveole/components';
+import { isSpacingKey, Spacings, useTheme } from '@alveole/theme';
+import React from 'react';
+import { useStyles } from './Grid.styles';
+export const GridGapContext = React.createContext(0);
+const GridContainer = (props) => {
+    const { children, gap = 0, ...advancedStyles } = props;
+    const styles = useStyles();
+    const spacing = isSpacingKey(gap) ? Spacings[gap] : gap;
+    return (_jsx(GridGapContext.Provider, { value: spacing, children: _jsx(Box, { tag: "grid", style: styles.grid, ...advancedStyles, children: _jsx(Box, { tag: "grid-container", style: [
+                    styles.container,
+                    {
+                        marginLeft: -spacing / 2,
+                        marginRight: -spacing / 2,
+                        marginBottom: -spacing,
+                    },
+                ], children: children }) }) }));
+};
+const GridColumn = (props) => {
+    const { children, style, size, ...advancedStyles } = props;
+    const { isVariant } = useTheme();
+    const gap = React.useContext(GridGapContext);
+    const desktopSize = typeof size === 'number' ? size : size.desktop;
+    const mobileSize = typeof size === 'number' ? size : size.mobile;
+    const tabletSize = typeof size === 'number' ? size : (size.tablet ?? size.desktop);
+    const widthPercent = `${(isVariant('mobile') ? mobileSize / 12 : isVariant('tablet') ? tabletSize / 12 : desktopSize / 12) * 100}%`;
+    return (_jsx(Box, { tag: "grid-column", style: [
+            {
+                width: widthPercent,
+                paddingLeft: gap / 2,
+                paddingRight: gap / 2,
+                paddingBottom: gap,
+            },
+            style,
+        ], ...advancedStyles, children: children }));
+};
+export const Grid = Object.assign(GridContainer, {
+    Column: GridColumn,
+});

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

@@ -0,0 +1,24 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    shortDescription: string;
+    component: ((props: Pick<import("../..").BoxProps, "children" | "gap"> & import("../..").BoxAdvancedStyle) => import("react").JSX.Element) & {
+        Column: (props: import("./Grid").GridColumnProps) => import("react").JSX.Element;
+    };
+    styleFn: () => {
+        grid: {
+            flexDirection: "column";
+        };
+        container: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+        };
+    };
+};
+export default _default;
+export declare const ExampleUsage: () => import("react").JSX.Element;
+export declare const ExampleUsageWithVariant: () => import("react").JSX.Element;
+export * as Sources from './Grid.stories.sources';
+//# sourceMappingURL=Grid.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAYlB,eAAO,MAAM,YAAY,mCAAmE,CAAC;AAE7F,eAAO,MAAM,uBAAuB,mCAA0E,CAAC;AAE/G,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Grid/Grid.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Highlight } from '../../core';
+import { Grid } from './Grid';
+import { useStyles } from './Grid.styles';
+export default {
+    title: 'Grid',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Grille basique sur 12 colonnes (mobile et sur web). Composant de type Box à utiliser avec `<Grid.Column>`.',
+    shortDescription: 'Grille basique sur 12 colonnes (mobile et web). À utiliser avec Grid.Column.',
+    component: Grid,
+    styleFn: useStyles,
+};
+const codeExample = `<Grid gap={8}>
+  <Grid.Column size={6}>{/* ... */}</Grid.Column>
+  <Grid.Column size={6}>{/* ... */}</Grid.Column>
+</Grid>`;
+const codeExampleVariant = `<Grid gap={8}>
+  <Grid.Column size={{ mobile: 12, desktop: 6 }}>{/* ... */}</Grid.Column>
+  <Grid.Column size={{ mobile: 12, desktop: 6 }}>{/* ... */}</Grid.Column>
+</Grid>`;
+export const ExampleUsage = () => _jsx(Highlight, { language: "typescript", children: codeExample });
+export const ExampleUsageWithVariant = () => _jsx(Highlight, { language: "typescript", children: codeExampleVariant });
+export * as Sources from './Grid.stories.sources';

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

@@ -0,0 +1,8 @@
+export declare const ExampleUsage: () => string;
+export declare const ExampleUsageWithVariant: () => string;
+export declare const storySources: {
+    readonly ExampleUsage: () => string;
+    readonly ExampleUsageWithVariant: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Grid.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAA0G,CAAC;AAEpI,eAAO,MAAM,uBAAuB,cAA4H,CAAC;AAEjK,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Grid/Grid.stories.tsx
+export const ExampleUsage = () => "export const ExampleUsage = () => <Highlight language=\"typescript\">{codeExample}</Highlight>;";
+export const ExampleUsageWithVariant = () => "export const ExampleUsageWithVariant = () => <Highlight language=\"typescript\">{codeExampleVariant}</Highlight>;";
+export const storySources = {
+    ExampleUsage,
+    ExampleUsageWithVariant,
+};

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

@@ -0,0 +1,10 @@
+export declare const useStyles: () => {
+    grid: {
+        flexDirection: "column";
+    };
+    container: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+    };
+};
+//# sourceMappingURL=Grid.styles.d.ts.map

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

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

package/dist/ui/Grid/Grid.styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    grid: {
+        flexDirection: 'column',
+    },
+    container: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+}));

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

@@ -0,0 +1,2 @@
+export * from './Grid';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/ui/Grid/index.js

@@ -0,0 +1 @@
+export * from './Grid';

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

@@ -48,17 +48,17 @@ declare const _default: {
             flexDirection: "row";
             alignItems: "center";
             justifyContent: "space-between";
-            gap: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            gap: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         identity: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         titleText: {
             color: string;

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

@@ -40,17 +40,17 @@ export declare const useStyles: () => {
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";
-        gap: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     identity: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     titleText: {
         color: string;

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

@@ -7,7 +7,7 @@ declare const _default: {
     styleFn: () => {
         inputHeading: {
             display: "flex";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             flexDirection: "column";
         };
     };

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

@@ -1,7 +1,7 @@
 export declare const useStyles: () => {
     inputHeading: {
         display: "flex";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         flexDirection: "column";
     };
 };

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

@@ -9,10 +9,10 @@ declare const _default: {
         item: {
             display: "flex";
             flexDirection: "row";
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             alignSelf: "stretch";
         };
         itemHover: {
@@ -23,17 +23,17 @@ declare const _default: {
         container: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         detail: {
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
             flex: number;
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
             alignSelf: "stretch";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             position: "relative";
         };
         separateur: {
@@ -88,7 +88,7 @@ declare const _default: {
             alignItems: "center";
             justifyContent: "center";
             overflow: "hidden";
-            borderRadius: import("@alveole/theme").Spacing;
+            borderRadius: string | number;
         };
         preview: {
             width: number;
@@ -104,6 +104,7 @@ 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;
+/** 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';
 //# sourceMappingURL=ListItem.stories.d.ts.map

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,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,YAAY,mCAKxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"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,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"}

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonIcon } from '../Button';
 import { ListItem } from './ListItem';
 import { useStyles } from './ListItem.styles';
@@ -36,5 +35,6 @@ 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 withoutHover = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(Typography, { children: "Sans props openPress, l\u2019effet de Hover n\u2019apparait pas" }), _jsx(ListItem, { title: "Titre", description: "Description" })] }));
+/** 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

@@ -17,4 +17,5 @@ export declare const storySources: {
     readonly withoutHover: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=ListItem.stories.sources.d.ts.map

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,cAAyQ,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,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,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,CAEtE,CAAC"}

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

@@ -7,7 +7,7 @@ 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 withoutHover = () => "export const withoutHover = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <Typography>Sans props openPress, l’effet de Hover n’apparait pas</Typography>\n    <ListItem title=\"Titre\" description=\"Description\" />\n  </Box>\n);";
+export const withoutHover = () => "export const withoutHover = () => <ListItem title=\"Titre\" description=\"Description\" />;";
 export const storySources = {
     Default,
     WithTrailing,
@@ -18,3 +18,6 @@ export const storySources = {
     WithPreviewImage,
     withoutHover,
 };
+export const storyDescriptions = {
+    withoutHover: "Sans prop `onPress`, l’effet de hover n’apparaît pas.",
+};