@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/Cards/DisruptiveCard/DisruptiveCard.styles.d.ts

@@ -0,0 +1,580 @@
+export declare const CardDisruptive: import("styled-components").StyledComponent<({ children, displayStyle, background, onPress, onSelect, ...rest }: import("../../Card/Card").CardProps) => import("react/jsx-runtime").JSX.Element, {
+    color: {
+        neutral: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+            "80": string;
+            white: string;
+            black: string;
+        };
+        red: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+            "80": string;
+        };
+        orange: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+        };
+        yellow: {
+            "70": string;
+            "80": string;
+        };
+        green: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "55": string;
+            "56": string;
+            "60": string;
+            "70": string;
+            "80": string;
+            "90": string;
+        };
+        blue: {
+            "20": string;
+            "30": string;
+            "40": string;
+            "50": string;
+            "60": string;
+            "70": string;
+        };
+        alert: {
+            success: string;
+            successTint: string;
+            warning: string;
+            warningTint: string;
+            error: string;
+            errorTint: string;
+            info: string;
+            infoTint: string;
+            neutral: string;
+            neutralTint: string;
+            border: string;
+        };
+        input: {
+            borderDim: string;
+        };
+        brand: {
+            brand: string;
+            dark: string;
+            dim: string;
+            bold: string;
+            bright: string;
+            gradientFrom: string;
+            gradientTo: string;
+            onBrand: string;
+            onBrandVariant: string;
+            aiGradientFrom: string;
+            aiGradientTo: string;
+            accessible: string;
+            fixed: {
+                brand: string;
+                dark: string;
+                dim: string;
+                bold: string;
+                bright: string;
+                onBrand: string;
+                onBrandVariant: string;
+                accessible: string;
+            };
+        };
+        outline: {
+            outer: string;
+            inner: string;
+        };
+        surface: {
+            surface: string;
+            bright: string;
+            dim: string;
+            onSurface: string;
+            onSurfaceVariant: string;
+            border: string;
+            borderDim: string;
+            link: string;
+            electricity: string;
+            gas: string;
+            fadeFrom: string;
+            fadeTo: string;
+            fixed: {
+                onSurface: string;
+                bright: string;
+            };
+        };
+    };
+    transition: {
+        duration: {
+            fast: number;
+            medium: number;
+            slow: number;
+        };
+    };
+    unit: {
+        "0": number;
+        "25": number;
+        "50": number;
+        "100": number;
+        "200": number;
+        "300": number;
+        "350": number;
+        "400": number;
+        "450": number;
+        "500": number;
+        "550": number;
+        "600": number;
+        "700": number;
+        "800": number;
+        "900": number;
+        "1000": number;
+        "1100": number;
+        "1200": number;
+        "1300": number;
+        "1400": number;
+        "1500": number;
+        "1600": number;
+        "1800": number;
+        "2000": number;
+        "2400": number;
+        "3000": number;
+        "3500": number;
+    };
+    border: {
+        radius: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            "2xl": number;
+            "3xl": number;
+        };
+        width: {
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    breakpoint: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+    };
+    native: {
+        font: {
+            family: {
+                black: string;
+                book: string;
+                bold: string;
+            };
+        };
+    };
+    web: {
+        font: {
+            family: string;
+        };
+    };
+    font: {
+        letterSpacing: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        lineHeight: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        paragraphSpace: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        size: {
+            d1: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d2: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d3: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            d4: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "4xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "3xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            "2xl": {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xl: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            lg: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            md: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            sm: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+            xs: {
+                mediaQuery: {
+                    sm: number;
+                    lg: number;
+                };
+            };
+        };
+        weight: {
+            book: number;
+            bold: number;
+            black: number;
+        };
+    };
+    mediaQuery: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+    };
+    customMediaQuery: {
+        "xsmall-and-up": number;
+        "small-and-up": number;
+        "medium-and-up": number;
+        "large-and-up": number;
+    };
+    opacity: {
+        solid: number;
+        translucent: number;
+        transparent: number;
+    };
+    space: {
+        "0": number;
+        "25": number;
+        "50": number;
+        "100": number;
+        "150": number;
+        "200": number;
+        "250": number;
+        "300": number;
+        "350": number;
+        "400": number;
+        "450": number;
+        "500": number;
+        "550": number;
+        "600": number;
+        "700": number;
+        "800": number;
+        "900": number;
+        "1000": number;
+        "1100": number;
+        "1200": number;
+        "1300": number;
+        "1400": number;
+        "1500": number;
+        "1600": number;
+        "1800": number;
+        "2000": number;
+        "2400": number;
+        "3000": number;
+        "3500": number;
+        base: number;
+    };
+    button: {
+        color: {
+            focus: {
+                blue: string;
+                white: string;
+            };
+        };
+        surface: {
+            color: {
+                fg: string;
+                bg: string;
+                bgVariant: string;
+                bgHover: string;
+                fgInverted: string;
+                bgInverted: string;
+                bgInvertedHover: string;
+            };
+        };
+        destructive: {
+            color: {
+                fg: string;
+                bg: string;
+                bgHover: string;
+            };
+        };
+    };
+    input: {
+        color: {
+            label: string;
+            border: string;
+            borderError: string;
+            hint: string;
+            selected: string;
+            selectedTint: string;
+        };
+    };
+}, {
+    isSmall?: boolean;
+}, never>;

