@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
20 lines (19 loc) • 1.71 kB
JavaScript
import { twMerge } from '@vertisanpro/tailwind-merge';
import React, { forwardRef } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import { HelperText } from '../HelperText';
export const TextInput = forwardRef(({ addon, className, color = 'gray', helperText, icon: Icon, rightIcon: RightIcon, shadow, sizing = 'md', theme: customTheme = {}, ...props }, ref) => {
const theme = mergeDeep(getTheme().textInput, customTheme);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: twMerge(theme.base, className) },
addon && React.createElement("span", { className: theme.addon }, addon),
React.createElement("div", { className: theme.field.base },
Icon && (React.createElement("div", { className: theme.field.icon.base },
React.createElement(Icon, { className: theme.field.icon.svg }))),
RightIcon && (React.createElement("div", { "data-testid": "right-icon", className: theme.field.rightIcon.base },
React.createElement(RightIcon, { className: theme.field.rightIcon.svg }))),
React.createElement("input", { className: twMerge(theme.field.input.base, theme.field.input.colors[color], theme.field.input.sizes[sizing], theme.field.input.withIcon[Icon ? 'on' : 'off'], theme.field.input.withRightIcon[RightIcon ? 'on' : 'off'], theme.field.input.withAddon[addon ? 'on' : 'off'], theme.field.input.withShadow[shadow ? 'on' : 'off']), ...props, ref: ref }))),
helperText && React.createElement(HelperText, { color: color }, helperText)));
});
TextInput.displayName = 'TextInput';