@alveole/components 0.23.3 → 0.24.0

package/dist/stories/index.d.ts

@@ -20,6 +20,7 @@ export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
+export * as TabsStory from '../ui/Tabs/Tabs.stories';
 export * as TagStory from '../ui/Tag/Tag.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}

package/dist/stories/index.js

@@ -22,6 +22,7 @@ export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
+export * as TabsStory from '../ui/Tabs/Tabs.stories';
 export * as TagStory from '../ui/Tag/Tag.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

package/dist/ui/Badge/Badge.d.ts

@@ -1,5 +1,4 @@
-import { TypographyProps } from '../../core/Typography';
-import { LucideIconProps } from '../LucideIcon';
+import { LucideIconProps, TypographyProps } from '@alveole/components';
 export type BadgeProps = TypographyProps & {
     variant: 'default' | 'info' | 'success' | 'error' | 'new' | 'warning';
     size: 'sm' | 'md';

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACzC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACtE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAoCtC,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAc,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK/F,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACzC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACtE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAoCtC,CAAC"}

package/dist/ui/Badge/Badge.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LucideIcon, Typography } from '@alveole/components';
 import { Box } from '../../core';
-import { Typography } from '../../core/Typography';
-import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Badge.styles';
 export const Badge = (props) => {
     const { variant, style, size, icon, ...badgeProps } = props;

package/dist/ui/EmptyState/EmptyState.styles.js

@@ -9,7 +9,7 @@ export const useStyles = makeStyles(({ externalPadding, text, color, spacing, ra
             justifyContent: 'center',
             gap: isVariant('mobile') ? spacing('2W') : spacing('3W'),
             paddingTop: isVariant('mobile') ? 0 : spacing('3W'),
-            paddingBottom: isVariant('mobile') ? 0 : spacing('3W'),
+            paddingBottom: isVariant('mobile') ? spacing('2W') : spacing('3W'),
             paddingLeft: paddingValue,
             paddingRight: paddingValue,
             textAlign: 'center',

package/dist/ui/ResourceList/ResourceList.d.ts

@@ -1,6 +1,6 @@
+import { FlashListProps } from '@shopify/flash-list';
 import React from 'react';
-import { FlatListProps } from 'react-native';
-export type ResourceListProps<Item> = FlatListProps<Item> & {
+export type ResourceListProps<Item> = FlashListProps<Item> & {
     data: Item[];
     isLoading?: boolean;
     withPagination?: boolean;
@@ -9,6 +9,5 @@ export type ResourceListProps<Item> = FlatListProps<Item> & {
     titre?: string;
     renderNoContent: () => React.ReactNode;
 };
-export declare const ResourceListDivider: () => import("react/jsx-runtime").JSX.Element;
 export declare const ResourceList: <Item>(props: ResourceListProps<Item>) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=ResourceList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceList.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,MAAM,iBAAiB,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,GAAG;IAC1D,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAI/B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,IAAI,EAAG,OAAO,iBAAiB,CAAC,IAAI,CAAC,0TAsDjE,CAAC"}
+{"version":3,"file":"ResourceList.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,iBAAiB,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG;IAC3D,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,IAAI,EAAG,OAAO,iBAAiB,CAAC,IAAI,CAAC,0TAsDjE,CAAC"}

package/dist/ui/ResourceList/ResourceList.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActivityIndicator, FlatList } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { ActivityIndicator } from 'react-native';
 import { Box, Typography } from '../../core';
-import { Divider } from '../Divider';
 import { useStyles } from './ResourceList.styles';
-export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));
 export const ResourceList = (props) => {
     const { style, data, isLoading, withPagination, renderNoContent, noBorder = false, withWhiteBackground = false, titre, ...listProps } = props;
     const styles = useStyles();
@@ -24,5 +23,5 @@ export const ResourceList = (props) => {
                     ...paginationStyles,
                     ...(noBorder ? styles.noBorder : styles.withBorder),
                     ...(withWhiteBackground ? styles.itemsWithWhiteBackground : {}),
-                }, children: _jsx(FlatList, { data: data, contentContainerStyle: style, ...listProps }) })] }));
+                }, children: _jsx(FlashList, { data: data, contentContainerStyle: style, ...listProps }) })] }));
 };

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

