@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

package/dist/components/Tabs/Tab.js

@@ -2,64 +2,31 @@ 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};
+const TabText = styled.Text(({ theme, active = false }) => css `
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-family: ${theme.native.font.family.bold};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${active
+    ? theme.color.outline.outer
+    : theme.color.surface.onSurface};
     text-align: center;
-    padding: ${numToPx(core.space[3])} ${numToPx(core.space[2])};
+    padding: ${numToPx(theme.space[300])} ${numToPx(theme.space[200])};
   `);
-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;
+const TabTouchable = styled.TouchableOpacity(({ active = false, stretch = false, theme }) => {
     return css `
-      flex-grow: ${stretch ? 1 : 0};
+    flex-grow: ${stretch ? 1 : 0};
 
-      border-bottom-width: ${borderWidth};
-      border-bottom-style: solid;
-      border-bottom-color: ${borderColor};
+    border-bottom-width: ${numToPx(theme.border.width.sm)};
+    border-bottom-style: solid;
+    border-bottom-color: ${theme.color.surface.border};
 
-      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
+    ${active
         ? css `
-            border-top-color: transparent;
-            border-top-width: 0;
-          `
+          border-bottom-color: ${theme.color.outline.outer};
+          border-bottom-width: ${numToPx(theme.border.width.md)};
+        `
         : ''}
-    
-      ${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();

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

@@ -4,7 +4,6 @@ type TabListProps = ViewProps & {
     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 declare const TabList: ({ children, setActiveTab, activeTab, tabRefs, fullWidth, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/TabList.js

@@ -3,19 +3,16 @@ 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 `
+const StyledTabList = styled.View(({ theme }) => css `
     flex-direction: row;
-    margin: -${numToPx(core.borderWidth.small)};
+    margin: -${numToPx(theme.border.width.sm)};
   `);
-export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }) => {
+export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, ...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.js

@@ -1,11 +1,11 @@
 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)};
+const StyledView = styled.View(({ theme }) => css `
+    padding: ${numToPx(theme.space[400])};
+    border-top-width: ${numToPx(theme.border.width.sm)};
     border-style: solid;
-    border-color: ${semantic.border.differentiated};
+    border-color: ${theme.color.input.borderDim};
     z-index: -1;
   `);
 export const TabPanel = ({ ...rest }) => {

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

@@ -1,10 +1,9 @@
 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 declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/Tabs.js

@@ -1,21 +1,18 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
-import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
+import { cloneElement, createRef, useEffect, useRef, useState, } from 'react';
 import styled, { css } from '../../styled.native';
 import { filterChildrenByType } from '../../utils';
 import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-const TabsCard = styled(Card)(({ theme: { core, semantic }, inline }) => css `
+const TabsCard = styled(Card)(({ theme }) => css `
     padding: 0;
-    border: ${numToPx(core.borderWidth.small)} solid
-      ${inline ? semantic.border.differentiated : 'transparent'};
+    border: ${numToPx(theme.border.width.sm)} solid transparent;
     background: transparent;
   `);
-export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inline, ...rest }) => {
+export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, ...rest }) => {
     const [activeTab, setActiveTab] = useState(defaultSelected);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore there is no way to properly type it
     const tabList = filterChildrenByType(children, TabList);
     const tabPanels = filterChildrenByType(children, TabPanel);
     const tabRefs = tabPanels.map(() => createRef());
@@ -28,12 +25,11 @@ export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inl
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (_jsxs(TabsCard, { inline: inline, ...rest, children: [tabList.map((child) => cloneElement(child, {
+    return (_jsxs(TabsCard, { ...rest, children: [tabList.map((child) => cloneElement(child, {
                 setActiveTab,
                 activeTab,
                 tabRefs,
                 fullWidth,
-                inline,
             })), tabPanels
                 .filter((_, index) => index === activeTab)
                 .map((child, index) => cloneElement(child, {

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

@@ -1,4 +1,4 @@
-export { Tabs } from './Tabs';
 export { Tab } from './Tab';
 export { TabList } from './TabList';
 export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';

package/dist/components/Tabs/index.js

@@ -1,4 +1,4 @@
-export { Tabs } from './Tabs';
 export { Tab } from './Tab';
 export { TabList } from './TabList';
 export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';

package/dist/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import { FieldProps } from '../Field';
 import { InputProps } from '../Input/Input';
 type Props = Omit<FieldProps, 'children'> & InputProps;
-export declare const TextField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextField/TextField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { TextInput } from '../TextInput';
-export const TextField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(TextInput, { ref: ref }) }));
+export const TextField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(TextInput, { ref: ref }) }));
 };

package/dist/components/TextInput/TextInput.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-const TextInput = ({ ref, ...props }) => (_jsx(Input, { keyboardType: "default", ref: ref, ...props }));
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { ...props, keyboardType: "default", ref: ref }));
 export { TextInput };

package/dist/components/TextareaField/TextareaField.d.ts

@@ -1,5 +1,5 @@
 import { FieldProps } from '../Field';
 import { TextareaInputProps } from '../TextareaInput';
 type Props = Omit<FieldProps, 'children'> & TextareaInputProps;
-export declare const TextareaField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TextareaField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextareaField/TextareaField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { TextareaInput } from '../TextareaInput';
-export const TextareaField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(TextareaInput, { ref: ref }) }));
+export const TextareaField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(TextareaInput, { ref: ref }) }));
 };

package/dist/components/TextareaInput/TextareaInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { Input } from '../Input/Input';
-const StyledInput = styled(Input)(({ theme: { core }, rows }) => css `
-    padding: ${numToPx(core.space[2])};
-    padding-top: ${numToPx(core.space[3])};
-    height: ${core.space[8] * rows}px;
+const StyledInput = styled(Input)(({ theme, rows }) => css `
+    padding: ${numToPx(theme.space[200])};
+    padding-top: ${numToPx(theme.space[300])};
+    height: ${theme.space[800] * rows}px;
   `);
 const TextareaInput = ({ rows = 3, ref, ...rest }) => {
     return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));

package/dist/components/Toast/Toast.js

@@ -9,39 +9,33 @@ import { Action } from '../ActionList';
 import { Icon } from '../Icon';
 import { P } from '../P';
 export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
-const StyledView = styled.View(({ theme: { core }, variant }) => css `
+const StyledView = styled.View(({ theme, variant }) => css `
     background-color: ${variant === 'default'
-    ? core.color.brand.forest
-    : core.color.red.darkest};
+    ? theme.color.alert.success
+    : theme.color.alert.error};
     overflow: hidden;
-    padding-top: ${numToPx(core.space[2])};
-    padding-bottom: ${numToPx(core.space[3])};
-    padding-right: ${numToPx(core.space[2])};
-    padding-left: ${numToPx(core.space[4])};
-    border-radius: ${numToPx(core.radius.max)};
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[200])};
+    padding-right: ${numToPx(theme.space[200])};
+    padding-left: ${numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
     flex-direction: row;
   `);
-const StyledP = styled(P)(({ theme: { semantic } }) => css `
-    color: ${semantic.inverted.message.base};
+const StyledP = styled(P)(({ theme }) => css `
+    color: ${theme.color.surface.bright};
   `);
-const StyledThinBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+const StyledBorder = styled(Animated.View)(({ theme, variant }) => css `
     background-color: ${variant === 'default'
-    ? core.color.brand.energised
-    : core.color.red.light};
-    height: 1px;
+    ? theme.color.alert.successTint
+    : theme.color.alert.errorTint};
+    height: 4px;
   `);
-const StyledThickBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
-    background-color: ${variant === 'default'
-    ? core.color.brand.leaf
-    : core.color.red.base};
-    height: 3px;
-  `);
-const StyledCloseIcon = styled(TouchableOpacity)(({ theme: { core, semantic } }) => css `
-    background-color: ${semantic.inverted.surface};
-    border-radius: ${numToPx(core.radius.max)};
-    width: ${numToPx(core.space[7])};
-    height: ${numToPx(core.space[7])};
-    padding: ${numToPx(core.space[2])};
+const StyledCloseIcon = styled(TouchableOpacity)(({ theme }) => css `
+    background-color: ${theme.color.surface.onSurface};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    width: ${numToPx(theme.space[700])};
+    height: ${numToPx(theme.space[700])};
+    padding: ${numToPx(theme.space[200])};
     align-items: center;
     justify-content: center;
   `);
@@ -88,7 +82,7 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
                     textRef.current?.measureInWindow((_x, _y, _width, height) => {
                         setTextHeight(height);
                     });
-                }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
+                }, children: message }), _jsx(View, { style: { position: 'absolute', bottom: 0 }, children: _jsx(StyledBorder, { variant: variant, style: style }) })] }));
 };
 const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
     const toastPadding = 20;
@@ -96,9 +90,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
     const actionRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const [actionHeight, setActionHeight] = useState(0);
-    const toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
-        ? textHeight
-        : textHeight + actionHeight;
+    const toastHeight = textHeight + actionHeight;
     const handleAction = () => {
         if (action && actionTitle) {
             action();
@@ -118,7 +110,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                             textRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
                             actionRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);
                             });

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

@@ -1 +1 @@
-export { showToast, ToastsContainer } from './Toast';
+export { ToastsContainer, showToast } from './Toast';

package/dist/components/Toast/index.js

@@ -1 +1 @@
-export { showToast, ToastsContainer } from './Toast';
+export { ToastsContainer, showToast } from './Toast';

package/dist/components/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from 'react';
+import { ReactNode } from 'react';
 import { TouchableOpacityProps, View } from 'react-native';
 export type HorizontalPosition = 'left' | 'right';
 type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
@@ -7,7 +7,7 @@ type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
     inline?: boolean;
     hint?: ReactNode;
     labelPosition?: HorizontalPosition;
-    ref?: RefObject<View>;
+    ref?: React.RefObject<View>;
 };
 export declare const Toggle: ({ activeOpacity, checked, label, hint, inline, labelPosition, testID, ref, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Toggle/Toggle.js

@@ -4,14 +4,14 @@ import { Animated, View } from 'react-native';
 import { useTheme } from '../../styled.native';
 import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
-import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWrapper, } from './styles';
+import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
 const Input = ({ checked, labelPosition, testID, ...rest }) => {
-    const { core } = useTheme();
-    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    const theme = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     useEffect(() => {
         Animated.timing(leftVal, {
-            toValue: checked ? core.space[6] : core.space[1],
-            duration: 150, // i.e. theme.core.transition.fast
+            toValue: checked ? theme.space[600] : theme.space[100],
+            duration: theme.transition.duration.fast,
             useNativeDriver: true,
         }).start();
     }, [checked]);