{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autosize-textarea",
  "type": "registry:ui",
  "title": "Autosize Textarea",
  "description": "Native <textarea> that grows/shrinks to fit its content between min/max bounds via the single CSS rule field-sizing: content — no scrollHeight JS hack. Degrades to a plain fixed field where unsupported; autosize={false} opts out to field-sizing: fixed. htmx autosave demo.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/autosize-textarea.tsx",
      "type": "registry:ui",
      "target": "components/ui/autosize-textarea.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Autosize Textarea — a <textarea> that grows and shrinks to fit its content\n// between min/max bounds, delivered by ONE CSS declaration instead of the\n// classic scrollHeight JS hack. Source of truth for the platform behaviour:\n//   repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md\n//     - \"field-sizing: content overrides the default preferred sizing of form\n//        elements … configure text inputs to shrinkwrap their content and grow\n//        as more text is entered.\"\n//     - \"<textarea> … If unable to grow due to a width constraint, they grow in\n//        height to display additional rows … When a height constraint is then\n//        reached, they show a scrollbar.\"\n//     - \"rows/cols have no effect on <textarea> with field-sizing: content set.\"\n//     - \"using min-height and max-height alongside field-sizing: content is\n//        quite effective … allow the control to grow and shrink … and prevent\n//        the control from becoming too large or too small.\"\n//   repos/mdn/files/en-us/web/html/reference/elements/textarea/index.md\n//        (native element, dirname, wrap, readonly/disabled semantics)\n//\n// Tailwind v4 ships the utility natively — see\n//   repos/tailwindcss/packages/tailwindcss/src/utilities.ts\n//     staticUtility('field-sizing-content', [['field-sizing','content']])\n//     staticUtility('field-sizing-fixed',   [['field-sizing','fixed']])\n//\n// htmx attrs (hx-post / hx-trigger=\"input changed delay:…\") verified against\n//   repos/htmx/www/reference.md (forwarded untouched via {...rest}).\n//\n// Style analogue: registry/ui/textarea.tsx (shares the base field styling).\n//\n// DEGRADATION: where field-sizing is unsupported, the rule is simply ignored\n// and the element renders as an ordinary fixed-height textarea sized by\n// min-height (and rows, which the browser then honours). No JS, no polyfill —\n// progressive enhancement, not emulation. Pass autosize={false} to opt out\n// explicitly (field-sizing-fixed), turning it into a plain bounded textarea.\n\n// Bounds are expressed as utilities so a single CSS line drives the resize.\n// Defaults: grow from ~2 lines up to ~10 lines, then scroll.\nconst base =\n  \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none \" +\n  \"placeholder:text-muted-foreground \" +\n  \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50 \" +\n  \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" +\n  \"md:text-sm dark:bg-input/30 \" +\n  // htmx-request: dim while a request triggered by/targeting this textarea is\n  // in flight (e.g. autosave / live-validation).\n  \"[&.htmx-request]:opacity-70\"\n\n// Sizing keyword maps. content => grows with text; fixed => classic textarea\n// (resizable handle only). Kept as Record<Union,string> per house style.\nconst sizing: Record<\"content\" | \"fixed\", string> = {\n  content: \"field-sizing-content resize-none\",\n  fixed: \"field-sizing-fixed resize-y\",\n}\n\nexport function autosizeTextareaClasses(opts?: {\n  autosize?: boolean\n  minHeight?: ClassValue\n  maxHeight?: ClassValue\n  class?: ClassValue\n}): string {\n  const auto = opts?.autosize !== false\n  return cn(\n    base,\n    auto ? sizing.content : sizing.fixed,\n    opts?.minHeight ?? \"min-h-16\",\n    // Past the max, field-sizing: content yields a scrollbar (per MDN).\n    opts?.maxHeight ?? \"max-h-80\",\n    \"overflow-auto\",\n    opts?.class,\n  )\n}\n\ntype AutosizeTextareaProps = {\n  class?: ClassValue\n  id?: string\n  name?: string\n  value?: string\n  defaultValue?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  readonly?: boolean\n\n  // Autosize behaviour. true (default) => field-sizing: content; false =>\n  // field-sizing: fixed, a plain bounded textarea with a drag handle.\n  autosize?: boolean\n\n  // Lower / upper growth bounds, as Tailwind height utilities. These are the\n  // RIGHT levers for field-sizing per MDN — not width/height, which would\n  // reimpose a fixed size and defeat the feature.\n  minHeight?: ClassValue\n  maxHeight?: ClassValue\n\n  // rows/cols are honoured ONLY as the no-support fallback size — they have no\n  // effect once field-sizing: content applies (MDN). Useful for graceful\n  // degradation in older engines.\n  rows?: number\n  cols?: number\n\n  // Validation\n  minLength?: number\n  maxLength?: number\n\n  // Mobile UX\n  autocomplete?: string\n  autofocus?: boolean\n  spellcheck?: boolean\n  autocapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\"\n  autocorrect?: \"on\" | \"off\"\n\n  // Submits the text directionality (ltr/rtl) as a separate form field.\n  // See repos/mdn/files/en-us/web/html/reference/elements/textarea/index.md\n  dirname?: string\n\n  // Wrapping\n  wrap?: \"hard\" | \"soft\" | \"off\"\n\n  // ARIA\n  ariaLabel?: string\n  ariaLabelledby?: string\n  ariaDescribedby?: string\n  ariaInvalid?: boolean | \"grammar\" | \"spelling\"\n  ariaRequired?: boolean\n\n  // Form metadata\n  form?: string\n\n  // htmx attributes — fire on blur or hx-trigger=\"input changed delay:300ms\"\n  // for live validation / autosave patterns. See repos/htmx/www/reference.md.\n  \"hx-get\"?: string\n  \"hx-post\"?: string\n  \"hx-put\"?: string\n  \"hx-patch\"?: string\n  \"hx-target\"?: string\n  \"hx-swap\"?: string\n  \"hx-trigger\"?: string\n  \"hx-indicator\"?: string\n  \"hx-vals\"?: string\n  \"hx-include\"?: string\n}\n\nexport function AutosizeTextarea(props: AutosizeTextareaProps) {\n  const {\n    class: className,\n    autosize,\n    minHeight,\n    maxHeight,\n    value,\n    defaultValue,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaInvalid,\n    ariaRequired,\n    ...rest\n  } = props\n\n  return (\n    <textarea\n      class={autosizeTextareaClasses({ autosize, minHeight, maxHeight, class: className })}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}\n      aria-required={ariaRequired === undefined ? undefined : String(ariaRequired)}\n      data-slot=\"autosize-textarea\"\n      data-autosize={autosize === false ? \"false\" : \"true\"}\n      {...rest}\n    >{value ?? defaultValue}</textarea>\n  )\n}\n"
    },
    {
      "path": "registry/jinja2/autosize-textarea.html",
      "type": "registry:file",
      "target": "templates/components/autosize-textarea.html",
      "content": "{# Autosize Textarea macro — shadcn-htmx, htmx v4 + Tailwind v4.\n   Mirrors registry/ui/autosize-textarea.tsx for Python/Flask/FastAPI/Django/Jinja2.\n\n   A <textarea> that grows/shrinks to fit its content between min/max bounds via\n   the single CSS rule `field-sizing: content` — no scrollHeight JS hack. See\n   repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.\n   Tailwind utility: field-sizing-content (repos/tailwindcss/.../utilities.ts).\n\n   Usage:\n       {% from \"components/autosize-textarea.html\" import autosize_textarea %}\n       {{ autosize_textarea(name=\"reply\", placeholder=\"Write a reply…\") }}\n\n   Pass autosize=false for a plain bounded textarea (field-sizing: fixed).\n   minheight/maxheight are Tailwind height utilities (default min-h-16 / max-h-80). #}\n\n{% macro autosize_textarea(\n    id=none,\n    name=none,\n    value=none,\n    placeholder=none,\n    required=false,\n    disabled=false,\n    readonly=false,\n    autosize=true,\n    minheight=\"min-h-16\",\n    maxheight=\"max-h-80\",\n    rows=none,\n    cols=none,\n    minlength=none,\n    maxlength=none,\n    autocomplete=none,\n    autocapitalize=none,\n    autocorrect=none,\n    autofocus=false,\n    spellcheck=none,\n    dirname=none,\n    wrap=none,\n    form=none,\n    aria_label=none,\n    aria_labelledby=none,\n    aria_describedby=none,\n    aria_invalid=none,\n    aria_required=none,\n    extra_class=\"\",\n    **attrs\n) %}\n{%- set base -%}\nflex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 md:text-sm dark:bg-input/30 [&.htmx-request]:opacity-70\n{%- endset -%}\n{%- set sizing = \"field-sizing-content resize-none\" if autosize else \"field-sizing-fixed resize-y\" -%}\n<textarea class=\"{{ base }} {{ sizing }} {{ minheight }} {{ maxheight }} overflow-auto {{ extra_class }}\"\n          {%- if id %} id=\"{{ id }}\"{% endif %}\n          {%- if name %} name=\"{{ name }}\"{% endif %}\n          {%- if placeholder %} placeholder=\"{{ placeholder }}\"{% endif %}\n          {%- if required %} required{% endif %}\n          {%- if disabled %} disabled{% endif %}\n          {%- if readonly %} readonly{% endif %}\n          {%- if rows is not none %} rows=\"{{ rows }}\"{% endif %}\n          {%- if cols is not none %} cols=\"{{ cols }}\"{% endif %}\n          {%- if minlength is not none %} minlength=\"{{ minlength }}\"{% endif %}\n          {%- if maxlength is not none %} maxlength=\"{{ maxlength }}\"{% endif %}\n          {%- if autocomplete %} autocomplete=\"{{ autocomplete }}\"{% endif %}\n          {%- if autocapitalize %} autocapitalize=\"{{ autocapitalize }}\"{% endif %}\n          {%- if autocorrect %} autocorrect=\"{{ autocorrect }}\"{% endif %}\n          {%- if autofocus %} autofocus{% endif %}\n          {%- if spellcheck is not none %} spellcheck=\"{{ 'true' if spellcheck else 'false' }}\"{% endif %}\n          {%- if dirname %} dirname=\"{{ dirname }}\"{% endif %}\n          {%- if wrap %} wrap=\"{{ wrap }}\"{% endif %}\n          {%- if form %} form=\"{{ form }}\"{% endif %}\n          {%- if aria_label %} aria-label=\"{{ aria_label }}\"{% endif %}\n          {%- if aria_labelledby %} aria-labelledby=\"{{ aria_labelledby }}\"{% endif %}\n          {%- if aria_describedby %} aria-describedby=\"{{ aria_describedby }}\"{% endif %}\n          {%- if aria_invalid is not none %} aria-invalid=\"{{ aria_invalid|string|lower }}\"{% endif %}\n          {%- if aria_required is not none %} aria-required=\"{{ aria_required|string|lower }}\"{% endif %}\n          data-slot=\"autosize-textarea\"\n          data-autosize=\"{{ 'false' if not autosize else 'true' }}\"\n          {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}\n>{% if value is not none %}{{ value }}{% endif %}</textarea>\n{% endmacro %}\n"
    },
    {
      "path": "registry/go-templates/autosize-textarea.tmpl",
      "type": "registry:file",
      "target": "components/autosize-textarea.tmpl",
      "content": "{{/*\n  Autosize Textarea template — shadcn-htmx, htmx v4 + Tailwind v4.\n  Mirrors registry/ui/autosize-textarea.tsx.\n\n  A <textarea> that grows/shrinks to fit its content between min/max bounds via\n  the single CSS rule `field-sizing: content` — no scrollHeight JS hack. See\n  repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.\n  Tailwind utility: field-sizing-content (repos/tailwindcss/.../utilities.ts).\n\n  Usage:\n\n      type AutosizeTextareaArgs struct {\n          ID, Name, Value, Placeholder string\n          Required, Disabled, Readonly, Autofocus bool\n          Autosize *bool             // tri-state; nil => autosize on\n          MinHeight, MaxHeight string // Tailwind height utils\n          Rows, Cols int\n          MinLength, MaxLength int\n          Autocomplete, Autocapitalize, Autocorrect, Wrap, Dirname string\n          Spellcheck *bool           // tri-state\n          Form, AriaLabel, AriaLabelledby, AriaDescribedby string\n          AriaInvalid, AriaRequired string\n          Attrs map[string]string\n      }\n\n      tpl.ExecuteTemplate(w, \"autosize-textarea\", AutosizeTextareaArgs{\n          Name: \"reply\", Placeholder: \"Write a reply…\",\n      })\n\n  Pass Autosize=&false for a plain bounded textarea (field-sizing: fixed).\n*/}}\n\n{{define \"autosize-textarea\"}}\n{{- $base := \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 md:text-sm dark:bg-input/30 [&.htmx-request]:opacity-70\" -}}\n{{- $autosize := true -}}{{- if .Autosize}}{{- $autosize = deref .Autosize -}}{{- end -}}\n{{- $sizing := \"field-sizing-content resize-none\" -}}{{- if not $autosize}}{{- $sizing = \"field-sizing-fixed resize-y\" -}}{{- end -}}\n{{- $minH := or .MinHeight \"min-h-16\" -}}\n{{- $maxH := or .MaxHeight \"max-h-80\" -}}\n<textarea class=\"{{$base}} {{$sizing}} {{$minH}} {{$maxH}} overflow-auto\"\n          {{- if .ID}} id=\"{{.ID}}\"{{end}}\n          {{- if .Name}} name=\"{{.Name}}\"{{end}}\n          {{- if .Placeholder}} placeholder=\"{{.Placeholder}}\"{{end}}\n          {{- if .Required}} required{{end}}\n          {{- if .Disabled}} disabled{{end}}\n          {{- if .Readonly}} readonly{{end}}\n          {{- if .Rows}} rows=\"{{.Rows}}\"{{end}}\n          {{- if .Cols}} cols=\"{{.Cols}}\"{{end}}\n          {{- if .MinLength}} minlength=\"{{.MinLength}}\"{{end}}\n          {{- if .MaxLength}} maxlength=\"{{.MaxLength}}\"{{end}}\n          {{- if .Autocomplete}} autocomplete=\"{{.Autocomplete}}\"{{end}}\n          {{- if .Autocapitalize}} autocapitalize=\"{{.Autocapitalize}}\"{{end}}\n          {{- if .Autocorrect}} autocorrect=\"{{.Autocorrect}}\"{{end}}\n          {{- if .Autofocus}} autofocus{{end}}\n          {{- if .Spellcheck}} spellcheck=\"{{if deref .Spellcheck}}true{{else}}false{{end}}\"{{end}}\n          {{- if .Dirname}} dirname=\"{{.Dirname}}\"{{end}}\n          {{- if .Wrap}} wrap=\"{{.Wrap}}\"{{end}}\n          {{- if .Form}} form=\"{{.Form}}\"{{end}}\n          {{- if .AriaLabel}} aria-label=\"{{.AriaLabel}}\"{{end}}\n          {{- if .AriaLabelledby}} aria-labelledby=\"{{.AriaLabelledby}}\"{{end}}\n          {{- if .AriaDescribedby}} aria-describedby=\"{{.AriaDescribedby}}\"{{end}}\n          {{- if .AriaInvalid}} aria-invalid=\"{{.AriaInvalid}}\"{{end}}\n          {{- if .AriaRequired}} aria-required=\"{{.AriaRequired}}\"{{end}}\n          data-slot=\"autosize-textarea\"\n          data-autosize=\"{{if $autosize}}true{{else}}false{{end}}\"\n          {{- range $k, $v := .Attrs}} {{$k}}=\"{{$v}}\"{{end -}}\n>{{.Value}}</textarea>\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/autosize_textarea.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/autosize_textarea.ex",
      "content": "defmodule ShadcnHtmx.Components.AutosizeTextarea do\n  @moduledoc \"\"\"\n  Autosize Textarea — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  Mirrors registry/ui/autosize-textarea.tsx. A `<textarea>` that grows and\n  shrinks to fit its content between min/max bounds via the single CSS rule\n  `field-sizing: content` — no scrollHeight JS hack required. See\n  repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md and\n  the Tailwind utility in repos/tailwindcss/.../utilities.ts (field-sizing-content).\n\n  Where `field-sizing` is unsupported the rule is ignored and the element renders\n  as a plain fixed-height textarea — progressive enhancement, not emulation.\n\n  ## Examples\n\n      <.autosize_textarea name=\"reply\" placeholder=\"Write a reply…\" />\n\n      <.autosize_textarea name=\"comment\"\n        hx-post=\"/comments/draft\" hx-trigger=\"input changed delay:500ms\" />\n\n      <.autosize_textarea autosize={false} value=\"A plain bounded textarea.\" />\n  \"\"\"\n\n  use Phoenix.Component\n\n  @base \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs \" <>\n          \"transition-[color,box-shadow] outline-none \" <>\n          \"placeholder:text-muted-foreground \" <>\n          \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 \" <>\n          \"disabled:cursor-not-allowed disabled:opacity-50 \" <>\n          \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 \" <>\n          \"md:text-sm dark:bg-input/30 \" <>\n          \"[&.htmx-request]:opacity-70\"\n\n  attr :class, :string, default: nil\n  attr :value, :string, default: nil\n  attr :autosize, :boolean, default: true\n  attr :min_height, :string, default: \"min-h-16\"\n  attr :max_height, :string, default: \"max-h-80\"\n\n  attr :rest, :global,\n    include:\n      ~w(hx-get hx-post hx-put hx-patch hx-target hx-swap hx-trigger hx-indicator hx-vals hx-include\n         id name placeholder required disabled readonly\n         rows cols minlength maxlength autocomplete autocapitalize autocorrect autofocus spellcheck dirname wrap form\n         aria-label aria-labelledby aria-describedby aria-invalid aria-required)\n\n  def autosize_textarea(assigns) do\n    sizing = if assigns.autosize, do: \"field-sizing-content resize-none\", else: \"field-sizing-fixed resize-y\"\n\n    assigns =\n      assigns\n      |> assign(:base_class, @base)\n      |> assign(:sizing_class, sizing)\n\n    ~H\"\"\"\n    <textarea\n      class={[@base_class, @sizing_class, @min_height, @max_height, \"overflow-auto\", @class]}\n      data-slot=\"autosize-textarea\"\n      data-autosize={to_string(@autosize)}\n      {@rest}\n    >{@value}</textarea>\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/autosize-textarea.html",
      "type": "registry:file",
      "target": "snippets/autosize-textarea.html",
      "content": "<!--\n  shadcn-htmx — raw HTML autosize-textarea snippets.\n\n  Mirrors registry/ui/autosize-textarea.tsx. The `field-sizing: content` rule\n  (Tailwind utility field-sizing-content) makes the element grow/shrink to fit\n  its content between the min-h-* / max-h-* bounds — no scrollHeight JS hook.\n  See repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.\n\n  Where field-sizing is unsupported the rule is ignored and the textarea renders\n  as an ordinary fixed-height field (sized by min-height + rows). Progressive\n  enhancement, not emulation — relies only on theme tokens.\n\n  BASE:\n    flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base\n    shadow-xs transition-[color,box-shadow] outline-none\n    placeholder:text-muted-foreground\n    focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\n    disabled:cursor-not-allowed disabled:opacity-50\n    aria-invalid:border-destructive aria-invalid:ring-destructive/20\n    dark:aria-invalid:ring-destructive/40\n    md:text-sm dark:bg-input/30\n    [&.htmx-request]:opacity-70\n  AUTOSIZE: field-sizing-content resize-none min-h-16 max-h-80 overflow-auto\n  FIXED:    field-sizing-fixed   resize-y   min-h-16 max-h-80 overflow-auto\n-->\n\n<!-- Basic — grows as you type, scrolls past max-h-80 -->\n<textarea name=\"reply\" placeholder=\"Write a reply… the field grows as you type\"\n  data-slot=\"autosize-textarea\" data-autosize=\"true\"\n  class=\"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 md:text-sm dark:bg-input/30 field-sizing-content resize-none min-h-16 max-h-80 overflow-auto\"></textarea>\n\n<!-- Plain bounded (autosize off) — classic fixed textarea with a drag handle -->\n<textarea name=\"notes\" data-slot=\"autosize-textarea\" data-autosize=\"false\"\n  class=\"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 md:text-sm dark:bg-input/30 field-sizing-fixed resize-y min-h-16 max-h-80 overflow-auto\">A plain bounded textarea.</textarea>\n\n<!-- Disabled -->\n<textarea disabled data-slot=\"autosize-textarea\" data-autosize=\"true\"\n  class=\"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 field-sizing-content resize-none min-h-16 max-h-80 overflow-auto\">Locked content.</textarea>\n\n<!-- Invalid + describedby -->\n<div>\n  <textarea name=\"comment\" aria-invalid=\"true\" aria-describedby=\"comment-error\"\n            placeholder=\"Comment…\" data-slot=\"autosize-textarea\" data-autosize=\"true\"\n    class=\"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 md:text-sm dark:bg-input/30 field-sizing-content resize-none min-h-16 max-h-80 overflow-auto\"></textarea>\n  <p id=\"comment-error\" class=\"mt-1 text-sm text-destructive\">Comment can't be empty.</p>\n</div>\n\n<!-- htmx — autosave draft on input pause -->\n<textarea name=\"draft\" placeholder=\"Start writing… we'll save as you pause\"\n          data-slot=\"autosize-textarea\" data-autosize=\"true\"\n          hx-post=\"/drafts/123\" hx-trigger=\"input changed delay:600ms\" hx-swap=\"none\"\n  class=\"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 md:text-sm dark:bg-input/30 field-sizing-content resize-none min-h-16 max-h-80 overflow-auto [&.htmx-request]:opacity-70\"></textarea>\n"
    }
  ]
}