@alveole/components 1.0.0 → 1.1.0

package/dist/ui/DurationInput/DurationInput.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Grid } from '../Grid';
+import { DurationInput } from './DurationInput';
+const useStyles = () => ({});
+export default {
+    title: 'DurationInput',
+    tags: ['ui'],
+    experimental: false,
+    shortDescription: "Saisie d'une durée au format HH:MM (ex. 06:15 pour 6 heures 15 minutes).",
+    description: `Saisie d'une **durée** au format HH:MM (ex. \`06:15\` pour 6 heures 15 minutes).
+
+À ne pas confondre avec **TimeInput**, qui représente une **heure d'horloge** (ex. \`09:30\` du matin).
+
+| | DurationInput |
+|---|---|---|
+| Sémantique | Durée écoulée |
+| Exemple | \`35:00\` (35h00 de travail) |
+| Heures valides | 00–99 |
+| HTML web | \`<input type="text">\` |
+
+> Il n'existe pas de \`<input type="duration">\` en HTML.
+> Voir [whatwg/html#5488](https://github.com/whatwg/html/issues/5488).`,
+    component: DurationInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "06:15" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "01:30", hint: "Temps pass\u00E9 sur le terrain" }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Erreur", value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Succ\u00E8s", value: "06:15", success: "Enregistr\u00E9" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "D\u00E9sactiv\u00E9", value: "06:15", disabled: true }) })] }) }));
+export * as Sources from './DurationInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkiB,CAAC;AAEvjB,eAAO,MAAM,MAAM,cAA4lB,CAAC;AAEhnB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DurationInput/DurationInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"06:15\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Durée\" value=\"01:30\" hint=\"Temps passé sur le terrain\" />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Erreur\" value=\"25:70\" error=\"Heure invalide (minutes 00–59)\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Succès\" value=\"06:15\" success=\"Enregistré\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <DurationInput label=\"Désactivé\" value=\"06:15\" disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

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

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

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

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

package/dist/ui/DurationInput/index.js

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

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

@@ -11,18 +11,18 @@ declare const _default: {
             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;
@@ -35,13 +35,13 @@ declare const _default: {
             justifyContent: "center";
             color: string;
             backgroundColor: string;
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-            padding: import("@alveole/theme").Spacing;
+            borderRadius: import("@alveole/theme").Radius;
+            padding: string | number;
         };
         messageEtDescription: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             width: "100%";
             justifyContent: "center";
         };
@@ -67,7 +67,7 @@ declare const _default: {
             width: "100%" | undefined;
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
     };
 };

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;
@@ -28,13 +28,13 @@ export declare const useStyles: () => {
         justifyContent: "center";
         color: string;
         backgroundColor: string;
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        padding: import("@alveole/theme").Spacing;
+        borderRadius: import("@alveole/theme").Radius;
+        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";
     };
 };