Textarea

1"use client";
2
3import * as React from "react";
4import { Field as FieldPrimitive } from "@base-ui/react/field";
5import { mergeProps } from "@base-ui/react/merge-props";
6
7import { cn } from "@/lib/classes";
8
9export interface TextareaProps extends React.ComponentProps<"textarea"> {
10  size?: "sm" | "default" | "lg" | number;
11}
12
13function Textarea({ className, size = "default", ...props }: TextareaProps) {
14  return (
15    <FieldPrimitive.Control
16      render={(defaultProps) => (
17        <textarea
18          data-slot="textarea"
19          className={cn(
20            "field-sizing-content relative min-h-17.5 w-full rounded-lg border border-input/70 bg-background dark:bg-input/32 shadow-xs text-base/5 sm:text-sm px-3 py-2 outline-none max-sm:min-h-20.5 placeholder:text-muted-foreground/80 [transition:box-shadow_150ms_ease-out]",
21            // Focus State
22            "focus-visible:border-ring focus-visible:ring-[1px] disabled:opacity-64 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 [disabled,focus-visible,aria-invalid]:shadow-none dark:aria-invalid:ring-destructive/24",
23            size === "sm" &&
24              "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
25            size === "lg" &&
26              "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5",
27            className
28          )}
29          {...mergeProps(defaultProps, props)}
30        />
31      )}
32    />
33  );
34}
35
36export { Textarea };