@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.apparence.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.apparence.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,KAAK,eAAe,CAAC,MAAM,IAAI;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,MAAM,EACrD,QAAQ,eAAe,CAAC,MAAM,CAAC,EAC/B,uCAAuC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBnD,CAAC"}

package/dist/ui/Switch/Switch.apparence.js

@@ -0,0 +1,19 @@
+export const apparenceDuSwitch = (styles, { value, disabled, noPadding, style }) => ({
+    bouton: {
+        ...styles.switchButton,
+        ...style,
+        ...(value ? styles.switchButtonChecked : {}),
+        ...(disabled ? styles.switchButtonDisabled : {}),
+    },
+    pouce: {
+        ...styles.switchThumb,
+        ...(value ? styles.switchThumbChecked : {}),
+        ...(disabled ? styles.switchThumbDisabled : {}),
+    },
+    libelle: {
+        ...styles.switchLabel,
+        ...(value ? styles.switchLabelChecked : {}),
+        ...(disabled ? styles.switchLabelDisabled : {}),
+        ...(noPadding ? { padding: 0, marginRight: 0 } : {}),
+    },
+});

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

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

package/dist/ui/Switch/Switch.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, FormControlCaption, Typography } from '@alveole/components';
-import { useTheme } from '@alveole/theme';
+import { focusRingProps, useTheme } from '@alveole/theme';
 import React, { useId } from 'react';
 import { Label, Switch as TamaguiSwitch } from 'tamagui';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { FormControlCaption } from '../FormControl';
+import { apparenceDuSwitch } from './Switch.apparence';
 import { useStyles } from './Switch.styles';
 export const Switch = React.forwardRef(function Switch(props, ref) {
     const { checked, style, label, error, success, disabled, noPadding, onCheckedChange, ...switchProps } = props;
@@ -19,24 +22,13 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
             setModel(newValue);
         onCheckedChange?.(newValue);
     };
-    const switchButtonStyles = {
-        ...styles.switchButton,
-        ...(style ? style : {}),
-        ...(value ? styles.switchButtonChecked : {}),
-        ...(disabled ? styles.switchButtonDisabled : {}),
-    };
-    const switchThumbStyles = {
-        ...styles.switchThumb,
-        ...(value ? styles.switchThumbChecked : {}),
-        ...(disabled ? styles.switchThumbDisabled : {}),
-    };
-    const switchLabelStyles = {
-        ...styles.switchLabel,
-        ...(value ? styles.switchLabelChecked : {}),
-        ...(disabled ? styles.switchLabelDisabled : {}),
-        ...(noPadding ? { padding: 0, marginRight: 0 } : {}),
-    };
-    const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: switchButtonStyles, disabled: disabled, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: switchThumbStyles }) }));
-    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: switchLabelStyles, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    const { bouton, pouce, libelle } = apparenceDuSwitch(styles, { value, disabled, noPadding, style });
+    const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: bouton, disabled: disabled, ...focusRingProps(), 
+        // Tamagui injecte sa propre regle `:focus-visible` en `!important` derriere un selecteur
+        // `:root:root:root:root` : la regle CSS du theme ne peut pas la battre, et sans cette prop
+        // c'est le gris translucide de Tamagui qui s'affiche. La valeur vient de `focusRing()`,
+        // qui peint le meme bleu que la regle : un seul reglage, deux chemins pour l'appliquer.
+        focusVisibleStyle: styles.switchButtonFocused, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: pouce }) }));
+    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: libelle, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
     return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

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

