@alveole/components 1.0.0 → 1.1.0

package/dist/core/A/A.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     component: (props: import("@alveole/components").AProps) => import("react").JSX.Element;
     styleFn: () => {
         container: {};

package/dist/core/A/A.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"A.stories.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAWrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"A.stories.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAWrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAC"}

package/dist/core/A/A.stories.js

@@ -7,7 +7,8 @@ export default {
     title: 'A',
     tags: ['core'],
     experimental: false,
-    description: 'Equivalent d’une balise <a>. Envelopper le texte dans une balise <Typography>.',
+    description: "Equivalent d'une balise `<a>`. Envelopper le texte dans une balise `<Typography>`.",
+    shortDescription: "Équivalent d'une balise <a>. À envelopper dans une balise Typography.",
     component: A,
     styleFn: useStyles,
 };

package/dist/core/Box/Box.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & import("@tamagui/core").RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
         justify?: import("tamagui").ViewProps["justifyContent"];
     } & import("./Box.types").BoxAdvancedStyle & {

package/dist/core/Box/Box.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAInC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAInC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

package/dist/core/Box/Box.stories.js

@@ -5,7 +5,8 @@ export default {
     title: 'Box',
     tags: ['core'],
     experimental: false,
-    description: 'La Box doit être utilisé pour tout contenir, à la manière d‘une <div>. De type View (tamagui), elle permet de définir le tag rendu en web.',
+    description: "La Box doit être utilisé pour tout contenir, à la manière d'une <div>. De type View (tamagui), elle permet de définir le tag rendu en web.",
+    shortDescription: "Composant de base pour tout contenir, à la manière d'une div. De type View (Tamagui).",
     component: Box,
     styleFn: () => 'Aucun style appliqué',
 };

package/dist/core/Code/Code.d.ts

@@ -0,0 +1,5 @@
+export type CodeProps = {
+    children: React.ReactNode;
+};
+export declare const Code: ({ children }: CodeProps) => import("react").JSX.Element;
+//# sourceMappingURL=Code.d.ts.map

package/dist/core/Code/Code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,gCAQ3C,CAAC"}

package/dist/core/Code/Code.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Typography } from '../Typography';
+import { useStyles } from './Code.styles';
+export const Code = ({ children }) => {
+    const { text } = useTheme();
+    const styles = useStyles();
+    return (_jsx(Typography, { tag: "code", style: [text['Corps de texte'].SM.Regular, styles.code], children: children }));
+};

package/dist/core/Code/Code.stories.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    title: string;
+    tags: "core"[];
+    experimental: false;
+    description: string;
+    component: ({ children }: import("./Code").CodeProps) => import("react").JSX.Element;
+    styleFn: () => {
+        code: {
+            fontFamily: "monospace";
+            color: string;
+            backgroundColor: "rgba(135, 131, 120, 0.12)";
+            paddingLeft: number;
+            paddingRight: number;
+            paddingTop: number;
+            paddingBottom: number;
+            borderRadius: import("@alveole/theme").Radius;
+        };
+    };
+};
+export default _default;
+export declare const Basic: () => import("react").JSX.Element;
+export declare const InText: () => import("react").JSX.Element;
+export * as Sources from './Code.stories.sources';
+//# sourceMappingURL=Code.stories.d.ts.map

package/dist/core/Code/Code.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAWlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Code/Code.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Code } from './Code';
+import { useStyles } from './Code.styles';
+export default {
+    title: 'Code',
+    tags: ['core'],
+    experimental: false,
+    description: 'Composant pour afficher du code ou des valeurs techniques avec un style distinctif.',
+    component: Code,
+    styleFn: useStyles,
+};
+export const Basic = () => (_jsx(Box, { children: _jsxs(Typography, { children: ["La balise ", _jsx(Code, { children: '<Code>' }), " doit \u00EAtre comprise dans une balise ", _jsx(Code, { children: '<Typography>' })] }) }));
+export const InText = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Typography, { children: ["Le fichier CSV doit avoir une ", _jsx(Code, { children: "," }), " comme s\u00E9parateur de colonnes."] }), _jsxs(Typography, { children: ["Exemple : ", _jsx(Code, { children: "Individuel" }), " ou ", _jsx(Code, { children: "Collectif" })] })] }) }));
+export * as Sources from './Code.stories.sources';

