@ovotech/element-native 0.0.1 → 0.0.2

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IconsProvider';
+export * from './types';

package/dist/providers/index.js

@@ -0,0 +1,18 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IconsProvider"), exports);
+__exportStar(require("./types"), exports);

package/dist/providers/types.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { SvgProps } from 'react-native-svg';
+export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'euro' | 'pound' | 'new-window' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus' | 'check';
+export declare type IconsType = Record<string, FunctionComponent<SvgProps>>;

package/dist/providers/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/styled.native.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="styled-components-react-native" />
+/// <reference types="react" />
+import * as styledComponents from 'styled-components/native';
+declare const styled: styledComponents.ReactNativeStyledInterface<import("./theme/theme").Theme>, css: import("styled-components").ThemedCssFunction<import("./theme/theme").Theme>, ThemeProvider: import("styled-components").ThemeProviderComponent<import("./theme/theme").Theme, import("./theme/theme").Theme>, ThemeContext: import("react").Context<import("./theme/theme").Theme>, useTheme: () => import("./theme/theme").Theme;
+export { css, ThemeProvider, ThemeContext, useTheme };
+export default styled;

package/dist/styled.native.js

@@ -0,0 +1,33 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.ThemeContext = exports.ThemeProvider = exports.css = void 0;
+var styledComponents = __importStar(require("styled-components/native"));
+var _a = styledComponents, styled = _a.default, css = _a.css, ThemeProvider = _a.ThemeProvider, ThemeContext = _a.ThemeContext, useTheme = _a.useTheme;
+exports.css = css;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeContext = ThemeContext;
+exports.useTheme = useTheme;
+exports.default = styled;

package/dist/theme/create-theme.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from './theme';
+/**
+ * Use 3 level Partial instead of a Recursive Deep Partial, to avoid infinite nested recursion
+ * if any of the props contain recursive elements. For example logos / icons
+ */
+declare type ThreeLevelPartial<T> = {
+    [P in keyof T]?: TwoLevelPartial<T[P]>;
+};
+declare type TwoLevelPartial<T> = {
+    [P in keyof T]?: OneLevelPartial<T[P]>;
+};
+declare type OneLevelPartial<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+export declare type RequiredThemeKeys = Pick<Theme, 'borderWidths' | 'radii' | 'breakpoints' | 'shadows' | 'space' | 'fonts' | 'lineHeights' | 'fontSizes' | 'responsiveFontSizes' | 'fontWeights' | 'colors'>;
+export declare const defaultTokens: RequiredThemeKeys;
+export declare function createTheme<T, A = {}>(customTheme: ThreeLevelPartial<Theme> & T, additional?: ThreeLevelPartial<Theme> & A): Theme & T & A;
+export {};

package/dist/theme/create-theme.js

