@ornikar/kitt-universal 3.9.0 → 4.0.0

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

@@ -777,7 +777,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   });
 });
 
-const Container$5 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Container$4 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], ({
@@ -797,7 +797,7 @@ function Card({
   children,
   type
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Container$5, {
+  return /*#__PURE__*/jsxRuntime.jsx(Container$4, {
     type: type,
     children: children
   });
@@ -858,6 +858,7 @@ const getColorFromState = state => {
     case 'invalid':
       return 'danger';
 
+    case 'valid':
     default:
       return 'black-light';
   }
@@ -917,46 +918,87 @@ function InputField({
   });
 }
 
-const useInputText = () => {
-  const [isFocused, setIsFocused] = react.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = react.useState(false);
-  return {
-    isFocused,
-    handleInputFocus: () => setIsFocused(true),
-    handleInputBlur: () => setIsFocused(false),
-    togglePasswordVisibility: () => setIsPasswordVisible(isVisible => !isVisible),
-    isPasswordVisible
-  };
-};
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+
+    case 'valid':
+      return 'success';
+
+    default:
+      return undefined;
+  }
+}
+
+function InputIcon({
+  icon,
+  state,
+  disabled
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function InputPressable({ ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Pressable, { ...props
+  });
+}
 
 const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", ";border-radius:", ";border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
   theme,
-  state
-}) => state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
+  $state
+}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
   theme
 }) => theme.kitt.forms.input.borderWidth, ({
   theme
 }) => theme.kitt.forms.input.borderRadius, ({
   theme,
-  state
-}) => theme.kitt.forms.input.states[state].borderColor, ({
+  $state
+}) => theme.kitt.forms.input.states[$state].borderColor, ({
   theme
 }) => {
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
 }, ({
   theme,
-  state
-}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color], ({
+  $state
+}) => theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color], ({
   theme
 }) => theme.kitt.typography.types.bodies.fontFamily.regular);
-const Input = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TextInput).withConfig({
-  displayName: "InputText__Input",
+
+function getInputUIState({
+  isFocused,
+  isDisabled,
+  formState
+}) {
+  if (isDisabled) return 'disabled';
+  if (isFocused) return 'focus';
+  if (formState === 'invalid') return 'invalid';
+  return 'default';
+}
+
+const StyledTextInput = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.TextInput).withConfig({
+  displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
 })(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, ({
   theme,
   multiline
-}) => !multiline && "web" === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding, ({
+}) => {
+  if (!multiline && "web" === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding.default;
+}, ({
   theme,
   multiline
 }) => {
@@ -964,116 +1006,86 @@ const Input = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNativ
   const typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
 }, ({
-  minHeight
-}) => minHeight);
-const Container$4 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "InputText__Container",
+  $minHeight
+}) => $minHeight);
+const InputTextContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputText__InputTextContainer",
   componentId: "kitt-universal__sc-uke279-1"
-})(["margin-top:", ";margin-bottom:", ";"], ({
-  theme
-}) => theme.kitt.forms.input.marginTop, ({
-  theme
-}) => theme.kitt.forms.input.marginBottom);
-const PasswordButtonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "InputText__PasswordButtonContainer",
+})(["position:relative;"]);
+const RightInputContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-2"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], ({
-  theme
-}) => theme.kitt.forms.input.passwordButtonIconSize / 2);
-
-const getInputState = ({
-  isDisabled,
-  isFocused,
-  formState
-}) => {
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
-};
-
-const keyboardTypeByTextInputType = {
-  text: 'default',
-  email: 'email-address',
-  password: 'default',
-  username: 'default'
-};
-const autoCompleteTypeByType = {
-  text: 'off',
-  email: 'email',
-  password: 'password',
-  username: 'name'
-};
-const autoCorrectByType = {
-  text: true,
-  email: false,
-  password: false,
-  username: false
-};
-const textContentTypeByType = {
-  text: 'none',
-  email: 'emailAddress',
-  password: 'password',
-  username: 'username'
-};
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
 const InputText = /*#__PURE__*/react.forwardRef(({
   id,
+  right,
   minHeight = 0,
-  type,
   state: formState,
   internalForceState,
   disabled = false,
+  autoCorrect = true,
+  textContentType = 'none',
+  autoCompleteType = 'off',
+  keyboardType = 'default',
   onFocus,
   onBlur,
   ...props
 }, ref) => {
-  const {
-    isFocused,
-    handleInputBlur,
-    handleInputFocus,
-    isPasswordVisible,
-    togglePasswordVisibility
-  } = useInputText();
   const theme = /*#__PURE__*/styled.useTheme();
-  const state = internalForceState || getInputState({
+  const [isFocused, setIsFocused] = react.useState(false);
+  const state = internalForceState || getInputUIState({
     isFocused,
     isDisabled: disabled,
     formState
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTextInput, {
       ref: ref,
       nativeID: id,
       editable: !disabled,
-      keyboardType: keyboardTypeByTextInputType[type],
-      autoCompleteType: autoCompleteTypeByType[type],
-      autoCorrect: autoCorrectByType[type],
-      minHeight: minHeight,
-      textContentType: textContentTypeByType[type],
-      placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
-      selectionColor: theme.kitt.forms.input.selectionColor,
-      secureTextEntry: type === 'password' && !isPasswordVisible,
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection,
       ...props,
-      state: state,
+      $state: state,
       onFocus: e => {
-        handleInputFocus();
+        setIsFocused(true);
         if (onFocus) onFocus(e);
       },
       onBlur: e => {
-        handleInputBlur();
+        setIsFocused(false);
         if (onBlur) onBlur(e);
       }
-    }), type === 'password' && !disabled && /*#__PURE__*/jsxRuntime.jsx(PasswordButtonContainer, {
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(RightInputContainer, {
+      children: right
+    }) : null]
+  });
+});
+
+function InputPassword({
+  isPasswordDefaultVisible,
+  right,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = react.useState(Boolean(isPasswordDefaultVisible));
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, { ...props,
+    textContentType: "password",
+    autoCompleteType: "password",
+    autoCorrect: false,
+    secureTextEntry: !isVisible,
+    right: right || /*#__PURE__*/jsxRuntime.jsx(InputPressable, {
       accessibilityRole: "button",
-      onPress: togglePasswordVisibility,
-      children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-        icon: isPasswordVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}),
-        size: theme.kitt.forms.input.passwordButtonIconSize,
-        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
+      onPress: () => setIsVisible(prev => !prev),
+      children: /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
+        icon: isVisible ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeOffIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.EyeIcon, {})
       })
-    })]
+    })
   });
