@alveole/components 0.14.5 → 0.15.1

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

@@ -0,0 +1,9 @@
+import { IconProps } from '@alveole/components';
+import { Color } from '@alveole/theme';
+export type ToolbarBottomNavIconProps = {
+    color: Color;
+};
+export declare const toolbarBottomNavIcon: (name: IconProps["name"]) => (props: {
+    color: Color;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarBottomNavIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarBottomNavIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNavIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,MAAM,yBAAyB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AACzD,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,CAAC,MAAM,CAAC,MAC5B,OAAO;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,4CAEpD,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNavIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LucideIcon } from '@alveole/components';
+export const toolbarBottomNavIcon = (name) => function ToolbarBottomNavIcon(props) {
+    return _jsx(LucideIcon, { size: "md", name: name, color: props.color });
+};

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

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

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

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

package/dist/ui/ToolbarBottomNav/index.js

@@ -0,0 +1,9 @@
+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, {
+    Screen: ExpoTabs.Screen,
+    Icon: toolbarBottomNavIcon,
+});
+export { Tabs as ToolbarBottomNav };

package/dist/ui/ToolbarTop/ToolbarTop.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ToolbarTopVariant = 'default' | 'large' | 'compactLarge';
+export type ToolbarTopProps = {
+    variant?: ToolbarTopVariant;
+    title: string;
+    subtitle?: string;
+    background?: boolean;
+    showSubtitle?: boolean;
+    canGoBack?: boolean;
+    onNavigateBack?: () => void;
+    actions?: React.ReactNode;
+};
+export declare const ToolbarTop: (props: ToolbarTopProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarTop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AAErE,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAwChD,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, ButtonIcon, Typography } from '@alveole/components';
+import { useRouter } from 'expo-router';
+import { useStyles } from './ToolbarTop.styles';
+export const ToolbarTop = (props) => {
+    const { title, subtitle, background, canGoBack, actions, variant, onNavigateBack } = props;
+    const router = useRouter();
+    const styles = useStyles();
+    const handleBack = () => {
+        if (onNavigateBack) {
+            onNavigateBack();
+        }
+        else if (router.canGoBack()) {
+            router.back();
+        }
+    };
+    return (_jsxs(Box, { tag: "toolbar", style: { ...styles.container, ...(background && styles.containerWithBackground) }, children: [variant !== 'compactLarge' && (_jsxs(Box, { tag: "toolbar-haut", style: styles.toolbarHaut, children: [_jsx(Box, { tag: "toolbar-navigation", children: canGoBack && _jsx(ButtonIcon, { size: "lg", variant: "tertiary", icon: "ArrowLeft", onPress: handleBack }) }), _jsx(Box, { tag: "toolbar-actions", children: actions })] })), _jsxs(Box, { tag: "toolbar-informations", style: { ...styles.informations, ...(variant === 'compactLarge' && styles.compactLargeInformations) }, children: [_jsx(Box, { tag: "toolbar-titre", children: _jsx(Typography, { style: styles.titre, children: title }) }), subtitle && (_jsx(Box, { tag: "toolbar-sous-titre", children: _jsx(Typography, { style: styles.sousTitre, children: subtitle }) }))] })] }));
+};

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

