@alveole/components 2.0.0-alpha.7 → 2.0.0-alpha.8

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

@@ -40,6 +40,11 @@ export declare const WithPageMetaProvider: () => null;
  * démontre que le scroll se fait bien au sein de la page.
  */
 export declare const WithScrollable: () => import("react").JSX.Element;
+/**
+ * Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.
+ * Désactivé par défaut : le fond est uni.
+ */
+export declare const WithGradient: () => import("react").JSX.Element;
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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":";;;;;;;;;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;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,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;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mCAI1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,mCAIxB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,YAAa,CAAC;AAEtC,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

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

@@ -46,6 +46,11 @@ export const WithPageMetaProvider = () => null;
  * démontre que le scroll se fait bien au sein de la page.
  */
 export const WithScrollable = () => (_jsx(Page, { title: "Page scrollable", scrollable: true, children: _jsx(Typography, { children: "Page avec du scroll." }) }));
+/**
+ * Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.
+ * Désactivé par défaut : le fond est uni.
+ */
+export const WithGradient = () => (_jsx(Page, { title: "Page avec d\u00E9grad\u00E9", gradient: true, children: _jsx(Typography, { children: "Page avec un fond en d\u00E9grad\u00E9." }) }));
 /**
  * Intégration avec un contrôleur de sidebar via `useSidebar()`.
  *

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

@@ -4,6 +4,7 @@ export declare const WithMetaRobots: () => string;
 export declare const WithMultipleMeta: () => string;
 export declare const WithPageMetaProvider: () => string;
 export declare const WithScrollable: () => string;
+export declare const WithGradient: () => string;
 export declare const WithSidebar: () => string;
 export declare const storySources: {
     readonly Default: () => string;
@@ -12,6 +13,7 @@ export declare const storySources: {
     readonly WithMultipleMeta: () => string;
     readonly WithPageMetaProvider: () => string;
     readonly WithScrollable: () => string;
+    readonly WithGradient: () => string;
     readonly WithSidebar: () => string;
 };
 export type StorySourceName = keyof typeof storySources;

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,oBAAoB,cAA0D,CAAC;AAE5F,eAAO,MAAM,cAAc,cAAiK,CAAC;AAE7L,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,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,CAItE,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,cAAc,cAAiK,CAAC;AAE7L,eAAO,MAAM,YAAY,cAAwK,CAAC;AAElM,eAAO,MAAM,WAAW,cAAiD,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAKtE,CAAC"}

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

@@ -6,6 +6,7 @@ export const WithMetaRobots = () => "export const WithMetaRobots = () => (\n  <P
 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 WithPageMetaProvider = () => "export const WithPageMetaProvider = () => null;";
 export const WithScrollable = () => "export const WithScrollable = () => (\n  <Page title=\"Page scrollable\" scrollable>\n    <Typography>Page avec du scroll.</Typography>\n  </Page>\n);";
+export const WithGradient = () => "export const WithGradient = () => (\n  <Page title=\"Page avec dégradé\" gradient>\n    <Typography>Page avec un fond en dégradé.</Typography>\n  </Page>\n);";
 export const WithSidebar = () => "export const WithSidebar = () => null;";
 export const storySources = {
     Default,
@@ -14,10 +15,12 @@ export const storySources = {
     WithMultipleMeta,
     WithPageMetaProvider,
     WithScrollable,
+    WithGradient,
     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```",
     WithScrollable: "Rend la page scrollable via l'attribut `scrollable`. Accepte aussi `mobile-only` ou `desktop-only`\npour limiter le scroll à une plateforme.\n\nCi-dessous, 4 Box de 300px de haut chacune : le contenu dépasse la hauteur de l'écran, ce qui\ndémontre que le scroll se fait bien au sein de la page.",
+    WithGradient: "Active le fond en dégradé vertical (`default-grey` → `alt-grey`) via `gradient`.\nDésactivé par défaut : le fond est uni.",
     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/Page.types.d.ts

@@ -11,6 +11,7 @@ export type PageProps = BoxProps & {
     title: string;
     description?: string;
     defaultBackgroundColor?: string;
+    gradient?: boolean;
     og?: {
         title?: string;
         description?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,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"}
+{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,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"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
 export type PageBackgroundProps = {
     children: React.ReactNode;
+    gradient?: boolean;
 };
 /**
- * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
- * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
- * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
- * où ils tombent dans la page.
+ * Le fond d'une page est par défaut une surface de la palette, unie. Un dégradé fait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne peut alors s'accorder à une valeur du
+ * thème. Il reste disponible en opt-in via `gradient`.
  */
