Textarea

1"use client";
2 
3import { Field as FieldPrimitive } from "@base-ui/react/field";
4import { mergeProps } from "@base-ui/react/merge-props";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { fieldControl, readOnlyFieldControl } from "@/lib/recipes";
8 
9export type TextareaSize = "sm" | "md" | "lg";
10export type TextareaVariant = "default" | "unstyled";
11 
12export type TextareaProps = React.ComponentProps<"textarea"> & {
13  size?: TextareaSize;
14  variant?: TextareaVariant;
15};
16 
17const paddingBySize: Record<TextareaSize, string> = {
18  sm: "px-2.5 py-1.5 text-small",
19  md: "px-3 py-2 text-small",
20  lg: "px-3.5 py-2.5 text-regular",
21};
22 
23export function Textarea({
24  className,
25  rows,
26  size = "md",
27  variant = "default",
28  readOnly,
29  ...props
30}: TextareaProps): React.ReactElement {
31  const unstyled = variant === "unstyled";
32 
33  return (
34    <span
35      className={cn(
36        "relative inline-flex w-full text-ink",
37        !unstyled && "rounded-[var(--radius-8)]",
38        !unstyled && fieldControl,
39        !unstyled && readOnlyFieldControl,
40        "has-disabled:opacity-50 has-disabled:cursor-not-allowed",
41        "group-data-[invalid]/field:[outline-style:solid] group-data-[invalid]/field:outline-[length:1px] group-data-[invalid]/field:outline-error",
42        "has-[[aria-invalid=true]]:[outline-style:solid] has-[[aria-invalid=true]]:outline-[length:1px] has-[[aria-invalid=true]]:outline-error",
43        className,
44      )}
45      data-readonly={readOnly ? "" : undefined}
46      data-slot="textarea-control"
47    >
48      <FieldPrimitive.Control
49        render={(defaultProps: React.ComponentProps<"textarea">) => (
50          <textarea
51            className={cn(
52              "field-sizing-content min-h-24 w-full rounded-[inherit] bg-transparent outline-none resize-y",
53              "placeholder:text-ink-subtle",
54              paddingBySize[size],
55            )}
56            data-slot="textarea"
57            readOnly={readOnly}
58            rows={rows}
59            {...mergeProps(defaultProps, props)}
60          />
61        )}
62      />
63    </span>
64  );
65}
66 
67export { FieldPrimitive };