Textarea

import * as React from "react";
import { Field, Textarea } from "@/components/ui/layro-textarea";

/* The textarea grows with what you write and stops at maxRows. The
   counter only appears near the limit, and turns red at it; there is no
   point showing "12/280" to someone who has written twelve characters. */

export default function TextareaDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 440 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Cancel subscription</h2>
        <p className="mt-1 mb-5 text-[13px] text-muted-foreground">Your plan stays active until 14 Oct.</p>
        <Field label="Reason for leaving" optional hint="Grows as you type; the counter appears near the limit">
          <Textarea
            maxLength={180}
            placeholder="What would have made you stay?"
            defaultValue="We moved the team to another tool after the merger, and nobody set up single sign-on for us before the renewal date."
          />
        </Field>
      </div>
    </div>
  );
}