@alveole/components 0.22.1 → 0.23.1

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

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

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

package/dist/ui/Tag/Tag.styles.js

@@ -0,0 +1,33 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ radius, text, color, spacing }) => ({
+    tagContainer: {
+        display: 'block',
+    },
+    tag: {
+        borderRadius: radius('full'),
+    },
+    // Colors
+    tagDefault: {
+        color: color.light.text['label-grey'],
+        backgroundColor: color.light.background['contrast-grey'],
+    },
+    tagAction: {
+        color: color.light.text['label-grey'],
+        backgroundColor: color.light.background['action-low-primary'],
+    },
+    // Sizes
+    tagSm: {
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+        paddingTop: 0,
+        paddingBottom: 0,
+        ...text['Corps de texte'].XS.Bold,
+    },
+    tagMd: {
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+        paddingTop: spacing('1V'),
+        paddingBottom: spacing('1V'),
+        ...text['Corps de texte'].SM.Bold,
+    },
+}));

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

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

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

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

package/dist/ui/Tag/index.js

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

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

@@ -105,6 +105,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvecRetourArriere: () => import("react/jsx-runtime").JSX.Element;
 export declare const SansAvatarEtAvecActions: () => import("react/jsx-runtime").JSX.Element;
 export declare const AvecAvatarSansActions: () => import("react/jsx-runtime").JSX.Element;
 export declare const AvecAvatarEtActions: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,+CAA4D,CAAC;AAEjF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAYpC,CAAC;AAEF,eAAO,MAAM,UAAU,+CAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,+CAEjB,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAWkB;AAElB,eAAO,MAAM,OAAO,+CAA4D,CAAC;AAEjF,eAAO,MAAM,iBAAiB,+CAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAYpC,CAAC;AAEF,eAAO,MAAM,UAAU,+CAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,+CAEjB,CAAC"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { router } from 'expo-router';
 import { Typography } from '../../core';
 import { ButtonIcon } from '../Button/ButtonIcon';
 import { ToolbarTop } from './ToolbarTop';
@@ -14,6 +15,7 @@ export default {
     styleFn: useStyles,
 };
 export const Default = () => _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre" });
+export const AvecRetourArriere = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: () => router.back() }));
 export const SansAvatarEtAvecActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
 export const AvecAvatarSansActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", AvatarProps: { src: 'https://picsum.photos/100/200' } }));
 export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));

package/dist/ui/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './Badge';
 export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
@@ -8,6 +9,8 @@ export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
 export * from './ResourceList';
+export * from './Sidebar';
+export * from './Tag';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -1,4 +1,5 @@
 export * from './Avatar';
+export * from './Badge';
 export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
@@ -8,5 +9,7 @@ export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
 export * from './ResourceList';
+export * from './Sidebar';
+export * from './Tag';
 export * from './ToolbarBottomNav';
 export * from './ToolbarTop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,7 +58,8 @@
     "expo-application": "*",
     "expo-image": "*",
     "expo-router": "*",
-    "expo-linear-gradient": "*"
+    "expo-linear-gradient": "*",
+    "expo-constants": "*"
   },
   "publishConfig": {
     "access": "public"