@@ -13,6 +13,7 @@ declare const _default: {
     } & import("react").RefAttributes<import("tamagui").TamaguiElement>>;
     styleFn: () => {
         switchContainer: {};
+        switchButtonFocused: import("@alveole/theme").FocusRingStyle;
         switch: {
             display: "flex";
             flexDirection: "row";

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Switch } from './Switch';
 import { useStyles } from './Switch.styles';
 export default {

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

@@ -1,5 +1,6 @@
 export declare const useStyles: () => {
     switchContainer: {};
+    switchButtonFocused: import("@alveole/theme").FocusRingStyle;
     switch: {
         display: "flex";
         flexDirection: "row";

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

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

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

@@ -1,18 +1,21 @@
-import { makeStyles } from '@alveole/theme';
+import { focusRing, makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ text, color, spacing }) => ({
     switchContainer: {},
+    // Voir `Switch.tsx` : Tamagui impose sa propre bague en `!important`, seule sa prop
+    // `focusVisibleStyle` peut la remplacer. La valeur vient de la meme source que la regle CSS.
+    switchButtonFocused: focusRing('default'),
     switch: {
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('050'),
-        paddingRight: spacing('050'),
+        gap: spacing('1W'),
+        paddingRight: spacing('1W'),
     },
     switchButton: {
         borderColor: color.border['default-grey'],
         backgroundColor: color.background.default,
         cursor: 'pointer',
         padding: 1,
-        minHeight: spacing('200'),
+        minHeight: spacing('4W'),
         marginTop: 'auto',
         marginBottom: 'auto',
     },

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

@@ -0,0 +1,13 @@
+type CoucheDApparence = 'tabsTab' | 'tabsTabActive' | 'wrapper' | 'wrapperHover' | 'tabIcon' | 'tabIconHover' | 'tabsLabel' | 'tabsLabelActive';
+export type EtatDeLOnglet = {
+    actif: boolean;
+    survole: boolean;
+};
+export declare const apparenceDeLOnglet: <Table extends Record<CoucheDApparence, object>>(styles: Table, { actif, survole }: EtatDeLOnglet) => {
+    onglet: {};
+    enveloppe: {};
+    icone: object;
+    libelle: {};
+};
+export {};
+//# sourceMappingURL=Tabs.apparence.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.apparence.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.apparence.ts"],"names":[],"mappings":"AAKA,KAAK,gBAAgB,GACjB,SAAS,GACT,eAAe,GACf,SAAS,GACT,cAAc,GACd,SAAS,GACT,cAAc,GACd,WAAW,GACX,iBAAiB,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,EAC/E,QAAQ,KAAK,EACb,oBAAoB,aAAa;;;;;CAejC,CAAC"}

package/dist/ui/Tabs/Tabs.apparence.js

@@ -0,0 +1,15 @@
+export const apparenceDeLOnglet = (styles, { actif, survole }) => ({
+    onglet: {
+        ...styles.tabsTab,
+        ...(actif ? styles.tabsTabActive : {}),
+    },
+    enveloppe: {
+        ...styles.wrapper,
+        ...(survole ? styles.wrapperHover : {}),
+    },
+    icone: survole ? styles.tabIconHover : styles.tabIcon,
+    libelle: {
+        ...styles.tabsLabel,
+        ...(actif ? styles.tabsLabelActive : {}),
+    },
+});

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

@@ -1,9 +1,10 @@
-import { BoxProps, LucideIconProps } from '@alveole/components';
 import React from 'react';
+import { BoxProps } from '../../core/Box';
+import { Leading } from '../Leading';
 export type TabsProps = Omit<BoxProps, 'children'> & {
     tabs: {
         label: string;
-        icon?: LucideIconProps['name'];
+        leading?: Leading;
         counter?: number;
         value: string;
         content: React.ReactNode;
@@ -12,6 +13,14 @@ export type TabsProps = Omit<BoxProps, 'children'> & {
     }[];
     defaultValue?: string;
     onChange?: (index: number) => void;
+    /**
+     * Active l'Anchor Sync (voir ADR 0022) : au clic, l'onglet actif est ecrit dans l'etat
+     * adressable de la plateforme (`#{urlAnchorPrefix}-{ancre}` sur le web, un parametre de
+     * route sur natif), et relu de la meme facon au montage. L'ancre de chaque onglet vient de
+     * son `label` (`toSlug`), pas de son `value`. Absent, `Tabs` ne touche a rien de tout ca.
+     * Distingue aussi plusieurs `Tabs` sur une meme page : chacun doit avoir le sien.
+     */
+    urlAnchorPrefix?: string;
 };
 export declare const Tabs: (props: TabsProps) => React.JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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

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

package/dist/ui/Tabs/Tabs.js

@@ -1,56 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Counter, LucideIcon, Typography } from '@alveole/components';
-import React from 'react';
-import { ScrollView } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusRingProps } from '@alveole/theme';
 import { Tabs as TamaguiTabs } from 'tamagui';
+import { toSlug } from '../../core/AnchorHeading/slug';
+import { Box } from '../../core/Box';
 import { useStyles } from './Tabs.styles';
+import { TabsContent } from './TabsContent';
+import { TabsTab } from './TabsTab';
+import { useAnchorSync } from './useAnchorSync';
+import { useTabsState } from './useTabsState';
 export const Tabs = (props) => {
-    const { tabs, defaultValue = '', onChange, style, ...boxProps } = props;
+    const { tabs, defaultValue = '', onChange, urlAnchorPrefix, style, ...boxProps } = props;
     const styles = useStyles();
     const initialValue = defaultValue || tabs[0]?.value || '';
-    const [tabState, setTabState] = React.useState({
-        activeAt: null,
-        currentTab: initialValue,
-        intentAt: null,
-        prevActiveAt: null,
-        hoverTab: null,
+    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange);
+    const { persist } = useAnchorSync(urlAnchorPrefix, anchor => {
+        const tab = tabs.find(t => toSlug(t.label) === anchor);
+        if (tab)
+            restoreCurrentTab(tab.value);
     });
-    const setCurrentTab = (currentTab, index) => {
-        setTabState({ ...tabState, currentTab });
-        onChange?.(index);
-    };
-    const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt });
-    const setActiveIndicator = (activeAt) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt });
-    const setHoverTab = (hoverTab) => setTabState({ ...tabState, hoverTab });
-    const { currentTab, hoverTab } = tabState;
-    const handleOnInteraction = (type, layout) => {
-        if (type === 'select') {
-            setActiveIndicator(layout);
-        }
-        else {
-            setIntentIndicator(layout);
-        }
-    };
-    function isCurrentTab(tabValue) {
-        return currentTab === tabValue;
-    }
-    function isHoverTab(tabValue) {
-        return hoverTab === tabValue;
-    }
-    const renderActions = React.useCallback(() => {
-        const currentTab = tabs.find(t => t.value === tabState.currentTab);
-        if (currentTab == null)
-            return null;
-        return currentTab.renderAction && _jsx(Box, { ml: 'auto', children: currentTab.renderAction() });
-    }, [tabState.currentTab, tabs]);
-    const renderContent = React.useCallback(() => {
-        const currentTab = tabs.find(t => t.value === tabState.currentTab);
-        if (currentTab?.scrollable)
-            return (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: currentTab.content }));
-        return currentTab?.content;
-    }, [tabState.currentTab, tabs]);
-    return (_jsx(Box, { tag: "tabs-container", style: [styles.container, style], ...boxProps, children: _jsxs(TamaguiTabs, { style: styles.tabs, defaultValue: initialValue, value: currentTab, onValueChange: e => setCurrentTab(e, tabs.findIndex(t => t.value === e)), orientation: "horizontal", size: "$4", activationMode: "manual", children: [_jsxs(TamaguiTabs.List, { disablePassBorderRadius: true, loop: false, style: styles.tabsList, children: [tabs.map((tab, idx) => (_jsx(_Fragment, { children: _jsx(TamaguiTabs.Tab, { unstyled: true, onHoverIn: () => setHoverTab(tab.value), onHoverOut: () => setHoverTab(null), onInteraction: handleOnInteraction, value: tab.value, disabled: tabs.length < 2, style: { ...styles.tabsTab, ...(isCurrentTab(tab.value) ? styles.tabsTabActive : {}) }, children: _jsxs(Box, { style: {
-                                        ...styles.wrapper,
-                                        ...(isHoverTab(tab.value) ? styles.wrapperHover : {}),
-                                    }, children: [tab.icon && (_jsx(LucideIcon, { name: tab.icon, size: "sm", color: "currentColor", style: { ...(isHoverTab(tab.value) ? styles.tabIconHover : styles.tabIcon) } })), _jsx(Typography, { style: { ...styles.tabsLabel, ...(isCurrentTab(tab.value) ? styles.tabsLabelActive : {}) }, children: tab.label }), tab.counter !== undefined && tab.counter > 0 && (_jsx(Counter, { variant: isCurrentTab(tab.value) ? 'primary' : 'default', count: tab.counter }))] }) }, idx) }))), renderActions && _jsx(Box, { ml: 'auto', children: renderActions() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, children: renderContent() }, idx))) })] }) }));
+    // Tamagui ne monte que le `Content` de l'onglet selectionne : tous rendent donc le meme
+    // contenu, celui de l'onglet courant. L'action de barre suit la meme regle.
+    const ongletCourant = tabs.find(tab => tab.value === currentTab);
+    return (_jsx(Box, { tag: "tabs-container", style: [styles.container, style], ...boxProps, children: _jsxs(TamaguiTabs, { style: styles.tabs, defaultValue: initialValue, value: currentTab, onValueChange: e => {
+                const index = tabs.findIndex(t => t.value === e);
+                setCurrentTab(e, index);
+                const tab = tabs[index];
+                if (tab)
+                    persist(toSlug(tab.label));
+            }, orientation: "horizontal", size: "$4", activationMode: "manual", children: [_jsxs(TamaguiTabs.List, { disablePassBorderRadius: true, loop: false, style: styles.tabsList, ...focusRingProps(), children: [tabs.map(tab => (_jsx(TabsTab, { value: tab.value, label: tab.label, leading: tab.leading, counter: tab.counter, etat: etatDeLOnglet(tab.value), disabled: tabs.length < 2, onHover: setHoverTab, onInteraction: handleOnInteraction }, tab.value))), ongletCourant?.renderAction && _jsx(Box, { ml: 'auto', children: ongletCourant.renderAction() })] }), _jsx(Box, { style: { flex: 1, minHeight: 0 }, children: tabs.map((tab, idx) => (_jsx(TamaguiTabs.Content, { style: styles.tabsContent, value: tab.value, ...focusRingProps(), children: _jsx(TabsContent, { content: ongletCourant?.content, scrollable: ongletCourant?.scrollable }) }, idx))) })] }) }));
 };

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

