@alveole/components 0.21.0 → 0.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/ui/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  2. package/dist/ui/Breadcrumbs/Breadcrumbs.js +3 -5
  3. package/dist/ui/Button/Button.stories.d.ts +3 -0
  4. package/dist/ui/Button/Button.stories.d.ts.map +1 -1
  5. package/dist/ui/Button/Button.styles.d.ts +3 -0
  6. package/dist/ui/Button/Button.styles.d.ts.map +1 -1
  7. package/dist/ui/Button/Button.styles.js +3 -0
  8. package/dist/ui/EmptyState/EmptyState.d.ts.map +1 -1
  9. package/dist/ui/EmptyState/EmptyState.js +1 -1
  10. package/dist/ui/EmptyState/EmptyState.stories.d.ts +4 -4
  11. package/dist/ui/EmptyState/EmptyState.styles.d.ts +4 -4
  12. package/dist/ui/EmptyState/EmptyState.styles.js +7 -7
  13. package/package.json +1 -1
package/dist/ui/Breadcrumbs/Breadcrumbs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAQF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACrE,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAoDlD,CAAC"}
1
+ {"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/ui/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACrE,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA6ClD,CAAC"}
package/dist/ui/Breadcrumbs/Breadcrumbs.js CHANGED
@@ -3,9 +3,7 @@ import { usePathname } from 'expo-router';
3
3
  import { A, Box, Typography } from '../../core';
4
4
  import { useStyles } from './Breadcrumbs.styles';
5
5
  function humanizeSegment(segment) {
6
- return segment
7
- .replace(/[-_]/g, ' ')
8
- .replace(/^\w/, (c) => c.toUpperCase());
6
+ return segment.replace(/[-_]/g, ' ').replace(/^\w/, c => c.toUpperCase());
9
7
  }
10
8
  /**
11
9
  * Fil d'Ariane construit à partir de la navigation Expo Router.
@@ -15,7 +13,7 @@ function humanizeSegment(segment) {
15
13
  * Accueil > Admin > Missions > Détail
16
14
  */
17
15
  export const Breadcrumbs = (props) => {
18
- const { rootLabel = 'Accueil', segmentsToSkip, getLabel = (segment) => humanizeSegment(segment), } = props;
16
+ const { rootLabel = 'Accueil', segmentsToSkip, getLabel = segment => humanizeSegment(segment) } = props;
19
17
  const pathname = usePathname();
20
18
  const styles = useStyles();
21
19
  const segments = pathname.split('/').filter(Boolean);
@@ -38,5 +36,5 @@ export const Breadcrumbs = (props) => {
38
36
  isCurrent: index === segments.length - 1,
39
37
  })),
40
38
  ];
41
- return (_jsx(Box, { style: styles.container, children: items.map((item, index) => (_jsxs(Box, { style: { flexDirection: 'row', alignItems: 'center' }, children: [index > 0 && (_jsx(Typography, { style: styles.separator, children: " > " })), item.isCurrent ? (_jsx(Typography, { style: styles.current, children: item.label })) : (_jsx(A, { href: item.href, style: styles.link, hoverStyle: styles.linkHover, children: item.label }))] }, `${item.href}-${index}`))) }));
39
+ return (_jsx(Box, { style: styles.container, children: items.map((item, index) => (_jsxs(Box, { style: { flexDirection: 'row', alignItems: 'center' }, children: [index > 0 && _jsx(Typography, { style: styles.separator, children: " > " }), item.isCurrent ? (_jsx(Typography, { style: styles.current, children: item.label })) : (_jsx(A, { href: item.href, style: styles.link, hoverStyle: styles.linkHover, children: item.label }))] }, `${item.href}-${index}`))) }));
42
40
  };
package/dist/ui/Button/Button.stories.d.ts CHANGED
@@ -31,6 +31,9 @@ declare const _default: {
31
31
  gap: import("@alveole/theme").Spacing;
32
32
  marginTop: string;
33
33
  marginBottom: string;
34
+ transitionProperty: "all";
35
+ transitionDuration: "150ms";
36
+ transitionTimingFunction: "ease";
34
37
  };
35
38
  buttonLoader: {
36
39
  position: "absolute";
package/dist/ui/Button/Button.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
1
+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
package/dist/ui/Button/Button.styles.d.ts CHANGED
@@ -11,6 +11,9 @@ export declare const useStyles: () => {
11
11
  gap: import("@alveole/theme").Spacing;
12
12
  marginTop: string;
13
13
  marginBottom: string;
14
+ transitionProperty: "all";
15
+ transitionDuration: "150ms";
16
+ transitionTimingFunction: "ease";
14
17
  };
15
18
  buttonLoader: {
16
19
  position: "absolute";
package/dist/ui/Button/Button.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2MnB,CAAC"}
1
+ {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MnB,CAAC"}
package/dist/ui/Button/Button.styles.js CHANGED
@@ -12,6 +12,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
12
12
  gap: spacing('050'),
13
13
  marginTop: 'auto',
14
14
  marginBottom: 'auto',
15
+ transitionProperty: 'all',
16
+ transitionDuration: '150ms',
17
+ transitionTimingFunction: 'ease',
15
18
  },
16
19
  buttonLoader: {
17
20
  position: 'absolute',
package/dist/ui/EmptyState/EmptyState.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CA8BhD,CAAC"}
1
+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/ui/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAgC,eAAe,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAkChD,CAAC"}
package/dist/ui/EmptyState/EmptyState.js CHANGED
@@ -8,5 +8,5 @@ export const EmptyState = (props) => {
8
8
  const styles = useStyles();
9
9
  const descriptionToRender = description ?? text;
10
10
  const footer = actions ?? children;
11
- return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [(illustration || iconName) && (_jsx(Box, { style: styles.media, children: illustration ? (illustration) : iconName && isLucideIconName(iconName) ? (_jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })) : null })), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && _jsx(Box, { style: styles.footer, children: footer })] }));
11
+ return (_jsxs(Box, { tag: "empty-state", style: [styles.container, style], ...boxProps, children: [_jsxs(Box, { tag: "empty-state-contenu", style: styles.contenu, children: [(illustration || iconName) && (_jsx(Box, { style: styles.media, children: illustration ? (illustration) : iconName && isLucideIconName(iconName) ? (_jsx(LucideIcon, { name: iconName, size: "lg", color: styles.media.color })) : null })), _jsxs(Box, { style: styles.messageEtDescription, children: [title && _jsx(Typography, { style: styles.title, children: title }), descriptionToRender && _jsx(Typography, { style: styles.description, children: descriptionToRender })] })] }), footer && (_jsx(Box, { tag: "empty-state-footer", style: styles.footer, children: footer }))] }));
12
12
  };
