@ornikar/kitt-universal 9.8.0 → 9.9.0

package/dist/index-browser-all.es.web.js

@@ -1,10 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$2, ScrollView as ScrollView$1, Pressable as Pressable$2, Image as Image$1, NativeBaseProvider, extendTheme } from 'native-base';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Text as Text$1, View as View$2, ScrollView as ScrollView$1, Pressable as Pressable$2, Image as Image$1, Input, NativeBaseProvider, extendTheme } from 'native-base';
 import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef, useContext, createContext, cloneElement, useState, useRef, useEffect, Children, useMemo, Fragment } from 'react';
 import { styled } from '@linaria/react';
-import { Pressable as Pressable$1, View as View$1, useWindowDimensions, Image, StyleSheet, ScrollView as ScrollView$2, Linking, TextInput, Modal as Modal$1, Text as Text$2 } from 'react-native';
+import { Pressable as Pressable$1, View as View$1, useWindowDimensions, Image, StyleSheet, ScrollView as ScrollView$2, Linking, Modal as Modal$1, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled$1, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -1526,6 +1526,7 @@ var colors = {
   hover: lateOceanColorPalette.black100,
   white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackLight: lateOceanColorPalette.black555,
   blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
@@ -1826,34 +1827,34 @@ var inputStatesStyle = {
   "default": {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   pending: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   },
   valid: {
     backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black'
+    color: colors.black
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black'
+    color: colors.black
   },
   focus: {
     borderColor: colors.primary,
-    color: 'black'
+    color: colors.black
   },
   disabled: {
     backgroundColor: colors.disabled,
     borderColor: colors.separator,
-    color: 'black-light'
+    color: colors.blackLight
   },
   invalid: {
     borderColor: colors.separator,
-    color: 'black'
+    color: colors.black
   }
 };
 var input = {
@@ -1867,6 +1868,9 @@ var input = {
   icon: {
     size: 20
   },
+  rightContainer: {
+    padding: 10
+  },
   padding: {
     horizontal: 16,
     vertical: 5
@@ -2285,6 +2289,7 @@ function Checkbox(_ref6) {
   });
 }
 
+/** @deprecated use native-base instead */
 function getInputUIState(_ref) {
   var isFocused = _ref.isFocused,
       isDisabled = _ref.isDisabled,
@@ -2295,6 +2300,7 @@ function getInputUIState(_ref) {
   return 'default';
 }
 
+/** @deprecated this mixin is not SSR compatible */
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
   var theme = _ref.theme,
       $state = _ref.$state;
@@ -2316,7 +2322,7 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
 }, function (_ref6) {
   var theme = _ref6.theme,
       $state = _ref6.$state;
-  return theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color];
+  return theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states["default"].color;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
@@ -2459,118 +2465,74 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled("div")({
   "class": "kitt-u_InputTextContainer_i1encr9g",
   vars: {
     "i1encr9g-0": [function (_ref) {
-      var $isDisabled = _ref.$isDisabled;
-      return $isDisabled ? 'not-allowed' : 'inherit';
-    }],
-    "i1encr9g-1": [function (_ref2) {
-      var theme = _ref2.theme;
+      var theme = _ref.theme;
       var _theme$kitt$forms$inp = theme.kitt.forms.input.transition,
           property = _theme$kitt$forms$inp.property,
           duration = _theme$kitt$forms$inp.duration,
           timingFunction = _theme$kitt$forms$inp.timingFunction;
       return "".concat(property, " ").concat(duration, " ").concat(timingFunction);
-    }],
-    "i1encr9g-2": [function (_ref3) {
-      var theme = _ref3.theme,
-          $isDisabled = _ref3.$isDisabled;
-      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
-      return theme.kitt.forms.input.states.hover.borderColor;
-    }],
-    "i1encr9g-3": [function (_ref4) {
-      var theme = _ref4.theme,
-          $isDisabled = _ref4.$isDisabled;
-      if ($isDisabled) return theme.kitt.forms.input.states.disabled.borderColor;
-      return theme.kitt.forms.input.states.focus.borderColor;
     }]
   }
 }));
 
-var _excluded$b = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
-var StyledTextInput = /*#__PURE__*/styled$1(TextInput).withConfig({
-  displayName: "InputText__StyledTextInput",
-  componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme,
-      multiline = _ref.multiline;
-  if (!multiline && "web" !== 'web') return "0 ".concat(theme.kitt.forms.input.padding.horizontal, "px");
-  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme;
-      _ref2.multiline;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      _ref3$$minHeight = _ref3.$minHeight,
-      $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
-  return $minHeight;
-});
-var RightInputContainer = /*#__PURE__*/styled$1(View$1).withConfig({
-  displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
-var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var id = _ref4.id,
-      right = _ref4.right,
-      minHeight = _ref4.minHeight,
-      formState = _ref4.state,
-      internalForceState = _ref4.internalForceState,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _ref4$autoCorrect = _ref4.autoCorrect,
-      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
-      _ref4$textContentType = _ref4.textContentType,
-      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
-      _ref4$autoComplete = _ref4.autoComplete,
-      autoComplete = _ref4$autoComplete === void 0 ? 'off' : _ref4$autoComplete,
-      _ref4$keyboardType = _ref4.keyboardType,
-      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
-      multiline = _ref4.multiline,
-      onSubmitEditing = _ref4.onSubmitEditing,
-      _onFocus = _ref4.onFocus,
-      _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$b);
+var _excluded$b = ["id", "right", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
+var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      right = _ref.right;
+      _ref.state;
+      var internalForceState = _ref.internalForceState,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$autoCorrect = _ref.autoCorrect,
+      autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
+      _ref$textContentType = _ref.textContentType,
+      textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
+      _ref$autoComplete = _ref.autoComplete,
+      autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+      _ref$keyboardType = _ref.keyboardType,
+      keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
+      multiline = _ref.multiline,
+      onSubmitEditing = _ref.onSubmitEditing;
+      _ref.onFocus;
+      _ref.onBlur;
+      var props = _objectWithoutProperties(_ref, _excluded$b);
 
   var theme = /*#__PURE__*/useTheme();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var state = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: disabled,
-    formState: formState
+  var fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
       ref: ref,
       multiline: multiline,
       nativeID: id,
-      editable: !disabled,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
       keyboardType: keyboardType,
       autoComplete: autoComplete,
       autoCorrect: autoCorrect,
-      $minHeight: minHeight,
       textContentType: textContentType,
-      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
-      selectionColor: theme.kitt.forms.input.color.selection
+      fontSize: fontSizeForNativeBase,
+      lineHeight: // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && "web" !== 'web' ? 0 : undefined
     }, props), {}, {
-      $state: state,
-      onFocus: function onFocus(e) {
-        setIsFocused(true);
-        if (_onFocus) _onFocus(e);
-      },
-      onBlur: function onBlur(e) {
-        setIsFocused(false);
-        if (_onBlur) _onBlur(e);
-      },
+      variant: "outline",
       onSubmitEditing: multiline ? function () {
         return null;
       } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
+    })), right ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
       children: right
     }) : null]
   });