-export declare const PageBackground: ({ children }: PageBackgroundProps) => React.JSX.Element;
+export declare const PageBackground: ({ children, gradient }: PageBackgroundProps) => React.JSX.Element;
 //# sourceMappingURL=PageBackground.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,cAAc,mBAAmB,sBAO/D,CAAC"}
+{"version":3,"file":"PageBackground.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,wBAAgC,mBAAmB,sBAoBjF,CAAC"}

package/dist/core/Page/PageBackground.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
+import { LinearGradient } from 'expo-linear-gradient';
 import { Box } from '../Box';
 import { useStyles } from './Page.styles';
 /**
- * Le fond d'une page est une surface de la palette, unie. Un dégradé ferait varier la
- * couleur selon la hauteur : aucun contenu posé dessus ne pourrait alors s'accorder à une
- * valeur du thème, et deux éléments identiques n'auraient pas le même fond selon l'endroit
- * où ils tombent dans la page.
+ * Le fond d'une page est par défaut une surface de la palette, unie. Un dégradé fait varier la
+ * couleur selon la hauteur : aucun contenu posé dessus ne peut alors s'accorder à une valeur du
+ * thème. Il reste disponible en opt-in via `gradient`.
  */
-export const PageBackground = ({ children }) => {
+export const PageBackground = ({ children, gradient = false }) => {
     const styles = useStyles();
     const { color } = useTheme();
+    if (gradient) {
+        return (_jsx(LinearGradient, { colors: [color.light.background['default-grey'], color.light.background['alt-grey']], start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 }, style: styles.pageBackground, children: children }));
+    }
     return (_jsx(Box, { style: { ...styles.pageBackground, backgroundColor: color.light.background['default-grey'] }, children: children }));
 };

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

