@ovotech/element-native 3.8.0 → 3.8.1-canary-dff71b6-233

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -0,0 +1,128 @@
+"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++) {
+            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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductCarousel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Icon_1 = require("../Icon");
+var NavigationDots_1 = require("./NavigationDots");
+var anchor_point_1 = require("./anchor-point");
+function ProductCarousel(_a) {
+    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? false : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
+    var theme = (0, styled_native_1.useTheme)();
+    var mediumAndUp = (0, hooks_1.useBreakpoint)().mediumAndUp;
+    var carouselRef = (0, react_1.useRef)(null);
+    var progressValue = (0, react_native_reanimated_1.useSharedValue)(0);
+    var windowWidth = (0, react_native_1.useWindowDimensions)().width;
+    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [mediumAndUp ? null : (0, jsx_runtime_1.jsx)(SkewLine, {}), (0, jsx_runtime_1.jsxs)(SCarouselContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_carousel_1.default, { ref: carouselRef, data: data, renderItem: function (_a) {
+                            var item = _a.item, animationValue = _a.animationValue;
+                            return ((0, jsx_runtime_1.jsx)(Card, __assign({ animationValue: animationValue, height: height, width: carouselWidth }, { children: children(item) })));
+                        }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
+                            return (progressValue.value = absoluteProgress);
+                        }, panGestureHandlerProps: {
+                            activeOffsetX: [-20, 20],
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) })), (0, jsx_runtime_1.jsx)(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+}
+exports.ProductCarousel = ProductCarousel;
+var Card = function (_a) {
+    var children = _a.children, animationValue = _a.animationValue, height = _a.height, width = _a.width;
+    var WIDTH = width / 1.3;
+    var HEIGHT = height / 1.3;
+    var cardStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        var scale = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], react_native_reanimated_1.Extrapolate.CLAMP);
+        var opacity = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        var translateX = (0, react_native_reanimated_1.interpolate)(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
+        var transform = {
+            transform: [
+                { scale: scale },
+                { translateX: translateX },
+                { perspective: 200 },
+                {
+                    rotateY: "".concat((0, react_native_reanimated_1.interpolate)(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], react_native_reanimated_1.Extrapolate.CLAMP), "deg"),
+                },
+            ],
+        };
+        return __assign(__assign({}, (0, anchor_point_1.withAnchorPoint)(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT })), { opacity: opacity });
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        } }, { children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: [
+                {
+                    width: WIDTH,
+                    height: HEIGHT,
+                },
+                cardStyle,
+            ] }, { children: children })) })));
+};
+var SCarouselContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"], ["\n  align-items: center;\n  background-color: #0a9828;\n  overflow: hidden;\n  margin-top: -0.5px;\n"])));
+var SActionPressable = styled_native_1.default.Pressable(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var $top = _a.$top;
+    return ($top ? "".concat($top, "px") : '30%');
+}, function (_a) {
+    var theme = _a.theme, $next = _a.$next, mediumAndUp = _a.mediumAndUp;
+    return $next
+        ? "right: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.core.space[14]))
+        : "left: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.core.space[14]));
+});
+var SkewLine = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ width: "100%", height: 69 }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }))); };
+var templateObject_1, templateObject_2;

package/dist/components/ProductCarousel/anchor-point.d.ts

@@ -0,0 +1,10 @@
+import type { TransformsStyle } from 'react-native';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle;

package/dist/components/ProductCarousel/anchor-point.js

@@ -0,0 +1,53 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAnchorPoint = void 0;
+var isValidSize = function (size) {
+    'worklet';
+    return size && size.width > 0 && size.height > 0;
+};
+var defaultAnchorPoint = { x: 0.5, y: 0.5 };
+var withAnchorPoint = function (transform, anchorPoint, size) {
+    'worklet';
+    if (!isValidSize(size))
+        return transform;
+    var injectedTransform = transform.transform;
+    if (!injectedTransform)
+        return transform;
+    if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
+        var shiftTranslateX = [];
+        // shift before rotation
+        shiftTranslateX.push({
+            translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateX, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+        });
+    }
+    if (!Array.isArray(injectedTransform))
+        return { transform: injectedTransform };
+    if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
+        var shiftTranslateY = [];
+        // shift before rotation
+        shiftTranslateY.push({
+            translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
+        });
+        injectedTransform = __spreadArray(__spreadArray([], shiftTranslateY, true), injectedTransform, true);
+        // shift after rotation
+        injectedTransform.push({
+            translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+        });
+    }
+    return { transform: injectedTransform };
+};
+exports.withAnchorPoint = withAnchorPoint;

package/dist/components/ProductCarousel/index.d.ts

@@ -0,0 +1 @@
+export { ProductCarousel } from './ProductCarousel';

package/dist/components/ProductCarousel/index.js

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

package/dist/components/Radio/Radio.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
@@ -34,11 +35,11 @@ var HintText_1 = require("../HintText");
 var LabelText_1 = require("../LabelText");
 var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      margin-right: 10px;\n    ");
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      margin-right: 10px;\n    ");
 });
 var StyledRadioInput = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(core.space[6], ";\n      border-color: ").concat(invalid
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border: ").concat((0, element_core_1.numToPx)(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border-color: ").concat(invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
@@ -46,7 +47,7 @@ var StyledRadioInput = styled_native_1.default.View(function (_a) {
 });
 var StyledRadioInputDot = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: ").concat(core.space[3], ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      border-radius: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
@@ -54,7 +55,7 @@ var Input = function (_a) {
 };
 var StyledWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return "\n    padding-top: ".concat(core.space[3], ";\n    flex-direction: row;\n  ");
+    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n    flex-direction: row;\n  ");
 });
 var Radio = (0, react_1.forwardRef)(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+export declare const RadioCard: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
+    label: ReactNode;
+    checked?: boolean | undefined;
+    invalid?: boolean | undefined;
+    activeOpacity?: number | undefined;
+    hasInput?: boolean | undefined;
+} & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/RadioCard/RadioCard.js

@@ -0,0 +1,72 @@
+"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++) {
+            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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_components_1 = require("styled-components");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var LabelText_1 = require("../LabelText");
+var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      margin-top: ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    ");
+});
+var StyledRadioInput = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border: ").concat((0, element_core_1.numToPx)(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border-color: ").concat(invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+});
+var StyledRadioInputDot = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      border-radius: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+});
+var Input = function (_a) {
+    var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, __assign({ invalid: invalid, checked: checked, testID: testID }, { children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) })) })));
+};
+var StyledWrapper = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked, invalid = _a.invalid;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "], ["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "])), semantic.surface.elevated, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.borderWidth.medium), invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : 'transparent');
+});
+exports.RadioCard = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, __assign({ checked: checked, invalid: invalid }, { children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, hasInput ? ((0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })) : null] })) })));
+});
+var templateObject_1;

package/dist/components/RadioCard/index.d.ts

@@ -0,0 +1 @@
+export { RadioCard } from './RadioCard';

package/dist/components/RadioCard/index.js

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