@alveole/components 0.22.0 → 0.23.0

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

@@ -0,0 +1,172 @@
+export declare const useStyles: () => {
+    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;
+    };
+};
+//# sourceMappingURL=Sidebar.styles.d.ts.map

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

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

package/dist/ui/Sidebar/Sidebar.styles.js

@@ -0,0 +1,148 @@
+import { Colors, makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }) => ({
+    sidebar: {
+        backgroundColor: '#FFFFFF',
+        borderRightWidth: 1,
+        borderColor: color.light.border['default-grey'],
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        alignSelf: 'stretch',
+    },
+    header: {},
+    headerContent: {
+        display: 'flex',
+        flexDirection: 'row',
+        padding: spacing('050'),
+    },
+    logo: {
+        marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('150') : 0,
+    },
+    sidebarContent: {
+        flex: 1,
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    scrollView: {
+        flex: 1,
+        paddingTop: spacing('100'),
+        paddingBottom: spacing('100'),
+        zIndex: 1000,
+        backgroundColor: '#FFFFFF',
+    },
+    groupTitleDesktop: {
+        ...text['Corps de texte'].XS.SemiBold,
+        paddingLeft: spacing('050'),
+        paddingTop: spacing('100'),
+    },
+    groupTitleMobile: {
+        ...text['Corps de texte'].MD.Medium,
+        color: color.light.text['mention-grey'],
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
+    },
+    sidebarItemDesktop: {
+        borderRadius: spacing('050'),
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('050'),
+        padding: spacing('050'),
+        width: '100%',
+        color: color.light.text['title-grey'],
+        stroke: color.light.text['title-grey'],
+    },
+    sidebarItemMobile: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('3V'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
+        width: '100%',
+        color: color.light.text['title-grey'],
+        stroke: color.light.text['title-grey'],
+    },
+    sidebarItemSelectedDesktop: {
+        backgroundColor: color.background.badge.default,
+    },
+    sidebarItemSelectedMobile: {
+        borderRadius: radius('lg'),
+        backgroundColor: color.light.background['alt-primary'],
+    },
+    sidebarItemHover: {
+        backgroundColor: color.light.background['default-grey-hover'],
+    },
+    sidebarItemCurrentHover: {
+        backgroundColor: Colors.Neutre[950],
+    },
+    sidebarItemContainerDesktop: {
+        paddingLeft: spacing('050'),
+        paddingRight: spacing('050'),
+        display: 'flex',
+        flexDirection: 'row',
+        cursor: 'pointer',
+        marginLeft: spacing('075'),
+        marginRight: spacing('025'),
+    },
+    sidebarItemContainerMobile: {
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingTop: spacing('2W'),
+        paddingBottom: spacing('2W'),
+        gap: spacing('3V'),
+        display: 'flex',
+        flexDirection: 'row',
+        cursor: 'pointer',
+        borderRadius: radius('md'),
+        marginLeft: spacing('075'),
+        marginRight: spacing('025'),
+    },
+    sidebarItemTitleSelectedDesktop: {
+        ...text['Corps de texte'].MD.SemiBold,
+        color: color.light.text['default-grey'],
+        stroke: color.light.text['default-grey'],
+    },
+    sidebarItemTitleSelectedMobile: {
+        ...text['Corps de texte'].MD.Medium,
+        color: '#D81B38',
+        stroke: '#D81B38',
+    },
+    sidebarItemIconSelectedMobile: {
+        color: '#D81B38',
+    },
+    sidebarItemTitleDesktop: {
+        ...text['Corps de texte'].MD.Regular,
+        color: color.light.text['title-grey'],
+        stroke: color.light.text['title-grey'],
+    },
+    sidebarItemTitleMobile: {
+        ...text['Corps de texte'].MD.Medium,
+        color: color.light.text['default-grey'],
+        stroke: color.light.text['default-grey'],
+    },
+    sidebarItemTitleCurrentHoverDesktop: {
+        ...text['Corps de texte'].MD.SemiBold,
+    },
+    sidebarItemTitleCurrentHoverMobile: {
+        ...text['Corps de texte'].MD.Medium,
+        color: color.light.background['action-high-primary'],
+    },
+    sidebarItemSelectedIndicator: {
+        height: '100%',
+        width: spacing('025'),
+        position: 'absolute',
+        left: 0,
+    },
+    sidebarItemSelectedIndicatorContent: {
+        width: '100%',
+        minHeight: spacing('150'),
+        backgroundColor: color.light.border['default-primary'],
+        margin: 'auto',
+        borderRadius: spacing('050'),
+    },
+}));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export type SidebarFooterProps = React.PropsWithChildren;
+export declare const SidebarFooter: (props: SidebarFooterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SidebarFooter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarFooter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAEzD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAYtD,CAAC"}

package/dist/ui/Sidebar/SidebarFooter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Version } from '../../core';
+import { Divider } from '../Divider';
+export const SidebarFooter = (props) => {
+    const { children } = props;
+    return (_jsxs(Box, { children: [_jsx(Version, {}), _jsx(Divider, {}), children] }));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type SidebarGroupProps = React.PropsWithChildren & {
+    title: string;
+};
+export declare const SidebarGroup: (props: SidebarGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SidebarGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACxD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAIpD,CAAC"}

package/dist/ui/Sidebar/SidebarGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { Box, Typography } from '../../core';
+import { useStyles } from './Sidebar.styles';
+const SidebarGroupDesktop = (props) => {
+    const { children, title } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "sidebar-group", children: [_jsx(Typography, { style: styles.groupTitleDesktop, children: title }), children] }));
+};
+const SidebarGroupMobile = (props) => {
+    const { children, title } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "sidebar-group", children: [_jsx(Typography, { style: styles.groupTitleMobile, children: title }), children] }));
+};
+export const SidebarGroup = (props) => {
+    const { isVariant } = useTheme();
+    const mobileOrTablet = React.useMemo(() => isVariant('mobile') || isVariant('tablet'), [isVariant]);
+    return mobileOrTablet ? _jsx(SidebarGroupMobile, { ...props }) : _jsx(SidebarGroupDesktop, { ...props });
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SidebarController } from './useSidebar';
+export type SidebarHeaderProps = {
+    controller?: SidebarController;
+    logo: React.ReactNode;
+};
+export declare const SidebarHeader: (props: SidebarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SidebarHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAiCF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Box } from '../../core';
+import { ButtonIcon } from '../Button';
+import { Divider } from '../Divider';
+import { useStyles } from './Sidebar.styles';
+const SidebarHeaderDesktop = (props) => {
+    const { logo } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsx(Box, { style: styles.headerContent, children: _jsx(Box, { flex: 1, children: logo }) }), _jsx(Divider, {})] }));
+};
+const SidebarHeaderMobile = (props) => {
+    const { controller } = props;
+    const styles = useStyles();
+    const { top } = useSafeAreaInsets();
+    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: styles.headerContent, pt: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding, children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
+};
+export const SidebarHeader = (props) => {
+    const { isVariant } = useTheme();
+    const { logo } = props;
+    const mobileOrTablet = React.useMemo(() => isVariant('mobile') || isVariant('tablet'), [isVariant]);
+    return mobileOrTablet ? _jsx(SidebarHeaderMobile, { ...props }) : _jsx(SidebarHeaderDesktop, { logo: logo });
+};

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

