@sikka/hawa
Version:
Modern UI Kit made with Tailwind
61 lines (58 loc) • 2.68 kB
JavaScript
"use client";
import {
HelperText,
Label,
Skeleton,
cn
} from "./chunk-5MN7WB7B.mjs";
// elements/textarea/Textarea.tsx
import * as React from "react";
var Textarea = React.forwardRef(
({
className,
classNames,
labelProps,
showCount,
forceHideHelperText,
textareaProps,
countPosition = "bottom",
isLoading,
...props
}, ref) => {
return /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"textarea-main hawa-relative hawa-flex hawa-h-full hawa-w-full hawa-flex-col",
!forceHideHelperText && "hawa-gap-2",
className
)
},
/* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React.createElement(Label, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React.createElement(
"div",
{
className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
},
(textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
"/",
textareaProps == null ? void 0 : textareaProps.maxLength
)),
isLoading ? /* @__PURE__ */ React.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React.createElement(
"textarea",
{
...textareaProps,
className: cn(
"hawa-flex hawa-min-h-[40px] hawa-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
classNames == null ? void 0 : classNames.textarea
),
ref
}
),
/* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
);
}
);
Textarea.displayName = "Textarea";
export {
Textarea
};