@@ -45,46 +45,6 @@ declare const _default: {
             alignItems: "center";
             padding: import("@alveole/theme").Spacing;
         };
-        noContent: {
-            display: "flex";
-            padding: import("@alveole/theme").Spacing;
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-            borderRadius: import("@alveole/theme").Spacing;
-            borderWidth: number;
-            borderColor: "#DEE3EC";
-            backgroundColor: "#FFFFFF";
-            borderLeftWidth: number;
-            borderRightWidth: number;
-            width: "100%";
-        };
-        noContentIntro: {
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-        };
-        noContentText: {
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-        };
-        noContentTextTitle: {
-            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-            fontSize: 18 | 20;
-            lineHeight: 24 | 28;
-            letterSpacing: 0;
-            color: "#151617";
-        };
-        noContentTextDescription: {
-            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            color: "#5F6571";
-        };
     };
 };
 export default _default;
@@ -93,4 +53,5 @@ export declare const WithTitle: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithPreviewImageAndTrailing: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithNoContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDivider: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ResourceList.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,+CAgBnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAqBpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,+CAsBvC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAczB,CAAC"}
+{"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,+CASnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAcpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,+CAevC,CAAC;AAEF,eAAO,MAAM,aAAa,+CAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAUvB,CAAC"}

package/dist/ui/ResourceList/ResourceList.stories.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from '../EmptyState';
 import { ListItem } from '../ListItem';
 import { LucideIcon } from '../LucideIcon';
 import { ResourceList } from './ResourceList';
 import { useStyles } from './ResourceList.styles';
-import { ResourceListNoContent } from './ResourceListNoContent';
+import { ResourceListDivider } from './ResourceListDivider';
 export default {
     title: 'ResourceList',
     tags: ['Composant'],
@@ -38,8 +39,9 @@ const exampleDataWithPreview = [
         preview_url: 'https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=400',
     },
 ];
