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">Informacje o wersji</FieldLabel>
      <Textarea
        id="textarea-auto"
        className="max-h-60"
        defaultValue={
          "Szybszy eksport: pliki CSV i XLSX są generowane w tle.\nNowość: skróty klawiszowe dla każdej akcji w tabeli.\nPoprawka: filtry dat uwzględniają teraz strefę czasową przestrzeni roboczej."
        }
      />
      <FieldDescription>
        Rośnie wraz z treścią do 240 px, a potem się przewija.
      </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 w prfct. Zależy mi na typografii, animacjach i interfejsach, które nie wchodzą w drogę."
  )
  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">Opis</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
            ? `Znaków ponad limit: ${-remaining}`
            : `Pozostało znaków: ${remaining}`
          : ""}
      </span>
      <div className="flex items-start justify-between gap-4">
        {over ? (
          <FieldError>{`Opis nie może przekraczać ${LIMIT} znaków.`}</FieldError>
        ) : (
          <FieldDescription>Widoczny na twoim profilu publicznym.</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">Notatki wewnętrzne</FieldLabel>
        <Textarea
          id="textarea-disabled"
          disabled
          defaultValue="Zablokowane na czas przetwarzania faktury."
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="textarea-readonly">Wpis audytu</FieldLabel>
        <Textarea
          id="textarea-readonly"
          readOnly
          defaultValue="Plan zmieniony z Team na Enterprise przez ada@prfct.dev 12 września."
        />
      </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="Napisz komentarz…"
          aria-label="Dodaj komentarz"
          className="min-h-24"
        />
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" size="sm">
            Anuluj
          </Button>
          <Button type="submit" size="sm">
            Dodaj komentarz
          </Button>
        </div>
      </div>
    </form>
  )
}