@alveole/components 2.0.0-alpha.16 → 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/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,

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

@@ -6,11 +6,11 @@ export declare const useStyles: () => {
         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/Form/Form.stories.js

@@ -14,5 +14,5 @@ export default {
 };
 const inputStyle = { borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: 8 };
 /** Taper dans le champ — cliquer en dehors ferme le clavier. */
-export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
+export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "3V", children: [_jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
 export * as Sources from './Form.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAsT,CAAC;AAErV,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
+{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAwT,CAAC;AAEvV,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/Form/Form.stories.tsx
-export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
+export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3V\">\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
 export const storySources = {
     WithKeyboardAware,
 };

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

@@ -1,3 +1,4 @@
+import { ThemeColor } from '@alveole/theme';
 declare const _default: {
     title: string;
     tags: "core"[];
@@ -5,21 +6,21 @@ declare const _default: {
     description: string;
     shortDescription: string;
     component: ((props: Pick<import("..").BoxProps, "gap" | "children"> & 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?: (ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", 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?: (ThemeColor | "transparent") | Partial<Record<"default" | "hover" | "press" | "focus" | "focusVisible" | "disabled", ThemeColor | "transparent">>;
+        gap?: "0V" | "0,5V" | "1V" | "1,5V" | "1W" | "3V" | "2W" | "3W" | "4W" | "5W" | "6W" | "8W" | "12W" | "15W";
     }) => import("react").JSX.Element) & {
         Column: (props: import("./Grid").GridColumnProps) => import("react").JSX.Element;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBASkB;AAWlB,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAY3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mCAYlC,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6B5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,UAAU,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU1F,wBASkB;AAYlB,eAAO,MAAM,eAAe,mCAS3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAevB,CAAC;AAEF,eAAO,MAAM,eAAe,mCAY3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAS7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mCAYlC,CAAC;AAEF,eAAO,MAAM,YAAY,mCAYxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCA6B5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Grid/Grid.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomPalette, enCouleursDuTheme, RadiusList } from '@alveole/theme';
 import { Button } from '../../ui/Button';
 import { Card } from '../../ui/Card';
 import { A } from '../A';
@@ -15,16 +16,17 @@ export default {
     component: Grid,
     styleFn: useStyles,
 };
-const colColor = '#88b2bd';
-const colColorAlt = '#b9c47f';
-const Col = ({ color = colColor, label }) => (_jsx(Box, { backgroundColor: color, p: '050', style: { borderRadius: 4 }, children: _jsx(Typography, { children: label }) }));
-export const TwoEqualColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) })] }));
-export const AsymmetricColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 8, children: _jsx(Col, { color: colColorAlt, label: "8 colonnes" }) })] }));
-export const ThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) })] }));
-export const FourColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) })] }));
-export const FullWidthColumn = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: 12, children: _jsx(Col, { label: "12 colonnes (pleine largeur)" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { color: colColorAlt, label: "6 colonnes" }) })] }));
-export const ResponsiveColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
-export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
-export const WithLargeGap = () => (_jsxs(Grid, { gap: 24, children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
-export const EqualHeightCards = () => (_jsxs(Grid, { gap: 16, children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre court", sousTitre: "Une ligne" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Un titre bien plus long qui passe sur deux lignes", sousTitre: "Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(A, { href: "/components/Card", children: _jsx(Card, { children: _jsx(Card.Header, { titre: "Carte cliquable" }) }) }) })] }));
+const { background } = enCouleursDuTheme(CustomPalette).light;
+const colColor = background['contrast-info'];
+const colColorAlt = background['contrast-success'];
+const Col = ({ color = colColor, label }) => (_jsx(Box, { backgroundColor: color, p: "1W", style: { borderRadius: RadiusList.sm }, children: _jsx(Typography, { children: label }) }));
+export const TwoEqualColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) })] }));
+export const AsymmetricColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 8, children: _jsx(Col, { color: colColorAlt, label: "8 colonnes" }) })] }));
+export const ThreeColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "4 colonnes" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "4 colonnes" }) })] }));
+export const FourColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { label: "3" }) }), _jsx(Grid.Column, { size: 3, children: _jsx(Col, { color: colColorAlt, label: "3" }) })] }));
+export const FullWidthColumn = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: 12, children: _jsx(Col, { label: "12 colonnes (pleine largeur)" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { label: "6 colonnes" }) }), _jsx(Grid.Column, { size: 6, children: _jsx(Col, { color: colColorAlt, label: "6 colonnes" }) })] }));
+export const ResponsiveColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { label: "12 mobile / 6 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 6 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 desktop" }) })] }));
+export const ResponsiveThreeColumns = () => (_jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(Col, { color: colColorAlt, label: "12 mobile / 6 tablet / 4 desktop" }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 12, desktop: 4 }, children: _jsx(Col, { label: "12 mobile / 12 tablet / 4 desktop" }) })] }));
+export const WithLargeGap = () => (_jsxs(Grid, { gap: "3W", children: [_jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { color: colColorAlt, label: "gap 24" }) }), _jsx(Grid.Column, { size: 4, children: _jsx(Col, { label: "gap 24" }) })] }));
+export const EqualHeightCards = () => (_jsxs(Grid, { gap: "2W", children: [_jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre court", sousTitre: "Une ligne" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Un titre bien plus long qui passe sur deux lignes", sousTitre: "Un sous-titre lui aussi assez long pour occuper plusieurs lignes dans la carte" }), _jsx(Card.Actions, { children: _jsx(Button, { variant: "secondary", title: "Voir", size: "sm" }) })] }) }), _jsx(Grid.Column, { size: { mobile: 12, tablet: 6, desktop: 4 }, children: _jsx(A, { href: "/components/Card", children: _jsx(Card, { children: _jsx(Card.Header, { titre: "Carte cliquable" }) }) }) })] }));
 export * as Sources from './Grid.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA0P,CAAC;AAEvR,eAAO,MAAM,iBAAiB,cAAgR,CAAC;AAE/S,eAAO,MAAM,YAAY,cAA+V,CAAC;AAEzX,eAAO,MAAM,WAAW,cAAka,CAAC;AAE3b,eAAO,MAAM,eAAe,cAAqX,CAAC;AAElZ,eAAO,MAAM,iBAAiB,cAAwV,CAAC;AAEvX,eAAO,MAAM,sBAAsB,cAAyhB,CAAC;AAE7jB,eAAO,MAAM,YAAY,cAAoV,CAAC;AAE9W,eAAO,MAAM,gBAAgB,cAAyhC,CAAC;AAEvjC,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Grid.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/Grid.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,cAA6P,CAAC;AAE1R,eAAO,MAAM,iBAAiB,cAAmR,CAAC;AAElT,eAAO,MAAM,YAAY,cAAkW,CAAC;AAE5X,eAAO,MAAM,WAAW,cAAqa,CAAC;AAE9b,eAAO,MAAM,eAAe,cAAwX,CAAC;AAErZ,eAAO,MAAM,iBAAiB,cAA2V,CAAC;AAE1X,eAAO,MAAM,sBAAsB,cAA4hB,CAAC;AAEhkB,eAAO,MAAM,YAAY,cAAsV,CAAC;AAEhX,eAAO,MAAM,gBAAgB,cAA2hC,CAAC;AAEzjC,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}