@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -1,11 +1,11 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
+const coque = ({ color, spacing }) => ({
     container: {
         flex: 1,
         minHeight: 0,
         display: 'flex',
         flexDirection: 'column',
-        gap: spacing('075'),
+        gap: spacing('3V'),
     },
     tabs: {
         flex: 1,
@@ -13,15 +13,22 @@ export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
         flexDirection: 'column',
     },
     tabsList: {
-        borderBottomLeftRadius: spacing('000'),
-        borderBottomRightRadius: spacing('000'),
-        gap: spacing('075'),
+        borderBottomLeftRadius: spacing('0V'),
+        borderBottomRightRadius: spacing('0V'),
+        gap: spacing('3V'),
         boxSizing: 'border-box',
         borderColor: color.light.border['default-grey'],
         borderBottomWidth: 1,
         backgroundColor: 'transparent',
         overflowX: 'scroll', // On ajoute un scroll horizontal pour les petits écrans
     },
+    tabsContent: {
+        flex: 1,
+        minHeight: 0,
+        overflow: 'hidden',
+    },
+});
+const onglet = ({ color, spacing, radius }) => ({
     tabsTab: {
         appearance: 'none',
         backgroundColor: 'transparent',
@@ -37,17 +44,18 @@ export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
         display: 'flex',
         alignItems: 'center',
         gap: spacing('1W'),
+        // La bague de focus, posee par le CSS du theme, epouse le `border-radius` de l'element
+        // qu'elle entoure : sans rayon, elle dessinerait un rectangle sec autour de la pastille
+        // arrondie (`wrapper`) qu'elle contient. Mais seulement les coins hauts : le souligne de
+        // l'onglet actif est le `border-bottom` de ce meme element, et l'arrondir le transforme
+        // en moignon recourbe au lieu du trait droit pleine largeur de Primer.
+        borderTopLeftRadius: radius('md'),
+        borderTopRightRadius: radius('md'),
     },
     tabsTabActive: {
         borderBottomColor: color.light.border['default-primary'],
         borderBottomWidth: 2,
     },
-    wrapperHover: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: color.light.background['transparent-hover'],
-    },
     wrapper: {
         display: 'flex',
         flexDirection: 'row',
@@ -56,12 +64,23 @@ export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
         transitionDuration: '0.1s',
         transitionTimingFunction: 'ease-in-out',
         gap: spacing('1W'),
-        paddingTop: spacing('025'),
-        paddingBottom: spacing('025'),
-        paddingLeft: spacing('050'),
-        paddingRight: spacing('050'),
+        // Meme gabarit qu'un bouton tertiaire md (`control('md')` : hauteur 32, paddingInline 12).
+        // A '025'/'050', l'onglet inactif tombait sur la hauteur sm (28) : a cote d'un bouton md
+        // il se lisait comme un cran plus petit que les autres commandes de la page.
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
         borderRadius: radius('md'),
     },
+    wrapperHover: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+});
+const contenuDeLOnglet = ({ color, text }) => ({
     tabIcon: {
         color: color.light.text['mention-grey'],
     },
@@ -74,9 +93,5 @@ export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
     tabsLabelActive: {
         ...text['Corps de texte'].SM.Bold,
     },
-    tabsContent: {
-        flex: 1,
-        minHeight: 0,
-        overflow: 'hidden',
-    },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...coque(theme), ...onglet(theme), ...contenuDeLOnglet(theme) }));

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type TabsContentProps = {
+    content: React.ReactNode;
+    scrollable?: boolean;
+};
+export declare const TabsContent: ({ content, scrollable }: TabsContentProps) => React.JSX.Element;
+//# sourceMappingURL=TabsContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContent.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/TabsContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,WAAW,GAAI,yBAAyB,gBAAgB,sBAapE,CAAC"}

package/dist/ui/Tabs/TabsContent.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ScrollView } from 'react-native';
+// Un onglet declare lui-meme si son contenu defile : la coque des onglets a une hauteur fixe,
+// et sans cette enveloppe un contenu long deborderait au lieu de defiler.
+export const TabsContent = ({ content, scrollable }) => {
+    if (!scrollable)
+        return _jsx(_Fragment, { children: content });
+    return (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: content }));
+};

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

@@ -0,0 +1,15 @@
+import { TabsTabProps as TamaguiTabsTabProps } from 'tamagui';
+import { Leading } from '../Leading';
+import { EtatDeLOnglet } from './Tabs.apparence';
+export type TabsTabProps = {
+    value: string;
+    label: string;
+    leading?: Leading;
+    counter?: number;
+    etat: EtatDeLOnglet;
+    disabled: boolean;
+    onHover: (value: string | null) => void;
+    onInteraction: TamaguiTabsTabProps['onInteraction'];
+};
+export declare const TabsTab: (props: TabsTabProps) => import("react").JSX.Element;
+//# sourceMappingURL=TabsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTab.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/TabsTab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInF,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAClD,OAAO,EAAsB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGrE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCA2B1C,CAAC"}

