@ovotech/element-native 5.4.0 → 5.4.1

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,582 @@
+import { PropsWithChildren } from 'react';
+import { GestureResponderEvent } from 'react-native';
+type TabProps = PropsWithChildren<{
+    active?: boolean;
+    fullWidth?: boolean;
+    onPress?: (event: GestureResponderEvent) => void;
+    testID?: string;
+    ref?: React.RefObject<typeof TabTouchable>;
+}>;
+declare const TabTouchable: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, {
+    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;
+            };
+        };
+    };
+}, {
+    active?: boolean;
+    first?: boolean;
+    last?: boolean;
+    stretch: boolean;
+    inline?: boolean;
+}, never>;
+export declare const Tab: ({ active, fullWidth, children, ref, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const TabText = styled.Text(({ theme: { core, semantic }, active = false }) => css `
+    font-size: ${numToPx(core.fontSize.body.small)};
+    font-family: ${core.fontFamily.bodyBold.native};
+    line-height: ${numToPx(core.lineHeight.body.small)};
+    color: ${active ? semantic.focus.outline : semantic.message.base};
+    text-align: center;
+    padding: ${numToPx(core.space[3])} ${numToPx(core.space[2])};
+  `);
+const TabTouchable = styled.TouchableOpacity(({ active = false, first = false, last = false, stretch = false, theme: { core, semantic }, inline, }) => {
+    const borderWidth = numToPx(core.borderWidth.small);
+    const borderColor = semantic.border.differentiated;
+    return css `
+      flex-grow: ${stretch ? 1 : 0};
+
+      border-bottom-width: ${borderWidth};
+      border-bottom-style: solid;
+      border-bottom-color: ${borderColor};
+
+      border-top-width: ${borderWidth};
+      border-top-style: solid;
+      border-top-color: ${borderColor};
+
+      border-left-width: ${borderWidth};
+      border-left-style: solid;
+      border-left-color: ${borderColor};
+
+      border-right-width: ${borderWidth};
+      border-right-style: solid;
+      border-right-color: ${borderColor};
+
+      ${active
+        ? css `
+            border-bottom-color: ${semantic.focus.outline};
+            border-bottom-width: ${numToPx(core.borderWidth.medium)};
+          `
+        : ''}
+
+      ${!inline
+        ? css `
+            border-top-color: transparent;
+            border-top-width: 0;
+          `
+        : ''}
+    
+      ${last && inline
+        ? ''
+        : css `
+            border-right-color: transparent;
+            border-right-width: 0;
+          `}
+    
+      ${first && inline
+        ? ''
+        : css `
+            border-left-color: transparent;
+            border-left-width: 0;
+          `}
+    `;
+});
+export const Tab = ({ active, fullWidth = false, children, ref, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(TabTouchable, { accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref, ...rest, children: _jsx(TabText, { active: active, ...breakpoints, children: children }) }));
+};

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,10 @@
+import { ViewProps } from 'react-native';
+type TabListProps = ViewProps & {
+    fullWidth?: boolean;
+    setActiveTab?: (i: number) => void;
+    activeTab?: number;
+    tabRefs?: React.RefObject<any>[];
+    inline?: boolean;
+};
+export declare const TabList: ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children, cloneElement } from 'react';
+import styled, { css } from '../../styled.native';
+import { callAll, getValidChildren } from '../../utils';
+const StyledTabList = styled.View(({ theme: { core } }) => css `
+    flex-direction: row;
+    margin: -${numToPx(core.borderWidth.small)};
+  `);
+export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(StyledTabList, { accessible: true, accessibilityRole: "tablist", ...rest, children: Children.map(validChildren, (child, i) => cloneElement(child, {
+            onPress: callAll(() => setActiveTab && setActiveTab(i), child.props.onPress),
+            active: activeTab === i,
+            fullWidth,
+            ref: tabRefs?.[i],
+            first: i === 0,
+            last: Children.count(validChildren) - 1 === i,
+            inline,
+        })) }));
+};

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,3 @@
+export declare const TabPanel: ({ ...rest }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledView = styled.View(({ theme: { core, semantic } }) => css `
+    padding: ${numToPx(core.space[4])};
+    border-top-width: ${numToPx(core.borderWidth.small)};
+    border-style: solid;
+    border-color: ${semantic.border.differentiated};
+    z-index: -1;
+  `);
+export const TabPanel = ({ ...rest }) => {
+    return _jsx(StyledView, { ...rest });
+};

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type TabsProps = {
+    defaultSelected?: number;
+    inline?: boolean;
+    children: ReactNode;
+    onSelected?: (activeTab: number) => void;
+    fullWidth?: boolean;
+};
+export declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};