package/dist/core/Code/Code.stories.sources.d.ts

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

package/dist/core/Code/Code.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Code/Code.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAA6M,CAAC;AAEhO,eAAO,MAAM,MAAM,cAAmX,CAAC;AAEvY,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Code/Code.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/Code/Code.stories.tsx
+export const Basic = () => "export const Basic = () => (\n  <Box>\n    <Typography>\n      La balise <Code>{'<Code>'}</Code> doit être comprise dans une balise <Code>{'<Typography>'}</Code>\n    </Typography>\n  </Box>\n);";
+export const InText = () => "export const InText = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n      <Typography>\n        Le fichier CSV doit avoir une <Code>,</Code> comme séparateur de colonnes.\n      </Typography>\n      <Typography>\n        Exemple : <Code>Individuel</Code> ou <Code>Collectif</Code>\n      </Typography>\n    </Box>\n  </Box>\n);";
+export const storySources = {
+    Basic,
+    InText,
+};

package/dist/core/Code/Code.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const useStyles: () => {
+    code: {
+        fontFamily: "monospace";
+        color: string;
+        backgroundColor: "rgba(135, 131, 120, 0.12)";
+        paddingLeft: number;
+        paddingRight: number;
+        paddingTop: number;
+        paddingBottom: number;
+        borderRadius: import("@alveole/theme").Radius;
+    };
+};
+//# sourceMappingURL=Code.styles.d.ts.map

package/dist/core/Code/Code.styles.d.ts.map

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

package/dist/core/Code/Code.styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, radius }) => ({
+    code: {
+        fontFamily: 'monospace',
+        color: color.light.text['default-error'],
+        backgroundColor: 'rgba(135, 131, 120, 0.12)',
+        paddingLeft: 4,
+        paddingRight: 4,
+        paddingTop: 2,
+        paddingBottom: 2,
+        borderRadius: radius('sm'),
+    },
+}));

package/dist/core/Code/index.d.ts

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

package/dist/core/Code/index.d.ts.map

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

package/dist/core/Code/index.js

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

package/dist/core/Form/Form.stories.d.ts

@@ -3,12 +3,14 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     component: (props: import("./Form").FormProps) => import("react").JSX.Element;
     styleFn: () => {
         form: {};
     };
 };
 export default _default;
+/** Taper dans le champ — cliquer en dehors ferme le clavier. */
 export declare const WithKeyboardAware: () => import("react").JSX.Element;
 export * as Sources from './Form.stories.sources';
 //# sourceMappingURL=Form.stories.d.ts.map

package/dist/core/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAOA,wBAQkB;AAIlB,eAAO,MAAM,iBAAiB,mCAQ7B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAMA,wBASkB;AAIlB,gEAAgE;AAChE,eAAO,MAAM,iBAAiB,mCAO7B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Form/Form.stories.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextInput as RNTextInput } from 'react-native';
 import { Box } from '../Box';
-import { Typography } from '../Typography';
 import { Form } from './Form';
 import { useStyles } from './Form.styles';
 export default {
     title: 'Form',
     tags: ['core'],
     experimental: false,
-    description: "Ferme le clavier au clic en dehors d'un champ. Doit être utilisé pour contenir tous les formulaires (pas de <form> en React Native). Le scroll au-dessus du clavier est géré par KeyboardAwareScrollView.",
+    description: "Ferme le clavier au clic en dehors d'un champ. Doit être utilisé pour contenir tous les formulaires (pas de `<form>` en React Native). Le scroll au-dessus du clavier est géré par [KeyboardAwareScrollView](https://docs.expo.dev/guides/keyboard-handling).",
+    shortDescription: "Ferme le clavier au clic en dehors d'un champ. À utiliser pour contenir tous les formulaires.",
     component: Form,
     styleFn: useStyles,
 };
 const inputStyle = { borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: 8 };
