@ovotech/element-native 2.2.0 → 3.0.0-canary-edaf96f-93

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

@@ -1,222 +1,11 @@
-export declare const TabList: import("styled-components").StyledComponent<({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }: any) => JSX.Element, import("../../theme/theme").Theme & {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"outline" | "surface", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
-        };
-        success: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        warning: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        error: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        info: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        electricity: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        gas: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-    };
-    component: {
-        heading1: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        body: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        small: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        label: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-        };
-    };
-}, {}, never>;
+/// <reference types="react" />
+import { ViewProps } from 'react-native';
+declare type TabListProps = ViewProps & {
+    fullWidth?: 'always' | 'never' | 'small';
+    setActiveTab?: (i: number) => void;
+    activeTab?: number;
+    tabRefs?: React.RefObject<any>[];
+    inline?: boolean;
+};
+export declare const TabList: ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }: TabListProps) => JSX.Element;
+export {};

package/dist/components/Tabs/TabList.js

@@ -50,25 +50,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
-exports.TabList = (0, styled_native_1.default)(function (_a) {
-    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
-    return (react_1.default.createElement(react_native_1.View, __assign({ accessibilityRole: "tablist" }, rest), react_1.Children.map(children, function (child, i) {
-        return (0, react_1.cloneElement)(child, {
-            onPress: (0, utils_1.callAll)(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
-            active: activeTab === i,
-            fullWidth: fullWidth,
-            ref: tabRefs[i],
-            first: i === 0,
-            last: react_1.Children.count(children) - 1 === i,
-            inline: inline,
-        });
-    })));
-})(function (_a) {
-    var card = _a.theme.card;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), card.borderWidth);
+var StyledTabList = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), core.borderWidth.small);
 });
+var TabList = function (_a) {
+    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
+    return ((0, jsx_runtime_1.jsx)(StyledTabList, __assign({ accessibilityRole: "tablist" }, rest, { children: react_1.Children.map(children, function (child, i) {
+            return child
+                ? (0, react_1.cloneElement)(child, {
+                    onPress: (0, utils_1.callAll)(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
+                    active: activeTab === i,
+                    fullWidth: fullWidth,
+                    ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
+                    first: i === 0,
+                    last: react_1.Children.count(children) - 1 === i,
+                    inline: inline,
+                })
+                : null;
+        }) })));
+};
+exports.TabList = TabList;
 var templateObject_1;

package/dist/components/Tabs/TabPanel.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +14,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -21,21 +48,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabPanel = void 0;
-var react_1 = __importDefault(require("react"));
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importDefault(require("../../styled.native"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledView = styled_native_1.default.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp;
-    return "\n    padding: ".concat(card.padding[smallAndUp ? 1 : 0], ";\n    border-top-width: ").concat(card.borderWidth, ";\n    border-style: solid;\n    border-color: ").concat(card.borderColor, ";\n    z-index: -1;\n  ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), core.space[4], core.borderWidth.small, semantic.border.differentiated);
 });
 var TabPanel = function (_a) {
     var rest = __rest(_a, []);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return react_1.default.createElement(StyledView, __assign({}, breakpoints, rest));
+    return (0, jsx_runtime_1.jsx)(StyledView, __assign({}, rest));
 };
 exports.TabPanel = TabPanel;
+var templateObject_1;

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

@@ -1,230 +1,11 @@
 import { ReactNode } from 'react';
 import { FullWidthOptions } from '../../hooks';
-export declare const Tabs: import("styled-components").StyledComponent<({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: {
-    defaultSelected?: number | undefined;
-    inline?: boolean | undefined;
+declare type TabsProps = {
+    defaultSelected?: number;
+    inline?: boolean;
     children: ReactNode;
-    onSelected?: Function | undefined;
-    fullWidth?: FullWidthOptions | undefined;
-}) => JSX.Element, import("../../theme/theme").Theme & {
-    core: {
-        radius: Record<"small" | "medium" | "large" | "max", string>;
-        borderWidth: Record<"small" | "medium" | "large", string>;
-        breakpoint: Record<"small" | "medium" | "large", string | number>;
-        mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
-        transition: Record<"medium" | "slow" | "fast", string>;
-        opacity: Record<"transparent" | "translucent" | "solid", string | number>;
-        color: Record<"sand" | "red" | "orange" | "yellow" | "lime" | "green" | "teal" | "blue" | "purple", {
-            lightest: string;
-            lighter: string;
-            light: string;
-            base: string;
-            dark: string;
-            darker: string;
-            darkest: string;
-        }> & {
-            brand: Record<string, string>;
-        };
-        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
-            native: string;
-            web: string;
-        }>;
-        fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-            small: string | number;
-            large: string | number;
-        }>;
-    };
-    semantic: {
-        surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
-        border: Record<"graphic" | "differentiated" | "functional", string>;
-        focus: Record<"outline" | "surface", string>;
-        inverted: Record<"surface" | "border", string> & {
-            message: Record<"base" | "link" | "secondary" | "branded", string>;
-        };
-        success: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        warning: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        error: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        info: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        electricity: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-        gas: {
-            border: string;
-            surface: string;
-            message: {
-                base: string;
-                secondary: string;
-            };
-        };
-    };
-    component: {
-        heading1: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading2: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading3: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        heading4: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        lead: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        body: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        small: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        label: {
-            fontFamily: string;
-            fontWeight: string | number;
-            fontSize: {
-                small: string | number;
-                large: string | number;
-            };
-            lineHeight: {
-                small: string | number;
-                large: string | number;
-            };
-        };
-        cta: {
-            primary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            secondary: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-            destructive: {
-                message: string;
-                surface: string;
-                messageHover: string;
-                surfaceHover: string;
-                messageFocused: string;
-                surfaceFocused: string;
-                outlineFocused: string;
-                backgroundFocused: string;
-            };
-        };
-    };
-}, {}, never>;
+    onSelected?: (activeTab: number) => void;
+    fullWidth?: FullWidthOptions;
+};
+export declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: TabsProps) => JSX.Element;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -50,15 +50,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Card_1 = require("../Card");
 var TabList_1 = require("./TabList");
 var TabPanel_1 = require("./TabPanel");
