@alveole/components 0.13.2 → 0.14.1

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

@@ -0,0 +1,194 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing, shadows, radius }) => ({
+    container: {
+        borderTopLeftRadius: radius('md'),
+        borderBottomLeftRadius: radius('md'),
+        borderTopRightRadius: radius('md'),
+        borderBottomRightRadius: radius('md'),
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: spacing('050'),
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    },
+    buttonLoader: {
+        position: 'absolute',
+        right: spacing('075'),
+    },
+    title: {
+        cursor: 'pointer',
+        minWidth: spacing('200'),
+        textAlign: 'center',
+    },
+    // Variants
+    primaryTitle: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryContainer: {
+        backgroundColor: color.light.background['action-high-primary'],
+        ...shadows(2),
+    },
+    primaryTitleHover: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryContainerHover: {
+        backgroundColor: color.light.background['action-high-primary-hover'],
+    },
+    secondaryTitle: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryContainer: {
+        borderWidth: 1,
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['default-grey'],
+    },
+    secondaryTitleHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryContainerHover: {
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+    tertiaryTitle: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryContainer: {},
+    tertiaryTitleHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryContainerHover: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+    linkTitle: {
+        color: color.text.link.default,
+    },
+    linkContainer: {
+        backgroundColor: color.background.button.tertiary.default,
+    },
+    linkTitleHover: {
+        color: color.text.link.hover,
+    },
+    linkContainerHover: {
+        backgroundColor: color.background.button.tertiary.default,
+    },
+    // Sizes
+    xsContainer: {
+        paddingLeft: spacing('075'),
+        paddingRight: spacing('075'),
+        paddingTop: spacing('050'),
+        paddingBottom: spacing('050'),
+        borderTopLeftRadius: radius('sm'),
+        borderBottomLeftRadius: radius('sm'),
+        borderTopRightRadius: radius('sm'),
+        borderBottomRightRadius: radius('sm'),
+    },
+    smContainer: {
+        paddingLeft: spacing('3V'),
+        paddingRight: spacing('3V'),
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
+        borderTopLeftRadius: radius('sm'),
+        borderBottomLeftRadius: radius('sm'),
+        borderTopRightRadius: radius('sm'),
+        borderBottomRightRadius: radius('sm'),
+    },
+    mdContainer: {
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+        paddingTop: 10, // valeur mise en dure dans le Figma
+        paddingBottom: 10, // valeur mise en dure dans le Figma
+    },
+    lgContainer: {
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('3V'),
+    },
+    smContainerIconOnly: {
+        padding: spacing('1W'),
+    },
+    mdContainerIconOnly: {
+        padding: spacing('1W'),
+    },
+    lgContainerIconOnly: {
+        padding: spacing('3V'),
+    },
+    xsTitle: text['Corps de texte'].XS.Regular,
+    smTitle: text['Corps de texte'].SM.Medium,
+    mdTitle: text['Corps de texte'].SM.Medium,
+    lgTitle: text['Corps de texte'].MD.Medium,
+    smContainerStartIcon: {
+        paddingLeft: spacing('050'),
+    },
+    mdContainerStartIcon: {
+        paddingLeft: spacing('075'),
+    },
+    lgContainerStartIcon: {
+        paddingLeft: spacing('100'),
+    },
+    smContainerEndIcon: {
+        paddingRight: spacing('050'),
+    },
+    mdContainerEndIcon: {
+        paddingRight: spacing('075'),
+    },
+    lgContainerEndIcon: {
+        paddingRight: spacing('100'),
+    },
+    // Disabled
+    primaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    primaryContainerDisabled: {
+        cursor: 'not-allowed',
+        backgroundColor: color.light.background['disabled-grey'],
+    },
+    secondaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    secondaryContainerDisabled: {
+        cursor: 'not-allowed',
+    },
+    tertiaryTitleDisabled: {
+        cursor: 'not-allowed',
+        color: color.light.text['disabled-grey'],
+    },
+    tertiaryContainerDisabled: {
+        cursor: 'not-allowed',
+    },
+    // Icons
+    primaryIcon: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryIconHover: {
+        color: color.light.text['inverted-primary'],
+    },
+    primaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+    secondaryIcon: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryIconHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    secondaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+    tertiaryIcon: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryIconHover: {
+        color: color.light.text['action-high-grey'],
+    },
+    tertiaryIconDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+    linkIcon: {
+        color: color.text.link.default,
+    },
+}));

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

