Textarea

import { TextArea } from '@workspace/ui/components/Textfield'

export function TextAreaDemo() {
    return <TextArea placeholder="Enter your message" />
}

import { TextArea } from '@workspace/ui/components/Textfield'

export function TextAreaDemo() {
    return <TextArea placeholder="Enter your message" />
}

import { TextArea } from '@workspace/ui/components/Textfield'

export function TextAreaDisabled() {
    return <TextArea disabled placeholder="Email" />
}

'use client'

import { TextArea } from '@workspace/ui/components/Textfield'
import { Label } from '@workspace/ui/components/Field'

export function TextAreaWithLabel() {
    return (
        <div className="w-full">
            <Label htmlFor="message">Message</Label>
            <TextArea id="message" placeholder="Message" />
        </div>
    )
}

import { Button } from '@workspace/ui/components/Button'
import { TextArea } from '@workspace/ui/components/Textfield'

export function TextAreaWithButton() {
    return (
        <div className="grid gap-2 w-full">
            <TextArea placeholder="Type your message here..." />
            <Button>Send Message</Button>
        </div>
    )
}

'use client'

import { useForm } from 'react-hook-form'
import { toast } from '@workspace/ui/components/Sonner'
import { z } from '@workspace/lib/validation'

import { Button } from '@workspace/ui/components/Button'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@workspace/ui/components/Form'
import { TextArea } from '@workspace/ui/components/Textfield'

interface FormValues {
    bio: string
}

export function TextAreaForm() {
    const form = useForm<FormValues>({
        defaultValues: {
            bio: '',
        },
    })

    function onSubmit(data: FormValues) {
        toast.neutral({
            title: 'You submitted the following values',
            description: (
                <pre>
                    <code>{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        })
    }

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-4">
                <FormField
                    control={form.control}
                    name="bio"
                    rules={{ validate: z.string().min(2).validateFn() }}
                    render={({ field }) => (
                        <FormItem>
                            <FormLabel>Bio</FormLabel>
                            <FormControl>
                                <TextArea placeholder="Type your bio here..." {...field} />
                            </FormControl>
                            <FormMessage />
                        </FormItem>
                    )}
                />
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    )
}