@alveole/components 1.0.1 → 1.1.1

package/dist/ui/Button/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core';
 import { Button } from './Button';
 import { useStyles } from './Button.styles';
 import { ButtonIcon } from './ButtonIcon';
@@ -17,9 +17,11 @@ export const Primary = () => (_jsxs(Box, { display: "flex", flexDirection: "row"
 export const Secondary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", title: "Bouton secondary" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true })] }));
 export const Tertiary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "tertiary", title: "Bouton tertiary" }), _jsx(Button, { variant: "tertiary", title: "Disabled", disabled: true })] }));
 export const Danger = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "danger", title: "Bouton danger" }), _jsx(Button, { variant: "danger", title: "Disabled", disabled: true })] }));
-export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(Typography, { children: "Deprecated" }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true, startIcon: "Pen" })] })] }));
+/** @deprecated Préférer les variants `primary`, `secondary` ou `tertiary`. */
+export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true, startIcon: "Pen" })] }));
 export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Start Icon", startIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" })] }));
 export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
 export const Selected = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, children: _jsx(Button, { variant: "secondary", title: "Selected", selected: true }) }));
-export const Active = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Typography, { children: "Utilis\u00E9 quand le bouton est actif (ex: quand un menu est ouvert)" }), _jsx(Box, { display: "block", children: _jsx(Button, { variant: "secondary", title: "Active", active: true }) })] }));
+/** Utilisé quand le bouton est actif (ex : quand un menu est ouvert). */
+export const Active = () => (_jsx(Box, { display: "block", children: _jsx(Button, { variant: "secondary", title: "Active", active: true }) }));
 export * as Sources from './Button.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAoW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA4O,CAAC;AAEjQ,eAAO,MAAM,SAAS,cAAoP,CAAC;AAE3Q,eAAO,MAAM,QAAQ,cAAgP,CAAC;AAEtQ,eAAO,MAAM,MAAM,cAAwO,CAAC;AAE5P,eAAO,MAAM,IAAI,cAAua,CAAC;AAEzb,eAAO,MAAM,KAAK,cAAic,CAAC;AAEpd,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,QAAQ,cAAkL,CAAC;AAExM,eAAO,MAAM,MAAM,cAAyT,CAAC;AAE7U,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAoW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA4O,CAAC;AAEjQ,eAAO,MAAM,SAAS,cAAoP,CAAC;AAE3Q,eAAO,MAAM,QAAQ,cAAgP,CAAC;AAEtQ,eAAO,MAAM,MAAM,cAAwO,CAAC;AAE5P,eAAO,MAAM,IAAI,cAA+S,CAAC;AAEjU,eAAO,MAAM,KAAK,cAAic,CAAC;AAEpd,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,QAAQ,cAAkL,CAAC;AAExM,eAAO,MAAM,MAAM,cAA+I,CAAC;AAEnK,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"}

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

@@ -5,11 +5,11 @@ export const Primary = () => "export const Primary = () => (\n  <Box display=\"f
 export const Secondary = () => "export const Secondary = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"secondary\" title=\"Bouton secondary\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n  </Box>\n);";
 export const Tertiary = () => "export const Tertiary = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"tertiary\" title=\"Bouton tertiary\" />\n    <Button variant=\"tertiary\" title=\"Disabled\" disabled />\n  </Box>\n);";
 export const Danger = () => "export const Danger = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"danger\" title=\"Bouton danger\" />\n    <Button variant=\"danger\" title=\"Disabled\" disabled />\n  </Box>\n);";
-export const Link = () => "export const Link = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <Typography>Deprecated</Typography>\n    <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n      <Button variant=\"link\" title=\"Bouton link\" />\n      <Button variant=\"link\" title=\"Disabled\" disabled />\n      <Button variant=\"link\" title=\"Disabled\" disabled startIcon=\"Pen\" />\n    </Box>\n  </Box>\n);";
+export const Link = () => "export const Link = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"link\" title=\"Bouton link\" />\n    <Button variant=\"link\" title=\"Disabled\" disabled />\n    <Button variant=\"link\" title=\"Disabled\" disabled startIcon=\"Pen\" />\n  </Box>\n);";
 export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"primary\" title=\"Start Icon\" startIcon=\"Plus\" />\n    <Button variant=\"primary\" title=\"End Icon\" endIcon=\"Plus\" />\n    <Button variant=\"primary\" title=\"End Icon\" endIcon=\"Plus\" />\n    <ButtonIcon variant=\"primary\" icon=\"CircleUser\" />\n    <ButtonIcon variant=\"primary\" icon=\"CircleUser\" />\n  </Box>\n);";
 export const FullWidth = () => "export const FullWidth = () => <Button variant=\"primary\" title=\"Full Width\" fullWidth />;";
 export const Selected = () => "export const Selected = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4}>\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n  </Box>\n);";