@@ -0,0 +1,26 @@
+import { PressableProps } from 'react-native';
+import { IconProps } from '../LucideIcon';
+export type ButtonIconProps = Omit<PressableProps, 'children' | 'style'> & {
+    size?: 'sm' | 'md' | 'lg';
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant: 'primary' | 'secondary' | 'tertiary';
+} & {
+    style?: {
+        width?: number | string;
+        height?: number | string;
+        borderTop?: string;
+        borderBottom?: string;
+        borderLeft?: string;
+        borderRight?: string;
+        borderRadius?: number;
+        borderTopLeftRadius?: number;
+        borderBottomLeftRadius?: number;
+        borderTopRightRadius?: number;
+        borderBottomRightRadius?: number;
+        backgroundColor?: string;
+    };
+} & {
+    icon: IconProps['name'] | number;
+};
+export declare const ButtonIcon: (props: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/ButtonIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAA8B,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C,GAAG;IAEF,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;QAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAyFhD,CAAC"}

package/dist/ui/Button/ButtonIcon.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './Button.styles';
+export const ButtonIcon = (props) => {
+    const { size, variant, disabled, style, ...buttonProps } = props;
+    let { iconSize } = props;
+    const styles = useStyles();
+    const containerSize = size === 'sm'
+        ? styles.smContainerIconOnly
+        : size === 'lg'
+            ? styles.lgContainerIconOnly
+            : styles.mdContainerIconOnly;
+    const containerStyle = (state) => {
+        let applicableStyles = styles.container;
+        if (variant === 'primary') {
+            applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
+            else if (!!state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.primaryContainerHover };
+        }
+        else if (variant === 'secondary') {
+            applicableStyles = { ...applicableStyles, ...styles.secondaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerDisabled };
+            else if (!!state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryContainerHover };
+        }
+        else if (variant === 'tertiary') {
+            applicableStyles = { ...applicableStyles, ...styles.tertiaryContainer };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerDisabled };
+            else if (!!state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerHover };
+        }
+        return { ...applicableStyles, ...containerSize, ...(style ?? {}) };
+    };
+    const iconStyle = (state) => {
+        if (!iconSize) {
+            iconSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md';
+        }
+        if (variant === 'primary') {
+            if (disabled)
+                return { size: iconSize, color: styles.primaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.primaryIconHover.color };
+            return { size: iconSize, color: styles.primaryIcon.color };
+        }
+        else if (variant === 'secondary') {
+            if (disabled)
+                return { size: iconSize, color: styles.secondaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.secondaryIconHover.color };
+            return { size: iconSize, color: styles.secondaryIcon.color };
+        }
+        else if (variant === 'tertiary') {
+            if (disabled)
+                return { size: iconSize, color: styles.tertiaryIconDisabled.color };
+            else if (state.hovered)
+                return { size: iconSize, color: styles.tertiaryIconHover.color };
+            return { size: iconSize, color: styles.tertiaryIcon.color };
+        }
+        return { size: iconSize };
+    };
+    const textStyle = (state) => {
+        let applicableStyles = styles.title;
+        if (variant === 'primary') {
+            applicableStyles = { ...applicableStyles, ...styles.primaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.primaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.primaryTitleHover };
+        }
+        else if (variant === 'secondary') {
+            applicableStyles = { ...applicableStyles, ...styles.secondaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.secondaryTitleHover };
+        }
+        else if (variant === 'tertiary') {
+            applicableStyles = { ...applicableStyles, ...styles.tertiaryTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleHover };
+        }
+        else if (variant === 'link') {
+            applicableStyles = { ...applicableStyles, ...styles.linkTitle };
+            if (disabled)
+                applicableStyles = { ...applicableStyles, ...styles.tertiaryTitleDisabled };
+            else if (state.hovered)
+                applicableStyles = { ...applicableStyles, ...styles.linkTitleHover };
+        }
+        return { ...applicableStyles, minWidth: 16 };
+    };
+    return (_jsx(Pressable, { style: containerStyle, disabled: disabled, ...buttonProps, children: (state) => typeof props.icon === 'number' ? (_jsx(Typography, { style: { ...textStyle({ hovered: !!state.hovered }) }, children: props.icon })) : (_jsx(LucideIcon, { name: props.icon, ...iconStyle({ hovered: !!state.hovered }) })) }));
+};

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

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

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

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