@@ -4,7 +4,7 @@ declare const _default: {
     experimental: false;
     description: string;
     shortDescription: string;
-    component: ({ children }: import("./PageBackground").PageBackgroundProps) => import("react").JSX.Element;
+    component: ({ children, gradient }: import("./PageBackground").PageBackgroundProps) => import("react").JSX.Element;
     styleFn: () => {
         pageBackground: {
             flex: number;
@@ -20,5 +20,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const Gradient: () => import("react").JSX.Element;
 export * as Sources from './PageBackground.stories.sources';
 //# sourceMappingURL=PageBackground.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageBackground.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,wBAiBkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"PageBackground.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,wBAmBkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAMpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

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

@@ -13,8 +13,10 @@ export default {
 
 - Occupe tout l'espace disponible (\`flex: 1\`, \`width: 100%\`).
 - Applique la couleur de palette \`background.default-grey\` du thème.
+- Avec \`gradient\`, applique un dégradé vertical \`default-grey\` → \`alt-grey\` (désactivé par défaut).
+- Avec \`gradient\`, applique un dégradé vertical \`default-grey\` → \`alt-grey\` (désactivé par défaut).
 
-## Pourquoi un fond uni ?
+## Pourquoi un fond uni par défaut ?
 
 Un dégradé ferait varier la couleur selon la hauteur : aucun contenu posé dessus ne pourrait s'accorder à une valeur du thème, et deux éléments identiques n'auraient pas le même fond selon leur position dans la page.`,
     shortDescription: 'Fond de page uni utilisant la couleur de palette default-grey du thème.',
@@ -22,4 +24,5 @@ Un dégradé ferait varier la couleur selon la hauteur : aucun contenu posé des
     styleFn: useStyles,
 };
 export const Default = () => (_jsx(Box, { style: { height: 300, width: '100%' }, children: _jsx(PageBackground, { children: _jsx(Typography, { children: "Contenu pos\u00E9 sur le fond de page" }) }) }));
+export const Gradient = () => (_jsx(Box, { style: { height: 300, width: '100%' }, children: _jsx(PageBackground, { gradient: true, children: _jsx(Typography, { children: "Contenu pos\u00E9 sur le fond en d\u00E9grad\u00E9" }) }) }));
 export * as Sources from './PageBackground.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PageBackground.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqN,CAAC;AAE1O,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"PageBackground.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageBackground.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqN,CAAC;AAE1O,eAAO,MAAM,QAAQ,cAAkO,CAAC;AAExP,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Page/PageBackground.stories.tsx
 export const Default = () => "export const Default = () => (\n  <Box style={{ height: 300, width: '100%' }}>\n    <PageBackground>\n      <Typography>Contenu posé sur le fond de page</Typography>\n    </PageBackground>\n  </Box>\n);";
+export const Gradient = () => "export const Gradient = () => (\n  <Box style={{ height: 300, width: '100%' }}>\n    <PageBackground gradient>\n      <Typography>Contenu posé sur le fond en dégradé</Typography>\n    </PageBackground>\n  </Box>\n);";
 export const storySources = {
     Default,
+    Gradient,
 };

package/dist/core/Page/PageContent.js

@@ -10,7 +10,7 @@ import { PageContentDefault } from './PageContentDefault';
 import { PageContentScrollable } from './PageContentScrollable';
 import { usePageStatusBar } from './usePageStatusBar';
 export const PageContent = (props) => {
-    const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
+    const { gradient, scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
     const { isVariant } = useTheme();
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
@@ -27,5 +27,5 @@ export const PageContent = (props) => {
         (scrollable === 'desktop-only' && isVariant('desktop')) ||
         (scrollable === 'mobile-only' && mobileOrTablet), [isVariant, mobileOrTablet, scrollable]);
     const renderContent = () => isScrollable ? (_jsx(PageContentScrollable, { ...props, style: { backgroundColor: 'transparent' }, onScrollChange: handleInternalScrollChange })) : (_jsx(PageContentDefault, { ...props, style: { backgroundColor: 'transparent' } }));
-    return (_jsx(PageBackground, { children: sidebar || renderToolbar ? renderPageWithSidebar(renderContent()) : renderContent() }));
+    return (_jsx(PageBackground, { gradient: gradient, children: sidebar || renderToolbar ? renderPageWithSidebar(renderContent()) : renderContent() }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PageContentDefault.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentDefault.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;AAEhD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAuBhE,CAAC"}
+{"version":3,"file":"PageContentDefault.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentDefault.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;AAEhD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAwBhE,CAAC"}

package/dist/core/Page/PageContentDefault.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 export const PageContentDefault = (props) => {
-    const { beforeContent, footerContent, children, title, description, og, scrollable: _scrollable, sidebar: _sidebar, sideBarController: _sideBarController, onScrollToBottom: _onScrollToBottom, onEndReachedThreshold: _onEndReachedThreshold, ...pageProps } = props;
+    const { beforeContent, footerContent, children, title, description, og, scrollable: _scrollable, gradient: _gradient, sidebar: _sidebar, sideBarController: _sideBarController, onScrollToBottom: _onScrollToBottom, onEndReachedThreshold: _onEndReachedThreshold, ...pageProps } = props;
     return (_jsxs(Box, { tag: "page", ...pageProps, height: "100%", children: [beforeContent, children, footerContent] }));
 };

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

@@ -32,6 +32,7 @@ export declare const PageContentScrollable: React.ForwardRefExoticComponent<Omit
     title: string;
     description?: string;
     defaultBackgroundColor?: string;
+    gradient?: boolean;
     og?: {
         title?: string;
         description?: string;

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,cAAc,CAAC;AAE9C,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;;;;;;;;;;;;;;;;;;;;;;;;;aALV,CAAA;mBACZ,CAAC;;;;;;;;;4BASF,CAAC;;;;;;;uBAVS,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAyD3C,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,cAAc,CAAC;AAE9C,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;;;;;;;;;;;;;;;;;;;;;;;;;;aAJtB,CAAC;mBACX,CAAD;;;;;;;;;4BAUK,CAAD;;;;;;;uBAZgB,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDA0D3C,CAAC"}

package/dist/core/Page/PageContentScrollable.js

@@ -4,7 +4,7 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 import { Box } from '../../core/Box';
 export const PageContentScrollable = React.forwardRef(function PageContentScrollable(props, ref) {
     const { beforeContent, footerContent, children, title, description, og, defaultBackgroundColor, onScrollToBottom, onEndReachedThreshold = 100, onScrollChange, ...pageProps } = props;
-    const { scrollable: _scrollable, sidebar: _sidebar, sideBarController: _sideBarController, ...boxProps } = pageProps;
+    const { scrollable: _scrollable, gradient: _gradient, sidebar: _sidebar, sideBarController: _sideBarController, ...boxProps } = pageProps;
     const scrollRef = useRef(null);
     useImperativeHandle(ref, () => ({
         scrollToTop: () => scrollRef.current?.scrollTo({ y: 0, animated: true }),

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.7";
+export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.8";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.7";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.8";