@nexara/nativeflow/lib/module/components/UserInput/UserInputV2.js

Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.

"use strict";

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { responsiveFontSize, verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations.js";
import { useTheme } from "../../hooks/index.js";
import { StyledText } from "../StyledComponents/index.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const UserInputV2 = ({
  variant = 'outlined',
  // label,
  bg = 'transparent',
  br = 5,
  stroke = 1,
  labelColor,
  textColor,
  strokeColor,
  // cursorColor,
  // placeholderTextColor,
  fs = 12,
  labelFs = 12,
  // placeholder = 'Enter Your...',
  isDisabled = false,
  isError,
  multiline = false,
  renderLeftIcon,
  renderRightIcon,
  inputContStyle,
  // inputStyle,
  containerStyle
  // labelStyle,/
}) => {
  const theme = useTheme();

  // const cursor = isError ? theme.colors.error : cursorColor ?? theme.colors.cursorColor;
  // const placeholderColor = placeholderTextColor ?? theme.colors.placeholderColor

  const STYLES = StyleSheet.create({
    INPUT: {
      color: isDisabled ? theme.colors.textDisable : isError ? theme.colors.error : textColor ?? theme.colors.textPrimary,
      fontSize: responsiveFontSize(fs),
      textAlignVertical: multiline ? 'top' : 'center',
      padding: 0
    },
    LABEL: {
      color: isError ? theme.colors.error : labelColor ?? theme.colors.textPrimary,
      fontSize: responsiveFontSize(labelFs),
      fontWeight: 'bold'
    },
    INPUT_CONT: {
      flexDirection: 'row',
      alignItems: multiline ? 'flex-start' : 'center',
      borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
      height: multiline ? 'auto' : verticalScale(45),
      backgroundColor: isDisabled ? theme.colors.disable : bg ?? 'transparent',
      borderWidth: variant === 'standard' ? 0 : stroke,
      borderBottomWidth: stroke,
      paddingHorizontal: horizontalScale(15),
      paddingVertical: multiline ? verticalScale(10) : 0,
      borderRadius: verticalScale(br),
      gap: horizontalScale(15)
    }
  });
  const viewProps = {
    gap: verticalScale(4),
    ...containerStyle
  };
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx(View, {
      ...viewProps,
      children: /*#__PURE__*/_jsxs(View, {
        style: {
          ...STYLES.INPUT_CONT,
          ...inputContStyle
        },
        children: [renderLeftIcon && renderLeftIcon(), /*#__PURE__*/_jsx(View, {
          style: {
            flex: 1,
            alignSelf: 'center'
          },
          children: /*#__PURE__*/_jsx(StyledText, {
            children: "Email"
          })
        }), renderRightIcon && renderRightIcon()]
      })
    })
  });
};
export default UserInputV2;
//# sourceMappingURL=UserInputV2.js.map