Input

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

// Native <input> with shadcn styling. Source of truth:
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx
//
// We render a real <input> so every native behaviour is preserved:
// constraint validation (required, pattern, min/max), client-side autofill,
// browser autocomplete, and the input-mode keyboards on mobile.

export type InputType =
  | "text"
  | "password"
  | "email"
  | "number"
  | "search"
  | "tel"
  | "url"
  | "date"
  | "time"
  | "datetime-local"
  | "month"
  | "week"
  | "color"
  | "file"
  | "hidden"

const base =
  "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none " +
  "selection:bg-primary selection:text-primary-foreground " +
  "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground " +
  "placeholder:text-muted-foreground " +
  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
  "md:text-sm dark:bg-input/30 " +
  "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 " +
  // htmx-request: dim while a request triggered by/targeting this input is
  // in flight (e.g. live-validation patterns).
  "[&.htmx-request]:opacity-70"

export function inputClasses(opts?: { class?: ClassValue }): string {
  return cn(base, opts?.class)
}

type InputProps = {
  type?: InputType
  class?: ClassValue
  id?: string
  name?: string
  value?: string | number
  defaultValue?: string | number
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean

  // String/numeric constraints. The browser enforces these natively when the
  // input is inside a <form> that submits.
  minLength?: number
  maxLength?: number
  min?: number | string
  max?: number | string
  step?: number | string
  pattern?: string

  // Mobile UX: hint to the OS keyboard layout (numeric, decimal, email, …)
  // and the Enter key label (done, search, send, …).
  inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send"

  // Submits the text directionality (ltr/rtl) as a separate form field
  // named by this attribute's value. Critical for multilingual forms — the
  // server can preserve the writer's intent even if it doesn't speak the
  // language. Valid for text/search/url/tel/email.
  // See repos/mdn/files/en-us/web/html/reference/elements/input/index.md:357
  dirname?: string

  // type="file" only — request the OS camera with a specific facing mode.
  capture?: "user" | "environment" | boolean

  // Mobile keyboard capitalisation. iOS/Safari honour this aggressively;
  // most useful as "off" for email/password/url where auto-caps is wrong.
  autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters"

  // Spellcheck hint (enumerated global attribute). Set "false" for fields
  // holding PII, codes, usernames, or tokens — spellcheck content may be
  // sent to a third party ("spell-jacking").
  // See repos/mdn/files/en-us/web/html/reference/global_attributes/spellcheck/index.md
  spellcheck?: boolean

  // Autocorrect hint (enumerated global attribute, on/off). Disable for
  // names, usernames, addresses, or coupon/API codes where OS autocorrect
  // is harmful. password/email/url are always "off" per spec.
  // See repos/mdn/files/en-us/web/html/reference/global_attributes/autocorrect/index.md
  autocorrect?: "on" | "off"

  // Visible width in characters for text/email/password/tel/url. Mostly
  // superseded by CSS but useful for graceful fallback rendering.
  size?: number

  // Autofill / completion.
  autocomplete?: string
  autofocus?: boolean
  list?: string

  // For type="file".
  accept?: string
  multiple?: boolean

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

  // Form metadata
  form?: string

  // htmx v4 attributes (subset). htmx fires hx-* on the trigger event, default
  // for an input is "change" (or "input" for type=search). Use hx-trigger to
  // override, e.g. hx-trigger="input changed delay:300ms".
  // See repos/htmx/www/src/content/reference/01-attributes/.
  "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
  "hx-disable"?: string
}

