@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/List/styled.js

@@ -0,0 +1,40 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const SquareBullet = styled.View(({ theme: { core, semantic }, visible, smallAndUp }) => {
+    const lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    const topMargin = (lineHeight - core.space[2]) / 2;
+    return css `
+    align-self: flex-start;
+    width: ${numToPx(core.space[2])};
+    height: ${numToPx(core.space[2])};
+    margin-right: ${numToPx(core.space[2])};
+    margin-top: ${numToPx(topMargin)};
+    background-color: ${visible ? semantic.message.base : 'transparent'};
+  `;
+});
+export const TextBullet = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    const lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    return css `
+      margin-right: ${numToPx(core.space[1])};
+      min-width: ${numToPx(core.space[3])};
+      min-height: ${numToPx(core.space[3])};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(lineHeight)};
+      text-align: left;
+      color: ${semantic.message.base};
+    `;
+});
+export const FlexRow = styled.View `
+  flex-direction: row;
+`;
+export const LiContent = styled.View `
+  flex-direction: column;
+  flex: 1;
+`;

package/dist/components/Margin/Margin.d.ts

@@ -0,0 +1,589 @@
+import { SpaceKey } from '@ovotech/element-core';
+import { ComponentProps } from 'react';
+import { Breakpoints } from '../../hooks';
+type MProps = {
+    mTop?: SpaceKey | SpaceKey[];
+    mBottom?: SpaceKey | SpaceKey[];
+    mLeft?: SpaceKey | SpaceKey[];
+    mRight?: SpaceKey | SpaceKey[];
+    horizontal?: SpaceKey | SpaceKey[];
+    vertical?: SpaceKey | SpaceKey[];
+    all?: SpaceKey | SpaceKey[];
+    breakpoints: Breakpoints;
+};
+declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, {
+    core: {
+        color: {
+            brand: {
+                midnight: string;
+                midnightTint: string;
+                forest: string;
+                forestTint: string;
+                ovo: string;
+                ovoTint: string;
+                leaf: string;
+                leafTint: string;
+                energised: string;
+                energisedTint: string;
+                offwhite: string;
+                white: string;
+                black: string;
+            };
+            neutral: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            red: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            orange: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            yellow: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            green: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+            blue: {
+                darkest: string;
+                darker: string;
+                dark: string;
+                base: string;
+                light: string;
+                lighter: string;
+                lightest: string;
+            };
+        };
+        fontFamily: {
+            mono: {
+                native: string;
+                web: string;
+            };
+            heading: {
+                native: string;
+                web: string;
+            };
+            body: {
+                native: string;
+                web: string;
+            };
+            bodyBold: {
+                native: string;
+                web: string;
+            };
+        };
+        fontWeight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+        fontSize: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        letterSpacing: {
+            base: number;
+            compressed: number;
+            extraCompressed: number;
+        };
+        lineHeight: {
+            display0: {
+                small: number;
+                large: number;
+            };
+            display1: {
+                small: number;
+                large: number;
+            };
+            display2: {
+                small: number;
+                large: number;
+            };
+            display3: {
+                small: number;
+                large: number;
+            };
+            heading1: {
+                small: number;
+                large: number;
+            };
+            heading2: {
+                small: number;
+                large: number;
+            };
+            heading3: {
+                small: number;
+                large: number;
+            };
+            heading4: {
+                small: number;
+                large: number;
+            };
+            lead: {
+                small: number;
+                large: number;
+            };
+            body: {
+                small: number;
+                large: number;
+            };
+            small: {
+                small: number;
+                large: number;
+            };
+            label: {
+                small: number;
+                large: number;
+            };
+        };
+        borderWidth: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        breakpoint: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        mediaQuery: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        customMediaQuery: {
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
+        };
+        opacity: {
+            solid: number;
+            translucent: number;
+            transparent: number;
+        };
+        radius: {
+            small: number;
+            medium: number;
+            large: number;
+            max: number;
+        };
+        space: {
+            "0": number;
+            "1": number;
+            "2": number;
+            "3": number;
+            "4": number;
+            "5": number;
+            "6": number;
+            "7": number;
+            "8": number;
+            "9": number;
+            "10": number;
+            "11": number;
+            "12": number;
+            "13": number;
+            "14": number;
+            "15": number;
+        };
+        transition: {
+            slow: number;
+            medium: number;
+            fast: number;
+        };
+    };
+    semantic: {
+        border: {
+            graphic: string;
+            differentiated: string;
+            functional: string;
+        };
+        branded: {
+            surface: string;
+            message: string;
+            heading: string;
+        };
+        neutral: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        success: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        warning: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        error: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        info: {
+            surface: string;
+            message: string;
+            surfaceEmphasis: string;
+            messageOnEmphasis: string;
+            border: string;
+        };
+        data: {
+            branded: {
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
+            };
+            electric: {
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
+            };
+            gas: {
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
+            };
+        };
+        focus: {
+            outline: string;
+            hover: string;
+            surface: string;
+        };
+        inverted: {
+            surface: string;
+            surfaceAlt: string;
+            border: string;
+            borderAlt: string;
+            message: {
+                branded: string;
+                base: string;
+                secondary: string;
+                link: string;
+            };
+        };
+        message: {
+            base: string;
+            secondary: string;
+            link: string;
+            error: string;
+            branded: string;
+        };
+        surface: {
+            base: string;
+            cutout: string;
+            elevated: string;
+        };
+    };
+    component: {
+        badge: {
+            variants: {
+                neutral: {
+                    background: string;
+                    foreground: string;
+                };
+                red: {
+                    background: string;
+                    foreground: string;
+                };
+                orange: {
+                    background: string;
+                    foreground: string;
+                };
+                yellow: {
+                    background: string;
+                    foreground: string;
+                };
+                green: {
+                    background: string;
+                    foreground: string;
+                };
+                blue: {
+                    background: string;
+                    foreground: string;
+                };
+            };
+        };
+        cta: {
+            primary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+            secondary: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+            destructive: {
+                message: string;
+                surface: string;
+                messageHover: string;
+                surfaceHover: string;
+                messageFocused: string;
+                surfaceFocused: string;
+                outlineFocused: string;
+                backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
+            };
+        };
+        display0: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        display3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading1: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading2: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading3: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        heading4: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        lead: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        body: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        small: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+        label: {
+            fontFamily: string;
+            fontWeight: number;
+            lineHeight: {
+                small: number;
+                large: number;
+            };
+            fontSize: {
+                small: number;
+                large: number;
+            };
+        };
+    };
+}, MProps, never>;
+type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {
+    top?: SpaceKey | SpaceKey[];
+    bottom?: SpaceKey | SpaceKey[];
+    left?: SpaceKey | SpaceKey[];
+    right?: SpaceKey | SpaceKey[];
+    horizontal?: SpaceKey | SpaceKey[];
+    vertical?: SpaceKey | SpaceKey[];
+    all?: SpaceKey | SpaceKey[];
+};
+declare const Margin: ({ top, bottom, left, right, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Margin };

package/dist/components/Margin/Margin.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+const StyledMargin = styled.View(({ theme: { core: { space }, }, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    return `
+    ${horizontal
+        ? `
+            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
+            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+          `
+        : ''}
+    ${vertical
+        ? `
+            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
+            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+          `
+        : ''}
+    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mBottom
+        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        : ''}
+    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mRight
+        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        : ''}
+    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+  `;
+});
+const Margin = ({ top, bottom, left, right, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+};
+export { Margin };

package/dist/components/Margin/index.d.ts

@@ -0,0 +1 @@
+export { Margin } from './Margin';

package/dist/components/Margin/index.js

@@ -0,0 +1 @@
+export { Margin } from './Margin';

package/dist/components/NavHeader/IconButton.d.ts

@@ -0,0 +1,15 @@
+import { ComplexAnimationBuilder } from 'react-native-reanimated';
+import { IconNameExtended } from '../../providers';
+export type RightActionConfig = {
+    iconName?: IconNameExtended;
+    onActionPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
+type IconButtonProps = {
+    size: 'small' | 'large';
+    animation: ComplexAnimationBuilder;
+    rightActionConfig?: RightActionConfig;
+};
+export declare const IconButton: ({ size, animation, rightActionConfig, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/NavHeader/IconButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
+export const IconButton = ({ size, animation, rightActionConfig, }) => {
+    const ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    const theme = useTheme();
+    if (!rightActionConfig || !rightActionConfig?.iconName) {
+        return null;
+    }
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig?.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: ({ pressed }) => (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) })) }));
+};