package/dist/ui/EmptyState/EmptyState.stories.d.ts CHANGED
@@ -12,12 +12,12 @@ declare const _default: {
12
12
  alignItems: "center";
13
13
  justifyContent: "center";
14
14
  gap: import("@alveole/theme").Spacing;
15
- paddingTop: number;
15
+ paddingTop: import("@alveole/theme").Spacing;
16
16
  paddingBottom: import("@alveole/theme").Spacing;
17
17
  paddingLeft: import("@alveole/theme").Spacing;
18
18
  paddingRight: import("@alveole/theme").Spacing;
19
19
  textAlign: "center";
20
- height: "100%";
20
+ height: "100%" | undefined;
21
21
  width: "100%";
22
22
  };
23
23
  contenu: {
@@ -25,7 +25,7 @@ declare const _default: {
25
25
  gap: import("@alveole/theme").Spacing;
26
26
  alignItems: "center";
27
27
  textAlign: "center";
28
- flex: number;
28
+ flex: number | undefined;
29
29
  justifyContent: "center";
30
30
  width: "100%";
31
31
  };
@@ -62,7 +62,7 @@ declare const _default: {
62
62
  color: "#5F6571";
63
63
  };
64
64
  footer: {
65
- width: "100%";
65
+ width: "100%" | undefined;
66
66
  display: "flex";
67
67
  flexDirection: "column";
68
68
  gap: import("@alveole/theme").Spacing;
package/dist/ui/EmptyState/EmptyState.styles.d.ts CHANGED
@@ -5,12 +5,12 @@ export declare const useStyles: () => {
5
5
  alignItems: "center";
6
6
  justifyContent: "center";
7
7
  gap: import("@alveole/theme").Spacing;
8
- paddingTop: number;
8
+ paddingTop: import("@alveole/theme").Spacing;
9
9
  paddingBottom: import("@alveole/theme").Spacing;
10
10
  paddingLeft: import("@alveole/theme").Spacing;
11
11
  paddingRight: import("@alveole/theme").Spacing;
12
12
  textAlign: "center";
13
- height: "100%";
13
+ height: "100%" | undefined;
14
14
  width: "100%";
15
15
  };
16
16
  contenu: {
@@ -18,7 +18,7 @@ export declare const useStyles: () => {
18
18
  gap: import("@alveole/theme").Spacing;
19
19
  alignItems: "center";
20
20
  textAlign: "center";
21
- flex: number;
21
+ flex: number | undefined;
22
22
  justifyContent: "center";
23
23
  width: "100%";
24
24
  };
@@ -55,7 +55,7 @@ export declare const useStyles: () => {
55
55
  color: "#5F6571";
56
56
  };
57
57
  footer: {
58
- width: "100%";
58
+ width: "100%" | undefined;
59
59
  display: "flex";
60
60
  flexDirection: "column";
61
61
  gap: import("@alveole/theme").Spacing;
package/dist/ui/EmptyState/EmptyState.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { makeStyles } from '@alveole/theme';
2
- export const useStyles = makeStyles(({ externalPadding, text, color, spacing, radius }) => {
2
+ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, radius, isVariant }) => {
3
3
  const paddingValue = externalPadding();
4
4
  return {
5
5
  container: {
@@ -7,13 +7,13 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
7
7
  flexDirection: 'column',
8
8
  alignItems: 'center',
9
9
  justifyContent: 'center',
10
- gap: spacing('150'),
11
- paddingTop: 0,
12
- paddingBottom: spacing('2W'),
10
+ gap: isVariant('mobile') ? spacing('2W') : spacing('3W'),
11
+ paddingTop: isVariant('mobile') ? 0 : spacing('3W'),
12
+ paddingBottom: isVariant('mobile') ? 0 : spacing('3W'),
13
13
  paddingLeft: paddingValue,
14
14
  paddingRight: paddingValue,
15
15
  textAlign: 'center',
16
- height: '100%',
16
+ height: isVariant('mobile') ? '100%' : undefined,
17
17
  width: '100%',
18
18
  },
19
19
  contenu: {
@@ -21,7 +21,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
21
21
  gap: spacing('2W'),
22
22
  alignItems: 'center',
23
23
  textAlign: 'center',
24
- flex: 1,
24
+ flex: isVariant('mobile') ? 1 : undefined,
25
25
  justifyContent: 'center',
26
26
  width: '100%',
27
27
  },
@@ -52,7 +52,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
52
52
  textAlign: 'center',
53
53
  },
54
54
  footer: {
55
- width: '100%',
55
+ width: isVariant('mobile') ? '100%' : undefined,
56
56
  display: 'flex',
57
57
  flexDirection: 'column',
58
58
  gap: spacing('100'),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "0.21.0",
3
+ "version": "0.22.1",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",