@alveole/components 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/ui/Button/Button.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Avatar } from '../Avatar';
 import { Button } from './Button';
 import { useStyles } from './Button.styles';
@@ -9,7 +10,7 @@ export default {
     title: 'Button',
     tags: ['ui'],
     experimental: false,
-    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-548',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=3993-778',
     description: 'Boutons de type Pressable (React Native) avec différentes tailles et variants.',
     component: Button,
     styleFn: useStyles,
@@ -34,14 +35,14 @@ export default {
  */
 export const Variants = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Primary" }), _jsx(Button, { variant: "secondary", title: "Secondary" }), _jsx(Button, { variant: "tertiary", title: "Tertiary" }), _jsx(Button, { variant: "danger", title: "Danger" })] }));
 /** `md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant. */
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Bouton sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Bouton md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Bouton lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 24, children: [_jsx(Button, { variant: "secondary", size: "sm", title: "Sm" }), _jsx(Button, { variant: "secondary", size: "md", title: "Md" }), _jsx(Button, { variant: "secondary", size: "lg", title: "Lg" })] }));
 /**
  * - `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.
  * - `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.
  * - `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi
  *   l'état accessible correspondant, ce que `selected` ne fait pas.
  */
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Normal" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Default" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true }), _jsx(Button, { variant: "secondary", title: "Selected", selected: true }), _jsx(Button, { variant: "secondary", title: "Expanded", expanded: true })] }));
 /**
  * Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la
  * prop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).
@@ -72,8 +73,27 @@ export const Loading = () => {
     };
     return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "primary", title: "Enregistrer", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "secondary", title: "Exporter", leading: "Download", isLoading: isLoading, onPress: handlePress }), _jsx(Button, { variant: "primary", title: "D\u00E9lai court", loadingDelay: "short", isLoading: isLoading, onPress: handlePress })] }));
 };
+/**
+ * Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :
+ * c'est la protection contre la double soumission d'un formulaire. Le verrou est posé dès le
+ * premier clic, avant même le rafraîchissement : le second clic d'un double clic est ignoré.
+ * Pas besoin de gérer `isLoading` : le bouton charge seul, avec le même `loadingDelay`.
+ *
+ * Avec react-hook-form, `onPress={handleSubmit(...)}` suffit, `handleSubmit` rendant une promesse.
+ * Un `onPress` synchrone n'est pas verrouillé.
+ *
+ * Double-cliquez sur le bouton : l'envoi de 3 secondes n'est compté qu'une fois.
+ */
+export const OnPressAsynchrone = () => {
+    const [envois, setEnvois] = React.useState(0);
+    const envoyer = async () => {
+        setEnvois(n => n + 1);
+        await new Promise(resolve => setTimeout(resolve, 3000));
+    };
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, style: { alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", title: "Envoyer", loadingDelay: "short", onPress: envoyer }), _jsxs(Typography, { children: ["Envois : ", envois] })] }));
+};
 /** `leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister. */
-export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Ajouter", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Exporter", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
+export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, children: [_jsx(Button, { variant: "secondary", title: "Leading", leading: "Plus" }), _jsx(Button, { variant: "secondary", title: "Trailing", trailing: "Download" }), _jsx(Button, { variant: "secondary", title: "Filtres", leading: "Plus", trailing: "ChevronDown" })] }));
 /**
  * `leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.
  * Il est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien

package/dist/ui/Button/Button.stories.sources.d.ts

@@ -2,6 +2,7 @@ export declare const Variants: () => string;
 export declare const Sizes: () => string;
 export declare const States: () => string;
 export declare const Loading: () => string;
+export declare const OnPressAsynchrone: () => string;
 export declare const Icons: () => string;
 export declare const TertiaireAvecAvatar: () => string;
 export declare const IconOnly: () => string;
@@ -11,6 +12,7 @@ export declare const storySources: {
     readonly Sizes: () => string;
     readonly States: () => string;
     readonly Loading: () => string;
+    readonly OnPressAsynchrone: () => string;
     readonly Icons: () => string;
     readonly TertiaireAvecAvatar: () => string;
     readonly IconOnly: () => string;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAAiW,CAAC;AAEpX,eAAO,MAAM,MAAM,cAA4W,CAAC;AAEhY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAStE,CAAC"}
+{"version":3,"file":"Button.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,cAA6U,CAAC;AAEnW,eAAO,MAAM,KAAK,cAA4U,CAAC;AAE/V,eAAO,MAAM,MAAM,cAA6W,CAAC;AAEjY,eAAO,MAAM,OAAO,cAAypB,CAAC;AAE9qB,eAAO,MAAM,iBAAiB,cAA2f,CAAC;AAE1hB,eAAO,MAAM,KAAK,cAAwW,CAAC;AAE3X,eAAO,MAAM,mBAAmB,cAAkW,CAAC;AAEnY,eAAO,MAAM,QAAQ,cAAizB,CAAC;AAEv0B,eAAO,MAAM,SAAS,cAAwG,CAAC;AAE/H,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAUtE,CAAC"}

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

@@ -1,10 +1,11 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Button/Button.stories.tsx
 export const Variants = () => "export const Variants = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"primary\" title=\"Primary\" />\n    <Button variant=\"secondary\" title=\"Secondary\" />\n    <Button variant=\"tertiary\" title=\"Tertiary\" />\n    <Button variant=\"danger\" title=\"Danger\" />\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={24}>\n    <Button variant=\"secondary\" size=\"sm\" title=\"Bouton sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Bouton md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Bouton lg\" />\n  </Box>\n);";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"secondary\" title=\"Normal\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n    <Button variant=\"secondary\" title=\"Expanded\" expanded />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={24}>\n    <Button variant=\"secondary\" size=\"sm\" title=\"Sm\" />\n    <Button variant=\"secondary\" size=\"md\" title=\"Md\" />\n    <Button variant=\"secondary\" size=\"lg\" title=\"Lg\" />\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"secondary\" title=\"Default\" />\n    <Button variant=\"secondary\" title=\"Disabled\" disabled />\n    <Button variant=\"secondary\" title=\"Selected\" selected />\n    <Button variant=\"secondary\" title=\"Expanded\" expanded />\n  </Box>\n);";
 export const Loading = () => "export const Loading = () => {\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  const handlePress = () => {\n    setIsLoading(true);\n    setTimeout(() => setIsLoading(false), 3000);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n      <Button variant=\"primary\" title=\"Enregistrer\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"secondary\" title=\"Exporter\" leading=\"Download\" isLoading={isLoading} onPress={handlePress} />\n      <Button variant=\"primary\" title=\"Délai court\" loadingDelay=\"short\" isLoading={isLoading} onPress={handlePress} />\n    </Box>\n  );\n};";
-export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"secondary\" title=\"Ajouter\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Exporter\" trailing=\"Download\" />\n    <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n  </Box>\n);";
+export const OnPressAsynchrone = () => "export const OnPressAsynchrone = () => {\n  const [envois, setEnvois] = React.useState(0);\n\n  const envoyer = async () => {\n    setEnvois(n => n + 1);\n    await new Promise(resolve => setTimeout(resolve, 3000));\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n      <Button variant=\"primary\" title=\"Envoyer\" loadingDelay=\"short\" onPress={envoyer} />\n      <Typography>Envois : {envois}</Typography>\n    </Box>\n  );\n};";
+export const Icons = () => "export const Icons = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24}>\n    <Button variant=\"secondary\" title=\"Leading\" leading=\"Plus\" />\n    <Button variant=\"secondary\" title=\"Trailing\" trailing=\"Download\" />\n    <Button variant=\"secondary\" title=\"Filtres\" leading=\"Plus\" trailing=\"ChevronDown\" />\n  </Box>\n);";
 export const TertiaireAvecAvatar = () => "export const TertiaireAvecAvatar = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading={<Avatar size=\"xs\" fallbackText=\"Marie Curie\" />} />\n    <Button variant=\"tertiary\" title=\"Marie Curie\" leading=\"User\" />\n  </Box>\n);";
 export const IconOnly = () => "export const IconOnly = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ alignItems: 'center' }}>\n    <ButtonIcon variant=\"tertiary\" size=\"sm\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"tertiary\" size=\"lg\" icon=\"MoreHorizontal\" accessibilityLabel=\"Plus d'actions\" />\n    <ButtonIcon variant=\"secondary\" size=\"md\" icon=\"Trash\" accessibilityLabel=\"Supprimer\" />\n    <ButtonIcon variant=\"primary\" size=\"md\" icon=\"Plus\" accessibilityLabel=\"Ajouter\" />\n    <ButtonIcon variant=\"tertiary\" size=\"md\" icon=\"CircleUser\" iconSize=\"xs\" accessibilityLabel=\"Voir le profil\" />\n  </Box>\n);";
 export const FullWidth = () => "export const FullWidth = () => <Button variant=\"primary\" title=\"Full Width\" fullWidth />;";
@@ -13,6 +14,7 @@ export const storySources = {
     Sizes,
     States,
     Loading,
+    OnPressAsynchrone,
     Icons,
     TertiaireAvecAvatar,
     IconOnly,
@@ -23,6 +25,7 @@ export const storyDescriptions = {
     Sizes: "`md` par défaut. `sm` pour les zones denses, `lg` pour une action qu'on veut mettre en avant.",
     States: "- `disabled` : l'action n'est pas disponible. Le bouton ne répond plus ni au clic ni au clavier.\n- `selected` : le bouton fait partie d'un groupe et c'est lui qui est choisi.\n- `expanded` : le bouton commande un menu ou un panneau actuellement déplié. Il pose aussi\n  l'état accessible correspondant, ce que `selected` ne fait pas.",
     Loading: "Le spinner n'apparaît qu'après un délai, réglé par `loadingDelay` : mêmes valeurs que la\nprop `delay` de `Spinner` (`false` / `true` / `'short'` (300 ms) / `'long'` / `number`).\nIl vaut `'long'` (1 000 ms) par défaut.\n\nCe délai évite un clignotement visuel quand l'opération se termine rapidement :\nsi le serveur répond en moins d'une seconde, l'utilisateur ne voit jamais le spinner.\nAu-delà, le spinner s'affiche pour signaler que l'attente va durer.\n\n**Le spinner prend la place de quelque chose, il ne s'ajoute jamais** : le bouton garde donc\nexactement sa largeur. S'il porte une icône, c'est elle que le spinner remplace, et le\nlibellé reste lisible. Sinon le spinner se centre et le libellé devient invisible sans\nquitter le flux, pour continuer d'imposer sa largeur.\n\nPendant toute l'attente - y compris avant que le spinner ne paraisse - le bouton cesse de\nrépondre : il sort du parcours au clavier et se déclare `aria-disabled`, pour qu'un second\nappui ne relance pas l'opération. Son apparence, elle, reste celle du repos.\n\nAppuyez sur un bouton pour simuler une opération de 3 secondes. Le troisième bouton, avec\n`loadingDelay=\"short\"`, montre son spinner dès 300 ms - avant les deux premiers, qui\nattendent le délai par défaut d'une seconde.",
+    OnPressAsynchrone: "Un `onPress` qui rend une promesse verrouille le bouton jusqu'à sa fin, résolue ou rejetée :\nc'est la protection contre la double soumission d'un formulaire. Le verrou est posé dès le\npremier clic, avant même le rafraîchissement : le second clic d'un double clic est ignoré.\nPas besoin de gérer `isLoading` : le bouton charge seul, avec le même `loadingDelay`.\n\nAvec react-hook-form, `onPress={handleSubmit(...)}` suffit, `handleSubmit` rendant une promesse.\nUn `onPress` synchrone n'est pas verrouillé.\n\nDouble-cliquez sur le bouton : l'envoi de 3 secondes n'est compté qu'une fois.",
     Icons: "`leading` place l’icône avant le libellé, `trailing` après. Les deux peuvent coexister.",
     TertiaireAvecAvatar: "`leading` et `trailing` acceptent aussi un élément : un avatar, un logo de réseau social.\nIl est posé dans un emplacement de la taille de l'icône, sans recevoir de couleur, si bien\nque le bouton garde sa hauteur et son alignement.",
     IconOnly: "`ButtonIcon` est la **seule** façon d'obtenir un bouton carré. `Button` exige un `title` :\nil ne bascule plus en mode icône seule quand on le lui retire.\n\nC'est la règle des trois références. Atlassian rend les `children` de son bouton par défaut\nobligatoires, si bien qu'un bouton-icône ne peut y être écrit qu'avec `IconButton`. Primer a\ndeux composants, et la géométrie carrée n'existe que sur la classe que pose `IconButton`.\nBase n'a qu'un composant, mais la forme s'y demande (`shape=\"square\"`), jamais ne se déduit.\n\nLa raison est mesurable : tant que l'absence de `title` suffisait, rien ne signalait un\nbouton muet. Deux des quatre appels de ce genre écrits dans les applications n'avaient aucun\n`accessibilityLabel`. `ButtonIcon` le rend obligatoire, et le compilateur fait le reste.\n\nIl accepte `primary`, `secondary` et `tertiary`, et `iconSize` pour dissocier la taille de\nl'icône de celle du bouton.",

package/dist/ui/Button/Button.types.d.ts

@@ -32,6 +32,10 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
     active?: boolean;
     /** Le bouton commande un menu ou un panneau actuellement deplie. */
     expanded?: boolean;
