Autosize Textarea

/** @jsxImportSource hono/jsx */
import { cn, type ClassValue } from "@/registry/lib/cn"

// Autosize Textarea — a <textarea> that grows and shrinks to fit its content
// between min/max bounds, delivered by ONE CSS declaration instead of the
// classic scrollHeight JS hack. Source of truth for the platform behaviour:
//   repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md
//     - "field-sizing: content overrides the default preferred sizing of form
//        elements … configure text inputs to shrinkwrap their content and grow
//        as more text is entered."
//     - "<textarea> … If unable to grow due to a width constraint, they grow in
//        height to display additional rows … When a height constraint is then
//        reached, they show a scrollbar."
//     - "rows/cols have no effect on <textarea> with field-sizing: content set."
//     - "using min-height and max-height alongside field-sizing: content is
//        quite effective … allow the control to grow and shrink … and prevent
//        the control from becoming too large or too small."
//   repos/mdn/files/en-us/web/html/reference/elements/textarea/index.md
//        (native element, dirname, wrap, readonly/disabled semantics)
//
// Tailwind v4 ships the utility natively — see
//   repos/tailwindcss/packages/tailwindcss/src/utilities.ts
//     staticUtility('field-sizing-content', [['field-sizing','content']])
//     staticUtility('field-sizing-fixed',   [['field-sizing','fixed']])
//
// htmx attrs (hx-post / hx-trigger="input changed delay:…") verified against
//   repos/htmx/www/reference.md (forwarded untouched via {...rest}).
//
// Style analogue: registry/ui/textarea.tsx (shares the base field styling).
//
// DEGRADATION: where field-sizing is unsupported, the rule is simply ignored
// and the element renders as an ordinary fixed-height textarea sized by
// min-height (and rows, which the browser then honours). No JS, no polyfill —
// progressive enhancement, not emulation. Pass autosize={false} to opt out
// explicitly (field-sizing-fixed), turning it into a plain bounded textarea.

// Bounds are expressed as utilities so a single CSS line drives the resize.
// Defaults: grow from ~2 lines up to ~10 lines, then scroll.
const 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: dim while a request triggered by/targeting this textarea is
  // in flight (e.g. autosave / live-validation).
  "[&.htmx-request]:opacity-70"

// Sizing keyword maps. content => grows with text; fixed => classic textarea
// (resizable handle only). Kept as Record<Union,string> per house style.
const sizing: Record<"content" | "fixed", string> = {
  content: "field-sizing-content resize-none",
  fixed: "field-sizing-fixed resize-y",
}

export function autosizeTextareaClasses(opts?: {
  autosize?: boolean
  minHeight?: ClassValue
  maxHeight?: ClassValue
  class?: ClassValue
}): string {
  const auto = opts?.autosize !== false
  return cn(
    base,
    auto ? sizing.content : sizing.fixed,
    opts?.minHeight ?? "min-h-16",
    // Past the max, field-sizing: content yields a scrollbar (per MDN).
    opts?.maxHeight ?? "max-h-80",
    "overflow-auto",
    opts?.class,
  )
}

type AutosizeTextareaProps = {
  class?: ClassValue
  id?: string
  name?: string
  value?: string
  defaultValue?: string
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean

  // Autosize behaviour. true (default) => field-sizing: content; false =>
  // field-sizing: fixed, a plain bounded textarea with a drag handle.
  autosize?: boolean

  // Lower / upper growth bounds, as Tailwind height utilities. These are the
  // RIGHT levers for field-sizing per MDN — not width/height, which would
  // reimpose a fixed size and defeat the feature.
  minHeight?: ClassValue
  maxHeight?: ClassValue

  // rows/cols are honoured ONLY as the no-support fallback size — they have no
  // effect once field-sizing: content applies (MDN). Useful for graceful
  // degradation in older engines.
  rows?: number
  cols?: number

  // Validation
  minLength?: number
  maxLength?: number

  // Mobile UX
  autocomplete?: string
  autofocus?: boolean
  spellcheck?: boolean
  autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters"
  autocorrect?: "on" | "off"

  // Submits the text directionality (ltr/rtl) as a separate form field.
  // See repos/mdn/files/en-us/web/html/reference/elements/textarea/index.md
  dirname?: string

  // Wrapping
  wrap?: "hard" | "soft" | "off"

  // ARIA
  ariaLabel?: string
  ariaLabelledby?: string
  ariaDescribedby?: string
  ariaInvalid?: boolean | "grammar" | "spelling"
  ariaRequired?: boolean

  // Form metadata
  form?: string

  // htmx attributes — fire on blur or hx-trigger="input changed delay:300ms"
  // for live validation / autosave patterns. See repos/htmx/www/reference.md.
  "hx-get"?: string
  "hx-post"?: string
  "hx-put"?: string
  "hx-patch"?: string
  "hx-target"?: string
  "hx-swap"?: string
  "hx-trigger"?: string
  "hx-indicator"?: string
  "hx-vals"?: string
  "hx-include"?: string
}

