@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -1,5 +1,6 @@
 import { Href } from 'expo-router';
 import React, { CSSProperties } from 'react';
+import { BoxProps } from '../Box';
 import { CibleDuLien } from './ouvertureDuLien';
 export type CanAccessHref = (href: Href & string) => boolean;
 /** Contexte optionnel pour fournir la logique d'accès aux liens (ex. droits métier). Non fourni = tous les liens sont cliquables. */
@@ -11,7 +12,8 @@ export type AProps = React.PropsWithChildren<{
     /** default: "push" */
     direction?: 'push' | 'replace' | 'dismiss';
     style?: CSSProperties;
-    hoverStyle?: CSSProperties;
+    /** Fond du lien, clauses de Tamagui comprises (`{ hover: ... }`, ADR 0031). */
+    backgroundColor?: BoxProps['backgroundColor'];
     /** Override la logique d'accès (sinon utilise LinkAccessContext si fourni, sinon accès autorisé). */
     canAccessHref?: CanAccessHref;
     /** Marque le lien comme représentant l'emplacement courant. "page" pour la page affichée. */

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

@@ -1 +1 @@
-{"version":3,"file":"A.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAQ,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,aAAa,EAA6B,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC;AAE7D,qIAAqI;AACrI,eAAO,MAAM,iBAAiB,qCAA4C,CAAC;AAE3E,0GAA0G;AAC1G,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,aAAa,KAAG,aAGhE,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,qGAAqG;IACrG,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7D,gIAAgI;IAChI,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC,CAAC;AAEH,eAAO,MAAM,CAAC,GAAI,OAAO,MAAM,sBA8D9B,CAAC"}
+{"version":3,"file":"A.d.ts","sourceRoot":"","sources":["../../../src/core/A/A.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAQ,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,EAAE,aAAa,EAA6B,MAAM,OAAO,CAAC;AAExE,OAAO,EAAO,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,OAAO,CAAC;AAE7D,qIAAqI;AACrI,eAAO,MAAM,iBAAiB,qCAA4C,CAAC;AAE3E,0GAA0G;AAC1G,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,aAAa,KAAG,aAGhE,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC9C,qGAAqG;IACrG,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7D,gIAAgI;IAChI,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC,CAAC;AAEH,eAAO,MAAM,CAAC,GAAI,OAAO,MAAM,sBAqE9B,CAAC"}

package/dist/core/A/A.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { focusRingProps } from '@alveole/theme';
 import { Link } from 'expo-router';
 import { createContext, useContext } from 'react';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 import { Box } from '../Box';
 import { GridColumnContext } from '../Grid';
 import { useStyles } from './A.styles';
@@ -15,7 +15,7 @@ export const useCanAccessHref = (canAccessProp) => {
     return canAccessProp ?? canAccessFromContext ?? (() => true);
 };
 export const A = (props) => {
-    const { children, href, direction = 'push', style, hoverStyle, ariaCurrent, target, canAccessHref: canAccessProp, } = props;
+    const { children, href, direction = 'push', style, backgroundColor, ariaCurrent, target, canAccessHref: canAccessProp, } = props;
     const styles = useStyles();
     // Sur le web, ce Pressable rend le `<a>` lui-meme : il porte donc une couleur de texte, que
     // `ViewStyle` ne connait pas. `TextStyle` l'etend et la decrit.
@@ -23,7 +23,10 @@ export const A = (props) => {
     const canAccess = useCanAccessHref(canAccessProp);
     const fill = useContext(GridColumnContext) ? styles.fill : undefined;
     const { navigateurIntegre, propsDuPressable, annonce } = ouvertureDuLien(href, target);
-    const contenu = (_jsxs(Box, { tag: "a-pressable", style: { ...styles.pressable, ...fill, ...style }, hoverStyle: hoverStyle, children: [children, annonce] }));
+    const contenu = (_jsxs(Box, { tag: "a-pressable", style: { ...styles.pressable, ...fill, ...style }, backgroundColor: backgroundColor, 
+        // En natif, les clauses de survol des descendants ne doivent pas capter le toucher
+        // destiné au Pressable du lien. Le web garde ses interactions et son survol.
+        pointerEvents: Platform.OS === 'web' ? 'auto' : 'none', children: [children, annonce] }));
     const lienNavigateurIntegre = (_jsx(Pressable, { accessibilityRole: "link", "aria-current": ariaCurrent, ...propsDuPressable, style: { ...styleDuLien, ...fill }, ...focusRingProps(), children: contenu }));
     const expoLink = (_jsx(Link, { href: href, asChild: true, replace: direction === 'replace', push: direction === 'push', dismissTo: direction === 'dismiss', children: _jsx(Pressable, { accessibilityRole: "link", "aria-current": ariaCurrent, ...propsDuPressable, style: { ...styleDuLien, ...fill }, ...focusRingProps(), children: contenu }) }));
     if (!canAccess(href))

package/dist/core/AlveoleProvider/AlveoleProvider.d.ts

@@ -0,0 +1,17 @@
+import { type ThemeProviderProps } from '@alveole/theme';
+import React from 'react';
+import { type TamaguiInternalConfig } from 'tamagui';
+export type AlveoleProviderProps = React.PropsWithChildren<Omit<ThemeProviderProps, 'color' | 'children'> & {
+    /** Config Tamagui de l'application, qui porte aussi son `declare module 'tamagui'`. */
+    tamaguiConfig: TamaguiInternalConfig;
+    /** Surcharge partielle des couleurs Alveole, transmise au `ThemeProvider`. */
+    palette?: ThemeProviderProps['color'];
+    /** `false` pour une application qui monte déjà son propre `KeyboardProvider`. */
+    keyboardProvider?: boolean;
+}>;
+/**
+ * Monte la pile obligatoire dans l'ordre que les composants attendent (ADR 0034) : le Sheet
+ * de Tamagui v3 lit ses retraits dans `SafeAreaProvider`, qui enveloppe donc `TamaguiProvider`.
+ */
+export declare const AlveoleProvider: (props: AlveoleProviderProps) => React.JSX.Element;
+//# sourceMappingURL=AlveoleProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlveoleProvider.d.ts","sourceRoot":"","sources":["../../../src/core/AlveoleProvider/AlveoleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGtE,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,iBAAiB,CACxD,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/C,uFAAuF;IACvF,aAAa,EAAE,qBAAqB,CAAC;IACrC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACtC,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CACF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAa1D,CAAC"}

package/dist/core/AlveoleProvider/AlveoleProvider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from '@alveole/theme';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
+import { TamaguiProvider } from 'tamagui';
+import { Toasts } from '../../ui/Toast';
+/**
+ * Monte la pile obligatoire dans l'ordre que les composants attendent (ADR 0034) : le Sheet
+ * de Tamagui v3 lit ses retraits dans `SafeAreaProvider`, qui enveloppe donc `TamaguiProvider`.
+ */
+export const AlveoleProvider = (props) => {
+    const { tamaguiConfig, palette, keyboardProvider = true, children, ...themeProps } = props;
+    const content = _jsx(Toasts, { children: children });
+    return (_jsx(SafeAreaProvider, { initialMetrics: initialWindowMetrics, children: _jsx(ThemeProvider, { ...themeProps, color: palette, children: _jsx(TamaguiProvider, { config: tamaguiConfig, defaultTheme: "light", children: keyboardProvider ? _jsx(KeyboardProvider, { children: content }) : content }) }) }));
+};

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

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

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

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

package/dist/core/AlveoleProvider/index.js

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

package/dist/core/AnchorHeading/AnchorHeading.d.ts

@@ -1,8 +1,12 @@
+import type { HeadingLevel } from '../Heading';
 import type { TypographyProps } from '../Typography';
 export type AnchorHeadingProps = {
-    children: string;
+    children: React.ReactNode;
     style?: TypographyProps['style'];
+    color?: TypographyProps['color'];
+    /** Sur le web, rend un `Heading` : vraie balise, taille et couleur de titre. */
+    as?: HeadingLevel;
     scrollMarginTop?: number;
 };
-export declare const AnchorHeading: ({ children, style }: AnchorHeadingProps) => import("react").JSX.Element;
+export declare const AnchorHeading: ({ children, style, color }: AnchorHeadingProps) => import("react").JSX.Element;
 //# sourceMappingURL=AnchorHeading.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,qBAAqB,kBAAkB,gCAEpE,CAAC"}
+{"version":3,"file":"AnchorHeading.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,gFAAgF;IAChF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,4BAA4B,kBAAkB,gCAI3E,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '../Typography';
-export const AnchorHeading = ({ children, style }) => (_jsx(Typography, { style: style, children: children }));
+export const AnchorHeading = ({ children, style, color }) => (_jsx(Typography, { style: style, color: color, children: children }));

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

@@ -4,10 +4,11 @@ declare const _default: {
     experimental: true;
     webOnly: true;
     description: string;
-    component: ({ children, style }: import("./AnchorHeading").AnchorHeadingProps) => import("react").JSX.Element;
+    component: ({ children, style, color }: import("./AnchorHeading").AnchorHeadingProps) => import("react").JSX.Element;
     styleFn: () => {};
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const AvecNiveau: () => import("react").JSX.Element;
 export * as Sources from './AnchorHeading.stories.sources';
 //# sourceMappingURL=AnchorHeading.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAGnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"AnchorHeading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAGnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAAmE,CAAC;AAE3F,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.stories.js

@@ -14,4 +14,5 @@ export const Default = () => {
     const { text } = useTheme();
     return _jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: "Mon exemple de titre" });
 };
+export const AvecNiveau = () => _jsx(AnchorHeading, { as: "h2", children: "Titre h2 avec ancre" });
 export * as Sources from './AnchorHeading.stories.sources';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2K,CAAC;AAEhM,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"AnchorHeading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2K,CAAC;AAEhM,eAAO,MAAM,UAAU,cAAwG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/AnchorHeading/AnchorHeading.stories.tsx
 export const Default = () => "export const Default = () => {\n  const { text } = useTheme();\n  return <AnchorHeading style={text.Titres['H5 - XS']}>Mon exemple de titre</AnchorHeading>;\n};";
+export const AvecNiveau = () => "export const AvecNiveau = () => <AnchorHeading as=\"h2\">Titre h2 avec ancre</AnchorHeading>;";
 export const storySources = {
     Default,
+    AvecNiveau,
 };

package/dist/core/AnchorHeading/AnchorHeading.web.d.ts

@@ -1,3 +1,3 @@
 import type { AnchorHeadingProps } from './AnchorHeading';
-export declare const AnchorHeading: ({ children, style, scrollMarginTop }: AnchorHeadingProps) => import("react").JSX.Element;
+export declare const AnchorHeading: ({ children, style, color: couleur, as, scrollMarginTop }: AnchorHeadingProps) => import("react").JSX.Element;
 //# sourceMappingURL=AnchorHeading.web.d.ts.map

package/dist/core/AnchorHeading/AnchorHeading.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.web.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.web.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,eAAO,MAAM,aAAa,GAAI,sCAAsC,kBAAkB,gCAgDrF,CAAC"}
+{"version":3,"file":"AnchorHeading.web.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.web.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,eAAO,MAAM,aAAa,GAAI,0DAA0D,kBAAkB,gCA0DzG,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.web.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
 import { useState } from 'react';
 import { LucideIcon } from '../../ui/LucideIcon';
+import { Heading } from '../Heading';
 import { Typography } from '../Typography';
-import { toSlug } from './slug';
-export const AnchorHeading = ({ children, style, scrollMarginTop }) => {
+import { texteDe, toSlug } from './slug';
+export const AnchorHeading = ({ children, style, color: couleur, as, scrollMarginTop }) => {
     const { color } = useTheme();
     const [hovered, setHovered] = useState(false);
     const [iconHovered, setIconHovered] = useState(false);
@@ -12,14 +13,16 @@ export const AnchorHeading = ({ children, style, scrollMarginTop }) => {
     // Un state convient ici, contrairement a la bague : montrer le lien quelle que soit la
     // provenance du focus est inoffensif, l'afficher est precisement ce qu'on veut.
     const [focused, setFocused] = useState(false);
-    const slug = toSlug(children);
+    const texte = texteDe(children);
+    // shortcut: deux titres identiques partagent le meme id, suffixer si une page en a besoin.
+    const slug = toSlug(texte);
     return (_jsxs("div", { id: slug, style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
             gap: 6,
             ...(scrollMarginTop != null ? { scrollMarginTop } : null),
-        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(Typography, { style: style, children: children }), _jsx("a", { href: `#${slug}`, "aria-label": `Lien vers la section ${children}`, [FOCUS_ATTRIBUTE]: 'ring', style: {
+        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [as ? (_jsx(Heading, { as: as, style: style, color: couleur, children: children })) : (_jsx(Typography, { style: style, color: couleur, children: children })), _jsx("a", { href: `#${slug}`, "aria-label": `Lien vers la section ${texte}`, [FOCUS_ATTRIBUTE]: 'ring', style: {
                     opacity: hovered || focused ? 1 : 0,
                     transition: 'opacity 0.15s',
                     display: 'flex',

package/dist/core/AnchorHeading/slug.d.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 /**
  * L'ancre d'un titre. Extrait de AnchorHeading pour que ce qui pointe vers une ancre la
  * calcule de la meme facon : un sommaire qui slugifie autrement renvoie dans le vide.
  */
 export declare const toSlug: (value: string) => string;
+/** Le texte brut d'un titre, gras ou code compris : de quoi en tirer l'ancre et le nom du lien. */
+export declare const texteDe: (node: React.ReactNode) => string;
 //# sourceMappingURL=slug.d.ts.map

package/dist/core/AnchorHeading/slug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slug.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/slug.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,WAML,CAAC"}
+{"version":3,"file":"slug.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/slug.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,WAML,CAAC;AAEhC,mGAAmG;AACnG,eAAO,MAAM,OAAO,GAAI,MAAM,KAAK,CAAC,SAAS,KAAG,MAK/C,CAAC"}

package/dist/core/AnchorHeading/slug.js

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * L'ancre d'un titre. Extrait de AnchorHeading pour que ce qui pointe vers une ancre la
  * calcule de la meme facon : un sommaire qui slugifie autrement renvoie dans le vide.
@@ -8,3 +9,13 @@ export const toSlug = (value) => value
     .replace(/[̀-ͯ]/g, '')
     .replace(/\s+/g, '-')
     .replace(/[^a-z0-9-]/g, '');
+/** Le texte brut d'un titre, gras ou code compris : de quoi en tirer l'ancre et le nom du lien. */
+export const texteDe = (node) => {
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(texteDe).join('');
+    if (React.isValidElement(node))
+        return texteDe(node.props.children);
+    return '';
+};

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

@@ -1,29 +1,29 @@
 import { RNTamaguiViewNonStyleProps, TamaguiElement, ViewProps as TamaguiViewProps } from '@tamagui/core';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { BoxStyle } from './Box.types';
-export type BoxProps = Pick<TamaguiViewProps, 'exitStyle' | 'focusStyle' | 'pressStyle' | 'disabledStyle'> & RNTamaguiViewNonStyleProps & BoxStyle & {
-    hoverStyle?: CSSProperties;
+export type BoxProps = Omit<TamaguiViewProps, keyof BoxStyle | 'tag' | 'style'> & Omit<RNTamaguiViewNonStyleProps, 'tag'> & BoxStyle & {
+    tag?: string;
 };
 export type BoxElement = TamaguiElement;
-export declare const Box: React.ForwardRefExoticComponent<Pick<import("tamagui").StackProps, "pressStyle" | "focusStyle" | "disabledStyle" | "exitStyle"> & RNTamaguiViewNonStyleProps & Pick<import("tamagui").StackProps, "display" | "flex" | "flexWrap" | "flexDirection" | "opacity" | "overflow"> & {
+export declare const Box: React.ForwardRefExoticComponent<Omit<TamaguiViewProps, "flex" | "display" | "overflow" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "flexDirection" | "flexWrap" | "gap" | "style" | "justify" | keyof import("../..").SizeStyle | "p" | "pl" | "pr" | "pt" | "pb" | "m" | "ml" | "mr" | "mt" | "mb" | "tag"> & Omit<RNTamaguiViewNonStyleProps, "tag"> & Pick<TamaguiViewProps, "flex" | "display" | "overflow" | "opacity" | "flexDirection" | "flexWrap"> & {
     justify?: TamaguiViewProps["justifyContent"];
 } & import("../..").SizeStyle & {
-    p?: number | import("@alveole/theme").SpacingKey;
-    pl?: number | import("@alveole/theme").SpacingKey;
-    pr?: number | import("@alveole/theme").SpacingKey;
-    pt?: number | import("@alveole/theme").SpacingKey;
-    pb?: number | import("@alveole/theme").SpacingKey;
-    m?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    ml?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mr?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mt?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    mb?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-    backgroundColor?: string;
-    borderWidth?: number;
-    borderRadius?: number | string;
-    borderColor?: string;
-    gap?: number | import("@alveole/theme").SpacingKey;
+    p?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+    pl?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+    pr?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+    pt?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+    pb?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+    m?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+    ml?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+    mr?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+    mt?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+    mb?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+    backgroundColor?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+    borderWidth?: TamaguiViewProps["borderWidth"];
+    borderRadius?: import("@alveole/theme").RadiusKey;
+    borderColor?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+    gap?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
 } & {
-    hoverStyle?: CSSProperties;
+    tag?: string;
 } & React.RefAttributes<TamaguiElement>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAE1B,cAAc,EAEd,SAAS,IAAI,gBAAgB,EAC9B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,GACxG,0BAA0B,GAC1B,QAAQ,GAAG;IACT,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAGJ,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;iBANC,aAAa;wCAgD5B,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,0BAA0B,EAE1B,cAAc,EAEd,SAAS,IAAI,gBAAgB,EAC9B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAOvC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC,GAC7E,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,GACvC,QAAQ,GAAG;IAGT,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAGJ,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;UANN,MAAM;wCAkDd,CAAC"}

package/dist/core/Box/Box.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RadiusList } from '@alveole/theme';
 import { styled, View as TamaguiView, } from '@tamagui/core';
 import React from 'react';
-import { versStyleTamagui } from '../styleTamagui/versStyleTamagui';
+import { aplatirStyle } from '../styleTamagui/aplatirStyle';
+import { definis } from '../styleTamagui/definis';
+import { correctionFlexDuWeb } from '../styleTamagui/flexDuWeb';
+import { elementDuTag } from './elementDuTag';
 import { resolveSpacing } from './resolveSpacing';
 const StyledView = styled(TamaguiView, { name: 'Box' });
 export const Box = React.forwardRef(function Box(props, ref) {
-    const { tag, style, borderRadius, hoverStyle, mt, mb, mr, ml, m, pt, pb, pl, pr, p, gap, ...viewProps } = props;
+    const { tag, style, borderRadius, mt, mb, mr, ml, m, pt, pb, pl, pr, p, gap, ...viewProps } = props;
+    const rayon = borderRadius && RadiusList[borderRadius];
     const radius = {
-        borderBottomRightRadius: borderRadius,
-        borderTopRightRadius: borderRadius,
-        borderBottomLeftRadius: borderRadius,
-        borderTopLeftRadius: borderRadius,
+        borderBottomRightRadius: rayon,
+        borderTopRightRadius: rayon,
+        borderBottomLeftRadius: rayon,
+        borderTopLeftRadius: rayon,
     };
     const margins = {
         mt: resolveSpacing(mt),
@@ -29,5 +34,6 @@ export const Box = React.forwardRef(function Box(props, ref) {
     const spacings = {
         gap: resolveSpacing(gap),
     };
-    return (_jsx(StyledView, { ref: ref, tag: tag ?? 'box', style: style, ...radius, hoverStyle: versStyleTamagui(hoverStyle), ...viewProps, ...margins, ...paddings, ...spacings }));
+    const correctionFlex = correctionFlexDuWeb(style, viewProps.flex);
+    return (_jsx(StyledView, { ref: ref, render: elementDuTag(tag), style: { ...aplatirStyle(style), ...correctionFlex }, ...radius, ...viewProps, ...definis(margins), ...definis(paddings), ...definis(spacings) }));
 });

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

@@ -4,26 +4,26 @@ declare const _default: {
     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"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").ViewProps, "flex" | "display" | "overflow" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "flexDirection" | "flexWrap" | "gap" | "style" | "justify" | keyof import("../..").SizeStyle | "p" | "pl" | "pr" | "pt" | "pb" | "m" | "ml" | "mr" | "mt" | "mb" | "tag"> & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "tag"> & Pick<import("tamagui").ViewProps, "flex" | "display" | "overflow" | "opacity" | "flexDirection" | "flexWrap"> & {
         justify?: import("tamagui").ViewProps["justifyContent"];
     } & import("../..").SizeStyle & {
-        p?: number | import("@alveole/theme").SpacingKey;
-        pl?: number | import("@alveole/theme").SpacingKey;
-        pr?: number | import("@alveole/theme").SpacingKey;
-        pt?: number | import("@alveole/theme").SpacingKey;
-        pb?: number | import("@alveole/theme").SpacingKey;
-        m?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        ml?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mr?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mt?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        mb?: number | `${string}%` | import("@alveole/theme").SpacingKey | "auto";
-        backgroundColor?: string;
-        borderWidth?: number;
-        borderRadius?: number | string;
-        borderColor?: string;
-        gap?: number | import("@alveole/theme").SpacingKey;
+        p?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pl?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pr?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pt?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        pb?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
+        m?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        ml?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mr?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mt?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        mb?: `${string}%` | ("0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W") | "auto";
+        backgroundColor?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+        borderWidth?: import("tamagui").ViewProps["borderWidth"];
+        borderRadius?: import("@alveole/theme").RadiusKey;
+        borderColor?: (import("@alveole/theme").ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", import("@alveole/theme").ThemeColor | "transparent">>;
+        gap?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
     } & {
-        hoverStyle?: import("react").CSSProperties;
+        tag?: string;
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => string;
 };
@@ -32,5 +32,9 @@ export declare const BoxDefault: () => import("react").JSX.Element;
 export declare const BoxPadded: () => import("react").JSX.Element;
 export declare const BoxPaddedWithBackground: () => import("react").JSX.Element;
 export declare const BoxHovered: () => import("react").JSX.Element;
+export declare const BoxSansTag: () => import("react").JSX.Element;
+export declare const BoxFlexDansParentIndefini: () => import("react").JSX.Element;
+export declare const BoxStyles: () => import("react").JSX.Element;
+export declare const BoxTokens: () => import("react").JSX.Element;
 export * as Sources from './Box.stories.sources';
 //# sourceMappingURL=Box.stories.d.ts.map

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,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"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,UAAU,mCAItB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAIrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAOnC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAGF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAGF,eAAO,MAAM,yBAAyB,mCAYrC,CAAC;AAGF,eAAO,MAAM,SAAS,mCAYrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAMrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spacings, useTheme } from '@alveole/theme';
 import { Typography } from '../Typography';
 import { Box } from './Box';
 export default {
@@ -11,7 +12,23 @@ export default {
     styleFn: () => 'Aucun style appliqué',
 };
 export const BoxDefault = () => (_jsx(Box, { tag: "box", children: _jsx(Typography, { children: "Contenu par d\u00E9faut" }) }));
-export const BoxPadded = () => (_jsx(Box, { tag: "padded", p: 16, children: _jsx(Typography, { children: "Box avec padding" }) }));
-export const BoxPaddedWithBackground = () => (_jsx(Box, { tag: "padded-with-background", backgroundColor: '#f0f0f0', p: 16, children: _jsx(Typography, { children: "Box avec fond gris clair et padding" }) }));
-export const BoxHovered = () => (_jsx(Box, { tag: "hovered", hoverStyle: { background: '#f0f0f0' }, children: _jsx(Typography, { children: "Box avec fond gris changeant au hover" }) }));
+export const BoxPadded = () => (_jsx(Box, { tag: "padded", p: "2W", children: _jsx(Typography, { children: "Box avec padding" }) }));
+export const BoxPaddedWithBackground = () => {
+    const { color } = useTheme();
+    return (_jsx(Box, { tag: "padded-with-background", backgroundColor: color.light.background['alt-grey'], p: "2W", children: _jsx(Typography, { children: "Box avec fond gris clair et padding" }) }));
+};
+export const BoxHovered = () => {
+    const { color } = useTheme();
+    return (_jsx(Box, { tag: "hovered", backgroundColor: { hover: color.light.background['alt-grey'] }, children: _jsx(Typography, { children: "Box avec fond gris changeant au hover" }) }));
+};
+// Sans tag, Box rend l'element inconnu <box> : il se met en page comme une div.
+export const BoxSansTag = () => {
+    const { color } = useTheme();
+    return (_jsxs(Box, { tag: "box-comparaison", gap: "1W", children: [_jsx(Box, { backgroundColor: color.light.background['alt-grey'], p: "2W", children: _jsx(Typography, { children: "Box sans tag" }) }), _jsx(Box, { tag: "div", backgroundColor: color.light.background['alt-grey'], p: "2W", children: _jsx(Typography, { children: "Box en div" }) })] }));
+};
+// Dans un parent de hauteur indéfinie, `flex: 1` garde la hauteur de son contenu, en prop comme en style.
+export const BoxFlexDansParentIndefini = () => (_jsxs(Box, { tag: "box-flex-parent", children: [_jsx(Box, { tag: "box-flex-en-prop", flex: 1, children: _jsx(Typography, { children: "flex: 1 en prop" }) }), _jsx(Box, { tag: "box-flex-en-style", style: { flex: 1 }, children: _jsx(Typography, { children: "flex: 1 en style" }) }), _jsx(Box, { tag: "box-flex-en-tableau", style: [{ flex: 1 }, { paddingLeft: Spacings['6W'] }], children: _jsx(Typography, { children: "flex: 1 en tableau, avec un autre style" }) })] }));
+// Un style objet, en tableau ou en tableau imbriqué est fusionné avant d'atteindre le DOM.
+export const BoxStyles = () => (_jsxs(Box, { gap: "1W", children: [_jsx(Box, { tag: "box-style-objet", style: { paddingLeft: Spacings['6W'] }, children: _jsx(Typography, { children: "Style objet" }) }), _jsx(Box, { tag: "box-style-tableau", style: [{ paddingLeft: Spacings['6W'] }, { marginTop: Spacings['0V'] }], children: _jsx(Typography, { children: "Style en tableau" }) }), _jsx(Box, { tag: "box-style-imbrique", style: [[{ paddingLeft: Spacings['6W'] }], { marginTop: Spacings['0V'] }], children: _jsx(Typography, { children: "Style en tableau imbriqu\u00E9" }) })] }));
+export const BoxTokens = () => (_jsx(Box, { tag: "box-tokens-parent", width: 400, children: _jsx(Box, { tag: "box-tokens", width: 100, p: "2W", ml: "auto", mr: "10%", borderRadius: "md", children: _jsx(Typography, { children: "Tokens" }) }) }));
 export * as Sources from './Box.stories.sources';

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

@@ -2,11 +2,19 @@ export declare const BoxDefault: () => string;
 export declare const BoxPadded: () => string;
 export declare const BoxPaddedWithBackground: () => string;
 export declare const BoxHovered: () => string;
+export declare const BoxSansTag: () => string;
+export declare const BoxFlexDansParentIndefini: () => string;
+export declare const BoxStyles: () => string;
+export declare const BoxTokens: () => string;
 export declare const storySources: {
     readonly BoxDefault: () => string;
     readonly BoxPadded: () => string;
     readonly BoxPaddedWithBackground: () => string;
     readonly BoxHovered: () => string;
+    readonly BoxSansTag: () => string;
+    readonly BoxFlexDansParentIndefini: () => string;
+    readonly BoxStyles: () => string;
+    readonly BoxTokens: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Box.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,cAAgI,CAAC;AAExJ,eAAO,MAAM,SAAS,cAAuI,CAAC;AAE9J,eAAO,MAAM,uBAAuB,cAAoN,CAAC;AAEzP,eAAO,MAAM,UAAU,cAA8L,CAAC;AAEtN,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Box.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,cAAgI,CAAC;AAExJ,eAAO,MAAM,SAAS,cAAyI,CAAC;AAEhK,eAAO,MAAM,uBAAuB,cAAwS,CAAC;AAE7U,eAAO,MAAM,UAAU,cAAgR,CAAC;AAExS,eAAO,MAAM,UAAU,cAAub,CAAC;AAE/c,eAAO,MAAM,yBAAyB,cAA2f,CAAC;AAEliB,eAAO,MAAM,SAAS,cAAkjB,CAAC;AAEzkB,eAAO,MAAM,SAAS,cAAyP,CAAC;AAEhR,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,12 +1,20 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Box/Box.stories.tsx
 export const BoxDefault = () => "export const BoxDefault = () => (\n  <Box tag=\"box\">\n    <Typography>Contenu par défaut</Typography>\n  </Box>\n);";
-export const BoxPadded = () => "export const BoxPadded = () => (\n  <Box tag=\"padded\" p={16}>\n    <Typography>Box avec padding</Typography>\n  </Box>\n);";
-export const BoxPaddedWithBackground = () => "export const BoxPaddedWithBackground = () => (\n  <Box tag=\"padded-with-background\" backgroundColor={'#f0f0f0'} p={16}>\n    <Typography>Box avec fond gris clair et padding</Typography>\n  </Box>\n);";
-export const BoxHovered = () => "export const BoxHovered = () => (\n  <Box tag=\"hovered\" hoverStyle={{ background: '#f0f0f0' }}>\n    <Typography>Box avec fond gris changeant au hover</Typography>\n  </Box>\n);";
+export const BoxPadded = () => "export const BoxPadded = () => (\n  <Box tag=\"padded\" p=\"2W\">\n    <Typography>Box avec padding</Typography>\n  </Box>\n);";
+export const BoxPaddedWithBackground = () => "export const BoxPaddedWithBackground = () => {\n  const { color } = useTheme();\n  return (\n    <Box tag=\"padded-with-background\" backgroundColor={color.light.background['alt-grey']} p=\"2W\">\n      <Typography>Box avec fond gris clair et padding</Typography>\n    </Box>\n  );\n};";
+export const BoxHovered = () => "export const BoxHovered = () => {\n  const { color } = useTheme();\n  return (\n    <Box tag=\"hovered\" backgroundColor={{ hover: color.light.background['alt-grey'] }}>\n      <Typography>Box avec fond gris changeant au hover</Typography>\n    </Box>\n  );\n};";
+export const BoxSansTag = () => "export const BoxSansTag = () => {\n  const { color } = useTheme();\n  return (\n    <Box tag=\"box-comparaison\" gap=\"1W\">\n      <Box backgroundColor={color.light.background['alt-grey']} p=\"2W\">\n        <Typography>Box sans tag</Typography>\n      </Box>\n      <Box tag=\"div\" backgroundColor={color.light.background['alt-grey']} p=\"2W\">\n        <Typography>Box en div</Typography>\n      </Box>\n    </Box>\n  );\n};";
+export const BoxFlexDansParentIndefini = () => "export const BoxFlexDansParentIndefini = () => (\n  <Box tag=\"box-flex-parent\">\n    <Box tag=\"box-flex-en-prop\" flex={1}>\n      <Typography>flex: 1 en prop</Typography>\n    </Box>\n    <Box tag=\"box-flex-en-style\" style={{ flex: 1 }}>\n      <Typography>flex: 1 en style</Typography>\n    </Box>\n    <Box tag=\"box-flex-en-tableau\" style={[{ flex: 1 }, { paddingLeft: Spacings['6W'] }]}>\n      <Typography>flex: 1 en tableau, avec un autre style</Typography>\n    </Box>\n  </Box>\n);";
+export const BoxStyles = () => "export const BoxStyles = () => (\n  <Box gap=\"1W\">\n    <Box tag=\"box-style-objet\" style={{ paddingLeft: Spacings['6W'] }}>\n      <Typography>Style objet</Typography>\n    </Box>\n    <Box tag=\"box-style-tableau\" style={[{ paddingLeft: Spacings['6W'] }, { marginTop: Spacings['0V'] }]}>\n      <Typography>Style en tableau</Typography>\n    </Box>\n    <Box tag=\"box-style-imbrique\" style={[[{ paddingLeft: Spacings['6W'] }], { marginTop: Spacings['0V'] }]}>\n      <Typography>Style en tableau imbriqué</Typography>\n    </Box>\n  </Box>\n);";
+export const BoxTokens = () => "export const BoxTokens = () => (\n  <Box tag=\"box-tokens-parent\" width={400}>\n    <Box tag=\"box-tokens\" width={100} p=\"2W\" ml=\"auto\" mr=\"10%\" borderRadius=\"md\">\n      <Typography>Tokens</Typography>\n    </Box>\n  </Box>\n);";
 export const storySources = {
     BoxDefault,
     BoxPadded,
     BoxPaddedWithBackground,
     BoxHovered,
+    BoxSansTag,
+    BoxFlexDansParentIndefini,
+    BoxStyles,
+    BoxTokens,
 };

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

@@ -1,25 +1,31 @@
-import { SpacingKey } from '@alveole/theme';
+import { RadiusKey, SpacingKey, ThemeColor } from '@alveole/theme';
 import { ViewProps } from '@tamagui/core';
 import { SizeStyle } from '../../type/SizeStyle';
+type BoxSpacing = Exclude<SpacingKey, `${number}`>;
+type BoxMargin = BoxSpacing | `${string}%` | 'auto';
+type CouleurDeBox = ThemeColor | 'transparent';
+type EtatTamagui = 'default' | 'hover' | 'press' | 'focus' | 'focusVisible' | 'disabled';
+type BoxColor = CouleurDeBox | Partial<Record<EtatTamagui, CouleurDeBox>>;
 export type BoxBaseStyle = Pick<ViewProps, 'display' | 'flex' | 'flexWrap' | 'flexDirection' | 'opacity' | 'overflow'> & {
     justify?: ViewProps['justifyContent'];
 };
 export type BoxAdvancedStyle = SizeStyle & {
-    p?: number | SpacingKey;
-    pl?: number | SpacingKey;
-    pr?: number | SpacingKey;
-    pt?: number | SpacingKey;
-    pb?: number | SpacingKey;
-    m?: number | `${string}%` | SpacingKey | 'auto';
-    ml?: number | `${string}%` | SpacingKey | 'auto';
-    mr?: number | `${string}%` | SpacingKey | 'auto';
-    mt?: number | `${string}%` | SpacingKey | 'auto';
-    mb?: number | `${string}%` | SpacingKey | 'auto';
-    backgroundColor?: string;
-    borderWidth?: number;
-    borderRadius?: number | string;
-    borderColor?: string;
-    gap?: number | SpacingKey;
+    p?: BoxSpacing;
+    pl?: BoxSpacing;
+    pr?: BoxSpacing;
+    pt?: BoxSpacing;
+    pb?: BoxSpacing;
+    m?: BoxMargin;
+    ml?: BoxMargin;
+    mr?: BoxMargin;
+    mt?: BoxMargin;
+    mb?: BoxMargin;
+    backgroundColor?: BoxColor;
+    borderWidth?: ViewProps['borderWidth'];
+    borderRadius?: RadiusKey;
+    borderColor?: BoxColor;
+    gap?: BoxSpacing;
 };
 export type BoxStyle = BoxBaseStyle & BoxAdvancedStyle;
+export {};
 //# sourceMappingURL=Box.types.d.ts.map