@madeja-studio/telar/lib/module/component/Input/TextInput.js

UI component library by Madeja Studio

"use strict";

import { Column, useTheme } from '@madeja-studio/telar';
import chroma from 'chroma-js';
import { forwardRef } from 'react';
import { TextInput as RNTextInput } from 'react-native';
import tw from "../../tailwind/index.js";
import Text from "../Text/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const TextInput = /*#__PURE__*/forwardRef(({
  style,
  title,
  ...props
}, ref) => {
  const {
    theme
  } = useTheme();
  return /*#__PURE__*/_jsxs(Column, {
    children: [/*#__PURE__*/_jsx(Text.H3, {
      style: style,
      children: title
    }), /*#__PURE__*/_jsx(RNTextInput, {
      placeholderTextColor: chroma(theme.core.color.text.primary).alpha(0.6).hex(),
      ref: ref,
      style: tw.style(`border-b body pt-2 pb-1 my-2 ml-4`, {
        borderColor: props.hasError ? theme.core.color.danger : theme.core.color.text.primary
      }),
      ...props
    }), props.hasError && /*#__PURE__*/_jsx(Text.Body, {
      style: tw.style(`ml-4`, {
        color: theme.core.color.danger
      }),
      children: props.errorMessage
    })]
  });
});
//# sourceMappingURL=TextInput.js.map