-export const Active = () => "export const Active = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n    <Typography>Utilisé quand le bouton est actif (ex: quand un menu est ouvert)</Typography>\n    <Box display=\"block\">\n      <Button variant=\"secondary\" title=\"Active\" active />\n    </Box>\n  </Box>\n);";
+export const Active = () => "export const Active = () => (\n  <Box display=\"block\">\n    <Button variant=\"secondary\" title=\"Active\" active />\n  </Box>\n);";
 export const storySources = {
     Sizes,
     Primary,
@@ -22,3 +22,7 @@ export const storySources = {
     Selected,
     Active,
 };
+export const storyDescriptions = {
+    Link: "@deprecated Préférer les variants `primary`, `secondary` ou `tertiary`.",
+    Active: "Utilisé quand le bouton est actif (ex : quand un menu est ouvert).",
+};

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

@@ -8,7 +8,7 @@ export declare const useStyles: () => {
         flexDirection: "row";
         justifyContent: "center";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         transitionProperty: "all";
         transitionDuration: "150ms";
         transitionTimingFunction: "ease";
@@ -119,45 +119,45 @@ export declare const useStyles: () => {
         color: string;
     };
     xsContainer: {
-        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;
         borderTopLeftRadius: import("@alveole/theme").Radius;
         borderBottomLeftRadius: import("@alveole/theme").Radius;
         borderTopRightRadius: import("@alveole/theme").Radius;
         borderBottomRightRadius: import("@alveole/theme").Radius;
     };
     smContainer: {
-        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;
         borderTopLeftRadius: import("@alveole/theme").Radius;
         borderBottomLeftRadius: import("@alveole/theme").Radius;
         borderTopRightRadius: import("@alveole/theme").Radius;
         borderBottomRightRadius: import("@alveole/theme").Radius;
     };
     mdContainer: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         paddingTop: number;
         paddingBottom: number;
     };
     lgContainer: {
-        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;
     };
     smContainerIconOnly: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     mdContainerIconOnly: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     lgContainerIconOnly: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
     };
     xsTitle: {
         readonly fontSize: 12;
@@ -188,22 +188,22 @@ export declare const useStyles: () => {
         readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     smContainerStartIcon: {
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
     };
     mdContainerStartIcon: {
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
     };
     lgContainerStartIcon: {
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
     };
     smContainerEndIcon: {
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingRight: string | number;
     };
     mdContainerEndIcon: {
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingRight: string | number;
     };
     lgContainerEndIcon: {
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingRight: string | number;
     };
     primaryTitleDisabled: {
         cursor: "not-allowed";

package/dist/ui/Button/Button.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, spacingValue, radius }) => ({
     container: {
         borderTopLeftRadius: radius('md'),
         borderBottomLeftRadius: radius('md'),
@@ -16,7 +16,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     },
     buttonLoader: {
         position: 'absolute',
-        right: spacing('075'),
+        right: spacingValue('075'),
     },
     title: {
         cursor: 'pointer',

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

@@ -13,14 +13,14 @@ declare const _default: {
         cardSection: {
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             width: "100%";
         };
         title: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         titleIcon: {
             display: "flex";
@@ -38,7 +38,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         descriptionIcon: {
             display: "flex";
@@ -64,6 +64,7 @@ export declare const cardSection: () => import("react").JSX.Element;
 export declare const cardSectionDisabled: () => import("react").JSX.Element;
 export declare const cardHeader: () => import("react").JSX.Element;
 export declare const cardHeaderDisabled: () => import("react").JSX.Element;
+/** Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite. */
 export declare const cardActions: () => import("react").JSX.Element;
 export * as Sources from './Card.stories.sources';
 //# sourceMappingURL=Card.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAgBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCA2BxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAgBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAS9B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAYvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAgBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCA2BxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAgBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAS9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Card/Card.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core';
 import { Avatar } from '../Avatar';
 import { Button } from '../Button';
 import { LucideIcon } from '../LucideIcon';
@@ -32,7 +32,8 @@ export const cardHeader = () => {
 export const cardHeaderDisabled = () => {
     return (_jsx(Card.Header, { variant: "disabled", titre: "Titre de la carte", sousTitre: "Sous-titre de la carte", image: _jsx(Avatar, { size: "md", fallbackText: "M" }) }));
 };
+/** Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite. */
 export const cardActions = () => {
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "100", children: [_jsx(Typography, { children: "Privil\u00E9gier l'utilisation de bouton en taille SM, avec le bouton primary toujours \u00E0 droite." }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Action", size: "sm" }), _jsx(Button, { variant: "primary", title: "Action", size: "sm" })] })] }));
+    return (_jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Action", size: "sm" }), _jsx(Button, { variant: "primary", title: "Action", size: "sm" })] }));
 };
 export * as Sources from './Card.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAAkqB,CAAC;AAEprB,eAAO,MAAM,YAAY,cAA61B,CAAC;AAEv3B,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,UAAU,cAAye,CAAC;AAEjgB,eAAO,MAAM,kBAAkB,cAAwQ,CAAC;AAExS,eAAO,MAAM,WAAW,cAA4d,CAAC;AAErf,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAAkqB,CAAC;AAEprB,eAAO,MAAM,YAAY,cAA61B,CAAC;AAEv3B,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,UAAU,cAAye,CAAC;AAEjgB,eAAO,MAAM,kBAAkB,cAAwQ,CAAC;AAExS,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;CAQf,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/Card/Card.stories.sources.js

@@ -6,7 +6,7 @@ export const cardSection = () => "export const cardSection = () => {\n  return (
 export const cardSectionDisabled = () => "export const cardSectionDisabled = () => {\n  return (\n    <Card.Section\n      variant=\"disabled\"\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardHeader = () => "export const cardHeader = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"100\">\n      <Card.Header\n        titre=\"Titre de la carte\"\n        sousTitre=\"Sous-titre de la carte\"\n        image={<Avatar size=\"md\" fallbackText=\"M\" />}\n      />\n\n      <Card.Header\n        titre=\"Titre de la carte\"\n        sousTitre=\"Sous-titre de la carte\"\n        image={<LucideIcon name=\"Image\" size=\"md\" />}\n      />\n    </Box>\n  );\n};";
 export const cardHeaderDisabled = () => "export const cardHeaderDisabled = () => {\n  return (\n    <Card.Header\n      variant=\"disabled\"\n      titre=\"Titre de la carte\"\n      sousTitre=\"Sous-titre de la carte\"\n      image={<Avatar size=\"md\" fallbackText=\"M\" />}\n    />\n  );\n};";
-export const cardActions = () => "export const cardActions = () => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"100\">\n      <Typography>\n        Privilégier l&apos;utilisation de bouton en taille SM, avec le bouton primary toujours à droite.\n      </Typography>\n      <Card.Actions>\n        <Button variant=\"secondary\" title=\"Action\" size=\"sm\" />\n        <Button variant=\"primary\" title=\"Action\" size=\"sm\" />\n      </Card.Actions>\n    </Box>\n  );\n};";
+export const cardActions = () => "export const cardActions = () => {\n  return (\n    <Card.Actions>\n      <Button variant=\"secondary\" title=\"Action\" size=\"sm\" />\n      <Button variant=\"primary\" title=\"Action\" size=\"sm\" />\n    </Card.Actions>\n  );\n};";
 export const storySources = {
     card,
     cardDisabled,
@@ -16,3 +16,6 @@ export const storySources = {
     cardHeaderDisabled,
     cardActions,
 };
+export const storyDescriptions = {
+    cardActions: "Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite.",
+};

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

@@ -2,8 +2,8 @@ export declare const useStyles: () => {
     card: {
         display: "flex";
         width: "100%";
-        gap: import("@alveole/theme").Spacing;
-        padding: import("@alveole/theme").Spacing;
+        gap: string | number;
+        padding: string | number;
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;

package/dist/ui/Card/CardActions.styles.d.ts

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     cardActions: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
         justifyContent: "flex-end";
         alignItems: "center";

package/dist/ui/Card/CardHeader.styles.d.ts

@@ -2,7 +2,7 @@ export declare const useStyles: () => {
     cardHeader: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
     };
     texte: {

package/dist/ui/Card/CardSection.styles.d.ts

@@ -2,14 +2,14 @@ export declare const useStyles: () => {
     cardSection: {
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         width: "100%";
     };
     title: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     titleIcon: {
         display: "flex";
@@ -27,7 +27,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     descriptionIcon: {
         display: "flex";

package/dist/ui/Checkbox/Checkbox.js

@@ -9,9 +9,9 @@ import { CheckboxLabel } from './CheckboxLabel';
 export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { variant, label, error, success, disabled, onCheckedChange } = props;
     const baseProps = { variant, label, error, success, disabled, onCheckedChange };
-    const { spacing } = useTheme();
+    const { spacingValue } = useTheme();
     const styles = useStyles();
     const uniqId = useId();
     const id = `checkbox--${variant}--${uniqId}`;
-    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacing('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

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

@@ -24,7 +24,7 @@ declare const _default: {
         container: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         checkbox: {
             height: import("@alveole/theme").Spacing;

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

@@ -6,7 +6,7 @@ export declare const useStyles: () => {
     container: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     checkbox: {
         height: import("@alveole/theme").Spacing;

package/dist/ui/Checkbox/Checkbox.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, spacingValue }) => ({
     checkboxContainer: {
         display: 'flex',
         flexDirection: 'column',
@@ -10,15 +10,15 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         gap: spacing('050'),
     },
     checkbox: {
-        height: spacing('150'),
-        width: spacing('150'),
+        height: spacingValue('150'),
+        width: spacingValue('150'),
         backgroundColor: 'transparent',
         borderColor: color.light.border['action-high-primary'],
         borderRadius: 6,
     },
     checkboxSm: {
-        height: spacing('100'),
-        width: spacing('100'),
+        height: spacingValue('100'),
+        width: spacingValue('100'),
         borderRadius: 4,
     },
     checkboxDisabled: {
@@ -32,8 +32,8 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         borderColor: color.border['plain-success'],
     },
     indicator: {
-        height: spacing('150'),
-        width: spacing('150'),
+        height: spacingValue('150'),
+        width: spacingValue('150'),
         backgroundColor: color.light.background['action-high-primary'],
         borderRadius: 6,
     },

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

@@ -12,8 +12,8 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: string | number;
+            paddingLeft: string | number;
             backgroundColor: string;
             borderRadius: import("@alveole/theme").Radius;
         };

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

@@ -5,8 +5,8 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: string | number;
+        paddingLeft: string | number;
         backgroundColor: string;
         borderRadius: import("@alveole/theme").Radius;
     };

package/dist/ui/DateInput/DateInput.d.ts

@@ -0,0 +1,36 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps, TextInputProps } from '@alveole/components';
+import React from 'react';
+type MinuteInterval = 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30;
+export type DateInputProps = TextInputProps & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    type?: 'date' | 'datetime' | 'month';
+    display?: 'default' | 'spinner';
+    value?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    onChange?: (date: string) => void;
+    is24Hour?: boolean;
+    minuteInterval?: MinuteInterval;
+};
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    type?: "date" | "datetime" | "month";
+    display?: "default" | "spinner";
+    value?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    onChange?: (date: string) => void;
+    is24Hour?: boolean;
+    minuteInterval?: MinuteInterval;
+} & React.RefAttributes<any>>;
+export {};
+//# sourceMappingURL=DateInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGrB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAG7B,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,cAAc,GACzC,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEJ,eAAO,MAAM,SAAS;;;;;;;;;;;;WAVX,MAAM,GAAG,UAAU,GAAG,OAAO;cAC1B,SAAS,GAAG,SAAS;YACvB,MAAM;kBACA,IAAI;kBACJ,IAAI;eACP,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;eACtB,OAAO;qBACD,cAAc;6BA2IjC,CAAC"}

package/dist/ui/DateInput/DateInput.ios.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    type?: "date" | "datetime" | "month";
+    display?: "default" | "spinner";
+    value?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    onChange?: (date: string) => void;
+    is24Hour?: boolean;
+    minuteInterval?: 1 | 6 | 4 | 12 | 2 | 10 | 3 | 5 | 15 | 20 | 30;
+} & React.RefAttributes<any>>;
+//# sourceMappingURL=DateInput.ios.d.ts.map

package/dist/ui/DateInput/DateInput.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.ios.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.ios.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;6BAuGpB,CAAC"}

package/dist/ui/DateInput/DateInput.ios.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { toDate } from 'date-fns';
+import React, { useCallback } from 'react';
+import { Keyboard, Platform } from 'react-native';
+import { FormControlModal } from '../FormControl';
+import { DateFormats, displayDate, isValidDate } from './dateUtils';
+const toDateString = (date, datetime) => displayDate(date, { format: datetime ? DateFormats.DateTimeString : DateFormats.DateString });
+export const DateInput = React.forwardRef(function DateInput(props, ref) {
+    const { label, labelRight, hint, error, success, placeholder, disabled, value, type = 'date', maximumDate, minimumDate, minuteInterval = 1, onChange, is24Hour, ...inputProps } = props;
+    const [open, setOpen] = React.useState(false);
+    const now = new Date();
+    const defaultDateString = value ?? toDateString(now, type === 'datetime');
+    const [date, setDate] = React.useState(defaultDateString);
+    const handleChange = (_event, newDate) => {
+        if (isValidDate(newDate)) {
+            if (type === 'date')
+                setDate(toDateString(newDate));
+            else if (type === 'datetime')
+                setDate(displayDate(newDate, { format: DateFormats.DateTimeString }));
+        }
+    };
+    const handleOpen = useCallback(() => {
+        if (!disabled) {
+            Keyboard.dismiss();
+            setOpen(true);
+        }
+    }, [disabled]);
+    const handleValidate = useCallback(() => {
+        if (isValidDate(date))
+            onChange?.(date);
+        setOpen(false);
+    }, [date, onChange]);
+    const displayValue = useCallback((currentValue) => {
+        if (currentValue) {
+            if (type === 'datetime')
+                return displayDate(toDate(currentValue), { format: DateFormats.Datetime });
+            else
+                return displayDate(toDate(currentValue), { format: DateFormats.DateSlash });
+        }
+        return '';
+    }, [type]);
+    return (_jsxs(Box, { tag: "date-input", onPress: handleOpen, children: [_jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: handleValidate, children: _jsx(Box, { style: { marginTop: 'auto' }, children: _jsx(DateTimePicker, { value: toDate(date), mode: type === 'month' ? 'date' : type, locale: 'fr', maximumDate: maximumDate, minimumDate: minimumDate, is24Hour: is24Hour, minuteInterval: minuteInterval, themeVariant: "light", display: Platform.OS === 'ios' ? 'spinner' : 'default', onChange: handleChange }) }) }), _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...inputProps, caretHidden: true, inputMode: "none", onPress: handleOpen, readOnly: true }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] })] }));
+});

package/dist/ui/DateInput/DateInput.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { getHours, getMinutes, setHours, setMinutes } from 'date-fns';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { DateFormats, displayDate, isValidDate } from './dateUtils';
+export const DateInput = React.forwardRef(function DateInput({ label, labelRight, hint, error, success, placeholder, disabled, value, maximumDate, minimumDate, minuteInterval = 1, is24Hour, display, type = 'date', onChange, ...props }, ref) {
+    const [showPicker, setShowPicker] = useState(false);
+    const [isHours, setIsHours] = useState(false);
+    const selectedDate = React.useMemo(() => (value ? new Date(value) : new Date()), [value]);
+    const mode = useMemo(() => {
+        if (type === 'date')
+            return type;
+        if (isHours)
+            return 'time';
+        return 'date';
+    }, [isHours, type]);
+    const handleChange = (event, date) => {
+        if (event.type === 'dismissed') {
+            setIsHours(false);
+            setShowPicker(false);
+            return;
+        }
+        if (event.type === 'set' && isValidDate(date)) {
+            setShowPicker(false);
+            if (type === 'datetime' && !isHours) {
+                const currentHours = getHours(new Date());
+                const currentMinutes = getMinutes(new Date());
+                const newDate = displayDate(setMinutes(setHours(date, currentHours), currentMinutes), {
+                    format: DateFormats.DateTimeString,
+                });
+                onChange?.(newDate);
+                setIsHours(true);
+                setShowPicker(true);
+                return;
+            }
+            else if (type === 'datetime') {
+                const newDate = displayDate(setMinutes(setHours(selectedDate, getHours(date)), getMinutes(date)), {
+                    format: DateFormats.DateTimeString,
+                });
+                onChange?.(newDate);
+                setIsHours(false);
+                setShowPicker(false);
+                return;
+            }
+            const newDate = displayDate(date, { format: DateFormats.DateString });
+            onChange?.(newDate);
+            setIsHours(false);
+            setShowPicker(false);
+        }
+    };
+    const handleOpen = React.useCallback(() => {
+        if (!disabled) {
+            Keyboard.dismiss();
+            setShowPicker(true);
+        }
+    }, [disabled]);
+    const displayValue = useCallback((value) => {
+        if (type === 'datetime') {
+            if (value == null)
+                return 'Sélectionnez une date';
+            return displayDate(selectedDate, { format: DateFormats.Datetime });
+        }
+        if (value == null)
+            return 'JJ/MM/AAAA';
+        return displayDate(selectedDate, { format: DateFormats.DateSlash });
+    }, [selectedDate, type]);
+    return (_jsx(Box, { tag: "date-input", onPress: handleOpen, children: _jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...props, readOnly: true, onPress: handleOpen, caretHidden: true, inputMode: "none" }), showPicker && (_jsx(DateTimePicker, { value: selectedDate, mode: mode, locale: 'fr', display: display ?? 'default', maximumDate: maximumDate, minimumDate: minimumDate, onChange: handleChange, is24Hour: is24Hour, minuteInterval: minuteInterval })), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
+});