Textarea

import { Textarea } from '@fidely-ui/react'

export const TextareaBasics = () => {
  return <Textarea placeholder="Comment..." />
}

import { Stack, Textarea } from '@fidely-ui/react'

export const TextareaSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <Stack gap={2}>
      {sizes.map((size) => (
        <Textarea placeholder="Comment..." size={size} key={size} />
      ))}
    </Stack>
  )
}

import { Stack, Textarea } from '@fidely-ui/react'

export const TextareaVariants = () => {
  const variants = ['subtle', 'flushed', 'outline'] as const

  return (
    <Stack gap={2}>
      {variants.map((variant) => (
        <Textarea placeholder="Comment..." variant={variant} key={variant} />
      ))}
    </Stack>
  )
}

import { Field, Textarea } from '@fidely-ui/react'

export const TextareaErrorText = () => {
  return (
    <Field.Root invalid>
      <Field.Label>
        Comment <Field.RequiredIndicator />
      </Field.Label>
      <Textarea placeholder="Start typing..." variant="subtle" />
      <Field.Error>Field is required</Field.Error>
    </Field.Root>
  )
}

import { Field, Textarea } from '@fidely-ui/react'

export const TextareaHelperText = () => {
  return (
    <Field.Root required>
      <Field.Label>
        Comment <Field.RequiredIndicator />
      </Field.Label>
      <Textarea placeholder="Start typing..." variant="subtle" />
      <Field.HelperText>Additional text.</Field.HelperText>
    </Field.Root>
  )
}

import { Stack, Textarea } from '@fidely-ui/react'

export const TextareaResize = () => {
  return (
    <Stack gap="4" maxWidth="250px">
      <Textarea resize="none" placeholder="Search the docs…" />
      <Textarea resize="vertical" placeholder="Search the docs…" />
      <Textarea resize="horizontal" placeholder="Search the docs…" />
      <Textarea resize="both" placeholder="Search the docs…" />
    </Stack>
  )
}