-export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(Typography, { children: "Taper dans le champ \u2014 cliquer en dehors ferme le clavier." }), _jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
+/** Taper dans le champ — cliquer en dehors ferme le clavier. */
+export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
 export * as Sources from './Form.stories.sources';

package/dist/core/Form/Form.stories.sources.d.ts

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

package/dist/core/Form/Form.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAgZ,CAAC;AAE/a,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAsT,CAAC;AAErV,eAAO,MAAM,YAAY;;CAEf,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/core/Form/Form.stories.sources.js

@@ -1,6 +1,9 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Form/Form.stories.tsx
-export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <Typography>Taper dans le champ — cliquer en dehors ferme le clavier.</Typography>\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
+export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
 export const storySources = {
     WithKeyboardAware,
 };
+export const storyDescriptions = {
+    WithKeyboardAware: "Taper dans le champ — cliquer en dehors ferme le clavier.",
+};

package/dist/core/Image/Image.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     component: (props: import("./Image").ImageProps) => import("react").JSX.Element;
     styleFn: () => string;
 };

package/dist/core/Image/Image.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,KAAK,mCAwBjB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAO7B,CAAC;AAEF,eAAO,MAAM,OAAO,mCAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAOjB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAOhB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAa5B,CAAC;AAEF,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,KAAK,mCAwBjB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAO7B,CAAC;AAEF,eAAO,MAAM,OAAO,mCAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAOjB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAOhB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAa5B,CAAC;AAEF,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/core/Image/Image.stories.js

@@ -6,7 +6,8 @@ export default {
     title: 'Image',
     tags: ['core'],
     experimental: false,
-    description: "Permet d'afficher une image de manière responsive que ce soit sur mobile ou desktop. Actuellement l'image ne peut que être fill, il faudrait développer les autres en se basant sur l'élément <img> HTML. https://www.w3schools.com/csS/css3_object-fit.asp",
+    description: "Permet d'afficher une image de manière responsive que ce soit sur mobile ou desktop. Actuellement l'image ne peut que être fill, il faudrait développer les autres en se basant sur l'élément `<img>` HTML. https://www.w3schools.com/csS/css3_object-fit.asp",
+    shortDescription: 'Affiche une image de manière responsive sur mobile et desktop.',
     component: Image,
     styleFn: () => 'Aucun style appliqué',
 };

package/dist/core/MarkdownDescription/MarkdownDescription.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type MarkdownDescriptionProps = {
+    children: string;
+};
+export declare const MarkdownDescription: ({ children }: MarkdownDescriptionProps) => React.JSX.Element;
+//# sourceMappingURL=MarkdownDescription.d.ts.map

package/dist/core/MarkdownDescription/MarkdownDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownDescription.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/MarkdownDescription.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAiBF,eAAO,MAAM,mBAAmB,GAAI,cAAc,wBAAwB,sBAsIzE,CAAC"}

