@alveole/components 0.22.1 → 0.23.1

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/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BAgLnB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM;gBAC1C,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BAoLnB,CAAC"}

package/dist/ui/Button/Button.js

@@ -17,7 +17,7 @@ export const Button = React.forwardRef(function Button(props, ref) {
                 : styles.mdContainer;
     const titleSize = size === 'sm' ? styles.smTitle : size === 'lg' ? styles.lgTitle : size === 'xs' ? styles.xsTitle : styles.mdTitle;
     const noPaddingStyle = { paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 };
-    const buttonContainerStyle = () => {
+    const buttonContainerStyle = (state) => {
         let applicableStyles = {
             ...styles.container,
             ...(startIcon
@@ -39,21 +39,29 @@ export const Button = React.forwardRef(function Button(props, ref) {
             applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
+            else if (state?.pressed)
+                applicableStyles = { ...applicableStyles, ...styles.primaryContainerPressed };
         }
         else if (variant === 'secondary') {
             applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
+            else if (state?.pressed)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerPressed };
         }
         else if (variant === 'tertiary') {
             applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
+            else if (state?.pressed)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerPressed };
         }
         else if (variant === 'link') {
             applicableStyles = { ...applicableStyles, ...styles.linkContainer };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
+            else if (state?.pressed)
+                applicableStyles = { ...applicableStyles, ...styles.linkContainerPressed };
         }
         return {
             ...applicableStyles,
@@ -152,5 +160,5 @@ export const Button = React.forwardRef(function Button(props, ref) {
             : {}),
         ...(disabled ? { borderWidth: 0 } : {}),
     };
-    return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...(fullWidth ? { style: { width: '100%' } } : {}), ...buttonProps, style: [pressableStyle], children: (state) => (_jsxs(Box, { style: [buttonContainerStyle(), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": false, style: textStyle({ hovered: !!state.hovered }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
+    return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...(fullWidth ? { style: { width: '100%' } } : {}), ...buttonProps, style: [pressableStyle], children: (state) => (_jsxs(Box, { style: [buttonContainerStyle({ pressed: state.pressed }), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": false, style: textStyle({ hovered: !!state.hovered }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
 });

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

@@ -56,6 +56,9 @@ declare const _default: {
         primaryContainerHover: {
             backgroundColor: "#0048AC";
         };
+        primaryContainerPressed: {
+            backgroundColor: "#0048AC";
+        };
         secondaryTitle: {
             color: "#151617";
         };
@@ -72,6 +75,10 @@ declare const _default: {
             borderColor: "#DEE3EC";
             backgroundColor: "rgba(0, 0, 0, 0.04)";
         };
+        secondaryContainerPressed: {
+            borderColor: "#DEE3EC";
+            backgroundColor: "rgba(0, 0, 0, 0.04)";
+        };
         tertiaryTitle: {
             color: "#151617";
         };
@@ -82,6 +89,9 @@ declare const _default: {
         tertiaryContainerHover: {
             backgroundColor: "rgba(0, 0, 0, 0.04)";
         };
+        tertiaryContainerPressed: {
+            backgroundColor: "rgba(0, 0, 0, 0.04)";
+        };
         linkTitle: {
             color: "#076D8A";
         };
@@ -94,6 +104,9 @@ declare const _default: {
         linkContainerHover: {
             backgroundColor: "transparent";
         };
+        linkContainerPressed: {
+            backgroundColor: "transparent";
+        };
         xsContainer: {
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}

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

@@ -36,6 +36,9 @@ export declare const useStyles: () => {
     primaryContainerHover: {
         backgroundColor: "#0048AC";
     };
+    primaryContainerPressed: {
+        backgroundColor: "#0048AC";
+    };
     secondaryTitle: {
         color: "#151617";
     };
@@ -52,6 +55,10 @@ export declare const useStyles: () => {
         borderColor: "#DEE3EC";
         backgroundColor: "rgba(0, 0, 0, 0.04)";
     };
+    secondaryContainerPressed: {
+        borderColor: "#DEE3EC";
+        backgroundColor: "rgba(0, 0, 0, 0.04)";
+    };
     tertiaryTitle: {
         color: "#151617";
     };
@@ -62,6 +69,9 @@ export declare const useStyles: () => {
     tertiaryContainerHover: {
         backgroundColor: "rgba(0, 0, 0, 0.04)";
     };
+    tertiaryContainerPressed: {
+        backgroundColor: "rgba(0, 0, 0, 0.04)";
+    };
     linkTitle: {
         color: "#076D8A";
     };
@@ -74,6 +84,9 @@ export declare const useStyles: () => {
     linkContainerHover: {
         backgroundColor: "transparent";
     };
+    linkContainerPressed: {
+        backgroundColor: "transparent";
+    };
     xsContainer: {
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;

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

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

package/dist/ui/Button/Button.styles.js

@@ -38,6 +38,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     primaryContainerHover: {
         backgroundColor: color.light.background['action-high-primary-hover'],
     },
+    primaryContainerPressed: {
+        backgroundColor: color.light.background['action-high-primary-hover'],
+    },
     secondaryTitle: {
         color: color.light.text['action-high-grey'],
     },
@@ -54,6 +57,10 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         borderColor: color.light.border['default-grey'],
         backgroundColor: color.light.background['transparent-hover'],
     },
+    secondaryContainerPressed: {
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['transparent-hover'],
+    },
     tertiaryTitle: {
         color: color.light.text['action-high-grey'],
     },
@@ -64,6 +71,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     tertiaryContainerHover: {
         backgroundColor: color.light.background['transparent-hover'],
     },
+    tertiaryContainerPressed: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
     linkTitle: {
         color: color.text.link.default,
     },
@@ -76,6 +86,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     linkContainerHover: {
         backgroundColor: color.background.button.tertiary.default,
     },
+    linkContainerPressed: {
+        backgroundColor: color.background.button.tertiary.default,
+    },
     // Sizes
     xsContainer: {
         paddingLeft: spacing('075'),

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