tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
46 lines (45 loc) • 2.35 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const TextArea = ({ value, onChange, placeholder = "", rows = 4, styles, className = "", disabled = false, label, cornerRadius, backgroundColor, borderColor, textColor, padding, margin, fontFamily, fontSize, transitionDuration, }) => {
const theme = useTheme();
const [internalValue, setInternalValue] = useState("");
const isControlled = typeof value === "string";
const currentValue = isControlled ? value : internalValue;
const borderRadius = typeof cornerRadius === "number" ? cornerRadius : theme.cornerRadius ?? 12;
const bg = backgroundColor || theme.backgroundColor;
const borderCol = borderColor || theme.borderColor;
const txtColor = textColor || theme.textColor;
const pad = padding !== undefined ? padding : theme.padding;
const marg = margin !== undefined ? margin : theme.margin;
const fontFam = fontFamily || theme.fontFamily;
const fSize = fontSize !== undefined ? fontSize : theme.fontSize;
const transition = transitionDuration || theme.transitionDuration;
const handleChange = (e) => {
if (!isControlled) {
setInternalValue(e.target.value);
}
onChange?.(e);
};
return (_jsxs("label", { className: `tharikida-textarea-label ${className}`, style: {
display: "flex",
flexDirection: "column",
gap: 6,
margin: marg,
fontFamily: fontFam,
...styles,
}, children: [label && (_jsx("span", { style: { fontFamily: fontFam, fontSize: fSize }, children: label })), _jsx("textarea", { value: currentValue, onChange: handleChange, placeholder: placeholder, rows: rows, disabled: disabled, style: {
fontFamily: fontFam,
fontSize: fSize,
border: `2px solid ${borderCol}`,
borderRadius: borderRadius,
padding: pad,
resize: "vertical",
outline: "none",
background: disabled ? "#f5f5f5" : bg,
color: txtColor,
transition: `border ${transition}`,
} })] }));
};
export default TextArea;