@@ -0,0 +1,19 @@
+import { AProps } from '../../core';
+import { LucideIconProps } from '../LucideIcon';
+export type SidebarItemNavigable = {
+    pressable?: undefined;
+    title: string;
+    icon?: LucideIconProps['name'];
+    href: AProps['href'];
+    direction?: AProps['direction'];
+    routeName: string;
+};
+export type SidebarItemPressable = {
+    pressable: true;
+    title: string;
+    icon?: LucideIconProps['name'];
+    onPress: () => void;
+};
+export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;
+export declare const SidebarItem: (props: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SidebarItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAK,MAAM,EAAmB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AA0G3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAIlD,CAAC"}

package/dist/ui/Sidebar/SidebarItem.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { useRoute } from '@react-navigation/native';
+import React from 'react';
+import { A, Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Sidebar.styles';
+const SidebarItemDesktop = (props) => {
+    const { title, icon } = props;
+    const route = useRoute();
+    const styles = useStyles();
+    const currentRouteName = route.name;
+    const isCurrentPage = !props.pressable && currentRouteName === props.routeName;
+    const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedDesktop : {};
+    const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedDesktop : {};
+    const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
+    const sidebarItemTitleDesktop = isCurrentPage ? styles.sidebarItemTitleCurrentHoverDesktop : {};
+    const renderItem = (content) => {
+        if (props.pressable)
+            return _jsx(Box, { onPress: props.onPress, children: content });
+        else
+            return (_jsx(A, { href: props.href, direction: props.direction, children: content }));
+    };
+    return renderItem(_jsxs(Box, { style: styles.sidebarItemContainerDesktop, children: [isCurrentPage && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && _jsx(LucideIcon, { size: "md", name: icon }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }));
+};
+const SidebarItemMobile = (props) => {
+    const { title, icon } = props;
+    const route = useRoute();
+    const styles = useStyles();
+    const currentRouteName = route.name;
+    const isCurrentPage = !props.pressable && currentRouteName === props.routeName;
+    const itemStyleSelected = isCurrentPage ? styles.sidebarItemSelectedMobile : {};
+    const titleStyleSelected = isCurrentPage ? styles.sidebarItemTitleSelectedMobile : {};
+    const sidebarItemHover = isCurrentPage ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
+    const sidebarItemTitleMobile = isCurrentPage ? styles.sidebarItemTitleCurrentHoverMobile : {};
+    const renderItem = (content) => {
+        if (props.pressable)
+            return _jsx(Box, { onPress: props.onPress, children: content });
+        else
+            return (_jsx(A, { href: props.href, direction: props.direction, children: content }));
+    };
+    return renderItem(_jsxs(Box, { children: [isCurrentPage && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemMobile, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && (_jsx(LucideIcon, { size: "md", name: icon, color: isCurrentPage ? styles.sidebarItemIconSelectedMobile.color : undefined })), _jsx(Typography, { style: { ...styles.sidebarItemTitleMobile, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleMobile }, children: title })] })] }));
+};
+export const SidebarItem = (props) => {
+    const { isVariant } = useTheme();
+    const mobileOrTablet = React.useMemo(() => isVariant('mobile') || isVariant('tablet'), [isVariant]);
+    return mobileOrTablet ? _jsx(SidebarItemMobile, { ...props }) : _jsx(SidebarItemDesktop, { ...props });
+};

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

@@ -1,2 +1,5 @@
-export * from './useSidebar';
+export * from '../Sidebar/Sidebar';
+export * from '../Sidebar/SidebarGroup';
+export * from '../Sidebar/SidebarItem';
+export * from '../Sidebar/useSidebar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}

package/dist/ui/Sidebar/index.js

@@ -1 +1,4 @@
-export * from './useSidebar';
+export * from '../Sidebar/Sidebar';
+export * from '../Sidebar/SidebarGroup';
+export * from '../Sidebar/SidebarItem';
+export * from '../Sidebar/useSidebar';

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

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from 'react';
+export type TagColors = 'default' | 'action';
+export type TagProps = {
+    children: React.ReactNode;
+    color: TagColors;
+    size: 'sm' | 'md';
+    style?: CSSProperties;
+};
+export declare const Tag: (props: TagProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,4CAsBlC,CAAC"}

package/dist/ui/Tag/Tag.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { useStyles } from './Tag.styles';
+export const Tag = (props) => {
+    const { size, color, children, style, ...tagProps } = props;
+    const styles = useStyles();
+    const tagSize = size === 'sm' ? styles.tagSm : styles.tagMd;
+    const tagVariant = () => {
+        switch (color) {
+            case 'action':
+                return styles.tagAction;
+            case 'default':
+                return styles.tagDefault;
+        }
+    };
+    return (_jsx(Box, { tag: "tag", style: { ...styles.tagContainer, ...style }, children: _jsx(Typography, { style: { ...styles.tag, ...tagVariant(), ...tagSize }, ...tagProps, children: children }) }));
+};

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

@@ -0,0 +1,48 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("./Tag").TagProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        tagContainer: {
+            display: "block";
+        };
+        tag: {
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        };
+        tagDefault: {
+            color: "#151617";
+            backgroundColor: "#EFF1F6";
+        };
+        tagAction: {
+            color: "#151617";
+            backgroundColor: "#D2E8FE";
+        };
+        tagSm: {
+            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;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        tagMd: {
+            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;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+    };
+};
+export default _default;
+export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tag.stories.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Tag } from './Tag';
+import { useStyles } from './Tag.styles';
+export default {
+    title: 'Tag',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1002-8509',
+    description: 'Différents tags. Composant de type Typography.',
+    component: Tag,
+    styleFn: useStyles,
+};
+export const Colors = () => (_jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Tag, { size: "md", color: "default", children: "Tag default" }), _jsx(Tag, { size: "md", color: "action", children: "Tag action" })] }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", color: "default", children: "Tag sm" }), _jsx(Tag, { size: "md", color: "default", children: "Tag md" })] }));

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

@@ -0,0 +1,37 @@
+export declare const useStyles: () => {
+    tagContainer: {
+        display: "block";
+    };
+    tag: {
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+    };
+    tagDefault: {
+        color: "#151617";
+        backgroundColor: "#EFF1F6";
+    };
+    tagAction: {
+        color: "#151617";
+        backgroundColor: "#D2E8FE";
+    };
+    tagSm: {
+        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;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+    tagMd: {
+        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;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+};
+//# sourceMappingURL=Tag.styles.d.ts.map