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

package/dist/ui/Signature/Signature.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BoxProps } from '../../core/Box';
-export type SignatureProps = Omit<BoxProps, 'children'> & {
+export type SignatureProps = Omit<BoxProps, 'children' | 'onChange'> & {
     height: number;
     date?: string | Date;
     dateLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAwDF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA0C9C,CAAC"}
+{"version":3,"file":"Signature.d.ts","sourceRoot":"","sources":["../../../src/ui/Signature/Signature.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACrE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAwDF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA0C9C,CAAC"}

package/dist/ui/Signature/Signature.js

@@ -53,7 +53,7 @@ export const Signature = (props) => {
     const styles = useStyles();
     const ref = React.useRef(null);
     const { handleOk, handleEnd, handleClear } = useLectureDifferee(ref, onChange);
-    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
+    const webviewHeightWithBorders = height + spacingValue('4W') + spacingValue('2W') + 3;
     return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsx(SignatureHeader, { date: date, dateLabel: dateLabel, clearButtonLabel: clearButtonLabel, onClear: () => ref.current?.clearSignature() }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: feuilleDeStyleCanvas({
                         height,
                         rayon: spacing('3V'),

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

@@ -12,11 +12,11 @@ declare const _default: {
             flexDirection: "column";
         };
         pen: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
         };
         signatureWeb: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderRadius: import("@alveole/theme").Radius;
         };

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

@@ -5,11 +5,11 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     pen: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
     };
     signatureWeb: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderRadius: import("@alveole/theme").Radius;
     };

package/dist/ui/Skeleton/Skeleton.js

@@ -5,7 +5,7 @@ import { Box } from '../../core/Box';
 import { useStyles } from './Skeleton.styles';
 const PULSE_DURATION = 700;
 export const Skeleton = (props) => {
-    const { width = '100%', height = 16, borderRadius = 4, style, ...rest } = props;
+    const { width = '100%', height = 16, borderRadius = 'sm', style, ...rest } = props;
     const styles = useStyles();
     const [opacity] = React.useState(() => new Animated.Value(0.5));
     React.useEffect(() => {

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

@@ -8,6 +8,7 @@ declare const _default: {
     styleFn: () => {
         skeleton: {
             overflow: "hidden";
+            position: "relative";
         };
         pulse: {
             position: "absolute";
@@ -15,7 +16,7 @@ declare const _default: {
             right: number;
             bottom: number;
             left: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAA8D,CAAC;AAEhF,eAAO,MAAM,SAAS,mCAAmD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAAgE,CAAC;AAElF,eAAO,MAAM,SAAS,mCAAoD,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Skeleton/Skeleton.stories.js

@@ -18,8 +18,8 @@ La forme se règle avec \`width\` (\`100%\` par défaut), \`height\` (16 px par
 };
 export const Ligne = () => _jsx(Skeleton, { width: "60%" });
 export const Carre = () => _jsx(Skeleton, { width: 64, height: 64 });
-export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: 24 });
-export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: 8 });
+export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: "full" });
+export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: "md" });
 /**
  * Des lignes de largeurs décroissantes imitent un paragraphe de texte.
  */
@@ -27,5 +27,5 @@ export const Paragraphe = () => (_jsxs(Box, { display: "flex", flexDirection: "c
 /**
  * Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.
  */
-export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: 20 }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
+export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: "full" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
 export * as Sources from './Skeleton.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA2F,CAAC;AAE7G,eAAO,MAAM,SAAS,cAAqF,CAAC;AAE5G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAqiB,CAAC;AAEjkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA+F,CAAC;AAEjH,eAAO,MAAM,SAAS,cAAwF,CAAC;AAE/G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAyiB,CAAC;AAErkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

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

@@ -2,10 +2,10 @@
 // Source: src/ui/Skeleton/Skeleton.stories.tsx
 export const Ligne = () => "export const Ligne = () => <Skeleton width=\"60%\" />;";
 export const Carre = () => "export const Carre = () => <Skeleton width={64} height={64} />;";
-export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius={24} />;";
-export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius={8} />;";
+export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius=\"full\" />;";
+export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius=\"md\" />;";
 export const Paragraphe = () => "export const Paragraphe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" width=\"100%\">\n    <Skeleton width=\"40%\" height={20} />\n    <Skeleton />\n    <Skeleton width=\"90%\" />\n    <Skeleton width=\"65%\" />\n  </Box>\n);";
-export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius={20} />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
+export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius=\"full\" />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
 export const storySources = {
     Ligne,
     Carre,

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

@@ -1,6 +1,7 @@
 export declare const useStyles: () => {
     skeleton: {
         overflow: "hidden";
+        position: "relative";
     };
     pulse: {
         position: "absolute";
@@ -8,7 +9,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Skeleton.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;CAYnB,CAAC"}
+{"version":3,"file":"Skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAcnB,CAAC"}

package/dist/ui/Skeleton/Skeleton.styles.js

@@ -2,6 +2,8 @@ import { makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ color }) => ({
     skeleton: {
         overflow: 'hidden',
+        // Le reflet s'y tend en absolu : Tamagui v2 ne rend plus chaque vue relative.
+        position: 'relative',
     },
     pulse: {
         position: 'absolute',

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

@@ -7,10 +7,10 @@ declare const _default: {
     component: ({ style, ...props }: import("./Spinner.shared").SpinnerProps) => import("react").JSX.Element | null;
     styleFn: () => {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/Spinner/Spinner.stories.js

@@ -20,7 +20,7 @@ La prop \`delay\` permet de retarder l'apparition du spinner pour éviter un fla
     component: Spinner,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
 /**
  * `delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :
  * rien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`
@@ -28,5 +28,5 @@ export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row",
  * millisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour
  * régler le retard de son propre spinner pendant `isLoading`.
  */
-export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
+export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
 export * as Sources from './Spinner.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsO,CAAC;AAEzP,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,YAAY;;;CAGf,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":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAwO,CAAC;AAE3P,eAAO,MAAM,SAAS,cAAyQ,CAAC;AAEhS,eAAO,MAAM,YAAY;;;CAGf,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/ui/Spinner/Spinner.stories.sources.js

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Spinner/Spinner.stories.tsx
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
-export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
+export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
 export const storySources = {
     Sizes,
     WithDelay,

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     track: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     arc: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Spinner.styles.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts

@@ -1,8 +1,10 @@
 import { Animated } from 'react-native';
+export interface Rotation extends Animated.AnimatedInterpolation<string> {
+}
 /**
  * L'angle d'un spinner qui tourne sans fin, un tour toutes les 800 ms.
  *
  * Seul le pilote differe : le natif tourne hors du fil JavaScript, le navigateur n'en a pas.
  */
-export declare const useRotation: (useNativeDriver: boolean) => Animated.AnimatedInterpolation<string | number>;
+export declare const useRotation: (useNativeDriver: boolean) => Rotation;
 //# sourceMappingURL=useRotation.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,oDAYnD,CAAC"}
+{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAIhD,MAAM,WAAW,QAAS,SAAQ,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC;CAAG;AAE3E;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,KAAG,QAYtD,CAAC"}

package/dist/ui/Spinner/useSpinner.d.ts

@@ -6,13 +6,13 @@ import { SpinnerProps } from './Spinner.shared';
 export declare const useSpinner: ({ size, delay }: SpinnerProps, useNativeDriver: boolean) => {
     styles: {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
-    spin: import("react-native").Animated.AnimatedInterpolation<string | number>;
+    spin: import("./useRotation").Rotation;
     visible: boolean;
     px: number;
     strokeWidth: number;

package/dist/ui/Switch/Switch.d.ts

@@ -9,7 +9,7 @@ export type SwitchProps = Omit<TamaguiSwitchProps, 'value' | 'onChange'> & {
     success?: string;
     noPadding?: boolean;
 };
-export declare const Switch: React.ForwardRefExoticComponent<Omit<TamaguiSwitchProps, "value" | "onChange"> & {
+export declare const Switch: React.ForwardRefExoticComponent<Omit<TamaguiSwitchProps, "onChange" | "value"> & {
     id?: string;
     label?: string;
     style?: CSSProperties;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AACpD,OAAO,EAAS,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAO5G,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;SARZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCAoEnB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASrG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA4BF,eAAO,MAAM,MAAM;SAlCZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCA6FnB,CAAC"}

package/dist/ui/Switch/Switch.js

@@ -1,19 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { focusRingProps, useTheme } from '@alveole/theme';
+import { focusRingProps } from '@alveole/theme';
 import React, { useId } from 'react';
-import { Label, Switch as TamaguiSwitch } from 'tamagui';
+import { Platform, Pressable } from 'react-native';
+import { Switch as TamaguiSwitch } from 'tamagui';
+import { Label } from 'tamagui/unstyled';
+import { animer } from '../../core/animation/animer';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { FormControlCaption } from '../FormControl';
 import { apparenceDuSwitch } from './Switch.apparence';
 import { useStyles } from './Switch.styles';
+const SwitchLabel = ({ id, checked, disabled, onChange, children }) => Platform.OS === 'web' ? (_jsx(Label, { htmlFor: id, width: "100%", children: children })) : (_jsx(Pressable, { accessible: false, disabled: disabled, pointerEvents: "box-only", onPress: () => onChange(!checked), children: children }));
+// La piste du pouce, comme Tamagui v1 la dimensionnait : deux pouces de large, un de haut, plus
+// 4 px pour le padding et la bordure qu'Alveole pose de chaque cote. La v2 ne compte plus ces
+// 4 px, et le pouce debordait de sa piste. La taille de reference etait le token `$true` de la
+// config de l'application, 44 px ; la config v5 de Tamagui v3 ne le fournit plus, Alveole la fixe.
+const POUCE = Math.round(44 * 0.65);
+const DIMENSIONS_DE_LA_PISTE = { width: 2 * POUCE + 4, height: POUCE + 4, minHeight: POUCE + 4 };
 export const Switch = React.forwardRef(function Switch(props, ref) {
     const { checked, style, label, error, success, disabled, noPadding, onCheckedChange, ...switchProps } = props;
     let { id } = props;
     const isControlled = checked !== undefined;
     const [model, setModel] = React.useState(Boolean(checked));
     const value = isControlled ? checked : model;
-    const { spacingValue } = useTheme();
     const styles = useStyles();
     const uniqId = useId();
     id = id || `switch--${uniqId}`;
@@ -23,12 +32,7 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
         onCheckedChange?.(newValue);
     };
     const { bouton, pouce, libelle } = apparenceDuSwitch(styles, { value, disabled, noPadding, style });
-    const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: bouton, disabled: disabled, ...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.switchButtonFocused, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: pouce }) }));
-    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: libelle, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
-    return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
+    const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, ...DIMENSIONS_DE_LA_PISTE, checked: value, onCheckedChange: onChange, style: bouton, disabled: disabled, accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: Boolean(value), disabled: Boolean(disabled) }, ...focusRingProps(), ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { ...animer('quicker'), width: POUCE, height: POUCE, style: pouce }) }));
+    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(SwitchLabel, { id: id, checked: value, disabled: disabled, onChange: onChange, children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: libelle, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsx(Box, { tag: "switch", gap: error || success ? '1W' : '0V', style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

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

@@ -3,7 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").SwitchProps, "value" | "onChange"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<import("tamagui").SwitchProps, "onChange" | "value"> & {
         id?: string;
         label?: string;
         style?: import("react").CSSProperties;
@@ -13,7 +13,6 @@ declare const _default: {
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => {
         switchContainer: {};
-        switchButtonFocused: import("@alveole/theme").FocusRingStyle;
         switch: {
             display: "flex";
             flexDirection: "row";
@@ -21,8 +20,8 @@ declare const _default: {
             paddingRight: string | number;
         };
         switchButton: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "pointer";
             padding: number;
             minHeight: string | number;
@@ -30,27 +29,29 @@ declare const _default: {
             marginBottom: string;
         };
         switchButtonChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchButtonDisabled: {
-            backgroundColor: string;
+            opacity: 1;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
         };
         switchThumb: {
             borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
+            boxShadow: "none";
         };
         switchThumbChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchThumbDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
             borderColor: "#FFFFFF";
         };
         switchLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAGtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAGtB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC"}

package/dist/ui/Switch/Switch.stories.js

@@ -11,7 +11,7 @@ export default {
     component: Switch,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
 export const Controlled = () => {
     const [value, setValue] = useState(false);
     return _jsx(Switch, { label: value ? 'Activé' : 'Désactivé', checked: value, onCheckedChange: v => setValue(!!v) });

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0S,CAAC;AAE/T,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA4S,CAAC;AAEjU,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Switch/Switch.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
 export const Controlled = () => "export const Controlled = () => {\n  const [value, setValue] = useState(false);\n  return <Switch label={value ? 'Activé' : 'Désactivé'} checked={value} onCheckedChange={v => setValue(!!v)} />;\n};";
 export const storySources = {
     Default,

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

@@ -1,6 +1,5 @@
 export declare const useStyles: () => {
     switchContainer: {};
-    switchButtonFocused: import("@alveole/theme").FocusRingStyle;
     switch: {
         display: "flex";
         flexDirection: "row";
@@ -8,8 +7,8 @@ export declare const useStyles: () => {
         paddingRight: string | number;
     };
     switchButton: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "pointer";
         padding: number;
         minHeight: string | number;
@@ -17,27 +16,29 @@ export declare const useStyles: () => {
         marginBottom: string;
     };
     switchButtonChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchButtonDisabled: {
-        backgroundColor: string;
+        opacity: 1;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
     };
     switchThumb: {
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
+        boxShadow: "none";
     };
     switchThumbChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchThumbDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
         borderColor: "#FFFFFF";
     };
     switchLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC"}
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC"}

package/dist/ui/Switch/Switch.styles.js

@@ -1,9 +1,7 @@
-import { focusRing, makeStyles } from '@alveole/theme';
+import { makeStyles } from '@alveole/theme';
+import { sansEstompage } from '../../core/styleTamagui/sansEstompage';
 export const useStyles = makeStyles(({ text, color, spacing }) => ({
     switchContainer: {},
-    // Voir `Switch.tsx` : Tamagui impose sa propre bague en `!important`, seule sa prop
-    // `focusVisibleStyle` peut la remplacer. La valeur vient de la meme source que la regle CSS.
-    switchButtonFocused: focusRing('default'),
     switch: {
         display: 'flex',
         flexDirection: 'row',
@@ -25,11 +23,14 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     switchButtonDisabled: {
         backgroundColor: color.background['disabled-grey'],
         cursor: 'not-allowed',
+        ...sansEstompage,
     },
     switchThumb: {
         borderWidth: 1,
         borderColor: color.border['default-grey'],
         backgroundColor: color.background['default-active'],
+        // Tamagui v3 ombre son pouce ; celui d'Alveole est plat.
+        boxShadow: 'none',
     },
     switchThumbChecked: {
         backgroundColor: color.primary,

package/dist/ui/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BoxProps } from '../../core/Box';
 import { Leading } from '../Leading';
-export type TabsProps = Omit<BoxProps, 'children'> & {
+export type TabsProps = Omit<BoxProps, 'children' | 'onChange'> & {
     tabs: {
         label: string;
         leading?: Leading;
@@ -12,6 +12,12 @@ export type TabsProps = Omit<BoxProps, 'children'> & {
         renderAction?: () => React.ReactNode;
     }[];
     defaultValue?: string;
+    /**
+     * L'onglet actif, impose par le parent : `Tabs` devient controle. Un clic sur un onglet appelle
+     * toujours `onChange`, au parent de mettre `value` a jour. Absent, `Tabs` garde l'onglet actif
+     * pour lui, a partir de `defaultValue`.
+     */
+    value?: string;
     onChange?: (index: number) => void;
     /**
      * Active l'Anchor Sync (voir ADR 0022) : au clic, l'onglet actif est ecrit dans l'etat

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IACnD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}

package/dist/ui/Tabs/Tabs.js

@@ -9,10 +9,10 @@ import { TabsTab } from './TabsTab';
 import { useAnchorSync } from './useAnchorSync';
 import { useTabsState } from './useTabsState';
 export const Tabs = (props) => {
-    const { tabs, defaultValue = '', onChange, urlAnchorPrefix, style, ...boxProps } = props;
+    const { tabs, defaultValue = '', value, onChange, urlAnchorPrefix, style, ...boxProps } = props;
     const styles = useStyles();
     const initialValue = defaultValue || tabs[0]?.value || '';
-    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange);
+    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange, value);
     const { persist } = useAnchorSync(urlAnchorPrefix, anchor => {
         const tab = tabs.find(t => toSlug(t.label) === anchor);
         if (tab)
@@ -27,5 +27,5 @@ export const Tabs = (props) => {
                 const tab = tabs[index];
                 if (tab)
                     persist(toSlug(tab.label));
-            }, orientation: "horizontal", size: "$4", activationMode: "manual", children: [_jsxs(TamaguiTabs.List, { disablePassBorderRadius: true, loop: false, style: styles.tabsList, ...focusRingProps(), children: [tabs.map(tab => (_jsx(TabsTab, { value: tab.value, label: tab.label, leading: tab.leading, counter: tab.counter, etat: etatDeLOnglet(tab.value), disabled: tabs.length < 2, onHover: setHoverTab, onInteraction: handleOnInteraction }, tab.value))), ongletCourant?.renderAction && _jsx(Box, { ml: 'auto', children: ongletCourant.renderAction() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, ...focusRingProps(), children: _jsx(TabsContent, { content: ongletCourant?.content, scrollable: ongletCourant?.scrollable }) }, idx))) })] }) }));
+            }, orientation: "horizontal", size: "$4", activationMode: "manual", children: [_jsxs(TamaguiTabs.List, { loop: false, style: styles.tabsList, ...focusRingProps(), children: [tabs.map(tab => (_jsx(TabsTab, { value: tab.value, label: tab.label, leading: tab.leading, counter: tab.counter, etat: etatDeLOnglet(tab.value), disabled: tabs.length < 2, onHover: setHoverTab, onInteraction: handleOnInteraction }, tab.value))), ongletCourant?.renderAction && _jsx(Box, { ml: 'auto', children: ongletCourant.renderAction() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, ...focusRingProps(), children: _jsx(TabsContent, { content: ongletCourant?.content, scrollable: ongletCourant?.scrollable }) }, idx))) })] }) }));
 };