Textarea

1"use client"
2
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6import { useFyskConfig, type FyskIconPosition } from "@/components/fysk-provider"
7import { useFyskAnimation } from "@/components/hooks/useFyskAnimation"
8
9const textareaVariants = cva(
10    "flex w-full rounded-md shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive min-h-[80px]",
11    {
12        variants: {
13            variant: {
14                default: "border border-input bg-transparent dark:bg-input/30 shadow-xs",
15                secondary: "border border-transparent bg-muted focus-within:bg-background focus-within:border-input",
16                outline: "border-2 border-border bg-transparent focus-within:border-ring/50",
17                ghost: "border border-transparent bg-transparent hover:bg-muted focus-within:bg-background",
18                glass: "bg-foreground/5 backdrop-blur-md border border-border/50 text-foreground placeholder:text-muted-foreground/50 shadow-xs",
19            },
20            size: {
21                xs: "text-xs min-h-[60px]",
22                sm: "text-sm min-h-[70px]",
23                md: "text-base md:text-sm min-h-[80px]",
24                lg: "text-base md:text-sm min-h-[100px]",
25                xl: "text-lg min-h-[120px]",
26            },
27        },
28        defaultVariants: {
29            variant: "default",
30            size: "md",
31        },
32    }
33)
34
35export interface TextareaProps
36    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
37    VariantProps<typeof textareaVariants> {
38    /**
39     * Optional className for the header.
40     */
41    headerClassName?: string;
42    /**
43     * Optional className for the footer.
44     */
45    footerClassName?: string;
46    /**
47     * Automatically adjust the height of the textarea based on content.
48     */
49    autoSize?: boolean
50    /**
51     * Maximum height when autoSize is enabled.
52     */
53    maxHeight?: number
54    /**
55     * Optional header content (e.g., info pills, toolbar).
56     */
57    header?: React.ReactNode
58    /**
59// … truncated