fn_registry/frontend/functions/ui/textarea.tsx

import * as React from "react"
import { cn } from "../core/cn"

interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
  autoResize?: boolean
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, autoResize = false, onChange, ...props }, ref) => {
    const internalRef = React.useRef<HTMLTextAreaElement>(null)
    const resolvedRef = (ref as React.RefObject<HTMLTextAreaElement>) ?? internalRef

    const handleChange = React.useCallback(
      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        if (autoResize && resolvedRef.current) {
          resolvedRef.current.style.height = "auto"
          resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight}px`
        }
        onChange?.(e)
      },
      [autoResize, onChange, resolvedRef]
    )

    return (
      <textarea
        ref={resolvedRef}
        data-slot="textarea"
        className={cn(
          "min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none",
          "placeholder:text-muted-foreground",
          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50",
          "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
          "dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
          autoResize && "resize-none overflow-hidden",
          className
        )}
        onChange={handleChange}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }
export type { TextareaProps }