-export const Default = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
-export const WithTitle = () => (_jsx(ResourceList, { titre: "Titre de la liste", data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
-export const WithIcon = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, IconProps: { name: 'Settings' }, showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
-export const WithPreviewImageAndTrailing = () => (_jsx(ResourceList, { data: exampleDataWithPreview, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, preview_url: item.preview_url, trailing: () => _jsx(LucideIcon, { name: "ChevronRight", size: "sm" }), showSeparateur: index !== 0 })), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
-export const WithNoContent = () => (_jsx(ResourceList, { data: [], keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => (_jsx(ResourceListNoContent, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", IconProps: { name: 'House' }, ButtonProps: { title: 'Retour' } })) }));
+export const Default = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const WithTitle = () => (_jsx(ResourceList, { titre: "Titre de la liste", data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const WithIcon = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, IconProps: { name: 'Settings' }, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const WithPreviewImageAndTrailing = () => (_jsx(ResourceList, { data: exampleDataWithPreview, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, preview_url: item.preview_url, trailing: () => _jsx(LucideIcon, { name: "ChevronRight", size: "sm" }), showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const WithNoContent = () => (_jsx(ResourceList, { data: [], keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
+export const WithDivider = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), ItemSeparatorComponent: ResourceListDivider, renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));

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

@@ -38,45 +38,5 @@ export declare const useStyles: () => {
         alignItems: "center";
         padding: import("@alveole/theme").Spacing;
     };
-    noContent: {
-        display: "flex";
-        padding: import("@alveole/theme").Spacing;
-        flexDirection: "column";
-        alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-        borderRadius: import("@alveole/theme").Spacing;
-        borderWidth: number;
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
-        borderLeftWidth: number;
-        borderRightWidth: number;
-        width: "100%";
-    };
-    noContentIntro: {
-        display: "flex";
-        flexDirection: "column";
-        alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-    };
-    noContentText: {
-        display: "flex";
-        flexDirection: "column";
-        alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-    };
-    noContentTextTitle: {
-        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-        fontSize: 18 | 20;
-        lineHeight: 24 | 28;
-        letterSpacing: 0;
-        color: "#151617";
-    };
-    noContentTextDescription: {
-        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-        fontSize: 14;
-        lineHeight: 20;
-        letterSpacing: 0;
-        color: "#5F6571";
-    };
 };
 //# sourceMappingURL=ResourceList.styles.d.ts.map

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

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

package/dist/ui/ResourceList/ResourceList.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, text, radius, spacing, isVariant }) => ({
+export const useStyles = makeStyles(({ color, text, radius, spacing }) => ({
     list: {
         display: 'flex',
         flexDirection: 'column',
@@ -21,7 +21,7 @@ export const useStyles = makeStyles(({ color, text, radius, spacing, isVariant }
     },
     withBorder: {
         borderWidth: 1,
-        borderColor: color.border['default-grey'],
+        borderColor: color.light.border['default-grey'],
         borderLeftWidth: 1,
         borderRightWidth: 1,
     },
@@ -36,38 +36,4 @@ export const useStyles = makeStyles(({ color, text, radius, spacing, isVariant }
         alignItems: 'center',
         padding: spacing('4W'),
     },
-    noContent: {
-        display: 'flex',
-        padding: spacing('4W'),
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: spacing('5W'),
-        borderRadius: isVariant('mobile') ? 0 : spacing('2W'),
-        borderWidth: 1,
-        borderColor: color.border['default-grey'],
-        backgroundColor: '#FFFFFF',
-        borderLeftWidth: isVariant('mobile') ? 0 : 1,
-        borderRightWidth: isVariant('mobile') ? 0 : 1,
-        width: '100%',
-    },
-    noContentIntro: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: spacing('2W'),
-    },
-    noContentText: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: spacing('1W'),
-    },
-    noContentTextTitle: {
-        color: color.text['title-grey'],
-        ...text.Titres['H6 - XXS'],
-    },
-    noContentTextDescription: {
-        color: color.text['mention'],
-        ...text['Corps de texte'].SM.Regular,
-    },
 }));

package/dist/ui/ResourceList/ResourceListDivider.d.ts

@@ -0,0 +1,2 @@
+export declare const ResourceListDivider: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourceListDivider.d.ts.map

package/dist/ui/ResourceList/ResourceListDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceListDivider.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceListDivider.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,+CAI/B,CAAC"}

package/dist/ui/ResourceList/ResourceListDivider.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Divider } from '../Divider';
+export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));

package/dist/ui/ResourceList/index.d.ts

@@ -1,3 +1,3 @@
 export * from './ResourceList';
-export * from './ResourceListNoContent';
+export * from './ResourceListDivider';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/ResourceList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/ui/ResourceList/index.js

@@ -1,2 +1,2 @@
 export * from './ResourceList';
-export * from './ResourceListNoContent';
+export * from './ResourceListDivider';

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

@@ -0,0 +1,17 @@
+import { BoxProps, LucideIconProps } from '@alveole/components';
+import React from 'react';
+export type TabsProps = Omit<BoxProps, 'children'> & {
+    tabs: {
+        label: string;
+        icon?: LucideIconProps['name'];
+        counter?: number;
+        value: string;
+        content: React.ReactNode;
+        scrollable?: boolean;
+        renderAction?: () => React.ReactNode;
+    }[];
+    defaultValue?: string;
+    onChange?: (index: number) => void;
+};
+export declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,eAAe,EAAc,MAAM,qBAAqB,CAAC;AAC7F,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,4CA6IpC,CAAC"}

package/dist/ui/Tabs/Tabs.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, LucideIcon, Typography } from '@alveole/components';
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { Tabs as TamaguiTabs } from 'tamagui';
+import { useStyles } from './Tabs.styles';
+export const Tabs = (props) => {
+    const { tabs, defaultValue = '', onChange, 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 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(Typography, { style: { ...styles.tabsCounter, ...(isCurrentTab(tab.value) ? styles.tabsCounterActive : {}) }, children: 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))) })] }) }));
+};

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

@@ -0,0 +1,108 @@
+declare const _default: {
+    title: string;
+    tags: ["Composant"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("@alveole/components").TabsProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {
+            flex: number;
+            minHeight: number;
+            display: "flex";
+            flexDirection: "column";
+            gap: import("@alveole/theme").Spacing;
+        };
+        tabs: {
+            flex: number;
+            minHeight: number;
+            flexDirection: "column";
+        };
+        tabsList: {
+            borderBottomLeftRadius: import("@alveole/theme").Spacing;
+            borderBottomRightRadius: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+            boxSizing: "border-box";
+            borderColor: "#DEE3EC";
+            borderBottomWidth: number;
+            backgroundColor: "transparent";
+        };
+        tabsTab: {
+            appearance: "none";
+            backgroundColor: "transparent";
+            cursor: "pointer";
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: number;
+            paddingRight: number;
+            boxSizing: "border-box";
+            borderWidth: number;
+            borderBottomWidth: number;
+            borderBottomColor: "transparent";
+            display: "flex";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+        };
+        tabsTabActive: {
+            borderBottomColor: "#0264C7";
+            borderBottomWidth: number;
+        };
+        tabsCounter: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            backgroundColor: "#E6EAF1";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        tabsCounterActive: {};
+        wrapperHover: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            backgroundColor: "rgba(0, 0, 0, 0.04)";
+        };
+        wrapper: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            transitionProperty: "all";
+            transitionDuration: "0.1s";
+            transitionTimingFunction: "ease-in-out";
+            gap: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        tabIcon: {
+            color: "#5F6571";
+        };
+        tabIconHover: {
+            color: "#373A3F";
+        };
+        tabsLabel: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+        tabsLabelActive: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+        };
+        tabsContent: {
+            flex: number;
+            minHeight: number;
+            overflow: "hidden";
+        };
+    };
+};
+export default _default;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAsBnB,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from '@alveole/components';
+import React from 'react';
+import { Tabs } from './Tabs';
+import { useStyles } from './Tabs.styles';
+export default {
+    title: 'Tabs',
+    tags: ['Composant'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1863-621',
+    description: 'Composant d’onglets (tabs) basé sur tamagui.',
+    component: Tabs,
+    styleFn: useStyles,
+};
+export const Example = () => {
+    const [_activeTab, setActiveTab] = React.useState(0);
+    return (_jsx(Box, { width: '100%', children: _jsx(Tabs, { defaultValue: 'onglet-1', onChange: setActiveTab, 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',
+                    value: 'onglet-4',
+                    content: _jsx(Typography, { children: "Contenu de onglet 4" }),
+                },
+            ] }) }));
+};

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

