component: Input
name: input
category: forms
version: 1.0.0

ai:
  intent: "Single-line textual data entry"
  visual_role: "Input capture"
  density: "comfortable"
  preferred_when:
    - "Search bars"
    - "Short form fields (name, email, phone, quantity)"
  avoid_when:
    - "Multi-line text entry (use textarea)"
    - "Single choice from defined list (use select or radio)"

base:
  display: flex
  width: 100%
  align-items: center
  font-family: inherit
  background-color: "{color.surface.base}"
  color: "{color.neutral.900}"
  border: "1px solid {color.border.subtle}"
  border-radius: "{radius.md}"
  outline: none
  transition-duration: "{duration.fast}"
  transition-timing-function: "{ease.standard}"

variants:
  default:
    background-color: "{color.surface.base}"
    border-color: "{color.border.subtle}"
  filled:
    background-color: "{color.neutral.100}"
    border-color: transparent

sizes:
  sm:
    font-size: "{text.sm}"
    padding-inline: "{space.3}"
    padding-block: "{space.1-5}"
    border-radius: "{radius.sm}"
  md:
    font-size: "{text.base}"
    padding-inline: "{space.3-5}"
    padding-block: "{space.2}"
    border-radius: "{radius.md}"
  lg:
    font-size: "{text.lg}"
    padding-inline: "{space.4}"
    padding-block: "{space.3}"
    border-radius: "{radius.lg}"

states:
  hover:
    border-color: "{color.primary.bg}"
  focus:
    border-color: "{color.primary.bg}"
    outline: "2px solid {color.primary.subtle}"
  disabled:
    background-color: "{color.neutral.100}"
    opacity: 0.6
    cursor: not-allowed
  invalid:
    border-color: "{color.danger.bg}"
    outline: "2px solid {color.danger.subtle}"

contract:
  anatomy:
    - root
    - prefix-icon
    - control
    - suffix-icon
    - clear-button
  props:
    size:
      default: md
      values: [sm, md, lg]
    variant:
      default: default
      values: [default, filled]
    state:
      default: default
      values: [default, hover, focus, disabled, invalid, valid]
  slots:
    - start
    - default
    - end

structure:
  base:
    native_class: qhr-input
    tailwind: "w-full bg-[var(--qhr-surface-base)] text-[var(--qhr-content-primary)] border border-[var(--qhr-border-strong)] transition-colors outline-none font-sans"
  sizes:
    sm:
      native_modifier: qhr-input--sm
      tailwind: "text-sm px-[var(--qhr-space-3)] py-[var(--qhr-space-1-5)] rounded-[var(--qhr-radius-sm)]"
    md:
      native_modifier: qhr-input--md
      tailwind: "text-base px-[var(--qhr-space-3-5)] py-[var(--qhr-space-2)] rounded-[var(--qhr-radius-md)]"
    lg:
      native_modifier: qhr-input--lg
      tailwind: "text-lg px-[var(--qhr-space-4)] py-[var(--qhr-space-3)] rounded-[var(--qhr-radius-lg)]"
  states:
    focus:
      native_modifier: is-focused
      tailwind: "border-[var(--qhr-color-primary-600)] ring-2 ring-[var(--qhr-ring-focus)]"
    disabled:
      native_modifier: is-disabled
      tailwind: "bg-[var(--qhr-surface-muted)] opacity-60 cursor-not-allowed"

accessibility:
  role: textbox
  keyboard: "Standard text editing keys"
  aria_required:
    - aria-invalid: when field contains validation error

use_cases:
  search-query:
    intent: search
    variant: default
    size: md
    slots:
      leadingIcon: "search"
      clearTrigger: true
    content:
      placeholder: "ابحث هنا..."
      placeholder_en: "Search here..."
  email-auth:
    intent: authentication
    variant: default
    size: md
    content:
      placeholder: "name@example.com"
      type: "email"
      autocomplete: "email"

rtl:
  supported: true
  directional_mirroring: false