+    /**
+     * Inutile pour un `onPress` qui rend une promesse : le bouton se verrouille et charge seul
+     * jusqu'a sa fin, ce qui empeche le double envoi d'un formulaire.
+     */
     isLoading?: boolean;
     /**
      * Retard avant que le spinner de `isLoading` ne paraisse. Memes valeurs que la prop `delay`

package/dist/ui/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,YAMhD,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,4FAA4F;IAC5F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,YAMhD,CAAC"}

package/dist/ui/Button/ButtonContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,yEAAyE;IACzE,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAWF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uCAAuC,kBAAkB,gCA2CtF,CAAC"}
+{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,yEAAyE;IACzE,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAWF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uCAAuC,kBAAkB,gCA8CtF,CAAC"}

package/dist/ui/Button/ButtonContent.js

@@ -4,7 +4,7 @@ import { Typography } from '../../core/Typography';
 import { LeadingSlot } from '../Leading';
 import { Spinner } from '../Spinner';
 import { useDelaiDAffichage } from '../Spinner/useDelaiDAffichage';
-import { styleDeLIcone, styleDeSurvol, styleDuConteneur, styleDuLibelle } from './buttonStyling';
+import { styleDeLIcone, styleDuConteneur, styleDuLibelle } from './buttonStyling';
 import { placeDuSpinner } from './placeDuSpinner';
 /** Un cote du libelle : son contenu, ou le spinner venu prendre sa place. */
 const Emplacement = ({ spinner, contenu, apparence }) => {
@@ -18,13 +18,17 @@ const Emplacement = ({ spinner, contenu, apparence }) => {
  */
 export const ButtonContent = ({ styles, etat, state, actif, props }) => {
     const { title, leading, trailing, contentAlign = 'center', isLoading, loadingDelay = 'long', ContainerProps = {}, } = props;
-    const { style, hoverStyle, ...containerProps } = ContainerProps;
+    const { style, ...containerProps } = ContainerProps;
     const hovered = !!state.hovered;
     const icone = styleDeLIcone(styles, etat, hovered);
     const place = placeDuSpinner(useDelaiDAffichage(isLoading ? loadingDelay : false) && !!isLoading, leading, trailing);
     const recouvreLeLibelle = place === 'libelle';
     const aGauche = contentAlign === 'start';
-    return (_jsxs(Box, { style: [styleDuConteneur(styles, etat, actif), aGauche && { justifyContent: 'flex-start' }, style], hoverStyle: { ...styleDeSurvol(styles, etat), ...hoverStyle }, ...containerProps, children: [_jsx(Emplacement, { spinner: place === 'tete', contenu: leading, apparence: icone }), _jsx(Typography, { "user-select": "false", style: {
+    return (_jsxs(Box, { style: [
+            styleDuConteneur(styles, etat, { actif, survole: hovered }),
+            aGauche && { justifyContent: 'flex-start' },
+            style,
+        ], ...containerProps, children: [_jsx(Emplacement, { spinner: place === 'tete', contenu: leading, apparence: icone }), _jsx(Typography, { "user-select": "false", style: {
                     ...styleDuLibelle(styles, etat, hovered),
                     ...(recouvreLeLibelle ? styles.libelleMasque : {}),
                     ...(aGauche ? { flexGrow: 1, textAlign: 'left' } : {}),

package/dist/ui/Button/buttonIconStyling.d.ts

@@ -7,13 +7,13 @@ export type EtatDuBoutonIcone = Pick<ButtonIconProps, 'variant' | 'disabled' | '
 };
 export declare const styleDuCadreDIcone: (styles: Styles, etat: EtatDuBoutonIcone, hovered: boolean) => {
     backgroundColor: import("react-native").ColorValue | undefined;
+    borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
     borderBottomLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
     borderBottomRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
     borderTopLeftRadius: string | number | import("react-native").Animated.AnimatedNode;
     borderTopRightRadius: string | number | import("react-native").Animated.AnimatedNode;
-    height: import("react-native").DimensionValue;
     width: import("react-native").DimensionValue;
+    height: import("react-native").DimensionValue;
     overflow: "hidden";
     borderWidth: number;
     borderStyle: "solid";

package/dist/ui/Button/buttonStyling.d.ts

@@ -2,9 +2,15 @@ import { StyleValue } from '@alveole/theme';
 import { IconProps } from '../LucideIcon';
 import { EtatDuBouton } from './Button.types';
 import { Styles } from './buttonVariants';
-/** Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. */
-export declare const styleDuConteneur: (styles: Styles, etat: EtatDuBouton, actif: boolean) => StyleValue;
-/** Le survol n'est pas un etat rendu : c'est une prop que Tamagui appliquera lui-meme. */
+/**
+ * Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. Le survol suit l'etat
+ * du pointeur, comme le libelle et l'icone : Tamagui v3 a retire `hoverStyle`.
+ */
+export declare const styleDuConteneur: (styles: Styles, etat: EtatDuBouton, { actif, survole }: {
+    actif: boolean;
+    survole?: boolean;
+}) => StyleValue;
+/** Le fond que prend le conteneur sous le pointeur. */
 export declare const styleDeSurvol: (styles: Styles, { variant, selected, disabled }: EtatDuBouton) => StyleValue;
 export declare const styleDuLibelle: (styles: Styles, etat: EtatDuBouton, hovered: boolean) => StyleValue;
 export declare const styleDeLIcone: (styles: Styles, etat: EtatDuBouton, hovered: boolean) => Omit<IconProps, "name">;

package/dist/ui/Button/buttonStyling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAQL,MAAM,EAIP,MAAM,kBAAkB,CAAC;AAc1B,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,OAAO,OAAO,KAAG,UASpF,CAAC;AAEH,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,iCAAiC,YAAY,KAAG,UAK7F,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,UAQrF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAO1G,CAAC;AAEF;iEACiE;AACjE,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,OAAO;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;;;;;;;;;;;CAgC/F,CAAC"}
+{"version":3,"file":"buttonStyling.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/buttonStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAQL,MAAM,EAIP,MAAM,kBAAkB,CAAC;AAc1B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,MAAM,EACd,MAAM,YAAY,EAClB,oBAA4B;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,KAChE,UAUD,CAAC;AAEH,uDAAuD;AACvD,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,iCAAiC,YAAY,KAAG,UAK7F,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,UAQrF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,OAAO,KAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAO1G,CAAC;AAEF;iEACiE;AACjE,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,OAAO;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE;;;;;;;;;;;;CAgC/F,CAAC"}

package/dist/ui/Button/buttonStyling.js

@@ -9,10 +9,14 @@ const styleDeFond = (styles, { variant, selected, disabled }, actif) => {
     const etats = CONTENEUR_PAR_VARIANT[variant];
     return { ...styles[etats.repos], ...styleDe(styles, cleDEtat(etats, { disabled, actif })) };
 };
-/** Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. */
-export const styleDuConteneur = (styles, etat, actif) => ({
+/**
+ * Le fond et les rembourrages : tout ce qui se pose sur le Box interieur. Le survol suit l'etat
+ * du pointeur, comme le libelle et l'icone : Tamagui v3 a retire `hoverStyle`.
+ */
+export const styleDuConteneur = (styles, etat, { actif, survole = false }) => ({
     ...styles.container,
     ...styleDeFond(styles, etat, actif),
+    ...(survole ? styleDeSurvol(styles, etat) : {}),
     ...styleDe(styles, CONTENEUR_PAR_TAILLE[etat.taille]),
     // La bordure est posee sur le Pressable, pas ici : le Box doit donc annuler celle que son
     // style de variante lui aurait donnee, sans quoi les deux se superposeraient.
@@ -20,7 +24,7 @@ export const styleDuConteneur = (styles, etat, actif) => ({
     borderColor: undefined,
     borderStyle: undefined,
 });
-/** Le survol n'est pas un etat rendu : c'est une prop que Tamagui appliquera lui-meme. */
+/** Le fond que prend le conteneur sous le pointeur. */
 export const styleDeSurvol = (styles, { variant, selected, disabled }) => {
     if (disabled)
         return {};

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,wBAQkB;AAElB,eAAO,MAAM,IAAI,mCAuBhB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAEF,eAAO,MAAM,aAAa,mCA0BzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCA2BjC,CAAC;AAEF,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,mCAiBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAc9B,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Card/Card.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
+import { Image } from '../../core/Image';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -22,10 +23,10 @@ export const cardDisabled = () => {
     return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/100", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
 };
 export const cardWithMedia = () => {
-    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
 };
 export const cardWithMediaDisabled = () => {
-    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
+    return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { variant: "disabled", children: _jsx(Image, { source: "https://picsum.photos/400/200", alt: "", width: "100%", height: 200 }) }), _jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "default", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
 };
 export const cardSection = () => {
     return (_jsx(Card.Section, { titre: "Titre de la carte", description: "Description de la carte", titreIcone: "Image", descriptionIcone: "Image" }));

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAw9B,CAAC;AAEl/B,eAAO,MAAM,aAAa,cAAk/B,CAAC;AAE7gC,eAAO,MAAM,qBAAqB,cAA2mC,CAAC;AAE9oC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,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":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAw9B,CAAC;AAEl/B,eAAO,MAAM,aAAa,cAAu+B,CAAC;AAElgC,eAAO,MAAM,qBAAqB,cAAgmC,CAAC;AAEnoC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,mBAAmB,cAAmR,CAAC;AAEpT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAoW,CAAC;AAEpY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,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/Card/Card.stories.sources.js

@@ -2,8 +2,8 @@
 // Source: src/ui/Card/Card.stories.tsx
 export const card = () => "export const card = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardDisabled = () => "export const cardDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" src=\"https://picsum.photos/100/100\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
-export const cardWithMedia = () => "export const cardWithMedia = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media>\n          <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n        </Card.Media>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
-export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media variant=\"disabled\">\n          <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n        </Card.Media>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
+export const cardWithMedia = () => "export const cardWithMedia = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media>\n          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\n        </Card.Media>\n        <Card.Header\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"success\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
+export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n  return (\n    <Box style={{ width: '100%', maxWidth: 400 }}>\n      <Card>\n        <Card.Media variant=\"disabled\">\n          <Image source=\"https://picsum.photos/400/200\" alt=\"\" width=\"100%\" height={200} />\n        </Card.Media>\n        <Card.Header\n          variant=\"disabled\"\n          titre=\"Titre lorem\"\n          sousTitre=\"Sous-titre\"\n          image={<Avatar size=\"md\" fallbackText=\"M\" />}\n          badge={\n            <Badge variant=\"default\" size=\"sm\">\n              PRÉSENT\n            </Badge>\n          }\n        />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n        <Card.Actions>\n          <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n          <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n        </Card.Actions>\n      </Card>\n    </Box>\n  );\n};";
 export const cardSection = () => "export const cardSection = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardSectionDisabled = () => "export const cardSectionDisabled = () => {\n  return (\n    <Card.Section\n      variant=\"disabled\"\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";
 export const cardSectionWithLink = () => "export const cardSectionWithLink = () => {\n  return (\n    <Card.Section\n      titre=\"Titre de la carte\"\n      description=\"Description de la carte\"\n      descriptionLink=\"/\"\n      titreIcone=\"Image\"\n      descriptionIcone=\"Image\"\n    />\n  );\n};";

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.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;
@@ -58,6 +58,7 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
         };
         checkboxDisabled: {
+            opacity: 1;
             borderColor: string;
             backgroundColor: "transparent";
         };
@@ -76,7 +77,6 @@ declare const _default: {
         indicatorDisabled: {
             backgroundColor: string;
         };
-        checkboxFocused: import("@alveole/theme").FocusRingStyle;
         checkboxContainer: {
             display: "flex";
             flexDirection: "column";

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

@@ -39,6 +39,7 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     checkboxDisabled: {
+        opacity: 1;
         borderColor: string;
         backgroundColor: "transparent";
     };
@@ -57,7 +58,6 @@ export declare const useStyles: () => {
     indicatorDisabled: {
         backgroundColor: string;
     };
-    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":"AAkFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAuF,CAAC"}

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

@@ -1,8 +1,6 @@
-import { focusRing, makeStyles } from '@alveole/theme';
+import { makeStyles } from '@alveole/theme';
+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',
@@ -29,6 +27,7 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
     checkboxDisabled: {
         borderColor: color.border['disabled-grey'],
         backgroundColor: 'transparent',
+        ...sansEstompage,
     },
     checkboxError: {
         borderColor: color.border['plain-error'],

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":"AAAA,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,gCAuBnE,CAAC"}

package/dist/ui/Checkbox/CheckboxLabel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Label } from 'tamagui';
+import { Label } from 'tamagui/unstyled';
 import { Typography } from '../../core/Typography';
 import { useStyles } from './Checkbox.styles';
 import { resolveCheckboxSize } from './Checkbox.utils';
@@ -7,7 +7,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: '100%', children: _jsx(Typography, { style: {
                 ...styles.label,
                 ...(resolvedSize === 'sm' ? styles.labelSm : {}),
                 ...(disabled ? styles.labelDisabled : {}),

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);