@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/EmptyState/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContainer = exports.StyledCard = void 0;
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const Card_1 = require("../Card");
+exports.StyledCard = (0, styled_native_1.default)(Card_1.Card)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space[100],
+}));
+exports.TextContainer = styled_native_1.default.View(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    gap: theme.space[50],
+    paddingLeft: theme.space[400],
+    paddingRight: theme.space[400],
+    alignItems: 'center',
+}));

package/dist/components/EmptyState/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { PictogramNameExtended } from '../../providers';
+import { RemoteImageProps } from '../RemoteImage';
+export type BackgroundType = 'filled' | 'transparent';
+type WithPictogram = {
+    illustration?: never;
+    pictogramName: PictogramNameExtended;
+};
+type WithIllustration = {
+    illustration: RemoteImageProps;
+    pictogramName?: never;
+};
+export type EmptyStateProps = (WithPictogram | WithIllustration) & {
+    backgroundStyle?: BackgroundType;
+    heading: string;
+    children?: ReactNode;
+};
+export {};

package/dist/components/EmptyState/types.js

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

package/dist/components/ErrorText/ErrorText.d.ts

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

package/dist/components/Field/Field.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { TextInput } from 'react-native';
+import { InputProps } from '../Input/Input';
 export type FieldProps = {
     affixWidth?: number;
     children: ReactNode;
@@ -10,5 +11,5 @@ export type FieldProps = {
     hint?: ReactNode;
     optional?: boolean;
     ref?: React.Ref<TextInput>;
-};
-export declare const Field: ({ children, label, optional, hint, error, fullWidth, characters, affixWidth, ref, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+} & Pick<InputProps, 'selected'>;
+export declare const Field: ({ children, label, optional, hint, error, fullWidth, characters, affixWidth, ref, selected, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Field/Field.js

@@ -23,7 +23,7 @@ const LabelText_1 = require("../LabelText");
 const Stack_1 = require("../Stack");
 const Stretch_1 = require("../Stretch");
 const Field = (_a) => {
-    var { children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref"]);
+    var { children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, selected } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref", "selected"]);
     const hasError = !!error;
     const inputRef = (0, react_1.createRef)();
     const labelText = optional ? `${label} (optional)` : label;
@@ -42,7 +42,8 @@ const Field = (_a) => {
                             }
                         }
                     }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }) }), (0, jsx_runtime_1.jsx)(Stretch_1.Stretch, { defaultWidth: `${Math.ceil(characters * 0.8 * 16) + affixWidth}px`, fullWidth: fullWidth, children: react_1.Children.map(children, child => (0, react_1.isValidElement)(child)
-                        ? (0, react_1.cloneElement)(child, Object.assign({ invalid: hasError || undefined, ref: (0, utils_1.mergeRefs)(inputRef, ref), accessibilityLabel }, rest))
+                        ? (0, react_1.cloneElement)(child, Object.assign({ invalid: hasError || undefined, ref: (0, utils_1.mergeRefs)(inputRef, ref), accessibilityLabel,
+                            selected }, rest))
                         : child) })] }) }));
 };
 exports.Field = Field;

package/dist/components/Grid/Col.d.ts

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

package/dist/components/HintText/HintText.d.ts

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

package/dist/components/Input/Input.d.ts

@@ -7,7 +7,8 @@ export type InputProps = TextInputProps & {
     invalid?: boolean;
     ref?: React.Ref<TextInput | null>;
     rightSlot?: ReactNode;
+    selected?: boolean;
     stretch?: boolean;
 };
-declare const Input: ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ onFocus, onBlur, style, iconLeft, iconRight, invalid, rightSlot, ref, selected, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export { Input };

package/dist/components/Input/Input.js

@@ -1,37 +1,4 @@
 "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;
-    };
-})();
 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)
@@ -46,30 +13,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_1 = require("react");
 const hooks_1 = require("../../hooks");
-const styled_native_1 = __importStar(require("../../styled.native"));
-const Icon_1 = require("../Icon/Icon");
-const StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, side, focused }) => {
-    const focusCompensation = focused ? theme.space[50] : 0;
-    return (0, styled_native_1.css) `
-    position: absolute;
-    z-index: 1;
-    top: ${(0, element_core_1.numToPx)(theme.space[350] + focusCompensation)};
-    ${side === 'left'
-        ? `left: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
-        : ''};
-    ${side === 'right'
-        ? `right: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
-        : ''};
-  `;
-});
+const styled_native_1 = require("../../styled.native");
+const styled_1 = require("./styled");
 const Input = (_a) => {
-    var { onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot", "ref"]);
+    var { onFocus, onBlur, style, iconLeft, iconRight, invalid, rightSlot, ref, selected } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "invalid", "rightSlot", "ref", "selected"]);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsxs)(InputWrapper, { focused: focused, children: [iconLeft ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.jsx)(StyledInput, Object.assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledInputWrapper, { focused: focused, hasError: invalid, isSelected: selected, children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledIcon, { name: iconLeft, size: styled_1.ICON_SIZE, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledInput, Object.assign({}, rest, breakpoints, { hasRightSlot: !!rightSlot, iconLeft: !!iconLeft, iconRight: !!iconRight, invalid: invalid, placeholderTextColor: theme.color.surface.onSurfaceVariant, ref: ref, style: style, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -79,50 +32,6 @@ const Input = (_a) => {
                     if (onBlur) {
                         onBlur(event);
                     }
-                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(styled_1.StyledIcon, { name: iconRight, size: styled_1.ICON_SIZE, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 };
 exports.Input = Input;
-const InputWrapper = styled_native_1.default.View(({ theme, focused }) => (0, styled_native_1.css) `
-    align-self: stretch;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.md)};
-    border-width: 0;
-    border-style: solid;
-    border-color: ${theme.input.color.border};
-    flex-direction: row;
-
-    ${focused
-    ? `
-      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-      border-color: ${theme.color.outline.outer};
-      padding: 2px;
-      margin: -4px;`
-    : null}
-  `);
-const StyledInput = styled_native_1.default.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const errorStyles = invalid
-        ? `
-        border-color: ${theme.color.alert.error};
-      `
-        : '';
-    return (0, styled_native_1.css) `
-    font-family: ${theme.native.font.family.book};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${(0, element_core_1.numToPx)(fontSize)};
-    height: ${(0, element_core_1.numToPx)(theme.space[1100])};
-    line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-    flex: 1;
-
-    ${iconLeft ? `padding-left: ${(0, element_core_1.numToPx)(theme.space[800])};` : ''}
-    ${iconRight || hasRightSlot
-        ? `padding-right: ${(0, element_core_1.numToPx)(theme.space[800])};`
-        : ''}
-
-          ${errorStyles}
-  `;
-});