@ornikar/kitt-universal 9.8.0 → 9.9.0

package/dist/index-node-14.17.cjs.js

@@ -1524,6 +1524,7 @@ const colors = {
   hover: lateOceanColorPalette.black100,
   white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackLight: lateOceanColorPalette.black555,
   blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
@@ -1820,34 +1821,34 @@ const 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
   }
 };
 const input = {
@@ -1861,6 +1862,9 @@ const input = {
   icon: {
     size: 20
   },
+  rightContainer: {
+    padding: 10
+  },
   padding: {
     horizontal: 16,
     vertical: 5
@@ -2263,6 +2267,7 @@ function Checkbox({
   });
 }
 
+/** @deprecated use native-base instead */
 function getInputUIState({
   isFocused,
   isDisabled,
@@ -2274,6 +2279,7 @@ function getInputUIState({
   return 'default';
 }
 
+/** @deprecated this mixin is not SSR compatible */
 const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
   theme,
   $state
@@ -2292,7 +2298,7 @@ const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";bor
 }, ({
   theme,
   $state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
+}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
   theme
 }) => theme.kitt.typography.types.bodies.fontFamily.regular);
 
@@ -3055,40 +3061,9 @@ const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
   componentId: "kitt-universal__sc-8j6fjq-0"
 })(["position:relative;"]);
 
-const StyledTextInput = /*#__PURE__*/styled__default(reactNative.TextInput).withConfig({
-  displayName: "InputText__StyledTextInput",
-  componentId: "kitt-universal__sc-uke279-0"
-})(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, ({
-  theme,
-  multiline
-}) => {
-  if (!multiline && reactNative.Platform.OS !== 'web') return `0 ${theme.kitt.forms.input.padding.horizontal}px`;
-  return `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`;
-}, ({
-  theme,
-  multiline
-}) => {
-  const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline; // 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
-
-  if (shouldHandleSingleLineOnIOS) {
-    return 0;
-  }
-
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight}px`;
-}, ({
-  theme,
-  $minHeight = theme.kitt.forms.input.minHeight
-}) => $minHeight);
-const RightInputContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputText__RightInputContainer",
-  componentId: "kitt-universal__sc-uke279-1"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
 const InputText = /*#__PURE__*/React.forwardRef(({
   id,
   right,
-  minHeight,
   state: formState,
   internalForceState,
   disabled = false,
@@ -3103,38 +3078,40 @@ const InputText = /*#__PURE__*/React.forwardRef(({
   ...props
 }, ref) => {
   const theme = /*#__PURE__*/styled.useTheme();
-  const [isFocused, setIsFocused] = React.useState(false);
-  const state = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: disabled,
-    formState
+  const fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
   });
+  const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
     $isDisabled: disabled,
-    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
       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
+      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && reactNative.Platform.OS !== 'web' ? 0 : undefined,
       ...props,
-      $state: state,
-      onFocus: e => {
-        setIsFocused(true);
-        if (onFocus) onFocus(e);
-      },
-      onBlur: e => {
-        setIsFocused(false);
-        if (onBlur) onBlur(e);
-      },
+      variant: "outline",
       onSubmitEditing: multiline ? () => null : onSubmitEditing
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
       children: right
     }) : null]
   });
@@ -4042,6 +4019,78 @@ const createKittNativeBaseCustomTheme = 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: {