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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _ResponsiveCalculations = require("../../helpers/ResponsiveCalculations.js");
var _index = require("../../hooks/index.js");
var _index2 = require("../StyledComponents/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 = (0, _index.useTheme)();

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

  const STYLES = _reactNative.StyleSheet.create({
    INPUT: {
      color: isDisabled ? theme.colors.textDisable : isError ? theme.colors.error : textColor ?? theme.colors.textPrimary,
      fontSize: (0, _ResponsiveCalculations.responsiveFontSize)(fs),
      textAlignVertical: multiline ? 'top' : 'center',
      padding: 0
    },
    LABEL: {
      color: isError ? theme.colors.error : labelColor ?? theme.colors.textPrimary,
      fontSize: (0, _ResponsiveCalculations.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' : (0, _ResponsiveCalculations.verticalScale)(45),
      backgroundColor: isDisabled ? theme.colors.disable : bg ?? 'transparent',
      borderWidth: variant === 'standard' ? 0 : stroke,
      borderBottomWidth: stroke,
      paddingHorizontal: (0, _ResponsiveCalculations.horizontalScale)(15),
      paddingVertical: multiline ? (0, _ResponsiveCalculations.verticalScale)(10) : 0,
      borderRadius: (0, _ResponsiveCalculations.verticalScale)(br),
      gap: (0, _ResponsiveCalculations.horizontalScale)(15)
    }
  });
  const viewProps = {
    gap: (0, _ResponsiveCalculations.verticalScale)(4),
    ...containerStyle
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      ...viewProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: {
          ...STYLES.INPUT_CONT,
          ...inputContStyle
        },
        children: [renderLeftIcon && renderLeftIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: {
            flex: 1,
            alignSelf: 'center'
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StyledText, {
            children: "Email"
          })
        }), renderRightIcon && renderRightIcon()]
      })
    })
  });
};
var _default = exports.default = UserInputV2;
//# sourceMappingURL=UserInputV2.js.map