@alveole/components 0.22.1 → 0.23.1

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 });

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"}