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

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

@@ -8,10 +8,10 @@ declare const _default: {
     component: (props: import("./Tabs").TabsProps) => React.JSX.Element;
     styleFn: () => {
         tabIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabsLabel: {
             fontSize: 14;
@@ -28,9 +28,6 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         tabsTab: {
-            appearance: "none";
-            backgroundColor: "transparent";
-            cursor: "pointer";
             paddingTop: string | number;
             paddingBottom: string | number;
             paddingLeft: number;
@@ -44,9 +41,13 @@ declare const _default: {
             gap: string | number;
             borderTopLeftRadius: import("@alveole/theme").Radius;
             borderTopRightRadius: import("@alveole/theme").Radius;
+            opacity: 1;
+            appearance: "none";
+            backgroundColor: "transparent";
+            cursor: "pointer";
         };
         tabsTabActive: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
         };
         wrapper: {
@@ -67,7 +68,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         container: {
             flex: number;
@@ -77,28 +78,50 @@ declare const _default: {
             gap: string | number;
         };
         tabs: {
-            flex: number;
             minHeight: number;
             flexDirection: "column";
+            flexGrow: number;
+            flexShrink: number;
+            flexBasis: string;
+            flex?: undefined;
+        } | {
+            minHeight: number;
+            flexDirection: "column";
+            flex: number;
+            flexGrow?: undefined;
+            flexShrink?: undefined;
+            flexBasis?: undefined;
         };
         tabsList: {
             borderBottomLeftRadius: string | number;
             borderBottomRightRadius: string | number;
             gap: string | number;
             boxSizing: "border-box";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
             backgroundColor: "transparent";
             overflowX: "scroll";
         };
         tabsContent: {
-            flex: number;
             minHeight: number;
             overflow: "hidden";
+            flexGrow: number;
+            flexShrink: number;
+            flexBasis: string;
+            flex?: undefined;
+        } | {
+            minHeight: number;
+            overflow: "hidden";
+            flex: number;
+            flexGrow?: undefined;
+            flexShrink?: undefined;
+            flexBasis?: undefined;
         };
     };
 };
 export default _default;
 export declare const Example: () => React.JSX.Element;
+export declare const Controle: () => React.JSX.Element;
+export declare const OngletUnique: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAGF,eAAO,MAAM,YAAY,yBAKxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { Button } from '../Button';
 import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
@@ -27,4 +28,17 @@ export const Example = () => {
                 },
             ] }) }));
 };