-exports.Tabs = (0, styled_native_1.default)(function (_a) {
+var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
+});
+var Tabs = function (_a) {
     var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
     var _c = (0, react_1.useState)(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore there is no way to properly type it
     var tabList = (0, utils_1.filterChildrenByType)(children, TabList_1.TabList);
     var tabPanels = (0, utils_1.filterChildrenByType)(children, TabPanel_1.TabPanel);
     var tabRefs = tabPanels.map(function () { return (0, react_1.createRef)(); });
@@ -71,25 +78,21 @@ exports.Tabs = (0, styled_native_1.default)(function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (react_1.default.createElement(Card_1.Card, __assign({}, rest),
-        tabList.map(function (child) {
-            return (0, react_1.cloneElement)(child, {
-                setActiveTab: setActiveTab,
-                activeTab: activeTab,
-                tabRefs: tabRefs,
-                fullWidth: fullWidth,
-                inline: inline,
-            });
-        }),
-        tabPanels
-            .filter(function (_, index) { return index === activeTab; })
-            .map(function (child, index) {
-            return (0, react_1.cloneElement)(child, {
-                hidden: activeTab !== index,
-            });
-        })));
-})(function (_a) {
-    var _b = _a.theme, card = _b.card, tabs = _b.tabs, inline = _a.inline;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "], ["\n      padding: 0;\n      border: ", " solid\n        ", ";\n    "])), card.borderWidth, inline ? card.borderColor : tabs.tab.borderColor);
-});
+    return ((0, jsx_runtime_1.jsxs)(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
+                return (0, react_1.cloneElement)(child, {
+                    setActiveTab: setActiveTab,
+                    activeTab: activeTab,
+                    tabRefs: tabRefs,
+                    fullWidth: fullWidth,
+                    inline: inline,
+                });
+            }), tabPanels
+                .filter(function (_, index) { return index === activeTab; })
+                .map(function (child, index) {
+                return (0, react_1.cloneElement)(child, {
+                    hidden: activeTab !== index,
+                });
+            })] })));
+};
+exports.Tabs = Tabs;
 var templateObject_1;