@ovotech/element-native 5.4.0 → 5.4.1

package/dist/components/HintText/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+import { SvgProps } from 'react-native-svg';
+import { IconNameExtended } from '../../providers';
+export type IconBase = React.FunctionComponent<SvgProps>;
+export type IconProps = SvgProps & {
+    name: IconNameExtended;
+    color?: string;
+    size: string | number;
+};
+export declare const Icon: ({ name, size, color, testID, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useIcons } from '../../providers';
+import { ThemeContext } from '../../styled.native';
+export const Icon = ({ name, size, color, testID, ...rest }) => {
+    const icons = useIcons();
+    const { semantic } = useContext(ThemeContext);
+    // @ts-ignore to support additional icons.
+    const Svg = name && icons[name];
+    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, 
+        // @ts-ignore this is valid.
+        color: color ?? semantic.message.base, width: size, height: size, ...rest })) : null;
+};

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

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

package/dist/components/Icon/index.js

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

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

@@ -0,0 +1,13 @@
+import { ReactNode, Ref } from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+import { IconNameExtended } from '../../providers/types';
+export type InputProps = TextInputProps & {
+    invalid?: boolean;
+    stretch?: boolean;
+    iconLeft?: IconNameExtended;
+    iconRight?: IconNameExtended;
+    rightSlot?: ReactNode;
+    ref?: Ref<TextInput | null>;
+};
+declare const Input: ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/components/Input/Input.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+const StyledIcon = styled(Icon)(({ theme: { core }, side, focused }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    ${side === 'left' ? `left: ${numToPx(core.space[2])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(core.space[2])}` : ''};
+  `;
+});
+const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
+    const [focused, setFocused] = useState(false);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, 
+                // @ts-ignore
+                ref: ref, onFocus: (event) => {
+                    setFocused(true);
+                    if (onFocus) {
+                        onFocus(event);
+                    }
+                }, onBlur: (event) => {
+                    setFocused(false);
+                    if (onBlur) {
+                        onBlur(event);
+                    }
+                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+};
+const InputWrapper = styled.View(({ theme: { core, semantic }, focused }) => css `
+    align-self: stretch;
+    border-radius: ${numToPx(core.radius.small)};
+    border-width: 0;
+    border-style: solid;
+    border-color: ${semantic.border.functional};
+    flex-direction: row;
+
+    ${focused
+    ? `
+      border-width: ${numToPx(core.borderWidth.small)};
+      border-color: ${semantic.focus.outline};
+      padding: 2px;
+      margin: -4px;`
+    : null}
+  `);
+const StyledInput = styled.TextInput(({ theme: { core, semantic }, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot, }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    const errorStyles = invalid
+        ? `
+        border-color: ${semantic.message.error};
+      `
+        : '';
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+      height: ${numToPx(core.space[11])};
+      line-height: 18px; /* Corrects for responsive line height in fixed height input */
+      border: ${numToPx(core.borderWidth.small)} solid
+        ${semantic.border.functional};
+      border-radius: ${numToPx(core.radius.small)};
+      padding: 0 ${numToPx(core.space[2])};
+      flex: 1;
+
+      ${iconLeft ? `padding-left: ${numToPx(core.space[8])};` : ''}
+      ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(core.space[8])};`
+        : ''}
+
+          ${errorStyles}
+    `;
+});
+export { Input };

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, Ref } from 'react';
+import { TextProps } from 'react-native';
+type LabelProps = PropsWithChildren<TextProps & {
+    inverted?: boolean;
+    ref?: Ref<Text>;
+}>;
+export declare const Label: ({ ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Label/Label.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledLabel = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.label.fontFamily};
+    font-size: ${numToPx(component.label.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.label.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+  `);
+export const Label = ({ ref, ...props }) => (_jsx(StyledLabel, { ...props, ref: ref }));

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

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

package/dist/components/Label/index.js

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