analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
230 lines (227 loc) • 6.16 kB
JavaScript
// src/components/TextArea/TextArea.tsx
import {
forwardRef,
useState,
useId
} from "react";
import { WarningCircle } from "phosphor-react";
// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// src/components/Text/Text.tsx
import { jsx } from "react/jsx-runtime";
var Text = ({
children,
size = "md",
weight = "normal",
color = "text-text-950",
as,
className = "",
...props
}) => {
let sizeClasses = "";
let weightClasses = "";
const sizeClassMap = {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl"
};
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
const weightClassMap = {
hairline: "font-hairline",
light: "font-light",
normal: "font-normal",
medium: "font-medium",
semibold: "font-semibold",
bold: "font-bold",
extrabold: "font-extrabold",
black: "font-black"
};
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
const baseClasses = "font-primary";
const Component = as ?? "p";
return /* @__PURE__ */ jsx(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/TextArea/TextArea.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var SIZE_CLASSES = {
small: {
textarea: "h-24 text-sm",
// 96px height, 14px font
textSize: "sm"
},
medium: {
textarea: "h-24 text-base",
// 96px height, 16px font
textSize: "md"
},
large: {
textarea: "h-24 text-lg",
// 96px height, 18px font
textSize: "lg"
},
extraLarge: {
textarea: "h-24 text-xl",
// 96px height, 20px font
textSize: "xl"
}
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES = {
default: {
base: "border-border-300 bg-background text-text-600",
hover: "hover:border-border-400",
focus: "focus:border-border-500"
},
hovered: {
base: "border-border-400 bg-background text-text-600",
hover: "",
focus: "focus:border-border-500"
},
focused: {
base: "border-2 border-primary-950 bg-background text-text-900",
hover: "",
focus: ""
},
invalid: {
base: "border-2 border-red-700 bg-white text-gray-800",
hover: "hover:border-red-700",
focus: "focus:border-red-700"
},
disabled: {
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
hover: "",
focus: ""
}
};
var TextArea = forwardRef(
({
label,
size = "medium",
state = "default",
errorMessage,
helperMessage,
className = "",
labelClassName = "",
disabled,
id,
onChange,
placeholder,
required,
showCharacterCount = false,
maxLength,
value,
...props
}, ref) => {
const generatedId = useId();
const inputId = id ?? `textarea-${generatedId}`;
const [isFocused, setIsFocused] = useState(false);
const currentLength = typeof value === "string" ? value.length : 0;
const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
const handleChange = (event) => {
onChange?.(event);
};
const handleFocus = (event) => {
setIsFocused(true);
props.onFocus?.(event);
};
const handleBlur = (event) => {
setIsFocused(false);
props.onBlur?.(event);
};
let currentState = disabled ? "disabled" : state;
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
currentState = "focused";
}
const sizeClasses = SIZE_CLASSES[size];
const stateClasses = STATE_CLASSES[currentState];
const textareaClasses = cn(
BASE_TEXTAREA_CLASSES,
sizeClasses.textarea,
stateClasses.base,
stateClasses.hover,
stateClasses.focus,
className
);
return /* @__PURE__ */ jsxs("div", { className: `flex flex-col`, children: [
label && /* @__PURE__ */ jsxs(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "medium",
color: "text-text-950",
className: cn("mb-1.5", labelClassName),
children: [
label,
" ",
required && /* @__PURE__ */ jsx2("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ jsx2(
"textarea",
{
ref,
id: inputId,
disabled,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
className: textareaClasses,
placeholder,
required,
maxLength,
value,
...props
}
),
errorMessage && /* @__PURE__ */ jsxs("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
/* @__PURE__ */ jsx2(WarningCircle, { size: 16 }),
" ",
errorMessage
] }),
!errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ jsxs(
Text_default,
{
size: "sm",
weight: "normal",
className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
children: [
currentLength,
"/",
maxLength,
" caracteres"
]
}
),
!errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
] });
}
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;
export {
TextArea_default as default
};
//# sourceMappingURL=index.mjs.map