@@ -0,0 +1,98 @@
+export declare const useStyles: () => {
+    container: {
+        flex: number;
+        minHeight: number;
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+    };
+    tabs: {
+        flex: number;
+        minHeight: number;
+        flexDirection: "column";
+    };
+    tabsList: {
+        borderBottomLeftRadius: import("@alveole/theme").Spacing;
+        borderBottomRightRadius: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+        boxSizing: "border-box";
+        borderColor: "#DEE3EC";
+        borderBottomWidth: number;
+        backgroundColor: "transparent";
+    };
+    tabsTab: {
+        appearance: "none";
+        backgroundColor: "transparent";
+        cursor: "pointer";
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: number;
+        paddingRight: number;
+        boxSizing: "border-box";
+        borderWidth: number;
+        borderBottomWidth: number;
+        borderBottomColor: "transparent";
+        display: "flex";
+        alignItems: "center";
+        gap: import("@alveole/theme").Spacing;
+    };
+    tabsTabActive: {
+        borderBottomColor: "#0264C7";
+        borderBottomWidth: number;
+    };
+    tabsCounter: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        backgroundColor: "#E6EAF1";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    tabsCounterActive: {};
+    wrapperHover: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        backgroundColor: "rgba(0, 0, 0, 0.04)";
+    };
+    wrapper: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        transitionProperty: "all";
+        transitionDuration: "0.1s";
+        transitionTimingFunction: "ease-in-out";
+        gap: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    tabIcon: {
+        color: "#5F6571";
+    };
+    tabIconHover: {
+        color: "#373A3F";
+    };
+    tabsLabel: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    tabsLabelActive: {
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+    };
+    tabsContent: {
+        flex: number;
+        minHeight: number;
+        overflow: "hidden";
+    };
+};
+//# sourceMappingURL=Tabs.styles.d.ts.map

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

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

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

