@ovotech/element-native 5.3.0 → 5.4.1

package/dist/components/Grid/Col.d.ts

@@ -0,0 +1,575 @@
+declare const Col: (props: Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: {
+        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;
+                };
+            };
+        };
+    } | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element;
+export { Col };

package/dist/components/Grid/Col.js

@@ -0,0 +1,35 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledCol = styled.View(({ theme: { core }, span = 12, small, medium, large, smallAndUp, mediumAndUp, largeAndUp, }) => {
+    const gutter = [core.space[4], core.space[8]];
+    const halfGutter = gutter.map(g => g / 2);
+    const smallScreen = !smallAndUp;
+    const percentage = (span / 12) * 100;
+    const smallPercentage = small ? (small / 12) * 100 : percentage;
+    const mediumPercentage = medium ? (medium / 12) * 100 : smallPercentage;
+    const largePercentage = large ? (large / 12) * 100 : mediumPercentage;
+    return css `
+      flex: 0 0 auto;
+      flex-basis: ${largeAndUp
+        ? largePercentage
+        : mediumAndUp
+            ? mediumPercentage
+            : smallAndUp
+                ? smallPercentage
+                : percentage}%;
+      max-width: ${largeAndUp
+        ? largePercentage
+        : mediumAndUp
+            ? mediumPercentage
+            : smallAndUp
+                ? smallPercentage
+                : percentage}%;
+      padding-left: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      padding-right: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      margin-bottom: ${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      width: 100%;
+    `;
+});
+const Col = styledComponentWithBreakpoints(StyledCol);
+export { Col };

package/dist/components/Grid/Row.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+type Props = PropsWithChildren<{
+    isNested?: boolean;
+}>;
+declare const Row: ({ children, ...rest }: Props & ViewProps) => import("react/jsx-runtime").JSX.Element;
+export { Row };

package/dist/components/Grid/Row.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledRow = styled.View(({ theme: { core }, isNested, smallAndUp }) => {
+    const gutter = [core.space[4], core.space[8]];
+    const halfGutter = gutter.map(g => g / 2);
+    const smallScreen = !smallAndUp;
+    return css `
+      padding-left: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      padding-right: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      margin: 0 auto;
+      width: ${core.breakpoint.large}px;
+      max-width: 100%;
+      margin-bottom: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+
+      ${isNested
+        ? `
+      margin-left: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      margin-right: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      width: auto;
+      max-width: 200%; /* max width none not supported in RN */
+    `
+        : null}
+    `;
+});
+const WidthRow = styledComponentWithBreakpoints(StyledRow);
+const RowInner = styled.View `
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+const Row = ({ children, ...rest }) => (_jsx(WidthRow, { ...rest, children: _jsx(RowInner, { children: children }) }));
+export { Row };

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

@@ -0,0 +1,2 @@
+export { Col } from './Col';
+export { Row } from './Row';

package/dist/components/Grid/index.js

@@ -0,0 +1,2 @@
+export { Col } from './Col';
+export { Row } from './Row';

package/dist/components/Heading1/Heading1.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading1: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
+    inverted?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Heading1/Heading1.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledHeading1 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.heading1.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.heading1.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.heading1.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Heading1 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading1, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

package/dist/components/Heading1/index.js

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

package/dist/components/Heading2/Heading2.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading2: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
+    inverted?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;