@gympass/yoga 7.88.0 → 7.88.1

package/esm/Input/Input.theme.js

@@ -0,0 +1,66 @@
+const Input = ({
+  colors,
+  fontSizes,
+  fontWeights,
+  borders,
+  radii,
+  spacing
+}) => ({
+  width: 320,
+  height: 52,
+  font: {
+    color: {
+      default: colors.text.secondary,
+      focus: colors.text.primary
+    },
+    size: fontSizes.small,
+    weight: fontWeights.regular
+  },
+  border: {
+    width: borders.small,
+    radius: radii.small,
+    color: {
+      default: colors.elements.lineAndBorders,
+      typed: colors.text.primary
+    }
+  },
+  padding: {
+    top: spacing.small,
+    right: spacing.small,
+    bottom: spacing.small,
+    left: spacing.small
+  },
+  label: {
+    color: {
+      default: colors.text.secondary,
+      focus: colors.text.primary
+    },
+    padding: {
+      right: spacing.xxxsmall,
+      left: spacing.xxxsmall
+    },
+    font: {
+      size: {
+        default: fontSizes.small,
+        typed: fontSizes.xsmall
+      },
+      weight: fontWeights.regular
+    }
+  },
+  helper: {
+    color: {
+      default: colors.text.secondary,
+      focus: colors.text.primary
+    },
+    margin: {
+      top: spacing.xxxsmall
+    },
+    font: {
+      size: fontSizes.xsmall
+    }
+  }
+});
+var Input_theme_default = Input;
+export {
+  Input_theme_default as default
+};

package/esm/Input/index.js

@@ -0,0 +1,10 @@
+import { Input, Password, Email, InputNumber, Tel, Phone } from "./web";
+Input.Password = Password;
+Input.Email = Email;
+Input.Number = InputNumber;
+Input.Tel = Tel;
+Input.Phone = Phone;
+var Input_default = Input;
+export {
+  Input_default as default
+};

package/esm/Input/index.native.js

@@ -0,0 +1,9 @@
+import { Input, Password, Email, InputNumber, Tel } from "./native";
+Input.Password = Password;
+Input.Email = Email;
+Input.Number = InputNumber;
+Input.Tel = Tel;
+var index_native_default = Input;
+export {
+  index_native_default as default
+};

package/esm/Input/native/Email.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import Input from "./Input";
+const Email = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Input,
+  __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    autoCompleteType: "email",
+    autoCapitalize: "none",
+    keyboardType: "email-address",
+    textContentType: "emailAddress"
+  })
+));
+var Email_default = Email;
+export {
+  Email_default as default
+};