@@ -0,0 +1,89 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing, text, radius }) => ({
+    container: {
+        flex: 1,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('075'),
+    },
+    tabs: {
+        flex: 1,
+        minHeight: 0,
+        flexDirection: 'column',
+    },
+    tabsList: {
+        borderBottomLeftRadius: spacing('000'),
+        borderBottomRightRadius: spacing('000'),
+        gap: spacing('075'),
+        boxSizing: 'border-box',
+        borderColor: color.light.border['default-grey'],
+        borderBottomWidth: 1,
+        backgroundColor: 'transparent',
+    },
+    tabsTab: {
+        appearance: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
+        paddingLeft: 0,
+        paddingRight: 0,
+        boxSizing: 'border-box',
+        borderWidth: 0,
+        borderBottomWidth: 2,
+        borderBottomColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        gap: spacing('1W'),
+    },
+    tabsTabActive: {
+        borderBottomColor: color.light.border['default-primary'],
+        borderBottomWidth: 2,
+    },
+    tabsCounter: {
+        paddingRight: spacing('1W'),
+        paddingLeft: spacing('1W'),
+        backgroundColor: color.light.background['disabled-grey'],
+        borderRadius: radius('full'),
+        ...text['Corps de texte'].XS.Bold,
+    },
+    tabsCounterActive: {},
+    wrapperHover: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        transitionProperty: 'all',
+        transitionDuration: '0.1s',
+        transitionTimingFunction: 'ease-in-out',
+        gap: spacing('1W'),
+        paddingTop: spacing('025'),
+        paddingBottom: spacing('025'),
+        paddingLeft: spacing('050'),
+        paddingRight: spacing('050'),
+        borderRadius: radius('md'),
+    },
+    tabIcon: {
+        color: color.light.text['mention-grey'],
+    },
+    tabIconHover: {
+        color: color.light.text['default-grey'],
+    },
+    tabsLabel: {
+        ...text['Corps de texte'].SM.Regular,
+    },
+    tabsLabelActive: {
+        ...text['Corps de texte'].SM.Bold,
+    },
+    tabsContent: {
+        flex: 1,
+        minHeight: 0,
+        overflow: 'hidden',
+    },
+}));

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

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

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

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

package/dist/ui/Tabs/index.js

@@ -0,0 +1 @@
+export * from './Tabs';

package/dist/ui/ToolbarBottomNav/index.d.ts

@@ -1,3 +1,2 @@
-export declare const Tabs: any;
-export { Tabs as ToolbarBottomNav };
+export declare const ToolbarBottomNav: any;
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/ToolbarBottomNav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,EAAE,GAGjB,CAAC;AAEH,OAAO,EAAE,IAAI,IAAI,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,EAAE,GAG7B,CAAC"}

package/dist/ui/ToolbarBottomNav/index.js

@@ -2,8 +2,7 @@ import { Tabs as ExpoTabs } from 'expo-router';
 import { ToolbarBottomNav as ToolbarBottomNavBase } from './ToolbarBottomNav';
 import { toolbarBottomNavIcon } from './ToolbarBottomNavIcon';
 // L'annotation explicite évite de faire fuiter des types internes de React Navigation.