package/dist/ui/Tabs/TabsTab.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
+import { Tabs as TamaguiTabs } from 'tamagui';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Counter } from '../Counter';
+import { LeadingSlot } from '../Leading';
+import { apparenceDeLOnglet } from './Tabs.apparence';
+import { useStyles } from './Tabs.styles';
+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 }))] }) }));
+};

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

@@ -0,0 +1,2 @@
+export * from './useAnchorSync.web';
+//# sourceMappingURL=useAnchorSync.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchorSync.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useAnchorSync.ts"],"names":[],"mappings":"AAKA,cAAc,qBAAqB,CAAC"}

package/dist/ui/Tabs/useAnchorSync.js

@@ -0,0 +1,6 @@
+// Cette redirection n'est jamais chargee par l'application : Metro resout toujours une
+// variante de plateforme pour l'import `./useAnchorSync` de `Tabs.tsx` (`.web.ts` sur le web,
+// `.native.ts` sur iOS/Android). `tsc`, lui, n'a pas cette notion de plateforme et a besoin
+// d'un fichier exact `./useAnchorSync` pour typer cet import : sans lui, le typecheck echoue
+// sur un module que l'execution n'atteint jamais.
+export * from './useAnchorSync.web';

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

@@ -0,0 +1,4 @@
+export declare const useAnchorSync: (anchorNamespace: string | undefined, onRestore: (anchor: string) => void) => {
+    persist: (anchor: string) => void;
+};
+//# sourceMappingURL=useAnchorSync.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchorSync.native.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useAnchorSync.native.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,aAAa,GAAI,iBAAiB,MAAM,GAAG,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;sBAY3E,MAAM;CAUhC,CAAC"}

package/dist/ui/Tabs/useAnchorSync.native.js

@@ -0,0 +1,31 @@
+import { router, useLocalSearchParams } from 'expo-router';
+import { useEffect, useRef } from 'react';
+// Equivalent natif de l'Anchor Sync web (ADR 0022) : expo-router n'a pas de fragment `#`, donc
+// l'ancre voyage comme parametre de route, sous la cle `anchorNamespace`.
+//
+// `useLocalSearchParams` renvoie `{}` hors d'un arbre expo-router (contexte React sans
+// Provider), donc la restauration y est deja silencieuse. `router.setParams`, lui, leve si
+// aucun Root Layout n'est monte : le clic doit donc l'avaler.
+export const useAnchorSync = (anchorNamespace, onRestore) => {
+    const params = useLocalSearchParams();
+    const aRestaure = useRef(false);
+    useEffect(() => {
+        if (!anchorNamespace || aRestaure.current)
+            return;
+        aRestaure.current = true;
+        const anchor = params[anchorNamespace];
+        if (typeof anchor === 'string')
+            onRestore(anchor);
+    }, [anchorNamespace, params, onRestore]);
+    const persist = (anchor) => {
+        if (!anchorNamespace)
+            return;
+        try {
+            router.setParams({ [anchorNamespace]: anchor });
+        }
+        catch {
+            // Tabs hors d'un arbre expo-router (ex: harnais de preview isole) : sync inactive.
+        }
+    };
+    return { persist };
+};

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

@@ -0,0 +1,4 @@
+export declare const useAnchorSync: (anchorNamespace: string | undefined, onRestore: (anchor: string) => void) => {
+    persist: (anchor: string) => void;
+};
+//# sourceMappingURL=useAnchorSync.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchorSync.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useAnchorSync.web.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,GAAI,iBAAiB,MAAM,GAAG,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;sBAY3E,MAAM;CAMhC,CAAC"}

package/dist/ui/Tabs/useAnchorSync.web.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+// L'Anchor Sync web ecrit et relit un fragment `#{anchorNamespace}-{anchor}`, au meme format
+// que `AnchorHeading` (voir `core/AnchorHeading/slug.ts`) : un sommaire ou un lien externe qui
+// pointe vers cette ancre doit tomber sur le meme onglet.
+export const useAnchorSync = (anchorNamespace, onRestore) => {
+    const aRestaure = useRef(false);
+    useEffect(() => {
+        if (!anchorNamespace || aRestaure.current || typeof window === 'undefined')
+            return;
+        aRestaure.current = true;
+        const prefixe = `#${anchorNamespace}-`;
+        if (!window.location.hash.startsWith(prefixe))
+            return;
+        onRestore(window.location.hash.slice(prefixe.length));
+    }, [anchorNamespace, onRestore]);
+    const persist = (anchor) => {
+        if (!anchorNamespace || typeof window === 'undefined')
+            return;
+        window.history.replaceState(null, '', `#${anchorNamespace}-${anchor}`);
+    };
+    return { persist };
+};

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