export function Input(props: InputProps) {
  const {
    type = "text",
    class: className,
    ariaLabel,
    ariaLabelledby,
    ariaDescribedby,
    ariaInvalid,
    ariaRequired,
    ...rest
  } = props

  return (
    <input
      type={type}
      class={inputClasses({ 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="input"
      {...rest}
    />
  )
}

{# Input macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/input.tsx for Python/Flask/FastAPI/Django/Jinja2.

   Usage:
       {% from "components/input.html" import input %}
       {{ input(name="email", type="email", placeholder="[email protected]") }}
       {{ input(name="q", type="search",
                hx_get="/search", hx_target="#results",
                hx_trigger="input changed delay:300ms") }}

   All hx-* attributes are passed through via **attrs (underscores become
   dashes, so `hx_get="/search"` emits `hx-get="/search"`).
   See repos/htmx/www/src/content/reference/01-attributes/. #}

{% macro input(
    type="text",
    id=none,
    name=none,
    value=none,
    placeholder=none,
    required=false,
    disabled=false,
    readonly=false,
    minlength=none,
    maxlength=none,
    min=none,
    max=none,
    step=none,
    pattern=none,
    inputmode=none,
    enterkeyhint=none,
    autocomplete=none,
    autocapitalize=none,
    spellcheck=none,
    autocorrect=none,
    autofocus=false,
    list=none,
    accept=none,
    capture=none,
    multiple=false,
    size=none,
    dirname=none,
    form=none,
    aria_label=none,
    aria_labelledby=none,
    aria_describedby=none,
    aria_invalid=none,
    aria_required=none,
    extra_class="",
    **attrs
) %}
{%- set base -%}
flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 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 [&.htmx-request]:opacity-70
{%- endset -%}
<input type="{{ type }}"
       class="{{ base }} {{ extra_class }}"
       {%- if id %} id="{{ id }}"{% endif %}
       {%- if name %} name="{{ name }}"{% endif %}
       {%- if value is not none %} value="{{ value }}"{% endif %}
       {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
       {%- if required %} required{% endif %}
       {%- if disabled %} disabled{% endif %}
       {%- if readonly %} readonly{% endif %}
       {%- if minlength is not none %} minlength="{{ minlength }}"{% endif %}
       {%- if maxlength is not none %} maxlength="{{ maxlength }}"{% endif %}
       {%- if min is not none %} min="{{ min }}"{% endif %}
       {%- if max is not none %} max="{{ max }}"{% endif %}
       {%- if step is not none %} step="{{ step }}"{% endif %}
       {%- if pattern %} pattern="{{ pattern }}"{% endif %}
       {%- if inputmode %} inputmode="{{ inputmode }}"{% endif %}
       {%- if enterkeyhint %} enterkeyhint="{{ enterkeyhint }}"{% endif %}
       {%- if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}
       {%- if autocapitalize %} autocapitalize="{{ autocapitalize }}"{% endif %}
       {# spellcheck/autocorrect: enumerated global attrs — see repos/mdn/files/en-us/web/html/reference/global_attributes/spellcheck/index.md #}
       {%- if spellcheck is not none %} spellcheck="{{ 'true' if spellcheck else 'false' }}"{% endif %}
       {%- if autocorrect %} autocorrect="{{ autocorrect }}"{% endif %}
       {%- if autofocus %} autofocus{% endif %}
       {%- if list %} list="{{ list }}"{% endif %}
       {%- if accept %} accept="{{ accept }}"{% endif %}
       {%- if capture is not none %} capture{% if capture is string %}="{{ capture }}"{% endif %}{% endif %}
       {%- if multiple %} multiple{% endif %}
       {%- if size is not none %} size="{{ size }}"{% endif %}
       {%- if dirname %} dirname="{{ dirname }}"{% 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="input"
       {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>
{% endmacro %}

{{/*
  Input template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/input.tsx for Go projects using html/template.

  Usage in your code:

      type InputArgs struct {
          Type        string // text | password | email | number | search | tel | url | date | …
          ID          string
          Name        string
          Value       string
          Placeholder string
          Required    bool
          Disabled    bool
          Readonly    bool

          // Validation
          MinLength int
          MaxLength int
          Min       string
          Max       string
          Step      string
          Pattern   string

          // Mobile UX
          InputMode      string // none | text | decimal | numeric | tel | search | email | url
          EnterKeyHint   string // enter | done | go | next | previous | search | send
          Autocapitalize string // off | none | on | sentences | words | characters
          Spellcheck     *bool  // tri-state spellcheck hint (enumerated global attr)
          Autocorrect    string // "" | on | off  (enumerated global attr)

          // Autofill / completion
          Autocomplete string
          Autofocus    bool
          List         string // datalist id

          // type="file"
          Accept   string
          Multiple bool
          Capture  string // "" | "user" | "environment" | "true"

          // Display / form behaviour
          Size    string // visible width in characters
          Dirname string // submits text directionality as a separate field

          // Form metadata
          Form string

          // ARIA
          AriaLabel       string
          AriaLabelledby  string
          AriaDescribedby string
          AriaInvalid     string // "true" | "false" | "grammar" | "spelling"
          AriaRequired    string // "true" | "false"

          // Everything else (hx-get, hx-target, hx-trigger, …)
          Attrs map[string]string
      }

      tpl.ExecuteTemplate(w, "input", InputArgs{
          Type: "email", Name: "email",
          Placeholder: "[email protected]",
          Required: true,
      })

  See repos/mdn/files/en-us/web/html/reference/elements/input/ for native
  attribute semantics.
*/}}

{{define "input"}}
{{- $type := or .Type "text" -}}
{{- $base := "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 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 [&.htmx-request]:opacity-70" -}}
<input type="{{$type}}"
       class="{{$base}}"
       {{- if .ID}} id="{{.ID}}"{{end}}
       {{- if .Name}} name="{{.Name}}"{{end}}
       {{- if .Value}} value="{{.Value}}"{{end}}
       {{- if .Placeholder}} placeholder="{{.Placeholder}}"{{end}}
       {{- if .Required}} required{{end}}
       {{- if .Disabled}} disabled{{end}}
       {{- if .Readonly}} readonly{{end}}
       {{- if .MinLength}} minlength="{{.MinLength}}"{{end}}
       {{- if .MaxLength}} maxlength="{{.MaxLength}}"{{end}}
       {{- if .Min}} min="{{.Min}}"{{end}}
       {{- if .Max}} max="{{.Max}}"{{end}}
       {{- if .Step}} step="{{.Step}}"{{end}}
       {{- if .Pattern}} pattern="{{.Pattern}}"{{end}}
       {{- if .InputMode}} inputmode="{{.InputMode}}"{{end}}
       {{- if .EnterKeyHint}} enterkeyhint="{{.EnterKeyHint}}"{{end}}
       {{- if .Autocomplete}} autocomplete="{{.Autocomplete}}"{{end}}
       {{- if .Autocapitalize}} autocapitalize="{{.Autocapitalize}}"{{end}}
       {{- /* spellcheck/autocorrect: enumerated global attrs — repos/mdn/files/en-us/web/html/reference/global_attributes/spellcheck/index.md */ -}}
       {{- if .Spellcheck}} spellcheck="{{if deref .Spellcheck}}true{{else}}false{{end}}"{{end}}
       {{- if .Autocorrect}} autocorrect="{{.Autocorrect}}"{{end}}
       {{- if .Autofocus}} autofocus{{end}}
       {{- if .List}} list="{{.List}}"{{end}}
       {{- if .Accept}} accept="{{.Accept}}"{{end}}
       {{- if .Capture}} capture{{if ne .Capture "true"}}="{{.Capture}}"{{end}}{{end}}
       {{- if .Multiple}} multiple{{end}}
       {{- if .Size}} size="{{.Size}}"{{end}}
       {{- if .Dirname}} dirname="{{.Dirname}}"{{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="input"
       {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>
{{end}}

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

  Mirrors registry/ui/input.tsx. Works with plain HEEx and LiveView forms;
  htmx attributes and any other input attribute pass through via `:rest`.

  ## Examples

      <.input type="email" name="email" placeholder="[email protected]" required />
      <.input type="search" name="q"
              hx-get="/search" hx-target="#results"
              hx-trigger="input changed delay:300ms" />

  See repos/mdn/files/en-us/web/html/reference/elements/input/ for native
  attribute semantics.
  """

  use Phoenix.Component

  @base "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs " <>
          "transition-[color,box-shadow] outline-none " <>
          "selection:bg-primary selection:text-primary-foreground " <>
          "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground " <>
          "placeholder:text-muted-foreground " <>
          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " <>
          "md:text-sm dark:bg-input/30 " <>
          "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 " <>
          "[&.htmx-request]:opacity-70"

  attr :type, :string,
    default: "text",
    values:
      ~w(text password email number search tel url date time datetime-local month week color file hidden)

  attr :class, :string, default: nil

  attr :rest, :global,
    include:
      ~w(hx-get hx-post hx-put hx-patch hx-delete hx-target hx-swap hx-trigger hx-indicator hx-vals hx-include hx-disable
         id name value placeholder required disabled readonly
         minlength maxlength min max step pattern
         inputmode enterkeyhint autocomplete autocapitalize autofocus list accept capture multiple size dirname form
         spellcheck autocorrect
         aria-label aria-labelledby aria-describedby aria-invalid aria-required)

  def input(assigns) do
    assigns = assign(assigns, :base_class, @base)

    ~H"""
    <input
      type={@type}
      class={[@base_class, @class]}
      data-slot="input"
      {@rest}
    />
    """
  end
end

<!--
  shadcn-htmx — raw HTML input snippets.

  Mirrors registry/ui/input.tsx. Drop these onto any page that loads Tailwind
  CSS v4 and the shadcn theme variables (background, foreground, input, ring,
  destructive, primary). See app/styles/input.css for the variable defaults.

  BASE (shared by every input):
    flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent
    px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none
    selection:bg-primary selection:text-primary-foreground
    file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm
    file:font-medium file:text-foreground
    placeholder:text-muted-foreground
    disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
    md:text-sm dark:bg-input/30
    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
    [&.htmx-request]:opacity-70
-->

<!-- ─── Common types ────────────────────────────────────────────────── -->

<!-- Email — browser validates locally; required signals the constraint -->
<input type="email" name="email" placeholder="[email protected]" required autocomplete="email" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 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">

<!-- Password — autocomplete="current-password" / "new-password" -->
<input type="password" name="password" autocomplete="current-password" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">

<!-- Number — inputmode="decimal" hints the OS keyboard -->
<input type="number" name="amount" min="0" step="0.01" inputmode="decimal" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">

<!-- Search — pair with hx-get for live-search -->
<input type="search" name="q" placeholder="Search…" autocomplete="off" data-slot="input"
  hx-get="/search" hx-target="#results" hx-trigger="input changed delay:300ms"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&.htmx-request]:opacity-70">

<!-- ─── States ──────────────────────────────────────────────────────── -->

<!-- Invalid — pair with an error message via aria-describedby -->
<div>
  <input type="email" name="email" aria-invalid="true" aria-describedby="email-error"
         placeholder="[email protected]" data-slot="input"
    class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm dark:bg-input/30 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">
  <p id="email-error" class="mt-1 text-sm text-destructive">Enter a valid email address.</p>
</div>

<!-- Disabled — also removes from tab order -->
<input type="text" disabled value="Read-only after save" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30">

<!-- Readonly — value is selectable + focusable, but not editable -->
<input type="text" readonly value="https://example.com/abc-123" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">

<!-- ─── File ────────────────────────────────────────────────────────── -->
<input type="file" name="avatar" accept="image/*" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">

<!-- ─── Sensitive / no-correction ───────────────────────────────────── -->
<!-- spellcheck="false" + autocorrect="off": codes, usernames, tokens, API keys.
     spellcheck content may be sent to a third party ("spell-jacking"); both are
     enumerated global attributes (MDN global_attributes/spellcheck, /autocorrect). -->
<input type="text" name="coupon" placeholder="Coupon code" spellcheck="false" autocorrect="off" autocapitalize="characters" data-slot="input"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">