Autosize Textarea

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Autosize Textarea — a <textarea> that grows and shrinks to fit its content
5// between min/max bounds, delivered by ONE CSS declaration instead of the
6// classic scrollHeight JS hack. Source of truth for the platform behaviour:
7//   repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md
8//     - "field-sizing: content overrides the default preferred sizing of form
9//        elements … configure text inputs to shrinkwrap their content and grow
10//        as more text is entered."
11//     - "<textarea> … If unable to grow due to a width constraint, they grow in
12//        height to display additional rows … When a height constraint is then
13//        reached, they show a scrollbar."
14//     - "rows/cols have no effect on <textarea> with field-sizing: content set."
15//     - "using min-height and max-height alongside field-sizing: content is
16//        quite effective … allow the control to grow and shrink … and prevent
17//        the control from becoming too large or too small."
18//   repos/mdn/files/en-us/web/html/reference/elements/textarea/index.md
19//        (native element, dirname, wrap, readonly/disabled semantics)
20//
21// Tailwind v4 ships the utility natively — see
22//   repos/tailwindcss/packages/tailwindcss/src/utilities.ts
23//     staticUtility('field-sizing-content', [['field-sizing','content']])
24//     staticUtility('field-sizing-fixed',   [['field-sizing','fixed']])
25//
26// htmx attrs (hx-post / hx-trigger="input changed delay:…") verified against
27//   repos/htmx/www/reference.md (forwarded untouched via {...rest}).
28//
29// Style analogue: registry/ui/textarea.tsx (shares the base field styling).
30//
31// DEGRADATION: where field-sizing is unsupported, the rule is simply ignored
32// and the element renders as an ordinary fixed-height textarea sized by
33// min-height (and rows, which the browser then honours). No JS, no polyfill —
34// progressive enhancement, not emulation. Pass autosize={false} to opt out
35// explicitly (field-sizing-fixed), turning it into a plain bounded textarea.
36 
37// Bounds are expressed as utilities so a single CSS line drives the resize.
38// Defaults: grow from ~2 lines up to ~10 lines, then scroll.
39const base =
40  "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none " +
41  "placeholder:text-muted-foreground " +
42// … truncated