Textarea

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaAutoResize() {
  return (
    <Field className="w-full max-w-md">
      <FieldLabel htmlFor="textarea-auto">Release notes</FieldLabel>
      <Textarea
        id="textarea-auto"
        className="max-h-60"
        defaultValue={
          "Faster exports: CSV and XLSX files are generated in the background.\nNew: keyboard shortcuts for every table action.\nFixed: date filters now respect your workspace time zone."
        }
      />
      <FieldDescription>
        Grows with its content up to 240px, then scrolls.
      </FieldDescription>
    </Field>
  )
}

"use client"

import * as React from "react"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

const LIMIT = 160

export default function TextareaCharacterLimit() {
  const [bio, setBio] = React.useState(
    "Design engineer at prfct. I care about type, motion and interfaces that get out of the way."
  )
  const remaining = LIMIT - bio.length
  const over = remaining < 0

  return (
    <Field data-invalid={over || undefined} className="w-full max-w-md">
      <FieldLabel htmlFor="textarea-limit">Bio</FieldLabel>
      <Textarea
        id="textarea-limit"
        value={bio}
        onChange={(event) => setBio(event.target.value)}
        aria-invalid={over || undefined}
        aria-describedby="textarea-limit-count"
      />
      {/* Announce only near the limit — not on every keystroke. */}
      <span className="sr-only" aria-live="polite">
        {remaining <= 20
          ? over
            ? `Over the limit by ${-remaining} characters`
            : `Characters left: ${remaining}`
          : ""}
      </span>
      <div className="flex items-start justify-between gap-4">
        {over ? (
          <FieldError>{`Keep your bio under ${LIMIT} characters.`}</FieldError>
        ) : (
          <FieldDescription>Shown on your public profile.</FieldDescription>
        )}
        <FieldDescription
          id="textarea-limit-count"
          className={
            over
              ? "shrink-0 text-danger-11 tabular-nums"
              : "shrink-0 tabular-nums"
          }
        >
          {bio.length}/{LIMIT}
        </FieldDescription>
      </div>
    </Field>
  )
}

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaStates() {
  return (
    <FieldGroup className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
      <Field data-disabled>
        <FieldLabel htmlFor="textarea-disabled">Internal notes</FieldLabel>
        <Textarea
          id="textarea-disabled"
          disabled
          defaultValue="Locked while the invoice is being processed."
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="textarea-readonly">Audit message</FieldLabel>
        <Textarea
          id="textarea-readonly"
          readOnly
          defaultValue="Plan changed from Team to Enterprise by ada@prfct.dev on Sep 12."
        />
      </Field>
    </FieldGroup>
  )
}

"use client"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaCommentForm() {
  return (
    <form
      className="flex w-full max-w-lg gap-3"
      onSubmit={(event) => event.preventDefault()}
    >
      <Avatar size="lg">
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <div className="flex flex-1 flex-col gap-2">
        <Textarea
          name="comment"
          placeholder="Leave a comment…"
          aria-label="Comment"
          className="min-h-24"
        />
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" size="sm">
            Cancel
          </Button>
          <Button type="submit" size="sm">
            Comment
          </Button>
        </div>
      </div>
    </form>
  )
}