@@ -3836,6 +3798,78 @@ var createKittNativeBaseCustomTheme = function (theme) {
       bodies: theme.typography.types.bodies.fontFamily
     },
     components: {
+      Input: {
+        baseStyle: {
+          width: '100%',
+          minHeight: theme.forms.input.minHeight,
+          py: theme.forms.input.padding.vertical,
+          px: theme.forms.input.padding.horizontal,
+          borderRadius: theme.forms.input.borderRadius,
+          _disabled: {
+            opacity: 1 // override default native-base opacity
+
+          },
+          _light: {
+            color: theme.forms.input.states["default"].color,
+            placeholderTextColor: theme.forms.input.color.placeholder,
+            borderColor: theme.forms.input.states["default"].borderColor,
+            bg: theme.forms.input.states["default"].backgroundColor,
+            _hover: {
+              borderColor: theme.forms.input.states.hover.borderColor,
+              color: theme.forms.input.states.hover.color,
+              _focus: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              }
+            },
+            _focus: {
+              borderColor: theme.forms.input.states.focus.borderColor,
+              color: theme.forms.input.states.focus.color,
+              _hover: {
+                borderColor: theme.forms.input.states.focus.borderColor,
+                color: theme.forms.input.states.focus.color
+              },
+              _stack: {
+                style: {
+                  outlineWidth: 0
+                }
+              }
+            },
+            _invalid: {
+              borderColor: theme.forms.input.states.invalid.borderColor,
+              color: theme.forms.input.states.invalid.color,
+              _hover: {
+                borderColor: theme.forms.input.states.hover.borderColor,
+                color: theme.forms.input.states.hover.color
+              }
+            },
+            _ios: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _android: {
+              selectionColor: theme.forms.input.color.selection
+            },
+            _disabled: {
+              placeholderTextColor: theme.forms.input.color.placeholder,
+              color: theme.forms.input.states.disabled.color,
+              borderColor: theme.forms.input.states.disabled.borderColor,
+              bg: theme.forms.input.states.disabled.backgroundColor
+            }
+          }
+        },
+        variants: {
+          outline: {
+            borderWidth: theme.forms.input.borderWidth,
+            _focus: {
+              bg: theme.forms.input.states["default"].backgroundColor
+            }
+          },
+          underlined: {},
+          rounded: {},
+          filled: {},
+          unstyled: {}
+        }
+      },
       Text: {
         baseStyle: {
           _light: {