+// `value` rend les Tabs controles : le parent choisit l'onglet actif, par exemple depuis un
+// bouton ou une carte cliquee, et le suit depuis `onChange` quand l'utilisateur clique un onglet.
+export const Controle = () => {
+    const onglets = [
+        { label: 'Onglet 1', value: 'onglet-1', content: _jsx(Typography, { children: "Contenu de onglet 1" }) },
+        { label: 'Onglet 2', value: 'onglet-2', content: _jsx(Typography, { children: "Contenu de onglet 2" }) },
+        { label: 'Onglet 3', value: 'onglet-3', content: _jsx(Typography, { children: "Contenu de onglet 3" }) },
+    ];
+    const [ongletActif, setOngletActif] = React.useState('onglet-1');
+    return (_jsxs(Box, { width: '100%', gap: "2W", children: [_jsxs(Box, { flexDirection: "row", gap: "1W", children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
+};
+// Un onglet seul est desactive : il garde pourtant sa pleine opacite.
+export const OngletUnique = () => (_jsx(Tabs, { defaultValue: "seul", tabs: [{ label: 'Onglet seul', value: 'seul', content: _jsx(Typography, { children: "Contenu de l onglet seul" }) }] }));
 export * as Sources from './Tabs.stories.sources';

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

@@ -1,6 +1,10 @@
 export declare const Example: () => string;
+export declare const Controle: () => string;
+export declare const OngletUnique: () => string;
 export declare const storySources: {
     readonly Example: () => string;
+    readonly Controle: () => string;
+    readonly OngletUnique: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tabs.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAAi5B,CAAC;AAEv6B,eAAO,MAAM,YAAY,cAA8M,CAAC;AAExO,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tabs/Tabs.stories.tsx
 export const Example = () => "export const Example = () => {\n  const [_activeTab, setActiveTab] = React.useState(0);\n\n  return (\n    <Box width={'100%'}>\n      <Tabs\n        defaultValue={'onglet-1'}\n        onChange={setActiveTab}\n        urlAnchorPrefix=\"tabs-story\"\n        tabs={[\n          { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n          { label: 'Onglet 2', counter: 12, value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n          { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n          {\n            label: 'Onglet 4',\n            leading: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
+export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap=\"2W\">\n      <Box flexDirection=\"row\" gap=\"1W\">\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
+export const OngletUnique = () => "export const OngletUnique = () => (\n  <Tabs\n    defaultValue=\"seul\"\n    tabs={[{ label: 'Onglet seul', value: 'seul', content: <Typography>Contenu de l onglet seul</Typography> }]}\n  />\n);";
 export const storySources = {
     Example,
+    Controle,
+    OngletUnique,
 };

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     tabIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabsLabel: {
         fontSize: 14;
@@ -20,9 +20,6 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     tabsTab: {
-        appearance: "none";
-        backgroundColor: "transparent";
-        cursor: "pointer";
         paddingTop: string | number;
         paddingBottom: string | number;
         paddingLeft: number;
@@ -36,9 +33,13 @@ export declare const useStyles: () => {
         gap: string | number;
         borderTopLeftRadius: import("@alveole/theme").Radius;
         borderTopRightRadius: import("@alveole/theme").Radius;
+        opacity: 1;
+        appearance: "none";
+        backgroundColor: "transparent";
+        cursor: "pointer";
     };
     tabsTabActive: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
     };
     wrapper: {
@@ -59,7 +60,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     container: {
         flex: number;
@@ -69,24 +70,44 @@ export declare const useStyles: () => {
         gap: string | number;
     };
     tabs: {
-        flex: number;
         minHeight: number;
         flexDirection: "column";
+        flexGrow: number;
+        flexShrink: number;
+        flexBasis: string;
+        flex?: undefined;
+    } | {
+        minHeight: number;
+        flexDirection: "column";
+        flex: number;
+        flexGrow?: undefined;
+        flexShrink?: undefined;
+        flexBasis?: undefined;
     };
     tabsList: {
         borderBottomLeftRadius: string | number;
         borderBottomRightRadius: string | number;
         gap: string | number;
         boxSizing: "border-box";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
         backgroundColor: "transparent";
         overflowX: "scroll";
     };
     tabsContent: {
-        flex: number;
         minHeight: number;
         overflow: "hidden";
+        flexGrow: number;
+        flexShrink: number;
+        flexBasis: string;
+        flex?: undefined;
+    } | {
+        minHeight: number;
+        overflow: "hidden";
+        flex: number;
+        flexGrow?: undefined;
+        flexShrink?: undefined;
+        flexBasis?: undefined;
     };
 };
 //# sourceMappingURL=Tabs.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AA8GA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2F,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAkHA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2F,CAAC"}

package/dist/ui/Tabs/Tabs.styles.js

@@ -1,4 +1,6 @@
 import { makeStyles } from '@alveole/theme';
+import { flexDuWeb } from '../../core/styleTamagui/flexDuWeb';
+import { sansEstompage } from '../../core/styleTamagui/sansEstompage';
 const coque = ({ color, spacing }) => ({
     container: {
         flex: 1,
@@ -8,7 +10,7 @@ const coque = ({ color, spacing }) => ({
         gap: spacing('3V'),
     },
     tabs: {
-        flex: 1,
+        ...flexDuWeb(1),
         minHeight: 0,
         flexDirection: 'column',
     },
@@ -23,7 +25,7 @@ const coque = ({ color, spacing }) => ({
         overflowX: 'scroll', // On ajoute un scroll horizontal pour les petits écrans
     },
     tabsContent: {
-        flex: 1,
+        ...flexDuWeb(1),
         minHeight: 0,
         overflow: 'hidden',
     },
@@ -33,6 +35,8 @@ const onglet = ({ color, spacing, radius }) => ({
         appearance: 'none',
         backgroundColor: 'transparent',
         cursor: 'pointer',
+        // L'onglet seul est desactive.
+        ...sansEstompage,
         paddingTop: spacing('1W'),
         paddingBottom: spacing('1W'),
         paddingLeft: 0,

package/dist/ui/Tabs/TabsTab.js

@@ -11,5 +11,5 @@ export const TabsTab = (props) => {
     const { value, label, leading, counter, etat, disabled, onHover, onInteraction } = props;
     const styles = useStyles();
     const { onglet, enveloppe, icone, libelle } = apparenceDeLOnglet(styles, etat);
-    return (_jsx(TamaguiTabs.Tab, { unstyled: true, onHoverIn: () => onHover(value), onHoverOut: () => onHover(null), onInteraction: onInteraction, value: value, disabled: disabled, style: onglet, ...focusRingProps(), children: _jsxs(Box, { style: enveloppe, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm', color: 'currentColor', style: icone } }), _jsx(Typography, { style: libelle, children: label }), counter !== undefined && counter > 0 && (_jsx(Counter, { variant: etat.actif ? 'primary' : 'default', count: counter }))] }) }));
+    return (_jsx(TamaguiTabs.Tab, { unstyled: true, onMouseEnter: () => onHover(value), onMouseLeave: () => onHover(null), onInteraction: onInteraction, value: value, disabled: disabled, style: onglet, ...focusRingProps(), children: _jsxs(Box, { style: enveloppe, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm', color: 'currentColor', style: icone } }), _jsx(Typography, { style: libelle, children: label }), counter !== undefined && counter > 0 && (_jsx(Counter, { variant: etat.actif ? 'primary' : 'default', count: counter }))] }) }));
 };

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

@@ -1,11 +1,11 @@
 import { TabLayout } from 'tamagui';
 import { EtatDeLOnglet } from './Tabs.apparence';
-export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void) => {
+export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void, value?: string) => {
     currentTab: string;
     etatDeLOnglet: (tabValue: string) => EtatDeLOnglet;
     setCurrentTab: (currentTab: string, index: number) => void;
     restoreCurrentTab: (currentTab: string) => void;
     setHoverTab: (hoverTab: string | null) => void;
-    handleOnInteraction: (type: "hover" | "focus" | "select", layout: TabLayout | null) => void;
+    handleOnInteraction: (type: import("tamagui").InteractionType, layout: TabLayout | null) => void;
 };
 //# sourceMappingURL=useTabsState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;8BA4BlD,MAAM,KAAG,aAAa;gCAnBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAEd,MAAM,GAAG,IAAI;;CAuB7C,CAAC"}
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,QAAQ,MAAM;;8BAiClE,MAAM,KAAG,aAAa;gCAxBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAKd,MAAM,GAAG,IAAI;;CAyB7C,CAAC"}

package/dist/ui/Tabs/useTabsState.js

@@ -5,7 +5,9 @@ import React from 'react';
 //
 // Le focus n'en fait pas partie : il est rendu par la regle CSS `:focus-visible` du theme, la
 // seule qui distingue le clavier de la souris. Suivi en React, il s'affichait aussi au clic.
-export const useTabsState = (initialValue, onChange) => {
+// `value`, quand le parent la donne, fait foi sur l'onglet retenu en interne : `Tabs` est alors
+// controle, et c'est au parent de la mettre a jour depuis `onChange`.
+export const useTabsState = (initialValue, onChange, value) => {
     const [tabState, setTabState] = React.useState({
         activeAt: null,
         currentTab: initialValue,
@@ -14,27 +16,31 @@ export const useTabsState = (initialValue, onChange) => {
         hoverTab: null,
     });
     const setCurrentTab = (currentTab, index) => {
-        setTabState({ ...tabState, currentTab });
+        setTabState(state => ({ ...state, currentTab }));
         onChange?.(index);
     };
     // Restaurer l'onglet actif depuis l'Anchor Namespace n'est pas une interaction : `onChange`
     // ne doit se declencher que sur un vrai clic, pas sur ce qui n'est qu'une reprise d'etat.
     const restoreCurrentTab = (currentTab) => setTabState(state => ({ ...state, currentTab }));
-    const setHoverTab = (hoverTab) => setTabState({ ...tabState, hoverTab });
+    // Chaque mise a jour part de l'etat courant, jamais de celui du rendu : en Tamagui v3, l'onglet
+    // emet son interaction `hover` dans le meme evenement que `onMouseEnter`, et une ecriture a
+    // partir de l'etat du rendu effacait le survol tout juste pose.
+    const setHoverTab = (hoverTab) => setTabState(state => ({ ...state, hoverTab }));
     const handleOnInteraction = (type, layout) => {
         if (type === 'select') {
-            setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: layout });
+            setTabState(state => ({ ...state, prevActiveAt: state.activeAt, activeAt: layout }));
         }
         else {
-            setTabState({ ...tabState, intentAt: layout });
+            setTabState(state => ({ ...state, intentAt: layout }));
         }
     };
+    const currentTab = value ?? tabState.currentTab;
     const etatDeLOnglet = (tabValue) => ({
-        actif: tabState.currentTab === tabValue,
+        actif: currentTab === tabValue,
         survole: tabState.hoverTab === tabValue,
     });
     return {
-        currentTab: tabState.currentTab,
+        currentTab,
         etatDeLOnglet,
         setCurrentTab,
         restoreCurrentTab,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAMlD,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBA0DlC,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAOlD,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAqElC,CAAC"}

package/dist/ui/Tag/Tag.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { LeadingSlot } from '../Leading';
 import { useStyles } from './Tag.styles';
 import { TagClose } from './TagClose';
+import { TagNativeContent } from './TagNativeContent';
 import { apparenceDeLaPastille, ecartDeLIcone, reponseAuPointeur } from './tagStyling';
 export const Tag = (props) => {
     const { size, children, selected, interactive, closable, onClose, leading, style, ...tagProps } = props;
@@ -24,6 +25,17 @@ export const Tag = (props) => {
                     croixSurvolee,
                     selectionnee: !!selected,
                 });
-                return (_jsxs(Typography, { style: apparenceDeLaPastille(styles, { size, survolee, selectionnee: !!selected, fermable: !!closable }), ...tagProps, children: [leading != null && (_jsx(Box, { style: ecartDeLIcone(styles, size), children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), children, closable && (_jsx(TagClose, { size: size, libelle: typeof children === 'string' ? children : undefined, onSurvol: setCroixSurvolee, fonce: fonce, onClose: onClose }))] }));
+                const apparence = apparenceDeLaPastille(styles, {
+                    size,
+                    survolee,
+                    selectionnee: !!selected,
+                    fermable: !!closable,
+                });
+                const icone = leading != null && (_jsx(Box, { style: ecartDeLIcone(styles, size), children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) }));
+                const croix = closable && (_jsx(TagClose, { size: size, libelle: typeof children === 'string' ? children : undefined, onSurvol: setCroixSurvolee, fonce: fonce, onClose: onClose }));
+                if (Platform.OS !== 'web') {
+                    return (_jsx(TagNativeContent, { apparence: apparence, leading: icone, close: croix, children: children }));
+                }
+                return (_jsxs(Typography, { style: apparence, ...tagProps, children: [icone, children, croix] }));
             } }) }));
 };

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

@@ -22,20 +22,20 @@ declare const _default: {
             alignItems: "center";
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             whiteSpace: "nowrap";
             overflow: "hidden";
             textOverflow: "ellipsis";
             maxWidth: string;
         };
         tagSurvole: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSelected: {
-            borderColor: string;
-            color: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSm: {
             fontSize: 12;
@@ -64,7 +64,7 @@ declare const _default: {
             marginRight: number;
         };
         croixSurvolee: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         croixSm: {
             marginLeft: number;
@@ -86,6 +86,14 @@ declare const _default: {
             width: number;
             height: number;
         };
+        nativeContent: {
+            readonly display: "flex";
+            readonly flexDirection: "row";
+            readonly alignItems: "center";
+        };
+        nativeLabel: {
+            readonly flexShrink: 1;
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,KAAK,mCAKjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAYpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAerB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAMvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,KAAK,mCAKjB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAYpB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAerB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAMvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC"}

package/dist/ui/Tag/Tag.stories.js

@@ -11,9 +11,9 @@ export default {
     component: Tag,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
-export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 16, children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
-export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
-export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
-export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 24, style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
+export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
+export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
+export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
+export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: "3W", style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
 export * as Sources from './Tag.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsM,CAAC;AAEzN,eAAO,MAAM,SAAS,cAA2mB,CAAC;AAEloB,eAAO,MAAM,QAAQ,cAA8Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAie,CAAC;AAExf,eAAO,MAAM,WAAW,cAA2Q,CAAC;AAEpS,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAwM,CAAC;AAE3N,eAAO,MAAM,SAAS,cAA+mB,CAAC;AAEtoB,eAAO,MAAM,QAAQ,cAAgZ,CAAC;AAEta,eAAO,MAAM,SAAS,cAAme,CAAC;AAE1f,eAAO,MAAM,WAAW,cAA6Q,CAAC;AAEtS,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,10 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tag/Tag.stories.tsx
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\">Tag sm</Tag>\n    <Tag size=\"md\">Tag md</Tag>\n  </Box>\n);";
-export const Selection = () => "export const Selection = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n    {(['sm', 'md'] as const).map(size => (\n      <Box key={size} display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n        <Tag size={size}>Descriptive, inerte</Tag>\n        <Tag size={size} interactive>\n          Au repos, dans un groupe\n        </Tag>\n        <Tag size={size} interactive selected>\n          Sélectionné\n        </Tag>\n        <Tag size={size} selected closable onClose={() => {}}>\n          Sélectionné et fermable\n        </Tag>\n      </Box>\n    ))}\n  </Box>\n);";
-export const Fermable = () => "export const Fermable = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\" closable onClose={() => {}}>\n      Fermable sm\n    </Tag>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Fermable md\n    </Tag>\n    <Tag size=\"md\" closable selected onClose={() => {}}>\n      Fermable et sélectionné\n    </Tag>\n  </Box>\n);";
-export const AvecIcone = () => "export const AvecIcone = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\" leading=\"Check\">\n      Validé\n    </Tag>\n    <Tag size=\"md\" leading=\"Clock\">\n      En attente\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable onClose={() => {}}>\n      Icône et croix\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable selected onClose={() => {}}>\n      Tout à la fois\n    </Tag>\n  </Box>\n);";
-export const LibelleLong = () => "export const LibelleLong = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ maxWidth: 260 }}>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Un libellé beaucoup trop long pour la place disponible\n    </Tag>\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\">Tag sm</Tag>\n    <Tag size=\"md\">Tag md</Tag>\n  </Box>\n);";
+export const Selection = () => "export const Selection = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n    {(['sm', 'md'] as const).map(size => (\n      <Box key={size} display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n        <Tag size={size}>Descriptive, inerte</Tag>\n        <Tag size={size} interactive>\n          Au repos, dans un groupe\n        </Tag>\n        <Tag size={size} interactive selected>\n          Sélectionné\n        </Tag>\n        <Tag size={size} selected closable onClose={() => {}}>\n          Sélectionné et fermable\n        </Tag>\n      </Box>\n    ))}\n  </Box>\n);";
+export const Fermable = () => "export const Fermable = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\" closable onClose={() => {}}>\n      Fermable sm\n    </Tag>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Fermable md\n    </Tag>\n    <Tag size=\"md\" closable selected onClose={() => {}}>\n      Fermable et sélectionné\n    </Tag>\n  </Box>\n);";
+export const AvecIcone = () => "export const AvecIcone = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\" leading=\"Check\">\n      Validé\n    </Tag>\n    <Tag size=\"md\" leading=\"Clock\">\n      En attente\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable onClose={() => {}}>\n      Icône et croix\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable selected onClose={() => {}}>\n      Tout à la fois\n    </Tag>\n  </Box>\n);";
+export const LibelleLong = () => "export const LibelleLong = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" style={{ maxWidth: 260 }}>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Un libellé beaucoup trop long pour la place disponible\n    </Tag>\n  </Box>\n);";
 export const storySources = {
     Sizes,
     Selection,

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

@@ -16,20 +16,20 @@ export declare const useStyles: () => {
         alignItems: "center";
         borderRadius: Radius;
         borderWidth: number;
-        borderColor: string;
-        color: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         whiteSpace: "nowrap";
         overflow: "hidden";
         textOverflow: "ellipsis";
         maxWidth: string;
     };
     tagSurvole: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tagSelected: {
-        borderColor: string;
-        color: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
     };
     tagSm: {
         fontSize: 12;
@@ -58,7 +58,7 @@ export declare const useStyles: () => {
         marginRight: number;
     };
     croixSurvolee: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     croixSm: {
         marginLeft: number;
@@ -80,5 +80,13 @@ export declare const useStyles: () => {
         width: number;
         height: number;
     };
+    nativeContent: {
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+    };
+    nativeLabel: {
+        readonly flexShrink: 1;
+    };
 };
 //# sourceMappingURL=Tag.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAmBzD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFnB,CAAC"}
+{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AA8BzD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFnB,CAAC"}

package/dist/ui/Tag/Tag.styles.js

@@ -15,7 +15,18 @@ const cercleDeLaCroix = (cote, rayon, ecart) => ({
     width: cote,
     height: cote,
 });
+const stylesNatifs = {
+    nativeContent: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    nativeLabel: {
+        flexShrink: 1,
+    },
+};
 export const useStyles = makeStyles(({ radius, text, color, pill }) => ({
+    ...stylesNatifs,
     tagContainer: {
         display: 'block',
         // Sans largeur minimale nulle, un element flex refuse de retrecir sous la taille de son

package/dist/ui/Tag/TagNativeContent.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+type TagNativeContentProps = {
+    apparence: CSSProperties;
+    leading: ReactNode;
+    close: ReactNode;
+    children: ReactNode;
+};
+/** Le texte et la croix sont des voisins : un Text natif ne centre pas les vues inline. */
+export declare const TagNativeContent: ({ apparence, leading, close, children }: TagNativeContentProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TagNativeContent.d.ts.map

package/dist/ui/Tag/TagNativeContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagNativeContent.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/TagNativeContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,gBAAgB,GAAI,yCAAyC,qBAAqB,gCAiB9F,CAAC"}

package/dist/ui/Tag/TagNativeContent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { useStyles } from './Tag.styles';
+/** Le texte et la croix sont des voisins : un Text natif ne centre pas les vues inline. */
+export const TagNativeContent = ({ apparence, leading, close, children }) => {
+    const styles = useStyles();
+    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, ...surface } = apparence;
+    return (_jsxs(Box, { style: { ...surface, ...styles.nativeContent }, children: [leading, _jsx(Typography, { numberOfLines: 1, color: color, style: { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, ...styles.nativeLabel }, children: children }), close] }));
+};