package/esm/Input/native/Email.test.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ThemeProvider, Input } from "../..";
+describe("<Input.Email />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Email, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/Helper.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "styled-components";
+import { string, bool, number } from "prop-types";
+import Text from "../../Text";
+const HelperWrapper = styled.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    width: ${full ? "100%" : `${input.width}px`};
+    max-width: ${input.width}px;
+    flex-direction: row;
+    justify-content: space-between;
+
+    margin-top: ${input.helper.margin.top}px;
+  `
+);
+const Info = styled(Text.Regular)(
+  ({
+    disabled,
+    focused,
+    error,
+    theme: {
+      yoga: {
+        colors,
+        components: { input }
+      }
+    }
+  }) => `
+    flex-wrap: wrap;
+
+    color: ${input.helper.color.default};
+    font-size: ${input.helper.font.size}px;
+
+    ${disabled ? `color: ${colors.text.disabled};` : ""}
+    ${focused ? `color: ${input.helper.color.focus};` : ""}
+    ${error ? `color: ${colors.feedback.attention.dark};` : ""}
+  `
+);
+const Helper = React.forwardRef(
+  ({
+    full,
+    error,
+    helper,
+    disabled,
+    focused,
+    maxLength,
+    length,
+    hideMaxLength
+  }, ref) => /* @__PURE__ */ jsxs(HelperWrapper, { ref, full, disabled, children: [
+    (error || helper) && /* @__PURE__ */ jsx(Info, { disabled, focused, error, children: error || helper }),
+    !hideMaxLength && maxLength && /* @__PURE__ */ jsxs(Info, { disabled, focused, error, children: [
+      length,
+      "/",
+      maxLength
+    ] })
+  ] })
+);
+Helper.propTypes = {
+  disabled: bool,
+  error: string,
+  focused: bool,
+  full: bool,
+  helper: string,
+  maxLength: number,
+  length: number,
+  hideMaxLength: bool
+};
+Helper.defaultProps = {
+  disabled: void 0,
+  error: void 0,
+  focused: false,
+  full: false,
+  helper: void 0,
+  maxLength: void 0,
+  length: void 0,
+  hideMaxLength: false
+};
+var Helper_default = Helper;
+export {
+  Helper_default as default
+};

package/esm/Input/native/Input.js

@@ -0,0 +1,365 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from "react";
+import { TouchableWithoutFeedback, Animated, Easing } from "react-native";
+import {
+  func,
+  string,
+  bool,
+  number,
+  oneOfType,
+  shape,
+  arrayOf
+} from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { Close } from "@gympass/yoga-icons";
+import Helper from "./Helper";
+const ICON_SIZE = 20;
+const Wrapper = styled.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: relative;
+    width: ${full ? "100%" : `${input.width}px`};
+  `
+);
+const Field = styled.TextInput(
+  ({
+    cleanable,
+    disabled,
+    error,
+    focus,
+    full,
+    textContentType,
+    typed,
+    theme: {
+      yoga: {
+        baseFont,
+        colors,
+        components: { input }
+      }
+    }
+  }) => `
+    width: ${full ? "100%" : `${input.width}px`};
+
+    padding-top: ${input.padding.top}px;
+    padding-right: ${cleanable || textContentType === "password" ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
+    padding-bottom: ${input.padding.bottom}px;
+    padding-left: ${input.padding.left}px;
+
+    border-radius: ${input.border.radius}px;
+    border: ${input.border.width}px solid ${input.border.color.default};
+
+    color: ${input.font.color.default};
+    font-family: ${baseFont.family};
+    font-size: ${input.font.size}px;
+
+    ${focus ? `border-color: ${input.border.color.typed};` : ""}
+    ${focus || typed ? `color: ${input.font.color.focus};` : ""}
+    ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}
+
+    ${disabled ? `
+          border-color: ${colors.elements.lineAndBorders};
+          color: ${colors.text.disabled};
+        ` : ""}
+  `
+);
+const LabelWrapper = styled(Animated.View)(
+  ({
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: absolute;
+    left: ${input.padding.left}px;
+
+    transform: translateY(-${input.padding.top / 2}px);
+
+    ${focus || typed ? `left: ${input.padding.left - 2}px;` : ""}
+  `
+);
+const Label = styled(Animated.Text)(
+  ({
+    disabled,
+    error,
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        colors,
+        baseFont,
+        components: { input }
+      }
+    }
+  }) => `
+    background-color: ${colors.white};
+
+    font-family: ${baseFont.family};
+    color: ${input.label.color.default};
+
+    ${focus ? `
+          color: ${input.label.color.focus};
+        ` : ""}
+
+    ${focus || typed ? `
+        padding-right: ${input.label.padding.right}px;
+        padding-left: ${input.label.padding.left}px;
+      ` : ""}
+
+    ${error ? `color: ${colors.feedback.attention[1]};` : ""}
+    ${disabled ? `color: ${colors.text.disabled};` : ""}
+  `
+);
+const CloseIcon = styled.View(
+  ({
+    theme: {
+      yoga: { spacing }
+    }
+  }) => `
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.small}px;
+  `
+);
+const Input = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      cleanable,
+      disabled,
+      error,
+      full,
+      helper,
+      label,
+      maxLength,
+      readOnly,
+      style,
+      textContentType,
+      value,
+      onBlur,
+      onClean,
+      onFocus,
+      hideMaxLength,
+      theme: {
+        yoga: {
+          colors,
+          transition,
+          components: { input }
+        }
+      }
+    } = _b, props = __objRest(_b, [
+      "cleanable",
+      "disabled",
+      "error",
+      "full",
+      "helper",
+      "label",
+      "maxLength",
+      "readOnly",
+      "style",
+      "textContentType",
+      "value",
+      "onBlur",
+      "onClean",
+      "onFocus",
+      "hideMaxLength",
+      "theme"
+    ]);
+    const inputRef = ref || useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [typed, setTyped] = useState(Boolean(value));
+    useEffect(() => {
+      setTyped(Boolean(value));
+    }, [value]);
+    const iconColor = () => {
+      if (disabled) {
+        return colors.elements.backgroundAndDisabled;
+      }
+      if (focused) {
+        return input.font.color.focus;
+      }
+      return input.font.color.default;
+    };
+    const [labelTopAnimation] = useState(
+      new Animated.Value(input.padding.top * 1.5)
+    );
+    const [fontSizeAnimation] = useState(
+      new Animated.Value(input.label.font.size.default)
+    );
+    const animate = (animation, toValue) => Animated.timing(animation, {
+      toValue,
+      duration: transition.duration[1],
+      easing: Easing.bezier(...transition.timing[0]),
+      useNativeDriver: false
+    }).start();
+    useEffect(() => {
+      const shouldAnimate = typed || focused;
+      animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
+      animate(
+        fontSizeAnimation,
+        shouldAnimate ? input.label.font.size.typed : input.label.font.size.default
+      );
+    }, [focused, typed]);
+    const _a2 = Array.isArray(style) ? Object.assign({}, ...style) : style, { height = input.height } = _a2, styles = __objRest(_a2, ["height"]);
+    return /* @__PURE__ */ jsxs(Wrapper, { full, style: styles, children: [
+      /* @__PURE__ */ jsx(
+        Field,
+        __spreadProps(__spreadValues({}, props), {
+          cleanable,
+          disabled,
+          editable: !(readOnly || disabled),
+          error,
+          focus: focused,
+          full,
+          maxLength,
+          style: {
+            height
+          },
+          textContentType,
+          typed,
+          value,
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            onBlur(e);
+          },
+          ref: inputRef
+        })
+      ),
+      Boolean(label) && /* @__PURE__ */ jsx(
+        LabelWrapper,
+        {
+          focus: focused,
+          pointerEvents: "none",
+          typed,
+          style: { top: labelTopAnimation },
+          children: /* @__PURE__ */ jsx(
+            Label,
+            {
+              disabled,
+              error,
+              focus: focused,
+              typed,
+              style: { fontSize: fontSizeAnimation },
+              children: label
+            }
+          )
+        }
+      ),
+      cleanable && typed && /* @__PURE__ */ jsx(
+        TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => {
+            if (disabled)
+              return;
+            onClean("");
+          },
+          children: /* @__PURE__ */ jsx(CloseIcon, { children: /* @__PURE__ */ jsx(Close, { height: input.height, width: 20, fill: iconColor() }) })
+        }
+      ),
+      (helper || maxLength || error) && /* @__PURE__ */ jsx(
+        Helper,
+        {
+          full,
+          error,
+          helper,
+          focused,
+          disabled,
+          maxLength,
+          length: value.length,
+          hideMaxLength
+        }
+      )
+    ] });
+  }
+);
+Input.propTypes = {
+  /** display a close icon to clean the field */
+  cleanable: bool,
+  disabled: bool,
+  error: string,
+  full: bool,
+  /** A helper text to be displayed below field */
+  helper: string,
+  label: string,
+  /** maximum length (number of characters) of value */
+  maxLength: number,
+  readOnly: bool,
+  textContentType: string,
+  value: oneOfType([string, number]),
+  style: oneOfType([shape({}), arrayOf(shape({}))]),
+  onBlur: func,
+  /** callback invoked when close icon is clicked */
+  onClean: func,
+  onFocus: func,
+  hideMaxLength: bool
+};
+Input.defaultProps = {
+  cleanable: true,
+  disabled: false,
+  error: void 0,
+  full: false,
+  helper: void 0,
+  label: "",
+  maxLength: void 0,
+  readOnly: false,
+  style: {},
+  textContentType: void 0,
+  value: "",
+  onBlur: () => {
+  },
+  onClean: () => {
+  },
+  onFocus: () => {
+  },
+  hideMaxLength: false
+};
+var Input_default = withTheme(Input);
+export {
+  Input_default as default
+};