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

package/dist/ui/Checkbox/Checkbox.d.ts

@@ -3,14 +3,14 @@ import { CheckboxContainerProps } from './CheckboxContainer';
 import { CheckboxIndicatorProps } from './CheckboxIndicator';
 import { CheckboxLabelProps } from './CheckboxLabel';
 export type CheckboxProps = CheckboxContainerProps & CheckboxIndicatorProps & CheckboxLabelProps;
-export declare const Checkbox: React.ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
-    scaleIcon?: number;
-    scaleSize?: number;
-    sizeAdjust?: number;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "disabled" | "active"> & Omit<import("@tamagui/web").WithThemeValues<Omit<import("@tamagui/web").StackStyleBase, "disabled" | "active">> & import("@tamagui/web").WithFlatVariantValues<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>, "theme" | "debug" | "container" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "children" | "className" | "themeShallow" | "id" | "render" | "group" | "untilMeasured" | "name" | "tabIndex" | "role" | "disableOptimization" | "disableNativeStyle" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onClick" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onChange" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "style" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onKeyDownCapture" | "onKeyUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "collapsable" | "collapsableChildren" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder" | "onAccessibilityAction" | "onAccessibilityTap" | "onMagicTap" | "onAccessibilityEscape"> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
     native?: import("tamagui").NativeValue<"web">;
 } & {
-    size?: import("tamagui").SizeTokens;
-    unstyled?: boolean;
+    activeStyle?: import("tamagui").StylePiece;
+    activeTheme?: string | null;
 } & {
     size?: import("./Checkbox.utils").CheckboxSize;
     variant?: import("./Checkbox.utils").CheckboxVariant;

package/dist/ui/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAsBnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,EAAqB,sBAAsB,EAAmB,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG,sBAAsB,GAAG,kBAAkB,CAAC;AAEjG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;wGAqBnB,CAAC"}

package/dist/ui/Checkbox/Checkbox.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@alveole/theme';
 import React, { useId } from 'react';
 import { Box } from '../../core/Box';
 import { FormControlCaption } from '../FormControl';
@@ -10,8 +9,7 @@ import { CheckboxLabel } from './CheckboxLabel';
 export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { size, variant, label, error, success, disabled } = props;
     const baseProps = { size, variant, label, error, success, disabled };
-    const { spacingValue } = useTheme();
     const styles = useStyles();
     const id = useId();
-    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? '1W' : '0V', style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/Checkbox/Checkbox.stories.d.ts

@@ -3,14 +3,14 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
-        scaleIcon?: number;
-        scaleSize?: number;
-        sizeAdjust?: number;
+    component: import("react").ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "disabled" | "active"> & Omit<import("@tamagui/web").WithThemeValues<Omit<import("@tamagui/web").StackStyleBase, "disabled" | "active">> & import("@tamagui/web").WithFlatVariantValues<{
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>, "theme" | "debug" | "container" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "children" | "className" | "themeShallow" | "id" | "render" | "group" | "untilMeasured" | "name" | "tabIndex" | "role" | "disableOptimization" | "disableNativeStyle" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onClick" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onChange" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "style" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onKeyDownCapture" | "onKeyUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "collapsable" | "collapsableChildren" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder" | "onAccessibilityAction" | "onAccessibilityTap" | "onMagicTap" | "onAccessibilityEscape"> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
         native?: import("tamagui").NativeValue<"web">;
     } & {
-        size?: import("tamagui").SizeTokens;
-        unstyled?: boolean;
+        activeStyle?: import("tamagui").StylePiece;
+        activeTheme?: string | null;
     } & {
         size?: import("./Checkbox.utils").CheckboxSize;
         variant?: import("./Checkbox.utils").CheckboxVariant;
@@ -20,13 +20,13 @@ declare const _default: {
     styleFn: () => {
         label: {
             cursor: "pointer";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            width: "100%";
+            width?: "100%" | undefined;
         };
         labelSm: {
             fontSize: 14;
@@ -37,19 +37,20 @@ declare const _default: {
         };
         labelDisabled: {
             cursor: "not-allowed";
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         labelError: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         labelSuccess: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         checkbox: {
+            flexShrink: number;
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
             backgroundColor: "transparent";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         checkboxSm: {
@@ -58,25 +59,25 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
         };
         checkboxDisabled: {
-            borderColor: string;
+            opacity: 1;
+            borderColor: import("@alveole/theme").ThemeColor;
             backgroundColor: "transparent";
         };
         checkboxError: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         checkboxSuccess: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
         };
         indicator: {
             height: import("@alveole/theme").Spacing;
             width: import("@alveole/theme").Spacing;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         indicatorDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
-        checkboxFocused: import("@alveole/theme").FocusRingStyle;
         checkboxContainer: {
             display: "flex";
             flexDirection: "column";

package/dist/ui/Checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAKjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAUjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Checkbox/Checkbox.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { Box } from '../../core/Box';
 import { Checkbox } from './Checkbox';
 import { useStyles } from './Checkbox.styles';
@@ -10,6 +11,6 @@ export default {
     component: Checkbox,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Checkbox, { label: "Non coch\u00E9" }), _jsx(Checkbox, { label: "Coch\u00E9", checked: true }), _jsx(Checkbox, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Checkbox, { label: "Coch\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true }), _jsx(Checkbox, { label: "Avec erreur", error: "Vous devez accepter les conditions" }), _jsx(Checkbox, { label: "Avec succ\u00E8s", success: "Valid\u00E9" })] }));
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 16, children: [_jsx(Checkbox, { label: "Size MD", size: "md" }), _jsx(Checkbox, { label: "Size SM", size: "sm" })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }, children: [_jsx(Checkbox, { label: "Non coch\u00E9" }), _jsx(Checkbox, { label: "Coch\u00E9", checked: true }), _jsx(Checkbox, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Checkbox, { label: "Coch\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true }), _jsx(Checkbox, { label: "Avec erreur", error: "Vous devez accepter les conditions" }), _jsx(Checkbox, { label: "Avec succ\u00E8s", success: "Valid\u00E9" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "2W", style: Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }, children: [_jsx(Checkbox, { label: "Size MD", size: "md" }), _jsx(Checkbox, { label: "Size SM", size: "sm" })] }));
 export * as Sources from './Checkbox.stories.sources';

package/dist/ui/Checkbox/Checkbox.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+b,CAAC;AAEpd,eAAO,MAAM,KAAK,cAA8M,CAAC;AAEjO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Checkbox.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8hB,CAAC;AAEnjB,eAAO,MAAM,KAAK,cAA+T,CAAC;AAElV,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Checkbox/Checkbox.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Checkbox/Checkbox.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Checkbox label=\"Non coché\" />\n    <Checkbox label=\"Coché\" checked />\n    <Checkbox label=\"Désactivé\" disabled />\n    <Checkbox label=\"Coché désactivé\" checked disabled />\n    <Checkbox label=\"Avec erreur\" error=\"Vous devez accepter les conditions\" />\n    <Checkbox label=\"Avec succès\" success=\"Validé\" />\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={16}>\n    <Checkbox label=\"Size MD\" size=\"md\" />\n    <Checkbox label=\"Size SM\" size=\"sm\" />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"column\"\n    gap=\"3W\"\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch' }}\n  >\n    <Checkbox label=\"Non coché\" />\n    <Checkbox label=\"Coché\" checked />\n    <Checkbox label=\"Désactivé\" disabled />\n    <Checkbox label=\"Coché désactivé\" checked disabled />\n    <Checkbox label=\"Avec erreur\" error=\"Vous devez accepter les conditions\" />\n    <Checkbox label=\"Avec succès\" success=\"Validé\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box\n    display=\"flex\"\n    flexDirection=\"row\"\n    gap=\"2W\"\n    style={Platform.OS === 'web' ? undefined : { alignSelf: 'stretch', flexWrap: 'wrap' }}\n  >\n    <Checkbox label=\"Size MD\" size=\"md\" />\n    <Checkbox label=\"Size SM\" size=\"sm\" />\n  </Box>\n);";
 export const storySources = {
     Default,
     Sizes,

package/dist/ui/Checkbox/Checkbox.styles.d.ts

@@ -1,13 +1,13 @@
 export declare const useStyles: () => {
     label: {
         cursor: "pointer";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        width: "100%";
+        width?: "100%" | undefined;
     };
     labelSm: {
         fontSize: 14;
@@ -18,19 +18,20 @@ export declare const useStyles: () => {
     };
     labelDisabled: {
         cursor: "not-allowed";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     labelError: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     labelSuccess: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     checkbox: {
+        flexShrink: number;
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
         backgroundColor: "transparent";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     checkboxSm: {
@@ -39,25 +40,25 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     checkboxDisabled: {
-        borderColor: string;
+        opacity: 1;
+        borderColor: import("@alveole/theme").ThemeColor;
         backgroundColor: "transparent";
     };
     checkboxError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     checkboxSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     indicator: {
         height: import("@alveole/theme").Spacing;
         width: import("@alveole/theme").Spacing;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     indicatorDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
-    checkboxFocused: import("@alveole/theme").FocusRingStyle;
     checkboxContainer: {
         display: "flex";
         flexDirection: "column";

package/dist/ui/Checkbox/Checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAmFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAuF,CAAC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAoFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAuF,CAAC"}

package/dist/ui/Checkbox/Checkbox.styles.js

@@ -1,8 +1,7 @@
-import { focusRing, makeStyles } from '@alveole/theme';
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+import { sansEstompage } from '../../core/styleTamagui/sansEstompage';
 const coque = ({ spacing }) => ({
-    // Voir `CheckboxContainer.tsx` : Tamagui impose sa propre bague en `!important`, seule sa
-    // prop `focusVisibleStyle` peut la remplacer. Meme source que la regle CSS du theme.
-    checkboxFocused: focusRing('default'),
     checkboxContainer: {
         display: 'flex',
         flexDirection: 'column',
@@ -15,20 +14,22 @@ const coque = ({ spacing }) => ({
 });
 const caseACocher = ({ color, spacingValue, radius }) => ({
     checkbox: {
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        flexShrink: 0,
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
         backgroundColor: 'transparent',
         borderColor: color.light.border['action-high-primary'],
         borderRadius: radius('md'),
     },
     checkboxSm: {
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
         borderRadius: radius('sm'),
     },
     checkboxDisabled: {
         borderColor: color.border['disabled-grey'],
         backgroundColor: 'transparent',
+        ...sansEstompage,
     },
     checkboxError: {
         borderColor: color.border['plain-error'],
@@ -37,8 +38,8 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
         borderColor: color.border['plain-success'],
     },
     indicator: {
-        height: spacingValue('150'),
-        width: spacingValue('150'),
+        height: spacingValue('3W'),
+        width: spacingValue('3W'),
         backgroundColor: color.light.background['action-high-primary'],
         borderRadius: radius('md'),
     },
@@ -48,7 +49,7 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
 });
 const libelle = ({ text, color }) => ({
     label: {
-        width: '100%',
+        ...(Platform.OS === 'web' && { width: '100%' }),
         ...text['Corps de texte'].MD.Regular,
         cursor: 'pointer',
         color: color.text['label-grey'],

package/dist/ui/Checkbox/CheckboxContainer.d.ts

@@ -9,14 +9,14 @@ export type CheckboxContainerProps = TamaguiCheckboxProps & {
     error?: string;
     success?: string;
 };
-export declare const CheckboxContainer: React.ForwardRefExoticComponent<import("tamagui").StackNonStyleProps & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
-    scaleIcon?: number;
-    scaleSize?: number;
-    sizeAdjust?: number;
+export declare const CheckboxContainer: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "disabled" | "active"> & Omit<import("@tamagui/web").WithThemeValues<Omit<import("@tamagui/web").StackStyleBase, "disabled" | "active">> & import("@tamagui/web").WithFlatVariantValues<{
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>, "theme" | "debug" | "container" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "children" | "className" | "themeShallow" | "id" | "render" | "group" | "untilMeasured" | "name" | "tabIndex" | "role" | "disableOptimization" | "disableNativeStyle" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onClick" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onChange" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "style" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onKeyDownCapture" | "onKeyUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "collapsable" | "collapsableChildren" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder" | "onAccessibilityAction" | "onAccessibilityTap" | "onMagicTap" | "onAccessibilityEscape"> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
     native?: import("tamagui").NativeValue<"web">;
 } & {
-    size?: import("tamagui").SizeTokens;
-    unstyled?: boolean;
+    activeStyle?: import("tamagui").StylePiece;
+    activeTheme?: string | null;
 } & {
     size?: CheckboxSize;
     /** @deprecated use `size` ('sm' | 'md') instead */

package/dist/ui/Checkbox/CheckboxContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7G,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAC7C,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;WAPrB,YAAY;IACnB,mDAAmD;cACzC,eAAe;YACjB,MAAM;cACJ,MAAM;wCAyCjB,CAAC"}
+{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,IAAI,oBAAoB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7G,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC;AAC7C,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;WAPrB,YAAY;IACnB,mDAAmD;cACzC,eAAe;YACjB,MAAM;cACJ,MAAM;wCA6BjB,CAAC"}

package/dist/ui/Checkbox/CheckboxContainer.js

@@ -17,12 +17,8 @@ export const CheckboxContainer = React.forwardRef(function Checkbox(props, ref)
         marginTop: 'auto',
         marginBottom: 'auto',
     };
-    const checkboxHoverStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
-    const checkboxPressStyles = disabled ? styles.checkboxDisabled : baseCheckboxStyles;
-    return (_jsx(TamaguiCheckbox, { ref: ref, disabled: disabled, style: checkboxStyles, hoverStyle: checkboxHoverStyles, pressStyle: checkboxPressStyles, ...focusRingProps(), 
-        // Tamagui injecte sa propre regle `:focus-visible` en `!important` derriere un selecteur
-        // `:root:root:root:root` : la regle CSS du theme ne peut pas la battre, et sans cette prop
-        // c'est le gris translucide de Tamagui qui s'affiche. La valeur vient de `focusRing()`,
-        // qui peint le meme bleu que la regle : un seul reglage, deux chemins pour l'appliquer.
-        focusVisibleStyle: styles.checkboxFocused, ...checkboxProps }));
+    // Survol et appui reprenaient le style de repos pour masquer ceux de Tamagui : en v3, le
+    // style inline l'emporte sur ses clauses. La bague passe par la seule marque du theme
+    // (ADR 0017, amendement Tamagui v3).
+    return (_jsx(TamaguiCheckbox, { ref: ref, disabled: disabled, style: checkboxStyles, ...focusRingProps(), ...checkboxProps }));
 });

package/dist/ui/Checkbox/CheckboxLabel.d.ts

@@ -1,4 +1,4 @@
-import { LabelProps } from 'tamagui';
+import { LabelProps } from 'tamagui/unstyled';
 import { CheckboxSize, CheckboxVariant } from './Checkbox.utils';
 export type CheckboxLabelProps = {
     size?: CheckboxSize;

package/dist/ui/Checkbox/CheckboxLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,GAAG,UAAU,gCAuBnE,CAAC"}
+{"version":3,"file":"CheckboxLabel.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/CheckboxLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAuB,MAAM,kBAAkB,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,GAAG,UAAU,gCA4BnE,CAAC"}

package/dist/ui/Checkbox/CheckboxLabel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Label } from 'tamagui';
+import { Platform } from 'react-native';
+import { Label } from 'tamagui/unstyled';
 import { Typography } from '../../core/Typography';
 import { useStyles } from './Checkbox.styles';
 import { resolveCheckboxSize } from './Checkbox.utils';
@@ -7,7 +8,7 @@ export const CheckboxLabel = (props) => {
     const { size, variant, disabled, error, success, label, ...labelProps } = props;
     const styles = useStyles();
     const resolvedSize = resolveCheckboxSize(size, variant);
-    return (_jsx(Label, { unstyled: true, disabled: disabled, ...labelProps, width: '100%', children: _jsx(Typography, { style: {
+    return (_jsx(Label, { disabled: disabled, ...labelProps, width: Platform.OS === 'web' ? '100%' : undefined, flexShrink: Platform.OS === 'web' ? undefined : 1, children: _jsx(Typography, { style: {
                 ...styles.label,
                 ...(resolvedSize === 'sm' ? styles.labelSm : {}),
                 ...(disabled ? styles.labelDisabled : {}),

package/dist/ui/Counter/Counter.stories.d.ts

@@ -15,12 +15,12 @@ declare const _default: {
             height: number;
             paddingRight: number;
             paddingLeft: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
         };
         counterPrimary: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/Counter/Counter.stories.js

@@ -11,5 +11,5 @@ export default {
     component: Counter,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 8, style: { alignItems: 'center' }, children: [_jsx(Counter, { variant: "default", count: 20 }), _jsx(Counter, { variant: "primary", count: 20 })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Counter, { variant: "default", count: 20 }), _jsx(Counter, { variant: "primary", count: 20 })] }));
 export * as Sources from './Counter.stories.sources';

package/dist/ui/Counter/Counter.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgP,CAAC;AAErQ,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Counter.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Counter/Counter.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAmP,CAAC;AAExQ,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Counter/Counter.stories.sources.js

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Counter/Counter.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={8} style={{ alignItems: 'center' }}>\n    <Counter variant=\"default\" count={20} />\n    <Counter variant=\"primary\" count={20} />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n    <Counter variant=\"default\" count={20} />\n    <Counter variant=\"primary\" count={20} />\n  </Box>\n);";
 export const storySources = {
     Default,
 };

package/dist/ui/Counter/Counter.styles.d.ts

@@ -8,12 +8,12 @@ export declare const useStyles: () => {
         height: number;
         paddingRight: number;
         paddingLeft: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
     };
     counterPrimary: {
-        backgroundColor: string;
-        color: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Counter.styles.d.ts.map

package/dist/ui/DataTable/DataTable.demo.deployments.js

@@ -112,7 +112,7 @@ const formatTimestamp = (date, timeZone) => new Intl.DateTimeFormat('fr-FR', { d
 const DeploymentDateCell = ({ deployment }) => {
     const [open, setOpen] = React.useState(false);
     const { text, color } = useTheme();
-    return (_jsx(Popover, { placement: "left", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Box, { onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: format(deployment.date, 'd MMM', { locale: fr }) }) })), children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1W', style: { minWidth: 260 }, onHoverIn: () => setOpen(true), onHoverOut: () => setOpen(false), children: [_jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatDistanceToNowStrict(deployment.date, { locale: fr, addSuffix: true }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: "UTC" }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date, 'UTC') })] }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: localTimeZoneLabel }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date) })] })] }) }));
+    return (_jsx(Popover, { placement: "left", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Box, { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx(Typography, { style: { ...text['Corps de texte'].XS.Regular, color: color.light.text['mention-grey'] }, children: format(deployment.date, 'd MMM', { locale: fr }) }) })), children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: '1W', style: { minWidth: 260 }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: [_jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatDistanceToNowStrict(deployment.date, { locale: fr, addSuffix: true }) }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: "UTC" }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date, 'UTC') })] }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: '1W', justify: "space-between", style: { alignItems: 'center' }, children: [_jsx(Tag, { size: "sm", children: localTimeZoneLabel }), _jsx(Typography, { style: text['Corps de texte'].SM.Regular, children: formatTimestamp(deployment.date) })] })] }) }));
 };
 const DeploymentActionsCell = () => {
     const [open, setOpen] = React.useState(false);

package/dist/ui/DataTable/DataTable.stories.d.ts

@@ -75,9 +75,8 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "stretch";
-            backgroundColor: string;
             borderBottomWidth: number;
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         rowSm: {
             minHeight: number;
@@ -91,19 +90,22 @@ declare const _default: {
         rowHoverable: {
             cursor: "pointer";
         };
+        rowBackground: {
+            backgroundColor: import("@alveole/theme").ThemeColor;
+        };
         rowHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         rowSelected: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         headerRow: {
             display: "flex";
             flexDirection: "row";
             alignItems: "stretch";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
         };
         headerRowSm: {
             minHeight: number;
@@ -138,7 +140,7 @@ declare const _default: {
             paddingRight: string | number;
         };
         headerLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
@@ -146,16 +148,16 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         headerLabelActive: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         table: {
             display: "flex";
             flexDirection: "column";
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderRadius: import("@alveole/theme").Radius;
             overflow: "hidden";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         scrollContent: {
             display: "flex";
@@ -170,7 +172,7 @@ declare const _default: {
             padding: string | number;
         };
         emptyStateLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

package/dist/ui/DataTable/DataTable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwB1B,wBAkBkB;AAElB,eAAO,MAAM,OAAO,yBAA+F,CAAC;AAEpH,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAejB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAmC3B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yBAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAe1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,yBA4B5B,CAAC;AAEF,eAAO,MAAM,KAAK,yBAajB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwB1B,wBAkBkB;AAElB,eAAO,MAAM,OAAO,yBAA+F,CAAC;AAEpH,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAejB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAsBvB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAmC3B,CAAC;AAEF,eAAO,MAAM,aAAa,yBAEzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,yBAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAe1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,yBA4B5B,CAAC;AAEF,eAAO,MAAM,KAAK,yBAajB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}