-});
+}
 
 function Label({
   htmlFor,
@@ -1175,9 +1187,8 @@ function TextArea({ ...props
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     multiline: true,
     textAlignVertical: "top",
-    ...props,
-    type: "text",
-    minHeight: theme.kitt.forms.input.textAreaMinHeight
+    minHeight: theme.kitt.forms.textArea.minHeight,
+    ...props
   });
 }
 
@@ -1468,11 +1479,17 @@ function IconButton({
   icon,
   color,
   disabled,
+  testID,
+  accessibilityLabel,
+  accessibilityRole,
   onPress
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(PressableAnimatedContainer, {
     color: color,
     disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
     onPress: onPress,
     children: /*#__PURE__*/jsxRuntime.jsx(IconButtonContent, {
       disabled: disabled,
@@ -2567,54 +2584,133 @@ const feedbackMessageLateOceanTheme = {
   }
 };
 
-const inputFieldLateOceanTheme = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
+  baseAndSmall: {
+    fontSize: `${baseAndSmallFontSize}px`,
+    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
+  },
+  mediumAndWide: {
+    fontSize: `${mediumAndWideFontSize}px`,
+    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
+  }
+});
+const typographyLateOceanTheme = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-light': lateOceanColorPalette.black555,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: 'Moderat',
+        bold: 'Moderat'
+      },
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        regular: 'Noto Sans',
+        bold: 'Noto Sans'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
+  }
 };
 
 const inputStatesStyle = {
   default: {
-    backgroundColor: lateOceanColorPalette.white,
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  pending: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  valid: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   focus: {
-    borderColor: lateOceanColorPalette.lateOcean,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.primary,
+    color: 'black'
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black-light',
-    passwordButtonIconColor: 'black-light'
+    backgroundColor: colorsLateOceanTheme.disabled,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black-light'
   },
   invalid: {
-    borderColor: lateOceanColorPalette.englishVermillon,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.danger,
+    color: 'black'
   }
 };
-const inputLateOceanTheme = {
-  marginTop: '2px',
-  marginBottom: '4px',
+const input = {
+  color: {
+    selection: colorsLateOceanTheme.primary,
+    placeholder: typographyLateOceanTheme.colors['black-light']
+  },
   borderWidth: '2px',
   borderRadius: '10px',
-  passwordButtonIconSize: 20,
-  padding: '7px 16px',
-  paddingSingleLineIOS: '12px 16px',
-  selectionColor: lateOceanColorPalette.lateOcean,
-  placeholderColor: 'black-light',
-  textAreaMinHeight: 120,
+  icon: {
+    size: 20
+  },
+  padding: {
+    default: '7px 16px',
+    iOSSingleLine: '12px 16px'
+  },
   states: inputStatesStyle
 };
 
+const inputFieldLateOceanTheme = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
+
 const radioLateOceanTheme = {
   size: 18,
   unchecked: {
@@ -2633,10 +2729,15 @@ const radioLateOceanTheme = {
   }
 };
 
-const formsLateOceanTheme = {
-  input: inputLateOceanTheme,
+const textArea = {
+  minHeight: 120
+};
+
+const forms = {
+  input,
   radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme
+  inputField: inputFieldLateOceanTheme,
+  textArea
 };
 
 const fullScreenModalLateOceanTheme = {
@@ -2749,77 +2850,6 @@ const tooltip = {
   floatingPadding: 8
 };
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-const createTypographyTypeConfig = (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) => ({
-  baseAndSmall: {
-    fontSize: `${baseAndSmallFontSize}px`,
-    lineHeight: `${calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier)}px`
-  },
-  mediumAndWide: {
-    fontSize: `${mediumAndWideFontSize}px`,
-    lineHeight: `${calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier)}px`
-  }
-});
-const typographyLateOceanTheme = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: 'Moderat',
-        bold: 'Moderat'
-      },
-      fontWeight: 400,
-      fontStyle: 'normal',
-      configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.3, 38, 62),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.3, 32, 48),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.3, 24, 36),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        regular: 'Noto Sans',
-        bold: 'Noto Sans'
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        'body-large': createTypographyTypeConfig(1.6, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
-        body: createTypographyTypeConfig(1.6, 16, 16),
-        'body-small': createTypographyTypeConfig(1.6, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
-      }
-    }
-  },
-  link: {
-    disabledColor: lateOceanColorPalette.black200
-  }
-};
-
 const breakpoints = {
   values: {
     base: 0,
@@ -2853,7 +2883,7 @@ const theme = {
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
-  forms: formsLateOceanTheme,
+  forms,
   typography: typographyLateOceanTheme,
   tag: tagLateOceanTheme,
   shadows: shadowsLateOceanTheme,
@@ -3275,6 +3305,9 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;
+exports.InputIcon = InputIcon;
+exports.InputPassword = InputPassword;
+exports.InputPressable = InputPressable;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;