package/dist/core/MarkdownDescription/MarkdownDescription.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Platform, Text } from 'react-native';
+import { Box } from '../Box';
+import { Code } from '../Code';
+import { Highlight } from '../Highlight';
+import { Typography } from '../Typography';
+const HIGHLIGHT_LANGUAGES = [
+    'json',
+    'typescript',
+    'tsx',
+    'ruby',
+    'bash',
+    'html',
+    'plaintext',
+];
+const extractLanguage = (className) => {
+    const match = /language-(\w+)/.exec(className ?? '');
+    return HIGHLIGHT_LANGUAGES.find(l => l === match?.[1]) ?? 'plaintext';
+};
+export const MarkdownDescription = ({ children }) => {
+    const { text, color } = useTheme();
+    const bodyStyle = text['Corps de texte'].MD.Regular;
+    const boldStyle = text['Corps de texte'].MD.Bold;
+    if (Platform.OS !== 'web') {
+        return _jsx(Typography, { style: bodyStyle, children: children });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const ReactMarkdown = require('react-markdown').default;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const remarkGfm = require('remark-gfm').default;
+    const borderColor = color.light.border['default-grey'];
+    const headerBg = color.light.background['alt-grey'];
+    return (_jsx(Box, { tag: "markdown-description", display: "flex", gap: 8, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
+                p: ({ children: c }) => _jsx(Typography, { style: bodyStyle, children: c }),
+                strong: ({ children: c }) => _jsx(Text, { style: boldStyle, children: c }),
+                em: ({ children: c }) => (_jsx(Text, { style: [bodyStyle, { fontStyle: 'italic' }], children: c })),
+                h1: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H3 - MD'], children: c })),
+                h2: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H4 - SM'], children: c })),
+                h3: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H5 - XS'], children: c })),
+                h4: ({ children: c }) => (_jsx(Typography, { style: text.Titres['H6 - XXS'], children: c })),
+                ul: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
+                ol: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),
+                li: ({ children: c }) => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'flex-start' }, children: [_jsx(Typography, { style: bodyStyle, children: '•' }), _jsx(Typography, { style: [bodyStyle, { flex: 1 }], children: c })] })),
+                pre: ({ children: c }) => _jsx(Box, { display: "flex", children: c }),
+                code: ({ inline, className, children: c, }) => {
+                    if (inline) {
+                        return _jsx(Code, { children: c });
+                    }
+                    return _jsx(Highlight, { language: extractLanguage(className), children: String(c).replace(/\n$/, '') });
+                },
+                table: ({ children: c }) => (_jsx(Box, { tag: "div", borderWidth: 1, borderColor: borderColor, borderRadius: 8, overflow: "hidden", children: _jsx(Box, { tag: "table", style: { display: 'table', borderCollapse: 'collapse', width: '100%' }, children: c }) })),
+                thead: ({ children: c }) => (_jsx(Box, { tag: "thead", style: { display: 'table-header-group' }, children: c })),
+                tbody: ({ children: c }) => (_jsx(Box, { tag: "tbody", style: { display: 'table-row-group' }, children: c })),
+                tr: ({ children: c }) => (_jsx(Box, { tag: "tr", style: { display: 'table-row' }, children: c })),
+                th: ({ children: c }) => (_jsx(Box, { tag: "th", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell', textAlign: 'left', backgroundColor: headerBg, ...boldStyle }, children: c })),
+                td: ({ children: c }) => (_jsx(Box, { tag: "td", borderWidth: 1, borderColor: borderColor, pt: 8, pb: 8, pl: 12, pr: 12, style: { display: 'table-cell', ...bodyStyle }, children: c })),
+            }, children: children }) }));
+};

package/dist/core/MarkdownDescription/index.d.ts

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

package/dist/core/MarkdownDescription/index.d.ts.map

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

package/dist/core/MarkdownDescription/index.js

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

