1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import * as React from "react";
import { cn } from "@/lib/utils";
import { HTMLMotionProps, motion } from "framer-motion";
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"border-rgray-6 text-rgray-11 placeholder:text-rgray-11/70 focus-within:ring-rgray-7 flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm font-normal transition focus-within:outline-none focus-within:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
{...props}
/>
);
},
);
Textarea.displayName = "Textarea";
export interface Textarea2Props extends HTMLMotionProps<"div"> {
textAreaProps?: TextareaProps;
children: React.ReactNode | React.ReactNode[];
}
const Textarea2 = React.forwardRef<HTMLDivElement, Textarea2Props>(
({ className, children, textAreaProps: _textAreaProps, ...props }, ref) => {
const { className: textAreaClassName, ...textAreaProps } =
_textAreaProps || {};
return (
<motion.div
ref={ref}
className={cn(
"border-rgray-6 text-rgray-11 has-[textarea:focus-visible]:ring-rgray-7 flex h-auto min-h-[80px] w-full flex-col items-start justify-center rounded-md border bg-transparent px-3 py-2 text-sm transition has-[textarea:focus-visible]:ring-2",
className,
)}
{...props}
>
<textarea
className={cn(
"text-rgray-11 h-full w-full resize-none bg-transparent placeholder:text-white/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
textAreaClassName,
)}
{...textAreaProps}
/>
{children}
</motion.div>
);
},
);
Textarea2.displayName = "Textarea2";
export { Textarea, Textarea2 };
|