@alveole/components 0.22.1 → 0.23.0

package/dist/stories/index.js

@@ -2,13 +2,16 @@
 export * as AStory from '../core/A/A.stories';
 export * as BoxStory from '../core/Box/Box.stories';
 export * as ImageStory from '../core/Image/Image.stories';
+export * as MapStory from '../core/Map/Map.stories';
 export * as MetabaseStory from '../core/Metabase/Metabase.stories';
 export * as PageStory from '../core/Page/Page.stories';
+export * as PdfViewerStory from '../core/PdfViewer/PdfViewer.stories';
 export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
 // UI
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
+export * as BadgeStory from '../ui/Badge/Badge.stories';
 export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
 export * as ButtonStory from '../ui/Button/Button.stories';
 export * as CardStory from '../ui/Card/Card.stories';
@@ -18,5 +21,7 @@ export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 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 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

@@ -0,0 +1,9 @@
+import { TypographyProps } from '../../core/Typography';
+import { LucideIconProps } from '../LucideIcon';
+export type BadgeProps = TypographyProps & {
+    variant: 'default' | 'info' | 'success' | 'error' | 'new' | 'warning';
+    size: 'sm' | 'md';
+    icon?: LucideIconProps['name'];
+};
+export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

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

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

package/dist/ui/Badge/Badge.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;
+    const styles = useStyles();
+    const badgeSize = size === 'sm' ? styles.badgeSm : styles.badgeMd;
+    const badgeVariant = () => {
+        switch (variant) {
+            case 'default':
+                return styles.badgeDefault;
+            case 'success':
+                return styles.badgeSuccess;
+            case 'warning':
+                return styles.badgeWarning;
+            case 'error':
+                return styles.badgeError;
+            case 'info':
+                return styles.badgeInfo;
+            case 'new':
+                return styles.badgeNew;
+            default:
+                ((_) => { })(variant);
+        }
+        return {};
+    };
+    if (icon) {
+        const iconSize = size === 'sm' ? 'xs' : 'sm';
+        return (_jsxs(Box, { tag: "badge", style: [styles.badge, badgeVariant(), badgeSize, style], children: [_jsx(LucideIcon, { name: icon, size: iconSize }), _jsx(Typography, { tag: "badge-text", ...badgeProps })] }));
+    }
+    return _jsx(Typography, { tag: "badge", style: [styles.badge, badgeVariant(), badgeSize, style], ...badgeProps });
+};

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

@@ -0,0 +1,67 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("./Badge").BadgeProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        badge: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            marginRight: string;
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        badgeInfo: {
+            color: "#0264C7";
+            backgroundColor: "#E5F1FE";
+        };
+        badgeSuccess: {
+            color: "#1B7440";
+            backgroundColor: "#B9FDD5";
+        };
+        badgeError: {
+            color: "#C62416";
+            backgroundColor: "#FDEAE8";
+        };
+        badgeWarning: {
+            color: "#B34000";
+            backgroundColor: "#FFE9E6";
+        };
+        badgeNew: {
+            color: "#7F4214";
+            backgroundColor: "#FBF2C6";
+        };
+        badgeDefault: {
+            color: "#373A3F";
+            backgroundColor: "#EFF1F6";
+        };
+        badgeSm: {
+            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;
+            textTransform: "uppercase";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+        };
+        badgeMd: {
+            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;
+            textTransform: "uppercase";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+        };
+    };
+};
+export default _default;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Icons: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Badge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,QAAQ,+CAuBpB,CAAC;AAEF,eAAO,MAAM,KAAK,+CASjB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAMjB,CAAC"}

package/dist/ui/Badge/Badge.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Badge } from './Badge';
+import { useStyles } from './Badge.styles';
+export default {
+    title: 'Badge',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-547',
+    description: 'Différents variants de badges. Composant de type Typography.',
+    component: Badge,
+    styleFn: useStyles,
+};
+export const Variants = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Badge, { size: "md", variant: "default", children: "Badge default" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge info" }), _jsx(Badge, { size: "md", variant: "error", children: "Badge error" }), _jsx(Badge, { size: "md", variant: "new", children: "Badge new" }), _jsx(Badge, { size: "md", variant: "success", children: "Badge success" }), _jsx(Badge, { size: "md", variant: "warning", children: "Badge warning" })] }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Badge, { size: "sm", variant: "info", m: "auto", children: "Badge small" }), _jsx(Badge, { size: "md", variant: "info", children: "Badge medium" })] }));
+export const Icons = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: _jsx(Badge, { size: "sm", variant: "info", icon: "Check", children: "Badge small" }) }));

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

