Textarea

'use client'

import React from 'react'
import { Textarea } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 500 }}>
      <Textarea 
        label="Project Description" 
        placeholder="Describe your project goals and scope..." 
        rows={4} 
      />
    </div>
  )
}

'use client'

import React from 'react'
import { Textarea, Stack } from 'biibaos'

export default function States() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 500 }}>
      <Textarea 
        label="Bio" 
        error="Your bio is too short (min 50 characters)" 
        defaultValue="Too short"
      />
      <Textarea 
        label="Cover Letter" 
        success="Document looks good!" 
        defaultValue="I am writing to express my interest in..."
      />
      <Textarea 
        label="Feedback" 
        hint="Please be as detailed as possible"
      />
      <Textarea 
        label="Archived Note" 
        disabled 
        value="This content cannot be edited."
      />
    </Stack>
  )
}

'use client'

import React from 'react'
import { Textarea, Stack } from 'biibaos'

export default function Features() {
  return (
    <Stack direction="column" gap={16} style={{ maxWidth: 500 }}>
      <Textarea 
        label="No Resize" 
        resize="none" 
        placeholder="This textarea cannot be resized manually." 
      />
      <Textarea 
        label="Character Counter" 
        showCount 
        maxLength={200} 
        placeholder="Limit your input to 200 characters..." 
      />
    </Stack>
  )
}

'use client'

import { Textarea, Button, Stack } from 'biibaos'
import { useState } from 'react'

export default function SupportTicket() {
  const [message, setMessage] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      setMessage('')
      alert('Ticket Submitted!')
    }, 1500)
  }

  return (
    <Stack direction="column" gap={16} style={{ width: '100%', maxWidth: 450 }}>
      <Textarea
        label="Describe the Issue"
        placeholder="Please provide details about what went wrong..."
        value={message}
        onChange={(e: any) => setMessage(e.target.value)}
        showCount
        maxLength={500}
        rows={6}
        required
        hint={!message ? "Include any error codes you've seen" : undefined}
      />
      <Button 
        variant="primary" 
        onClick={handleSubmit} 
        loading={loading}
        disabled={!message}
        fullWidth
      >
        Submit Support Ticket
      </Button>
    </Stack>
  )
}