@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/Input/styled.js

@@ -0,0 +1,96 @@
+"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.StyledIcon = exports.StyledInput = exports.StyledInputWrapper = exports.ICON_SIZE = void 0;
+const styled_native_1 = __importStar(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const utils_1 = require("../../utils");
+const Icon_1 = require("../Icon");
+exports.ICON_SIZE = 20;
+exports.StyledInputWrapper = styled_native_1.default.View(({ theme, focused, hasError, isSelected }) => {
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    else if (focused) {
+        borderColor = theme.color.outline.outer;
+    }
+    return (0, styled_native_1.css) `
+    align-self: stretch;
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-style: solid;
+    border-color: ${borderColor};
+    flex-direction: row;
+    ${(0, utils_1.getShadowCSS)({ theme })}
+  `;
+});
+exports.StyledInput = styled_native_1.default.TextInput(({ theme, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css) `
+    position: relative;
+    flex: 1;
+    padding: ${(0, theme_1.numToPx)(theme.space[400])};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.lg)};
+    color: ${theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${(0, theme_1.numToPx)(fontSize)};
+
+    /* NOTE: height being queried with design, subject to change */
+    min-height: ${(0, theme_1.numToPx)(theme.space[1600])};
+
+    ${iconLeft ? `padding-left: ${(0, theme_1.numToPx)(theme.space[800])};` : ''}
+    ${iconRight || hasRightSlot
+        ? `padding-right: ${(0, theme_1.numToPx)(theme.space[800])};`
+        : ''}
+  `;
+});
+exports.StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, side }) => {
+    return (0, styled_native_1.css) `
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    margin-top: -${exports.ICON_SIZE / 2}px;
+    ${side === 'left' ? `left: ${(0, theme_1.numToPx)(theme.space[200])}` : ''};
+    ${side === 'right' ? `right: ${(0, theme_1.numToPx)(theme.space[200])}` : ''};
+  `;
+});

package/dist/components/LabelText/LabelText.d.ts

@@ -42,6 +42,7 @@ declare const LabelText: (props: Omit<{
                 "30": string;
                 "40": string;
                 "50": string;
+                "55": string;
                 "56": string;
                 "60": string;
                 "70": string;
@@ -84,6 +85,7 @@ declare const LabelText: (props: Omit<{
                 onBrandVariant: string;
                 aiGradientFrom: string;
                 aiGradientTo: string;
+                accessible: string;
                 fixed: {
                     brand: string;
                     dark: string;
@@ -92,6 +94,7 @@ declare const LabelText: (props: Omit<{
                     bright: string;
                     onBrand: string;
                     onBrandVariant: string;
+                    accessible: string;
                 };
             };
             outline: {

package/dist/components/LabelText/LabelText.js

@@ -1,19 +1,55 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-const StyledLabelText = styled.Text(({ theme, smallAndUp }) => {
+"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.LabelText = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const StyledLabelText = styled_native_1.default.Text(({ theme, smallAndUp }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
-    return css `
+    return (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(lineHeight)};
+    line-height: ${(0, element_core_1.numToPx)(lineHeight)};
     color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
   `;
 });
-const LabelText = styledComponentWithBreakpoints(StyledLabelText);
-export { LabelText };
+const LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
+exports.LabelText = LabelText;

package/dist/components/LabelText/index.js

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

package/dist/components/LargeValueReference/LargeValueReference.d.ts

@@ -0,0 +1,11 @@
+import { ViewProps } from 'react-native';
+export type BackgroundTheme = 'surface' | 'bright';
+export interface LargeValueReferenceProps extends ViewProps {
+    value: number | string;
+    autoSpacing?: boolean;
+    autoSpacingInterval?: number;
+    label?: string;
+    onCopy?: (val: string) => void;
+    theme?: BackgroundTheme;
+}
+export declare const LargeValueReference: ({ value, autoSpacing, autoSpacingInterval, label, onCopy, theme, ...rest }: LargeValueReferenceProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/LargeValueReference/LargeValueReference.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LargeValueReference = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styled_native_1 = require("../../styled.native");
+const Icon_1 = require("../Icon");
+const LabelText_1 = require("../LabelText");
+const Stack_1 = require("../Stack");
+const styles_1 = require("./styles");
+const LargeValueReference = (_a) => {
+    var { value, autoSpacing = false, autoSpacingInterval = 5, label, onCopy, theme = 'bright' } = _a, rest = __rest(_a, ["value", "autoSpacing", "autoSpacingInterval", "label", "onCopy", "theme"]);
+    if (value === undefined || value === null || String(value).length === 0)
+        return null;
+    const elementTheme = (0, styled_native_1.useTheme)();
+    // Normalizes JS's default scientific notation
+    const valueAsString = (0, react_1.useMemo)(() => typeof value === 'number'
+        ? value.toLocaleString('fullwide', {
+            useGrouping: false,
+        })
+        : value.toString(), [value]);
+    const splitValue = (0, react_1.useMemo)(() => {
+        if (autoSpacing && valueAsString.length > autoSpacingInterval) {
+            const matches = valueAsString.match(new RegExp(`.{1,${autoSpacingInterval}}`, 'g'));
+            return matches || [];
+        }
+        return [];
+    }, [autoSpacing, valueAsString, autoSpacingInterval]);
+    const handlePress = (0, react_1.useCallback)(() => {
+        // Call onCopy callback
+        if (typeof onCopy === 'function') {
+            onCopy(valueAsString);
+        }
+    }, [valueAsString, onCopy]);
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 2, children: [label ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : null, (0, jsx_runtime_1.jsx)(styles_1.StyledLargeValueReferenceWrapper, Object.assign({ backgroundTheme: theme }, rest, { children: (0, jsx_runtime_1.jsxs)(styles_1.LargeValueContainer, { children: [autoSpacing && splitValue.length > 0 ? (splitValue.map((val, index) => ((0, jsx_runtime_1.jsx)(styles_1.LargeValue, { children: val }, index)))) : ((0, jsx_runtime_1.jsx)(styles_1.LargeValue, { children: valueAsString })), onCopy ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, hitSlop: 10, testID: "large-value-reference-copy-button", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "copy", size: 20, color: elementTheme.color.surface.onSurface, testID: "large-value-reference-copy-icon" }) })) : null] }) }))] }));
+};
+exports.LargeValueReference = LargeValueReference;

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

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

package/dist/components/LargeValueReference/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("./LargeValueReference"), exports);