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.
61 lines (60 loc) • 3.99 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const TextInput = ({ type = "text", placeholder, value, onChange, styles, className = "", cornerRadius, primaryColor, secondaryColor, textColor, backgroundColor, fontSize, fontFamily, spacingfactor, borderColor, shadowColor, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, margin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = useTheme();
const [isFocused, setIsFocused] = useState(false);
// Use prop override, then theme, then fallback to default
const getThemeValue = (prop, themeKey) => prop !== undefined ? prop : theme[themeKey];
const resolvedCornerRadius = getThemeValue(cornerRadius, "cornerRadius");
const resolvedPrimaryColor = getThemeValue(primaryColor, "primaryColor");
const resolvedSecondaryColor = getThemeValue(secondaryColor, "secondaryColor");
const resolvedTextColor = getThemeValue(textColor, "textColor");
const resolvedBackgroundColor = getThemeValue(backgroundColor, "backgroundColor");
const resolvedFontSize = getThemeValue(fontSize, "fontSize");
const resolvedFontFamily = getThemeValue(fontFamily, "fontFamily");
const resolvedSpacingfactor = getThemeValue(spacingfactor, "spacingfactor");
const resolvedBorderColor = getThemeValue(borderColor, "borderColor");
const resolvedShadowColor = getThemeValue(shadowColor, "shadowColor");
const resolvedBorderWidth = getThemeValue(borderWidth, "borderWidth");
const resolvedBorderStyle = getThemeValue(borderStyle, "borderStyle");
const resolvedFontWeight = getThemeValue(fontWeight, "fontWeight");
const resolvedLineHeight = getThemeValue(lineHeight, "lineHeight");
const resolvedLetterSpacing = getThemeValue(letterSpacing, "letterSpacing");
const resolvedTransitionDuration = getThemeValue(transitionDuration, "transitionDuration");
const resolvedPadding = getThemeValue(padding, "padding");
const resolvedMargin = getThemeValue(margin, "margin");
const resolvedShadowOffsetX = getThemeValue(shadowOffsetX, "shadowOffsetX");
const resolvedShadowOffsetY = getThemeValue(shadowOffsetY, "shadowOffsetY");
const resolvedShadowBlur = getThemeValue(shadowBlur, "shadowBlur");
const resolvedShadowSpread = getThemeValue(shadowSpread, "shadowSpread");
const resolvedShadowInset = getThemeValue(shadowInset, "shadowInset");
const resolvedHoverColor = getThemeValue(hoverColor, "hoverColor");
const inputStyles = {
backgroundColor: resolvedBackgroundColor,
color: resolvedTextColor,
fontSize: resolvedFontSize,
fontFamily: resolvedFontFamily,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
padding: resolvedPadding ||
`${resolvedSpacingfactor}px ${resolvedSpacingfactor * 2}px`,
borderRadius: resolvedCornerRadius,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
boxShadow: isFocused
? `0 0 0 2px ${resolvedPrimaryColor}`
: `${resolvedShadowInset ? "inset " : ""}${resolvedShadowOffsetX} ${resolvedShadowOffsetY} ${resolvedShadowBlur} ${resolvedShadowSpread} ${resolvedShadowColor}`,
boxSizing: "border-box",
margin: resolvedMargin || `${resolvedSpacingfactor}px`,
transition: resolvedTransitionDuration,
width: "100%",
outline: "none",
...styles,
};
const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);
return (_jsx("input", { type: type, placeholder: placeholder, value: value, className: `tharikida-input ${className}`, style: inputStyles, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur }));
};
export default TextInput;