@@ -0,0 +1,59 @@
+declare const _default: {
+    title: string;
+    tags: ["Composant"];
+    experimental: false;
+    description: string;
+    figmaURL: string;
+    component: (props: import("@alveole/components").ToolbarTopProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        container: {
+            display: "flex";
+            width: "100%";
+        };
+        containerWithBackground: {
+            backgroundColor: "#FFFFFF";
+        };
+        toolbarHaut: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            width: "100%";
+            minHeight: import("@alveole/theme").Spacing;
+        };
+        informations: {
+            display: "flex";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        compactLargeInformations: {
+            paddingBottom: number;
+            height: number;
+            justifyContent: "center";
+        };
+        titre: {
+            color: "#151617";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 32 | 40;
+            lineHeight: 48 | 40;
+            letterSpacing: 0;
+        };
+        sousTitre: {
+            color: "#5F6571";
+            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;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithSubtitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithBackground: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithBackButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const Full: () => import("react/jsx-runtime").JSX.Element;
+export declare const CompactLarge: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarTop.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,+CAAyC,CAAC;AAE9D,eAAO,MAAM,YAAY,+CAA4E,CAAC;AAEtG,eAAO,MAAM,cAAc,+CAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,+CAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,+CAUvB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAShB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonIcon } from '@alveole/components';
+import { useStyles } from './ToolbarTop.styles';
+import { ToolbarTop } from './index';
+export default {
+    title: 'ToolbarTop',
+    tags: ['Composant'],
+    experimental: false,
+    description: "Barre d'outils en haut de page avec titre, sous-titre optionnel, bouton retour et actions.",
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1749-4674&t=baZKFA9BpkeQGeZm-4',
+    component: ToolbarTop,
+    styleFn: useStyles,
+};
+export const Default = () => _jsx(ToolbarTop, { title: "Mon titre" });
+export const WithSubtitle = () => _jsx(ToolbarTop, { title: "Mon titre", subtitle: "Un sous-titre optionnel" });
+export const WithBackground = () => (_jsx(ToolbarTop, { title: "Page avec fond", subtitle: "Le fond utilise la couleur par d\u00E9faut", background: true }));
+export const WithBackButton = () => (_jsx(ToolbarTop, { title: "Page d\u00E9tails", subtitle: "Avec bouton de retour", canGoBack: true, onNavigateBack: () => console.log('Retour') }));
+export const WithActions = () => (_jsx(ToolbarTop, { title: "Page avec actions", actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", icon: "Search", onPress: () => console.log('Recherche') }), _jsx(ButtonIcon, { variant: "tertiary", icon: "MoveVertical", onPress: () => console.log('Menu') })] }) }));
+export const Full = () => (_jsx(ToolbarTop, { title: "Tous les options", subtitle: "Sous-titre avec fond et actions", background: true, canGoBack: true, onNavigateBack: () => console.log('Retour'), actions: _jsx(ButtonIcon, { variant: "tertiary", icon: "Share", onPress: () => console.log('Partager') }) }));
+export const CompactLarge = () => _jsx(ToolbarTop, { title: "Titre compact large", variant: "compactLarge" });

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

@@ -0,0 +1,43 @@
+export declare const useStyles: () => {
+    container: {
+        display: "flex";
+        width: "100%";
+    };
+    containerWithBackground: {
+        backgroundColor: "#FFFFFF";
+    };
+    toolbarHaut: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        width: "100%";
+        minHeight: import("@alveole/theme").Spacing;
+    };
+    informations: {
+        display: "flex";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    compactLargeInformations: {
+        paddingBottom: number;
+        height: number;
+        justifyContent: "center";
+    };
+    titre: {
+        color: "#151617";
+        fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+        fontSize: 32 | 40;
+        lineHeight: 48 | 40;
+        letterSpacing: 0;
+    };
+    sousTitre: {
+        color: "#5F6571";
+        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;
+    };
+};
+//# sourceMappingURL=ToolbarTop.styles.d.ts.map

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

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

package/dist/ui/ToolbarTop/ToolbarTop.styles.js

@@ -0,0 +1,37 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, spacing, color }) => ({
+    container: {
+        display: 'flex',
+        width: '100%',
+    },
+    containerWithBackground: {
+        backgroundColor: color.background.default,
+    },
+    toolbarHaut: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: spacing('300'),
+    },
+    informations: {
+        display: 'flex',
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingBottom: spacing('050'),
+    },
+    compactLargeInformations: {
+        paddingBottom: 0,
+        height: 60,
+        justifyContent: 'center',
+    },
+    titre: {
+        ...text.Titres['H1 - XL'],
+        color: color.light.text['title-grey'],
+    },
+    sousTitre: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['mention-grey'],
+    },
+}));

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

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

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

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

package/dist/ui/ToolbarTop/index.js

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

package/dist/ui/index.d.ts

@@ -1,4 +1,9 @@
+export * from './Avatar';
 export * from './Button';
 export * from './Divider';
+export * from './ListItem';
 export * from './LucideIcon';
+export * from './ResourceList';
+export * from './ToolbarBottomNav';
+export * from './ToolbarTop';
 //# sourceMappingURL=index.d.ts.map

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,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -1,3 +1,8 @@
+export * from './Avatar';
 export * from './Button';
 export * from './Divider';
+export * from './ListItem';
 export * from './LucideIcon';
+export * from './ResourceList';
+export * from './ToolbarBottomNav';
+export * from './ToolbarTop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.14.5",
+  "version": "0.15.1",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,14 +34,29 @@
   },
   "peerDependencies": {
     "@alveole/theme": "*",
-    "@tamagui/core": "*",
+    "@tamagui/core": "^1.129.0 <2.0.0",
+    "@tamagui/accordion": "^1.129.0 <2.0.0",
+    "@tamagui/animations-css": "^1.129.0 <2.0.0",
+    "@tamagui/avatar": "^1.129.0 <2.0.0",
+    "@tamagui/config": "^1.129.0 <2.0.0",
+    "@tamagui/dialog": "^1.129.0 <2.0.0",
+    "@tamagui/popover": "^1.129.0 <2.0.0",
+    "@tamagui/radio-group": "^1.129.0 <2.0.0",
+    "@tamagui/sheet": "^1.129.0 <2.0.0",
+    "@tamagui/slider": "^1.129.0 <2.0.0",
+    "@tamagui/switch": "^1.129.0 <2.0.0",
+    "@tamagui/tabs": "^1.129.0 <2.0.0",
+    "@tamagui/toast": "^1.129.0 <2.0.0",
+    "tamagui": "^1.129.0 <2.0.0",
     "react": "*",
     "react-native": "*",
+    "react-native-svg": "^15.0.0",
     "lucide-react-native": "0.557.0",
     "@lucide/lab": "*",
     "react-native-webview": ">=13",
     "expo-application": "*",
-    "expo-image": "*"
+    "expo-image": "*",
+    "expo-router": "*"
   },
   "publishConfig": {
     "access": "public"