package/dist/core/Metabase/Metabase.stories.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
     component: (props: import("./Metabase.props").MetabaseProps) => import("react").JSX.Element | null;
     styleFn: () => {
         metabase: {
-            height: "100%" | 600;
+            height: 600 | "100%";
             width: "100%";
             flex: number;
             backgroundColor: "#ffffff";

package/dist/core/Metabase/Metabase.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     metabase: {
-        height: "100%" | 600;
+        height: 600 | "100%";
         width: "100%";
         flex: number;
         backgroundColor: "#ffffff";

package/dist/core/Page/Page.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     tags: "core"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     component: (props: import("./Page").PageProps) => import("react").JSX.Element;
     styleFn: () => string;
 };
@@ -11,6 +12,42 @@ export declare const Default: () => import("react").JSX.Element;
 export declare const WithOg: () => import("react").JSX.Element;
 export declare const WithMetaRobots: () => import("react").JSX.Element;
 export declare const WithMultipleMeta: () => import("react").JSX.Element;
-export declare const WithSidebar: () => import("react").JSX.Element;
+/**
+ * Configure des meta globales pour toutes les pages via `PageMetaProvider` dans `app/_layout.tsx`.
+ * Les meta du provider sont injectées en premier ; la prop `meta` de chaque `<Page>` les complète ou les écrase.
+ *
+ * ```tsx
+ * import { PageMetaProvider } from '@alveole/components';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>
+ *       <Stack />
+ *     </PageMetaProvider>
+ *   );
+ * }
+ *
+ * // Une page peut surcharger ou ajouter des meta sans répéter le noindex :
+ * <Page title="Ma page" meta={[{ name: 'author', content: 'Alvéole' }]} />
+ * ```
+ */
+export declare const WithPageMetaProvider: () => null;
+/**
+ * Intégration avec un contrôleur de sidebar via `useSidebar()`.
+ *
+ * ```tsx
+ * const sidebarController = useSidebar();
+ * return (
+ *   <Page
+ *     sideBarController={sidebarController}
+ *     sidebar={<AdminNavigation sidebarController={sidebarController} />}
+ *     title="Mon titre"
+ *   >
+ *     ...
+ *   </Page>
+ * );
+ * ```
+ */
+export declare const WithSidebar: () => null;
 export * as Sources from './Page.stories.sources';
 //# sourceMappingURL=Page.stories.d.ts.map

package/dist/core/Page/Page.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAUkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAIlB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,YAAa,CAAC;AAE/C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Page/Page.stories.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../Box';
 import { Typography } from '../Typography';
 import { Page } from './Page';
 export default {
@@ -7,6 +6,7 @@ export default {
     tags: ['core'],
     experimental: false,
     description: "Permet de définir les valeurs de la balise <head> via Expo router. Doit englober toutes les pages. Permet aussi de rendre la page scrollable via l'attribut `scrollable`. Principalement pour le web.",
+    shortDescription: 'Définit les valeurs de la balise head via Expo Router. Rend la page scrollable. Principalement pour le web.',
     component: Page,
     styleFn: () => 'Aucun style appliqué',
 };
@@ -18,14 +18,41 @@ export const WithMultipleMeta = () => (_jsx(Page, { title: "Page compl\u00E8te",
         { name: 'author', content: 'Alvéole' },
         { httpEquiv: 'X-UA-Compatible', content: 'IE=edge' },
     ], children: _jsx(Typography, { children: "Page avec plusieurs balises meta personnalis\u00E9es." }) }));
-export const WithSidebar = () => (_jsx(Box, { children: _jsx(Typography, { children: `const sidebarController = useSidebar();
-return (
-  <Page
-    sideBarController={sidebarController}
-    sidebar={<AdminNavigation sidebarController={sidebarController} />}
-    title="Mon titre"
-  >
-    {/* ... */}
-  </Page>
-);` }) }));
+/**
+ * Configure des meta globales pour toutes les pages via `PageMetaProvider` dans `app/_layout.tsx`.
+ * Les meta du provider sont injectées en premier ; la prop `meta` de chaque `<Page>` les complète ou les écrase.
+ *
+ * ```tsx
+ * import { PageMetaProvider } from '@alveole/components';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>
+ *       <Stack />
+ *     </PageMetaProvider>
+ *   );
+ * }
+ *
+ * // Une page peut surcharger ou ajouter des meta sans répéter le noindex :
+ * <Page title="Ma page" meta={[{ name: 'author', content: 'Alvéole' }]} />
+ * ```
+ */
+export const WithPageMetaProvider = () => null;
+/**
+ * Intégration avec un contrôleur de sidebar via `useSidebar()`.
+ *
+ * ```tsx
+ * const sidebarController = useSidebar();
+ * return (
+ *   <Page
+ *     sideBarController={sidebarController}
+ *     sidebar={<AdminNavigation sidebarController={sidebarController} />}
+ *     title="Mon titre"
+ *   >
+ *     ...
+ *   </Page>
+ * );
+ * ```
+ */
+export const WithSidebar = () => null;
 export * as Sources from './Page.stories.sources';

package/dist/core/Page/Page.stories.sources.d.ts

@@ -2,13 +2,16 @@ export declare const Default: () => string;
 export declare const WithOg: () => string;
 export declare const WithMetaRobots: () => string;
 export declare const WithMultipleMeta: () => string;
+export declare const WithPageMetaProvider: () => string;
 export declare const WithSidebar: () => string;
 export declare const storySources: {
     readonly Default: () => string;
     readonly WithOg: () => string;
     readonly WithMetaRobots: () => string;
     readonly WithMultipleMeta: () => string;
+    readonly WithPageMetaProvider: () => string;
     readonly WithSidebar: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Page.stories.sources.d.ts.map

package/dist/core/Page/Page.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,WAAW,cAAiW,CAAC;AAE1X,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Page.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmK,CAAC;AAExL,eAAO,MAAM,MAAM,cAA2O,CAAC;AAE/P,eAAO,MAAM,cAAc,cAAoP,CAAC;AAEhR,eAAO,MAAM,gBAAgB,cAAsa,CAAC;AAEpc,eAAO,MAAM,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;CAOf,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/core/Page/Page.stories.sources.js

@@ -4,11 +4,17 @@ export const Default = () => "export const Default = () => (\n  <Page title=\"Mo
 export const WithOg = () => "export const WithOg = () => (\n  <Page title=\"Mon titre\" description=\"Description\" og={{ title: 'OG titre', description: 'OG description' }}>\n    <Typography>Page avec Open Graph personnalisé</Typography>\n  </Page>\n);";
 export const WithMetaRobots = () => "export const WithMetaRobots = () => (\n  <Page title=\"Page privée\" meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>\n    <Typography>Cette page ne sera pas indexée par les moteurs de recherche.</Typography>\n  </Page>\n);";
 export const WithMultipleMeta = () => "export const WithMultipleMeta = () => (\n  <Page\n    title=\"Page complète\"\n    description=\"Avec plusieurs balises meta\"\n    meta={[\n      { name: 'robots', content: 'noindex, nofollow' },\n      { name: 'author', content: 'Alvéole' },\n      { httpEquiv: 'X-UA-Compatible', content: 'IE=edge' },\n    ]}\n  >\n    <Typography>Page avec plusieurs balises meta personnalisées.</Typography>\n  </Page>\n);";
-export const WithSidebar = () => "export const WithSidebar = () => (\n  <Box>\n    <Typography>\n      {`const sidebarController = useSidebar();\nreturn (\n  <Page\n    sideBarController={sidebarController}\n    sidebar={<AdminNavigation sidebarController={sidebarController} />}\n    title=\"Mon titre\"\n  >\n    {/* ... */}\n  </Page>\n);`}\n    </Typography>\n  </Box>\n);";
+export const WithPageMetaProvider = () => "export const WithPageMetaProvider = () => null;";
+export const WithSidebar = () => "export const WithSidebar = () => null;";
 export const storySources = {
     Default,
     WithOg,
     WithMetaRobots,
     WithMultipleMeta,
+    WithPageMetaProvider,
     WithSidebar,
 };
+export const storyDescriptions = {
+    WithPageMetaProvider: "Configure des meta globales pour toutes les pages via `PageMetaProvider` dans `app/_layout.tsx`.\nLes meta du provider sont injectées en premier ; la prop `meta` de chaque `<Page>` les complète ou les écrase.\n\n```tsx\nimport { PageMetaProvider } from '@alveole/components';\n\nexport default function RootLayout() {\n  return (\n    <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>\n      <Stack />\n    </PageMetaProvider>\n  );\n}\n\n// Une page peut surcharger ou ajouter des meta sans répéter le noindex :\n<Page title=\"Ma page\" meta={[{ name: 'author', content: 'Alvéole' }]} />\n```",
+    WithSidebar: "Intégration avec un contrôleur de sidebar via `useSidebar()`.\n\n```tsx\nconst sidebarController = useSidebar();\nreturn (\n  <Page\n    sideBarController={sidebarController}\n    sidebar={<AdminNavigation sidebarController={sidebarController} />}\n    title=\"Mon titre\"\n  >\n    ...\n  </Page>\n);\n```",
+};

package/dist/core/Page/PageContentScrollable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;aAHC,CAAC;mBAG7B,CAAC;;;;;;;;;4BAUF,CAAH;;;;;;;uBAfkB,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAwD3C,CAAC"}
+{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;aAHC,CAAC;mBAG7B,CAAC;;;;;;;;;4BAUF,CAAH;;;;;;;uBAfkB,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAyD3C,CAAC"}

package/dist/core/Page/PageContentScrollable.js

@@ -16,5 +16,5 @@ export const PageContentScrollable = React.forwardRef(function PageContentScroll
             onScrollToBottom?.();
         onScrollChange?.(contentOffset.y);
     };
-    return (_jsx(KeyboardAwareScrollView, { ref: scrollRef, contentContainerStyle: { minHeight: '100%', width: '100%', flexGrow: 1 }, style: { backgroundColor: defaultBackgroundColor ?? 'transparent' }, onScroll: handleScroll, scrollEventThrottle: 16, alwaysBounceVertical: onScrollToBottom != null, bounces: onScrollToBottom != null, overScrollMode: onScrollToBottom != null ? 'always' : 'never', children: _jsxs(Box, { tag: "page", ...boxProps, height: "100%", children: [beforeContent, children, footerContent] }) }));
+    return (_jsx(KeyboardAwareScrollView, { ref: scrollRef, contentContainerStyle: { minHeight: '100%', width: '100%', flexGrow: 1 }, style: { backgroundColor: defaultBackgroundColor ?? 'transparent' }, onScroll: handleScroll, scrollEventThrottle: 16, alwaysBounceVertical: onScrollToBottom != null, bounces: onScrollToBottom != null, overScrollMode: onScrollToBottom != null ? 'always' : 'never', bottomOffset: 24, children: _jsxs(Box, { tag: "page", ...boxProps, height: "100%", children: [beforeContent, children, footerContent] }) }));
 });

package/dist/core/Page/PageMetaContext.d.ts

@@ -4,6 +4,19 @@ type PageMetaContextValue = {
     meta: MetaTagProps[];
 };
 export declare const usePageMeta: () => PageMetaContextValue;
+/**
+ * Injecte des balises `<meta>` par défaut dans tous les `PageHead` enfants.
+ *
+ * Placez ce provider à la racine du layout (ex. `app/_layout.tsx`).
+ * Les meta du provider sont fusionnées avec celles passées en prop sur chaque `<Page>` :
+ * la prop `meta` de la page est placée après et prend le dessus en cas de doublon.
+ *
+ * @example
+ * // Rendre toutes les pages noindex sans répéter la balise sur chaque <Page> :
+ * <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>
+ *   <Stack />
+ * </PageMetaProvider>
+ */
 export declare const PageMetaProvider: ({ meta, children }: {
     meta: MetaTagProps[];
     children: React.ReactNode;

package/dist/core/Page/PageMetaContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageMetaContext.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageMetaContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,WAAW,4BAA0C,CAAC;AAEnE,eAAO,MAAM,gBAAgB,GAAI,oBAAoB;IAAE,IAAI,EAAE,YAAY,EAAE,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAEvG,CAAC"}
+{"version":3,"file":"PageMetaContext.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageMetaContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,WAAW,4BAA0C,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,GAAI,oBAAoB;IAAE,IAAI,EAAE,YAAY,EAAE,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAEvG,CAAC"}