-export const Tabs = Object.assign(ToolbarBottomNavBase, {
+export const ToolbarBottomNav = Object.assign(ToolbarBottomNavBase, {
     Screen: ExpoTabs.Screen,
     Icon: toolbarBottomNavIcon,
 });
-export { Tabs as ToolbarBottomNav };

package/dist/ui/index.d.ts

@@ -10,6 +10,7 @@ export * from './LucideIcon';
 export * from './PageHeader';
 export * from './ResourceList';
 export * from './Sidebar';
+export * from './Tabs';
 export * from './Tag';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -10,6 +10,7 @@ export * from './LucideIcon';
 export * from './PageHeader';
 export * from './ResourceList';
 export * from './Sidebar';
+export * from './Tabs';
 export * from './Tag';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,6 +54,7 @@
     "react-native-svg": "^15.0.0",
     "lucide-react-native": ">=0.570.0",
     "@lucide/lab": "*",
+    "@shopify/flash-list": ">=2",
     "react-native-webview": ">=13",
     "expo-application": "*",
     "expo-image": "*",

package/dist/ui/ResourceList/ResourceListNoContent.d.ts

@@ -1,95 +0,0 @@
-import { BoxProps } from '../../core';
-import { ButtonProps } from '../Button';
-import { IconProps } from '../LucideIcon';
-export type ResourceListNoContentProps = Pick<BoxProps, 'style'> & {
-    title: string;
-    description: string;
-    IconProps: Pick<IconProps, 'color' | 'name'>;
-    ButtonProps?: Pick<ButtonProps, 'title' | 'onPress'>;
-};
-export declare const ResourceListNoContent: {
-    (props: ResourceListNoContentProps): import("react/jsx-runtime").JSX.Element;
-    stylesFn: () => {
-        list: {
-            display: "flex";
-            flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
-        };
-        entete: {
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-        };
-        enteteTitle: {
-            color: "#151617";
-            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-        };
-        items: {
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
-        };
-        itemsWithWhiteBackground: {
-            backgroundColor: "#FFFFFF";
-        };
-        withBorder: {
-            borderWidth: number;
-            borderColor: "#DEE3EC";
-            borderLeftWidth: number;
-            borderRightWidth: number;
-        };
-        noBorder: {
-            borderWidth: number;
-            borderLeftWidth: number;
-            borderRightWidth: number;
-        };
-        loader: {
-            flex: number;
-            justifyContent: "center";
-            alignItems: "center";
-            padding: import("@alveole/theme").Spacing;
-        };
-        noContent: {
-            display: "flex";
-            padding: import("@alveole/theme").Spacing;
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-            borderRadius: import("@alveole/theme").Spacing;
-            borderWidth: number;
-            borderColor: "#DEE3EC";
-            backgroundColor: "#FFFFFF";
-            borderLeftWidth: number;
-            borderRightWidth: number;
-            width: "100%";
-        };
-        noContentIntro: {
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-        };
-        noContentText: {
-            display: "flex";
-            flexDirection: "column";
-            alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-        };
-        noContentTextTitle: {
-            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-            fontSize: 18 | 20;
-            lineHeight: 24 | 28;
-            letterSpacing: 0;
-            color: "#151617";
-        };
-        noContentTextDescription: {
-            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
-            fontSize: 14;
-            lineHeight: 20;
-            letterSpacing: 0;
-            color: "#5F6571";
-        };
-    };
-    description: string;
-};
-//# sourceMappingURL=ResourceListNoContent.d.ts.map

package/dist/ui/ResourceList/ResourceListNoContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResourceListNoContent.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceListNoContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,qBAAqB;YAAW,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBtE,CAAC"}

package/dist/ui/ResourceList/ResourceListNoContent.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
-import { Button } from '../Button';
-import { LucideIcon } from '../LucideIcon';
-import { useStyles } from './ResourceList.styles';
-export const ResourceListNoContent = (props) => {
-    const { title, description, style, IconProps, ButtonProps, ...boxProps } = props;
-    const styles = useStyles();
-    return (_jsxs(Box, { style: [styles.noContent, style], ...boxProps, children: [_jsxs(Box, { style: styles.noContentIntro, children: [_jsx(LucideIcon, { size: "lg", ...IconProps }), _jsxs(Box, { style: styles.noContentText, children: [_jsx(Typography, { style: styles.noContentTextTitle, children: title }), _jsx(Typography, { style: styles.noContentTextDescription, children: description })] })] }), ButtonProps && _jsx(Button, { size: "lg", variant: "primary", ...ButtonProps })] }));
-};
-// Component configuration
-ResourceListNoContent.stylesFn = useStyles;
-ResourceListNoContent.description = 'Elément affiché dans une liste vide';