<script lang="ts">
  export let name: string | undefined = undefined;
  export let type: 'text' | 'email' | 'password' = 'text';
  export let placeholder: string | undefined = undefined;
  export let required: boolean = false;
  export let tabindex: number | undefined = undefined;
  export let minlength: number | undefined = undefined;
  export let maxlength: number | undefined = undefined;
  export let hidden: boolean = false;
  export let value: string | undefined = undefined;
</script>

<input
  {name}
  {type}
  {placeholder}
  {required}
  {tabindex}
  {minlength}
  {maxlength}
  value={value ?? ''}
  class:hidden
  class="px-4 py-3 bg-field text-text-primary placeholder-text-typeable transition-all ring-0 outline outline-1 outline-transparent focus:outline-accent rounded-xl leading-tight" />
