@alveole/components 2.0.0-alpha.15 → 2.0.0-alpha.17

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

@@ -5,24 +5,24 @@ export type BoxProps = Omit<TamaguiViewProps, keyof BoxStyle | 'tag' | 'style'>
     tag?: string;
 };
 export type BoxElement = TamaguiElement;
-export declare const Box: React.ForwardRefExoticComponent<Omit<TamaguiViewProps, "flex" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "display" | "flexDirection" | "flexWrap" | "overflow" | "gap" | "style" | "justify" | keyof import("../..").SizeStyle | "p" | "pl" | "pr" | "pt" | "pb" | "m" | "ml" | "mr" | "mt" | "mb" | "tag"> & Omit<RNTamaguiViewNonStyleProps, "tag"> & Pick<TamaguiViewProps, "flex" | "opacity" | "display" | "flexDirection" | "flexWrap" | "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?: TamaguiViewProps["backgroundColor"];
+    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?: number | string;
-    borderColor?: TamaguiViewProps["borderColor"];
-    gap?: number | import("@alveole/theme").SpacingKey;
+    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";
 } & {
     tag?: string;
 } & React.RefAttributes<TamaguiElement>>;

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,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMvC,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;wCAiDd,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,18 +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 { 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, 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),
@@ -31,6 +34,6 @@ export const Box = React.forwardRef(function Box(props, ref) {
     const spacings = {
         gap: resolveSpacing(gap),
     };
-    const correctionFlex = correctionFlexDuWeb(style);
-    return (_jsx(StyledView, { ref: ref, render: tag ?? 'box', style: correctionFlex ? { ...aplatirStyle(style), ...correctionFlex } : style, ...radius, ...viewProps, ...definis(margins), ...definis(paddings), ...definis(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,24 +4,24 @@ declare const _default: {
     experimental: false;
     description: string;
     shortDescription: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").ViewProps, "flex" | "backgroundColor" | "borderColor" | "borderRadius" | "borderWidth" | "opacity" | "display" | "flexDirection" | "flexWrap" | "overflow" | "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" | "opacity" | "display" | "flexDirection" | "flexWrap" | "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?: import("tamagui").ViewProps["backgroundColor"];
+        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?: number | string;
-        borderColor?: import("tamagui").ViewProps["borderColor"];
-        gap?: number | import("@alveole/theme").SpacingKey;
+        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";
     } & {
         tag?: string;
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
@@ -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", backgroundColor: "hover:#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,cAAyL,CAAC;AAEjN,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\" backgroundColor=\"hover:#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?: ViewProps['backgroundColor'];
+    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?: number | string;
-    borderColor?: ViewProps['borderColor'];
-    gap?: number | SpacingKey;
+    borderRadius?: RadiusKey;
+    borderColor?: BoxColor;
+    gap?: BoxSpacing;
 };
 export type BoxStyle = BoxBaseStyle & BoxAdvancedStyle;
+export {};
 //# sourceMappingURL=Box.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAEzB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC;IAGjD,eAAe,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"Box.types.d.ts","sourceRoot":"","sources":["../../../src/core/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,KAAK,UAAU,GAAG,OAAO,CAAC,UAAU,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;AACnD,KAAK,SAAS,GAAG,UAAU,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;AAEpD,KAAK,YAAY,GAAG,UAAU,GAAG,aAAa,CAAC;AAC/C,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;AAIzF,KAAK,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,CAAC,CAAC,EAAE,UAAU,CAAC;IACf,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,EAAE,CAAC,EAAE,UAAU,CAAC;IAEhB,CAAC,CAAC,EAAE,SAAS,CAAC;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IAEf,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,GAAG,CAAC,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,gBAAgB,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const elementDuTag: (tag: string | undefined) => string;
+//# sourceMappingURL=elementDuTag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementDuTag.d.ts","sourceRoot":"","sources":["../../../src/core/Box/elementDuTag.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,GAAG,SAAS,WAOnD,CAAC"}

package/dist/core/Box/elementDuTag.js

@@ -0,0 +1,12 @@
+// Un nom d'element invalide fait lever `createElement` au DOM et tomber tout le rendu.
+const NOM_D_ELEMENT = /^[a-z][a-z0-9-]*$/;
+export const elementDuTag = (tag) => {
+    if (tag === undefined)
+        return 'box';
+    if (NOM_D_ELEMENT.test(tag))
+        return tag;
+    if (__DEV__) {
+        console.warn('Warning:', `Box : le tag "${tag}" n'est pas un nom d'element en minuscules, rendu en <box>.`);
+    }
+    return 'box';
+};

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

@@ -12,11 +12,11 @@ declare const _default: {
             paddingTop: number;
             paddingBottom: number;
             borderRadius: import("@alveole/theme").Radius;
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
         };
         codeText: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
         };
         codeSurface: {

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

@@ -12,5 +12,5 @@ export default {
     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: 24, 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 const InText = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", 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.map

@@ -1 +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,cAAoX,CAAC;AAExY,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"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,cAAsX,CAAC;AAE1Y,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // 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={24}>\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 InText = () => "export const InText = () => (\n  <Box>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\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,