package/dist/ui/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './ButtonIcon';

package/dist/ui/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../../core';
+export type DividerProps = Omit<BoxProps, 'children'>;
+export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEtD,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CAG1C,CAAC"}

package/dist/ui/Divider/Divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { useStyles } from './Divider.styles';
+export const Divider = (props) => {
+    const styles = useStyles();
+    return _jsx(Box, { tag: "divider", style: styles.divider, ...props });
+};

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

@@ -0,0 +1,18 @@
+declare const _default: {
+    title: string;
+    tags: ["Kit"];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: (props: import("./Divider").DividerProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        divider: {
+            width: "100%";
+            height: number;
+            backgroundColor: "#DEE3EC";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Divider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAAmC,CAAC"}

package/dist/ui/Divider/Divider.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from './Divider';
+import { useStyles } from './Divider.styles';
+export default {
+    title: 'Divider',
+    tags: ['Kit'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-15729',
+    description: 'Sérateur. Composant de type Box - Equivalent <hr/>.',
+    component: Divider,
+    styleFn: useStyles,
+};
+export const Default = () => _jsx(Divider, { mt: 8, mb: 16 });

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

@@ -0,0 +1,8 @@
+export declare const useStyles: () => {
+    divider: {
+        width: "100%";
+        height: number;
+        backgroundColor: "#DEE3EC";
+    };
+};
+//# sourceMappingURL=Divider.styles.d.ts.map

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

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

package/dist/ui/Divider/Divider.styles.js

@@ -0,0 +1,8 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color }) => ({
+    divider: {
+        width: '100%',
+        height: 1,
+        backgroundColor: color.light.border['default-grey'],
+    },
+}));

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

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

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

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

package/dist/ui/Divider/index.js

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

package/dist/ui/LucideIcon/LucideIcon.d.ts

@@ -0,0 +1,5 @@
+import { LucideIconProps } from './LucideIcon.props';
+export declare const strokeWidth = 1.5;
+export type IconProps = LucideIconProps;
+export declare const LucideIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LucideIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/ui/LucideIcon/LucideIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoC,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEvF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;AAExC,eAAO,MAAM,UAAU,GAAI,OAAO,SAAS,4CAqC1C,CAAC"}

package/dist/ui/LucideIcon/LucideIcon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabIcons from '@lucide/lab';
+import { Icon as BaseIcon, icons } from 'lucide-react-native';
+import { isLucideIconName } from './LucideIcon.props';
+export const strokeWidth = 1.5;
+export const LucideIcon = (props) => {
+    const { style, size, color } = props;
+    const iconMap = icons;
+    const sizeMap = {
+        xs: 12,
+        sm: 16,
+        md: 24,
+        lg: 32,
+        xl: 64,
+    };
+    const defaultStyle = { stroke: color ?? 'currentColor' };
+    const mergedStyle = [defaultStyle, style];
+    if (isLucideIconName(props.name)) {
+        const IconComponent = iconMap[props.name];
+        return (_jsx(IconComponent, { style: mergedStyle, strokeWidth: strokeWidth, color: color, size: sizeMap[size] }));
+    }
+    return (_jsx(BaseIcon, { iconNode: LabIcons?.[props.name], style: mergedStyle, strokeWidth: strokeWidth, color: color, size: sizeMap[size] }));
+};