@@ -0,0 +1,11 @@
+import { TabLayout } from 'tamagui';
+import { EtatDeLOnglet } from './Tabs.apparence';
+export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void) => {
+    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;
+};
+//# sourceMappingURL=useTabsState.d.ts.map

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

@@ -0,0 +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"}

package/dist/ui/Tabs/useTabsState.js

@@ -0,0 +1,44 @@
+import React from 'react';
+// Onglet courant et survol vivent ensemble : c'est la meme interaction vue sous deux angles,
+// et chaque onglet a besoin des deux pour se dessiner. Les regrouper ici laisse au composant un
+// seul appel, et donne a `apparenceDeLOnglet` son etat directement consommable.
+//
+// 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) => {
+    const [tabState, setTabState] = React.useState({
+        activeAt: null,
+        currentTab: initialValue,
+        intentAt: null,
+        prevActiveAt: null,
+        hoverTab: null,
+    });
+    const setCurrentTab = (currentTab, index) => {
+        setTabState({ ...tabState, 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 });
+    const handleOnInteraction = (type, layout) => {
+        if (type === 'select') {
+            setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: layout });
+        }
+        else {
+            setTabState({ ...tabState, intentAt: layout });
+        }
+    };
+    const etatDeLOnglet = (tabValue) => ({
+        actif: tabState.currentTab === tabValue,
+        survole: tabState.hoverTab === tabValue,
+    });
+    return {
+        currentTab: tabState.currentTab,
+        etatDeLOnglet,
+        setCurrentTab,
+        restoreCurrentTab,
+        setHoverTab,
+        handleOnInteraction,
+    };
+};

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

@@ -1,9 +1,17 @@
 import React, { CSSProperties } from 'react';
-export type TagColors = 'default' | 'action';
+import { Leading } from '../Leading';
 export type TagProps = {
     children: React.ReactNode;
-    color: TagColors;
     size: 'sm' | 'md';
+    selected?: boolean;
+    /**
+     * L'etiquette appartient a un groupe ou l'on choisit : elle repond au pointeur. Le mot est
+     * celui de Primer, dont `isTokenInteractive` commande le meme retour au survol.
+     */
+    interactive?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    leading?: Leading;
     style?: CSSProperties;
 };
 export declare const Tag: (props: TagProps) => React.JSX.Element;

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,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAsBlC,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;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"}

package/dist/ui/Tag/Tag.js

@@ -1,17 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { 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 { apparenceDeLaPastille, ecartDeLIcone, reponseAuPointeur } from './tagStyling';
 export const Tag = (props) => {
-    const { size, color, children, style, ...tagProps } = props;
+    const { size, children, selected, interactive, closable, onClose, leading, style, ...tagProps } = props;
+    const [croixSurvolee, setCroixSurvolee] = React.useState(false);
     const styles = useStyles();
-    const tagSize = size === 'sm' ? styles.tagSm : styles.tagMd;
-    const tagVariant = () => {
-        switch (color) {
-            case 'action':
-                return styles.tagAction;
-            case 'default':
-                return styles.tagDefault;
-        }
-    };
-    return (_jsx(Box, { tag: "tag", style: { ...styles.tagContainer, ...style }, children: _jsx(Typography, { style: { ...styles.tag, ...tagVariant(), ...tagSize }, ...tagProps, children: children }) }));
+    // Une etiquette ne reagit au survol que si on peut agir dessus : la fermer, ou la choisir
+    // dans un groupe. Une etiquette purement descriptive reste inerte, sans quoi elle
+    // promettrait une interaction qu'elle n'offre pas (ADR 0019). `selected` ne decrit qu'un
+    // etat et ne declare rien : une valeur dans un champ desactive est selectionnee sans etre
+    // manipulable.
+    const manipulable = !!closable || !!interactive;
+    return (_jsx(Box, { tag: "tag", style: { ...styles.tagContainer, ...style }, children: _jsx(Pressable, { accessible: false, style: styles.zoneDeSurvol, children: (state) => {
+                const { survolee, fonce } = reponseAuPointeur({
+                    manipulable,
+                    pastilleSurvolee: !!state.hovered,
+                    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 }))] }));
+            } }) }));
 };

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