export function AutosizeTextarea(props: AutosizeTextareaProps) {
  const {
    class: className,
    autosize,
    minHeight,
    maxHeight,
    value,
    defaultValue,
    ariaLabel,
    ariaLabelledby,
    ariaDescribedby,
    ariaInvalid,
    ariaRequired,
    ...rest
  } = props

  return (
    <textarea
      class={autosizeTextareaClasses({ autosize, minHeight, maxHeight, class: className })}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      aria-describedby={ariaDescribedby}
      aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}
      aria-required={ariaRequired === undefined ? undefined : String(ariaRequired)}
      data-slot="autosize-textarea"
      data-autosize={autosize === false ? "false" : "true"}
      {...rest}
    >{value ?? defaultValue}</textarea>
  )
}

{# Autosize Textarea macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/autosize-textarea.tsx for Python/Flask/FastAPI/Django/Jinja2.

   A <textarea> that grows/shrinks to fit its content between min/max bounds via
   the single CSS rule `field-sizing: content` — no scrollHeight JS hack. See
   repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.
   Tailwind utility: field-sizing-content (repos/tailwindcss/.../utilities.ts).

   Usage:
       {% from "components/autosize-textarea.html" import autosize_textarea %}
       {{ autosize_textarea(name="reply", placeholder="Write a reply…") }}

   Pass autosize=false for a plain bounded textarea (field-sizing: fixed).
   minheight/maxheight are Tailwind height utilities (default min-h-16 / max-h-80). #}

{% macro autosize_textarea(
    id=none,
    name=none,
    value=none,
    placeholder=none,
    required=false,
    disabled=false,
    readonly=false,
    autosize=true,
    minheight="min-h-16",
    maxheight="max-h-80",
    rows=none,
    cols=none,
    minlength=none,
    maxlength=none,
    autocomplete=none,
    autocapitalize=none,
    autocorrect=none,
    autofocus=false,
    spellcheck=none,
    dirname=none,
    wrap=none,
    form=none,
    aria_label=none,
    aria_labelledby=none,
    aria_describedby=none,
    aria_invalid=none,
    aria_required=none,
    extra_class="",
    **attrs
) %}
{%- set 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
{%- endset -%}
{%- set sizing = "field-sizing-content resize-none" if autosize else "field-sizing-fixed resize-y" -%}
<textarea class="{{ base }} {{ sizing }} {{ minheight }} {{ maxheight }} overflow-auto {{ extra_class }}"
          {%- if id %} id="{{ id }}"{% endif %}
          {%- if name %} name="{{ name }}"{% endif %}
          {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
          {%- if required %} required{% endif %}
          {%- if disabled %} disabled{% endif %}
          {%- if readonly %} readonly{% endif %}
          {%- if rows is not none %} rows="{{ rows }}"{% endif %}
          {%- if cols is not none %} cols="{{ cols }}"{% endif %}
          {%- if minlength is not none %} minlength="{{ minlength }}"{% endif %}
          {%- if maxlength is not none %} maxlength="{{ maxlength }}"{% endif %}
          {%- if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}
          {%- if autocapitalize %} autocapitalize="{{ autocapitalize }}"{% endif %}
          {%- if autocorrect %} autocorrect="{{ autocorrect }}"{% endif %}
          {%- if autofocus %} autofocus{% endif %}
          {%- if spellcheck is not none %} spellcheck="{{ 'true' if spellcheck else 'false' }}"{% endif %}
          {%- if dirname %} dirname="{{ dirname }}"{% endif %}
          {%- if wrap %} wrap="{{ wrap }}"{% endif %}
          {%- if form %} form="{{ form }}"{% endif %}
          {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
          {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
          {%- if aria_describedby %} aria-describedby="{{ aria_describedby }}"{% endif %}
          {%- if aria_invalid is not none %} aria-invalid="{{ aria_invalid|string|lower }}"{% endif %}
          {%- if aria_required is not none %} aria-required="{{ aria_required|string|lower }}"{% endif %}
          data-slot="autosize-textarea"
          data-autosize="{{ 'false' if not autosize else 'true' }}"
          {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>{% if value is not none %}{{ value }}{% endif %}</textarea>
{% endmacro %}

{{/*
  Autosize Textarea template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/autosize-textarea.tsx.

  A <textarea> that grows/shrinks to fit its content between min/max bounds via
  the single CSS rule `field-sizing: content` — no scrollHeight JS hack. See
  repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.
  Tailwind utility: field-sizing-content (repos/tailwindcss/.../utilities.ts).

  Usage:

      type AutosizeTextareaArgs struct {
          ID, Name, Value, Placeholder string
          Required, Disabled, Readonly, Autofocus bool
          Autosize *bool             // tri-state; nil => autosize on
          MinHeight, MaxHeight string // Tailwind height utils
          Rows, Cols int
          MinLength, MaxLength int
          Autocomplete, Autocapitalize, Autocorrect, Wrap, Dirname string
          Spellcheck *bool           // tri-state
          Form, AriaLabel, AriaLabelledby, AriaDescribedby string
          AriaInvalid, AriaRequired string
          Attrs map[string]string
      }

      tpl.ExecuteTemplate(w, "autosize-textarea", AutosizeTextareaArgs{
          Name: "reply", Placeholder: "Write a reply…",
      })

  Pass Autosize=&false for a plain bounded textarea (field-sizing: fixed).
*/}}

{{define "autosize-textarea"}}
{{- $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" -}}
{{- $autosize := true -}}{{- if .Autosize}}{{- $autosize = deref .Autosize -}}{{- end -}}
{{- $sizing := "field-sizing-content resize-none" -}}{{- if not $autosize}}{{- $sizing = "field-sizing-fixed resize-y" -}}{{- end -}}
{{- $minH := or .MinHeight "min-h-16" -}}
{{- $maxH := or .MaxHeight "max-h-80" -}}
<textarea class="{{$base}} {{$sizing}} {{$minH}} {{$maxH}} overflow-auto"
          {{- if .ID}} id="{{.ID}}"{{end}}
          {{- if .Name}} name="{{.Name}}"{{end}}
          {{- if .Placeholder}} placeholder="{{.Placeholder}}"{{end}}
          {{- if .Required}} required{{end}}
          {{- if .Disabled}} disabled{{end}}
          {{- if .Readonly}} readonly{{end}}
          {{- if .Rows}} rows="{{.Rows}}"{{end}}
          {{- if .Cols}} cols="{{.Cols}}"{{end}}
          {{- if .MinLength}} minlength="{{.MinLength}}"{{end}}
          {{- if .MaxLength}} maxlength="{{.MaxLength}}"{{end}}
          {{- if .Autocomplete}} autocomplete="{{.Autocomplete}}"{{end}}
          {{- if .Autocapitalize}} autocapitalize="{{.Autocapitalize}}"{{end}}
          {{- if .Autocorrect}} autocorrect="{{.Autocorrect}}"{{end}}
          {{- if .Autofocus}} autofocus{{end}}
          {{- if .Spellcheck}} spellcheck="{{if deref .Spellcheck}}true{{else}}false{{end}}"{{end}}
          {{- if .Dirname}} dirname="{{.Dirname}}"{{end}}
          {{- if .Wrap}} wrap="{{.Wrap}}"{{end}}
          {{- if .Form}} form="{{.Form}}"{{end}}
          {{- if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}
          {{- if .AriaLabelledby}} aria-labelledby="{{.AriaLabelledby}}"{{end}}
          {{- if .AriaDescribedby}} aria-describedby="{{.AriaDescribedby}}"{{end}}
          {{- if .AriaInvalid}} aria-invalid="{{.AriaInvalid}}"{{end}}
          {{- if .AriaRequired}} aria-required="{{.AriaRequired}}"{{end}}
          data-slot="autosize-textarea"
          data-autosize="{{if $autosize}}true{{else}}false{{end}}"
          {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>{{.Value}}</textarea>
{{end}}

defmodule ShadcnHtmx.Components.AutosizeTextarea do
  @moduledoc """
  Autosize Textarea — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.

  Mirrors registry/ui/autosize-textarea.tsx. A `<textarea>` that grows and
  shrinks to fit its content between min/max bounds via the single CSS rule
  `field-sizing: content` — no scrollHeight JS hack required. See
  repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md and
  the Tailwind utility in repos/tailwindcss/.../utilities.ts (field-sizing-content).

  Where `field-sizing` is unsupported the rule is ignored and the element renders
  as a plain fixed-height textarea — progressive enhancement, not emulation.

  ## Examples

      <.autosize_textarea name="reply" placeholder="Write a reply…" />

      <.autosize_textarea name="comment"
        hx-post="/comments/draft" hx-trigger="input changed delay:500ms" />

      <.autosize_textarea autosize={false} value="A plain bounded textarea." />
  """

  use Phoenix.Component

  @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"

  attr :class, :string, default: nil
  attr :value, :string, default: nil
  attr :autosize, :boolean, default: true
  attr :min_height, :string, default: "min-h-16"
  attr :max_height, :string, default: "max-h-80"

  attr :rest, :global,
    include:
      ~w(hx-get hx-post hx-put hx-patch hx-target hx-swap hx-trigger hx-indicator hx-vals hx-include
         id name placeholder required disabled readonly
         rows cols minlength maxlength autocomplete autocapitalize autocorrect autofocus spellcheck dirname wrap form
         aria-label aria-labelledby aria-describedby aria-invalid aria-required)

  def autosize_textarea(assigns) do
    sizing = if assigns.autosize, do: "field-sizing-content resize-none", else: "field-sizing-fixed resize-y"

    assigns =
      assigns
      |> assign(:base_class, @base)
      |> assign(:sizing_class, sizing)

    ~H"""
    <textarea
      class={[@base_class, @sizing_class, @min_height, @max_height, "overflow-auto", @class]}
      data-slot="autosize-textarea"
      data-autosize={to_string(@autosize)}
      {@rest}
    >{@value}</textarea>
    """
  end
end

<!--
  shadcn-htmx — raw HTML autosize-textarea snippets.

  Mirrors registry/ui/autosize-textarea.tsx. The `field-sizing: content` rule
  (Tailwind utility field-sizing-content) makes the element grow/shrink to fit
  its content between the min-h-* / max-h-* bounds — no scrollHeight JS hook.
  See repos/mdn/files/en-us/web/css/reference/properties/field-sizing/index.md.

  Where field-sizing is unsupported the rule is ignored and the textarea renders
  as an ordinary fixed-height field (sized by min-height + rows). Progressive
  enhancement, not emulation — relies only on theme tokens.

  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
  AUTOSIZE: field-sizing-content resize-none min-h-16 max-h-80 overflow-auto
  FIXED:    field-sizing-fixed   resize-y   min-h-16 max-h-80 overflow-auto
-->

<!-- Basic — grows as you type, scrolls past max-h-80 -->
<textarea name="reply" placeholder="Write a reply… the field grows as you type"
  data-slot="autosize-textarea" data-autosize="true"
  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>

<!-- Plain bounded (autosize off) — classic fixed textarea with a drag handle -->
<textarea name="notes" data-slot="autosize-textarea" data-autosize="false"
  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>

<!-- Disabled -->
<textarea disabled data-slot="autosize-textarea" data-autosize="true"
  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>

<!-- Invalid + describedby -->
<div>
  <textarea name="comment" aria-invalid="true" aria-describedby="comment-error"
            placeholder="Comment…" data-slot="autosize-textarea" data-autosize="true"
    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>
  <p id="comment-error" class="mt-1 text-sm text-destructive">Comment can't be empty.</p>
</div>

<!-- htmx — autosave draft on input pause -->
<textarea name="draft" placeholder="Start writing… we'll save as you pause"
          data-slot="autosize-textarea" data-autosize="true"
          hx-post="/drafts/123" hx-trigger="input changed delay:600ms" hx-swap="none"
  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>