package/dist/components/Cards/DisruptiveCard/DisruptiveCard.styles.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardDisruptive = void 0;
+const styled_native_1 = __importDefault(require("../../../styled.native"));
+const shared_styles_1 = require("../shared.styles");
+exports.CardDisruptive = (0, styled_native_1.default)(shared_styles_1.CardWithMinHeight)({
+    justifyContent: 'flex-end',
+});

package/dist/components/Cards/DisruptiveCard/index.d.ts

@@ -0,0 +1 @@
+export * from './DisruptiveCard';

package/dist/components/Cards/DisruptiveCard/index.js

@@ -0,0 +1,17 @@
+"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("./DisruptiveCard"), exports);

package/dist/components/Cards/HeroImageCard/HeroImageCard.d.ts

@@ -0,0 +1,12 @@
+import { ImageSourcePropType } from 'react-native';
+import { TitleSegment } from '../types';
+type Props = {
+    badgeText?: string;
+    heading: TitleSegment[] | string;
+    subHeading?: string;
+    image?: ImageSourcePropType | string;
+    size?: 'default' | 'small';
+    isSquare?: boolean;
+};
+export declare const HeroImageCard: React.FC<Props>;
+export {};

package/dist/components/Cards/HeroImageCard/HeroImageCard.js

@@ -0,0 +1,65 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroImageCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const __1 = require("../..");
+const hooks_1 = require("../../../hooks");
+const styled_native_1 = require("../../../styled.native");
+const P_1 = require("../../P");
+const components_1 = require("../components");
+const shared_styles_1 = require("../shared.styles");
+const utils_1 = require("../utils");
+const HeroImageCard_styles_1 = require("./HeroImageCard.styles");
+const GradientBlock = ({ children }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const { largeAndUp } = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsxs)(HeroImageCard_styles_1.OverlayWrapper, { largeAndUp: largeAndUp, children: [(0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill, children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsxs)(react_native_svg_1.LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Stop, { offset: "0", stopColor: theme.color.brand.fixed.dark, stopOpacity: 0 }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Stop, { offset: "1", stopColor: theme.color.brand.fixed.dark, stopOpacity: 1 })] }) }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { width: "100%", height: "100%", fill: "url(#grad)" })] }), (0, jsx_runtime_1.jsx)(HeroImageCard_styles_1.OverlayContentContainer, { children: children })] }));
+};
+const HeroImageCard = ({ image, badgeText, heading, subHeading, size = 'default', isSquare = false, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const hasBadge = !!badgeText;
+    const CardContent = ((0, jsx_runtime_1.jsx)(HeroImageCard_styles_1.CardWithHeroImage, { background: image
+            ? typeof image === 'string'
+                ? { uri: image }
+                : image
+            : theme.color.brand.dim, isSmall: true, isSquare: isSquare, children: (0, jsx_runtime_1.jsx)(GradientBlock, { children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(shared_styles_1.TitleContainer, { children: (0, jsx_runtime_1.jsx)(components_1.ResponsiveHeading, { heading: heading, size: size }) }), !(0, utils_1.checkIsSmall)(size) && (0, jsx_runtime_1.jsx)(P_1.P, { inverted: true, children: subHeading })] }) }) }));
+    if (!hasBadge)
+        return CardContent;
+    return ((0, jsx_runtime_1.jsx)(components_1.ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};
+exports.HeroImageCard = HeroImageCard;