@@ -8,17 +8,34 @@ declare const _default: {
     styleFn: () => {
         tagContainer: {
             display: "block";
+            minWidth: number;
+            maxWidth: string;
+        };
+        zoneDeSurvol: {
+            cursor: "auto";
+        };
+        pastilleFermable: {
+            paddingRight: number;
         };
         tag: {
+            display: "inline-flex";
+            alignItems: "center";
             borderRadius: import("@alveole/theme").Radius;
-        };
-        tagDefault: {
+            borderWidth: number;
+            borderColor: string;
             color: string;
             backgroundColor: string;
+            whiteSpace: "nowrap";
+            overflow: "hidden";
+            textOverflow: "ellipsis";
+            maxWidth: string;
         };
-        tagAction: {
+        tagSurvole: {
+            color: string;
+        };
+        tagSelected: {
+            borderColor: string;
             color: string;
-            backgroundColor: string;
         };
         tagSm: {
             fontSize: 12;
@@ -26,10 +43,9 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: number;
-            paddingBottom: number;
+            height: number;
+            paddingLeft: number;
+            paddingRight: number;
         };
         tagMd: {
             fontSize: 14;
@@ -37,15 +53,46 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
+            height: number;
+            paddingLeft: number;
+            paddingRight: number;
+        };
+        iconeSm: {
+            marginRight: number;
+        };
+        iconeMd: {
+            marginRight: number;
+        };
+        croixSurvolee: {
+            backgroundColor: string;
+        };
+        croixSm: {
+            marginLeft: number;
+            alignItems: "center";
+            justifyContent: "center";
+            cursor: "pointer";
+            transform: string;
+            borderRadius: import("@alveole/theme").Radius;
+            width: number;
+            height: number;
+        };
+        croixMd: {
+            marginLeft: number;
+            alignItems: "center";
+            justifyContent: "center";
+            cursor: "pointer";
+            transform: string;
+            borderRadius: import("@alveole/theme").Radius;
+            width: number;
+            height: number;
         };
     };
 };
 export default _default;
-export declare const Colors: () => import("react").JSX.Element;
 export declare const Sizes: () => import("react").JSX.Element;
+export declare const Selection: () => import("react").JSX.Element;
+export declare const Fermable: () => import("react").JSX.Element;
+export declare const AvecIcone: () => import("react").JSX.Element;
+export declare const LibelleLong: () => import("react").JSX.Element;
 export * as Sources from './Tag.stories.sources';
 //# sourceMappingURL=Tag.stories.d.ts.map

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,wBAQkB;AAElB,eAAO,MAAM,MAAM,mCASlB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Tag } from './Tag';
 import { useStyles } from './Tag.styles';
 export default {
@@ -7,10 +7,13 @@ export default {
     tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1002-8509',
-    description: 'Différents tags. Composant de type Typography.',
+    description: "Étiquette grise et descriptive. `selected` marque un tag actif, `closable` et `onClose` ajoutent une croix de suppression, et `icon` place une icône avant le libellé. Le survol fonce le libellé sans toucher la bordure ; c'est la sélection qui fonce la bordure, indépendamment du survol (ADR 0020). Le survol ne s'applique qu'aux étiquettes manipulables : une étiquette sans `closable` ni `interactive` est descriptive et reste inerte (ADR 0019). `selected` ne décrit qu'un état.",
     component: Tag,
     styleFn: useStyles,
 };
-export const Colors = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }));
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", color: "default", children: "Tag sm" }), _jsx(Tag, { size: "md", color: "default", children: "Tag md" })] }));
+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 * as Sources from './Tag.stories.sources';

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

@@ -1,8 +1,14 @@
-export declare const Colors: () => string;
 export declare const Sizes: () => string;
+export declare const Selection: () => string;
+export declare const Fermable: () => string;
+export declare const AvecIcone: () => string;
+export declare const LibelleLong: () => string;
 export declare const storySources: {
-    readonly Colors: () => string;
     readonly Sizes: () => string;
+    readonly Selection: () => string;
+    readonly Fermable: () => string;
+    readonly AvecIcone: () => string;
+    readonly LibelleLong: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tag.stories.sources.d.ts.map

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,MAAM,cAA8Q,CAAC;AAElS,eAAO,MAAM,KAAK,cAAqQ,CAAC;AAExR,eAAO,MAAM,YAAY;;;CAGf,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,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"}

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

@@ -1,8 +1,14 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tag/Tag.stories.tsx
-export const Colors = () => "export const Colors = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"md\" color=\"default\">\n      Tag default\n    </Tag>\n    <Tag size=\"md\" color=\"action\">\n      Tag action\n    </Tag>\n  </Box>\n);";
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n    <Tag size=\"sm\" color=\"default\">\n      Tag sm\n    </Tag>\n    <Tag size=\"md\" color=\"default\">\n      Tag md\n    </Tag>\n  </Box>\n);";
+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 storySources = {
-    Colors,
     Sizes,
+    Selection,
+    Fermable,
+    AvecIcone,
+    LibelleLong,
 };