@@ -0,0 +1,433 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = exports.defaultTokens = void 0;
+var deepmerge_1 = __importDefault(require("deepmerge"));
+exports.defaultTokens = {
+    borderWidths: {
+        standard: '1px',
+        heavy: '2px',
+        heavier: '4px',
+    },
+    radii: {
+        standard: '4px',
+    },
+    shadows: {
+        standard: {
+            color: '#000',
+            offset: '1px',
+            opacity: 0.1,
+            radius: '6px',
+            elevation: 3,
+        },
+    },
+    breakpoints: { small: 480, medium: 768, large: 1208 },
+    space: {
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+    },
+    fonts: {
+        display: 'Arial',
+        body: 'Arial',
+        monospace: 'Courier',
+    },
+    lineHeights: {
+        standard: 1.5,
+    },
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px'],
+    fontWeights: {
+        normal: 400,
+        bold: 700,
+        semiBold: 600,
+    },
+    colors: {
+        primary: '#0C7494',
+        primaryAlt: '#096885',
+        primaryContrast: '#FFFFFF',
+        primaryMuted: '#F3F7F9',
+        error: '#C7153E',
+        errorAlt: '#AE0A30',
+        errorContrast: '#FFFFFF',
+        errorMuted: '#FCF3F5',
+        info: '#147D88',
+        infoAlt: '#05696C',
+        infoContrast: '#FFFFFF',
+        infoMuted: '#F2F7F8',
+        warning: '#C64A18',
+        warningAlt: '#B74E08',
+        warningContrast: '#FFFFFF',
+        warningMuted: '#FDF7F3',
+        success: '#258244',
+        successAlt: '#1E6937',
+        successContrast: '#FFFFFF',
+        successMuted: '#F4F9F6',
+        focus: '#2A71BE',
+        canvas: '#FFFFFF',
+        body: '#555C6B',
+        heading: '#2F3749',
+        border: '#2F3749',
+        canvasMuted: '#F9F9F9',
+        borderMuted: '#D9D9D9',
+    },
+    responsiveFontSizes: {
+        small: ['12px', '14px'],
+        body: ['14px', '16px'],
+        level1: ['28px', '32px'],
+        level2: ['24px', '28px'],
+        level3: ['20px', '24px'],
+        level4: ['16px', '20px'],
+    },
+};
+function createTheme(customTheme, additional) {
+    var mergeOptions = { arrayMerge: function (_, source) { return source; } };
+    var customThemeWithAdditional = (0, deepmerge_1.default)(customTheme, additional || {}, mergeOptions);
+    var theme = (0, deepmerge_1.default)(exports.defaultTokens, customThemeWithAdditional, mergeOptions);
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes;
+    return (0, deepmerge_1.default)({
+        field: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            lineHeight: lineHeights.standard,
+            dateWidth: '265px',
+            gap: space[2],
+            error: {
+                color: colors.error,
+                fontWeight: fontWeights.bold,
+            },
+            hint: {
+                fontWeight: fontWeights.normal,
+                color: colors.body,
+            },
+            label: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+            },
+            subLabel: {
+                color: colors.heading,
+                fontWeight: fontWeights.semiBold,
+            },
+            legend: {
+                marginBottom: space[1],
+            },
+            errorIndent: {
+                borderWidth: space[1],
+                borderRadius: radii.standard,
+            },
+        },
+        focusRing: {
+            color: colors.focus,
+            width: borderWidths.heavy,
+            distance: borderWidths.heavy,
+        },
+        input: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            color: colors.body,
+            lineHeight: lineHeights.standard,
+            fontWeight: fontWeights.normal,
+            height: space[12],
+            borderColor: colors.border,
+            borderWidth: borderWidths.standard,
+            background: colors.canvas,
+            padding: space[2],
+            borderRadius: radii.standard,
+            error: {
+                borderWidth: borderWidths.heavy,
+                color: colors.error,
+            },
+            icon: {
+                size: space[4],
+            },
+        },
+        card: {
+            background: colors.canvas,
+            borderWidth: borderWidths.standard,
+            borderColor: colors.borderMuted,
+            borderRadius: radii.standard,
+            shadow: shadows.standard,
+            padding: [space[4], space[8]],
+        },
+        badge: {
+            fontWeight: fontWeights.bold,
+            lineHeight: lineHeights.standard,
+            paddingVertical: space[1],
+            paddingHorizontal: space[2],
+            borderRadius: radii.standard,
+            borderWidth: borderWidths.standard,
+            fontSize: responsiveFontSizes.small,
+            variants: {
+                default: {
+                    background: colors.primaryMuted,
+                    foreground: colors.primary,
+                    borderColor: colors.primary,
+                },
+                error: {
+                    background: colors.errorMuted,
+                    foreground: colors.error,
+                    borderColor: colors.error,
+                },
+                success: {
+                    background: colors.successMuted,
+                    foreground: colors.success,
+                    borderColor: colors.success,
+                },
+                info: {
+                    background: colors.infoMuted,
+                    foreground: colors.info,
+                    borderColor: colors.info,
+                },
+                warning: {
+                    background: colors.warningMuted,
+                    foreground: colors.warning,
+                    borderColor: colors.warning,
+                },
+            },
+        },
+        cta: {
+            fontSize: responsiveFontSizes.body,
+            fontWeight: fontWeights.bold,
+            font: fonts.display,
+            lineHeight: lineHeights.standard,
+            paddingVertical: space[2],
+            paddingHorizontal: space[4],
+            borderRadius: radii.standard,
+            borderWidth: borderWidths.standard,
+            iconGap: space[1],
+            minHeight: space[12],
+            variants: {
+                primary: {
+                    background: colors.primary,
+                    foreground: colors.primaryContrast,
+                    border: colors.primary,
+                },
+                secondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
+                destructive: {
+                    background: colors.error,
+                    foreground: colors.errorContrast,
+                    border: colors.error,
+                },
+            },
+        },
+        checkbox: {
+            touchSize: space[12],
+            size: space[8],
+            checkSize: space[6],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.heavy,
+            borderColor: colors.border,
+            borderRadius: radii.standard,
+            background: colors.canvas,
+            checkColor: colors.primary,
+            errorColor: colors.error,
+        },
+        notification: {
+            borderRadius: radii.standard,
+            borderWidth: borderWidths.heavy,
+            borderColor: colors.error,
+            background: colors.errorMuted,
+            padding: [space[3], space[6]],
+            dismiss: {
+                touchSize: space[12],
+                size: space[4],
+                icon: 'cross',
+                color: colors.heading,
+            },
+            variants: {
+                error: {
+                    borderColor: colors.error,
+                    background: colors.errorMuted,
+                },
+                success: {
+                    borderColor: colors.success,
+                    background: colors.successMuted,
+                },
+                info: {
+                    borderColor: colors.info,
+                    background: colors.infoMuted,
+                },
+                warning: {
+                    borderColor: colors.warning,
+                    background: colors.warningMuted,
+                },
+            },
+        },
+        text: {
+            fontFamily: fonts.body,
+            lineHeight: lineHeights.standard,
+            fontWeight: fontWeights.normal,
+            color: colors.body,
+            p: {
+                fontSize: responsiveFontSizes.body,
+                marginTop: [space[2], space[3]],
+                marginBottom: [space[2], space[3]],
+            },
+            small: {
+                fontSize: responsiveFontSizes.small,
+            },
+            strong: {
+                fontWeight: fontWeights.bold,
+            },
+        },
+        list: {
+            marginTop: [space[2], space[3]],
+            marginBottom: [space[2], space[3]],
+            marginLeft: space[6],
+            listItem: {
+                fontSize: responsiveFontSizes.body,
+                marginVertical: 2,
+                bulletGap: space[2],
+                bulletWidth: space[4],
+            },
+            descriptionTerm: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[1], space[1]],
+            },
+        },
+        textLink: {
+            color: colors.primary,
+            fontWeight: fontWeights.normal,
+        },
+        heading: {
+            fontFamily: fonts.display,
+            lineHeight: lineHeights.standard,
+            fontWeight: fontWeights.bold,
+            color: colors.heading,
+            heading1: {
+                fontSize: responsiveFontSizes.level1,
+                marginTop: [space[8], space[12]],
+                marginBottom: [space[2], space[3]],
+            },
+            heading2: {
+                fontSize: responsiveFontSizes.level2,
+                marginTop: [space[6], space[8]],
+                marginBottom: [space[2], space[3]],
+            },
+            heading3: {
+                fontSize: responsiveFontSizes.level3,
+                marginTop: [space[4], space[6]],
+                marginBottom: [space[2], space[3]],
+            },
+            heading4: {
+                fontSize: responsiveFontSizes.level4,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[2], space[3]],
+            },
+        },
+        shadows: shadows,
+        radii: radii,
+        radio: {
+            touchSize: space[12],
+            size: space[8],
+            dotSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.heavy,
+            borderColor: colors.border,
+            background: colors.canvas,
+            dotColor: colors.primary,
+            errorColor: colors.error,
+        },
+        fontWeights: fontWeights,
+        fontSizes: fontSizes,
+        fonts: fonts,
+        responsiveFontSizes: responsiveFontSizes,
+        colors: colors,
+        borderWidths: borderWidths,
+        breakpoints: breakpoints,
+        lineHeights: lineHeights,
+        space: space,
+        grid: {
+            maxWidth: breakpoints.large + 'px',
+            gutter: [space[4], space[8]],
+        },
+        disclosure: {
+            iconGap: [space[1], space[2]],
+            panelGap: [space[2], space[3]],
+            lineIndent: {
+                borderRadius: radii.standard,
+                width: borderWidths.heavier,
+                backgroundColor: colors.borderMuted,
+            },
+        },
+        dataTable: {
+            borderWidth: borderWidths.standard,
+            borderRadius: radii.standard,
+            borderColor: colors.borderMuted,
+            tableHeader: {
+                color: colors.heading,
+                backgroundColor: colors.canvas,
+                borderWidth: borderWidths.standard,
+                borderColor: colors.border,
+                fontWeight: fontWeights.bold,
+            },
+            tableCaption: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+                paddingVertical: space[3],
+                paddingHorizontal: space[3],
+            },
+            tableCell: {
+                color: colors.body,
+                borderWidth: borderWidths.standard,
+                borderColor: colors.borderMuted,
+                paddingVertical: space[3],
+                paddingHorizontal: space[3],
+            },
+            tableRow: {
+                backgroundColor: colors.canvasMuted,
+                stripeColor: colors.canvas,
+            },
+        },
+        accordion: {
+            header: {
+                color: colors.primary,
+                paddingVertical: [space[3], space[5]],
+                iconSize: space[4],
+                iconGap: space[3],
+            },
+        },
+        tabs: {
+            tab: {
+                borderTopWidth: borderWidths.heavier,
+                fontSize: responsiveFontSizes.body,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.display,
+                lineHeight: lineHeights.standard,
+                paddingHorizontal: [space[4], space[4]],
+                paddingVertical: [space[3], space[3]],
+                active: {
+                    borderTopColor: colors.primary,
+                    foregroundColor: colors.heading,
+                    backgroundColor: colors.canvas,
+                },
+                inactive: {
+                    foregroundColor: colors.primary,
+                    backgroundColor: colors.canvasMuted,
+                },
+                hover: {
+                    foregroundColor: colors.primaryAlt,
+                },
+            },
+        },
+    }, theme, mergeOptions);
+}
+exports.createTheme = createTheme;

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+export * from './theme';
+export * from './create-theme';
+export declare const theme: import("./theme").Theme;
+export declare type Theme = typeof theme;
+export declare const calculateLineHeight: (size: string, lineHeight?: number) => string;

package/dist/theme/index.js

@@ -0,0 +1,26 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLineHeight = exports.theme = void 0;
+var utils_1 = require("../utils");
+var create_theme_1 = require("./create-theme");
+__exportStar(require("./theme"), exports);
+__exportStar(require("./create-theme"), exports);
+exports.theme = (0, create_theme_1.createTheme)({});
+var calculateLineHeight = function (size, lineHeight) {
+    return (0, utils_1.pxToNumber)(size) * (lineHeight || 1) + 'px';
+};
+exports.calculateLineHeight = calculateLineHeight;