@@ -0,0 +1,55 @@
+export declare const useStyles: () => {
+    badge: {
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        marginRight: string;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    badgeInfo: {
+        color: "#0264C7";
+        backgroundColor: "#E5F1FE";
+    };
+    badgeSuccess: {
+        color: "#1B7440";
+        backgroundColor: "#B9FDD5";
+    };
+    badgeError: {
+        color: "#C62416";
+        backgroundColor: "#FDEAE8";
+    };
+    badgeWarning: {
+        color: "#B34000";
+        backgroundColor: "#FFE9E6";
+    };
+    badgeNew: {
+        color: "#7F4214";
+        backgroundColor: "#FBF2C6";
+    };
+    badgeDefault: {
+        color: "#373A3F";
+        backgroundColor: "#EFF1F6";
+    };
+    badgeSm: {
+        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;
+        textTransform: "uppercase";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+    };
+    badgeMd: {
+        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;
+        textTransform: "uppercase";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        gap: import("@alveole/theme").Spacing;
+    };
+};
+//# sourceMappingURL=Badge.styles.d.ts.map

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

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

package/dist/ui/Badge/Badge.styles.js

@@ -0,0 +1,49 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
+    badge: {
+        borderRadius: radius('sm'),
+        marginRight: 'auto',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    // Variants
+    badgeInfo: {
+        color: color.light.text['default-info'],
+        backgroundColor: color.light.background['contrast-info'],
+    },
+    badgeSuccess: {
+        color: color.light.text['default-success'],
+        backgroundColor: color.light.background['contrast-success'],
+    },
+    badgeError: {
+        color: color.light.text['default-error'],
+        backgroundColor: color.light.background['contrast-error'],
+    },
+    badgeWarning: {
+        color: color.light.text['default-warning'],
+        backgroundColor: color.light.background['contrast-warning'],
+    },
+    badgeNew: {
+        color: color.text.badge.new,
+        backgroundColor: color.background.badge.new,
+    },
+    badgeDefault: {
+        color: color.light.text['default-grey'],
+        backgroundColor: color.light.background['contrast-grey'],
+    },
+    // Sizes
+    badgeSm: {
+        paddingLeft: spacing('1V'),
+        paddingRight: spacing('1,5V'),
+        gap: spacing('1V'),
+        ...text['Corps de texte'].XS.CapsBold,
+    },
+    badgeMd: {
+        paddingLeft: spacing('1V'),
+        paddingRight: spacing('1W'),
+        gap: spacing('1V'),
+        ...text['Corps de texte'].SM.CapsBold,
+    },
+}));

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

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

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

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

package/dist/ui/Badge/index.js

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

package/dist/ui/Sidebar/Sidebar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SidebarController } from './useSidebar';
+export declare const SidebarWidth = 286;
+export declare const SidebarHeight = 58;
+export type SidebarProps = React.PropsWithChildren & {
+    controller?: SidebarController;
+    logo: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare const Sidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACnD,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuCF,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CAI1C,CAAC"}

package/dist/ui/Sidebar/Sidebar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { Box } from '../../core';
+import { useStyles } from './Sidebar.styles';
+import { SidebarFooter } from './SidebarFooter';
+import { SidebarHeader } from './SidebarHeader';
+export const SidebarWidth = 286;
+export const SidebarHeight = 58;
+const SidebarDesktop = (props) => {
+    const { children, controller, footer, logo } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "sidebar", width: SidebarWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: styles.scrollView, children: children }), footer && _jsx(SidebarFooter, { children: footer })] }) }));
+};
+const SidebarMobile = (props) => {
+    const { children, controller, footer, logo } = props;
+    const styles = useStyles();
+    const navWidth = React.useMemo(() => {
+        if (controller?.open)
+            return '100%';
+        return 0;
+    }, [controller?.open]);
+    return (_jsx(Box, { tag: "sidebar", width: navWidth, style: styles.sidebar, children: _jsxs(Box, { style: styles.sidebarContent, pb: '3V', pr: '3V', pl: '3V', children: [_jsx(SidebarHeader, { controller: controller, logo: logo }), _jsx(ScrollView, { style: styles.scrollView, children: children }), footer && controller?.open && _jsx(SidebarFooter, { children: footer })] }) }));
+};
+export const Sidebar = (props) => {
+    const { isVariant } = useTheme();
+    const mobileOrTablet = React.useMemo(() => isVariant('mobile') || isVariant('tablet'), [isVariant]);
+    return mobileOrTablet ? _jsx(SidebarMobile, { ...props }) : _jsx(SidebarDesktop, { ...props });
+};

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

