@ovotech/element-native 4.4.9 → 4.5.0

package/dist/components/Toast/index.js

@@ -1,6 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastsContainer = exports.showToast = void 0;
-var Toast_1 = require("./Toast");
-Object.defineProperty(exports, "showToast", { enumerable: true, get: function () { return Toast_1.showToast; } });
-Object.defineProperty(exports, "ToastsContainer", { enumerable: true, get: function () { return Toast_1.ToastsContainer; } });
+export { showToast, ToastsContainer } from './Toast';

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

@@ -1,10 +1,13 @@
-import { ReactNode } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import { ReactNode, RefObject } from 'react';
+import { TouchableOpacityProps, View } from 'react-native';
 export type HorizontalPosition = 'left' | 'right';
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+type ToggleProps = Omit<TouchableOpacityProps, 'children'> & {
     label?: string | ReactNode;
-    checked?: boolean | undefined;
-    inline?: boolean | undefined;
+    checked?: boolean;
+    inline?: boolean;
     hint?: ReactNode;
-    labelPosition?: HorizontalPosition | undefined;
-} & import("react").RefAttributes<TouchableOpacity>>;
+    labelPosition?: HorizontalPosition;
+    ref?: 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

@@ -1,56 +1,25 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var native_1 = require("styled-components/native");
-var HintText_1 = require("../HintText/HintText");
-var LabelText_1 = require("../LabelText");
-var styles_1 = require("./styles");
-var Input = function (_a) {
-    var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
-    var core = (0, react_1.useContext)(native_1.ThemeContext).core;
-    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? core.space[6] : core.space[1])).current;
-    (0, react_1.useEffect)(function () {
-        react_native_1.Animated.timing(leftVal, {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+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';
+const Input = ({ checked, labelPosition, testID, ...rest }) => {
+    const { core } = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    useEffect(() => {
+        Animated.timing(leftVal, {
             toValue: checked ? core.space[6] : core.space[1],
             duration: 150, // i.e. theme.core.transition.fast
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, __assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: {
+    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
                     transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+                }, checked: checked }) }) }));
+};
+export const Toggle = ({ activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, ...rest }) => {
+    const hasLabel = label !== undefined;
+    return (_jsxs(StyledWrapper, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline, ...rest, children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] }));
 };
-exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
-    var 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _b = _a.activeOpacity, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
-    var hasLabel = label !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
-});

package/dist/components/Toggle/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-var Toggle_1 = require("./Toggle");
-Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });
+export { Toggle } from './Toggle';

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

@@ -217,9 +217,9 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -233,22 +233,22 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             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;
+            "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;
@@ -304,22 +304,22 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {
@@ -565,9 +565,9 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
         };
     };
 }, {
-    hasLabel?: boolean | undefined;
-    labelPosition?: HorizontalPosition | undefined;
-    inline?: boolean | undefined;
+    hasLabel?: boolean;
+    labelPosition?: HorizontalPosition;
+    inline?: boolean;
 }, never>;
 export declare const StyledToggleInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
@@ -786,9 +786,9 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -802,22 +802,22 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             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;
+            "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;
@@ -873,22 +873,22 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {
@@ -1134,7 +1134,7 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
         };
     };
 }, {
-    labelPosition?: HorizontalPosition | undefined;
+    labelPosition?: HorizontalPosition;
 }, never>;
 export declare const StyledToggleInput: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
@@ -1353,9 +1353,9 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -1369,22 +1369,22 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             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;
+            "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;
@@ -1440,22 +1440,22 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {
@@ -1701,7 +1701,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
         };
     };
 }, {
-    checked?: boolean | undefined;
+    checked?: boolean;
 }, never>;
 export declare const StyledToggleDot: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof import("react-native").View>, {
     core: {
@@ -1920,9 +1920,9 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -1936,22 +1936,22 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             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;
+            "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;
@@ -2007,22 +2007,22 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {
@@ -2268,5 +2268,5 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
         };
     };
 }, {
-    checked?: boolean | undefined;
+    checked?: boolean;
 }, never>;

package/dist/components/Toggle/styles.js

@@ -1,29 +1,37 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledToggleDot = exports.StyledToggleInput = exports.StyledToggleInputWrapper = exports.StyledWrapper = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var react_native_1 = require("react-native");
-var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
-    var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
-});
-exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n    height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n    ").concat(labelPosition
+import { numToPx } from '@ovotech/element-core';
+import { Animated } from 'react-native';
+import styled from '../../styled.native';
+export const StyledWrapper = styled.TouchableOpacity(({ theme: { core }, hasLabel, inline, labelPosition }) => `
+    width: ${hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11])};
+    display: flex;
+    flex-direction: row${labelPosition === 'left' ? '' : '-reverse'};
+    justify-content: space-between;
+    position: relative;
+  `);
+export const StyledToggleInputWrapper = styled.View(({ theme: { core }, labelPosition }) => {
+    return `
+    width: ${numToPx(core.space[11])};
+    height: ${numToPx(core.space[6])};
+    ${labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : null, "\n    ");
-});
-exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n      background: ").concat(checked ? semantic.focus.outline : semantic.message.secondary, ";\n    ");
+        : ''}
+    `;
 });
-exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n  height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.lighter, ";\n");
+export const StyledToggleInput = styled.View(({ theme: { core, semantic }, checked }) => {
+    return `
+      width: ${numToPx(core.space[11])};
+      height: ${numToPx(core.space[6])};
+      justify-content: center;
+      border-radius: ${numToPx(core.radius.large)};
+      background: ${checked ? semantic.focus.outline : semantic.message.secondary};
+    `;
 });
+export const StyledToggleDot = styled(Animated.View)(({ theme: { core }, checked }) => `
+  position: absolute;
+  width: ${numToPx(core.space[4])};
+  height: ${numToPx(core.space[4])};
+  border-radius: ${numToPx(core.space[4])};
+  background-color: ${checked ? core.color.brand.white : core.color.neutral.lighter};
+`);