@ovotech/element-native 2.2.0-canary-668a0ee-91 → 2.2.0

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

@@ -1,11 +1,230 @@
 import { ReactNode } from 'react';
 import { FullWidthOptions } from '../../hooks';
-declare type TabsProps = {
-    defaultSelected?: number;
-    inline?: boolean;
+export declare const Tabs: import("styled-components").StyledComponent<({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: {
+    defaultSelected?: number | undefined;
+    inline?: boolean | undefined;
     children: ReactNode;
-    onSelected?: (activeTab: number) => void;
-    fullWidth?: FullWidthOptions;
-};
-export declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: TabsProps) => JSX.Element;
-export {};
+    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>;

package/dist/components/Tabs/Tabs.js

@@ -50,22 +50,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(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");
-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) {
+exports.Tabs = (0, styled_native_1.default)(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)(); });
@@ -78,21 +71,25 @@ var Tabs = function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    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;
+    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);
+});
 var templateObject_1;