@@ -0,0 +1,182 @@
+declare const _default: {
+    title: string;
+    tags: ["Composant"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("./Sidebar").SidebarProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        sidebar: {
+            backgroundColor: "#FFFFFF";
+            borderRightWidth: number;
+            borderColor: "#DEE3EC";
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "flex-start";
+            alignSelf: "stretch";
+        };
+        header: {};
+        headerContent: {
+            display: "flex";
+            flexDirection: "row";
+            padding: import("@alveole/theme").Spacing;
+        };
+        logo: {
+            marginLeft: import("@alveole/theme").Spacing;
+        };
+        sidebarContent: {
+            flex: number;
+            justifyContent: "space-between";
+            width: "100%";
+        };
+        scrollView: {
+            flex: number;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            zIndex: number;
+            backgroundColor: "#FFFFFF";
+        };
+        groupTitleDesktop: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            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;
+        };
+        groupTitleMobile: {
+            color: "#5F6571";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemDesktop: {
+            borderRadius: import("@alveole/theme").Spacing;
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            padding: import("@alveole/theme").Spacing;
+            width: "100%";
+            color: "#151617";
+            stroke: "#151617";
+        };
+        sidebarItemMobile: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+            gap: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            width: "100%";
+            color: "#151617";
+            stroke: "#151617";
+        };
+        sidebarItemSelectedDesktop: {
+            backgroundColor: "#EFF1F6";
+        };
+        sidebarItemSelectedMobile: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            backgroundColor: "#F2F9FF";
+        };
+        sidebarItemHover: {
+            backgroundColor: "#F4F6FA";
+        };
+        sidebarItemCurrentHover: {
+            backgroundColor: "#EFF1F6";
+        };
+        sidebarItemContainerDesktop: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            display: "flex";
+            flexDirection: "row";
+            cursor: "pointer";
+            marginLeft: import("@alveole/theme").Spacing;
+            marginRight: import("@alveole/theme").Spacing;
+        };
+        sidebarItemContainerMobile: {
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            gap: import("@alveole/theme").Spacing;
+            display: "flex";
+            flexDirection: "row";
+            cursor: "pointer";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            marginLeft: import("@alveole/theme").Spacing;
+            marginRight: import("@alveole/theme").Spacing;
+        };
+        sidebarItemTitleSelectedDesktop: {
+            color: "#373A3F";
+            stroke: "#373A3F";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemTitleSelectedMobile: {
+            color: "#D81B38";
+            stroke: "#D81B38";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemIconSelectedMobile: {
+            color: "#D81B38";
+        };
+        sidebarItemTitleDesktop: {
+            color: "#151617";
+            stroke: "#151617";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemTitleMobile: {
+            color: "#373A3F";
+            stroke: "#373A3F";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemTitleCurrentHoverDesktop: {
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemTitleCurrentHoverMobile: {
+            color: "#002764";
+            fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
+            fontSize: 16;
+            lineHeight: 24;
+            letterSpacing: 0;
+        };
+        sidebarItemSelectedIndicator: {
+            height: "100%";
+            width: import("@alveole/theme").Spacing;
+            position: "absolute";
+            left: number;
+        };
+        sidebarItemSelectedIndicatorContent: {
+            width: "100%";
+            minHeight: import("@alveole/theme").Spacing;
+            backgroundColor: "#0264C7";
+            margin: string;
+            borderRadius: import("@alveole/theme").Spacing;
+        };
+    };
+};
+export default _default;
+export declare const ExampleUsage: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sidebar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAgBlB,eAAO,MAAM,YAAY,+CAA+C,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '../../core';
+import { Sidebar } from './Sidebar';
+import { useStyles } from './Sidebar.styles';
+export default {
+    title: 'Sidebar',
+    tags: ['Composant'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1328-725',
+    description: 'SideNav est un composant de navigation primaire qui permet d’accéder aux principales sections d’une application. Navigation coté droit, se transformant en menu burger sur mobile. Uitliser <SidebarItem> et <SidebarGroup>.',
+    component: Sidebar,
+    styleFn: useStyles,
+};
+const codeExample = `<Sidebar
+  controller={sidebarController}
+  logo={<Image source={require('../../assets/logo.png')} />}
+  footer={<Button borderNone variant="tertiary" title="Se déconnecter" onPress={onLogout} />}
+>
+  <SidebarItem title="Item 1" href="/admin/item-1" routeName="item-1" />
+  <SidebarItem title="Item 2" href="/admin/item-2" routeName="item-2" />
+ 
+  <SidebarGroup title="Groupe">
+    <SidebarItem title="Item group 1" href="/admin/gp-item-2" routeName="gp-item-1" />
+    <SidebarItem title="Item group 2" href="/admin/gp-item-2" routeName="gp-item-2" />
+  </SidebarGroup>
+</Sidebar>`;
+export const ExampleUsage = () => _jsx(Typography, { children: codeExample });