@@ -5,29 +5,27 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
-    component: (props: import("@alveole/components").TabsProps) => React.JSX.Element;
+    component: (props: import("./Tabs").TabsProps) => React.JSX.Element;
     styleFn: () => {
-        container: {
-            flex: number;
-            minHeight: number;
-            display: "flex";
-            flexDirection: "column";
-            gap: string | number;
+        tabIcon: {
+            color: string;
         };
-        tabs: {
-            flex: number;
-            minHeight: number;
-            flexDirection: "column";
+        tabIconHover: {
+            color: string;
         };
-        tabsList: {
-            borderBottomLeftRadius: string | number;
-            borderBottomRightRadius: string | number;
-            gap: string | number;
-            boxSizing: "border-box";
-            borderColor: string;
-            borderBottomWidth: number;
-            backgroundColor: "transparent";
-            overflowX: "scroll";
+        tabsLabel: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        tabsLabelActive: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         tabsTab: {
             appearance: "none";
@@ -44,17 +42,13 @@ declare const _default: {
             display: "flex";
             alignItems: "center";
             gap: string | number;
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
         };
         tabsTabActive: {
             borderBottomColor: string;
             borderBottomWidth: number;
         };
-        wrapperHover: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-            backgroundColor: string;
-        };
         wrapper: {
             display: "flex";
             flexDirection: "row";
@@ -69,25 +63,33 @@ declare const _default: {
             paddingRight: string | number;
             borderRadius: import("@alveole/theme").Radius;
         };
-        tabIcon: {
-            color: string;
+        wrapperHover: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            backgroundColor: string;
         };
-        tabIconHover: {
-            color: string;
+        container: {
+            flex: number;
+            minHeight: number;
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
         };
-        tabsLabel: {
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        tabs: {
+            flex: number;
+            minHeight: number;
+            flexDirection: "column";
         };
-        tabsLabelActive: {
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            fontFamily: string;
-            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        tabsList: {
+            borderBottomLeftRadius: string | number;
+            borderBottomRightRadius: string | number;
+            gap: string | number;
+            boxSizing: "border-box";
+            borderColor: string;
+            borderBottomWidth: number;
+            backgroundColor: "transparent";
+            overflowX: "scroll";
         };
         tabsContent: {
             flex: number;

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":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAsBnB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Typography } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
@@ -14,13 +15,13 @@ export default {
 };
 export const Example = () => {
     const [_activeTab, setActiveTab] = React.useState(0);
-    return (_jsx(Box, { width: '100%', children: _jsx(Tabs, { defaultValue: 'onglet-1', onChange: setActiveTab, tabs: [
+    return (_jsx(Box, { width: '100%', children: _jsx(Tabs, { defaultValue: 'onglet-1', onChange: setActiveTab, urlAnchorPrefix: "tabs-story", tabs: [
                 { label: 'Onglet 1', value: 'onglet-1', content: _jsx(Typography, { children: "Contenu de onglet 1" }) },
                 { label: 'Onglet 2', counter: 12, 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" }) },
                 {
                     label: 'Onglet 4',
-                    icon: 'Settings',
+                    leading: 'Settings',
                     value: 'onglet-4',
                     content: _jsx(Typography, { children: "Contenu de onglet 4" }),
                 },

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,cAAuyB,CAAC;AAE5zB,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,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // 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        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            icon: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
+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 storySources = {
     Example,
 };

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

@@ -1,25 +1,23 @@
 export declare const useStyles: () => {
-    container: {
-        flex: number;
-        minHeight: number;
-        display: "flex";
-        flexDirection: "column";
-        gap: string | number;
+    tabIcon: {
+        color: string;
     };
-    tabs: {
-        flex: number;
-        minHeight: number;
-        flexDirection: "column";
+    tabIconHover: {
+        color: string;
     };
-    tabsList: {
-        borderBottomLeftRadius: string | number;
-        borderBottomRightRadius: string | number;
-        gap: string | number;
-        boxSizing: "border-box";
-        borderColor: string;
-        borderBottomWidth: number;
-        backgroundColor: "transparent";
-        overflowX: "scroll";
+    tabsLabel: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    tabsLabelActive: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     tabsTab: {
         appearance: "none";
@@ -36,17 +34,13 @@ export declare const useStyles: () => {
         display: "flex";
         alignItems: "center";
         gap: string | number;
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderTopRightRadius: import("@alveole/theme").Radius;
     };
     tabsTabActive: {
         borderBottomColor: string;
         borderBottomWidth: number;
     };
-    wrapperHover: {
-        display: "flex";
-        flexDirection: "row";
-        alignItems: "center";
-        backgroundColor: string;
-    };
     wrapper: {
         display: "flex";
         flexDirection: "row";
@@ -61,25 +55,33 @@ export declare const useStyles: () => {
         paddingRight: string | number;
         borderRadius: import("@alveole/theme").Radius;
     };
-    tabIcon: {
-        color: string;
+    wrapperHover: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        backgroundColor: string;
     };
-    tabIconHover: {
-        color: string;
+    container: {
+        flex: number;
+        minHeight: number;
+        display: "flex";
+        flexDirection: "column";
+        gap: string | number;
     };
-    tabsLabel: {
-        fontSize: 14;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    tabs: {
+        flex: number;
+        minHeight: number;
+        flexDirection: "column";
     };
-    tabsLabelActive: {
-        fontSize: 14;
-        lineHeight: 20;
-        letterSpacing: 0;
-        fontFamily: string;
-        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    tabsList: {
+        borderBottomLeftRadius: string | number;
+        borderBottomRightRadius: string | number;
+        gap: string | number;
+        boxSizing: "border-box";
+        borderColor: string;
+        borderBottomWidth: number;
+        backgroundColor: "transparent";
+        overflowX: "scroll";
     };
     tabsContent: {
         flex: number;

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":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFnB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AA8GA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2F,CAAC"}