# Input — accessible headless input wrapper
#
# Tracks focus, validation, and disabled state via data attributes.
# Ships zero CSS.
#
# Usage:
#   Input value <=> name, placeholder: "Enter name"
#   Input value <=> email, type: "email", required: true

export Input = component
  @value:: string := ""
  @placeholder:: string := ""
  @type:: string := "text"
  @disabled:: boolean := false
  @required:: boolean := false

  focused := false
  touched := false

  onInput: (e) -> @value = e.target.value
  onFocus: -> focused = true
  onBlur: ->
    focused = false
    touched = true

  render
    input type: @type, value: @value, placeholder: @placeholder
      disabled: @disabled
      required: @required
      aria-disabled: @disabled?!
      aria-required: @required?!
      $disabled: @disabled?!
      $focused: focused?!
      $touched: touched?!
      @focusin: @onFocus
      @focusout: @onBlur
